mirror of
https://github.com/tabler/tabler.git
synced 2026-01-11 23:20:10 +04:00
554 lines
11 KiB
SCSS
554 lines
11 KiB
SCSS
$font-family-base: 'Inter Var', system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto ColorEmoji;
|
|
$font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
|
|
|
|
$font-families: (
|
|
base: $font-family-base,
|
|
monospace: $font-family-monospace
|
|
);
|
|
|
|
$font-size-base: 1rem;
|
|
$line-height-base: 1.75;
|
|
$line-height-sm: px2rem(20px);
|
|
|
|
$color-dark: #1d2434;
|
|
$color-text: #3b454e;
|
|
$color-headers: #232b42;
|
|
$color-white: #ffffff;
|
|
$color-gray-dark: #eaecee;
|
|
$color-gray: #f7f9fb;
|
|
$color-gray-light: #fafbfc;
|
|
|
|
$color-primary: #0054a6;
|
|
|
|
$color-red: #e03131;
|
|
$color-pink: #c2255c;
|
|
$color-grape: #9c36b5;
|
|
$color-violet: #6741d9;
|
|
$color-indigo: #3b5bdb;
|
|
$color-blue: #1971c2;
|
|
$color-cyan: #0c8599;
|
|
$color-teal: #099268;
|
|
$color-green: #2f9e44;
|
|
$color-lime: #66a80f;
|
|
$color-yellow: #f08c00;
|
|
$color-orange: #e8590c;
|
|
|
|
$colors: (
|
|
'primary': $color-primary,
|
|
'red': $color-red,
|
|
'pink': $color-pink,
|
|
'grape': $color-grape,
|
|
'violet': $color-violet,
|
|
'indigo': $color-indigo,
|
|
'blue': $color-blue,
|
|
'cyan': $color-cyan,
|
|
'teal': $color-teal,
|
|
'green': $color-green,
|
|
'lime': $color-lime,
|
|
'yellow': $color-yellow,
|
|
'orange': $color-orange,
|
|
'white': $color-white,
|
|
'dark': $color-dark
|
|
);
|
|
|
|
$extra-colors: (
|
|
'gray-dark': $color-dark,
|
|
'gray': $color-gray,
|
|
'gray-light': $color-gray-light,
|
|
'twitter': #1da1f2,
|
|
'facebook': #1877f2,
|
|
'github': #181717,
|
|
'dribbble': #ea4c89
|
|
);
|
|
|
|
$backgrounds: (
|
|
gray: var(--color-gray),
|
|
gray-light: var(--color-gray-light),
|
|
base: var(--bg-primary),
|
|
surface: var(--bg-primary),
|
|
);
|
|
|
|
$color-background: $color-white;
|
|
|
|
$color-muted: #515671;
|
|
$color-muted-light: lighten($color-muted, 10%);
|
|
$color-muted-dark: darken($color-muted, 10%);
|
|
|
|
$color-border: #dbdef0;
|
|
$color-border-light: lighten($color-border, 4%);
|
|
$color-border-hover: darken($color-border, 15%);
|
|
|
|
$color-highlight-bg: $color-dark;
|
|
$color-highlight-red: #ff8383;
|
|
$color-highlight-yellow: #ffe484;
|
|
$color-highlight-green: #b5f4a5;
|
|
$color-highlight-blue: #93ddfd;
|
|
$color-highlight-purple: #d9a9ff;
|
|
|
|
|
|
$font-weight-normal: 400;
|
|
$font-weight-medium: 500;
|
|
$font-weight-bold: 600;
|
|
$font-weight-black: 700;
|
|
$font-weight-light: 300;
|
|
|
|
$tracking-tight: -.02em;
|
|
$tracking-wide: .04em;
|
|
|
|
$border-radius: .25rem;
|
|
$border-radius-lg: .375rem;
|
|
$border-radius-xl: .5rem;
|
|
|
|
$font-size-h0: px2rem(48px);
|
|
$font-size-h1: px2rem(32px);
|
|
$font-size-h2: px2rem(24px);
|
|
$font-size-h3: px2rem(20px);
|
|
$font-size-h4: px2rem(18px);
|
|
$font-size-h5: $font-size-base;
|
|
$font-size-h6: px2rem(14px);
|
|
$font-size-h7: px2rem(12px);
|
|
|
|
$line-height-h0: 3.25rem;
|
|
$line-height-h1: 2.5rem;
|
|
$line-height-h2: 2.25rem;
|
|
$line-height-h3: 1.75rem;
|
|
$line-height-h4: 1.5rem;
|
|
$line-height-h5: 1.25rem;
|
|
$line-height-h6: 1rem;
|
|
$line-height-h7: 1rem;
|
|
|
|
$gap-0: 0rem;
|
|
$gap-1: .25rem;
|
|
$gap-2: .5rem;
|
|
$gap-3: 1rem;
|
|
$gap-4: 1.5rem;
|
|
$gap-5: 2rem;
|
|
$gap-6: 4rem;
|
|
$gap-7: 6.5rem;
|
|
$gap-8: 10.5rem;
|
|
|
|
$gaps: (
|
|
0: $gap-0,
|
|
1: $gap-1,
|
|
2: $gap-2,
|
|
3: $gap-3,
|
|
4: $gap-4,
|
|
5: $gap-5,
|
|
6: $gap-6,
|
|
7: $gap-7,
|
|
8: $gap-8,
|
|
);
|
|
|
|
$negative-gaps: (
|
|
n0: -$gap-0,
|
|
n1: -$gap-1,
|
|
n2: -$gap-2,
|
|
n3: -$gap-3,
|
|
n4: -$gap-4,
|
|
n5: -$gap-5,
|
|
n6: -$gap-6,
|
|
n7: -$gap-7,
|
|
n8: -$gap-8,
|
|
);
|
|
|
|
$breakpoint-sm: 560px;
|
|
$breakpoint-md: 768px;
|
|
$breakpoint-lg: 960px;
|
|
$breakpoint-xl: 1280px;
|
|
|
|
$grid-breakpoints: (
|
|
0: 0,
|
|
'sm': $breakpoint-sm,
|
|
'md': $breakpoint-md,
|
|
'lg': $breakpoint-lg,
|
|
'xl': $breakpoint-xl,
|
|
);
|
|
|
|
$container-max-width: px2rem(1280px);
|
|
$container-narrow-max-width: px2rem(990px);
|
|
$container-slim-max-width: px2rem(660px);
|
|
|
|
$zindex-modal: 100;
|
|
$zindex-gototop: 90;
|
|
$zindex-header: 80;
|
|
|
|
$grid-padding: $gap-4;
|
|
$grid-columns: 12;
|
|
|
|
$header-height: 5rem;
|
|
$aside-width: 20rem;
|
|
|
|
$form-focus-color: $color-primary;
|
|
$form-check-size: 1rem;
|
|
|
|
$form-btn-height: 2.5rem;
|
|
|
|
$shadow-popover: 0 4px 56px rgb(12, 12, 12, 20%), 0 0 0 1px rgb(0, 0, 0, 5%);
|
|
$shadow-card-sm: 0 1px 2px 0 rgb(0, 0, 0, .05);
|
|
$shadow-card: 0 0 0 1px $color-border, 0 1px 5px rgba(12, 12, 12, 0.05), 0 0 40px rgba(12, 12, 12, 0.015);
|
|
$shadow-card-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 10px 10px -5px rgba(0, 0, 0, .04);
|
|
|
|
$transition-duration-short: .2s;
|
|
$transition-duration: .5s;
|
|
|
|
$border-radius-values: (
|
|
null: $border-radius,
|
|
lg: $border-radius-lg,
|
|
0: 0
|
|
);
|
|
|
|
$css-variables: (
|
|
font-family: $font-families,
|
|
color: map-merge($colors, $extra-colors),
|
|
bg: $backgrounds,
|
|
);
|
|
|
|
$margin-gaps: map-merge($gaps, $negative-gaps);
|
|
|
|
$utilities: (
|
|
"display": (
|
|
responsive: true,
|
|
print: true,
|
|
property: display,
|
|
class: d,
|
|
values: none inline inline-block block flex table-cell
|
|
),
|
|
"overflow": (
|
|
class: o,
|
|
property: overflow,
|
|
values: hidden auto
|
|
),
|
|
"color": (
|
|
property: color,
|
|
class: text,
|
|
values: map-merge($colors, (
|
|
muted: var(--color-muted, #{$color-muted}),
|
|
headers: var(--color-headers, #{$color-headers}),
|
|
reset: inherit
|
|
))
|
|
),
|
|
"shadow": (
|
|
property: box-shadow,
|
|
class: shadow,
|
|
values: (
|
|
sm: $shadow-card-sm,
|
|
null: $shadow-card,
|
|
card: $shadow-card,
|
|
lg: $shadow-card-lg,
|
|
)
|
|
),
|
|
"border-radius": (
|
|
property: border-radius,
|
|
class: rounded,
|
|
values: $border-radius-values
|
|
),
|
|
"border-radius-left": (
|
|
property: border-top-left-radius border-bottom-left-radius,
|
|
class: rounded-left,
|
|
values: $border-radius-values
|
|
),
|
|
"border-radius-right": (
|
|
property: border-top-right-radius border-bottom-right-radius,
|
|
class: rounded-right,
|
|
values: $border-radius-values
|
|
),
|
|
"background": (
|
|
property: background,
|
|
class: bg,
|
|
values: map-merge($colors, (
|
|
white: $color-white,
|
|
light: $color-gray
|
|
))
|
|
),
|
|
"text-transform": (
|
|
property: text-transform,
|
|
class: text,
|
|
values: uppercase
|
|
),
|
|
"text-align": (
|
|
responsive: true,
|
|
property: text-align,
|
|
class: text,
|
|
values: left center right
|
|
),
|
|
"font-weight": (
|
|
property: font-weight,
|
|
class: font,
|
|
values: (
|
|
light: $font-weight-light,
|
|
normal: $font-weight-normal,
|
|
medium: $font-weight-medium,
|
|
bold: $font-weight-bold,
|
|
black: $font-weight-black
|
|
)
|
|
),
|
|
"font-family": (
|
|
property: font-family,
|
|
class: font,
|
|
values: (
|
|
monospaced: $font-family-monospace
|
|
),
|
|
),
|
|
"text-decoration": (
|
|
property: text-decoration,
|
|
class: text,
|
|
values: underline
|
|
),
|
|
"line-height": (
|
|
property: line-height,
|
|
class: lh,
|
|
values: (
|
|
1: 1,
|
|
sm: $line-height-sm,
|
|
base: $line-height-base,
|
|
h1: $line-height-h1,
|
|
h2: $line-height-h2,
|
|
h3: $line-height-h3,
|
|
h4: $line-height-h4,
|
|
h5: $line-height-h5,
|
|
h6: $line-height-h6,
|
|
)
|
|
),
|
|
"font-size": (
|
|
property: font-size,
|
|
class: font,
|
|
values: (
|
|
h1: $font-size-h1,
|
|
h2: $font-size-h2,
|
|
h3: $font-size-h3,
|
|
h4: $font-size-h4,
|
|
h5: $font-size-h5,
|
|
h6: $font-size-h6,
|
|
)
|
|
),
|
|
"position": (
|
|
property: position,
|
|
class: p,
|
|
values: (sticky, relative, absolute)
|
|
),
|
|
"flex": (
|
|
responsive: true,
|
|
property: flex,
|
|
values: (fill: 1 1 auto)
|
|
),
|
|
"flex-direction": (
|
|
responsive: true,
|
|
property: flex-direction,
|
|
class: flex,
|
|
values: row column row-reverse
|
|
),
|
|
"justify-content": (
|
|
responsive: true,
|
|
property: justify-content,
|
|
class: justify,
|
|
values: (
|
|
start: flex-start,
|
|
end: flex-end,
|
|
center: center,
|
|
between: space-between,
|
|
//around: space-around,
|
|
//evenly: space-evenly,
|
|
)
|
|
),
|
|
"align-items": (
|
|
responsive: true,
|
|
property: align-items,
|
|
class: items,
|
|
values: (
|
|
start: flex-start,
|
|
//end: flex-end,
|
|
center: center,
|
|
//baseline: baseline,
|
|
//stretch: stretch,
|
|
)
|
|
),
|
|
"order": (
|
|
responsive: true,
|
|
property: order,
|
|
values: (
|
|
first: -1,
|
|
//0: 0,
|
|
//1: 1,
|
|
//2: 2,
|
|
//3: 3,
|
|
//4: 4,
|
|
//5: 5,
|
|
last: 6,
|
|
),
|
|
),
|
|
"margin": (
|
|
responsive: true,
|
|
property: margin,
|
|
class: m,
|
|
values: map-merge($margin-gaps, (auto: auto))
|
|
),
|
|
"margin-x": (
|
|
responsive: true,
|
|
property: margin-right margin-left,
|
|
class: mx,
|
|
values: map-merge($margin-gaps, (auto: auto))
|
|
),
|
|
"margin-y": (
|
|
responsive: true,
|
|
property: margin-top margin-bottom,
|
|
class: my,
|
|
values: map-merge($margin-gaps, (auto: auto))
|
|
),
|
|
"margin-top": (
|
|
responsive: true,
|
|
property: margin-top,
|
|
class: mt,
|
|
values: map-merge($margin-gaps, (auto: auto))
|
|
),
|
|
"margin-right": (
|
|
responsive: true,
|
|
property: margin-right,
|
|
class: mr,
|
|
values: map-merge($margin-gaps, (auto: auto))
|
|
),
|
|
"margin-bottom": (
|
|
responsive: true,
|
|
property: margin-bottom,
|
|
class: mb,
|
|
values: map-merge($margin-gaps, (auto: auto))
|
|
),
|
|
"margin-left": (
|
|
responsive: true,
|
|
property: margin-left,
|
|
class: ml,
|
|
values: map-merge($margin-gaps, (auto: auto))
|
|
),
|
|
"padding": (
|
|
responsive: true,
|
|
property: padding,
|
|
class: p,
|
|
values: $gaps
|
|
),
|
|
"padding-x": (
|
|
responsive: true,
|
|
property: padding-right padding-left,
|
|
class: px,
|
|
values: $gaps
|
|
),
|
|
"padding-y": (
|
|
responsive: true,
|
|
property: padding-top padding-bottom,
|
|
class: py,
|
|
values: $gaps
|
|
),
|
|
"padding-top": (
|
|
responsive: true,
|
|
property: padding-top,
|
|
class: pt,
|
|
values: $gaps
|
|
),
|
|
"padding-right": (
|
|
responsive: true,
|
|
property: padding-right,
|
|
class: pr,
|
|
values: $gaps
|
|
),
|
|
"padding-bottom": (
|
|
responsive: true,
|
|
property: padding-bottom,
|
|
class: pb,
|
|
values: $gaps
|
|
),
|
|
"padding-left": (
|
|
responsive: true,
|
|
property: padding-left,
|
|
class: pl,
|
|
values: $gaps
|
|
),
|
|
"border": (
|
|
property: border,
|
|
values: (
|
|
0: none,
|
|
null: 1px solid $color-border,
|
|
light: 1px solid $color-border-light
|
|
)
|
|
),
|
|
"outline": (
|
|
property: outline,
|
|
values: (
|
|
0: none,
|
|
null: 1px solid $color-border,
|
|
light: 1px solid $color-border-light
|
|
)
|
|
),
|
|
"border-top": (
|
|
property: border-top,
|
|
values: (
|
|
0: none,
|
|
null: 1px solid $color-border,
|
|
light: 1px solid $color-border-light
|
|
)
|
|
),
|
|
"border-right": (
|
|
property: border-right,
|
|
values: (
|
|
0: none,
|
|
null: 1px solid $color-border,
|
|
light: 1px solid $color-border-light
|
|
)
|
|
),
|
|
"border-bottom": (
|
|
property: border-bottom,
|
|
values: (
|
|
0: none,
|
|
null: 1px solid $color-border,
|
|
light: 1px solid $color-border-light
|
|
)
|
|
),
|
|
"border-left": (
|
|
property: border-left,
|
|
values: (
|
|
0: none,
|
|
null: 1px solid $color-border,
|
|
light: 1px solid $color-border-light
|
|
)
|
|
),
|
|
"user-select": (
|
|
property: user-select,
|
|
class: select,
|
|
values: all auto none
|
|
),
|
|
"pointer-events": (
|
|
property: pointer-events,
|
|
values: none
|
|
),
|
|
"width": (
|
|
property: width,
|
|
class: w,
|
|
values: (
|
|
1: 1%,
|
|
100: 100%,
|
|
auto: auto
|
|
)
|
|
),
|
|
"height": (
|
|
property: height,
|
|
class: h,
|
|
values: (
|
|
100: 100%,
|
|
auto: auto
|
|
)
|
|
),
|
|
"ratio": (
|
|
class: ratio,
|
|
property: aspect-ratio,
|
|
extra: (
|
|
background-size: cover
|
|
),
|
|
values: (
|
|
'16x9': divide(16, 9),
|
|
'9x16': divide(9, 16),
|
|
'4x3': divide(4, 3),
|
|
'3x4': divide(3, 4),
|
|
'2x1': divide(2, 1),
|
|
'1x2': divide(1, 2),
|
|
'1x1': divide(1, 1),
|
|
)
|
|
)
|
|
);
|