settings.scss in sail-3.0.0

- old
+ new

@@ -1,16 +1,8 @@
 @import "colors";
+@import "shared";
 
-@-webkit-keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
 #settings-dashboard {
   max-height: 100vh;
   color: $main_black;
 
   #settings-container {
@@ -28,22 +20,22 @@
     z-index: 2;
     width: 25rem;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
+    @extend .rounded;
 
     @media (min-width: 992px) { width: 44%; }
     @media (min-width: 1200px) { width: 21%; }
 
-    hr {
-      border: 0;
-      height: 1px;
-      border-top: 1px solid rgba(0, 0, 0, 0.1);
-      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    h3 {
+      margin-left: 25px;
+
+      .relevancy-score {
+        float: right;
+        color: darken($aluminium, 5%);
+      }
     }
 
     .card-body-container {
       display: table;
       width: 100%;
@@ -56,13 +48,11 @@
       vertical-align: bottom;
     }
 
     .tag {
       font-weight: bold;
-      -webkit-border-radius: 5px;
-      -moz-border-radius: 5px;
-      border-radius: 5px;
+      @extend .rounded;
       padding: 10px;
       color: $main_black;
       font-size: 14px;
       margin-left: 5px;
       text-decoration: none;
@@ -96,38 +86,26 @@
 
     .value-input {
       width: 98%;
       margin-bottom: 10px;
       height: 20px;
-      font-size: 18px;
-      outline: none;
+      font-size: 22px;
+      text-align: center;
       border: none;
       border-bottom: 2px solid $aluminium;
-      -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;
-      }
+      @extend .border-transition;
     }
 
     .date-picker {
       position: relative;
       bottom: 10px;
       border: none;
       border-bottom: 2px solid $aluminium;
       width: 100%;
       text-align: center;
-      font-size: 18px;
-
-      &:focus {
-        border-color: $tangerine;
-        outline: none;
-      }
+      font-size: 22px;
+      @extend .border-transition;
     }
 
     .value-slider {
       -webkit-appearance: none;
       width: 100%;
@@ -158,32 +136,13 @@
         cursor: pointer;
       }
     }
 
     .btn-value-submit {
+      @extend .btn-sail;
       width: 100%;
       height: 35px;
-      text-align: center;
-      font-size: 18px;
-      border-radius: .25rem;
-      background-color: $tangerine;
-      border: none;
-      outline: none;
-      -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;
-
-      &:active {
-        color: $main_black;
-        opacity: .8;
-      }
-
-      &:hover {
-        background-color: darken($tangerine, 20%);
-      }
     }
 
     .switch {
       position: relative;
       display: inline-block;
@@ -275,25 +234,16 @@
       padding-top: 25px;
 
       #query {
         height: 50px;
         width: 100%;
-        -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 .25s ease-in;
-        -moz-transition : border .25s ease-in;
-        -o-transition : border .25s ease-in;
-        transition : border .25s ease-in;
-
-        &:focus {
-          border: 3px solid $tangerine;
-        }
+        @extend .rounded;
+        @extend .border-transition;
       }
     }
 
     .offset-container {
       float: left;
@@ -304,92 +254,64 @@
     .inner-container {
       width: 50%;
       float: left;
     }
 
-    #btn-order {
+    .search-button {
       float: left;
-      margin: 25px 0 0 15px;
-      outline: none;
       border: 3px solid transparent;
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-      -webkit-border-radius: 5px;
-      -moz-border-radius: 5px;
-      border-radius: 5px;
-      -webkit-transition : border .25s ease-in;
-      -moz-transition : border .25s ease-in;
-      -o-transition : border .25s ease-in;
-      transition : border .25s ease-in;
-      height: 58px;
+      @extend .rounded;
+      @extend .border-transition;
       background: white;
 
       img {
         height: 100%;
       }
+    }
 
-      &:hover {
-        border: 3px solid $tangerine;
-      }
+    #btn-order {
+      margin: 25px 0 0 15px;
+      height: 58px;
     }
 
     #sort-menu {
       background: white;
       position: absolute;
-      left: 50%;
-      top: 25%;
+      right: 18%;
+      top: 165px;
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-      -webkit-border-radius: 5px;
-      -moz-border-radius: 5px;
-      border-radius: 5px;
-      -webkit-animation: fadeIn 0.5s;
-      animation: fadeIn 0.5s;
+      @extend .rounded;
+      @extend .fade-in;
       padding: 10px;
 
-      @media (min-width: 767px) { top: 16%; left: 60%; }
-      @media (min-width: 992px) { top: 12%; left: 65%; }
-      @media (min-width: 1200px) { top: 18%; left: 70%; }
+      @media (min-width: 1980px) { right: 22%; }
 
       button {
         outline: none;
         border: none;
         width: 100%;
         font-size: 20px;
         font-family: 'Raleway', sans-serif;
         background: transparent;
         padding: 5px;
-        -webkit-border-radius: 5px;
-        -moz-border-radius: 5px;
-        border-radius: 5px;
+        @extend .rounded;
 
         &:hover {
           background-color: $tangerine;
         }
       }
     }
 
     #main-app-link {
-      float: left;
       margin: 25px 0 0 8px;
       height: 53px;
-      border: 3px solid transparent;
-      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-      -webkit-border-radius: 5px;
-      -moz-border-radius: 5px;
-      border-radius: 5px;
-      -webkit-transition : border .25s ease-in;
-      -moz-transition : border .25s ease-in;
-      -o-transition : border .25s ease-in;
-      transition : border .25s ease-in;
-      background: white;
+    }
 
-      img {
-        height: 100%;
-      }
-
-      &:hover {
-        border: 3px solid $tangerine;
-      }
+    #btn-profiles {
+      height: 58px;
+      margin: 25px 0 0 8px;
     }
   }
 
   .notice {
     background-color: white;
@@ -397,18 +319,15 @@
     position: fixed;
     left: 50px;
     top: 85px;
     padding: 25px;
     width: 150px;
-    -webkit-border-radius: 0.5rem;
-    -moz-border-radius: 0.5rem;
-    border-radius: 0.5rem;
     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;
-    -webkit-animation: fadeIn 0.5s;
-    animation: fadeIn 0.5s;
+    @extend .rounded;
+    @extend .fade-in;
 
     &.success {
       color: $dark_green;
     }
 
@@ -436,7 +355,30 @@
 
       &::-webkit-progress-value {
         background-color: $cerulean;
       }
     }
+  }
+}
+
+.btn-sail {
+  text-align: center;
+  font-size: 18px;
+  @extend .rounded;
+  background-color: $tangerine;
+  border: none;
+  outline: none;
+  -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;
+
+  &:active {
+    color: $main_black;
+    opacity: .8;
+  }
+
+  &:hover {
+    background-color: darken($tangerine, 20%);
   }
 }