muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

Добавил тему "Веспера"

Browse source
This commit is contained in:
muerwre 2022-08-14 15:19:54 +07:00 • committed by GitHub
parent 5d34090238
commit aee4b662d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
148 changed files with 1331 additions and 1338 deletions
Download patch file Download diff file Expand all files Collapse all files

92
src/styles/_mixins.scss
View file

@ -1,25 +1,19 @@
@use "sass:math";
@use 'sass:math';
@mixin outer_shadow() {
box-shadow:
inset transparentize(white, 0.95) 1px 1px,
transparentize(black, 0.8) 1px 1px,
transparentize(black, 0.6) 0 1px 5px;
box-shadow: inset $gray_90 1px 1px, transparentize(black, 0.8) 1px 1px,
transparentize(black, 0.6) 0 1px 5px;
}
// same as outer shadow, but higher
@mixin dropdown_shadow {
box-shadow:
inset transparentize(white, 0.95) 1px 1px,
transparentize(black, 0.8) 1px 1px,
transparentize(black, 0.6) 5px 5px 10px;
box-shadow: inset $gray_90 1px 1px, transparentize(black, 0.8) 1px 1px,
transparentize(black, 0.6) 5px 5px 10px;
}
@mixin row_shadow() {
&:not(:last-child) {
box-shadow: transparentize(white, 0.95) 0 1px,
inset transparentize(black, 0.8) 0 -1px;
box-shadow: $gray_90 0 1px, inset transparentize(black, 0.8) 0 -1px;
}
&:only-child {
@ -28,10 +22,8 @@
}
@mixin inner_shadow() {
box-shadow:
inset transparentize(white, 0.95) -1px -1px,
inset transparentize(black, 0.9) 1px 1px,
inset transparentize(black, 0.9) 0 0 10px;
box-shadow: inset $gray_90 -1px -1px, inset transparentize(black, 0.9) 1px 1px,
inset transparentize(black, 0.9) 0 0 10px;
}
@mixin inner_shadow_active() {
@ -39,12 +31,12 @@
transition: background-color 250ms;
&:hover {
background: transparentize(white, 0.95);
background: $gray_90;
}
}
@mixin input_shadow() {
box-shadow: inset transparentize(white, 0.92) 0 -1px, inset transparentize(black, 0.8) 0 1px;
box-shadow: inset $gray_90 0 -1px, inset transparentize(black, 0.8) 0 1px;
}
@mixin modal_mixin() {
@ -66,7 +58,7 @@
left: 0;
height: 120px;
width: 100%;
background: linear-gradient(transparentize($color, 1), $color);
background: linear-gradient(transparent, $color);
border-radius: $radius;
pointer-events: none;
touch-action: none;
@ -104,7 +96,7 @@
@content;
& > * {
margin: $gap*0.5 0 !important;
margin: $gap * 0.5 0 !important;
&:first-child {
margin-top: 0 !important;
@ -117,27 +109,27 @@
}
@mixin can_backdrop {
@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
@supports (
(-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))
) {
@content;
}
}
@mixin blur($color: $content_bg, $radius: 15px, $opacity: 0.5) {
background: transparentize($color, math.div($opacity, 1.5));
backdrop-filter: blur($radius);
-webkit-backdrop-filter: blur($radius);
@mixin blur($color: $content_bg_backdrop, $radius: 15px) {
background: $color;
@include can_backdrop {
backdrop-filter: blur($radius);
-webkit-backdrop-filter: blur($radius);
background-color: transparentize($color, $opacity);
background-color: $color;
}
}
@mixin title_with_line {
font: $font_14_semibold;
text-transform: uppercase;
color: transparentize(white, 0.3);
color: $gray_25;
flex-direction: row;
display: flex;
align-items: center;
@ -149,7 +141,7 @@
& > :global(.line) {
flex: 1;
height: 2px;
background: transparentize(white, 0.95);
background: $gray_90;
}
}
@ -162,12 +154,10 @@
}
@mixin sidebar {
@include blur();
@include blur;
}
@mixin sidebar_content(
$width: 400px,
) {
@mixin sidebar_content($width: 400px) {
height: 100%;
box-sizing: border-box;
display: flex;
@ -187,15 +177,6 @@
cursor: pointer;
}
@mixin lab_gradient {
background: linear-gradient(darken($dark_blue, 0%), darken($blue, 30%));
}
@mixin hero_gradient {
$color: mix($wisegreen, $content_bg, 30%);
background: linear-gradient(170deg, lighten($color, 10%), $color);
}
@mixin flow_grid {
width: 100%;
box-sizing: border-box;
@ -244,8 +225,12 @@
@mixin appear {
@keyframes __appear {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
animation: __appear 0.25s forwards;
@ -264,17 +249,6 @@
}
}
@mixin modal_backdrop {
@include blur();
background: transparentize($content_bg, 0.3) url('../../src/sprites/noise.png');
@include can_backdrop {
@supports (backdrop-filter: blur(5px)) and (background-image: url('../../src/sprites/noise.png')) {
background: transparentize($content_bg, 0.5) url('../../src/sprites/noise.png');
}
}
}
@mixin hover_opacity($initial_opacity: 0.5) {
opacity: $initial_opacity;
transition: opacity 0.25s;
@ -292,25 +266,25 @@
[data-popper-placement*='bottom'] & {
border-width: 0 10px 10px 10px;
border-color: transparent transparent lighten($menu_bg, 6%) transparent;
border-color: transparent transparent $content_bg_lightest transparent;
top: -10px;
}
[data-popper-placement*='top'] & {
border-width: 10px 10px 0 10px;
border-color: lighten($menu_bg, 6%) transparent transparent transparent;
border-color: $content_bg_lightest transparent transparent transparent;
bottom: -10px;
}
[data-popper-placement*='right'] & {
border-width: 10px 10px 10px 0;
border-color: transparent lighten($menu_bg, 6%) transparent transparent;
border-color: transparent $content_bg_lightest transparent transparent;
left: -10px;
}
[data-popper-placement*='left'] & {
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent lighten($menu_bg, 6%);
border-color: transparent transparent transparent $content_bg_lightest;
right: -10px;
}
}
}