156 lines
4.8 KiB
SCSS
156 lines
4.8 KiB
SCSS
.neomorph {
|
|
box-shadow: -8px -8px 16px var(--light-shadow), 8px 8px 16px var(--dark-shadow);
|
|
|
|
&Small {
|
|
box-shadow: -6px -6px 12px var(--light-shadow), 6px 6px 12px var(--dark-shadow);
|
|
}
|
|
|
|
&XSmall {
|
|
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
|
|
}
|
|
|
|
&XXSmall {
|
|
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
|
|
}
|
|
|
|
&Bottom {
|
|
filter: drop-shadow(8px 8px 14px var(--primary-color-dark));
|
|
}
|
|
|
|
&Inset {
|
|
box-shadow: inset 8px 8px 16px var(--dark-shadow), inset -8px -8px 16px var(--light-shadow);
|
|
|
|
&Small {
|
|
box-shadow: inset 6px 6px 12px var(--dark-shadow), inset -6px -6px 12px var(--light-shadow);
|
|
}
|
|
|
|
&XSmall {
|
|
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
|
}
|
|
|
|
&XXSmall {
|
|
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
|
}
|
|
}
|
|
}
|
|
|
|
.neo {
|
|
&Btn {
|
|
background: linear-gradient(145deg,var(--primary-gradiend-light),var(--primary-gradiend-dark));
|
|
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
|
|
border: none !important;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
|
|
&:focus {
|
|
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow) !important;
|
|
border: none !important;
|
|
}
|
|
|
|
&InsetPlain {
|
|
background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light));
|
|
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
|
border: none !important;
|
|
|
|
&:focus {
|
|
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow) !important;
|
|
border: none !important;
|
|
}
|
|
}
|
|
|
|
&Small {
|
|
background: linear-gradient(145deg,var(--primary-gradiend-light),var(--primary-gradiend-dark));
|
|
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
|
|
border: none !important;
|
|
|
|
|
|
&:focus {
|
|
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
|
|
border: none !important;
|
|
|
|
&:not(:active) {
|
|
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
|
|
}
|
|
}
|
|
|
|
&InsetPlain {
|
|
background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light));
|
|
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
|
border: none !important;
|
|
|
|
&:focus {
|
|
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow) !important;
|
|
border: none !important;
|
|
}
|
|
}
|
|
|
|
&XInsetPlain {
|
|
background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light));
|
|
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
|
border: none !important;
|
|
|
|
&:focus {
|
|
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow) !important;
|
|
border: none !important;
|
|
}
|
|
}
|
|
|
|
&Plain {
|
|
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
|
|
border: none !important;
|
|
|
|
&:focus {
|
|
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow) !important;
|
|
border: none !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&File {
|
|
box-shadow: 0px 0px 0px var(--light-shadow), 0px 0px 0px var(--dark-shadow) !important;
|
|
transition: all .2s linear;
|
|
-webkit-backface-visibility: hidden !important;
|
|
backface-visibility: hidden !important;
|
|
|
|
@include MediaQuery(phone) {
|
|
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow) !important;
|
|
background: var(--primary-color) !important;
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow) !important;
|
|
}
|
|
|
|
&.isSelected {
|
|
background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light));
|
|
box-shadow: inset 3px 3px 6px var(--dark-shadow),inset -3px -3px 6px var(--light-shadow) !important;
|
|
}
|
|
|
|
&.is-active, &.active {
|
|
box-shadow: inset 3px 3px 6px var(--dark-shadow),inset -3px -3px 6px var(--light-shadow) !important;
|
|
color: var(--black) !important;
|
|
}
|
|
}
|
|
|
|
&Input {
|
|
box-shadow: inset 2px 2px 4px var(--dark-shadow),inset -2px -2px 4px var(--light-shadow) !important;
|
|
background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light));
|
|
border: none !important;
|
|
|
|
&:focus {
|
|
border: none !important;
|
|
}
|
|
}
|
|
|
|
&Select > select {
|
|
box-shadow: inset 2px 2px 4px var(--dark-shadow),inset -2px -2px 4px var(--light-shadow) !important;
|
|
background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light)) !important;
|
|
border: none !important;
|
|
|
|
&:focus {
|
|
border: none !important;
|
|
}
|
|
}
|
|
}
|