mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 04:46:40 +07:00
fixed inputs
This commit is contained in:
Fedor Katurov
parent
6e89271ea9
commit
811e14fd4c
29 changed files with 566 additions and 901 deletions
|
|
@ -1,11 +1,9 @@
|
|||
// color 0, 0, 68 is pretty cool, btw
|
||||
// $red: #ff3344;
|
||||
$red: #ff3344;
|
||||
$yellow: #ffd60f;
|
||||
$dark_blue: #592071;
|
||||
$blue: #582cd0;
|
||||
$green: #00d2b9;
|
||||
//$green: #00503c;
|
||||
$olive: #8bc12a;
|
||||
$orange: #ff7549;
|
||||
$grass: #41800d;
|
||||
|
|
@ -46,7 +44,6 @@ $text_small: 14px;
|
|||
$text_big: 20px;
|
||||
$text_sign: 22px;
|
||||
|
||||
$input_bg_color: darken($content_bg, 2%);
|
||||
$button_bg_color: $red_gradient;
|
||||
|
||||
$inset_bg: linear-gradient(135deg, darken($content_bg, 2%), $content_bg);
|
||||
|
|
|
|||
41
src/styles/_fonts.scss
Normal file
41
src/styles/_fonts.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
|
||||
$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_48_bold: $bold 48px $font;
|
||||
$font_32_bold: $bold 32px $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_20_semibold: $bold 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_bold: $bold 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: $font_24_semibold;
|
||||
$font_hero_title: $bold 40px $font;
|
||||
11
src/styles/_inputs.scss
Normal file
11
src/styles/_inputs.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
@import "fonts";
|
||||
|
||||
$input_height: 40px;
|
||||
$input_text_color: #bbbbbb;
|
||||
$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;
|
||||
$input_font: $font_16_semibold;
|
||||
$input_placeholder_font: $font_16_medium;
|
||||
$input_bg_color: darken($content_bg, 2%);
|
||||
$input_grey_color: #444444;
|
||||
246
src/styles/_mixins.scss
Normal file
246
src/styles/_mixins.scss
Normal file
|
|
@ -0,0 +1,246 @@
|
|||
|
||||
@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;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
@mixin row_shadow() {
|
||||
&:not(:last-child) {
|
||||
box-shadow: transparentize(white, 0.95) 0 1px,
|
||||
inset transparentize(black, 0.8) 0 -1px;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
@mixin inner_shadow_active() {
|
||||
@include inner_shadow;
|
||||
transition: background-color 250ms;
|
||||
|
||||
&:hover {
|
||||
background: transparentize(white, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
@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 {
|
||||
@media (max-width: 320px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tablet {
|
||||
@media (max-width: 599px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop {
|
||||
@media (max-width: $content_width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin vertical_at_tablet {
|
||||
@media (max-width: 599px) {
|
||||
flex-direction: column !important;
|
||||
|
||||
@content;
|
||||
|
||||
& > * {
|
||||
margin: $gap/2 0 !important;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin can_backdrop {
|
||||
@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, $opacity / 2);
|
||||
|
||||
@include can_backdrop {
|
||||
backdrop-filter: blur($radius);
|
||||
-webkit-backdrop-filter: blur($radius);
|
||||
background: transparentize($color, $opacity);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin title_with_line {
|
||||
font: $font_14_semibold;
|
||||
text-transform: uppercase;
|
||||
color: transparentize(white, 0.3);
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > * {
|
||||
padding-right: $gap;
|
||||
}
|
||||
|
||||
& > :global(.line) {
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
background: transparentize(white, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin clamp($lines, $line: 1em) {
|
||||
display: -webkit-box;
|
||||
line-clamp: $lines;
|
||||
-webkit-line-clamp: $lines;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin sidebar {
|
||||
@include blur();
|
||||
}
|
||||
|
||||
@mixin sidebar_content(
|
||||
$width: 400px,
|
||||
) {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 0 1 $width;
|
||||
max-width: 100vw;
|
||||
position: relative;
|
||||
background: transparentize($content_bg, 0.4);
|
||||
box-shadow: transparentize(white, 0.95) -1px 0;
|
||||
}
|
||||
|
||||
@mixin editor_round_button {
|
||||
width: $upload_button_height;
|
||||
height: $upload_button_height;
|
||||
border-radius: ($upload_button_height / 2) !important;
|
||||
flex: 0 0 $upload_button_height;
|
||||
position: relative;
|
||||
border-radius: $radius;
|
||||
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;
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: repeat(auto-fit, minmax($cell - 5, 1fr));
|
||||
grid-auto-rows: $cell;
|
||||
|
||||
grid-auto-flow: row dense;
|
||||
grid-column-gap: $gap;
|
||||
grid-row-gap: $gap;
|
||||
|
||||
@media (max-width: ($cell + 10) * 3) {
|
||||
grid-template-columns: repeat(auto-fill, minmax($fluid_cell - 20, 1fr));
|
||||
grid-auto-rows: $fluid_cell;
|
||||
grid-template-rows: calc(50vw - 10px) $fluid_cell;
|
||||
}
|
||||
|
||||
@media (max-width: $cell_tablet) {
|
||||
grid-template-rows: calc(66vw - 10px) auto $fluid_cell;
|
||||
}
|
||||
|
||||
@media (max-width: $cell_mobile) {
|
||||
// rework stamp, so it will be shown as smaller one on mobiles
|
||||
grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr));
|
||||
grid-template-rows: calc(80vw - 10px) auto 50vw;
|
||||
grid-auto-rows: 50vw;
|
||||
}
|
||||
|
||||
@media (max-width: ($fluid_cell + 5) * 1.5 + 20) {
|
||||
grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr));
|
||||
grid-template-rows: calc(80vw - 10px) auto 50vw;
|
||||
grid-auto-rows: 50vw;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin appear {
|
||||
@keyframes __appear {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
animation: __appear 0.25s forwards;
|
||||
}
|
||||
|
||||
@mixin container {
|
||||
max-width: $content_width + $gap * 8;
|
||||
width: 100%;
|
||||
|
||||
padding-left: $gap * 4;
|
||||
padding-right: $gap * 4;
|
||||
|
||||
@include tablet {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,390 +0,0 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
.input_text_wrapper {
|
||||
position: relative;
|
||||
min-height: 40px;
|
||||
border-radius: $input_radius;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s;
|
||||
z-index: 1;
|
||||
|
||||
@include inner_shadow();
|
||||
background: $input_bg_color;
|
||||
|
||||
:global(.react-datepicker-wrapper) {
|
||||
flex: 1;
|
||||
padding: 0 18px;
|
||||
}
|
||||
|
||||
&.seamless {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.textarea_wrapper {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.input {
|
||||
padding: 0;
|
||||
|
||||
textarea {
|
||||
padding: $gap / 2 $gap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
opacity: 1;
|
||||
// z-index: 999;
|
||||
|
||||
&.has_status .status {
|
||||
flex-basis: 0;
|
||||
|
||||
div {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.select {
|
||||
.title {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: transparentize(white, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
padding: 0 18px;
|
||||
flex: 1 0 0;
|
||||
outline: none;
|
||||
color: white;
|
||||
position: relative;
|
||||
|
||||
//&::before {
|
||||
// content: ' ';
|
||||
// background: linear-gradient(270deg, $input_bg_color $gap, transparentize($input_bg_color, 1));
|
||||
// position: absolute;
|
||||
// width: $gap * 2;
|
||||
// height: $input_height;
|
||||
// top: 1px;
|
||||
// right: 1px;
|
||||
// transform: translateX(0);
|
||||
// transition: transform 0.25s;
|
||||
// border-radius: 0 $input_radius $input_radius 0;
|
||||
// pointer-events: none;
|
||||
// touch-action: none;
|
||||
//}
|
||||
}
|
||||
|
||||
&.required {
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
position: absolute;
|
||||
|
||||
background: $red_gradient;
|
||||
}
|
||||
}
|
||||
|
||||
&.has_loader {
|
||||
&::before {
|
||||
transform: translateX(-40px);
|
||||
}
|
||||
|
||||
.loader {
|
||||
flex-basis: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&.has_status {
|
||||
&::before {
|
||||
transform: translateX(-40px);
|
||||
}
|
||||
&.focused::before {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.status {
|
||||
flex-basis: 40px;
|
||||
}
|
||||
|
||||
.title {
|
||||
// padding-right: 40px;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
.title {
|
||||
padding-right: 16px;
|
||||
color: transparentize(white, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.focused.has_status.has_loader {
|
||||
&::before {
|
||||
transform: translateX(-80px);
|
||||
}
|
||||
&.focused::before {
|
||||
transform: translateX(-40px);
|
||||
}
|
||||
}
|
||||
|
||||
&.has_error {
|
||||
box-shadow: $input_shadow_error;
|
||||
|
||||
.title {
|
||||
color: transparentize(red, 0.4) !important;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
&.numeric {
|
||||
flex: 0 0 120px;
|
||||
|
||||
.input {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.plus {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 0 10px;
|
||||
flex: 0 0 40px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.select {
|
||||
.input {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.value {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.password_revealer {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
user-select: none;
|
||||
color: white;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.25s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.input_text,
|
||||
.textarea {
|
||||
outline: none;
|
||||
border: none;
|
||||
font: $font_16_medium;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
color: white;
|
||||
flex: 1;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
padding: 12px 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.status,
|
||||
.loader {
|
||||
flex: 0 0 0;
|
||||
transition: flex-basis 500ms;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
||||
& > div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: $input_height;
|
||||
height: $input_height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 0.25s;
|
||||
opacity: 0;
|
||||
|
||||
&:global(.active) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font: $font_16_semibold;
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 10px;
|
||||
bottom: auto;
|
||||
padding: 0 4px;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
transition: top 0.25s, bottom 0.25s, font 0.25s, color 0.25s;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
color: lighten($content_bg, 10%);
|
||||
text-transform: capitalize;
|
||||
background: $input_bg_color;
|
||||
|
||||
span {
|
||||
font: $font;
|
||||
//background: $input_bg_color;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused .title,
|
||||
&.has_value .title {
|
||||
// font: $font_10_semibold;
|
||||
font-size: 10px;
|
||||
top: -6px;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
&.has_value {
|
||||
//box-shadow: $input_shadow_filled;
|
||||
|
||||
.title {
|
||||
color: transparentize(white, 0.3);
|
||||
}
|
||||
|
||||
&.focused {
|
||||
.title {
|
||||
color: transparentize(white, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
font: $font_12_regular;
|
||||
bottom: -6px;
|
||||
left: 15px;
|
||||
position: absolute;
|
||||
color: $red;
|
||||
|
||||
span {
|
||||
background: $content_bg;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 2px;
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
.error_icon {
|
||||
fill: $red;
|
||||
stroke: $red;
|
||||
}
|
||||
|
||||
.success_icon {
|
||||
fill: $green;
|
||||
stroke: $green;
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-radius: $input_radius;
|
||||
box-shadow: $input_shadow;
|
||||
background: white;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
background: transparentize($red, 0.8);
|
||||
}
|
||||
|
||||
.option_title {
|
||||
text-transform: capitalize;
|
||||
color: transparentize(black, 0.5);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.options {
|
||||
.option,
|
||||
.option_title {
|
||||
height: $input_height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.1s;
|
||||
border-radius: $input_radius;
|
||||
}
|
||||
|
||||
.option_title {
|
||||
box-shadow: $input_shadow;
|
||||
border-radius: $input_radius;
|
||||
}
|
||||
}
|
||||
|
||||
.after {
|
||||
width: 24px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 5px;
|
||||
top: -1px;
|
||||
}
|
||||
|
|
@ -1,4 +1,7 @@
|
|||
@import 'colors';
|
||||
@import 'inputs';
|
||||
@import 'fonts';
|
||||
@import 'mixins';
|
||||
|
||||
$header_height: 64px;
|
||||
$cell: 280px;
|
||||
|
|
@ -19,59 +22,16 @@ $bar_height: 64px;
|
|||
$radius: 8px;
|
||||
$cell_radius: $radius;
|
||||
$panel_radius: $radius;
|
||||
$input_radius: $radius;
|
||||
$dialog_radius: $radius * 2;
|
||||
$placeholder_bg: transparentize(white, 0.96);
|
||||
|
||||
$input_height: 36px;
|
||||
$info_height: 24px;
|
||||
$limited_width: 940px;
|
||||
|
||||
$panel_size: 64px;
|
||||
$node_title_height: $panel_size;
|
||||
|
||||
$bold: 700;
|
||||
$semibold: 600;
|
||||
$regular: 400;
|
||||
$medium: 500;
|
||||
$light: 300;
|
||||
$extra_light: 200;
|
||||
|
||||
$upload_button_height: 52px;
|
||||
|
||||
$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_48_bold: $bold 48px $font;
|
||||
$font_32_bold: $bold 32px $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_20_semibold: $bold 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_bold: $bold 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: $font_24_semibold;
|
||||
$font_hero_title: $bold 40px $font;
|
||||
|
||||
$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;
|
||||
|
||||
|
|
@ -80,255 +40,5 @@ $node_shadow: transparentize(black, 0.8) 0 2px, transparentize(black, 0.8) 0 2px
|
|||
|
||||
$tag_height: 26px;
|
||||
|
||||
$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;
|
||||
|
||||
$login_dialog_padding: $gap $gap 30px $gap;
|
||||
$sidebar_border: transparentize(white, 0.95);
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
@mixin row_shadow() {
|
||||
&:not(:last-child) {
|
||||
box-shadow: transparentize(white, 0.95) 0 1px,
|
||||
inset transparentize(black, 0.8) 0 -1px;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin inner_shadow() {
|
||||
box-shadow:
|
||||
inset transparentize(white, 0.92) -1px -1px,
|
||||
inset transparentize(black, 0.5) 1px 1px,
|
||||
inset transparentize(black, 0.7) 0 0 10px;
|
||||
}
|
||||
|
||||
@mixin inner_shadow_active() {
|
||||
@include inner_shadow;
|
||||
transition: background-color 250ms;
|
||||
|
||||
&:hover {
|
||||
background: transparentize(white, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
@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 {
|
||||
@media (max-width: 320px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tablet {
|
||||
@media (max-width: 599px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop {
|
||||
@media (max-width: $content_width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin vertical_at_tablet {
|
||||
@media (max-width: 599px) {
|
||||
flex-direction: column !important;
|
||||
|
||||
@content;
|
||||
|
||||
& > * {
|
||||
margin: $gap/2 0 !important;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin can_backdrop {
|
||||
@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, $opacity / 2);
|
||||
|
||||
@include can_backdrop {
|
||||
backdrop-filter: blur($radius);
|
||||
-webkit-backdrop-filter: blur($radius);
|
||||
background: transparentize($color, $opacity);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin title_with_line {
|
||||
font: $font_14_semibold;
|
||||
text-transform: uppercase;
|
||||
color: transparentize(white, 0.3);
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > * {
|
||||
padding-right: $gap;
|
||||
}
|
||||
|
||||
& > :global(.line) {
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
background: transparentize(white, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin clamp($lines, $line: 1em) {
|
||||
display: -webkit-box;
|
||||
line-clamp: $lines;
|
||||
-webkit-line-clamp: $lines;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin sidebar {
|
||||
@include blur();
|
||||
}
|
||||
|
||||
@mixin sidebar_content(
|
||||
$width: 400px,
|
||||
) {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 0 1 $width;
|
||||
max-width: 100vw;
|
||||
position: relative;
|
||||
background: transparentize($content_bg, 0.4);
|
||||
box-shadow: transparentize(white, 0.95) -1px 0;
|
||||
}
|
||||
|
||||
@mixin editor_round_button {
|
||||
width: $upload_button_height;
|
||||
height: $upload_button_height;
|
||||
border-radius: ($upload_button_height / 2) !important;
|
||||
flex: 0 0 $upload_button_height;
|
||||
position: relative;
|
||||
border-radius: $radius;
|
||||
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;
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: repeat(auto-fit, minmax($cell - 5, 1fr));
|
||||
grid-auto-rows: $cell;
|
||||
|
||||
grid-auto-flow: row dense;
|
||||
grid-column-gap: $gap;
|
||||
grid-row-gap: $gap;
|
||||
|
||||
@media (max-width: ($cell + 10) * 3) {
|
||||
grid-template-columns: repeat(auto-fill, minmax($fluid_cell - 20, 1fr));
|
||||
grid-auto-rows: $fluid_cell;
|
||||
grid-template-rows: calc(50vw - 10px) $fluid_cell;
|
||||
}
|
||||
|
||||
@media (max-width: $cell_tablet) {
|
||||
grid-template-rows: calc(66vw - 10px) auto $fluid_cell;
|
||||
}
|
||||
|
||||
@media (max-width: $cell_mobile) {
|
||||
// rework stamp, so it will be shown as smaller one on mobiles
|
||||
grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr));
|
||||
grid-template-rows: calc(80vw - 10px) auto 50vw;
|
||||
grid-auto-rows: 50vw;
|
||||
}
|
||||
|
||||
@media (max-width: ($fluid_cell + 5) * 1.5 + 20) {
|
||||
grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr));
|
||||
grid-template-rows: calc(80vw - 10px) auto 50vw;
|
||||
grid-auto-rows: 50vw;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin appear {
|
||||
@keyframes __appear {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
animation: __appear 0.25s forwards;
|
||||
}
|
||||
|
||||
@mixin container {
|
||||
max-width: $content_width + $gap * 8;
|
||||
width: 100%;
|
||||
|
||||
padding-left: $gap * 4;
|
||||
padding-right: $gap * 4;
|
||||
|
||||
@include tablet {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue