settings.scss in sail-2.0.0

- old
+ new

@@ -28,20 +28,20 @@
     z-index: 2;
     width: 25rem;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    -webkit-border-radius: 12px;
-    -moz-border-radius: 12px;
-    border-radius: 12px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
 
     @media (min-width: 992px) { width: 44%; }
     @media (min-width: 1200px) { width: 21%; }
 
     hr {
       border: 0;
-      height: 0;
+      height: 1px;
       border-top: 1px solid rgba(0, 0, 0, 0.1);
       border-bottom: 1px solid rgba(255, 255, 255, 0.3);
     }
 
     .card-body-container {
@@ -54,19 +54,28 @@
       width: 100%;
       display: table-cell;
       vertical-align: bottom;
     }
 
-    .type-label {
+    .tag {
       font-weight: bold;
-      -webkit-border-radius: 25px;
-      -moz-border-radius: 25px;
-      border-radius: 25px;
-      background-color: $light_yellow;
+      -webkit-border-radius: 5px;
+      -moz-border-radius: 5px;
+      border-radius: 5px;
       padding: 10px;
       color: $main_black;
       font-size: 14px;
+      margin-left: 5px;
+      text-decoration: none;
+
+      &.type-label {
+        background-color: $light_yellow;
+      }
+
+      &.group-label {
+        background-color: $cerulean;
+      }
     }
 
     .label-container {
       float: right;
       margin-top: 5px;
@@ -87,10 +96,14 @@
       height: 20px;
       font-size: 18px;
       outline: none;
       border: none;
       border-bottom: 2px solid darken($aluminium, 30%);
+      -webkit-transition : border .25s ease-in;
+      -moz-transition : border .25s ease-in;
+      -o-transition : border .25s ease-in;
+      transition : border .25s ease-in;
 
       &:focus {
         border-color: $tangerine;
         outline: none;
       }
@@ -221,33 +234,59 @@
     }
 
     .slider.round:before {
       border-radius: 50%;
     }
+
+    .refresh-button {
+      border: none;
+      outline: none;
+      float: left;
+
+      img {
+        height: 30px;
+      }
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      &.active {
+        img {
+          -webkit-animation:spin 1s linear infinite;
+          -moz-animation:spin 1s linear infinite;
+          animation:spin 1s linear infinite;
+        }
+      }
+
+      @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
+      @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
+      @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+    }
   }
 
   #search-form {
     text-align: center;
     padding-top: 25px;
 
     #query {
       height: 50px;
       width: 50%;
-      -webkit-border-radius: 12px;
-      -moz-border-radius: 12px;
-      border-radius: 12px;
-      border: none;
+      -webkit-border-radius: 5px;
+      -moz-border-radius: 5px;
+      border-radius: 5px;
+      border: 3px solid transparent;
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
       font-size: 18px;
       text-align: center;
-      -webkit-transition : border 1ms ease-in;
-      -moz-transition : border 1ms ease-in;
-      -o-transition : border 1ms ease-in;
-      transition : border 1ms ease-in;
+      -webkit-transition : border .25s ease-in;
+      -moz-transition : border .25s ease-in;
+      -o-transition : border .25s ease-in;
+      transition : border .25s ease-in;
 
       &:focus {
-        border: 2px solid $tangerine;
+        border: 3px solid $tangerine;
       }
     }
   }
 
   .notice {
@@ -271,8 +310,30 @@
       color: $dark_green;
     }
 
     &.alert {
       color: $bright_red;
+    }
+  }
+
+  #progress-container {
+    text-align: center;
+
+    #search-submit-progress {
+      display: none;
+      width: 50%;
+      -webkit-appearance: none;
+      height: 3px;
+      position: relative;
+      bottom: 22px;
+
+      &::-webkit-progress-bar {
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
+        background-color: white;
+      }
+
+      &::-webkit-progress-value {
+        background-color: $cerulean;
+      }
     }
   }
 }