59 lines
1.3 KiB
SCSS
59 lines
1.3 KiB
SCSS
// mixin svg fallback
|
|
@mixin svg(
|
|
$file-name,
|
|
$css-img-path: $css-img-path)
|
|
{
|
|
background-image: inline-image($file-name+'.png');
|
|
background-image: inline-image($file-name+'.svg'), none;
|
|
}
|
|
|
|
@mixin bg-with-svg(
|
|
$file-name,
|
|
$css-img-path: $css-img-path,
|
|
$repeat: no-repeat,
|
|
$position: 50% 50%,
|
|
$bg-color: transparent)
|
|
{
|
|
background: inline-image($file-name+'.png') $repeat, $position, $bg-color;
|
|
background-image: inline-image($file-name+'.svg'), none;
|
|
}
|
|
|
|
// Mix from Nico3333 (https://github.com/nico3333fr/ROCSSTI/blob/master/src/css/rocssti-fr.css#L637)
|
|
// and ffood (http://www.ffoodd.fr/cache-cache-css/)
|
|
@mixin visually-hidden {
|
|
border: 0;
|
|
clip: rect(0 0 0 0);
|
|
clip-path: inset(50%);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
width: 1px;
|
|
white-space: nowrap;
|
|
}
|
|
@mixin visually-hidden-focus {
|
|
clip: auto;
|
|
clip-path: none;
|
|
height: auto;
|
|
overflow: visible;
|
|
position: static;
|
|
width: auto;
|
|
white-space: normal;
|
|
}
|
|
|
|
// Remove any unit from a value
|
|
@function strip-unit(
|
|
$value)
|
|
{
|
|
@return $value / ($value * 0 + 1);
|
|
}
|
|
|
|
// Compute absolute value (in em or rem) depending on font-size of the html element (given in %)
|
|
@function relative-to-screen(
|
|
$value, // em or rem value
|
|
$html-font-size) // in %
|
|
{
|
|
@return $value / (strip-unit($html-font-size) / 100);
|
|
}
|