maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
docbrown/app/assets/stylesheets/config/_generator.scss
Philip How 149ae12dd1
New badge display logic on user's profile (#20936) 
* new badge display

* fix cypress

* fix cypress

* Fit grid to exact number

* change point at which badges shown on profile header to 7

---------

Co-authored-by: Ben Halpern <bendhalpern@gmail.com>
2024-05-09 11:48:07 -04:00

499 lines
10 KiB
SCSS
Raw Blame History

////////////////////////////////////////////////////////////////////////////////////
// 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',
// Explicitly set opacity-0 to 0.00001 to ensure accessibility on ChromeVox. See https://github.com/forem/forem/issues/12939
('100': 1, '75': 0.75, '50': 0.5, '25': 0.25, '5': 0.05, '0': 0.00001),
(),
false
),
(
'box',
'box-sizing',
('content': content-box, 'border': border-box),
(),
false
),
(
'cursor',
'cursor',
(
'auto': auto,
'default': default,
'pointer': pointer,
'wait': wait,
'text': text,
'move': move,
'not-allowed': not-allowed,
'help': help
),
(),
false
),
('pointer-events', 'pointer-events', ('auto': auto, 'none': none), (), false),
(
'radius',
'border-radius',
('default': var(--radius), '0': 0, 'full': 9999px),
(),
false
),
('flex', 'flex-direction', ('row': row, 'col': column), (), true),
('flex', 'flex-wrap', ('wrap': wrap, 'nowrap': nowrap), (), true),
(
'items',
'align-items',
(
'stretch': stretch,
'start': flex-start,
'center': center,
'end': flex-end
),
(),
true
),
(
'basis',
'flex-basis',
(
'1-5': 20%,
'2-5': 40%,
'3-5': 60%,
'4-5': 80%,
'1-4': 25%,
'1-3': 33.333333%,
'1-2': 50%,
'2-3': 66.666667%,
'3-4': 75%
),
(),
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,
'stretch': stretch
),
(),
true
),
(
'flex',
'flex',
('initial': 0 auto, '1': 1 1 0%, 'auto': 1 1 auto, 'none': none),
(),
true
),
('grow', 'flex-grow', ('0': 0, '1': 1), (), false),
('shrink', 'flex-shrink', ('0': 0, '1': 1), (), false),
('order', 'order', ('first': -9999, 'last': 9999, '0': 0), (), true),
('gap', 'gap', ('0': 0, 'px': 1px), $spacing-units, true),
(
'grid-cols',
'grid-template-columns',
(
'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)),
'9': repeat(9, minmax(0, 1fr)),
'10': repeat(10, minmax(0, 1fr)),
'11': repeat(11, minmax(0, 1fr)),
'12': repeat(12, minmax(0, 1fr))
),
(),
true
),
(
'grid-rows',
'grid-template-rows',
(
'none': none,
'1': repeat(1, minmax(0, 1fr)),
'2': repeat(2, minmax(0, 1fr)),
'3': repeat(3, minmax(0, 1fr))
),
(),
true
),
('grid-flow', 'grid-auto-flow', ('row': row, 'col': column), (), true),
(
'float',
'float',
('left': left, 'right': right, 'none': none, 'unset': unset),
(),
false
),
('border', 'border-style', ('solid': solid, 'none': none), (), false),
('border', 'border-width', ('0': 0, '1': 1px, '2': 2px), (), false),
('border', 'border-top-width', ('t-0': 0, 't-1': 1px, 't-2': 2px), (), false),
(
'border',
'border-bottom-width',
('b-0': 0, 'b-1': 1px, 'b-2': 2px),
(),
false
),
(
'border',
'border-left-width',
('l-0': 0, 'l-1': 1px, 'l-2': 2px),
(),
false
),
(
'border',
'border-right-width',
('r-0': 0, 'r-1': 1px, 'r-2': 2px),
(),
false
),
(
'inset',
('top', 'left', 'right', 'bottom'),
('px': 1px, 'unset': unset, '0': 0),
(),
false
),
(
'top',
'top',
('auto': auto, 'unset': unset, '0': 0, '100': 100%),
$spacing-units,
true
),
('-top', 'top', ('100': -100%), $negative-spacing-units, true),
(
'bottom',
'bottom',
('auto': auto, 'unset': unset, '0': 0, '100': 100%),
$spacing-units,
true
),
('-bottom', 'bottom', ('100': -100%), $negative-spacing-units, true),
(
'left',
'left',
('auto': auto, 'unset': unset, '0': 0, '100': 100%),
$spacing-units,
true
),
('-left', 'left', ('100': -100%), $negative-spacing-units, true),
(
'right',
'right',
('auto': auto, 'unset': unset, '0': 0, '100': 100%),
$spacing-units,
true
),
('-right', 'right', ('100': -100%), $negative-spacing-units, true),
('z', 'z-index', $z-indexes, (), false),
(
'overflow',
'overflow',
('auto': auto, 'visible': visible, 'hidden': hidden),
(),
true
),
('overflow-x', 'overflow-x', ('auto': auto, 'hidden': hidden), (), false),
('overflow-y', 'overflow-y', ('auto': auto, 'hidden': hidden), (), false),
(
'w',
'width',
(
'0': 0,
'10': 10%,
'15': 15%,
'25': 25%,
'50': 50%,
'60': 60%,
'70': 70%,
'75': 75%,
'80': 80%,
'100': 100%,
'auto': auto,
'full': 100vw,
'max': max-content,
'fit': fit-content
),
(),
true
),
('min-w', 'min-width', ('0': 0, '100': 100%, 'unset': unset), (), false),
(
'h',
'height',
(
'0': 0,
'25': 25%,
'50': 50%,
'75': 75%,
'100': 100%,
'auto': auto,
'full': 100vh,
'unset': unset
),
(),
false
),
(
'min-h',
'min-height',
('0': 0, '100': 100%, 'full': 100vh, 'unset': unset),
(),
false
),
(
'max-w',
'max-width',
('0': 0, '25': 25%, '50': 50%, '75': 75%, '100': 100%, 'unset': unset),
(),
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', ('monospace': var(--ff-monospace)), (), false),
(
'fs',
'font-size',
(
'2xs': var(--fs-2xs),
'xs': var(--fs-xs),
's': var(--fs-s),
'base': var(--fs-base),
'l': var(--fs-l),
'xl': var(--fs-xl),
'2xl': var(--fs-2xl),
'3xl': var(--fs-3xl),
'4xl': var(--fs-4xl),
'5xl': var(--fs-5xl)
),
(),
true
),
(
'lh',
'line-height',
('tight': var(--lh-tight), 'base': var(--lh-base)),
(),
false
),
(
'fw',
'font-weight',
(
'normal': var(--fw-normal),
'medium': var(--fw-medium),
'bold': var(--fw-bold),
'heavy': var(--fw-heavy)
),
(),
true
),
(
'list',
'list-style-type',
('none': none, 'disc': disc, 'decimal': decimal),
(),
false
),
(
'text',
'text-decoration',
('underline': underline, 'none': none),
(),
false
),
('fs', 'font-style', ('italic': italic), (), false),
('text', 'text-transform', ('uppercase': uppercase), (), false),
(
'align',
'text-align',
('left': left, 'center': center, 'right': right),
(),
true
),
(
'align',
'vertical-align',
(
'top': top,
'middle': middle,
'text-top': text-top,
'text-bottom': text-bottom
),
(),
false
),
('whitespace', 'white-space', ('nowrap': nowrap), (), false),
(
null,
'display',
(
'hidden': none,
'block': block,
'inline': inline,
'inline-block': inline-block,
'flex': flex,
'inline-flex': inline-flex,
'grid': grid,
'table': table
),
(),
true,
null
),
(
null,
'position',
(
'static': static,
'absolute': absolute,
'fixed': fixed,
'sticky': sticky,
'relative': relative
),
(),
true,
null
),
('object', 'object-fit', ('cover': cover), (), false),
('aspect', 'aspect-ratio', ('16-9': calc(16 / 9)), (), false),
('break', 'word-break', ('word': break-word), (), false),
('resize', 'resize', ('y': vertical), (), false)
);
Reference in a new issue View git blame Copy permalink