ca97c21e16
* move kbd where it should be * initial cleanup * do we even need that? * sponsorships * cleanups on articles.scss mostly * initial cleanups to scaffolds * moving cheese around * color variables, variables cleanups * adding spacing units * variables cleanup * adding topbar height variable * a bit of top-bar refactor * a bit of top-bar refactor * a bit of top-bar refactor * simpler animation * top bar search and responsivness * loggged out version * remove unnecessary comment * fixing svg icons * search cleanup * top bar cleanups * . * dropdown in header * removing fill from svgs to make them work in other themes * remove test element * topbar icons recreated * introducing variables & buttons component * more variables * Whoops * init modal component * init modal component * init form component * form component * . * variables naming * . * tiny cleanups * formatting * whoops * Test * component avatars * components page + fixes * indicators * init boxes * boxes * im an idiot * radios, checkboxes * maybe im smart * whoops. i am dumb and blind * checkboxes and radios * better documentation, code examples, avatars rewritten * notices, modals, dropdowns * . * oh damn you * checkboxes & radios * forms * generating tailwind classes * i broke things * spacing units * typography, spacing * positioning * overflow * . * getting rid of cards for now * formatting * adding reset to global styles to avoid jumping layout * change url for crayons test page to not be top-level * additional style for indicators, colors, navigation, grid * tabs * backgrounds * flexbox * . * . * im not sure why schema change was here... * same about this one... * this file shouldnt be in my commit either * adding comments and mentally dropping IE10 support :D * . * referencing boxes.scss file * new line * get rid of font-size from body Co-authored-by: rhymes <rhymesete@gmail.com>
119 lines
1.6 KiB
SCSS
119 lines
1.6 KiB
SCSS
@import '../vars/variables';
|
|
|
|
// 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,
|
|
)
|
|
);
|