You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
700 lines
15 KiB
700 lines
15 KiB
// variable
|
|
$ui_blue: #024294;
|
|
$ui_blue_hover: #0155BD;
|
|
$ui_blue_more: #0068E6;
|
|
$ui_blue_more80: rgba($color:$ui_blue_more, $alpha: 0.8);
|
|
$ui_blue_more60: rgba($color:$ui_blue_more, $alpha: 0.6);
|
|
$ui_blue_more50: rgba($color:$ui_blue_more, $alpha: 0.5);
|
|
$ui_blue_more40: rgba($color:$ui_blue_more, $alpha: 0.4);
|
|
$ui_blue_more30: rgba($color:$ui_blue_more, $alpha: 0.3);
|
|
$ui_blue_more20: rgba($color:$ui_blue_more, $alpha: 0.2);
|
|
$ui_blue_more12: rgba($color:$ui_blue_more, $alpha: 0.12);
|
|
$ui_blue_more06: rgba($color:$ui_blue_more, $alpha: 0.06);
|
|
$ui_sky: #27D4FF;
|
|
$ui_sky80: rgba($color:$ui_sky, $alpha: 0.8);
|
|
$ui_sky60: rgba($color:$ui_sky, $alpha: 0.6);
|
|
$ui_sky50: rgba($color:$ui_sky, $alpha: 0.5);
|
|
$ui_sky40: rgba($color:$ui_sky, $alpha: 0.4);
|
|
$ui_sky30: rgba($color:$ui_sky, $alpha: 0.3);
|
|
$ui_sky20: rgba($color:$ui_sky, $alpha: 0.2);
|
|
$ui_sky12: rgba($color:$ui_sky, $alpha: 0.12);
|
|
$ui_sky06: rgba($color:$ui_sky, $alpha: 0.06);
|
|
$bg_cluster: rgba(0, 104, 230, 1);
|
|
$fc_normal: #338FFF;
|
|
$fc_normal_more40: rgba($color:$fc_normal, $alpha: 0.4);
|
|
$fc_purple: #937EFF;
|
|
$fc_green: #16D9AB;
|
|
$fc_light_green: #00FF00;
|
|
$fc_code_green:#1CAF93;
|
|
$fc_card_green:#1CBD6D;
|
|
$fc_yellow: #FFE043;
|
|
$fc_yellow_04: #FFBC04;
|
|
$fc_succeses: #00BD78;
|
|
$fc_error: #D60000;
|
|
$bg_default:rgb(10, 11, 20);
|
|
$bg_default04:rgba(10, 11, 20, 0.4);
|
|
$bg_guide: rgb(5, 10, 25);
|
|
$bg_sky30: rgba(39, 212, 255, 0.3);
|
|
$bg_black00: #000;
|
|
$bg_black100: rgba(0, 0, 0, 1);
|
|
$bg_blackde: rgba(0, 0, 0, 0.871);
|
|
$bg_black87: rgba(0, 0, 0, 0.87);
|
|
$bg_blackcc: rgba(0, 0, 0, 0.8);
|
|
$bg_black99: rgba(0, 0, 0, 0.6);
|
|
$bg_black60: rgba(0, 0, 0, 0.6);
|
|
$bg_black40: rgba(0, 0, 0, 0.4);
|
|
$bg_black30: rgba(0, 0, 0, 0.3);
|
|
$bg_black20: rgba(0, 0, 0, 0.2);
|
|
$bg_black16: rgba(0, 0, 0, 0.16);
|
|
$bg_black12: rgba(0, 0, 0, 0.12);
|
|
$bg_black06: rgba(0, 0, 0, 0.06);
|
|
$bg_greye0: #DCDDE0;
|
|
$bg_greyf5: #F0F1F5;
|
|
$bg_grey90: rgba(255, 255, 255, 0.9);
|
|
$bg_greyDE: rgba(255, 255, 255, 0.871);
|
|
$bg_grey87: rgba(255, 255, 255, 0.87);
|
|
$bg_grey80: rgba(255, 255, 255, 0.8);
|
|
$bg_grey99: rgba(255, 255, 255, 0.6);
|
|
$bg_grey60: rgba(255, 255, 255, 0.6);
|
|
$bg_grey50: rgba(255, 255, 255, 0.5);
|
|
$bg_grey40: rgba(255, 255, 255, 0.4);
|
|
$bg_grey38: rgba(255, 255, 255, 0.38);
|
|
$bg_grey30: rgba(255, 255, 255, 0.3);
|
|
$bg_grey20: rgba(255, 255, 255, 0.2);
|
|
$bg_grey16: rgba(255, 255, 255, 0.16);
|
|
$bg_grey12: rgba(255, 255, 255, 0.12);
|
|
$bg_grey10: rgba(255, 255, 255, 0.1);
|
|
$bg_grey06: rgba(255, 255, 255, 0.06);
|
|
$bg_grey00: rgba(255, 255, 255, 0.00);
|
|
$bg_error: #FF1F55;
|
|
$fc_white: #ffffff;
|
|
$fc_999: #999999;
|
|
$fc_222: #222222;
|
|
$fc_default: rgba(255, 255, 255, 0.87);
|
|
|
|
//basic
|
|
@mixin bold {font-weight: bold !important;}
|
|
@mixin clear {&::after{content:"";display:block;clear:both;}}
|
|
|
|
//flex*-/**-
|
|
@mixin dflx{
|
|
display: flex;
|
|
}
|
|
@mixin dflx_as {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
@mixin dflx_ac {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
@mixin dflx_ae {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
@mixin dflx_jbet {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
@mixin dflx_jstart{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
@mixin dflx_jcent{
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
@mixin dflx_jend{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
@mixin dflx_ac_jcent{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
@mixin dflx_ae_jcent {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
@mixin dflx_as_jbet {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
}
|
|
@mixin dflx_ac_jbet {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
@mixin dflx_ae_jbet {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
}
|
|
@mixin dflx_ac_jend {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
@mixin flx_wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
@mixin flx_nowrap {
|
|
flex-wrap: nowrap;
|
|
}
|
|
@mixin dflx_dcol_jbet {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
//font
|
|
@mixin fm_spoqa {
|
|
font-family: 'Spoqa Han Sans Neo', sans-serif;
|
|
}
|
|
@mixin fs_40_bold {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
}
|
|
@mixin fs_40_medium {
|
|
font-size: 2.5rem;
|
|
font-weight: 500;
|
|
}
|
|
@mixin fs_28_bold {
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
}
|
|
@mixin fs_24_bold {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
}
|
|
@mixin fs_24_medium {
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
}
|
|
@mixin fs_20_bold {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
}
|
|
@mixin fs_20_medium {
|
|
font-size: 1.25rem;
|
|
font-weight: 500;
|
|
}
|
|
@mixin fs_18_bold {
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
}
|
|
@mixin fs_18_medium {
|
|
font-size: 1.125rem;
|
|
font-weight: 500;
|
|
}
|
|
@mixin fs_16_bold {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
}
|
|
@mixin fs_16_medium {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
}
|
|
@mixin fs_16_regular {
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
}
|
|
@mixin fs_16_light {
|
|
font-size: 1rem;
|
|
font-weight: 300;
|
|
}
|
|
@mixin fs_15_medium {
|
|
font-size: 0.9375rem;
|
|
font-weight: 500;
|
|
}
|
|
@mixin fs_15_regular {
|
|
font-size: 0.9375rem;
|
|
font-weight: 400;
|
|
}
|
|
@mixin fs_14_bold {
|
|
font-size: 0.875rem;
|
|
font-weight: 700;
|
|
}
|
|
@mixin fs_14_medium {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
@mixin fs_14_regular {
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
}
|
|
@mixin fs_14_light {
|
|
font-size: 0.875rem;
|
|
font-weight: 300;
|
|
}
|
|
@mixin fs_13_medium {
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
}
|
|
@mixin fs_13_regular {
|
|
font-size: 0.8125rem;
|
|
font-weight: 400;
|
|
}
|
|
@mixin fs_13_light {
|
|
font-size: 0.8125rem;
|
|
font-weight: 300;
|
|
}
|
|
@mixin fs_12_bold {
|
|
font-size: 0.75rem !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
@mixin fs_12_medium {
|
|
font-size: 0.75rem !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
@mixin fs_12_regular {
|
|
font-size: 0.75rem;
|
|
font-weight: 400;
|
|
}
|
|
@mixin fs_12_light {
|
|
font-size: 0.75rem;
|
|
font-weight: 300;
|
|
}
|
|
@mixin fs_11_medium {
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
}
|
|
@mixin fs_11_regular {
|
|
font-size: 0.6875rem;
|
|
font-weight: 400;
|
|
}
|
|
@mixin fs_11_light {
|
|
font-size: 0.6875rem;
|
|
font-weight: 300;
|
|
}
|
|
@mixin fs_10_regular {
|
|
font-size: 0.625rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
// button
|
|
@mixin button_options ($width: auto, $fontSize: 8px){
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: $width;
|
|
padding: 0.125rem 0.75rem 0;
|
|
-webkit-border-radius: 8px;
|
|
-moz-border-radius: 8px;
|
|
border-radius: 8px;
|
|
font-size: $fontSize;
|
|
}
|
|
|
|
@mixin button_primary {
|
|
@include button_options;
|
|
background: var(--PRI);
|
|
color: var(--white-w_100);
|
|
border-radius: 8px;
|
|
&:hover:not(.selected):not(.disabled), &.selected, &.hover {
|
|
|
|
}
|
|
&.disabled {
|
|
background: var(--white-w_12);
|
|
box-shadow: inset 0 0 0.75rem rgba(255, 255, 255, 0.1);
|
|
color: var(--white-w_20);
|
|
}
|
|
}
|
|
|
|
@mixin button_secondary {
|
|
@include button_options;
|
|
background: transparent;
|
|
color: var(--PRI);
|
|
border: 1px solid var(--PRI);
|
|
border-radius: 8px;
|
|
|
|
&:hover,&.hover {
|
|
background: var(--white-w_16);
|
|
}
|
|
// &.selected {
|
|
// background: var(--btn-btn_selected);
|
|
// color: var(--white-w_100);
|
|
// }
|
|
&.disabled {
|
|
background: var(--white-w_12);
|
|
border: 1px solid rgba(255, 255, 255, 0.20);
|
|
color: var(--white-w_20);
|
|
}
|
|
}
|
|
|
|
@mixin button_line {
|
|
@include button_options;
|
|
background: transparent;
|
|
color: var(--white-w_87-sec);
|
|
border: 1px solid rgba(255, 255, 255, 0.20);
|
|
border-radius: 8px;
|
|
&:hover,&.hover {
|
|
background: var(--white-w_16);
|
|
}
|
|
// &.selected {
|
|
// background: var(--btn-btn_selected);
|
|
// color: var(--white-w_100);
|
|
// }
|
|
&.disabled {
|
|
background: var(--white-w_12);
|
|
color: var(--white-w_20);
|
|
}
|
|
}
|
|
|
|
@mixin button_floating {
|
|
@include button_options;
|
|
@include backFilter;
|
|
@include box_shadow16;
|
|
background: var(--bg_01_80);
|
|
border: 0.063rem solid var(--line-pri_40-to-wh_40);
|
|
color: var(--white-w_100-sec);
|
|
&:hover:not(.selected):not(.card_selected):not(.hover):not(.disabled), &.hover {
|
|
background: var(--btn-btn_hover);
|
|
border: none;
|
|
box-shadow: inset 0 0 0.75rem rgba(39, 212, 255, 0.5);
|
|
color: var(--white-w_100);
|
|
}
|
|
&.selected{
|
|
background: var(--btn-btn_default);
|
|
border: none;
|
|
box-shadow: inset 0 0 0.75rem #0476FF;
|
|
color: var(--white-w_100);
|
|
}
|
|
&.card_selected{
|
|
background: var(--tab-btn_default);
|
|
border: none;
|
|
box-shadow: inset 0 0 0.75rem #0476FF;
|
|
color: var(--white-w_100);
|
|
}
|
|
&.disabled {
|
|
background: var(--bg_01_80);
|
|
border: 0.063rem solid var(--line-wh_12-to-100);
|
|
box-shadow: none;
|
|
color: var(--white-w_20);
|
|
}
|
|
}
|
|
|
|
@mixin button_ffb {
|
|
@include button_options;
|
|
//@include backFilter;
|
|
@include box_shadow16;
|
|
@include fs_14_medium;
|
|
background: var(--bg_01_80);
|
|
border: 0.063rem solid var(--line-wh_12-to-40);
|
|
color: var(--white-w_87);
|
|
&:hover:not(.selected):not(.disabled),&.hover {
|
|
background: var(--primary-pri_12);
|
|
color: var(--primary-pri_100);
|
|
border: 0.063rem solid var(--line-wh_12-to-40);
|
|
font-weight: 700;
|
|
}
|
|
&.selected {
|
|
background: var(--primary-pri_20);
|
|
border: 0.063rem solid var(--line-wh_12-to-40);
|
|
color: var(--primary-pri_100);
|
|
font-weight: 700;
|
|
}
|
|
&.disabled {
|
|
background: var(--bg_01_40);
|
|
border: 0.063rem solid var(--white-w_12);
|
|
color: var(--white-w_20);
|
|
}
|
|
}
|
|
|
|
@mixin button_ghost {
|
|
@include button_options;
|
|
@include backFilter;
|
|
&:hover {
|
|
background: $bg_grey06;
|
|
}
|
|
&.selected{
|
|
background: transparent;
|
|
color: $ui_sky;
|
|
}
|
|
&.disabled {
|
|
background: transparent;
|
|
color: $bg_grey38;
|
|
}
|
|
}
|
|
|
|
@mixin button_default {
|
|
@include border_radius02;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
@mixin button_outline {
|
|
@include border_radius02;
|
|
height: 1.5rem;
|
|
border: 0.063rem solid #CBCBCB;
|
|
}
|
|
|
|
//etc
|
|
@mixin input_type {
|
|
@include border_radius04;
|
|
height: 3rem;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
@mixin search_type {
|
|
@include border_radius04;
|
|
height: 2rem;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
@mixin form_outline {
|
|
@include border_radius05;
|
|
border: 0.063rem solid #DDDDDD;
|
|
box-shadow: 0.063rem 0.063rem 0.75rem #00000029;
|
|
background: $ui_blue;
|
|
}
|
|
|
|
@mixin mouseover_bg($border: 0.125rem, $speed: 0.2s, $shadow: 0 0.375rem 0.75rem #00000029) {
|
|
border: $border solid #0068E6;
|
|
background: #0068E61A 0% 0% no-repeat padding-box;
|
|
box-shadow: $shadow;
|
|
transition: ease-in $speed;
|
|
}
|
|
|
|
@mixin backFilter($blur: 1.875rem){
|
|
-webkit-backdrop-filter: blur($blur);
|
|
backdrop-filter: blur($blur);
|
|
}
|
|
|
|
@mixin backFilter_none {
|
|
-webkit-backdrop-filter: none;
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
@mixin border_radius50 {
|
|
-webkit-border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
@mixin border_radius10 {
|
|
-webkit-border-radius: 0.625rem;
|
|
-moz-border-radius: 0.625rem;
|
|
border-radius: 0.625rem;
|
|
}
|
|
|
|
@mixin border_radius06 {
|
|
-webkit-border-radius: 0.375rem;
|
|
-moz-border-radius: 0.375rem;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
@mixin border_radius05 {
|
|
-webkit-border-radius: 0.3125rem;
|
|
-moz-border-radius: 0.3125rem;
|
|
border-radius: 0.3125rem;
|
|
}
|
|
|
|
@mixin border_radius04 {
|
|
-webkit-border-radius: 0.25rem;
|
|
-moz-border-radius: 0.25rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
@mixin border_radius03 {
|
|
-webkit-border-radius: 0.1875rem;
|
|
-moz-border-radius: 0.1875rem;
|
|
border-radius: 0.1875rem;
|
|
}
|
|
|
|
@mixin border_radius02 {
|
|
-webkit-border-radius: 0.125rem;
|
|
-moz-border-radius: 0.125rem;
|
|
border-radius: 0.125rem;
|
|
}
|
|
|
|
@mixin border_radius00 {
|
|
-webkit-border-radius: 0;
|
|
-moz-border-radius: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
@mixin selector_el {
|
|
position: absolute;
|
|
content: '';
|
|
}
|
|
|
|
@mixin layout_acjc {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@mixin layout_acjb {
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@mixin row_box {
|
|
width: 66.875rem;
|
|
max-width: 66.875rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@mixin bg_blur30 {
|
|
backdrop-filter: blur(1.875rem);
|
|
}
|
|
|
|
@mixin bg_blur20 {
|
|
backdrop-filter: blur(1.25rem);
|
|
}
|
|
|
|
@mixin bg_blur10 {
|
|
backdrop-filter: blur(0.625rem);
|
|
}
|
|
|
|
// shadow
|
|
@mixin box_shadow16 {
|
|
box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16);
|
|
}
|
|
|
|
@mixin popup_shadow {
|
|
box-shadow: 0.75rem 0.75rem 1.5rem 0 rgba(4, 9, 26, 0.20);
|
|
}
|
|
|
|
//trans_center
|
|
@mixin ab_trans_center {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
//text_overflow
|
|
@mixin txt_ellip {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
//box
|
|
@mixin box1 {
|
|
width: 100%;
|
|
background-color: var(--bg_01_80);
|
|
border: 0.063rem solid var(--line-pri_40-to-wh_40);
|
|
backdrop-filter: blur(1.875rem);
|
|
}
|
|
|
|
@mixin dashbox {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
overflow: hidden;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-radius: 0.125rem;
|
|
}
|
|
|
|
@mixin square {
|
|
display: inline-block;
|
|
width: 0.625rem;
|
|
height: 0.625rem;
|
|
background-color: $ui_blue_more;
|
|
}
|
|
|
|
//btn
|
|
@mixin btn {
|
|
//background-color: #0068e6;
|
|
background-color: rgba(0, 104, 230, 0.6);
|
|
box-shadow: 0 0 0.75rem 0 inset #0068e6;
|
|
border-radius:0.1875rem;
|
|
&:hover {
|
|
background: #0155BD;
|
|
box-shadow: inset 0 0 0.75rem rgba(39, 212, 255, 0.5);
|
|
}
|
|
}
|
|
|
|
//tod
|
|
@mixin tod_contain{
|
|
display: grid;
|
|
grid-template-columns: 5rem auto;
|
|
grid-auto-rows: minmax(3.375rem, auto);
|
|
gap: 0.125rem;
|
|
}
|
|
|
|
@mixin tod_block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
padding:0.125rem;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
line-height: 1;
|
|
letter-spacing: 0.038rem;
|
|
text-align: center;
|
|
}
|
|
|
|
//circle
|
|
@mixin circle28{
|
|
@include dflx_ac_jcent;
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
overflow: hidden;
|
|
border-radius: 100%;
|
|
+ .word{
|
|
@include fs_12_regular;
|
|
}
|
|
}
|
|
|
|
@mixin circle32{
|
|
@include dflx_ac_jcent;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
overflow: hidden;
|
|
border-radius: 100%;
|
|
+ .word{
|
|
@include fs_14_regular;
|
|
}
|
|
}
|
|
|
|
// label
|
|
@mixin numberDefault($width: 1rem, $height: 1rem, $fs: 0.875rem){
|
|
width: $width;
|
|
height: $height;
|
|
font-size: $fs;
|
|
line-height: $height;
|
|
}
|
|
|
|
// position
|
|
@mixin absolutePos{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
//backdrop-filter solve
|
|
@mixin backFilter_solve{
|
|
&::before{
|
|
content: '';
|
|
z-index: -1;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
backdrop-filter: blur(1.875rem);
|
|
}
|
|
}
|
|
|
|
//filter
|
|
@mixin filter_black {
|
|
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
|
|
}
|
|
@mixin filter_blue {
|
|
filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
|
|
}
|
|
@mixin filter_black01 {
|
|
filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(150deg) brightness(101%) contrast(102%);
|
|
}
|
|
@mixin filter_grey {
|
|
filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
|
|
}
|
|
@mixin filter_white {
|
|
filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
|
|
}
|