routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+362
@@ -0,0 +1,362 @@
|
||||
@use 'sass:math';
|
||||
@use 'sass:map';
|
||||
@use 'sass:meta';
|
||||
@use '../tools/functions' as *;
|
||||
|
||||
$color-pack: true !default;
|
||||
$reset: true !default;
|
||||
|
||||
$misc: () !default;
|
||||
$misc: map-deep-merge(
|
||||
(
|
||||
elevation: true,
|
||||
hidden: true,
|
||||
'sr-only': true,
|
||||
'pointer-events': true,
|
||||
),
|
||||
$misc
|
||||
);
|
||||
|
||||
$body-font-family: var(--v-font-body, 'Roboto', sans-serif) !default;
|
||||
$font-size-root: 1rem !default;
|
||||
$line-height-root: 1.5 !default;
|
||||
$border-color-root: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
|
||||
$border-radius-root: 4px !default;
|
||||
$border-style-root: solid !default;
|
||||
$border-width-root: thin !default;
|
||||
$transition-duration-root: 0.3s !default;
|
||||
$transition-move-duration-root: 0.5s !default;
|
||||
|
||||
$borders: () !default;
|
||||
$borders: map-deep-merge(
|
||||
(
|
||||
0: 0,
|
||||
null: $border-width-root,
|
||||
thin: $border-width-root,
|
||||
sm: 1px,
|
||||
md: 2px,
|
||||
lg: 4px,
|
||||
xl: 8px
|
||||
),
|
||||
$borders
|
||||
);
|
||||
|
||||
@each $key, $border in $borders {
|
||||
$borders: map-deep-merge(
|
||||
$borders,
|
||||
( $key: $border $border-style-root $border-color-root )
|
||||
)
|
||||
}
|
||||
|
||||
$border-opacities: () !default;
|
||||
$border-opacities: map-deep-merge(
|
||||
(
|
||||
0: 0,
|
||||
null: .12,
|
||||
25: .25,
|
||||
50: .50,
|
||||
75: .75,
|
||||
100: 1
|
||||
),
|
||||
$border-opacities
|
||||
);
|
||||
|
||||
$opacities: () !default;
|
||||
$opacities: map-deep-merge(
|
||||
(
|
||||
hover: var(--v-hover-opacity),
|
||||
focus: var(--v-focus-opacity),
|
||||
selected: var(--v-selected-opacity),
|
||||
activated: var(--v-activated-opacity),
|
||||
pressed: var(--v-pressed-opacity),
|
||||
dragged: var(--v-dragged-opacity),
|
||||
0: 0,
|
||||
10: .1,
|
||||
20: .2,
|
||||
30: .3,
|
||||
40: .4,
|
||||
50: .5,
|
||||
60: .6,
|
||||
70: .7,
|
||||
80: .8,
|
||||
90: .9,
|
||||
100: 1
|
||||
),
|
||||
$opacities
|
||||
);
|
||||
|
||||
$states: () !default;
|
||||
$states: map-deep-merge(
|
||||
(
|
||||
'hover': var(--v-hover-opacity),
|
||||
'focus': var(--v-focus-opacity),
|
||||
'selected': var(--v-selected-opacity),
|
||||
'activated': var(--v-activated-opacity),
|
||||
'pressed': var(--v-pressed-opacity),
|
||||
'dragged': var(--v-dragged-opacity)
|
||||
),
|
||||
$states
|
||||
);
|
||||
|
||||
$rounded: () !default;
|
||||
$rounded: map-deep-merge(
|
||||
(
|
||||
0: 0,
|
||||
'sm': $border-radius-root * .5,
|
||||
null: $border-radius-root,
|
||||
'md': $border-radius-root,
|
||||
'lg': $border-radius-root * 2,
|
||||
'xl': $border-radius-root * 6,
|
||||
'pill': 9999px,
|
||||
'circle': 50%,
|
||||
'shaped': $border-radius-root * 6 0
|
||||
),
|
||||
$rounded
|
||||
);
|
||||
|
||||
$spacer: 4px !default;
|
||||
$spacers-steps: 16 !default;
|
||||
|
||||
$spacers: () !default;
|
||||
@if (meta.type-of($spacers) == list) {
|
||||
@for $i from 0 through $spacers-steps {
|
||||
$spacers: map.merge($spacers, ($i: $spacer * $i))
|
||||
}
|
||||
}
|
||||
|
||||
$negative-spacers: () !default;
|
||||
@if (meta.type-of($negative-spacers) == list) {
|
||||
@for $i from 1 through $spacers-steps {
|
||||
$negative-spacers: map.merge($negative-spacers, ("n" + $i: -$spacer * $i))
|
||||
}
|
||||
}
|
||||
|
||||
$grid-breakpoints: () !default;
|
||||
$grid-breakpoints: map-deep-merge(
|
||||
(
|
||||
'xs': 0,
|
||||
'sm': 600px,
|
||||
'md': 840px,
|
||||
'lg': 1145px,
|
||||
'xl': 1545px,
|
||||
'xxl': 2138px,
|
||||
),
|
||||
$grid-breakpoints
|
||||
);
|
||||
|
||||
$grid-gutter: $spacer * 6 !default;
|
||||
$grid-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
|
||||
$grid-columns: 12 !default;
|
||||
$container-padding-x: $spacer * 4 !default;
|
||||
|
||||
$container-max-widths: () !default;
|
||||
$container-max-widths: map-deep-merge(
|
||||
(
|
||||
'xs': null,
|
||||
'sm': null,
|
||||
'md': 100 * math.floor(map.get($grid-breakpoints, 'md') * 0.009375),
|
||||
'lg': 100 * math.floor(map.get($grid-breakpoints, 'lg') * 0.009375),
|
||||
'xl': 100 * math.floor(map.get($grid-breakpoints, 'xl') * 0.009375),
|
||||
'xxl': 100 * math.floor(map.get($grid-breakpoints, 'xxl') * 0.009375),
|
||||
),
|
||||
$container-max-widths
|
||||
);
|
||||
|
||||
// Avoid using *-and-down where possible
|
||||
$display-breakpoints: () !default;
|
||||
$display-breakpoints: map-deep-merge(
|
||||
(
|
||||
'print-only': 'only print',
|
||||
'screen-only': 'only screen',
|
||||
'xs': '(max-width: #{map.get($grid-breakpoints, 'sm') - 0.02})',
|
||||
'sm': '(min-width: #{map.get($grid-breakpoints, 'sm')}) and (max-width: #{map.get($grid-breakpoints, 'md') - 0.02})',
|
||||
'md': '(min-width: #{map.get($grid-breakpoints, 'md')}) and (max-width: #{map.get($grid-breakpoints, 'lg') - 0.02})',
|
||||
'lg': '(min-width: #{map.get($grid-breakpoints, 'lg')}) and (max-width: #{map.get($grid-breakpoints, 'xl') - 0.02})',
|
||||
'xl': '(min-width: #{map.get($grid-breakpoints, 'xl')}) and (max-width: #{map.get($grid-breakpoints, 'xxl') - 0.02})',
|
||||
'xxl': '(min-width: #{map.get($grid-breakpoints, 'xxl')})',
|
||||
'sm-and-up': '(min-width: #{map.get($grid-breakpoints, 'sm')})',
|
||||
'md-and-up': '(min-width: #{map.get($grid-breakpoints, 'md')})',
|
||||
'lg-and-up': '(min-width: #{map.get($grid-breakpoints, 'lg')})',
|
||||
'xl-and-up': '(min-width: #{map.get($grid-breakpoints, 'xl')})',
|
||||
'sm-and-down': '(max-width: #{map.get($grid-breakpoints, 'md') - 0.02})',
|
||||
'md-and-down': '(max-width: #{map.get($grid-breakpoints, 'lg') - 0.02})',
|
||||
'lg-and-down': '(max-width: #{map.get($grid-breakpoints, 'xl') - 0.02})',
|
||||
'xl-and-down': '(max-width: #{map.get($grid-breakpoints, 'xxl') - 0.02})',
|
||||
),
|
||||
$display-breakpoints
|
||||
);
|
||||
|
||||
$font-weights: () !default;
|
||||
$font-weights: map-deep-merge(
|
||||
(
|
||||
'thin': 100,
|
||||
'light': 300,
|
||||
'regular': 400,
|
||||
'medium': 500,
|
||||
'semibold': 600,
|
||||
'bold': 700,
|
||||
'black': 900
|
||||
),
|
||||
$font-weights
|
||||
);
|
||||
|
||||
$heading-font-family: var(--v-font-heading, #{$body-font-family}) !default;
|
||||
|
||||
$typography: () !default;
|
||||
$typography: map-deep-merge(
|
||||
(
|
||||
'display-large': (
|
||||
'size': 3.5625rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.1228070175,
|
||||
'letter-spacing': -.0043859649em,
|
||||
'font-family': $heading-font-family
|
||||
),
|
||||
'display-medium': (
|
||||
'size': 2.8125rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.1555555556,
|
||||
'letter-spacing': normal,
|
||||
'font-family': $heading-font-family
|
||||
),
|
||||
'display-small': (
|
||||
'size': 2.25rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.2222222222,
|
||||
'letter-spacing': normal,
|
||||
'font-family': $heading-font-family
|
||||
),
|
||||
'headline-large': (
|
||||
'size': 2rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.25,
|
||||
'letter-spacing': normal,
|
||||
'font-family': $heading-font-family
|
||||
),
|
||||
'headline-medium': (
|
||||
'size': 1.75rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.2857142857,
|
||||
'letter-spacing': normal,
|
||||
'font-family': $heading-font-family
|
||||
),
|
||||
'headline-small': (
|
||||
'size': 1.5rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.3333333333,
|
||||
'letter-spacing': normal,
|
||||
'font-family': $heading-font-family
|
||||
),
|
||||
'title-large': (
|
||||
'size': 1.375rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.2727272727,
|
||||
'letter-spacing': normal,
|
||||
'font-family': $heading-font-family
|
||||
),
|
||||
'title-medium': (
|
||||
'size': 1rem,
|
||||
'weight': 500,
|
||||
'line-height': 1.5,
|
||||
'letter-spacing': .009375em,
|
||||
'font-family': $body-font-family
|
||||
),
|
||||
'title-small': (
|
||||
'size': .875rem,
|
||||
'weight': 500,
|
||||
'line-height': 1.4285714286,
|
||||
'letter-spacing': .0071428571em,
|
||||
'font-family': $body-font-family
|
||||
),
|
||||
'body-large': (
|
||||
'size': 1rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.5,
|
||||
'letter-spacing': .03125em,
|
||||
'font-family': $body-font-family
|
||||
),
|
||||
'body-medium': (
|
||||
'size': .875rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.4285714286,
|
||||
'letter-spacing': .0178571429em,
|
||||
'font-family': $body-font-family
|
||||
),
|
||||
'body-small': (
|
||||
'size': .75rem,
|
||||
'weight': 400,
|
||||
'line-height': 1.3333333333,
|
||||
'letter-spacing': .0333333333em,
|
||||
'font-family': $body-font-family
|
||||
),
|
||||
'label-large': (
|
||||
'size': .875rem,
|
||||
'weight': 500,
|
||||
'line-height': 1.4285714286,
|
||||
'letter-spacing': .0071428571em,
|
||||
'font-family': $body-font-family
|
||||
),
|
||||
'label-medium': (
|
||||
'size': .75rem,
|
||||
'weight': 500,
|
||||
'line-height': 1.3333333333,
|
||||
'letter-spacing': .0416666667em,
|
||||
'font-family': $body-font-family
|
||||
),
|
||||
'label-small': (
|
||||
'size': .6875rem,
|
||||
'weight': 500,
|
||||
'line-height': 1.4545454545,
|
||||
'letter-spacing': .0454545455em,
|
||||
'font-family': $body-font-family
|
||||
)
|
||||
),
|
||||
$typography
|
||||
);
|
||||
|
||||
$flat-typography: () !default;
|
||||
@each $type, $values in $typography {
|
||||
$flat-typography: map-deep-merge(
|
||||
$flat-typography,
|
||||
(#{$type}: (
|
||||
map.get($values, 'size'),
|
||||
map.get($values, 'weight'),
|
||||
map.get($values, 'line-height'),
|
||||
map.get($values, 'letter-spacing'),
|
||||
map.get($values, 'font-family')
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
// Mapping from transition to easings:
|
||||
// fast-out-slow-in -> standard
|
||||
// linear-out-slow-in -> decelerated
|
||||
// fast-out-linear-in -> accelerated
|
||||
// ease-in-out -> standard or accelerated depending on usage
|
||||
// fast-in-fast-out -> accelerated
|
||||
// swing -> standard
|
||||
|
||||
$standard-easing: cubic-bezier(0.4, 0, 0.2, 1) !default;
|
||||
$decelerated-easing: cubic-bezier(0.0, 0, 0.2, 1) !default; // Entering
|
||||
$accelerated-easing: cubic-bezier(0.4, 0, 1, 1) !default; // Leaving
|
||||
|
||||
// Elements
|
||||
$blockquote-font-size: 18px !default;
|
||||
$blockquote-font-weight: 300 !default;
|
||||
|
||||
$sizes: (
|
||||
'x-small',
|
||||
'small',
|
||||
'default',
|
||||
'large',
|
||||
'x-large'
|
||||
) !default;
|
||||
|
||||
$size-scale: $spacer * 2 !default;
|
||||
$size-scales: (
|
||||
'x-small': -2,
|
||||
'small': -1,
|
||||
'default': 0,
|
||||
'large': 1,
|
||||
'x-large': 2
|
||||
) !default;
|
||||
Reference in New Issue
Block a user