From 594580ec2d50593f599dea02db4d126ffd75dfb3 Mon Sep 17 00:00:00 2001 From: Guilherme Danno Date: Sat, 16 May 2020 00:32:32 -0300 Subject: [PATCH 1/3] 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%); + } } From 575dcd8334c9b635bb375eaec1b6d80b941ab380 Mon Sep 17 00:00:00 2001 From: Guilherme Danno Date: Sat, 16 May 2020 00:54:46 -0300 Subject: [PATCH 2/3] refactor: use scss features --- src/assets/css/fonts.scss | 23 ++++++++--------- src/assets/css/fonts.sized.scss | 44 ++++++++++++++++----------------- src/assets/css/livetv.scss | 4 +-- src/assets/css/site.scss | 11 +++++++++ 4 files changed, 45 insertions(+), 37 deletions(-) diff --git a/src/assets/css/fonts.scss b/src/assets/css/fonts.scss index cb0da0f80f..abffd3a0d2 100644 --- a/src/assets/css/fonts.scss +++ b/src/assets/css/fonts.scss @@ -1,5 +1,11 @@ -html { +@mixin font($weight: null, $size: null) { font-family: "Noto Sans", sans-serif; + font-weight: $weight; + font-size: $size; +} + +html { + @include font; font-size: 93%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; @@ -7,25 +13,16 @@ html { 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 { diff --git a/src/assets/css/fonts.sized.scss b/src/assets/css/fonts.sized.scss index f60a94f236..1cec58a4a6 100644 --- a/src/assets/css/fonts.sized.scss +++ b/src/assets/css/fonts.sized.scss @@ -1,31 +1,31 @@ -h1 { +@mixin header-font($size: null) { font-weight: 400; - font-size: 1.8em; + font-size: $size; } -.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 { +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) { - html { + /* 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); +} diff --git a/src/assets/css/livetv.scss b/src/assets/css/livetv.scss index 695adff8c5..032bcddf48 100644 --- a/src/assets/css/livetv.scss +++ b/src/assets/css/livetv.scss @@ -2,8 +2,8 @@ padding-bottom: 15em; } -@media all and (min-width: 62.5em) { - #guideTab { +#guideTab { + @media all and (min-width: 62.5em) { padding-left: 0.5em; } } diff --git a/src/assets/css/site.scss b/src/assets/css/site.scss index db179afb2a..d900a8bb40 100644 --- a/src/assets/css/site.scss +++ b/src/assets/css/site.scss @@ -16,6 +16,17 @@ body { -webkit-font-smoothing: antialiased; } +.clipForScreenReader { + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; +} + .material-icons { /* Fix font ligatures on older WebOS versions */ -webkit-font-feature-settings: "liga"; From cdb52282061fab7197fcc156dc4a67a3e434a86c Mon Sep 17 00:00:00 2001 From: Guilherme Danno Date: Sun, 1 Nov 2020 23:11:27 -0300 Subject: [PATCH 3/3] fix font sizes reapply 45cd976b494596b1e5a3170ed436bbaba71b42c7 --- src/assets/css/fonts.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/assets/css/fonts.scss b/src/assets/css/fonts.scss index 1da3127d62..32dc2e7bd6 100644 --- a/src/assets/css/fonts.scss +++ b/src/assets/css/fonts.scss @@ -6,7 +6,6 @@ html { @include font; - -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;