finish scss conversion

1 files changed, 117 insertions, 117 deletions

diff --git a/src/scss/common.scss b/src/scss/common.scss
index 5a570f9..222aba8 100644
--- a/src/scss/common.scss
+++ b/src/scss/common.scss
@@ -6,6 +6,8 @@
 @include font-face("Facebook");
 @include font-face("SF Pro");
 
+$header-height: $scale * 3.5;
+
 * {
   box-sizing: border-box;
 }
@@ -268,6 +270,11 @@ footer#footer {
   }
 }
 
+input.btn {
+    text-align: left;
+    font-weight: normal;
+}
+
 .image {
   display: block;
 
@@ -332,24 +339,20 @@ object.inner {
   @include column;
 }
 
+.hidden {
+  display: none;
+}
+
 .grow {
   width: auto;
   flex: 1;
   flex-grow: 1;
 }
 
-.ml-sm {
-  margin-left: .5rem;
-}
-
 .ml {
   margin-left: 1rem;
 }
 
-.mr-sm {
-  margin-right: .5rem;
-}
-
 .mr {
   margin-right: 1rem;
 }
@@ -362,6 +365,18 @@ object.inner {
   margin-bottom: .75rem;
 }
 
+.pl {
+  padding-left: 1rem;
+}
+
+.pr {
+  padding-right: 1rem;
+}
+
+.pt {
+  padding-top: 1rem;
+}
+
 .pb {
   padding-bottom: 1rem;
 }
@@ -464,137 +479,122 @@ object.inner {
   }
 }
 
-.float-right {
-  position: absolute;
-  top: 50%;
-  left: 100%;
-  transform: translate(-125%, -50%);
-}
-
 .mi {
   font-family: 'Material Icons';
   font-style: normal;
-  font-size: 1.5rem;
-}
+  font-size: 1.5em;
 
-.mi-sm {
-  font-size: 1rem;
-}
+  &.mi-sm {
+    font-size: 1em;
+  }
 
-.mi-lg {
-  font-size: 2rem;
+  &.mi-lg {
+    font-size: 2em;
+  }
 }
 
 #toast-container {
   position: fixed;
-  top: 4rem;
+  top: $header-height;
   left: 100%;
-  transform: translateX(-110%);
-  margin-top: 1rem;
-  z-index: 10000;
-}
-
-.toast {
-  color: $white;
-  padding: .75rem;
-  margin: .5rem;
-  border-radius: .5rem;
-  min-width: 15rem;
-  animation: fadeIn .1s, slideIn .25s linear;
-  display: flex;
-  justify-content: space-between;
-}
+  transform: translateX(-100%);
+  padding: $outer-gap;
+  z-index: $toast-z-index;
 
-.toast.error {
-  background-color: $red;
-}
-
-.toast.success {
-  background-color: $green;
-}
-
-form input:not(.btn) {
-  display: block;
-  font-size: 1.1rem;
-  outline: 2px solid $surface2;
-  border-radius: .25rem;
-  padding: .75rem;
-}
+  .toast {
+    padding: $inner-gap;
+    margin: $inner-gap;
+    border-radius: $inner-radius;
+    min-width: 15em;
+    animation: fadeIn .1s, slideIn .25s linear;
+    display: flex;
+    justify-content: space-between;
 
-form input:not(.btn):focus {
-  outline-color: $blue;
-}
+    &.error {
+      background: $red;
+    }
 
-form .rel label:not(.static) {
-  position: absolute;
-  top: 50%;
-  transform: translate(.5rem, -40%);
-  color: $subtext;
-  transition: all 0.2s ease-out;
-  pointer-events: none;
-  width: fit-content;
-  font-size: 1.1rem;
+    &.success {
+      background: $green;
+    }
+  }
 }
 
-input:focus + label:not(.static),
-input:not(:placeholder-shown) + label:not(.static) {
-  color: $text;
-  top: 0;
-  padding: .5rem;
-  padding-top: 0;
-  font-size: .75rem;
-  transform: translate(.5rem, -25%);
-  background-color: $surface0;
-}
+form {
+  input {
+    display: block;
+    font-size: 1.1em;
+    outline: 2px solid $surface2;
+    border-radius: $inner-radius;
+    padding: $inner-gap;
 
-.rel {
-  position: relative;
-}
+    &:focus {
+      outline-color: $blue;
+    }
 
-.rel input {
-  width: 100%;
-  flex-grow: 1;
-}
+    &[type=radio] {
+      outline: none;
+      padding: 3em;
+      width: 1em;
+    }
+  }
 
-input[type=radio] {
-  padding: 3rem !important;
-  width: 1rem !important;
-  outline: none !important;
-}
+  .form-input {
+    position: relative;
 
-.radio {
-  display: flex;
-  flex-direction: row;
-  width: auto;
-  flex-grow: 1;
-}
+    label {
+      padding-left: $inner-gap / 2;
+      position: absolute;
+      top: 50%;
+      transform: translate(.5rem, -40%);
+      color: $subtext;
+      transition: all 0.2s ease-out;
+      pointer-events: none;
+      width: fit-content;
+      font-size: 1.1rem;
+    }
 
-.radio label {
-  border: 1px solid $surface2;
-  height: fit-content;
-  width: 100%;
-  padding: .75rem;
-  border-radius: .25rem;
-  cursor: pointer;
-}
+    input {
+      width: 100%;
+      flex-grow: 1;
 
-.radio input {
-  position: absolute;
-  top: 50%;
-  left: 100%;
-  transform: translate(-250%, -70%);
-  width: fit-content;
-  outline: none !important;
-}
+      &:focus,
+      &:not(:placeholder-shown) {
+        & + label {
+          position: absolute;
+          top: 50%;
+          color: $text;
+          top: 0;
+          padding: .5rem;
+          padding-top: 0;
+          font-size: .75rem;
+          transform: translate(.5rem, -25%);
+          background-color: $surface0;
+        }
+      }
+    }
+  }
 
-.container {
-  padding: 1rem;
-}
+  .form-radio {
+    @include row;
+    width: auto;
+    flex-grow: 1;
+    position: relative;
 
-.grow {
-  flex-grow: 1;
-}
+    label {
+      border: 1px solid $surface2;
+      height: fit-content;
+      width: 100%;
+      padding: $inner-gap;
+      border-radius: $inner-radius;
+      cursor: pointer;
+    }
 
-.hidden {
-  display: none;
+    input {
+      position: absolute;
+      top: 50%;
+      left: 100%;
+      transform: translate(-250%, -70%);
+    }
+  }
 }