From 4cc3fff96afdb8208f35e1eb61e714e7f6921812 Mon Sep 17 00:00:00 2001 From: Brad Decker Date: Tue, 28 Jul 2020 15:16:30 -0500 Subject: [PATCH] Update css folder structure (#9071) --- .../generic/index.scss => base-styles.scss} | 30 ----------- ui/app/css/design-system/breakpoints.scss | 6 +++ .../{variables => design-system}/colors.scss | 0 .../css/design-system/deprecated-colors.scss | 48 +++++++++++++++++ ui/app/css/design-system/index.scss | 4 ++ .../typography.scss | 1 - ui/app/css/index.scss | 5 +- ui/app/css/itcss/settings/variables.scss | 54 ------------------- ui/app/css/{itcss/generic => }/reset.scss | 2 - ui/app/css/variables/index.scss | 2 - 10 files changed, 61 insertions(+), 91 deletions(-) rename ui/app/css/{itcss/generic/index.scss => base-styles.scss} (80%) create mode 100644 ui/app/css/design-system/breakpoints.scss rename ui/app/css/{variables => design-system}/colors.scss (100%) create mode 100644 ui/app/css/design-system/deprecated-colors.scss create mode 100644 ui/app/css/design-system/index.scss rename ui/app/css/{variables => design-system}/typography.scss (99%) rename ui/app/css/{itcss/generic => }/reset.scss (96%) delete mode 100644 ui/app/css/variables/index.scss diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/base-styles.scss similarity index 80% rename from ui/app/css/itcss/generic/index.scss rename to ui/app/css/base-styles.scss index 64c9688f6..1e17639f7 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/base-styles.scss @@ -1,8 +1,4 @@ -/* - Generic - */ -@import './reset'; * { box-sizing: border-box; @@ -12,7 +8,6 @@ html, body { font-family: Roboto, Arial; color: #4d4d4d; - font-weight: 400; width: 100%; height: 100%; margin: 0; @@ -25,15 +20,6 @@ html { min-height: 500px; } -.app-root { - overflow: hidden; - position: relative; -} - -.app-primary { - display: flex; -} - .mouse-user-styles { button:focus, input:focus, @@ -121,19 +107,3 @@ input.form-control { } } -.hide-text-overflow { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.pinned-to-bottom { - position: absolute; - bottom: 0; -} - -.pinned-to-bottom-right { - position: absolute; - bottom: 0; - right: 0; -} diff --git a/ui/app/css/design-system/breakpoints.scss b/ui/app/css/design-system/breakpoints.scss new file mode 100644 index 000000000..80a4176b0 --- /dev/null +++ b/ui/app/css/design-system/breakpoints.scss @@ -0,0 +1,6 @@ +/* +Responsive Breakpoints +*/ +$break-small: 575px; +$break-midpoint: 780px; +$break-large: 576px; diff --git a/ui/app/css/variables/colors.scss b/ui/app/css/design-system/colors.scss similarity index 100% rename from ui/app/css/variables/colors.scss rename to ui/app/css/design-system/colors.scss diff --git a/ui/app/css/design-system/deprecated-colors.scss b/ui/app/css/design-system/deprecated-colors.scss new file mode 100644 index 000000000..c65f0bfa0 --- /dev/null +++ b/ui/app/css/design-system/deprecated-colors.scss @@ -0,0 +1,48 @@ +/** + These colors are either deprecated or will move into colors.scss + when approved for the design system +**/ + +// Base Colors +$white: #fff; +$black: #000; +$orange: #ffa500; +$red: #f00; +$gray: #808080; + +/* + Colors + http://chir.ag/projects/name-that-color + */ +$gallery: #efefef; +$wild-sand: #f6f6f6; +$dusty-gray: #9b9b9b; +$alto: #dedede; +$alabaster: #fafafa; +$silver-chalice: #aeaeae; +$tundora: #4d4d4d; +$nile-blue: #1b344d; +$scorpion: #5d5d5d; +$silver: #cdcdcd; +$caribbean-green: #02c9b1; +$monzo: #d0021b; +$crimson: #e91550; +$blue-lagoon: #038789; +$purple: #690496; +$tulip-tree: #ebb33f; +$malibu-blue: #7ac9fd; +$athens-grey: #e9edf0; +$geyser: #d2d8dd; +$manatee: #93949d; +$spindle: #c7ddec; +$mid-gray: #5b5d67; +$cape-cod: #38393a; +$dodger-blue: #3099f2; +$ecstasy: #f7861c; +$linen: #fdf4f4; +$oslo-gray: #8c8e94; +$polar: #fafcfe; +$blizzard-blue: #bfdef3; +$mischka: #dddee9; +$web-orange: #f2a202; +$mercury: #e5e5e5; diff --git a/ui/app/css/design-system/index.scss b/ui/app/css/design-system/index.scss new file mode 100644 index 000000000..08b0c8b25 --- /dev/null +++ b/ui/app/css/design-system/index.scss @@ -0,0 +1,4 @@ +@import './colors.scss'; +@import './deprecated-colors.scss'; +@import './typography.scss'; +@import './breakpoints.scss'; diff --git a/ui/app/css/variables/typography.scss b/ui/app/css/design-system/typography.scss similarity index 99% rename from ui/app/css/variables/typography.scss rename to ui/app/css/design-system/typography.scss index 0a51e1738..37e05faeb 100644 --- a/ui/app/css/variables/typography.scss +++ b/ui/app/css/design-system/typography.scss @@ -148,4 +148,3 @@ $font-family: Roboto, Helvetica, Arial, sans-serif; font-family: $font-family; line-height: 140%; } - diff --git a/ui/app/css/index.scss b/ui/app/css/index.scss index d757a2374..9b994f19a 100644 --- a/ui/app/css/index.scss +++ b/ui/app/css/index.scss @@ -4,7 +4,9 @@ They are included first because they will be used to replace bad variable names in itcss prior to it being fully removed from the system. */ -@import './variables/index'; +@import './reset.scss'; +@import './design-system/index'; +@import './base-styles.scss'; /* ITCSS @@ -17,7 +19,6 @@ */ @import './itcss/settings/index'; @import './itcss/tools/index'; -@import './itcss/generic/index'; @import './itcss/objects/index'; @import './itcss/components/index'; @import './itcss/trumps/index'; diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index fa6727ee2..dec398884 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -1,51 +1,3 @@ -/* - Variables - */ - -// Base Colors -$white: #fff; -$black: #000; -$orange: #ffa500; -$red: #f00; -$gray: #808080; - -/* - Colors - http://chir.ag/projects/name-that-color - */ -$gallery: #efefef; -$wild-sand: #f6f6f6; -$dusty-gray: #9b9b9b; -$alto: #dedede; -$alabaster: #fafafa; -$silver-chalice: #aeaeae; -$tundora: #4d4d4d; -$nile-blue: #1b344d; -$scorpion: #5d5d5d; -$silver: #cdcdcd; -$caribbean-green: #02c9b1; -$monzo: #d0021b; -$crimson: #e91550; -$blue-lagoon: #038789; -$purple: #690496; -$tulip-tree: #ebb33f; -$malibu-blue: #7ac9fd; -$athens-grey: #e9edf0; -$geyser: #d2d8dd; -$manatee: #93949d; -$spindle: #c7ddec; -$mid-gray: #5b5d67; -$cape-cod: #38393a; -$dodger-blue: #3099f2; -$ecstasy: #f7861c; -$linen: #fdf4f4; -$oslo-gray: #8c8e94; -$polar: #fafcfe; -$blizzard-blue: #bfdef3; -$mischka: #dddee9; -$web-orange: #f2a202; -$mercury: #e5e5e5; - /* Z-Indicies */ @@ -98,12 +50,6 @@ $sidebar-overlay-z-index: 25; mascot - 0 - remove? */ -/* - Responsive Breakpoints - */ -$break-small: 575px; -$break-midpoint: 780px; -$break-large: 576px; /* Spacing Variables diff --git a/ui/app/css/itcss/generic/reset.scss b/ui/app/css/reset.scss similarity index 96% rename from ui/app/css/itcss/generic/reset.scss rename to ui/app/css/reset.scss index b60fcd068..43146fec8 100644 --- a/ui/app/css/itcss/generic/reset.scss +++ b/ui/app/css/reset.scss @@ -88,9 +88,7 @@ video { padding: 0; border: 0; font-size: 100%; - /* stylelint-disable */ font: inherit; - /* stylelint-enable */ vertical-align: baseline; } diff --git a/ui/app/css/variables/index.scss b/ui/app/css/variables/index.scss deleted file mode 100644 index 8d79fd9c7..000000000 --- a/ui/app/css/variables/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './colors.scss'; -@import './typography.scss';