ESPTerm web interface submodule, separated to make testing and development easier
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
espterm-front-end/sass/utils/_background-tiling.scss

69 lines
1.3 KiB

// Utilities for background tiling
// Use a tile as background (w, h - size of time)
@mixin tile_xy($w, $h, $x, $y) {
background-position: (-$x*$w) (-$y*$h);
}
// Use a square tile as background (size - w & h of time)
@mixin tile($size, $x, $y) {
@include tile_xy($size, $size, $x, $y);
}
// Button with sprite-sheet
// A B
// B:hover B:hover
@mixin tile_btn_h($w, $h, $x) {
@include tile_xy($w, $h, $x, 0);
&:hover {
@include tile_xy($w, $h, $x, 1);
}
}
// active the same as hover
@mixin tile_btn_h_act($w, $h, $x) {
@include tile_xy($w, $h, $x, 0);
&:hover, &.active {
@include tile_xy($w, $h, $x, 1);
}
}
// Button with sprite-sheet
// A A:hover
// B B:hover
@mixin tile_btn_v($w, $h, $y) {
@include tile_xy($w, $h, 0, $y);
&:hover {
@include tile_xy($w, $h, 1, $y);
}
}
// active the same as hover
@mixin tile_btn_v_act($w, $h, $y) {
@include tile_xy($w, $h, 0, $y);
&:hover, &.active {
@include tile_xy($w, $h, 1, $y);
}
}
@mixin inset-shadow-top($w, $c) {
box-shadow: inset 0 $w ($w*2) (-$w) $c;
}
@mixin inset-shadow-bottom($w, $c) {
box-shadow: inset 0 (-$w) ($w*2) (-$w) $c;
}
@mixin inset-shadow-left($w, $c) {
box-shadow: inset $w 0 ($w*2) (-$w) $c;
}
@mixin inset-shadow-right($w, $c) {
box-shadow: inset (-$w) 0 ($w*2) (-$w) $c;
}