Merge pull request #1236 from GuilhermeHideki/convert-to-scss

Convert files to SCSS

src/assets/css/fonts.scss

@@ -1,29 +1,26 @@
-html {
+@mixin font($weight: null, $size: null) {
     font-family: "Noto Sans", sans-serif;
+    font-weight: $weight;
+    font-size: $size;
+}
+
+html {
+    @include font;
     text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
 }
 
-h1,
-h2,
-h3 {
-    font-family: "Noto Sans", sans-serif;
-}
-
 h1 {
-    font-weight: 400;
-    font-size: 1.8em;
+    @include font(400, 1.8em);
 }
 
 h2 {
-    font-weight: 400;
-    font-size: 1.5em;
+    @include font(400, 1.5em);
 }
 
 h3 {
-    font-weight: 400;
-    font-size: 1.17em;
+    @include font(400, 1.17em);
 }
 
 .layout-tv {

src/assets/css/fonts.sized.css

@@ -1,31 +0,0 @@
-h1 {
-    font-weight: 400;
-    font-size: 1.8em;
-}
-
-.layout-desktop h1 {
-    font-size: 2em;
-}
-
-h2 {
-    font-weight: 400;
-    font-size: 1.5em;
-}
-
-h3 {
-    font-weight: 400;
-    font-size: 1.17em;
-}
-
-@media all and (min-height: 720px) {
-    html {
-        font-size: 20px;
-    }
-}
-
-/* This is supposed to be 1080p, but had to reduce the min height to account for possible browser chrome */
-@media all and (min-height: 1000px) {
-    html {
-        font-size: 27px;
-    }
-}

src/assets/css/fonts.sized.scss

@@ -0,0 +1,31 @@
+@mixin header-font($size: null) {
+    font-weight: 400;
+    font-size: $size;
+}
+
+html {
+    @media all and (min-height: 720px) {
+        font-size: 20px;
+    }
+
+    /* This is supposed to be 1080p, but had to reduce the min height to account for possible browser chrome */
+    @media all and (min-height: 1000px) {
+        font-size: 27px;
+    }
+}
+
+h1 {
+    @include header-font(1.8em);
+
+    .layout-desktop & {
+        font-size: 2em;
+    }
+}
+
+h2 {
+    @include header-font(1.8em);
+}
+
+h3 {
+    @include header-font(1.17em);
+}

src/assets/css/livetv.scss

@@ -2,8 +2,8 @@
     padding-bottom: 15em;
 }
 
-@media all and (min-width: 62.5em) {
 #guideTab {
+    @media all and (min-width: 62.5em) {
         padding-left: 0.5em;
     }
 }

src/assets/css/site.scss

@@ -1,14 +1,19 @@
-body,
-html {
+@mixin fullpage {
     margin: 0;
     padding: 0;
     height: 100%;
 }
 
-.layout-mobile,
-.layout-tv {
-    -webkit-touch-callout: none;
-    user-select: none;
+html {
+    @include fullpage;
+    line-height: 1.35;
+}
+
+body {
+    @include fullpage;
+    overflow-x: hidden;
+    background-color: transparent !important;
+    -webkit-font-smoothing: antialiased;
 }
 
 .clipForScreenReader {
@@ -36,14 +41,10 @@ html {
     contain: strict;
 }
 
-html {
-    line-height: 1.35;
-}
-
-body {
-    overflow-x: hidden;
-    background-color: transparent !important;
-    -webkit-font-smoothing: antialiased;
+.layout-mobile,
+.layout-tv {
+    -webkit-touch-callout: none;
+    user-select: none;
 }
 
 .mainAnimatedPage {
@@ -58,7 +59,7 @@ body {
     overflow-y: hidden !important;
 }
 
-div[data-role=page] {
+div[data-role="page"] {
     outline: 0;
 }
 
@@ -71,11 +72,11 @@ div[data-role=page] {
     padding-left: 0.15em;
     font-weight: 400;
     white-space: normal !important;
-}
 
-.fieldDescription + .fieldDescription {
+    + .fieldDescription {
         margin-top: 0.3em;
     }
+}
 
 .content-primary,
 .padded-bottom-page,
@@ -85,9 +86,14 @@ div[data-role=page] {
     padding-bottom: 5em !important;
 }
 
+.readOnlyContent {
     @media all and (min-width: 50em) {
-    .readOnlyContent,
+        max-width: 54em;
+    }
+}
+
 form {
+    @media all and (min-width: 50em) {
         max-width: 54em;
     }
 }
@@ -107,15 +113,15 @@ div[data-role=page] {
 .headroom {
     will-change: transform;
     transition: transform 200ms linear;
-}
 
-.headroom--pinned {
+    &--pinned {
         transform: translateY(0%);
     }
 
-.headroom--unpinned {
+    &--unpinned {
         transform: translateY(-100%);
     }
+}
 
 .drawerContent {
     /* make sure the bottom of the drawer is visible when music is playing */