styles: migrate to sass-only approach

gameflow-tv · Mar 6, 2022 · eca80cb · eca80cb
1 parent b81e9a6
commit eca80cb
Show file tree

Hide file tree

Showing 28 changed files with 336 additions and 482 deletions.
diff --git a/README.md b/README.md
@@ -19,13 +19,9 @@ npm i @gameflow-tv/flume
 
 ### Theming
 
-#### CSS/SCSS
+#### Stylesheets
 
-Flume comes bundled with a global style bundle that sets up some global styles and provides utility CSS classes for vanilla CSS usage;
-
-```jsx
-import styles from '@gameflow-tv/flume/bundle.css'
-```
+Flume operates with our _BYOCSS_ (Bring Your Own CSS) principle; we distribute Sass source files that can be compiled to CSS as wanted/needed.
 
 #### React/JSX
 

diff --git a/src/styles/classes/breakpoints.scss b/src/styles/classes/breakpoints.scss
@@ -2,74 +2,74 @@
 
 // min-width based visiblity
 .flume-only-under-xs {
-  @media (min-width: map.get($flume-breakpoints, 'xs')) {
+  @media (min-width: $flume-breakpoint-xs) {
     display: none;
   }
 }
 
 .flume-only-under-sm {
-  @media (min-width: map.get($flume-breakpoints, 'sm')) {
+  @media (min-width: $flume-breakpoint-sm) {
     display: none;
   }
 }
 
 .flume-only-under-md {
-  @media (min-width: map.get($flume-breakpoints, 'md')) {
+  @media (min-width: $flume-breakpoint-md) {
     display: none;
   }
 }
 
 .flume-only-under-lg {
-  @media (min-width: map.get($flume-breakpoints, 'lg')) {
+  @media (min-width: $flume-breakpoint-lg) {
     display: none;
   }
 }
 
 .flume-only-under-xl {
-  @media (min-width: map.get($flume-breakpoints, 'xl')) {
+  @media (min-width: $flume-breakpoint-xl) {
     display: none;
   }
 }
 
 .flume-only-under-xxl {
-  @media (min-width: map.get($flume-breakpoints, 'xxl')) {
+  @media (min-width: $flume-breakpoint-xxl) {
     display: none;
   }
 }
 
 // max-width based visibility
 .flume-only-over-xs {
-  @media (max-width: map.get($flume-breakpoints, 'xs')) {
+  @media (max-width: $flume-breakpoint-xs) {
     display: none;
   }
 }
 
 .flume-only-over-sm {
-  @media (max-width: map.get($flume-breakpoints, 'sm')) {
+  @media (max-width: $flume-breakpoint-sm) {
     display: none;
   }
 }
 
 .flume-only-over-md {
-  @media (max-width: map.get($flume-breakpoints, 'md')) {
+  @media (max-width: $flume-breakpoint-md) {
     display: none;
   }
 }
 
 .flume-only-over-lg {
-  @media (max-width: map.get($flume-breakpoints, 'lg')) {
+  @media (max-width: $flume-breakpoint-lg) {
     display: none;
   }
 }
 
 .flume-only-over-xl {
-  @media (max-width: map.get($flume-breakpoints, 'xl')) {
+  @media (max-width: $flume-breakpoint-xl) {
     display: none;
   }
 }
 
 .flume-only-over-xxl {
-  @media (max-width: map.get($flume-breakpoints, 'xxl')) {
+  @media (max-width: $flume-breakpoint-xxl) {
     display: none;
   }
 }
diff --git a/src/styles/classes/margins.scss b/src/styles/classes/margins.scss
@@ -1,164 +1,164 @@
 // Left margins
 .flume-margin-left-xxxs {
-  margin-left: var(--flume-spacing-xxxs);
+  margin-left: $flume-spacing-xxxs;
 }
 
 .flume-margin-left-xxs {
-  margin-left: var(--flume-spacing-xxs);
+  margin-left: $flume-spacing-xxs;
 }
 
 .flume-margin-left-xs {
-  margin-left: var(--flume-spacing-xs);
+  margin-left: $flume-spacing-xs;
 }
 
 .flume-margin-left-sm {
-  margin-left: var(--flume-spacing-sm);
+  margin-left: $flume-spacing-sm;
 }
 
 .flume-margin-left-md {
-  margin-left: var(--flume-spacing-md);
+  margin-left: $flume-spacing-md;
 }
 
 .flume-margin-left-lg {
-  margin-left: var(--flume-spacing-lg);
+  margin-left: $flume-spacing-lg;
 }
 
 .flume-margin-left-xl {
-  margin-left: var(--flume-spacing-xl);
+  margin-left: $flume-spacing-xl;
 }
 
 .flume-margin-left-xxl {
-  margin-left: var(--flume-spacing-xxl);
+  margin-left: $flume-spacing-xxl;
 }
 
 // Right margins
 .flume-margin-right-xxxs {
-  margin-right: var(--flume-spacing-xxxs);
+  margin-right: $flume-spacing-xxxs;
 }
 
 .flume-margin-right-xxs {
-  margin-right: var(--flume-spacing-xxs);
+  margin-right: $flume-spacing-xxs;
 }
 
 .flume-margin-right-xs {
-  margin-right: var(--flume-spacing-xs);
+  margin-right: $flume-spacing-xs;
 }
 
 .flume-margin-right-sm {
-  margin-right: var(--flume-spacing-sm);
+  margin-right: $flume-spacing-sm;
 }
 
 .flume-margin-right-md {
-  margin-right: var(--flume-spacing-md);
+  margin-right: $flume-spacing-md;
 }
 
 .flume-margin-right-lg {
-  margin-right: var(--flume-spacing-lg);
+  margin-right: $flume-spacing-lg;
 }
 
 .flume-margin-right-xl {
-  margin-right: var(--flume-spacing-xl);
+  margin-right: $flume-spacing-xl;
 }
 
 .flume-margin-right-xxl {
-  margin-right: var(--flume-spacing-xxl);
+  margin-right: $flume-spacing-xxl;
 }
 
 // Top margins
 .flume-margin-top-xxxs {
-  margin-top: var(--flume-spacing-xxxs);
+  margin-top: $flume-spacing-xxxs;
 }
 
 .flume-margin-top-xxs {
-  margin-top: var(--flume-spacing-xxs);
+  margin-top: $flume-spacing-xxs;
 }
 
 .flume-margin-top-xs {
-  margin-top: var(--flume-spacing-xs);
+  margin-top: $flume-spacing-xs;
 }
 
 .flume-margin-top-sm {
-  margin-top: var(--flume-spacing-sm);
+  margin-top: $flume-spacing-sm;
 }
 
 .flume-margin-top-md {
-  margin-top: var(--flume-spacing-md);
+  margin-top: $flume-spacing-md;
 }
 
 .flume-margin-top-lg {
-  margin-top: var(--flume-spacing-lg);
+  margin-top: $flume-spacing-lg;
 }
 
 .flume-margin-top-xl {
-  margin-top: var(--flume-spacing-xl);
+  margin-top: $flume-spacing-xl;
 }
 
 .flume-margin-top-xxl {
-  margin-top: var(--flume-spacing-xxl);
+  margin-top: $flume-spacing-xxl;
 }
 
 // Bottom margins
 .flume-margin-bottom-xxxs {
-  margin-bottom: var(--flume-spacing-xxxs);
+  margin-bottom: $flume-spacing-xxxs;
 }
 
 .flume-margin-bottom-xxs {
-  margin-bottom: var(--flume-spacing-xxs);
+  margin-bottom: $flume-spacing-xxs;
 }
 
 .flume-margin-bottom-xs {
-  margin-bottom: var(--flume-spacing-xs);
+  margin-bottom: $flume-spacing-xs;
 }
 
 .flume-margin-bottom-sm {
-  margin-bottom: var(--flume-spacing-sm);
+  margin-bottom: $flume-spacing-sm;
 }
 
 .flume-margin-bottom-md {
-  margin-bottom: var(--flume-spacing-md);
+  margin-bottom: $flume-spacing-md;
 }
 
 .flume-margin-bottom-lg {
-  margin-bottom: var(--flume-spacing-lg);
+  margin-bottom: $flume-spacing-lg;
 }
 
 .flume-margin-bottom-xl {
-  margin-bottom: var(--flume-spacing-xl);
+  margin-bottom: $flume-spacing-xl;
 }
 
 .flume-margin-bottom-xxl {
-  margin-bottom: var(--flume-spacing-xxl);
+  margin-bottom: $flume-spacing-xxl;
 }
 
 // All margins
 .flume-margin-xxxs {
-  margin: var(--flume-spacing-xxxs);
+  margin: $flume-spacing-xxxs;
 }
 
 .flume-margin-xxs {
-  margin: var(--flume-spacing-xxs);
+  margin: $flume-spacing-xxs;
 }
 
 .flume-margin-xs {
-  margin: var(--flume-spacing-xs);
+  margin: $flume-spacing-xs;
 }
 
 .flume-margin-sm {
-  margin: var(--flume-spacing-sm);
+  margin: $flume-spacing-sm;
 }
 
 .flume-margin-md {
-  margin: var(--flume-spacing-md);
+  margin: $flume-spacing-md;
 }
 
 .flume-margin-lg {
-  margin: var(--flume-spacing-lg);
+  margin: $flume-spacing-lg;
 }
 
 .flume-margin-xl {
-  margin: var(--flume-spacing-xl);
+  margin: $flume-spacing-xl;
 }
 
 .flume-margin-xxl {
-  margin: var(--flume-spacing-xxl);
+  margin: $flume-spacing-xxl;
 }