forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
75 lines
1.8 KiB
SCSS
75 lines
1.8 KiB
SCSS
@import "svg-sprite";
|
|
|
|
$html-font-size: 16px;
|
|
|
|
@function stripUnit($value) {
|
|
@return $value / ($value * 0 + 1);
|
|
}
|
|
|
|
@function rem($pxValue) {
|
|
@return math.div(stripUnit($pxValue), stripUnit($html-font-size)) * 1rem;
|
|
}
|
|
|
|
@function capitalize($string) {
|
|
@return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2);
|
|
}
|
|
|
|
@function icon($name) {
|
|
@return url(map-get($sprites, $name));
|
|
}
|
|
|
|
@mixin visually-hidden {
|
|
position: absolute !important;
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
overflow: hidden;
|
|
height: 1px;
|
|
width: 1px;
|
|
word-wrap: normal;
|
|
}
|
|
|
|
@mixin color-pattern {
|
|
background-color: var(--gin-pattern-fallback);
|
|
background-image:
|
|
linear-gradient(-45deg, var(--gin-pattern) 25%, transparent 26%),
|
|
linear-gradient(-45deg, var(--gin-pattern) 25%, transparent 26%),
|
|
linear-gradient(135deg, var(--gin-pattern) 25%, transparent 26%),
|
|
linear-gradient(135deg, var(--gin-pattern) 25%, transparent 26%);
|
|
background-position:
|
|
0 0,
|
|
var(--gin-pattern-square) var(--gin-pattern-square),
|
|
var(--gin-pattern-square) var(--gin-pattern-square),
|
|
0 0;
|
|
background-size: calc(var(--gin-pattern-square) * 2) calc(var(--gin-pattern-square) * 2);
|
|
|
|
@media screen and (-ms-high-contrast: active) {
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
@mixin custom-icon-button($name) {
|
|
all: unset;
|
|
|
|
background-color: white;
|
|
background-image: icon($name);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 15px 15px;
|
|
|
|
border-radius: 50%;
|
|
border-color: transparent !important;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
|
|
|
color: transparent;
|
|
width: 29px;
|
|
height: 29px;
|
|
margin: var(--gin-spacing-s);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: white;
|
|
border-color: var(--gin-color-primary) !important;
|
|
color: transparent;
|
|
cursor: pointer;
|
|
}
|
|
}
|