diff --git a/app/assets/stylesheets/base/colors.scss b/app/assets/stylesheets/base/colors.scss
deleted file mode 100644
index 2fc503faa..000000000
--- a/app/assets/stylesheets/base/colors.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@import '../config/import';
-
-// Color
-@include generate-classes(
- 'color',
- 'color',
- (
- 'transparent': transparent,
- 'current': currentColor,
- ),
- $colors
-);
-
-// Background Color
-@include generate-classes(
- 'bg',
- 'background-color',
- (
- 'transparent': transparent,
- 'current': currentColor,
- ),
- $colors
-);
-
-// Border Color
-@include generate-classes(
- 'border',
- 'border-color',
- (
- 'transparent': transparent,
- 'current': currentColor,
- ),
- $colors
-);
diff --git a/app/assets/stylesheets/base/decorations.scss b/app/assets/stylesheets/base/decorations.scss
deleted file mode 100644
index df7cb0a52..000000000
--- a/app/assets/stylesheets/base/decorations.scss
+++ /dev/null
@@ -1,124 +0,0 @@
-@import '../config/import';
-
-// Opacity
-@include generate-classes(
- 'opacity',
- 'opacity',
- (
- '100': 1,
- '75': 0.75,
- '50': 0.5,
- '25': 0.25,
- '0': 0,
- )
-);
-
-// Box Shadow
-.shadow-none {
- box-shadow: none !important;
-}
-
-// Cursor
-@include generate-classes(
- 'cursor',
- 'cursor',
- (
- 'auto': auto,
- 'default': default,
- 'pointer': pointer,
- 'wait': wait,
- 'text': text,
- 'move': move,
- 'not-allowed': not-allowed,
- )
-);
-
-// Outline
-.outline-none {
- outline: none !important;
-}
-
-// Pointer events
-@include generate-classes(
- 'pointer-events',
- 'pointer-events',
- (
- 'auto': auto,
- 'none': none,
- )
-);
-
-// Screen reader only
-.sr-only {
- position: absolute !important;
- width: 1px !important;
- height: 1px !important;
- padding: 0 !important;
- margin: -1px !important;
- overflow: hidden !important;
- clip: rect(0, 0, 0, 0) !important;
- white-space: nowrap !important;
- border-width: 0 !important;
-}
-
-// Border radius
-@include generate-classes(
- 'radius',
- 'border-radius',
- (
- 'default': $br-default,
- '0': 0,
- 'full': 9999px,
- )
-);
-
-// Background Position
-@include generate-classes(
- 'bg',
- 'background-position',
- (
- 'bottom': bottom,
- 'center': center,
- 'left': left,
- 'right': right,
- 'top': top,
- 'left-bottom': left bottom,
- 'left-top': left top,
- 'right-bottom': right bottom,
- 'right-top': right top,
- )
-);
-
-// Background Repeat
-@include generate-classes(
- 'bg',
- 'background-repeat',
- (
- 'repeat': repeat,
- 'repeat-x': repeat-x,
- 'repeat-y': repeat-y,
- 'no-repeat': no-repeat,
- )
-);
-
-// Background Size
-@include generate-classes(
- 'bg',
- 'background-size',
- (
- 'auto': auto,
- 'cover': cover,
- 'contain': contain,
- )
-);
-
-// Background Attachement
-@include generate-classes(
- 'bg',
- 'background-attachment',
- (
- 'fixed': fixed,
- 'local': local,
- 'scroll': scroll,
- )
-);
diff --git a/app/assets/stylesheets/base/flexbox.scss b/app/assets/stylesheets/base/flexbox.scss
deleted file mode 100644
index b72e58867..000000000
--- a/app/assets/stylesheets/base/flexbox.scss
+++ /dev/null
@@ -1,119 +0,0 @@
-@import '../config/import';
-
-// Flex flow
-@include generate-classes(
- 'flex',
- 'flex-direction',
- (
- 'row': row,
- 'col': column,
- 'row-reverse': row-reverse,
- 'col-reverse': column-reverse,
- )
-);
-
-// Flex wrap
-@include generate-classes(
- 'flex',
- 'flex-wrap',
- (
- 'wrap': wrap,
- 'nowrap': nowrap,
- 'wrap-reverse': wrap-reverse,
- )
-);
-
-// Align items
-@include generate-classes(
- 'items',
- 'align-items',
- (
- 'stretch': stretch,
- 'start': flex-start,
- 'center': center,
- 'end': flex-end,
- 'baseline': baseline,
- )
-);
-
-// Align content
-@include generate-classes(
- 'content',
- 'align-content',
- (
- 'start': flex-start,
- 'center': center,
- 'end': flex-end,
- 'between': space-between,
- 'around': space-around,
- )
-);
-
-// Align self
-@include generate-classes(
- 'self',
- 'align-self',
- (
- 'auto': auto,
- 'start': flex-start,
- 'center': center,
- 'end': flex-end,
- 'stretch': stretch,
- )
-);
-
-// Justify content
-@include generate-classes(
- 'justify',
- 'justify-content',
- (
- 'start': flex-start,
- 'center': center,
- 'end': flex-end,
- 'between': space-between,
- 'around': space-around,
- )
-);
-
-// Flex
-@include generate-classes(
- 'flex',
- 'flex',
- (
- 'initial': 0 auto,
- '1': 1 1 0%,
- 'auto': 1 1 auto,
- 'none': none,
- )
-);
-
-// Flex grow
-@include generate-classes(
- 'grow',
- 'flex-grow',
- (
- '0': 0,
- '1': 1,
- )
-);
-
-// Flex shrink
-@include generate-classes(
- 'shrink',
- 'flex-shrink',
- (
- '0': 0,
- '1': 1,
- )
-);
-
-// Order
-@include generate-classes(
- 'order',
- 'order',
- (
- 'first': -9999,
- 'last': 9999,
- '0': 0,
- )
-);
diff --git a/app/assets/stylesheets/base/grid.scss b/app/assets/stylesheets/base/grid.scss
deleted file mode 100644
index db73ff1a2..000000000
--- a/app/assets/stylesheets/base/grid.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@import '../config/import';
-
-// Gap
-@include generate-classes(
- 'gap',
- 'grid-gap',
- (
- '0': 0,
- ),
- $spacing-units
-);
-
-// Grid Template Columns
-@include generate-classes(
- 'grid-cols',
- 'grid-template-columns',
- (
- 'none': none,
- '1': repeat(1, minmax(0, 1fr)),
- '2': repeat(2, minmax(0, 1fr)),
- '3': repeat(3, minmax(0, 1fr)),
- '4': repeat(4, minmax(0, 1fr)),
- '5': repeat(5, minmax(0, 1fr)),
- '6': repeat(6, minmax(0, 1fr)),
- '7': repeat(7, minmax(0, 1fr)),
- '8': repeat(8, minmax(0, 1fr)),
- )
-);
-
-// Grid Template Rows
-@include generate-classes(
- 'grid-rows',
- 'grid-template-columns',
- (
- 'none': none,
- '1': repeat(1, minmax(0, 1fr)),
- '2': repeat(2, minmax(0, 1fr)),
- '3': repeat(3, minmax(0, 1fr)),
- '4': repeat(4, minmax(0, 1fr)),
- )
-);
-
-// Grid Flow
-@include generate-classes(
- 'grid-flow',
- 'grid-auto-flow',
- (
- 'row': row,
- 'col': column,
- 'row-dense': row dense,
- 'col-dense': column dense,
- )
-);
diff --git a/app/assets/stylesheets/base/layout.scss b/app/assets/stylesheets/base/layout.scss
deleted file mode 100644
index 9a5b9e7a9..000000000
--- a/app/assets/stylesheets/base/layout.scss
+++ /dev/null
@@ -1,152 +0,0 @@
-@import '../config/import';
-
-// Display
-.hidden {
- display: none !important;
-}
-
-.block {
- display: block !important;
-}
-
-.inline {
- display: inline !important;
-}
-
-.inline-block {
- display: inline-block !important;
-}
-
-.flex {
- display: flex !important;
-}
-
-.inline-flex {
- display: inline-flex !important;
-}
-
-.grid {
- display: grid !important;
-}
-
-// Floats
-@include generate-classes(
- 'float',
- 'float',
- (
- 'left': left,
- 'right': right,
- 'none': none,
- 'unset': unset,
- )
-);
-
-.clear {
- clear: both !important;
-}
-
-// Visibility
-.visible {
- visibility: visible !important;
-}
-
-.invisible {
- visibility: hidden !important;
-}
-
-// Box sizing
-@include generate-classes(
- 'box',
- 'box-sizing',
- (
- 'border': border-box,
- 'content': content-box,
- )
-);
-
-// Table layout
-@include generate-classes(
- 'table',
- 'table-layout',
- (
- 'auto': auto,
- 'fixed': fixed,
- )
-);
-
-// Border style
-@include generate-classes(
- 'border',
- 'border-style',
- (
- 'solid': solid,
- 'dashed': dashed,
- 'dotted': dotted,
- 'none': none,
- )
-);
-
-// Border width
-@include generate-classes(
- 'border',
- 'border-width',
- (
- '1': 1px,
- '2': 2px,
- '3': 3px,
- '4': 4px,
- '8': 8px,
- )
-);
-
-// Border top width
-@include generate-classes(
- 'border',
- 'border-top-width',
- (
- 't-1': 1px,
- 't-2': 2px,
- 't-3': 3px,
- 't-4': 4px,
- 't-8': 8px,
- )
-);
-
-// Border bottom width
-@include generate-classes(
- 'border',
- 'border-bottom-width',
- (
- 'b-1': 1px,
- 'b-2': 2px,
- 'b-3': 3px,
- 'b-4': 4px,
- 'b-8': 8px,
- )
-);
-
-// Border left width
-@include generate-classes(
- 'border',
- 'border-left-width',
- (
- 'l-1': 1px,
- 'l-2': 2px,
- 'l-3': 3px,
- 'l-4': 4px,
- 'l-8': 8px,
- )
-);
-
-// Border right width
-@include generate-classes(
- 'border',
- 'border-right-width',
- (
- 'r-1': 1px,
- 'r-2': 2px,
- 'r-3': 3px,
- 'r-4': 4px,
- 'r-8': 8px,
- )
-);
diff --git a/app/assets/stylesheets/base/positioning.scss b/app/assets/stylesheets/base/positioning.scss
deleted file mode 100644
index be699be44..000000000
--- a/app/assets/stylesheets/base/positioning.scss
+++ /dev/null
@@ -1,201 +0,0 @@
-@import '../config/import';
-
-// Positions
-.static {
- position: static !important;
-}
-
-.absolute {
- position: absolute !important;
-}
-
-.fixed {
- position: fixed !important;
-}
-
-.sticky {
- position: sticky !important;
-}
-
-.relative {
- position: relative !important;
-}
-
-// All directions
-@include generate-classes(
- 'all',
- (top, left, right, bottom),
- (
- 'auto': auto,
- 'unset': unset,
- '0': 0,
- )
-);
-
-// Top
-@include generate-classes(
- 'top',
- 'top',
- (
- 'auto': auto,
- 'unset': unset,
- '0': 0,
- '1': $su-1,
- '2': $su-2,
- '3': $su-3,
- '4': $su-4,
- )
-);
-
-// Top negative
-@include generate-classes(
- '-top',
- 'top',
- (
- '1': -$su-1,
- '2': -$su-2,
- '3': -$su-3,
- '4': -$su-4,
- )
-);
-
-// Bottom
-@include generate-classes(
- 'bottom',
- 'bottom',
- (
- 'auto': auto,
- 'unset': unset,
- '0': 0,
- '1': $su-1,
- '2': $su-2,
- '3': $su-3,
- '4': $su-4,
- )
-);
-
-// Bottom negative
-@include generate-classes(
- '-bottom',
- 'bottom',
- (
- '1': -$su-1,
- '2': -$su-2,
- '3': -$su-3,
- '4': -$su-4,
- )
-);
-
-// Left
-@include generate-classes(
- 'left',
- 'left',
- (
- 'auto': auto,
- 'unset': unset,
- '0': 0,
- '1': $su-1,
- '2': $su-2,
- '3': $su-3,
- '4': $su-4,
- )
-);
-
-// Left negative
-@include generate-classes(
- '-left',
- 'left',
- (
- '1': -$su-1,
- '2': -$su-2,
- '3': -$su-3,
- '4': -$su-4,
- )
-);
-
-// Right
-@include generate-classes(
- 'left',
- 'left',
- (
- 'auto': auto,
- 'unset': unset,
- '0': 0,
- '1': $su-1,
- '2': $su-2,
- '3': $su-3,
- '4': $su-4,
- )
-);
-
-// Right negative
-@include generate-classes(
- '-right',
- 'right',
- (
- '1': -$su-1,
- '2': -$su-2,
- '3': -$su-3,
- '4': -$su-4,
- )
-);
-
-// Z-index
-@include generate-classes(
- 'z',
- 'z-index',
- (
- 'z-negative': -1,
- 'z-0': 0,
- 'z-10': 10,
- 'z-20': 20,
- 'z-30': 30,
- 'z-40': 40,
- 'z-50': 50,
- 'z-auto': auto,
- )
-);
-
-// Overflow
-@include generate-classes(
- 'overflow',
- 'overflow',
- (
- 'auto': auto,
- 'visible': visible,
- 'scroll': scroll,
- 'hidden': hidden,
- )
-);
-
-// Overflow X
-@include generate-classes(
- 'overflow-x',
- 'overflow-x',
- (
- 'auto': auto,
- 'visible': visible,
- 'scroll': scroll,
- 'hidden': hidden,
- )
-);
-
-// Overflow Y
-@include generate-classes(
- 'overflow-y',
- 'overflow-y',
- (
- 'auto': auto,
- 'visible': visible,
- 'scroll': scroll,
- 'hidden': hidden,
- )
-);
-
-// Smooth scrolling on iOS
-.scrolling-touch {
- -webkit-overflow-scrolling: touch !important;
-}
-.scrolling-auto {
- -webkit-overflow-scrolling: auto !important;
-}
diff --git a/app/assets/stylesheets/base/sizing.scss b/app/assets/stylesheets/base/sizing.scss
deleted file mode 100644
index a46d62dbb..000000000
--- a/app/assets/stylesheets/base/sizing.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@import '../config/import';
-
-// Width
-@include generate-classes(
- 'w',
- 'width',
- (
- '0': 0,
- '25': 25%,
- '50': 50%,
- '100': 100%,
- 'auto': auto,
- 'full': 100vw,
- )
-);
-
-// Min width
-@include generate-classes(
- 'min-w',
- 'min-width',
- (
- '0': 0,
- '100': 100%,
- )
-);
-
-// Height
-@include generate-classes(
- 'h',
- 'height',
- (
- '0': 0,
- '25': 25%,
- '50': 50%,
- '100': 100%,
- 'auto': auto,
- 'full': 100vh,
- )
-);
-
-// Min height
-@include generate-classes(
- 'min-h',
- 'min-height',
- (
- '0': 0,
- '100': 100%,
- 'full': 100vh,
- )
-);
-
-// Max height
-@include generate-classes(
- 'max-h',
- 'max-height',
- (
- '0': 0,
- '100': 100%,
- 'full': 100vh,
- )
-);
diff --git a/app/assets/stylesheets/base/spacing.scss b/app/assets/stylesheets/base/spacing.scss
deleted file mode 100644
index 3f8c6cdef..000000000
--- a/app/assets/stylesheets/base/spacing.scss
+++ /dev/null
@@ -1,195 +0,0 @@
-@import '../config/import';
-
-// Margin
-@include generate-classes(
- 'm',
- 'margin',
- (
- 'auto': auto,
- 'unset': unset,
- '0': 0,
- ),
- $spacing-units
-);
-
-// Margin negative
-@include generate-classes('-m', 'margin', $negative-spacing-units);
-
-// Margin top & bottom
-@include generate-classes(
- 'my',
- ('margin-top', 'margin-bottom'),
- (
- 'auto': auto,
- 'unset': unset,
- '0': 0,
- ),
- $spacing-units
-);
-
-// Margin top & bottom negative
-@include generate-classes(
- '-my',
- ('margin-top', 'margin-bottom'),
- $negative-spacing-units
-);
-
-// Margin left & right
-@include generate-classes(
- 'mx',
- ('margin-left', 'margin-right'),
- (
- 'auto': auto,
- 'unset': unset,
- '0': 0,
- ),
- $spacing-units
-);
-
-// Margin left & right negative
-@include generate-classes(
- '-mx',
- ('margin-left', 'margin-right'),
- $negative-spacing-units
-);
-
-// Margin top
-@include generate-classes(
- 'mt',
- 'margin-top',
- (
- 'auto': auto,
- 'unset': unset,
- '0': 0,
- ),
- $spacing-units
-);
-
-// Margin top negative
-@include generate-classes('-mt', 'margin-top', $negative-spacing-units);
-
-// Margin bottom
-@include generate-classes(
- 'mb',
- 'margin-bottom',
- (
- 'auto': auto,
- 'unset': unset,
- '0': 0,
- ),
- $spacing-units
-);
-
-// Margin bottom negative
-@include generate-classes('-mb', 'margin-bottom', $negative-spacing-units);
-
-// Margin left
-@include generate-classes(
- 'ml',
- 'margin-left',
- (
- 'auto': auto,
- 'unset': unset,
- '0': 0,
- ),
- $spacing-units
-);
-
-// Margin left negative
-@include generate-classes('-ml', 'margin-left', $negative-spacing-units);
-
-// Margin right
-@include generate-classes(
- 'mr',
- 'margin-right',
- (
- 'auto': auto,
- 'unset': unset,
- '0': 0,
- ),
- $spacing-units
-);
-
-// Margin right negative
-@include generate-classes('-mr', 'margin-right', $negative-spacing-units);
-
-///////////////////
-// Paddings
-///////////////////
-
-// Padding
-@include generate-classes(
- 'p',
- 'padding',
- (
- '0': 0,
- 'unset': unset,
- ),
- $spacing-units
-);
-
-// Padding top & bottom
-@include generate-classes(
- 'py',
- ('padding-top', 'padding-bottom'),
- (
- '0': 0,
- 'unset': unset,
- ),
- $spacing-units
-);
-
-// Padding left & right
-@include generate-classes(
- 'px',
- ('padding-left', 'padding-right'),
- (
- '0': 0,
- 'unset': unset,
- ),
- $spacing-units
-);
-
-// Padding top
-@include generate-classes(
- 'pt',
- 'padding-top',
- (
- '0': 0,
- 'unset': unset,
- ),
- $spacing-units
-);
-
-// Padding bottom
-@include generate-classes(
- 'pb',
- 'padding-bottom',
- (
- '0': 0,
- 'unset': unset,
- ),
- $spacing-units
-);
-
-// Padding left
-@include generate-classes(
- 'pl',
- 'padding-left',
- (
- '0': 0,
- 'unset': unset,
- ),
- $spacing-units
-);
-
-// Padding right
-@include generate-classes(
- 'pr',
- 'padding-right',
- (
- '0': 0,
- 'unset': unset,
- ),
- $spacing-units
-);
diff --git a/app/assets/stylesheets/base/typography.scss b/app/assets/stylesheets/base/typography.scss
deleted file mode 100644
index 1d0789946..000000000
--- a/app/assets/stylesheets/base/typography.scss
+++ /dev/null
@@ -1,127 +0,0 @@
-@import '../config/import';
-
-// Font family
-@include generate-classes(
- 'ff',
- 'font-family',
- (
- 'default': $ff-default,
- 'accent': $ff-accent,
- )
-);
-
-// Font size
-@include generate-classes(
- 'fs',
- 'font-size',
- (
- 'xs': $fs-xs,
- 's': $fs-s,
- 'base': $fs-base,
- 'l': $fs-l,
- 'xl': $fs-xl,
- '2xl': $fs-2xl,
- '3xl': $fs-3xl,
- '4xl': $fs-4xl,
- '5xl': $fs-5xl,
- )
-);
-
-// Line height
-@include generate-classes(
- 'lh',
- 'line-height',
- (
- 'tight': $lh-tight,
- 'base': $lh-base,
- )
-);
-
-// Font weight
-@include generate-classes(
- 'fw',
- 'font-weight',
- (
- 'normal': $fw-normal,
- 'medium': $fw-medium,
- 'bold': $fw-bold,
- 'heavy': $fw-heavy,
- )
-);
-
-// List styles
-@include generate-classes(
- 'list',
- 'list-style-type',
- (
- 'none': none,
- 'disc': disc,
- 'decimal': decimal,
- )
-);
-
-// Text decoration
-@include generate-classes(
- 'text',
- 'text-decoration',
- (
- 'underline': underline,
- 'none': none,
- )
-);
-
-// Text decoration
-@include generate-classes(
- 'text',
- 'text-transform',
- (
- 'uppercase': uppercase,
- 'lowercase': lowercase,
- 'capitalize': capitalize,
- 'normal': none,
- )
-);
-
-// Text align
-@include generate-classes(
- 'align',
- 'text-align',
- (
- 'left': left,
- 'center': center,
- 'right': right,
- 'justify': justify,
- )
-);
-
-// Vertical alignment
-@include generate-classes(
- 'align',
- 'vertical-align',
- (
- 'baseline': baseline,
- 'top': top,
- 'middle': middle,
- 'bottom': bottom,
- 'text-top': text-top,
- 'text-bottom': text-bottom,
- )
-);
-
-// White space
-@include generate-classes(
- 'whitespace',
- 'white-space',
- (
- 'normal': normal,
- 'nowrap': nowrap,
- 'pre': pre,
- )
-);
-
-// Truncate
-.truncate {
- overflow: hidden !important;
- text-overflow: ellipsis !important;
- white-space: nowrap !important;
-}
diff --git a/app/assets/stylesheets/config/_generator.scss b/app/assets/stylesheets/config/_generator.scss
new file mode 100644
index 000000000..a0a2d0edb
--- /dev/null
+++ b/app/assets/stylesheets/config/_generator.scss
@@ -0,0 +1,622 @@
+////////////////////////////////////////////////////////////////////////////////////
+// Generator. //////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////
+//
+// This file is meant to create all the utility classes we need. Some of them are
+// also being generated with responsiveness in mind.
+// Read more about its parameters in config/import.scss
+
+@import 'import';
+
+@include initialize-generator(
+ $breakpoints,
+ (
+ 'color',
+ 'color',
+ ('transparent': transparent, 'current': currentColor),
+ $colors,
+ false
+ ),
+ (
+ 'bg',
+ 'background-color',
+ ('transparent': transparent, 'current': currentColor),
+ $colors,
+ false
+ ),
+ (
+ 'border',
+ 'border-color',
+ ('transparent': transparent, 'current': currentColor),
+ $colors,
+ false
+ ),
+ (
+ 'opacity',
+ 'opacity',
+ ('100': 1, '75': 0.75, '50': 0.5, '25': 0.25, '0': 0),
+ (),
+ true
+ ),
+ (
+ 'cursor',
+ 'cursor',
+ (
+ 'auto': auto,
+ 'default': default,
+ 'pointer': pointer,
+ 'wait': wait,
+ 'text': text,
+ 'move': move,
+ 'not-allowed': not-allowed
+ ),
+ (),
+ false
+ ),
+ ('pointer-events', 'pointer-events', ('auto': auto, 'none': none), (), false),
+ (
+ 'radius',
+ 'border-radius',
+ ('default': $br-default, '0': 0, 'full': 9999px),
+ (),
+ true
+ ),
+ (
+ 'bg',
+ 'background-position',
+ (
+ 'bottom': bottom,
+ 'center': center,
+ 'left': left,
+ 'right': right,
+ 'top': top,
+ 'left-bottom': left bottom,
+ 'left-top': left top,
+ 'right-bottom': right bottom,
+ 'right-top': right top
+ ),
+ (),
+ false
+ ),
+ (
+ 'bg',
+ 'background-repeat',
+ (
+ 'repeat': repeat,
+ 'repeat-x': repeat-x,
+ 'repeat-y': repeat-y,
+ 'no-repeat': no-repeat
+ ),
+ (),
+ false
+ ),
+ (
+ 'bg',
+ 'background-size',
+ ('auto': auto, 'cover': cover, 'contain': contain),
+ (),
+ false
+ ),
+ (
+ 'bg',
+ 'background-attachment',
+ ('fixed': fixed, 'local': local, 'scroll': scroll),
+ (),
+ false
+ ),
+ (
+ 'flex',
+ 'flex-direction',
+ (
+ 'row': row,
+ 'col': column,
+ 'row-reverse': row-reverse,
+ 'col-reverse': column-reverse
+ ),
+ (),
+ true
+ ),
+ (
+ 'flex',
+ 'flex-wrap',
+ ('wrap': wrap, 'nowrap': nowrap, 'wrap-reverse': wrap-reverse),
+ (),
+ true
+ ),
+ (
+ 'items',
+ 'align-items',
+ (
+ 'stretch': stretch,
+ 'start': flex-start,
+ 'center': center,
+ 'end': flex-end,
+ 'baseline': baseline
+ ),
+ (),
+ true
+ ),
+ (
+ 'content',
+ 'align-content',
+ (
+ 'start': flex-start,
+ 'center': center,
+ 'end': flex-end,
+ 'between': space-between,
+ 'around': space-around
+ ),
+ (),
+ true
+ ),
+ (
+ 'self',
+ 'align-self',
+ (
+ 'auto': auto,
+ 'start': flex-start,
+ 'center': center,
+ 'end': flex-end,
+ 'stretch': stretch
+ ),
+ (),
+ true
+ ),
+ (
+ 'justify',
+ 'justify-content',
+ (
+ 'start': flex-start,
+ 'center': center,
+ 'end': flex-end,
+ 'between': space-between,
+ 'around': space-around
+ ),
+ (),
+ true
+ ),
+ (
+ 'flex',
+ 'flex',
+ ('initial': 0 auto, '1': 1 1 0%, 'auto': 1 1 auto, 'none': none),
+ (),
+ true
+ ),
+ ('grow', 'flex-grow', ('0': 0, '1': 1), (), true),
+ ('shrink', 'flex-shrink', ('0': 0, '1': 1), (), true),
+ ('order', 'order', ('first': -9999, 'last': 9999, '0': 0), (), true),
+ ('gap', 'grid-gap', ('0': 0), $spacing-units, true),
+ (
+ 'grid-cols',
+ 'grid-template-columns',
+ (
+ 'none': none,
+ '1': repeat(1, minmax(0, 1fr)),
+ '2': repeat(2, minmax(0, 1fr)),
+ '3': repeat(3, minmax(0, 1fr)),
+ '4': repeat(4, minmax(0, 1fr)),
+ '5': repeat(5, minmax(0, 1fr)),
+ '6': repeat(6, minmax(0, 1fr)),
+ '7': repeat(7, minmax(0, 1fr)),
+ '8': repeat(8, minmax(0, 1fr))
+ ),
+ (),
+ true
+ ),
+ (
+ 'grid-rows',
+ 'grid-template-columns',
+ (
+ 'none': none,
+ '1': repeat(1, minmax(0, 1fr)),
+ '2': repeat(2, minmax(0, 1fr)),
+ '3': repeat(3, minmax(0, 1fr)),
+ '4': repeat(4, minmax(0, 1fr))
+ ),
+ (),
+ true
+ ),
+ (
+ 'grid-flow',
+ 'grid-auto-flow',
+ (
+ 'row': row,
+ 'col': column,
+ 'row-dense': row dense,
+ 'col-dense': column dense
+ ),
+ (),
+ true
+ ),
+ (
+ 'float',
+ 'float',
+ ('left': left, 'right': right, 'none': none, 'unset': unset),
+ (),
+ true
+ ),
+ (
+ 'box',
+ 'box-sizing',
+ ('border': border-box, 'content': content-box),
+ (),
+ false
+ ),
+ ('table', 'table-layout', ('auto': auto, 'fixed': fixed), (), false),
+ (
+ 'border',
+ 'border-style',
+ ('solid': solid, 'dashed': dashed, 'dotted': dotted, 'none': none),
+ (),
+ true
+ ),
+ (
+ 'border',
+ 'border-width',
+ ('0': 0, '1': 1px, '2': 2px, '3': 3px, '4': 4px, '8': 8px),
+ (),
+ true
+ ),
+ (
+ 'border',
+ 'border-top-width',
+ ('t-0': 0, 't-1': 1px, 't-2': 2px, 't-3': 3px, 't-4': 4px, 't-8': 8px),
+ (),
+ true
+ ),
+ (
+ 'border',
+ 'border-bottom-width',
+ ('b-0': 0, 'b-1': 1px, 'b-2': 2px, 'b-3': 3px, 'b-4': 4px, 'b-8': 8px),
+ (),
+ true
+ ),
+ (
+ 'border',
+ 'border-left-width',
+ ('l-0': 0, 'l-1': 1px, 'l-2': 2px, 'l-3': 3px, 'l-4': 4px, 'l-8': 8px),
+ (),
+ true
+ ),
+ (
+ 'border',
+ 'border-right-width',
+ ('r-0': 0, 'r-1': 1px, 'r-2': 2px, 'r-3': 3px, 'r-4': 4px, 'r-8': 8px),
+ (),
+ true
+ ),
+ (
+ 'top',
+ 'top',
+ (
+ 'auto': auto,
+ 'unset': unset,
+ '0': 0,
+ '1': $su-1,
+ '2': $su-2,
+ '3': $su-3,
+ '4': $su-4
+ ),
+ (),
+ true
+ ),
+ (
+ '-top',
+ 'top',
+ ('1': -$su-1, '2': -$su-2, '3': -$su-3, '4': -$su-4),
+ (),
+ true
+ ),
+ (
+ 'bottom',
+ 'bottom',
+ (
+ 'auto': auto,
+ 'unset': unset,
+ '0': 0,
+ '1': $su-1,
+ '2': $su-2,
+ '3': $su-3,
+ '4': $su-4
+ ),
+ (),
+ true
+ ),
+ (
+ '-bottom',
+ 'bottom',
+ ('1': -$su-1, '2': -$su-2, '3': -$su-3, '4': -$su-4),
+ (),
+ true
+ ),
+ (
+ 'left',
+ 'left',
+ (
+ 'auto': auto,
+ 'unset': unset,
+ '0': 0,
+ '1': $su-1,
+ '2': $su-2,
+ '3': $su-3,
+ '4': $su-4
+ ),
+ (),
+ true
+ ),
+ (
+ '-left',
+ 'left',
+ ('1': -$su-1, '2': -$su-2, '3': -$su-3, '4': -$su-4),
+ (),
+ true
+ ),
+ (
+ 'right',
+ 'right',
+ (
+ 'auto': auto,
+ 'unset': unset,
+ '0': 0,
+ '1': $su-1,
+ '2': $su-2,
+ '3': $su-3,
+ '4': $su-4
+ ),
+ (),
+ true
+ ),
+ (
+ '-right',
+ 'right',
+ ('1': -$su-1, '2': -$su-2, '3': -$su-3, '4': -$su-4),
+ (),
+ true
+ ),
+ (
+ 'z',
+ 'z-index',
+ (
+ 'z-negative': -1,
+ 'z-0': 0,
+ 'z-10': 10,
+ 'z-20': 20,
+ 'z-30': 30,
+ 'z-40': 40,
+ 'z-50': 50,
+ 'z-auto': auto
+ ),
+ (),
+ false
+ ),
+ (
+ 'overflow',
+ 'overflow',
+ ('auto': auto, 'visible': visible, 'scroll': scroll, 'hidden': hidden),
+ (),
+ true
+ ),
+ (
+ 'overflow-x',
+ 'overflow-x',
+ ('auto': auto, 'visible': visible, 'scroll': scroll, 'hidden': hidden),
+ (),
+ true
+ ),
+ (
+ 'overflow-y',
+ 'overflow-y',
+ ('auto': auto, 'visible': visible, 'scroll': scroll, 'hidden': hidden),
+ (),
+ true
+ ),
+ (
+ 'w',
+ 'width',
+ ('0': 0, '25': 25%, '50': 50%, '100': 100%, 'auto': auto, 'full': 100vw),
+ (),
+ true
+ ),
+ ('min-w', 'min-width', ('0': 0, '100': 100%), (), true),
+ (
+ 'h',
+ 'height',
+ ('0': 0, '25': 25%, '50': 50%, '100': 100%, 'auto': auto, 'full': 100vh),
+ (),
+ true
+ ),
+ ('min-h', 'min-height', ('0': 0, '100': 100%, 'full': 100vh), (), true),
+ ('max-h', 'max-height', ('0': 0, '100': 100%, 'full': 100vh), (), true),
+ ('m', 'margin', ('auto': auto, 'unset': unset, '0': 0), $spacing-units, true),
+ ('-m', 'margin', $negative-spacing-units, (), true),
+ (
+ 'my',
+ ('margin-top', 'margin-bottom'),
+ ('auto': auto, 'unset': unset, '0': 0),
+ $spacing-units,
+ true
+ ),
+ ('-my', ('margin-top', 'margin-bottom'), $negative-spacing-units, (), true),
+ (
+ 'mx',
+ ('margin-left', 'margin-right'),
+ ('auto': auto, 'unset': unset, '0': 0),
+ $spacing-units,
+ true
+ ),
+ ('-mx', ('margin-left', 'margin-right'), $negative-spacing-units, (), true),
+ (
+ 'mt',
+ 'margin-top',
+ ('auto': auto, 'unset': unset, '0': 0),
+ $spacing-units,
+ true
+ ),
+ ('-mt', 'margin-top', $negative-spacing-units, (), true),
+ (
+ 'mb',
+ 'margin-bottom',
+ ('auto': auto, 'unset': unset, '0': 0),
+ $spacing-units,
+ true
+ ),
+ ('-mb', 'margin-bottom', $negative-spacing-units, (), true),
+ (
+ 'ml',
+ 'margin-left',
+ ('auto': auto, 'unset': unset, '0': 0),
+ $spacing-units,
+ true
+ ),
+ ('-ml', 'margin-left', $negative-spacing-units, (), true),
+ (
+ 'mr',
+ 'margin-right',
+ ('auto': auto, 'unset': unset, '0': 0),
+ $spacing-units,
+ true
+ ),
+ ('-mr', 'margin-right', $negative-spacing-units, (), true),
+ ('p', 'padding', ('0': 0, 'unset': unset), $spacing-units, true),
+ (
+ 'py',
+ ('padding-top', 'padding-bottom'),
+ ('0': 0, 'unset': unset),
+ $spacing-units,
+ true
+ ),
+ (
+ 'px',
+ ('padding-left', 'padding-right'),
+ ('0': 0, 'unset': unset),
+ $spacing-units,
+ true
+ ),
+ ('pt', 'padding-top', ('0': 0, 'unset': unset), $spacing-units, true),
+ ('pb', 'padding-bottom', ('0': 0, 'unset': unset), $spacing-units, true),
+ ('pl', 'padding-left', ('0': 0, 'unset': unset), $spacing-units, true),
+ ('pr', 'padding-right', ('0': 0, 'unset': unset), $spacing-units, true),
+ (
+ 'ff',
+ 'font-family',
+ ('default': $ff-default, 'accent': $ff-accent),
+ (),
+ false
+ ),
+ (
+ 'fs',
+ 'font-size',
+ (
+ 'xs': $fs-xs,
+ 's': $fs-s,
+ 'base': $fs-base,
+ 'l': $fs-l,
+ 'xl': $fs-xl,
+ '2xl': $fs-2xl,
+ '3xl': $fs-3xl,
+ '4xl': $fs-4xl,
+ '5xl': $fs-5xl
+ ),
+ (),
+ true
+ ),
+ ('lh', 'line-height', ('tight': $lh-tight, 'base': $lh-base), (), true),
+ (
+ 'fw',
+ 'font-weight',
+ (
+ 'normal': $fw-normal,
+ 'medium': $fw-medium,
+ 'bold': $fw-bold,
+ 'heavy': $fw-heavy
+ ),
+ (),
+ false
+ ),
+ (
+ 'list',
+ 'list-style-type',
+ ('none': none, 'disc': disc, 'decimal': decimal),
+ (),
+ false
+ ),
+ (
+ 'text',
+ 'text-decoration',
+ ('underline': underline, 'none': none),
+ (),
+ false
+ ),
+ (
+ 'text',
+ 'text-transform',
+ (
+ 'uppercase': uppercase,
+ 'lowercase': lowercase,
+ 'capitalize': capitalize,
+ 'normal': none
+ ),
+ (),
+ false
+ ),
+ (
+ 'align',
+ 'text-align',
+ ('left': left, 'center': center, 'right': right, 'justify': justify),
+ (),
+ true
+ ),
+ (
+ 'align',
+ 'vertical-align',
+ (
+ 'baseline': baseline,
+ 'top': top,
+ 'middle': middle,
+ 'bottom': bottom,
+ 'text-top': text-top,
+ 'text-bottom': text-bottom
+ ),
+ (),
+ true
+ ),
+ (
+ 'whitespace',
+ 'white-space',
+ ('normal': normal, 'nowrap': nowrap, 'pre': pre),
+ (),
+ true
+ ),
+ ('shadow', 'box-shadow', ('none': none), (), true),
+ ('outline', 'outline', ('none': none), (), false),
+ (
+ '',
+ 'display',
+ (
+ 'hidden': none,
+ 'block': block,
+ 'inline': inline,
+ 'inline-block': inline-block,
+ 'flex': flex,
+ 'inline-flex': inline-flex,
+ 'grid': grid
+ ),
+ (),
+ true
+ ),
+ ('', 'visibility', ('visible': visible, 'invisible': hidden), (), true),
+ ('', 'clear', ('clear': both), (), false),
+ (
+ '',
+ 'position',
+ (
+ 'static': static,
+ 'absolute': absolute,
+ 'fixed': fixed,
+ 'sticky': sticky,
+ 'relative': relative
+ ),
+ (),
+ true
+ )
+);
diff --git a/app/assets/stylesheets/config/_import.scss b/app/assets/stylesheets/config/_import.scss
index 6f7cda3ef..dc373f104 100644
--- a/app/assets/stylesheets/config/_import.scss
+++ b/app/assets/stylesheets/config/_import.scss
@@ -50,6 +50,25 @@ $breakpoint-m: 768px;
$breakpoint-l: 1024px;
$breakpoint-xl: 1280px;
+////////////////////////////////////////////////////////////////////////////////////
+
+$breakpoints: (
+ 's': $breakpoint-s,
+ 'm': $breakpoint-m,
+ 'l': $breakpoint-l,
+ 'xl': $breakpoint-xl,
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+// Header height ///////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////
+//
+// The reason why header height is set here instead of caluclating it based on its
+// content is because header is sometimes fixed and we need to offset page content
+// by specific value.. And that's the value.
+
+$header-height: 56px;
+
////////////////////////////////////////////////////////////////////////////////////
// Spacing Units. //////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
@@ -187,10 +206,20 @@ $lh-base: 1.5; // 24px for 16px font-size
// @param {list} $values-1 List of values for which we gonna generate classes
// @param {list} $values-2 Additional list of values, useful when we want to combine two lists.
-@mixin generate-classes($prefix, $properties, $values-1, $values-2: ()) {
+@mixin generate-classes(
+ $prefix,
+ $properties,
+ $values-1,
+ $values-2: (),
+ $responsive: false
+) {
+ $separator: '-';
+ @if $prefix == '' {
+ $separator: '';
+ }
$values: map-merge($values-1, $values-2);
@each $name, $value in $values {
- .#{$prefix}-#{$name} {
+ .#{$prefix}#{$separator}#{$name} {
@each $property in $properties {
#{$property}: $value !important;
}
@@ -200,6 +229,55 @@ $lh-base: 1.5; // 24px for 16px font-size
////////////////////////////////////////////////////////////////////////////////////
+// initialize-generator()
+//
+// Initilize generators.
+//
+// @param {list} $breakpoints All our responsiveness breakpoints.
+// @param {list} $classes All the parameters required by generate-classes().
+
+@mixin initialize-generator($breakpoints, $classes...) {
+ @each $argument in $classes {
+ $prefix: nth($argument, 1);
+ $properties: nth($argument, 2);
+ $values-1: nth($argument, 3);
+ $values-2: nth($argument, 4);
+ $responsive: nth($argument, 5);
+
+ @include generate-classes(
+ $prefix,
+ $properties,
+ $values-1,
+ $values-2,
+ $responsive
+ );
+ }
+
+ @each $breakpoint, $value in $breakpoints {
+ @media (min-width: $value) {
+ @each $argument in $classes {
+ $prefix: $breakpoint + '\\:'+ nth($argument, 1);
+ $properties: nth($argument, 2);
+ $values-1: nth($argument, 3);
+ $values-2: nth($argument, 4);
+ $responsive: nth($argument, 5);
+
+ @if $responsive == true {
+ @include generate-classes(
+ $prefix,
+ $properties,
+ $values-1,
+ $values-2,
+ $responsive
+ );
+ }
+ }
+ }
+ }
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
// box() - generating classes for different style
//
// This mixin automates process of generating classes for different
diff --git a/app/assets/stylesheets/base_imports.scss b/app/assets/stylesheets/crayons.scss
similarity index 58%
rename from app/assets/stylesheets/base_imports.scss
rename to app/assets/stylesheets/crayons.scss
index 65bb03c15..c8c631875 100644
--- a/app/assets/stylesheets/base_imports.scss
+++ b/app/assets/stylesheets/crayons.scss
@@ -1,18 +1,9 @@
@import 'config/colors';
+@import 'config/generator';
-// New approach
@import 'base/reset';
@import 'base/boxes';
-@import 'base/colors';
-@import 'base/decorations';
-@import 'base/flexbox';
-@import 'base/grid';
@import 'base/icons';
-@import 'base/layout';
-@import 'base/positioning';
-@import 'base/sizing';
-@import 'base/spacing';
-@import 'base/typography';
@import 'components/avatars';
@import 'components/buttons';
diff --git a/app/assets/stylesheets/minimal.scss b/app/assets/stylesheets/minimal.scss
index 6428e1758..ae18e8ab6 100644
--- a/app/assets/stylesheets/minimal.scss
+++ b/app/assets/stylesheets/minimal.scss
@@ -1,5 +1,3 @@
-
-
@import 'variables';
@import 'fundamentals';
@import 'scaffolds';
@@ -47,4 +45,3 @@
@import 'email_subscriptions';
@import 'article-form-needed-legacy';
-
diff --git a/app/views/layouts/_styles.html.erb b/app/views/layouts/_styles.html.erb
index b4c484e4c..46f21005a 100644
--- a/app/views/layouts/_styles.html.erb
+++ b/app/views/layouts/_styles.html.erb
@@ -2,13 +2,13 @@
<% if @shell %>
<% elsif @story_show %>
<% elsif view_class.start_with? "comments" %>
<% elsif view_class.include?("registrations") || @new_article_not_logged_in %>
<% elsif view_class.include? "classified_listings-" %>
<% elsif view_class.include? "credits-" %>
<% elsif view_class.include? "videos-index" %>