66 lines
1.6 KiB
SCSS
66 lines
1.6 KiB
SCSS
@import "compass/css3";
|
|
|
|
//Variables here:
|
|
//(alongside with commented suggestions)
|
|
$foreground-color:#b85b3f;//black;
|
|
$background-color:#e8e3c7;//white
|
|
$shadow-color:#ba9186;//$foreground-color;
|
|
$distance:8px;
|
|
$cut-distance:3px;//$distance/4;
|
|
$strips-size:6px; //10px
|
|
$strips-ratio:50%;//70%
|
|
$strips-angle:45deg;//90deg;
|
|
|
|
//cray stuff yo. be sure to try (if you please)
|
|
$animate:false;//true
|
|
$fixed:false;//true
|
|
|
|
.dashed-shadow{
|
|
position:relative;
|
|
top:$distance;
|
|
left:$distance;
|
|
display:inline-block;
|
|
color:$shadow-color;
|
|
}
|
|
.dashed-shadow:before{
|
|
content:" ";
|
|
display:block;
|
|
|
|
position:absolute;
|
|
$bleeding-horizontal:10px;
|
|
$bleeding-vertical:0px;
|
|
top:-$bleeding-vertical - $distance;
|
|
left:-$bleeding-vertical - $distance;
|
|
bottom:-$bleeding-horizontal + $distance;
|
|
right:-$bleeding-horizontal + $distance;
|
|
z-index:1;
|
|
$color:$background-color;
|
|
$size:$strips-ratio/2;
|
|
$halfSize:$size/2;
|
|
$p1:$halfSize;
|
|
$p2:50%-$halfSize;
|
|
$p3:50%+$halfSize;
|
|
$p4:100%-$halfSize;
|
|
$transparent:transparentize($color,1);
|
|
@include background-image(linear-gradient($strips-angle,$color $p1, $transparent $p1, $transparent $p2,$color $p2, $color $p3, $transparent $p3, $transparent $p4, $color $p4));
|
|
background-size:$strips-size $strips-size;
|
|
@if($animate){
|
|
animation:dash-animation 30s infinite linear;
|
|
}
|
|
@if($fixed){
|
|
background-attachment:fixed;
|
|
}
|
|
}
|
|
.dashed-shadow:hover:before{
|
|
animation:dash-animation 30s infinite linear;
|
|
}
|
|
|
|
.dashed-shadow:after{
|
|
z-index:2;
|
|
content:attr(data-text);
|
|
position:absolute;
|
|
left:-$distance;
|
|
top:-$distance;
|
|
color:$foreground-color;
|
|
text-shadow:$cut-distance $cut-distance $background-color;
|
|
}
|