90 lines
1.7 KiB
SCSS
90 lines
1.7 KiB
SCSS
/*
|
|
!!! IMPORTANT !!!
|
|
|
|
AN INPUT ELEMENT MUST BE SURROUNDED WITH A
|
|
LABEL ELEMENT FOR THIS TO WORK BECAUSE INPUT
|
|
ELEMENTS CANNOT TAKE PSEUDO ELEMENTS LIKE
|
|
:BEFORE AND :AFTER
|
|
|
|
THIS IS THEN USED ON THE LABEL ELEMENT!
|
|
*/
|
|
@mixin search-symbol-button(
|
|
$size,
|
|
$background-color,
|
|
$symbol-color
|
|
) {
|
|
//----------------------------------------
|
|
// Calculate the symbols'
|
|
// line thickness
|
|
$border-size: $size/10;
|
|
// Calculate the glass'
|
|
// size
|
|
$glass-size: $size/2;
|
|
// Calculate the tilt'
|
|
// width & height
|
|
//$stick-size: $size/4;
|
|
//
|
|
//$stick-tilt-size: ($stick-size/1.4142) + ($border-size / 2);
|
|
//$tilt-connection: ($glass-size*0.7853) + ($border-size / 2);
|
|
//
|
|
//$glass-tilt-size: $tilt-connection + $stick-tilt-size;
|
|
//
|
|
//$symbol-gutter: ($size - $glass-tilt-size)/2;
|
|
|
|
//----------------------------------------
|
|
// Start actual Styling
|
|
//----------------------------------------
|
|
position: relative;
|
|
|
|
top: 0;
|
|
left: 0;
|
|
|
|
width: $size;
|
|
height: $size;
|
|
|
|
border: none;
|
|
border-radius: $size;
|
|
|
|
background-color: $background-color;
|
|
|
|
&:before {
|
|
content: "";
|
|
display: block;
|
|
box-sizing: border-box;
|
|
|
|
position: absolute;
|
|
|
|
bottom:$size / 5;
|
|
left: $size / 3.75;
|
|
|
|
width: 0;
|
|
height: $size/4;
|
|
|
|
border-left: solid $border-size $symbol-color;
|
|
|
|
transform: rotate(45deg);
|
|
|
|
z-index: 10000;
|
|
}
|
|
|
|
&:after {
|
|
content: "";
|
|
display: block;
|
|
box-sizing: border-box;
|
|
|
|
position: absolute;
|
|
|
|
left: $size /3;
|
|
top: $size /6.667;
|
|
|
|
width: $glass-size;
|
|
height: $glass-size;
|
|
|
|
border: solid $border-size $symbol-color;
|
|
border-radius: $glass-size;
|
|
|
|
transform: rotate(45deg);
|
|
|
|
z-index: 10000;
|
|
}
|
|
} |