settings.scss in sail-1.2.0

- old
+ new

@@ -1,24 +1,25 @@
 @import "colors";
 
 #settings-dashboard {
-  height: 100vh;
+  max-height: 100vh;
   color: $main_black;
 
   #settings-container {
-    height: 80%;
+    margin-top: 1rem;
+    text-align: center;
   }
 
   .card {
     min-height: 230px;
     background-color: white;
-    float: left;
-    margin: 30px;
+    margin: 1rem .75rem;
+    display: inline-block;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
     padding: 10px;
     z-index: 2;
-    width: 92%;
+    width: 25rem;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     -webkit-border-radius: 12px;
     -moz-border-radius: 12px;
@@ -34,14 +35,26 @@
       border-bottom: 1px solid rgba(255, 255, 255, 0.3);
     }
 
     .setting-message {
       text-align: center;
-      color: $dark_green;
       font-size: 18px;
       font-weight: bolder;
       z-index: 5;
+      -webkit-transition: opacity 1s ease;
+      -moz-transition: opacity 1s ease;
+      -ms-transition: opacity 1s ease;
+      -o-transition: opacity 1s ease;
+      transition: opacity 1s ease;
+
+      p.success {
+        color: $dark_green;
+      }
+      
+      p.failure {
+        color: $bright_red;
+      }
     }
     
     .card-body-container {
       display: table;
       width: 100%;
@@ -65,15 +78,16 @@
       font-size: 14px;
     }
 
     .label-container {
       float: right;
+      margin-top: 5px;
     }
 
     .setting-description {
       clear: both;
-      padding: 15px;
+      padding: 25px 15px 15px 15px;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
       color: darken($aluminium, 45%);
     }
@@ -128,17 +142,19 @@
     .btn-value-submit {
       width: 100%;
       height: 35px;
       text-align: center;
       font-size: 18px;
+      border-radius: .25rem;
       background-color: $tangerine;
       border: none;
       outline: none;
       font-family: 'Roboto', sans-serif;
 
       &:active {
         color: $main_black;
+        opacity: .8;
       }
 
       &:hover {
         background-color: darken($tangerine, 20%);
       }
@@ -197,8 +213,33 @@
       border-radius: 34px;
     }
 
     .slider.round:before {
       border-radius: 50%;
+    }
+  }
+
+  #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;
+      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;
+
+      &:focus {
+        border: 2px solid $tangerine;
+      }
     }
   }
 }