settings.scss in sail-3.2.4

- old
+ new

@@ -13,11 +13,11 @@
   .card {
     min-height: 230px;
     background-color: white;
     margin: 1rem .75rem;
     display: inline-block;
-    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.15), 0 15px 12px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     padding: 10px;
     z-index: 2;
     width: 90%;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -47,17 +47,18 @@
       display: table-cell;
       vertical-align: bottom;
     }
 
     .tag {
-      font-weight: bold;
       @extend .rounded;
       padding: 10px;
       color: $main_black;
       font-size: 14px;
       margin-left: 5px;
       text-decoration: none;
+      font-weight: bold;
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 
       &.type-label {
         background-color: $light_yellow;
       }
 
@@ -65,10 +66,15 @@
         background-color: $cerulean;
       }
 
       &.stale-label {
         background-color: $bright_red;
+
+        @media (max-width: 413px) {
+          position: relative;
+          top: 8px;
+        }
       }
     }
 
     .label-container {
       float: right;
@@ -79,10 +85,11 @@
       clear: both;
       padding: 25px 15px 15px 15px;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
+      @extend .fade-in;
       color: darken($aluminium, 45%);
     }
 
     .value-input {
       width: 98%;
@@ -345,35 +352,27 @@
       margin: 0 0 0 8px;
     }
   }
 
   .notice {
-    background-color: white;
-    font-size: 24px;
-    position: fixed;
-    left: 50px;
-    top: 85px;
-    padding: 25px;
-    width: 150px;
-    text-align: center;
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
     display: none;
-    @extend .rounded;
+    clear: both;
+    padding: 25px 15px 15px 15px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    font-weight: bolder;
+    text-align: center;
     @extend .fade-in;
 
     &.success {
       color: $dark_green;
     }
 
     &.alert {
       color: $bright_red;
     }
-
-    @media (max-width: 767px) {
-      width: 85%;
-      left: 1.5%;
-    }
   }
 
   #progress-container {
     text-align: center;
 
@@ -408,9 +407,10 @@
   -webkit-transition: background-color 0.5s;
   -moz-transition: background-color 0.5s;
   -ms-transition: background-color 0.5s;
   -o-transition: background-color 0.5s;
   transition: background-color 0.5s;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 
   &:active {
     color: $main_black;
     opacity: .8;
   }