mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 04:46:40 +07:00
104 lines
2.7 KiB
SCSS
104 lines
2.7 KiB
SCSS
@import 'colors';
|
|
|
|
$cell: 256px;
|
|
$content_width: 1100px;
|
|
$gap: 10px;
|
|
$spc: $gap * 2;
|
|
|
|
$radius: 6px;
|
|
$cell_radius: 4px;
|
|
$panel_radius: $radius;
|
|
|
|
$grid_line: 4px;
|
|
|
|
$input_height: 36px;
|
|
$input_radius: $radius;
|
|
$info_height: 24px;
|
|
|
|
$panel_size: 64px;
|
|
$node_title_height: $panel_size;
|
|
|
|
$bold: 700;
|
|
$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_bold: $bold 24px $font;
|
|
$font_24_semibold: $bold 24px $font;
|
|
$font_24_medium: $medium 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_16_medium: $medium 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_bold;
|
|
$font_hero_title: $font_48_semibold;
|
|
|
|
$shadow_depth_1: transparentize(black, 0.8) 0 1px, inset transparentize(white, 0.98) 0 1px;
|
|
$shadow_depth_2: transparentize(black, 0.8) 0 2px, inset transparentize(white, 0.98) 0 1px;
|
|
|
|
$comment_shadow: $shadow_depth_2;
|
|
$node_shadow: transparentize(black, 0.8) 1px 2px;
|
|
|
|
$tag_height: 22px;
|
|
|
|
$input_shadow: inset transparentize(white, 0.9) 0 0 0 1px;
|
|
$input_shadow_error: inset $red 0 0 0 1px;
|
|
$input_shadow_filled: $input_shadow;
|
|
|
|
@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;
|
|
}
|
|
|
|
@mixin after_shade($color, $position: relative) {
|
|
position: $position;
|
|
|
|
&::after {
|
|
content: ' ';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 120px;
|
|
width: 100%;
|
|
background: linear-gradient(transparentize($color, 1), $color);
|
|
border-radius: $radius;
|
|
pointer-events: none;
|
|
touch-action: none;
|
|
}
|
|
}
|