_pictos.scss
2.03 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
$pictos-background-default: white !default;
$pictos-default-border: null !default;
$pictos-default-gradient: null !default;
@mixin pictos($character,
$color: #fff,
$size: 24px,
$glow: null, // (shadow 1)
$border-color: $pictos-default-border,
$border-color-over: $border-color,
$border-color-active: $border-color,
$color-hover: $bright-color,
$gradient: matte,
$gradient-over: $gradient,
$gradient-active: recessed,
$glow-hover: $bright-color 0 0 10px,
$glow-active: $glow-hover,
$shadow: rgba(#000, .5) 0 1px 1px,
$include-states: true
) {
@include background-clip(text);
overflow: visible;
@include text-shadow(rgba(#fff, .15) 0 1px 0);
position: relative;
height: $size;
line-height: $size;
&:after, &:before {
@extend .base-pictos;
font-size: $size;
content: $character;
@if $border-color != null {
-webkit-text-stroke: 1px $border-color;
}
@include background-gradient($color, $gradient);
}
&:before {
@include background-clip(padding-box);
background: none;
}
@if $include-states {
&:hover {
@if $border-color-over != null {
-webkit-text-stroke: 1px $border-color-over;
}
&:before {
@include text-shadow($shadow, $glow-hover);
}
&:after {
@include background-gradient($color-hover, $gradient-over);
}
}
&:active {
@if $border-color-active != null {
-webkit-text-stroke: 1px $bright-color;
}
top: 1px;
&:before {
@include text-shadow($shadow, $glow-active);
}
&:after {
@include background-gradient($bright-color, $gradient-active);
}
}
}
}
.base-pictos {
font-family: Pictos;
color: transparent;
@include background-clip(text);
position: absolute;
top: 0;
left: 0;
}