From 594580ec2d50593f599dea02db4d126ffd75dfb3 Mon Sep 17 00:00:00 2001
From: Guilherme Danno <guilherme.danno@gmail.com>
Date: Sat, 16 May 2020 00:32:32 -0300
Subject: [PATCH] move files to scss

creating this commit so git don't lose track of the changes
---
 .../css/{clearbutton.css => clearbutton.scss} |  0
 .../css/{detailtable.css => detailtable.scss} |  0
 .../css/{flexstyles.css => flexstyles.scss}   |  0
 src/assets/css/{fonts.css => fonts.scss}      |  0
 .../css/{fonts.sized.css => fonts.sized.scss} |  0
 src/assets/css/{ios.css => ios.scss}          |  0
 src/assets/css/{livetv.css => livetv.scss}    |  0
 src/assets/css/{site.css => site.scss}        | 63 +++++++++----------
 8 files changed, 29 insertions(+), 34 deletions(-)
 rename src/assets/css/{clearbutton.css => clearbutton.scss} (100%)
 rename src/assets/css/{detailtable.css => detailtable.scss} (100%)
 rename src/assets/css/{flexstyles.css => flexstyles.scss} (100%)
 rename src/assets/css/{fonts.css => fonts.scss} (100%)
 rename src/assets/css/{fonts.sized.css => fonts.sized.scss} (100%)
 rename src/assets/css/{ios.css => ios.scss} (100%)
 rename src/assets/css/{livetv.css => livetv.scss} (100%)
 rename src/assets/css/{site.css => site.scss} (76%)

diff --git a/src/assets/css/clearbutton.css b/src/assets/css/clearbutton.scss
similarity index 100%
rename from src/assets/css/clearbutton.css
rename to src/assets/css/clearbutton.scss
diff --git a/src/assets/css/detailtable.css b/src/assets/css/detailtable.scss
similarity index 100%
rename from src/assets/css/detailtable.css
rename to src/assets/css/detailtable.scss
diff --git a/src/assets/css/flexstyles.css b/src/assets/css/flexstyles.scss
similarity index 100%
rename from src/assets/css/flexstyles.css
rename to src/assets/css/flexstyles.scss
diff --git a/src/assets/css/fonts.css b/src/assets/css/fonts.scss
similarity index 100%
rename from src/assets/css/fonts.css
rename to src/assets/css/fonts.scss
diff --git a/src/assets/css/fonts.sized.css b/src/assets/css/fonts.sized.scss
similarity index 100%
rename from src/assets/css/fonts.sized.css
rename to src/assets/css/fonts.sized.scss
diff --git a/src/assets/css/ios.css b/src/assets/css/ios.scss
similarity index 100%
rename from src/assets/css/ios.css
rename to src/assets/css/ios.scss
diff --git a/src/assets/css/livetv.css b/src/assets/css/livetv.scss
similarity index 100%
rename from src/assets/css/livetv.css
rename to src/assets/css/livetv.scss
diff --git a/src/assets/css/site.css b/src/assets/css/site.scss
similarity index 76%
rename from src/assets/css/site.css
rename to src/assets/css/site.scss
index 627145abc1..db179afb2a 100644
--- a/src/assets/css/site.css
+++ b/src/assets/css/site.scss
@@ -1,19 +1,19 @@
-body,
-html {
+@mixin fullpage {
     margin: 0;
     padding: 0;
     height: 100%;
 }
 
-.clipForScreenReader {
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(50%);
-    height: 1px;
-    width: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
+html {
+    @include fullpage;
+    line-height: 1.35;
+}
+
+body {
+    @include fullpage;
+    overflow-x: hidden;
+    background-color: transparent !important;
+    -webkit-font-smoothing: antialiased;
 }
 
 .material-icons {
@@ -30,10 +30,6 @@ html {
     contain: strict;
 }
 
-html {
-    line-height: 1.35;
-}
-
 .layout-mobile,
 .layout-tv {
     -webkit-touch-callout: none;
@@ -44,12 +40,6 @@ html {
     user-select: none;
 }
 
-body {
-    overflow-x: hidden;
-    background-color: transparent !important;
-    -webkit-font-smoothing: antialiased;
-}
-
 .mainAnimatedPage {
     contain: style size !important;
 }
@@ -62,7 +52,7 @@ body {
     overflow-y: hidden !important;
 }
 
-div[data-role=page] {
+div[data-role="page"] {
     outline: 0;
 }
 
@@ -75,10 +65,10 @@ div[data-role=page] {
     padding-left: 0.15em;
     font-weight: 400;
     white-space: normal !important;
-}
 
-.fieldDescription + .fieldDescription {
-    margin-top: 0.3em;
+    + .fieldDescription {
+        margin-top: 0.3em;
+    }
 }
 
 .content-primary,
@@ -89,9 +79,14 @@ div[data-role=page] {
     padding-bottom: 5em !important;
 }
 
-@media all and (min-width: 50em) {
-    .readOnlyContent,
-    form {
+.readOnlyContent {
+    @media all and (min-width: 50em) {
+        max-width: 54em;
+    }
+}
+
+form {
+    @media all and (min-width: 50em) {
         max-width: 54em;
     }
 }
@@ -111,12 +106,12 @@ div[data-role=page] {
 .headroom {
     will-change: transform;
     transition: transform 200ms linear;
-}
 
-.headroom--pinned {
-    transform: translateY(0%);
-}
+    &--pinned {
+        transform: translateY(0%);
+    }
 
-.headroom--unpinned {
-    transform: translateY(-100%);
+    &--unpinned {
+        transform: translateY(-100%);
+    }
 }