60 lines
1.1 KiB
SCSS
60 lines
1.1 KiB
SCSS
|
@import 'functions';
|
||
|
|
|
||
|
|
// Responsive
|
||
|
|
// ==================
|
||
|
|
@mixin up($size) {
|
||
|
|
$size: strip-unit($size);
|
||
|
|
@media (min-width: $size * 1px) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@mixin down($size) {
|
||
|
|
$size: strip-unit($size);
|
||
|
|
@media (max-width: $size * 1px) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@mixin between($down, $up) {
|
||
|
|
$down: strip-unit($down);
|
||
|
|
$up: strip-unit($up);
|
||
|
|
@media (min-width: $down * 1px) and (max-width: $up * 1px) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Espacement
|
||
|
|
// ==================
|
||
|
|
@mixin container($width, $padding) {
|
||
|
|
width: 100%;
|
||
|
|
padding-left: $padding;
|
||
|
|
padding-right: $padding;
|
||
|
|
|
||
|
|
@include up($width + 2 * $padding) {
|
||
|
|
padding-left: calc(50vw - #{$width / 2});
|
||
|
|
padding-right: calc(50vw - #{$width / 2});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@mixin no-scroll {
|
||
|
|
scrollbar-width: none;
|
||
|
|
&::-webkit-scrollbar {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin color-scroll($back, $up) {
|
||
|
|
scrollbar-color: $up $back;
|
||
|
|
&::-webkit-scrollbar {
|
||
|
|
height: 5px;
|
||
|
|
|
||
|
|
// background-color: $back;
|
||
|
|
}
|
||
|
|
&::-webkit-scrollbar-track {
|
||
|
|
background-color: $back;
|
||
|
|
}
|
||
|
|
&::-webkit-scrollbar-thumb {
|
||
|
|
background-color: $up;
|
||
|
|
}
|
||
|
|
}
|