mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 04:46:40 +07:00
133 lines
3.2 KiB
SCSS
133 lines
3.2 KiB
SCSS
@import 'colors';
|
|
|
|
$cell: 320px;
|
|
$grid_line: 4px;
|
|
$content_width: $cell * 4 + $grid_line * 3;
|
|
$gap: 10px;
|
|
$spc: $gap * 2;
|
|
$comment_height: 72px;
|
|
$bar_height: 64px;
|
|
|
|
$radius: 8px;
|
|
$cell_radius: $radius;
|
|
$panel_radius: $radius;
|
|
$input_radius: $radius;
|
|
|
|
$input_height: 36px;
|
|
$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_8_regular: $regular 8px $font;
|
|
$font_8_semibold: $semibold 8px $font;
|
|
|
|
$font_cell_title: $bold 30px $font;
|
|
$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) 0 2px, transparentize(black, 0.8) 0 2px 4px;
|
|
|
|
$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) 1px 1px, transparentize(black, 0.8) -1px -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;
|
|
}
|
|
}
|
|
|
|
@mixin phone {
|
|
@content;
|
|
}
|
|
|
|
@mixin tablet {
|
|
@media (max-width: 599px) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin vertical_at_tablet {
|
|
@media (max-width: 599px) {
|
|
flex-direction: column !important;
|
|
|
|
& > * {
|
|
margin: $gap/2 0 !important;
|
|
|
|
&:first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
&:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|