From a731b5ff7137a5695899eab773f30326a407ef88 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Thu, 16 Aug 2018 14:25:39 +0000 Subject: [PATCH] Bug 21237: Clean up staff client SCSS This patch removes a redundant linter configuration, .sass-lint.yml, which was added by mistake. Some linter rules have been modified to better conform to the defacto standard set by our existing CSS. staff-global.scss has been corrected to comply with linter rules (https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md): - Comment, style: silent - TrailingSemicolon, true - Shorthand - ColorKeyword, enabled: true - PropertySortOrder Signed-off-by: Jonathan Druart --- .sass-lint.yml | 101 ------- .scss-lint.yml | 12 +- .../intranet-tmpl/prog/css/src/staff-global.scss | 307 ++++++++++----------- 3 files changed, 159 insertions(+), 261 deletions(-) delete mode 100644 .sass-lint.yml diff --git a/.sass-lint.yml b/.sass-lint.yml deleted file mode 100644 index bc12326fa8..0000000000 --- a/.sass-lint.yml +++ /dev/null @@ -1,101 +0,0 @@ -options: - formatter: stylish -files: - include: '**/*.scss' -rules: - # Extends - extends-before-mixins: 1 - extends-before-declarations: 1 - placeholder-in-extend: 1 - - # Mixins - mixins-before-declarations: 1 - - # Line Spacing - one-declaration-per-line: 1 - empty-line-between-blocks: 1 - single-line-per-selector: 1 - - # Disallows - no-attribute-selectors: 0 - no-color-hex: 0 - no-color-keywords: 1 - no-color-literals: 0 - no-combinators: 0 - no-css-comments: 0 - no-debug: 1 - no-disallowed-properties: 0 - no-duplicate-properties: 1 - no-empty-rulesets: 1 - no-extends: 0 - no-ids: 0 - no-important: 1 - no-invalid-hex: 1 - no-mergeable-selectors: 1 - no-misspelled-properties: 1 - no-qualifying-elements: 1 - no-trailing-whitespace: 1 - no-trailing-zero: 1 - no-transition-all: 1 - no-universal-selectors: 0 - no-url-domains: 1 - no-url-protocols: 1 - no-vendor-prefixes: 1 - no-warn: 1 - property-units: 0 - - # Nesting - declarations-before-nesting: 1 - force-attribute-nesting: 1 - force-element-nesting: 1 - force-pseudo-nesting: 1 - - # Name Formats - class-name-format: 0 - function-name-format: 1 - id-name-format: 0 - mixin-name-format: 1 - placeholder-name-format: 1 - variable-name-format: 1 - - # Style Guide - attribute-quotes: 1 - bem-depth: 0 - border-zero: 1 - brace-style: 1 - clean-import-paths: 1 - empty-args: 1 - hex-length: 0 - hex-notation: 0 - indentation: - - 1 - - size: 4 - leading-zero: 1 - max-line-length: 0 - max-file-line-count: 0 - nesting-depth: - - 1 - - max-depth: 4 - property-sort-order: 1 - pseudo-element: 1 - quotes: - - 1 - - style: double - shorthand-values: 0 - url-quotes: 1 - variable-for-property: 1 - zero-unit: 1 - - # Inner Spacing - space-after-comma: 1 - space-before-colon: 1 - space-after-colon: 1 - space-before-brace: 1 - space-before-bang: 1 - space-after-bang: 1 - space-between-parens: 0 - space-around-operator: 1 - - # Final Items - trailing-semicolon: 1 - final-newline: 1 diff --git a/.scss-lint.yml b/.scss-lint.yml index aec327331d..945faa20b8 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -28,13 +28,13 @@ linters: enabled: false ColorKeyword: - enabled: false + enabled: true ColorVariable: enabled: false Comment: - enabled: false + enabled: true style: silent DebugStatement: @@ -69,7 +69,7 @@ linters: HexLength: enabled: false - style: short # or 'long' + style: short # or 'long' HexNotation: enabled: true @@ -109,7 +109,7 @@ linters: convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern NestingDepth: - enabled: true + enabled: false max_depth: 4 ignore_parent_selectors: false @@ -146,7 +146,7 @@ linters: allow_element_with_id: false SelectorDepth: - enabled: true + enabled: false max_depth: 4 SelectorFormat: @@ -198,7 +198,7 @@ linters: SpaceBetweenParens: enabled: true - spaces: 1 + spaces: 0 StringQuotes: enabled: true diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss index c90ba17c94..695226df9f 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -4,7 +4,7 @@ $font-main: Arial, Verdana, Helvetica, sans-serif; $font-monospace: "Courier New", Courier, monospace; @mixin default-button { - background: linear-gradient(to bottom, #FFFFFF 0%, #F7F7F7 35%, #E0E0E0 100%); /* W3C */ + background: linear-gradient(to bottom, #FFFFFF 0%, #F7F7F7 35%, #E0E0E0 100%); border: 1px outset #999999; border-left-color: #666; border-top-color: #666; @@ -20,7 +20,7 @@ $font-monospace: "Courier New", Courier, monospace; ::selection { background: #538200; - color: #FFFFFF; /* Safari and Opera */ + color: #FFFFFF; } a { @@ -157,14 +157,14 @@ a { aside { h5 { - font-size : 100%; - margin : .5em 0; + font-size: 100%; + margin: .5em 0; } fieldset { &.brief { margin: 0; - padding : .4em .7em; + padding: .4em .7em; fieldset { margin: 0; @@ -186,23 +186,25 @@ aside { label { display: inline; } + span { &.label { - display: inline + display: inline; } } } &.radio { + padding: .7em 0; + input { padding: .3em 0; } + label { display: inline; } - padding: .7em 0; - span { &.label { display: inline; @@ -212,13 +214,13 @@ aside { } ol { - font-size : 85%; - margin : 0; - padding : 0; + font-size: 85%; + margin: 0; + padding: 0; } select, - input[type="text"] { + [type="text"] { width: 100%; } } @@ -248,7 +250,7 @@ main { .yui-b { fieldset { &.brief { - input[type="text"], + [type="text"], select { width: auto; } @@ -277,7 +279,7 @@ table { } } - & > caption { + > caption { span { &.actions { font-size: 66%; @@ -295,6 +297,10 @@ table { border: 0; } } + + + table { + margin-top: 1em; + } } td, @@ -345,13 +351,9 @@ th { } } -table + table { - margin-top: 1em; -} - body { font-family: $font-main; - padding: 0 0 4em 0; + padding: 0 0 4em; text-align: left; } @@ -423,7 +425,7 @@ hr { } p { - margin: .5em 0 .5em 0; + margin: .5em 0; } strong { @@ -481,7 +483,7 @@ input { } &:disabled { - @include disabled-button + @include disabled-button; } } @@ -498,7 +500,7 @@ input { } &:disabled { - @include disabled-button + @include disabled-button; } } @@ -532,7 +534,7 @@ label, font-weight: bold; } - /* Permissions Labels */ + // Permissions Labels &.permissioncode { font-style: italic; @@ -591,7 +593,7 @@ label, margin-top: 1em; } -#login_controls { +#login_controls { padding: .4em .5em; position: absolute; right: .5em; @@ -654,7 +656,7 @@ ul { } } - /* For Font Awesome icon bullets */ + // For Font Awesome icon bullets &.fa-ul { li { list-style-type: none; @@ -870,7 +872,7 @@ fieldset { margin: 1em 1em 1em 0; padding: 1em; - & + fieldset { + + fieldset { &.action { padding-top: 20px; } @@ -888,7 +890,7 @@ fieldset { border: 0; clear: both; float: none; - margin: .9em 0 0 0; + margin: .9em 0 0; padding: .4em; width: auto; } @@ -949,7 +951,7 @@ fieldset { clear: left; float: left; font-size: 90%; - margin: .9em 0 0 0; + margin: .9em 0 0; padding: 0; width: 100%; @@ -1084,7 +1086,7 @@ fieldset { ol { list-style-type: none; - padding: 1em 1em 0 1em; + padding: 1em 1em 0; &.radio { label { @@ -1150,7 +1152,7 @@ fieldset { margin: 1em 0 0 11em; } - &+h3 { + + h3 { clear: both; padding-top: .5em; } @@ -1261,12 +1263,24 @@ details[open] { padding: .2em .5em .4em 10px; } -#header + #breadcrumbs { - margin-top: 1em; -} +#header { + &.navbar { + margin-bottom: 0; + } -#header > .container-fluid { - padding: 0; + &.navbar-default { + background: #E6F0F2; + border: 0; + box-shadow: none; + } + + + #breadcrumbs { + margin-top: 1em; + } + + > .container-fluid { + padding: 0; + } } div { @@ -1275,14 +1289,14 @@ div { border: 0; clear: both; float: none; - margin: .9em 0 0 0; + margin: .9em 0 0; padding: .4em; width: auto; } .circmessage { margin-bottom: .3em; - padding: 0 .4em .4em .4em; + padding: 0 .4em .4em; &:first-child { margin-top: 1em; @@ -1303,7 +1317,7 @@ div { } &.help { - margin: .9em 0 0 0; + margin: .9em 0 0; } &.justify { @@ -1311,7 +1325,7 @@ div { } &.message { - background: linear-gradient(to bottom, #ffffff 0%, #f4f6fa 2%, #eaeef5 23%, #e8edf6 94%, #cddbf2 100%); + background: linear-gradient(to bottom, #FFFFFF 0%, #F4F6FA 2%, #EAEEF5 23%, #E8EDF6 94%, #CDDBF2 100%); border: 1px solid #BCBCBC; text-align: center; width: 55%; @@ -1328,7 +1342,7 @@ div { } &.note { - background: linear-gradient(to bottom, #F4F6FA 0%, #E8EDF6 100%); /* W3C */ + background: linear-gradient(to bottom, #F4F6FA 0%, #E8EDF6 100%); // W3C border: 1px solid #BCBCBC; margin: .5em 0; padding: .5em; @@ -1342,7 +1356,7 @@ div { } } - /* Tools > automatic_item_modification_by_age */ + // Tools > automatic_item_modification_by_age &.rules { display: block; } @@ -1371,13 +1385,13 @@ div { } &.listgroup { - clear: left; + clear: left; h4 { font-style: italic; a { - font-size: 80%; + font-size: 80%; } } @@ -1406,18 +1420,18 @@ div { &.rows { clear: left; float: left; - margin: 0 0 0 0; + margin: 0; padding: 0; width: 100%; - & + div { + + div { &.rows { margin-top: .6em; } } li { - border-bottom: 1px solid #EEE; + border-bottom: 1px solid #EEE; clear: left; float: left; list-style-type: none; @@ -1454,7 +1468,7 @@ div { a { font-weight: bold; - padding: 1px 5px 1px 5px; + padding: 1px 5px; text-decoration: none; &:link, @@ -1474,14 +1488,14 @@ div { background-color: #E6FCB7; color: #666; font-weight: bold; - padding: 1px 5px 1px 5px; + padding: 1px 5px; } .inactive { background-color: #F3F3F3; color: #BCBCBC; font-weight: bold; - padding: 1px 5px 1px 5px; + padding: 1px 5px; } } @@ -1494,7 +1508,7 @@ div { background-position: .5em .5em; background-repeat: no-repeat; float: left; - margin: .3em 0 .5em 0; + margin: .3em 0 .5em; input { font-size: 1.3em; @@ -1508,7 +1522,7 @@ div { &.residentsearch { border: 0; border-bottom: 1px solid #85CA11; - padding: 0 0 .2em 0; + padding: 0 0 .2em; } } @@ -1546,11 +1560,11 @@ div { border-radius: 0 0 4px 4px; } - & > div, - & > ul { + > div, + > ul { display: none; - & > li { + > li { display: none; &:first-of-type { @@ -1606,7 +1620,7 @@ dd { border: 1px solid #E6F0F2; border-radius: 5px 5px 0 0; margin: 0; - padding: 5px 5px 5px 5px; + padding: 5px; } #disabled { @@ -1655,7 +1669,7 @@ dd { } } - & + #menu { + + #menu { margin-right: 0; } } @@ -1679,10 +1693,10 @@ dd { } .patronviews { - border-right: 1px solid #000; + border-right: 1px solid #000; border-top: 1px solid #000; margin-bottom: .5em; - padding: .5em 0 .5em 0; + padding: .5em 0; } .column-tool { @@ -1773,7 +1787,7 @@ dd { } select, - input[type=text] { + [type=text] { width: 100%; } } @@ -1805,7 +1819,7 @@ dd { fieldset { &.brief { select, - input[type=text] { + [type=text] { width: auto; } } @@ -1842,30 +1856,29 @@ dd { .content_hidden { display: none; - visibility: hidden; /* you propably don't need to change this one */ + visibility: hidden; // you propably don't need to change this one } -/* the property for the displayed tab */ +// the property for the displayed tab .content_visible { display: block; - visibility: visible; /* you propably don't need to change this one */ + visibility: visible; // you propably don't need to change this one } #z3950searcht { table { - /* doesn't have desired effect in catalogue/results.tmpl - I'll leave this here for now but there do seem to be casscading CSS errors in this and other CSS fiels - RICKW 20081118 */ border: 0; padding: 20px; } } #z3950_search_targets { - height: 338px; + height: 338px; overflow-y: auto; } #z3950_search_targets_acq { - height: 308px; + height: 308px; overflow-y: auto; } @@ -1885,7 +1898,7 @@ dd { background-color: #FF0000; } -/* Font Awesome icons */ +// Font Awesome icons i { &.error { color: #CC0000; @@ -2021,7 +2034,7 @@ i { } .alert { - background: linear-gradient(to bottom, #FEF8D3 0%, #FFEC91 9%, #FFED87 89%, #F9DC00 100%); /* W3C */ + background: linear-gradient(to bottom, #FEF8D3 0%, #FFEC91 9%, #FFED87 89%, #F9DC00 100%); border: 1px solid #E0C726; color: inherit; text-align: center; @@ -2031,8 +2044,8 @@ i { color: #900; } - /* Redefine a new style for Bootstrap's class "close" since we use that already */ - /* Use × */ + // Redefine a new style for Bootstrap's class "close" since we use that already + // Use × .closebtn { line-height: 20px; position: relative; @@ -2079,7 +2092,7 @@ i { color: #990000; } -/* style for shelving location in catalogsearch */ +// style for shelving location in catalogsearch .shelvingloc { display: block; font-style: italic; @@ -2093,19 +2106,19 @@ i { li { a { - background: linear-gradient(to bottom, #e8f0f6 0%, #e8f0f6 96%, #c1c1c1 100%); + background: linear-gradient(to bottom, #E8F0F6 0%, #E8F0F6 96%, #C1C1C1 100%); border: 1px solid #B9D8D9; border-bottom-left-radius: 5px; border-top-left-radius: 5px; display: block; font-size: 111%; margin: .5em 0; - margin-right: -1px; + margin-right: -1px; padding: .4em .3em; text-decoration: none; &:hover { - background: linear-gradient(to bottom, #fafafa 0%, #ffffff 96%, #e6e6e6 97%, #cccccc 99%, #c1c1c1 100%); + background: linear-gradient(to bottom, #FAFAFA 0%, #FFFFFF 96%, #E6E6E6 97%, #CCCCCC 99%, #C1C1C1 100%); border-bottom: 1px solid #85CA11; border-left: 1px solid #85CA11; border-top: 1px solid #85CA11; @@ -2125,7 +2138,7 @@ i { &:hover { background-color: #FFFFFF; - color: #538200; + color: #538200; } } } @@ -2166,7 +2179,7 @@ i { } .barcode { - font-size: 200%; + font-size: 200%; vertical-align: middle; } @@ -2181,7 +2194,7 @@ li { .patronbriefinfo { li { &.email { - font-size: 87%; + font-size: 87%; padding: 0 10px 0 0; width: 90%; } @@ -2215,7 +2228,7 @@ li { display: block; margin: auto; - & > li { + > li { list-style-type: none; } } @@ -2421,7 +2434,7 @@ li { border: 0; font-family: $font-monospace; font-size: 95%; - margin: .7em 0 0 0; + margin: .7em 0 0; } tbody { @@ -2502,7 +2515,7 @@ li { color: #707070; display: block; font-size: 85%; - padding: 0 0 .5em 0; + padding: 0 0 .5em; a { font-weight: normal; @@ -2582,7 +2595,7 @@ li { } } - .importing { + .importing { background: none; padding: inherit; } @@ -2659,7 +2672,7 @@ li { display: block; font-size: 160%; font-weight: bold; - padding: 0 .7em .2em .7em; + padding: 0 .7em .2em; text-decoration: none; text-shadow: 0 -1px 0 #666; @@ -2676,7 +2689,7 @@ li { display: inline-block; font-size: 85%; margin: .4em 0; - padding: .3em .5em .3em .5em; + padding: .3em .5em; img { vertical-align: middle; @@ -2713,20 +2726,20 @@ li { } #acqui_order_supplierlist { - & > div { + > div { &.supplier { border: 1px solid #EEEEEE; margin: .5em; padding: 1em; } - & > div { - & > .baskets { + > div { + > .baskets { margin-top: .5em; } } - & > span { + > span { &.action { margin-left: 5em; } @@ -2752,7 +2765,7 @@ li { display: none; } -/* Override core jQueryUI widgets */ +// Override core jQueryUI widgets .ui-widget-content { background: #FFFFFF none; border: 1px solid #B9D8D9; @@ -2798,7 +2811,7 @@ li { .ui-state-highlight, .ui-widget-content .ui-state-highlight, -.ui-widget-header .ui-state-highlight { +.ui-widget-header .ui-state-highlight { background: #FFF4C6; border: 1px solid #FED22F; color: #363636; @@ -2807,12 +2820,12 @@ li { .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { - border: 1px solid #CD0A0A; background: #FEF1EC; + border: 1px solid #CD0A0A; color: #CD0A0A; } -/* Override jQuery Autocomplete */ +// Override jQuery Autocomplete .ui-autocomplete { box-shadow: 2px 2px 2px rgba(0, 0, 0, .3); cursor: default; @@ -2832,7 +2845,7 @@ li { background: #FFF url("../img/spinner-small.gif") right center no-repeat; } -/* jQuery UI standard tabs */ +// jQuery UI standard tabs .ui-menu { li { list-style: none; @@ -3132,7 +3145,7 @@ li { } } -/* jQuery UI Datepicker */ +// jQuery UI Datepicker .ui-datepicker { box-shadow: 1px 1px 3px 0 #666; @@ -3158,7 +3171,7 @@ li { vertical-align: middle; } -/* css for timepicker */ +// css for timepicker .ui-timepicker-div { dl { text-align: left; @@ -3195,7 +3208,7 @@ li { display: none; } -/* jQuery UI Accordion */ +// jQuery UI Accordion .ui-accordion-header, .ui-widget-content .ui-accordion-header { font-size: 110%; @@ -3206,7 +3219,7 @@ video { width: 480px; } -/* Bootstrap overrides */ +// Bootstrap overrides button, .btn { border-color: #ADADAD #ADADAD #949494; @@ -3293,18 +3306,6 @@ button, } -#header { - &.navbar { - margin-bottom: 0; - } - - &.navbar-default { - background: #E6F0F2; - border: 0; - box-shadow: none; - } -} - #changelanguage { .dropdown-menu { > li { @@ -3442,7 +3443,7 @@ label { .closebtn { color: #000; - filter: alpha(opacity=20); + filter: alpha(opacity = 20); float: right; font-size: 21px; font-weight: bold; @@ -3454,7 +3455,7 @@ label { &:focus { color: #000; cursor: pointer; - filter: alpha(opacity=50); + filter: alpha(opacity = 50); opacity: .5; text-decoration: none; } @@ -3466,7 +3467,7 @@ label { } .modal-content { - background-color : #EDF4F6; + background-color: #EDF4F6; } .btn-group { @@ -3507,7 +3508,7 @@ code { font-weight: bold; } -/* End Bootstrap overrides */ +// End Bootstrap overrides .waiting { cursor: wait; @@ -3579,7 +3580,7 @@ progress { } } -/* Class to be added to toolbar when it starts being fixed at the top of the screen*/ +// Class to be added to toolbar when it starts being fixed at the top of the screen .floating { box-shadow: 0 3px 2px 0 rgba(0, 0, 0, .5); @@ -3664,9 +3665,9 @@ span { .result-biblio-itemtype { float: right; - padding: .5em; - margin: .5em; font-size: 85%; + margin: .5em; + padding: .5em; text-align: center; img { @@ -3737,7 +3738,7 @@ span { } #merge { - margin: .5em 0 0 0; + margin: .5em 0 0; } #merge_table { @@ -3888,7 +3889,7 @@ span { } } -#fixedlengthbuilderaction { +#fixedlengthbuilderaction { border: 3px solid #E6F0F2; left: 80%; padding: 5px; @@ -4057,48 +4058,46 @@ span { } } -/* ==== MODULE LINKS - Start ==== */ +// ==== MODULE LINKS - Start ==== -ul { - &.buttons-list { - /* List containing the module links */ - padding: 0; - margin-bottom: 30px; +.buttons-list { + // List containing the module links + margin-bottom: 30px; + padding: 0; - li { - /* Standard attributes for the list elements */ - list-style-type:none; + li { + // Standard attributes for the list elements + list-style-type: none; - a { - &.circ-button { - /* Class used for each module link */ - background-color: #F4F8F9; - background-position: 5px 3px; - background-repeat: no-repeat; - border: solid 2px #b9d8d9; - border-radius: 6px; - box-sizing: content-box; - color: #000000; - display: block; - font-size: 110%; - font-weight: bold; - max-width: 260px; - margin: .5em 0; - padding: 8px; - text-decoration: none; - - &:hover { - /* Class used for each module link hover state */ - border-color: #538200; - color: #538200; - } + a { + &.circ-button { + // Class used for each module link + background-color: #F4F8F9; + background-position: 5px 3px; + background-repeat: no-repeat; + border: 2px solid #B9D8D9; + border-radius: 6px; + box-sizing: content-box; + color: #000000; + display: block; + font-size: 110%; + font-weight: bold; + margin: .5em 0; + max-width: 260px; + padding: 8px; + text-decoration: none; + + &:hover { + // Class used for each module link hover state + border-color: #538200; + color: #538200; } } } } } -/* ==== MODULE LINKS - End ==== */ +// ==== MODULE LINKS - End ==== @media (min-width: 200px) { .navbar-nav > li { @@ -4116,7 +4115,7 @@ ul { .open { .dropdown-menu { - background-color: #fff; + background-color: #FFF; border: 1px solid rgba(0, 0, 0, .15); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); float: left; @@ -4143,10 +4142,10 @@ ul { > a { &:hover, &:focus { - background-color: #0081c2; - background-image: linear-gradient(to bottom, #0088cc, #0077b3); + background-color: #0081C2; + background-image: linear-gradient(to bottom, #0088CC, #0077B3); background-repeat: repeat-x; - color: #ffffff; + color: #FFFFFF; text-decoration: none; } } -- 2.11.0