[deploy] Responsiveness & Crayons.css (#6814)
This commit is contained in:
ludwiczakpawel
GitHub
parent
3262717942
commit
2671a799b4
14 changed files with 712 additions and 1090 deletions
|
|
@ -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
|
||||
);
|
||||
|
|
@ -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,
|
||||
)
|
||||
);
|
||||
|
|
@ -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,
|
||||
)
|
||||
);
|
||||
|
|
@ -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,
|
||||
)
|
||||
);
|
||||
|
|
@ -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,
|
||||
)
|
||||
);
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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,
|
||||
)
|
||||
);
|
||||
|
|
@ -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
|
||||
);
|
||||
|
|
@ -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;
|
||||
}
|
||||
622
app/assets/stylesheets/config/_generator.scss
Normal file
622
app/assets/stylesheets/config/_generator.scss
Normal file
|
|
@ -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
|
||||
)
|
||||
);
|
||||
82
app/assets/stylesheets/config/_import.scss
vendored
82
app/assets/stylesheets/config/_import.scss
vendored
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
|
||||
|
||||
@import 'variables';
|
||||
@import 'fundamentals';
|
||||
@import 'scaffolds';
|
||||
|
|
@ -47,4 +45,3 @@
|
|||
@import 'email_subscriptions';
|
||||
|
||||
@import 'article-form-needed-legacy';
|
||||
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
<% if @shell %>
|
||||
<style>
|
||||
<% Rails.application.config.assets.compile = true %>
|
||||
<%= Rails.application.assets["base_imports.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["minimal.css"].to_s.html_safe %>
|
||||
</style>
|
||||
<% elsif @story_show %>
|
||||
<style>
|
||||
<% Rails.application.config.assets.compile = true %>
|
||||
<%= Rails.application.assets["base_imports.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["buttons.css"].to_s.html_safe %>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
<% elsif @article_index %>
|
||||
<style>
|
||||
<% Rails.application.config.assets.compile = true %>
|
||||
<%= Rails.application.assets["base_imports.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["articles.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["buttons.css"].to_s.html_safe %>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
<% elsif @notifications_index || @reading_list_items_index || @history_index %>
|
||||
<style>
|
||||
<% Rails.application.config.assets.compile = true %>
|
||||
<%= Rails.application.assets["base_imports.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["readinglist.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["history.css"].to_s.html_safe %>
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
</style>
|
||||
<% elsif view_class.start_with? "comments" %>
|
||||
<style>
|
||||
<%= Rails.application.assets["base_imports.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["comments.css"].to_s.html_safe %>
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
</style>
|
||||
<% elsif view_class.include?("registrations") || @new_article_not_logged_in %>
|
||||
<style>
|
||||
<%= Rails.application.assets["base_imports.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["article-form-needed-legacy.css"].to_s.html_safe %>
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
</style>
|
||||
<% elsif view_class.include? "classified_listings-" %>
|
||||
<style>
|
||||
<%= Rails.application.assets["base_imports.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["classified_listings.css"].to_s.html_safe %>
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
</style>
|
||||
<% elsif view_class.include? "credits-" %>
|
||||
<style>
|
||||
<%= Rails.application.assets["base_imports.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["credits.css"].to_s.html_safe %>
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
</style>
|
||||
<% elsif view_class.include? "videos-index" %>
|
||||
<style>
|
||||
<%= Rails.application.assets["base_imports.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["crayons.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["video-collection.css"].to_s.html_safe %>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue