mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +07:00
68 lines
1.7 KiB
SCSS
68 lines
1.7 KiB
SCSS
@import 'colors';
|
|
|
|
$cell: 256px;
|
|
$content_width: $cell * 4;
|
|
$gap: 10px;
|
|
$spc: $gap * 2;
|
|
|
|
$cell_radius: 4px;
|
|
$panel_radius: 4px;
|
|
|
|
$grid_line: 4px;
|
|
|
|
$input_height: 32px;
|
|
$input_radius: 2px;
|
|
|
|
$info_height: 24px;
|
|
|
|
$semibold: 600;
|
|
$regular: 400;
|
|
$medium: 500;
|
|
$light: 300;
|
|
$extra_light: 200;
|
|
|
|
$font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
|
|
$font_48_semibold: $semibold 48px $font;
|
|
$font_24_semibold: $semibold 24px $font;
|
|
$font_24_regular: $regular 24px $font;
|
|
$font_18_regular: $regular 18px $font;
|
|
$font_18_extra_light: $extra_light 18px $font;
|
|
$font_18_semibold: $semibold 18px $font;
|
|
$font_16_regular: $regular 16px $font;
|
|
$font_16_semibold: $semibold 16px $font;
|
|
$font_14_regular: $regular 14px $font;
|
|
$font_14_semibold: $semibold 14px $font;
|
|
$font_14_medium: $medium 14px $font;
|
|
$font_12_medium: $medium 12px $font;
|
|
$font_12_semibold: $semibold 12px $font;
|
|
$font_12_regular: $regular 12px $font;
|
|
$font_10_regular: $regular 10px $font;
|
|
$font_10_semibold: $semibold 10px $font;
|
|
|
|
$font_cell_title: $font_24_semibold;
|
|
$font_hero_title: $font_48_semibold;
|
|
|
|
@mixin outer_shadow() {
|
|
box-shadow: inset transparentize(white, 0.95) 0 1px,
|
|
inset transparentize(black, 0.5) 0 -1px;
|
|
}
|
|
|
|
@mixin inner_shadow() {
|
|
box-shadow: inset transparentize(white, 0.95) 0 -1px,
|
|
inset transparentize(black, 0.5) 0 1px;
|
|
}
|
|
|
|
@mixin input_shadow() {
|
|
box-shadow: inset transparentize(white, 0.92) 0 -1px,
|
|
inset transparentize(black, 0.8) 0 1px;
|
|
}
|
|
|
|
@mixin modal_mixin() {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|