Seenginx/Seenginx/SCSS/utility.scss

125 lines
2.8 KiB
SCSS

.isHidden {
display: none;
&Mobile {
@include MediaQuery(phone) {
display: none
}
}
}
.petiteCaps {
font-variant: petite-caps
}
.flexCenter {
display: flex;
align-content: center;
align-items: center
}
.no {
&BottomMargin {
margin-bottom: 0 !important;
}
}
.is {
&NoWrap {
white-space: nowrap
}
&Finger {
cursor: pointer
}
}
.neomorph {
/*box-shadow: 0px 0px 4px 4px rgba($background, 1), -8px -8px 16px rgba($light-shadow, 1), 8px 8px 16px rgba($dark-shadow, 1);*/
box-shadow: -8px -8px 16px rgba($light-shadow, .5), 8px 8px 16px rgba($dark-shadow, .5);
&Small {
/*box-shadow: 0px 0px 3px 3px rgba($background, 1), -6px -6px 12px rgba($light-shadow, 1), 6px 6px 12px rgba($dark-shadow, 1);*/
box-shadow: -6px -6px 12px rgba($light-shadow, .5), 6px 6px 12px rgba($dark-shadow, .5);
}
&Bottom {
filter: drop-shadow(8px 8px 14px rgba($dark-shadow, 1));
}
&Inset {
box-shadow: inset 8px 8px 16px rgba($dark-shadow, .5), inset -8px -8px 16px rgba($light-shadow, .5);
&Small {
box-shadow: inset 6px 6px 12px rgba($dark-shadow, .5), inset -6px -6px 12px rgba($light-shadow, .5);
}
}
}
.neo {
&Btn {
box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5);
background: none !important;
border: none !important;
transition: all .2s linear;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
&:focus {
box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5) !important;
}
&:hover {
box-shadow: -6px -6px 12px rgba($light-shadow, .5), 6px 6px 12px rgba($dark-shadow, .5);
background: none !important;
border: none !important;
transform: scale(1.1);
}
}
&File {
box-shadow: 0px 0px 0px rgba($light-shadow, .5), 0px 0px 0px rgba($dark-shadow, .5) !important;
transition: all .2s linear;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
background: $background !important;
&:hover {
box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5) !important;
}
&.isSelected {
box-shadow: inset 3px 3px 6px rgba($dark-shadow, .5),inset -3px -3px 6px rgba($light-shadow, .5) !important;
}
&.is-active, &.active {
box-shadow: inset 3px 3px 6px rgba($dark-shadow, .5),inset -3px -3px 6px rgba($light-shadow, .5) !important;
color: $color-black !important;
}
}
}
.gradientBackground {
background: linear-gradient(to right bottom,$background-light,$background-dark)
}
.borderR {
border-radius: $border-radius;
&Small {
border-radius: $border-radius-s !important;
}
&Big {
border-radius: $border-radius-b;
}
}
.bg {
background: $background
}
.sameMarginBottom {
margin-bottom: 1rem !important
}