Bug 30952: Add "card" layout to the checkout page

Also fix the label positioning

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss
index 8281a77..c293c05 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss
@@ -32,3 +32,8 @@ $nav-menu-bullet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
     border: 1px solid #C0C0C0;
     color: #999;
 }
+
+@mixin card {
+    background-color: white;
+    box-shadow: 0 0 4px 1px #00000030;
+}

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 383dc03..306b1a7 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -207,7 +207,7 @@ a {
 
 aside {
     fieldset {
-        box-shadow: 8px 8px 12px rgba(170, 170, 170, .356);
+        @include card;
         padding: .9em;
 
         button + button,
@@ -704,7 +704,7 @@ label,
     }
 
     &.circ_barcode {
-        display: inline-block;
+        display: block;
         font-size: 105%;
         font-weight: bold;
         margin-bottom: 1rem;
@@ -864,15 +864,14 @@ ol {
 }
 
 fieldset {
+    @include card;
     width: 100%;
     color: $green-text-color;
-    background-color: #FFF;
     position: relative;
     color: #696969;
     left: 0;
     top: 0;
     margin: 0 1em 1em 0;
-    box-shadow: 8px 8px 12px rgba(170, 170, 170, .356);
     padding: 1em;
 
     + fieldset {
@@ -1094,11 +1093,10 @@ div {
     }
 
     .circmessage {
-        margin-bottom: .3em;
-        padding: 0 .4em .4em;
+        padding: .4em;
 
-        &:first-child {
-            margin-top: 1em;
+        .circmessage {
+            margin-bottom: .3em;
         }
     }
 
@@ -1194,8 +1192,6 @@ div {
     }
 
     &.rows {
-        clear: left;
-        float: left;
         margin: 0;
         padding: 0;
         width: 100%;
@@ -1208,8 +1204,6 @@ div {
 
         li {
             border-bottom: 1px solid #EEE;
-            clear: left;
-            float: left;
             list-style-type: none;
             padding: .275em;
             width: 100%;
@@ -1232,7 +1226,7 @@ div {
 
         span {
             &.label {
-                float: left;
+                display: inline-block;
                 font-weight: bold;
                 margin-right: 1em;
                 padding-top: 0;
@@ -1381,6 +1375,7 @@ dd {
 .patroninfo-section {
     padding: .5em;
     margin: .5em;
+    @include card;
 }
 
 .patroninfo-heading {
@@ -1655,6 +1650,10 @@ i {
     }
 }
 
+#circmessages {
+    @include card;
+}
+
 #circ_needsconfirmation {
     margin: auto;
 }
@@ -2894,10 +2893,9 @@ td.bundle {
 }
 
 .statictabs {
+    @include card;
 
-    background-color: #FFFFFF;
     margin-top: 20px;
-    box-shadow: 8px 8px 12px rgba(170, 170, 170, .356);
     padding: 20px;
 
     h3{