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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
/*******************************
Icon
*******************************/
/*--------------
Font Files
---------------*/
/* Solid Icons */
@fontName: 'icons';
@src:
url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'),
url("@{fontPath}/@{fontName}.woff2") format('woff2'),
url("@{fontPath}/@{fontName}.woff") format('woff'),
url("@{fontPath}/@{fontName}.ttf") format('truetype'),
url("@{fontPath}/@{fontName}.svg#icons") format('svg')
;
@fallbackSRC: url("@{fontPath}/@{fontName}.eot");
/* Outline Icons */
@importOutlineIcons: true;
@outlineFontName: 'outline-icons';
@outlineSrc:
url("@{fontPath}/@{outlineFontName}.eot?#iefix") format('embedded-opentype'),
url("@{fontPath}/@{outlineFontName}.woff2") format('woff2'),
url("@{fontPath}/@{outlineFontName}.woff") format('woff'),
url("@{fontPath}/@{outlineFontName}.ttf") format('truetype'),
url("@{fontPath}/@{outlineFontName}.svg#icons") format('svg')
;
@outlineFallbackSRC: url("@{fontPath}/@{outlineFontName}.eot");
/* Brand Icons */
@importBrandIcons: true;
@brandFontName: 'brand-icons';
@brandSrc:
url("@{fontPath}/@{brandFontName}.eot?#iefix") format('embedded-opentype'),
url("@{fontPath}/@{brandFontName}.woff2") format('woff2'),
url("@{fontPath}/@{brandFontName}.woff") format('woff'),
url("@{fontPath}/@{brandFontName}.ttf") format('truetype'),
url("@{fontPath}/@{brandFontName}.svg#icons") format('svg')
;
@brandFallbackSRC: url("@{fontPath}/@{brandFontName}.eot");
/*--------------
Definition
---------------*/
/* Icon Variables */
@opacity: 1;
@width: @iconWidth;
@height: 1em;
@distanceFromText: 0.25rem;
@lineHeight: 1;
/* Variations */
@linkOpacity: 0.8;
@linkDuration: 0.3s;
@loadingDuration: 2s;
@circularSize: 2em;
@circularPadding: 0.5em 0;
@circularShadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset;
@borderedSize: 2em;
@borderedVerticalPadding: ((@borderedSize - @height) / 2);
@borderedHorizontalPadding: 0;
@borderedShadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset;
@cornerIconSize: 0.45em;
@cornerIconStroke: 1px;
@cornerIconShadow:
-@cornerIconStroke -@cornerIconStroke 0 @white,
@cornerIconStroke -@cornerIconStroke 0 @white,
-@cornerIconStroke @cornerIconStroke 0 @white,
@cornerIconStroke @cornerIconStroke 0 @white
;
@cornerIconInvertedShadow:
-@cornerIconStroke -@cornerIconStroke 0 @black,
@cornerIconStroke -@cornerIconStroke 0 @black,
-@cornerIconStroke @cornerIconStroke 0 @black,
@cornerIconStroke @cornerIconStroke 0 @black
;
@mini: 0.4em;
@tiny: 0.5em;
@small: 0.75em;
@medium: 1em;
@large: 1.5em;
@big: 2em;
@huge: 4em;
@massive: 8em;
|