commit

app/javascript/styles/gabsocial/basics.scss

@@ -1,8 +1,9 @@
 @function hex-color($color) {
-  @if type-of($color) == 'color' {
+  @if type-of($color)=='color' {
     $color: str-slice(ie-hex-str($color), 4);
   }
-  @return '%23' + unquote($color)
+
+  @return '%23'+unquote($color)
 }
 
 html {
@@ -15,16 +16,17 @@ html {
 }
 
 body {
-  @include font-size(16);
-  @include line-height(19);
+  font-size: 16px;
+  line-height: 19px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizelegibility;
   font-feature-settings: "kern";
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-tap-highlight-color: transparent;
   color: white;
   background: $gab-background-base;
+
   &.theme-gabsocial-light {
     color: $gab-default-text-light;
     background: $gab-background-base-light;
@@ -82,18 +84,18 @@ body {
 
     .container {
       position: absolute;
-      width: 100%;
-      height: 100%;
       overflow: hidden;
+
+      @include size(100%);
     }
   }
 
   &.admin {
     background: darken($ui-base-color, 4%);
     position: fixed;
-    width: 100%;
-    height: 100%;
     padding: 0;
+
+    @include size(100%);
   }
 
   &.error {
@@ -101,12 +103,10 @@ body {
     text-align: center;
     color: $darker-text-color;
     background: $ui-base-color;
-    width: 100%;
-    height: 100%;
     padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+
+    @include flex(center, center);
+    @include size(100%);
 
     .dialog {
       vertical-align: middle;
@@ -116,16 +116,14 @@ body {
         img {
           display: block;
           max-width: 470px;
-          width: 100%;
-          height: auto;
           margin-top: -120px;
+
+          @include size(100%, auto);
         }
       }
 
       h1 {
-        font-size: 20px;
-        line-height: 28px;
-        font-weight: 400;
+        @include text-sizing(20px, 400, 28px);
       }
     }
   }
@@ -141,24 +139,12 @@ button {
 }
 
 .app-holder {
-  &,
-  & > div {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    align-items: start;
-    justify-content: center;
-    outline: 0 !important;
-  }
-}
 
-.visuallyhidden {
-  border: 0 !important;
-  clip: rect(1px,1px,1px,1px) !important;
-  font-size: 1px !important;
-  height: 1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-}
+  &,
+  &>div {
+    outline: 0 !important;
+
+    @include flex(center, start);
+    @include size(100%);
+  }
+}