From e897a13c10655273f90b0dc64f0b8ad10301d07d Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 25 Jul 2023 18:29:49 +0000
Subject: [PATCH] Bug 34392: Run automated Stylelint fixes on staff CSS

This patch corrects errors raised by the new stylelint configuration in
staff-global.scss. Many of the fixes were made automatically by using
the "--fix" option:

npx stylelint koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss --fix

Some examples of errors found:

    - Expected single space after ":"
    - Expected single space after "("
    - Expected single space before ")"
    - Expected empty line before comment
    - Expected no more than 1 empty line
    - Expected a trailing semicolon

Manual fixes include replacing named colors with hex codes, combining
duplicate selectors, removing empty blocks, etc.

Some warnings remain: "Unexpected !important" requires more than a
quick fix, if we should choose to address them.

To test, apply the patch and rebuild the staff interface CSS:
https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client

The changes affect CSS all around the staff interface, but there should
be no visible results of the patch. Everything should look correct.

The stylelint check should return only warnings about "!important"

npx stylelint koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
---
 .../intranet-tmpl/prog/css/src/_mixins.scss   |   8 +-
 .../prog/css/src/staff-global.scss            | 995 +++++++++---------
 2 files changed, 498 insertions(+), 505 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss
index 68354bd282..663ef33cd2 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss
@@ -79,9 +79,13 @@ $nav-menu-bullet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
 
 /* Copied from Bootstrap 5 */
 @mixin clearfix() {
+    &::after,
+    &::before {
+        content: " ";
+        display: table;
+    }
+
     &::after {
         clear: both;
-        content: "";
-        display: block;
     }
 }
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 abbc4a82b7..8fba7a3f01 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -43,21 +43,21 @@ a {
     }
 
     &.authlink {
-        background-color: #e3f1df;
+        background-color: #E3F1DF;
         border-radius: 5px;
         display: inline-block;
         padding: 2px 4px;
     }
 
     &.edit-patronimage {
+        background-color: #E6E6E6;
+        border-color: #ADADAD;
         color: #333;
-        background-color: #e6e6e6;
-        border-color: #adadad;
 
-        &:hover{
-            text-decoration: none;
+        &:hover {
+            background-color: #DADADA;
             color: #333;
-            background-color: #dadada;
+            text-decoration: none;
         }
     }
 
@@ -80,47 +80,52 @@ a {
     }
 
     &.settings {
-        i, img {
-            text-align: center;
-            color: $green-text-color;
+        i,
+        img {
+            align-items: center;
+            background-color: transparent;
             border: solid 3px $background-color-secondary;
             border-radius: 50%;
-            background-color: transparent;
-            width: 40px;
+            box-sizing: content-box;
+            color: $green-text-color;
+            display: flex;
             height: 40px;
+            justify-content: center;
             margin-bottom: 5px;
             margin-left: auto;
             margin-right: auto;
             padding: 5px;
-            align-items: center;
-            justify-content: center;
-            box-sizing: content-box;
-            display: flex;
-
+            text-align: center;
+            width: 40px;
         }
 
         &:hover {
             color: $green-text-color;
-            text-decoration: none;
             font-weight: bold;
+            text-decoration: none;
 
-            i, img {
-                border-color: $background-color-primary;
+            i,
+            img {
                 background-color: transparent;
+                border-color: $background-color-primary;
                 color: $green-text-color;
             }
-
         }
 
         img {
-            max-width: 30px;
             height: auto;
+            max-width: 30px;
             padding: 10px;
         }
     }
 
     &.csv {
-        background-image: url("../img/famfamfam/silk/page_white_excel.png");
+        background-image: url( "../img/famfamfam/silk/page_white_excel.png" );
+    }
+
+    .ctrl_link {
+        display: inline-block;
+        padding-right: 1rem;
     }
 
     &.dropdown-toggle {
@@ -156,11 +161,12 @@ a {
     }
 
     &.pdf {
-        background-image: url("../img/famfamfam/silk/page_white_acrobat.png");
+        background-image: url( "../img/famfamfam/silk/page_white_acrobat.png" );
     }
 
     &.submit {
         @include default-button;
+
         display: inline-block;
 
         &:active {
@@ -177,24 +183,15 @@ a {
     }
 
     &.xml {
-        background-image: url("../img/famfamfam/silk/page_white_code.png");
+        background-image: url( "../img/famfamfam/silk/page_white_code.png" );
     }
 }
 
-
 #resetZ3950Search {
-    font-size: 110%;
     color: $green-text-color;
+    font-size: 110%;
 }
 
-a {
-    .ctrl_link {
-        display: inline-block;
-        padding-right: 1rem;
-    }
-}
-
-
 aside {
     h5 {
         font-size: 100%;
@@ -230,7 +227,7 @@ aside {
 
             input[type="text"],
             select {
-                height: calc(1.5em + .75rem + 2px);
+                height: calc( 1.5em + .75rem + 2px );
             }
 
             label {
@@ -293,16 +290,18 @@ aside {
 
             .flatpickr-input {
                 margin-right: 3px;
-                width: calc(100% - 20px);
+                width: calc( 100% - 20px );
             }
 
-            &+.action {
+            & + .action {
                 background-color: #FFF;
                 display: flex;
                 margin-left: 0;
                 padding: 1rem;
 
-                input, button, a {
+                input,
+                button,
+                a {
                     display: block;
                     flex-grow: 1;
                 }
@@ -311,17 +310,19 @@ aside {
     }
 }
 
-#menu, #navmenulist, #serialmenu {
-    background-color: #e6e6e6;
+#menu,
+#navmenulist,
+#serialmenu {
+    background-color: #E6E6E6;
     display: block;
     padding: 1em 0 1em 0;
 
     h5 {
-        padding-left: .5em;
         color: #666;
-        font-weight: bold;
         font-size: 1.3em;
+        font-weight: bold;
         margin-top: 0;
+        padding-left: .5em;
     }
 
     ul {
@@ -339,21 +340,21 @@ aside {
                 border-left: 5px solid #E6E6E6;
                 color: #000;
                 display: block;
-                text-decoration: none;
                 padding: .7em .3em .7em 1.2em;
+                text-decoration: none;
             }
 
             &.active > a,
             a:hover,
             a.current {
                 background-color: #F3F4F4;
-                text-decoration: none;
-                color: $green-text-color;
                 border-left: solid 5px $background-color-primary;
+                color: $green-text-color;
                 font-weight: bold;
+                text-decoration: none;
             }
 
-            a:hover:not(.current) {
+            a:hover:not( .current ) {
                 border-left: solid 5px $background-color-secondary;
                 font-weight: normal;
             }
@@ -366,12 +367,10 @@ aside {
     }
 }
 
-#admin_preferences #menu{
-
+#admin_preferences #menu {
     ul {
-
         ul {
-            background-color: #f3f4f4;
+            background-color: #F3F4F4;
             font-size: 85%;
         }
     }
@@ -384,10 +383,9 @@ div {
         display: inline;
     }
 
-
     &.koha-mainpage {
-        display: flex;
         align-items: center;
+        display: flex;
         justify-content: center;
     }
 
@@ -398,11 +396,11 @@ div {
             float: right;
 
             li {
+                height: auto;
                 list-style-type: none;
                 margin-bottom: 0;
-                height: auto;
-                width: 150px;
                 padding: 5px 10px;
+                width: 150px;
 
                 a,
                 a:visited,
@@ -412,6 +410,199 @@ div {
             }
         }
     }
+
+    &.action {
+        background-color: transparent;
+        border: 0;
+        clear: both;
+        float: none;
+        margin: .9em 0 0;
+        padding: .4em;
+        width: auto;
+    }
+
+    .renew_formfield {
+        margin-bottom: 1em;
+    }
+
+    .circmessage {
+        padding: .4em;
+
+        .circmessage {
+            margin-bottom: .3em;
+        }
+    }
+
+    &.first {
+        fieldset {
+            margin-right: 0;
+        }
+    }
+
+    &.help {
+        margin: .9em 0 0;
+    }
+
+    &.justify {
+        text-align: justify;
+    }
+
+    &.note {
+        background-color: #CFE2FF;
+        margin: .5em 0;
+        padding: .5em;
+
+        i {
+            &.fa-exclamation {
+                color: $warning-text-color;
+                font-style: italic;
+                padding: 0 .3em;
+            }
+        }
+    }
+
+    // Tools > automatic_item_modification_by_age
+    &.rules {
+        display: block;
+    }
+
+    &[class$="_table_controls"] {
+        padding: .7em 0;
+    }
+
+    &.results {
+        padding: .7em 0;
+    }
+
+    &.rule {
+        background-color: #F4F8F9;
+        border: 2px solid #BFD9B9;
+        border-radius: 5px;
+        margin: .3em;
+        padding: .3em;
+    }
+
+    &.lastchecked {
+        background-color: #FFF;
+        border: 2px solid #BCDB89;
+        padding: .2em 1em;
+    }
+
+    &.listgroup {
+        clear: left;
+
+        h4 {
+            font-style: italic;
+
+            a {
+                font-size: 80%;
+            }
+        }
+    }
+
+    &.sysprefs {
+        h3 {
+            margin: .2em 0 .2em .4em;
+        }
+
+        dl {
+            margin-left: 1.5em;
+        }
+
+        &.hint {
+            float: right;
+            margin: .7em;
+            padding: .5em;
+            width: 25%;
+        }
+    }
+
+    &.rows {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+
+        + div {
+            &.rows {
+                margin-top: .6em;
+            }
+        }
+
+        li {
+            border-bottom: 1px solid #EEE;
+            list-style-type: none;
+            padding: .275em;
+            width: 100%;
+        }
+
+        ol {
+            list-style-type: none;
+            padding: .5em 1em 0 0;
+
+            li {
+                li {
+                    border-bottom: 0;
+                }
+            }
+        }
+
+        p {
+            margin-left: 10em;
+        }
+
+        span {
+            &.label {
+                display: inline-block;
+                font-weight: bold;
+                margin-right: 1em;
+                padding-top: 0;
+                text-align: left;
+                vertical-align: top;
+                white-space: normal;
+                width: 9em;
+            }
+        }
+    }
+
+    &.pages {
+        margin: .5em 0;
+
+        a {
+            font-weight: bold;
+            padding: 1px 5px;
+            text-decoration: none;
+
+            &:link,
+            &:visited {
+                background-color: #EEEEEE;
+                color: #3366CC;
+            }
+
+            &:hover,
+            &:active {
+                background-color: #FFC;
+            }
+        }
+
+        .current,
+        .currentPage {
+            background-color: #E6FCB7;
+            color: #666;
+            font-weight: bold;
+            padding: 1px 5px;
+        }
+
+        .inactive {
+            background-color: #F3F3F3;
+            color: #BCBCBC;
+            font-weight: bold;
+            padding: 1px 5px;
+        }
+    }
+
+    .browse {
+        margin: .5em 0;
+    }
 }
 
 button {
@@ -446,12 +637,12 @@ main {
 }
 
 body {
+    background-color: #F3F4F4;
     font-family: $font-family-sans-serif;
     font-size: 13px;
     line-height: 1.22;
     padding: 0 0 4em;
     text-align: left;
-    background-color: #F3F4F4;
 
     &.nobackdrop {
         .modal-backdrop {
@@ -484,7 +675,7 @@ form {
         }
 
         .notification_method,
-        #main_contact_method    {
+        #main_contact_method {
             background-color: #FFE;
             border: 1px solid #CCC;
             border-radius: 5px;
@@ -510,15 +701,15 @@ h1 {
 }
 
 h2 {
+    color: #696969;
     font-size: 150%;
     font-weight: bold;
-    color: #696969;
 }
 
 h3 {
+    color: #696969;
     font-size: 131%;
     font-weight: bold;
-    color: #696969;
 }
 
 h4 {
@@ -589,12 +780,14 @@ textarea {
 input {
     &[type="submit"] {
         @include primary-button;
+
         padding: .5em 1em;
     }
 
     &[type="reset"],
     &[type="button"] {
         @include default-button;
+
         padding: .5em 1em;
 
         &:disabled {
@@ -610,6 +803,7 @@ input {
 
     &.submit {
         @include primary-button;
+
         padding: .5em 1em;
 
         &:disabled {
@@ -672,7 +866,8 @@ label,
     margin-top: 1em;
 }
 
-.main, main {
+.main,
+main {
     & > .row > div > aside {
         margin-left: -15px;
     }
@@ -788,11 +983,11 @@ fieldset {
     }
 
     &.standard {
-        background-color:#F4F8F9 !important;
+        background-color: #F4F8F9 !important;
     }
 
     &.contrast {
-        background-color:#F3F3F3 !important;
+        background-color: #F3F3F3 !important;
     }
 
     &.action {
@@ -871,7 +1066,6 @@ fieldset {
         }
     }
 
-
     ol {
         li {
             list-style-type: none;
@@ -881,14 +1075,14 @@ fieldset {
 
     div {
         &.help-block {
+            color: #737373;
             display: block;
-            margin-top: 5px;
             margin-bottom: 10px;
-            color: #737373;
+            margin-top: 5px;
 
             li {
-                list-style-type: unset;
                 list-style-position: inside;
+                list-style-type: unset;
             }
         }
     }
@@ -921,9 +1115,8 @@ details[open] {
     }
 }
 
-
 #floating-save {
-    background-color: rgba(185, 216, 217, .6);
+    background-color: rgba( 185, 216, 217, .6 );
     bottom: 3%;
     position: fixed;
     right: 1%;
@@ -935,7 +1128,8 @@ details[open] {
     justify-content: space-between;
 }
 
-#breadcrumbs, #shortcut {
+#breadcrumbs,
+#shortcut {
     background-color: transparent;
     clear: both;
     margin: 0;
@@ -950,15 +1144,15 @@ details[open] {
 
 #breadcrumbs a[href="/cgi-bin/koha/mainpage.pl"] {
     color: $green-text-color;
-    visibility: hidden;
     font-size: 1px;
     letter-spacing: -1px;
+    visibility: hidden;
 
     &::before {
         content: "\f015";
         font-family: "Font Awesome 6 Free";
-        font-style: normal;
         font-size: 12px;
+        font-style: normal;
         padding-right: .3em;
         visibility: visible;
     }
@@ -968,208 +1162,13 @@ details[open] {
     }
 }
 
-#header {
-    + #breadcrumbs {
-        margin-top: 1em;
-    }
-
-    > .container-fluid {
-        padding: 0;
-    }
-}
-
-div {
-    &.action {
-        background-color: transparent;
-        border: 0;
-        clear: both;
-        float: none;
-        margin: .9em 0 0;
-        padding: .4em;
-        width: auto;
-    }
-
-    .renew_formfield {
-        margin-bottom: 1em;
-    }
-
-    .circmessage {
-        padding: .4em;
-
-        .circmessage {
-            margin-bottom: .3em;
-        }
-    }
-
-    &.first {
-        fieldset {
-            margin-right: 0;
-        }
-    }
-
-    &.help {
-        margin: .9em 0 0;
-    }
-
-    &.justify {
-        text-align: justify;
-    }
-
-    &.note {
-        background-color: #CFE2FF;
-        margin: .5em 0;
-        padding: .5em;
-
-        i {
-            &.fa-exclamation {
-                color: $warning-text-color;
-                font-style: italic;
-                padding: 0 .3em;
-            }
-        }
-    }
-
-    // Tools > automatic_item_modification_by_age
-    &.rules {
-        display: block;
-    }
-
-    &[class$="_table_controls"] {
-        padding: .7em 0;
-    }
-
-    &.results {
-        padding: .7em 0;
-    }
-
-    &.rule {
-        background-color: #F4F8F9;
-        border: 2px solid #bfd9b9;
-        border-radius: 5px;
-        margin: .3em;
-        padding: .3em;
-    }
-
-    &.lastchecked {
-        background-color: #FFF;
-        border: 2px solid #BCDB89;
-        padding: .2em 1em;
-    }
-
-    &.listgroup {
-        clear: left;
-
-        h4 {
-            font-style: italic;
-
-            a {
-                font-size: 80%;
-            }
-        }
-    }
-
-    &.sysprefs {
-        h3 {
-            margin: .2em 0 .2em .4em;
-        }
-
-        dl {
-            margin-left: 1.5em;
-        }
-
-        &.hint {
-            float: right;
-            margin: .7em;
-            padding: .5em;
-            width: 25%;
-        }
-    }
-
-    &.rows {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-
-        + div {
-            &.rows {
-                margin-top: .6em;
-            }
-        }
-
-        li {
-            border-bottom: 1px solid #EEE;
-            list-style-type: none;
-            padding: .275em;
-            width: 100%;
-        }
-
-        ol {
-            list-style-type: none;
-            padding: .5em 1em 0 0;
-
-            li {
-                li {
-                    border-bottom: 0;
-                }
-            }
-        }
-
-        p {
-            margin-left: 10em;
-        }
-
-        span {
-            &.label {
-                display: inline-block;
-                font-weight: bold;
-                margin-right: 1em;
-                padding-top: 0;
-                text-align: left;
-                vertical-align: top;
-                width: 9em;
-                white-space: normal;
-            }
-        }
-    }
-
-    &.pages {
-        margin: .5em 0;
-
-        a {
-            font-weight: bold;
-            padding: 1px 5px;
-            text-decoration: none;
-
-            &:link,
-            &:visited {
-                background-color: #EEEEEE;
-                color: #3366CC;
-            }
-
-            &:hover,
-            &:active {
-                background-color: #FFC;
-            }
-        }
-
-        .current,
-        .currentPage {
-            background-color: #E6FCB7;
-            color: #666;
-            font-weight: bold;
-            padding: 1px 5px;
-        }
-
-        .inactive {
-            background-color: #F3F3F3;
-            color: #BCBCBC;
-            font-weight: bold;
-            padding: 1px 5px;
-        }
+#header {
+    + #breadcrumbs {
+        margin-top: 1em;
     }
 
-    .browse {
-        margin: .5em 0;
+    > .container-fluid {
+        padding: 0;
     }
 }
 
@@ -1216,21 +1215,20 @@ dd {
     }
 }
 
-
 .patroninfo {
-    margin-right: .5em;
-    padding-top: 1em;
-    background-color: #e6e6e6;
+    background-color: #E6E6E6;
     color: #000;
     left: -10px;
-    width: 100%;
+    margin-right: .5em;
     padding-bottom: 25px;
+    padding-top: 1em;
+    width: 100%;
 
     h5 {
+        color: #000;
+        font-weight: bold;
         margin-bottom: 0;
         padding: .5em .9em;
-        font-weight: bold;
-        color: #000;
 
         &:empty {
             border-right: 0;
@@ -1254,7 +1252,6 @@ dd {
         li {
             list-style-type: none;
             margin: 0;
-
         }
     }
 
@@ -1268,9 +1265,9 @@ dd {
 }
 
 .patroninfo-heading {
-    padding: .5em;
-    margin-bottom: .3em;
     clear: both;
+    margin-bottom: .3em;
+    padding: .5em;
 
     h3 {
         display: inline-block;
@@ -1301,8 +1298,8 @@ dd {
 .patronimage {
     border: 1px solid #EEE;
     display: block;
-    max-width: 160px;
     margin: auto;
+    max-width: 160px;
     opacity: 1;
     transition: .2s ease;
 
@@ -1326,21 +1323,22 @@ dd {
 
 .patronimage-control {
     padding: 1em 2em;
- }
+}
 
-#patronImageEdit input[type="file" ] {
+#patronImageEdit input[type="file"] {
     display: inline-block;
 }
 
-#addColumn, #delColumn{
-    color: $green-text-color;
-    padding: .3em;
-    border: none;
+#addColumn,
+#delColumn {
     background-color: transparent;
+    border: none;
     box-shadow: none;
+    color: $green-text-color;
     font-size: 100%;
+    padding: .3em;
 
-    &:hover{
+    &:hover {
         text-decoration: underline;
     }
 }
@@ -1379,12 +1377,11 @@ dd {
             }
         }
     }
-
 }
 
 .readonly,
-input[type='text']:read-only {
-    background: #EEE url("../img/locked.png") center left no-repeat;
+input[type="text"]:read-only {
+    background: #EEE url( "../img/locked.png" ) center left no-repeat;
     border-style: inset;
     border-width: 1px;
     cursor: default;
@@ -1392,7 +1389,7 @@ input[type='text']:read-only {
 }
 
 .readonly:focus,
-input[type='text']:read-only:focus {
+input[type="text"]:read-only:focus {
     border-color: unset;
     border-radius: unset;
 }
@@ -1407,7 +1404,7 @@ input[type='text']:read-only:focus {
 }
 
 .important_subfield_not_filled {
-    background-color : #FFFFCC;
+    background-color: #FFFFCC;
 }
 
 .content_hidden {
@@ -1480,8 +1477,8 @@ i {
 }
 
 .circ-settings {
-    border-top: 2px solid #EEE;
     border-radius: 0;
+    border-top: 2px solid #EEE;
     display: none;
     margin-left: -1em;
     margin-right: -1em;
@@ -1491,16 +1488,16 @@ i {
 
 #show-circ-settings {
     display: inline;
+    opacity: .5;
     position: relative;
     right: 25px;
-    opacity: .5;
 
     &:hover {
         opacity: 1;
     }
 
     a {
-        color: rgb(105, 105, 105);
+        color: rgb( 105, 105, 105 );
 
         &:hover {
             text-decoration: none;
@@ -1511,7 +1508,7 @@ i {
 .checkin-active-setting {
     background-color: #FFC;
     border-radius: 3px;
-    box-shadow: 1px 1px 2px 0 rgba(102, 102, 102, .5);
+    box-shadow: 1px 1px 2px 0 rgba( 102, 102, 102, .5 );
     margin: .5em;
     padding: .5em;
 }
@@ -1521,8 +1518,11 @@ i {
 }
 
 .form-group {
+    margin-bottom: 10px;
+
     label {
         display: block;
+        font-weight: bold;
         margin-bottom: 5px;
     }
 
@@ -1552,10 +1552,10 @@ i {
 
 .dialog {
     margin: 1em auto;
+    max-width: 600px;
     padding: .5em;
     text-align: center;
     width: 65%;
-    max-width: 600px;
 
     a {
         &.approve {
@@ -1601,44 +1601,43 @@ i {
 
             &.approve {
                 background-color: #FEC32C;
-                color: #000;
-                border: 0;
                 background-image: none;
+                border: 0;
+                color: #000;
                 margin-top: 5px;
 
                 &:hover,
                 &:active,
                 &:focus {
-                    background-color: #fec22c9f;
+                    background-color: #FEC22C9F;
                 }
             }
 
             &.deny {
                 background-color: transparent;
-                color: #696969;
+                background-image: none;
                 border: #696969 double 1px;
-                margin-top: 5px;
-                margin-left: 5px;
-
+                border-radius: 4px;
+                color: #696969;
+                cursor: pointer;
                 display: inline-block;
-                margin-bottom: 0;
+                font-size: 12px;
                 font-weight: normal;
+                line-height: 1.4286;
+                margin-bottom: 0;
+                margin-left: 5px;
+                margin-top: 5px;
+                padding: 6px 12px;
                 text-align: center;
-                white-space: nowrap;
-                vertical-align: middle;
                 touch-action: manipulation;
-                cursor: pointer;
-                background-image: none;
-                padding: 6px 12px;
-                font-size: 12px;
-                line-height: 1.42857143;
-                border-radius: 4px;
                 user-select: none;
+                vertical-align: middle;
+                white-space: nowrap;
 
                 &:hover {
-                    font-weight: bold;
                     background-color: #F1F1F1;
                     border: #696969 double 1px;
+                    font-weight: bold;
                     text-decoration: none;
                 }
             }
@@ -1655,7 +1654,8 @@ i {
 
     p {
         margin-top: 0;
-        &+p {
+
+        & + p {
             margin-top: 5px;
         }
     }
@@ -1711,10 +1711,10 @@ i {
     }
 }
 
-
 .approve,
 .success {
     background-color: #FEC32C;
+
     i {
         &.fa {
             color: $green-text-color;
@@ -1742,7 +1742,7 @@ i {
     i {
         &.fa-exclamation-triangle {
             color: #FFD700;
-            text-shadow: 0 -1px 0 rgba( 0, 0, 0, .3);
+            text-shadow: 0 -1px 0 rgba( 0, 0, 0, .3 );
         }
     }
 }
@@ -1782,14 +1782,14 @@ i {
 }
 
 .barcode {
+    border-radius: 0;
     font-size: 100%;
-    vertical-align: middle;
     font-style: italic;
-    width: 250px;
     height: 30px;
     padding-left: 5px;
     padding-right: 30px;
-    border-radius: 0;
+    vertical-align: middle;
+    width: 250px;
 }
 
 li {
@@ -1854,16 +1854,19 @@ li {
     }
 
     & + p {
-        border-top: 1px solid #eee;
+        border-top: 1px solid #EEE;
         margin-top: 1em;
         padding-top: 1em;
     }
 }
 
-#catalogue_stats_wrapper, #tbl_cash_register_stats_wrapper, #resulttable_wrapper, #numberpatternst_wrapper {
+#catalogue_stats_wrapper,
+#tbl_cash_register_stats_wrapper,
+#resulttable_wrapper,
+#numberpatternst_wrapper {
     background-color: #FFFFFF;
+    box-shadow: 8px 8px 12px rgba( 170, 170, 170, .356 );
     margin-top: 20px;
-    box-shadow: 8px 8px 12px rgba(170, 170, 170, .356);
     padding: 20px;
 }
 
@@ -1871,27 +1874,27 @@ li {
     background-color: #FFFFFF;
     margin-top: 20px;
     min-width: 100%;
-    width: fit-content;
     padding: 20px;
+    width: fit-content;
 
     fieldset {
         box-shadow: none;
     }
 
-    h3{
-        padding-bottom: .7em;
-        margin: 0;
+    h3 {
         color: #696969;
+        margin: 0;
+        padding-bottom: .7em;
     }
 
     td {
         ul {
             li {
                 clear: left;
+                color: #000;
                 font-size: 90%;
-                list-style: url("../img/item-bullet.svg");
+                list-style: url( "../img/item-bullet.svg" );
                 padding: .2em 0;
-                color: #000;
                 top: 100%;
 
                 &.result_itype_image {
@@ -1942,6 +1945,7 @@ li {
         ul {
             margin: 0;
             padding-left: 0;
+
             li {
                 clear: none;
                 float: left;
@@ -1962,31 +1966,31 @@ li {
             color: #000;
 
             &:hover {
+                background-color: #FFFFFF;
                 background-image: none;
                 color: #000;
                 text-decoration: underline;
-                background-color: #FFFFFF;
             }
         }
     }
 }
 
 .searchheader {
-    background-color: #f3f4f4;
-    box-shadow: 0 0 2px 1px rgba(0,0,0,.2);
+    background-color: #F3F4F4;
+    box-shadow: 0 0 2px 1px rgba( 0, 0, 0, .2 );
+    color: #696969;
+    display: block;
     font-size: 80%;
-    margin-top: .5em;
     margin-bottom: .5em;
+    margin-top: .5em;
     padding: 5px;
     width: 100%;
-    color: #696969;
-    display: block;
 
     &.floating {
         border-radius: 0;
-        box-shadow: 0 0 2px 1px rgba(0,0,0,.4);
-        margin-top: 0;
+        box-shadow: 0 0 2px 1px rgba( 0, 0, 0, .4 );
         margin-bottom: 0;
+        margin-top: 0;
         z-index: 100;
     }
 
@@ -2046,10 +2050,8 @@ li {
     width: 30px;
 }
 
-
-
 #search-facets {
-    background-color: #e6e6e6;
+    background-color: #E6E6E6;
 
     h4 {
         background-color: $background-color-primary;
@@ -2095,15 +2097,15 @@ li {
 }
 
 #biblio-cover-slider {
-    border: 1px solid #bfd9b9;
+    border: 1px solid #BFD9B9;
     border-radius: 3px;
     margin: 5px;
-    padding: 10px 5px 5px 5px;
     min-height: 175px;
+    padding: 10px 5px 5px 5px;
 }
 
 .cover-slides {
-    background: #FFF url("../img/spinner-small.gif") center center no-repeat;
+    background: #FFF url( "../img/spinner-small.gif" ) center center no-repeat;
 
     .hint {
         font-size: 90%;
@@ -2114,7 +2116,7 @@ li {
         &.nav-active {
             &:link,
             &:visited {
-                color: #85ca11;
+                color: #85CA11;
             }
         }
     }
@@ -2124,8 +2126,9 @@ td {
     &.actions {
         white-space: nowrap;
     }
+
     &.bookcoverimg {
-        background: #FFF url("../img/spinner-small.gif") center center no-repeat;
+        background: #FFF url( "../img/spinner-small.gif" ) center center no-repeat;
         min-width: 120px;
         text-align: center;
     }
@@ -2150,20 +2153,18 @@ td {
 }
 
 .highlight_toggle {
-    color: $green-text-color;
-    padding: .3em;
-    border: 0;
     background-color: transparent;
     border: 0;
     box-shadow: none;
+    color: $green-text-color;
     font-size: 100%;
+    padding: .3em;
 
     &:hover {
         text-decoration: underline;
     }
 }
 
-
 .cover-image {
     display: none;
 
@@ -2196,9 +2197,9 @@ td {
 #CheckAll,
 #CheckNone,
 #CheckPending {
+    color: $green-text-color;
     font-weight: normal;
     margin: 0 .5em 0 0;
-    color: $green-text-color;
 }
 
 .lost,
@@ -2208,10 +2209,6 @@ td {
     display: block;
 }
 
-.bundled {
-    display: block;
-}
-
 td.bundle {
     background-color: #FFC !important;
 }
@@ -2262,7 +2259,7 @@ td.bundle {
 
     tbody {
         tr {
-            &:nth-child(2n+1) {
+            &:nth-child( 2n+1 ) {
                 td {
                     background-color: #FFFFFF;
                 }
@@ -2334,8 +2331,8 @@ td.bundle {
 }
 
 #cartmenulink {
-    position: relative;
     left: 0;
+    position: relative;
     top: 0;
 }
 
@@ -2388,7 +2385,7 @@ td.bundle {
         text-decoration: none;
 
         &:hover {
-            background-color: lighten( $background-color-secondary, 40 )
+            background-color: lighten( $background-color-secondary, 40 );
         }
     }
 }
@@ -2555,7 +2552,7 @@ td.bundle {
 
 #acqui_order_supplierlist {
     .supplier {
-        &+.supplier {
+        & + .supplier {
             border-top: 1px solid #EEEEEE;
             margin-top: 1em;
         }
@@ -2588,14 +2585,14 @@ td.bundle {
 // Override core jQueryUI widgets
 .ui-widget-content {
     background: #FFFFFF none;
-    border-radius: 4px;
     border: 3px solid $background-color-primary;
+    border-radius: 4px;
     color: #222222;
 }
 
 .ui-widget-header {
-    background: #b5dbad none;
-    border: 1px solid #bfd9b9;
+    background: #B5DBAD none;
+    border: 1px solid #BFD9B9;
     color: #222222;
     font-weight: bold;
 }
@@ -2603,7 +2600,7 @@ td.bundle {
 .ui-state-default,
 .ui-widget-content .ui-state-default,
 .ui-widget-header .ui-state-default {
-    border: 1px solid #bfd9b9;
+    border: 1px solid #BFD9B9;
     color: #555555;
     font-weight: normal;
 }
@@ -2614,8 +2611,8 @@ td.bundle {
 .ui-state-focus,
 .ui-widget-content .ui-state-focus,
 .ui-widget-header .ui-state-focus {
-    background: #cad8c6 none;
-    border: 1px solid #bfd9b9;
+    background: #CAD8C6 none;
+    border: 1px solid #BFD9B9;
     color: #212121;
     font-weight: normal;
 }
@@ -2638,7 +2635,7 @@ td.bundle {
 
 // Override jQuery Autocomplete
 .ui-autocomplete {
-    box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
+    box-shadow: 2px 2px 2px rgba( 0, 0, 0, .3 );
     cursor: default;
     position: absolute;
     z-index: 2000;
@@ -2649,7 +2646,7 @@ td.bundle {
                 padding: 3px 1em 3px .4em;
 
                 &:hover {
-                    background: #e3f1df none;
+                    background: #E3F1DF none;
                     color: #212121;
                     font-weight: normal;
                 }
@@ -2665,7 +2662,7 @@ td.bundle {
 
                 .ui-state-active,
                 .ui-state-focus {
-                    background: #e3f1df none;
+                    background: #E3F1DF none;
                     color: #212121;
                     font-weight: normal;
                     margin: 0;
@@ -2676,7 +2673,7 @@ td.bundle {
 }
 
 .ui-autocomplete-loading {
-    background: #FFF url("../img/spinner-small.gif") right center no-repeat;
+    background: #FFF url( "../img/spinner-small.gif" ) right center no-repeat;
 }
 
 .ui-widget {
@@ -2728,7 +2725,6 @@ fieldset > .toptabs {
     font-style: italic;
 }
 
-
 .contents {
     width: 75%;
 
@@ -2738,8 +2734,8 @@ fieldset > .toptabs {
     }
 
     .t {
-        font-weight: bold;
         display: inline;
+        font-weight: bold;
     }
 
     .r {
@@ -2747,7 +2743,6 @@ fieldset > .toptabs {
     }
 }
 
-
 .contentblock {
     font-size: 95%;
     line-height: 135%;
@@ -2776,8 +2771,8 @@ fieldset > .toptabs {
 
             &.jstree-clicked {
                 background: transparent none;
-                box-shadow: none;
                 border: 0;
+                box-shadow: none;
             }
         }
     }
@@ -2798,7 +2793,7 @@ fieldset > .toptabs {
 }
 
 .pluginname {
-    background-color: #e3f1df;
+    background-color: #E3F1DF;
     cursor: move;
     margin: .3em;
     padding-bottom: 4px;
@@ -2857,17 +2852,17 @@ nav {
         margin: 0;
 
         ol {
+            list-style: none;
             margin: 0;
             padding-left: 0;
-            list-style: none;
 
             li {
+                color: $green-text-color;
                 display: inline;
-                color : $green-text-color;
                 font-style: italic;
 
-                &+li::before {
-                    background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hldnJvbi1yaWdodCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNy4zNyAwbDUuMzUgNy4zYy4yLjIuMi41MSAwIC43bC01LjM4IDhoLTQuMmw1LjY0LTguMzVMMy4xMy4wMXoiLz48L3N2Zz4=") 50% 50% no-repeat;
+                & + li::before {
+                    background: transparent url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hldnJvbi1yaWdodCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNy4zNyAwbDUuMzUgNy4zYy4yLjIuMi41MSAwIC43bC01LjM4IDhoLTQuMmw1LjY0LTguMzVMMy4xMy4wMXoiLz48L3N2Zz4=" ) 50% 50% no-repeat;
                     background-size: 8px;
                     content: "";
                     display: inline-block;
@@ -2875,7 +2870,10 @@ nav {
                     width: .8em;
                 }
 
-                a:link, a:active, a:hover, a:focus {
+                a:link,
+                a:active,
+                a:hover,
+                a:focus {
                     padding: .6em .3em;
                 }
             }
@@ -2905,6 +2903,7 @@ nav {
         a {
             background-color: transparent;
         }
+
         &.active {
             a {
                 &:link,
@@ -2922,7 +2921,6 @@ nav {
     }
 }
 
-
 .pagination {
     margin: .5em 0;
 }
@@ -2951,18 +2949,18 @@ button,
     &.btn-danger {
         background-color: #CC3333;
         border-color: #9B2323;
-        color: #fff;
+        color: #FFF;
     }
 
     &.btn-danger:hover {
-        color: #fff;
-        background-color: #c82333;
-        border-color: #a81c29;
+        background-color: #C82333;
+        border-color: #A81C29;
+        color: #FFF;
     }
 
-    &.btn-danger:not( :disabled ):not( .disabled ).active,
-    &.btn-danger:not( :disabled ):not( .disabled ):active {
-        box-shadow: inset 0 0 0 1px #a81c29;
+    &.btn-danger:not( :disabled, .disabled ).active,
+    &.btn-danger:not( :disabled, .disabled ):active {
+        box-shadow: inset 0 0 0 1px #A81C29;
     }
 }
 
@@ -2990,10 +2988,10 @@ button,
 .panel-title {
     a {
         border-radius: 3px;
-        display: block;
-        padding: 10px 15px;
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
+        display: block;
+        padding: 10px 15px;
 
         &::before {
             content: "\f0d7";
@@ -3003,7 +3001,7 @@ button,
         }
 
         &:hover {
-            background: #e3f1df none;
+            background: #E3F1DF none;
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
         }
@@ -3017,7 +3015,7 @@ button,
             }
 
             &:hover {
-                background: #e3f1df none;
+                background: #E3F1DF none;
                 border-bottom-left-radius: 3px;
                 border-bottom-right-radius: 3px;
             }
@@ -3026,14 +3024,15 @@ button,
 }
 
 .panel-default {
-    border: 1px solid #bfd9b9;
+    border: 1px solid #BFD9B9;
+
     > .panel-heading {
         background: transparent none;
         padding: 0;
 
         + .panel-collapse {
             > .panel-body {
-                border-top-color: #bfd9b9;
+                border-top-color: #BFD9B9;
             }
         }
     }
@@ -3049,7 +3048,7 @@ button,
 
 #changelanguage {
     background: #FFF none;
-    border-top: 1px solid rgb(173, 173, 173);
+    border-top: 1px solid rgb( 173, 173, 173 );
     min-height: $language-footer-min-height;
 
     .dropdown-menu {
@@ -3113,8 +3112,8 @@ button,
 
         .tooltip-inner {
             background-color: #FFFFFF;
-            border: 1px solid rgba(0, 0, 0, .2);
-            box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+            border: 1px solid rgba( 0, 0, 0, .2 );
+            box-shadow: 0 5px 10px rgba( 0, 0, 0, .2 );
             color: #000;
             font-size: 120%;
             padding: 1em;
@@ -3123,7 +3122,7 @@ button,
 }
 
 .separator {
-    color: #bfbfbf;
+    color: #BFBFBF;
     padding: 0 .2em;
 }
 
@@ -3147,7 +3146,6 @@ button,
     }
 }
 
-
 label {
     .radio &,
     .checkbox & {
@@ -3245,7 +3243,7 @@ label {
         font-size: 13px;
     }
 
-    > .btn:first-child:not( :last-child ):not( .dropdown-toggle ) {
+    > .btn:first-child:not( :last-child, .dropdown-toggle ) {
         border-right: 1px solid darken( saturate( $btn-primary, 15 ), 15 );
     }
 }
@@ -3286,7 +3284,7 @@ code {
 }
 
 .tab-content {
-    background-color: #fff;
+    background-color: #FFF;
     border: 0;
     border-radius: 0;
     padding: 1em;
@@ -3294,15 +3292,7 @@ code {
 
 .tab-pane {
     &.active {
-        &::after,
-        &::before {
-            content: " ";
-            display: table;
-        }
-
-        &::after {
-            clear: both;
-        }
+        @include clearfix;
     }
 }
 
@@ -3324,7 +3314,9 @@ code {
             margin-right: .4em;
             padding: .5em 1em;
 
-            &:hover, &:focus, &:active {
+            &:hover,
+            &:focus,
+            &:active {
                 background-color: $background-color-primary;
                 border: 2px solid $background-color-primary;
                 border-bottom: 0;
@@ -3364,12 +3356,12 @@ code {
 }
 
 #jobprogress {
-    background: url("../img/progress.png") -300px 0 no-repeat;
+    background: url( "../img/progress.png" ) -300px 0 no-repeat;
     border: 1px solid #666;
     display: inline-block;
     height: 10px;
     width: 200px;
- }
+}
 
 .progress_panel {
     border: 2px solid #EEE;
@@ -3394,7 +3386,7 @@ progress {
     }
 
     span {
-        background-color: #ecffeb;
+        background-color: #ECFFEB;
         border-radius: 5px;
         display: inline-block;
         font-size: 75%;
@@ -3403,7 +3395,7 @@ progress {
         white-space: nowrap;
 
         &.selected {
-            background-color: #d2fad0;
+            background-color: #D2FAD0;
         }
     }
 }
@@ -3428,7 +3420,7 @@ progress {
 }
 
 .tag_editor {
-    background: transparent url("../img/edit-tag.png") top left no-repeat;
+    background: transparent url( "../img/edit-tag.png" ) top left no-repeat;
     display: block;
     float: left;
     height: 16px;
@@ -3456,8 +3448,8 @@ progress {
 }
 
 #browse-return-to-results {
-    background-color: #e6e6e6;
-    border: 1px solid lighten($background-color-primary, 30%);
+    background-color: #E6E6E6;
+    border: 1px solid lighten( $background-color-primary, 30% );
     border-bottom-width: 0;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
@@ -3468,7 +3460,7 @@ progress {
 
 .browse-button {
     background-color: transparent;
-    border: 1px solid lighten($background-color-primary, 30%);
+    border: 1px solid lighten( $background-color-primary, 30% );
     display: block;
     overflow: hidden;
     padding: .4em .6em;
@@ -3481,7 +3473,7 @@ a.browse-button {
     color: $green-text-color;
 
     &:hover {
-        background: #fff;
+        background: #FFF;
     }
 }
 
@@ -3526,7 +3518,6 @@ span {
     }
 }
 
-
 .result-biblio-itemtype {
     float: right;
     font-size: 85%;
@@ -3546,8 +3537,8 @@ span {
 }
 
 #browse-next {
-    border-bottom-right-radius: 5px;
     border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
 }
 
 #merge_invoices {
@@ -3625,14 +3616,14 @@ input.renew {
 }
 
 .onsite-checkout-only {
-    background-color: rgba(255, 242, 206, .5);
+    background-color: rgba( 255, 242, 206, .5 );
     border: 1px solid #FFF2CE;
     border-radius: 4px;
 }
 
 .branchgriditem {
     background-color: #FFFFFF;
-    border: 1px solid #bfd9b9;
+    border: 1px solid #BFD9B9;
     border-radius: 3px;
     display: table-cell;
     float: left;
@@ -3659,14 +3650,13 @@ input.renew {
 
 #new_rule {
     background-color: #F4F8F9;
-    border: 2px solid #bfd9b9;
+    border: 2px solid #BFD9B9;
     border-radius: 5px;
     display: none;
     margin: .3em;
     padding: .3em;
 }
 
-
 .blocks {
     margin-bottom: .3em;
 }
@@ -3692,15 +3682,6 @@ input.renew {
     margin-top: 10px;
 }
 
-.form-group {
-    margin-bottom: 10px;
-
-    label {
-        font-weight: bold;
-    }
-}
-
-
 .form-message {
     background-color: #FFF;
     border: 1px solid #A4BEDD;
@@ -3720,7 +3701,7 @@ input.renew {
 }
 
 #fixedlengthbuilderaction {
-    border: 3px solid #e3f1df;
+    border: 3px solid #E3F1DF;
     left: 80%;
     padding: 5px;
     position: relative;
@@ -3782,7 +3763,7 @@ input.renew {
     #search-summary {
         position: absolute;
         top: 50%;
-        transform: translateY(-50%);
+        transform: translateY( -50% );
     }
 
     #generic_confirm_search_count {
@@ -3791,14 +3772,15 @@ input.renew {
 
     #generic_confirm_search {
         display: block;
-        visibility: hidden;
         margin: 1em 0 1em 10em;
+        visibility: hidden;
     }
 
     #partnerSearch {
         .modal-dialog {
             width: 50vw;
         }
+
         .modal-body {
             max-height: 70vh;
         }
@@ -3829,7 +3811,8 @@ input.renew {
     width: 100% !important;
 }
 
-.ar-title, .hq-title {
+.ar-title,
+.hq-title {
     .biblio-title {
         font-weight: bold;
     }
@@ -3847,66 +3830,76 @@ input.renew {
     h3 {
         margin: 30px 0 10px 0;
     }
+
     .dialog {
         h3 {
             margin: 10px 0;
         }
+
         margin-bottom: 20px;
     }
+
     .highlight_stage {
         font-weight: bold;
     }
-}
-
-#catalog_stockrotation .highlight_stage {
-    font-weight: bold;
-}
 
-#stockrotation {
     #rota_form {
         textarea {
-            width: 300px;
             height: 100px;
+            width: 300px;
         }
+
         #name {
             width: 300px;
         }
+
         fieldset {
             width: auto;
         }
     }
-    #stage_form fieldset, #add_rota_item_form fieldset {
+
+    #stage_form fieldset,
+    #add_rota_item_form fieldset {
         width: auto;
     }
+
     .dialog.alert {
         ul {
             margin: 20px 0;
         }
+
         li {
             list-style-type: none;
         }
     }
 }
 
+#catalog_stockrotation .highlight_stage {
+    font-weight: bold;
+}
+
 #catalog_stockrotation {
     .item_select_rota {
         vertical-align: middle;
     }
+
     h1 {
         margin-bottom: 20px;
     }
 }
 
-#stockrotation td.actions, #catalog_stockrotation td.actions {
+#stockrotation td.actions,
+#catalog_stockrotation td.actions {
     vertical-align: middle;
 }
 
-#stockrotation .stage, #catalog_stockrotation .stage {
+#stockrotation .stage,
+#catalog_stockrotation .stage {
+    background-color: rgba( 0, 0, 0, .1 );
+    border-radius: 5px;
     display: inline-block;
-    padding: 5px 7px;
     margin: 3px 0 3px 0;
-    border-radius: 5px;
-    background-color: rgba(0, 0, 0, .1);
+    padding: 5px 7px;
 }
 
 #restriction_form {
@@ -3917,6 +3910,7 @@ input.renew {
 
 #stage_list_headings {
     font-weight: bold;
+
     span {
         padding: 3px;
     }
@@ -3926,46 +3920,57 @@ input.renew {
     ul {
         padding-left: 0;
     }
+
     li {
         list-style: none;
         margin-bottom: 5px;
+
         span {
             padding: 6px 3px;
         }
     }
+
     .stagename {
-        width: 15em;
         display: inline-block;
+        width: 15em;
     }
+
     .stageduration {
-        width: 10em;
         display: inline-block;
+        width: 10em;
     }
+
     .stageactions {
         display: inline-block;
     }
-    li:nth-child(odd) {
+
+    li:nth-child( odd ) {
         background-color: #F3F3F3;
     }
+
     .drag_handle {
-        margin-right: 6px;
         cursor: move;
+        margin-right: 6px;
     }
+
     .drag_placeholder {
+        border: 1px dotted #AAA;
         height: 2em;
-        border: 1px dotted #aaa;
     }
+
     h3 {
         display: inline-block;
     }
+
     #ajax_status {
-        display: inline-block;
-        border: 1px solid #bcbcbc;
+        background: #F3F3F3;
+        border: 1px solid #BCBCBC;
         border-radius: 5px;
-        padding: 5px;
+        display: inline-block;
         margin-left: 10px;
-        background: #f3f3f3;
+        padding: 5px;
     }
+
     #manage_stages_help {
         margin: 20px 0;
     }
@@ -3984,7 +3989,7 @@ input.renew {
 .loggedin-menu-label {
     color: #FFFFFF;
     font-size: 12px;
-    line-height: 1.42857143;
+    line-height: 1.4286;
     padding: 4px 12px;
     white-space: nowrap;
 
@@ -4002,9 +4007,10 @@ input.renew {
 
 /* ==== MODULE LINKS - Start ==== */
 .buttons-list {
+    max-width: 260px;
+
     /* List containing the module links */
     padding: 0;
-    max-width: 260px;
 
     li {
         /* Standard attributes for the list elements */
@@ -4012,17 +4018,17 @@ input.renew {
         margin-bottom: 15px;
 
         a {
-            padding: 10px;
-            background-color: #e0e0e0;
+            background-color: #E0E0E0;
             border-radius: 6px;
             color: #101010;
             display: block;
             font-size: 110%;
             font-weight: bold;
+            padding: 10px;
 
             &:hover {
                 background-color: $background-color-primary;
-                color: white;
+                color: #FFF;
                 text-decoration: none;
             }
         }
@@ -4030,24 +4036,24 @@ input.renew {
 }
 
 .about h2 {
-    border-bottom: 1px solid #bfd9b9;
+    border-bottom: 1px solid #BFD9B9;
+    margin: .5em 0;
     padding: .5em .2em;
-    margin:  .5em 0;
 }
 
 .columns-2 {
-    columns: 2 auto;
     column-gap: 2.5em;
+    columns: 2 auto;
 }
 
 .columns-3 {
-    columns: 3 auto;
     column-gap: 2.5em;
+    columns: 3 auto;
 }
 
 .columns-4 {
-    columns: 4 auto;
     column-gap: 2em;
+    columns: 4 auto;
 }
 
 /* ==== MODULE LINKS - End ==== */
@@ -4057,7 +4063,6 @@ input.renew {
     padding-right: .3em;
 }
 
-
 #catalog-search-dropdown {
     padding: 0;
 
@@ -4140,12 +4145,11 @@ input.renew {
         border-bottom-width: 1px;
     }
 
-    &:nth-child(odd) {
+    &:nth-child( odd ) {
         background-color: #F8F8F8;
     }
 }
 
-
 .superlibrarian-hint {
     color: #000;
     padding: .2em 0;
@@ -4167,7 +4171,7 @@ input.renew {
         border-bottom-width: 1px;
     }
 
-    &:nth-child(odd) {
+    &:nth-child( odd ) {
         background-color: #EEE;
     }
 }
@@ -4251,8 +4255,8 @@ div .suggestion_note {
     }
 
     .result_item_details {
-        display:inline-block;
-        white-space:nowrap;
+        display: inline-block;
+        white-space: nowrap;
 
         &::before {
             content: "\2022";
@@ -4264,7 +4268,8 @@ div .suggestion_note {
     }
 }
 
-#camera, #output {
+#camera,
+#output {
     border: 8px solid #EDF4F6;
     padding: 1em;
 }
@@ -4276,8 +4281,6 @@ div .suggestion_note {
 
 #camera-error {
     display: none;
-    flex-direction: row;
-    flex-wrap: nowrap;
 
     div {
         padding: 0 .5em;
@@ -4289,21 +4292,11 @@ div .suggestion_note {
     margin: .5em;
 }
 
-.tab-pane {
-    &.active {
-        @include clearfix();
-    }
-}
-
 @import "header";
 @import "toolbar";
 @import "forms";
 
-@media (min-width: 200px) {
-
-}
-
-@media (max-width: 767px) {
+@media ( max-width: 767px ) {
     .header-menu-link {
         display: inline-block;
     }
@@ -4330,7 +4323,7 @@ div .suggestion_note {
         .open {
             .dropdown-menu {
                 background-color: #352C2E;
-                border: 1px solid #ccc;
+                border: 1px solid #CCC;
                 position: absolute;
             }
         }
@@ -4345,10 +4338,10 @@ div .suggestion_note {
             padding-left: 1.5em;
 
             &:hover {
-                text-decoration: underline;
-                color: #FFF;
                 background-color: #352C2E;
                 background-image: none;
+                color: #FFF;
+                text-decoration: underline;
             }
         }
 
@@ -4387,7 +4380,7 @@ div .suggestion_note {
     #user-menu {
         .open {
             .dropdown-menu {
-                background-color: #352c35;
+                background-color: #352C35;
                 position: absolute;
             }
         }
@@ -4402,10 +4395,9 @@ div .suggestion_note {
     }
 }
 
-@media (max-width: 768px) {
+@media ( max-width: 768px ) {
     .navbar-nav {
         li {
-
             a {
                 padding: .4em .6em;
             }
@@ -4431,10 +4423,7 @@ div .suggestion_note {
     }
 }
 
-@media (min-width: 800px) {
-
-
-
+@media ( min-width: 800px ) {
     #helper {
         i {
             display: none;
@@ -4482,10 +4471,10 @@ div .suggestion_note {
     }
 
     body.modalprinter .modal-dialog.focused {
-        position: absolute;
-        padding: 0;
-        margin: 0;
         left: 0;
+        margin: 0;
+        padding: 0;
+        position: absolute;
         top: 0;
     }
 
-- 
2.30.2