From 18da6257a5c93cf3c21b80322d649d9bc14b246a 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 bc12326..0000000 --- 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 aec3273..945faa2 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 55a6f70..ee35345 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 { @@ -153,14 +153,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; @@ -182,23 +182,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; @@ -208,13 +210,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%; } } @@ -244,7 +246,7 @@ main { .yui-b { fieldset { &.brief { - input[type="text"], + [type="text"], select { width: auto; } @@ -273,7 +275,7 @@ table { } } - & > caption { + > caption { span { &.actions { font-size: 66%; @@ -291,6 +293,10 @@ table { border: 0; } } + + + table { + margin-top: 1em; + } } td, @@ -341,13 +347,9 @@ th { } } -table + table { - margin-top: 1em; -} - body { font-family: $font-main; - padding: 0 0 4em 0; + padding: 0 0 4em; text-align: left; } @@ -419,7 +421,7 @@ hr { } p { - margin: .5em 0 .5em 0; + margin: .5em 0; } strong { @@ -477,7 +479,7 @@ input { } &:disabled { - @include disabled-button + @include disabled-button; } } @@ -494,7 +496,7 @@ input { } &:disabled { - @include disabled-button + @include disabled-button; } } @@ -528,7 +530,7 @@ label, font-weight: bold; } - /* Permissions Labels */ + // Permissions Labels &.permissioncode { font-style: italic; @@ -587,7 +589,7 @@ label, margin-top: 1em; } -#login_controls { +#login_controls { padding: .4em .5em; position: absolute; right: .5em; @@ -650,7 +652,7 @@ ul { } } - /* For Font Awesome icon bullets */ + // For Font Awesome icon bullets &.fa-ul { li { list-style-type: none; @@ -878,7 +880,7 @@ fieldset { margin: 1em 1em 1em 0; padding: 1em; - & + fieldset { + + fieldset { &.action { padding-top: 20px; } @@ -896,7 +898,7 @@ fieldset { border: 0; clear: both; float: none; - margin: .9em 0 0 0; + margin: .9em 0 0; padding: .4em; width: auto; } @@ -957,7 +959,7 @@ fieldset { clear: left; float: left; font-size: 90%; - margin: .9em 0 0 0; + margin: .9em 0 0; padding: 0; width: 100%; @@ -1092,7 +1094,7 @@ fieldset { ol { list-style-type: none; - padding: 1em 1em 0 1em; + padding: 1em 1em 0; &.radio { label { @@ -1158,7 +1160,7 @@ fieldset { margin: 1em 0 0 11em; } - &+h3 { + + h3 { clear: both; padding-top: .5em; } @@ -1269,12 +1271,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 { @@ -1283,14 +1297,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; @@ -1311,7 +1325,7 @@ div { } &.help { - margin: .9em 0 0 0; + margin: .9em 0 0; } &.justify { @@ -1319,7 +1333,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%; @@ -1336,7 +1350,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; @@ -1350,7 +1364,7 @@ div { } } - /* Tools > automatic_item_modification_by_age */ + // Tools > automatic_item_modification_by_age &.rules { display: block; } @@ -1379,13 +1393,13 @@ div { } &.listgroup { - clear: left; + clear: left; h4 { font-style: italic; a { - font-size: 80%; + font-size: 80%; } } @@ -1414,18 +1428,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; @@ -1462,7 +1476,7 @@ div { a { font-weight: bold; - padding: 1px 5px 1px 5px; + padding: 1px 5px; text-decoration: none; &:link, @@ -1482,14 +1496,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; } } @@ -1502,7 +1516,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; @@ -1516,7 +1530,7 @@ div { &.residentsearch { border: 0; border-bottom: 1px solid #85CA11; - padding: 0 0 .2em 0; + padding: 0 0 .2em; } } @@ -1554,11 +1568,11 @@ div { border-radius: 0 0 4px 4px; } - & > div, - & > ul { + > div, + > ul { display: none; - & > li { + > li { display: none; &:first-of-type { @@ -1614,7 +1628,7 @@ dd { border: 1px solid #E6F0F2; border-radius: 5px 5px 0 0; margin: 0; - padding: 5px 5px 5px 5px; + padding: 5px; } #disabled { @@ -1663,7 +1677,7 @@ dd { } } - & + #menu { + + #menu { margin-right: 0; } } @@ -1687,10 +1701,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 { @@ -1781,7 +1795,7 @@ dd { } select, - input[type=text] { + [type=text] { width: 100%; } } @@ -1813,7 +1827,7 @@ dd { fieldset { &.brief { select, - input[type=text] { + [type=text] { width: auto; } } @@ -1850,30 +1864,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; } @@ -1893,7 +1906,7 @@ dd { background-color: #FF0000; } -/* Font Awesome icons */ +// Font Awesome icons i { &.error { color: #CC0000; @@ -2029,7 +2042,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; @@ -2039,8 +2052,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; @@ -2087,7 +2100,7 @@ i { color: #990000; } -/* style for shelving location in catalogsearch */ +// style for shelving location in catalogsearch .shelvingloc { display: block; font-style: italic; @@ -2101,19 +2114,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; @@ -2133,7 +2146,7 @@ i { &:hover { background-color: #FFFFFF; - color: #538200; + color: #538200; } } } @@ -2174,7 +2187,7 @@ i { } .barcode { - font-size: 200%; + font-size: 200%; vertical-align: middle; } @@ -2189,7 +2202,7 @@ li { .patronbriefinfo { li { &.email { - font-size: 87%; + font-size: 87%; padding: 0 10px 0 0; width: 90%; } @@ -2223,7 +2236,7 @@ li { display: block; margin: auto; - & > li { + > li { list-style-type: none; } } @@ -2429,7 +2442,7 @@ li { border: 0; font-family: $font-monospace; font-size: 95%; - margin: .7em 0 0 0; + margin: .7em 0 0; } tbody { @@ -2510,7 +2523,7 @@ li { color: #707070; display: block; font-size: 85%; - padding: 0 0 .5em 0; + padding: 0 0 .5em; a { font-weight: normal; @@ -2590,7 +2603,7 @@ li { } } - .importing { + .importing { background: none; padding: inherit; } @@ -2667,7 +2680,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; @@ -2684,7 +2697,7 @@ li { display: inline-block; font-size: 85%; margin: .4em 0; - padding: .3em .5em .3em .5em; + padding: .3em .5em; img { vertical-align: middle; @@ -2721,20 +2734,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; } @@ -2760,7 +2773,7 @@ li { display: none; } -/* Override core jQueryUI widgets */ +// Override core jQueryUI widgets .ui-widget-content { background: #FFFFFF none; border: 1px solid #B9D8D9; @@ -2806,7 +2819,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; @@ -2815,12 +2828,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; @@ -2840,7 +2853,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; @@ -3140,7 +3153,7 @@ li { } } -/* jQuery UI Datepicker */ +// jQuery UI Datepicker .ui-datepicker { box-shadow: 1px 1px 3px 0 #666; @@ -3166,7 +3179,7 @@ li { vertical-align: middle; } -/* css for timepicker */ +// css for timepicker .ui-timepicker-div { dl { text-align: left; @@ -3203,7 +3216,7 @@ li { display: none; } -/* jQuery UI Accordion */ +// jQuery UI Accordion .ui-accordion-header, .ui-widget-content .ui-accordion-header { font-size: 110%; @@ -3214,7 +3227,7 @@ video { width: 480px; } -/* Bootstrap overrides */ +// Bootstrap overrides button, .btn { border-color: #ADADAD #ADADAD #949494; @@ -3301,18 +3314,6 @@ button, } -#header { - &.navbar { - margin-bottom: 0; - } - - &.navbar-default { - background: #E6F0F2; - border: 0; - box-shadow: none; - } -} - #changelanguage { .dropdown-menu { > li { @@ -3450,7 +3451,7 @@ label { .closebtn { color: #000; - filter: alpha(opacity=20); + filter: alpha(opacity = 20); float: right; font-size: 21px; font-weight: bold; @@ -3462,7 +3463,7 @@ label { &:focus { color: #000; cursor: pointer; - filter: alpha(opacity=50); + filter: alpha(opacity = 50); opacity: .5; text-decoration: none; } @@ -3474,7 +3475,7 @@ label { } .modal-content { - background-color : #EDF4F6; + background-color: #EDF4F6; } .btn-group { @@ -3515,7 +3516,7 @@ code { font-weight: bold; } -/* End Bootstrap overrides */ +// End Bootstrap overrides .waiting { cursor: wait; @@ -3587,7 +3588,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); @@ -3672,9 +3673,9 @@ span { .result-biblio-itemtype { float: right; - padding: .5em; - margin: .5em; font-size: 85%; + margin: .5em; + padding: .5em; text-align: center; img { @@ -3745,7 +3746,7 @@ span { } #merge { - margin: .5em 0 0 0; + margin: .5em 0 0; } #merge_table { @@ -3896,7 +3897,7 @@ span { } } -#fixedlengthbuilderaction { +#fixedlengthbuilderaction { border: 3px solid #E6F0F2; left: 80%; padding: 5px; @@ -4065,48 +4066,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 { @@ -4124,7 +4123,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; @@ -4151,10 +4150,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.1.4