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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
$support-for-original-webkit-gradients: false
$legacy-support-for-ie: false
$hide-text-direction: right
$default-border-radius: 4px
=retina
@media only screen and (#{-webkit-min-device-pixel-ratio}: #{1.5}), only screen and (#{min-device-pixel-ratio}: #{1.5})
@content
=webkit
@media screen and (-webkit-min-device-pixel-ratio: 0)
@content
// TRICKY GRADIENTS
=gradient-vertical($start-color: #555, $end-color: #333)
@if alpha($start-color) == 1 and alpha($end-color) == 1
background-color: $end-color
+background-image(linear-gradient($start-color, rgba($end-color,0)))
@else
+background-image(linear-gradient($start-color, $end-color))
background-repeat: repeat-x
filter: progid:DXImageTransform.Microsoft.gradient(start-colorstr='#{ie-hex-str($start-color)}', end-colorstr='#{ie-hex-str($end-color)}', GradientType=0)
=gradient-horizontal($start-color: #555, $end-color: #333)
@if alpha($start-color) == 1 and alpha($end-color) == 1
background-color: $end-color
+background-image(linear-gradient(left,$start-color, rgba($end-color,0)))
@else
+background-image(linear-gradient(left,$start-color, $end-color))
background-repeat: repeat-x
filter: progid:DXImageTransform.Microsoft.gradient(start-colorstr='#{ie-hex-str($start-color)}', end-colorstr='#{ie-hex-str($end-color)}', GradientType=1)
=gradient-striped($color, $stripe-color: rgba(white,.15), $angle: -45deg)
background-color: $color
background-image: -webkit-linear-gradient($angle, $stripe-color 25%, transparent 25%, transparent 50%, $stripe-color 50%, $stripe-color 75%, transparent 75%, transparent)
background-image: -moz-linear-gradient($angle, $stripe-color 25%, transparent 25%, transparent 50%, $stripe-color 50%, $stripe-color 75%, transparent 75%, transparent)
background-image: -ms-linear-gradient($angle, $stripe-color 25%, transparent 25%, transparent 50%, $stripe-color 50%, $stripe-color 75%, transparent 75%, transparent)
background-image: -o-linear-gradient($angle, $stripe-color 25%, transparent 25%, transparent 50%, $stripe-color 50%, $stripe-color 75%, transparent 75%, transparent)
background-image: linear-gradient($angle, $stripe-color 25%, $stripe-color 25%, $stripe-color 50%, $stripe-color 50%, $stripe-color 75%, rgba(white,0) 75%, rgba(white,0))
=text-shadow-invert($color: $text-invert, $alpha: 0.5, $x: 0, $y: 1px, $blur: 0)
@if $color == white
text-shadow: rgba(white,$alpha) $x $y $blur
@else if $color == black
text-shadow: rgba(black,$alpha) $x $y $blur
@else
text-shadow: $color $x $y $blur
=none-select
+experimental(user-select, none, -moz, -webkit, not -o, -ms, not -khtml, official)
// -----------------
// Mixins used as Extends. Since its just easier to type +mixin instead of @extend class
// -----------------
// Thin out white fonts on dark backgrounds in webkit
%font-smooth
-webkit-font-smoothing: antialiased
=font-smooth
@extend %font-smooth
// Popover arrows
// -------------------------
// For tipsies and popovers
=arrow-top($arrow-width: 5px, $arrow-color: $black)
bottom: 0
left: 50%
margin-left: -$arrow-width
border-left: $arrow-width solid transparent
border-right: $arrow-width solid transparent
border-top: $arrow-width solid $arrow-color
=arrow-left($arrow-width: 5px, $arrow-color: $black)
top: 50%
right: 0
margin-top: -$arrow-width
border-top: $arrow-width solid transparent
border-bottom: $arrow-width solid transparent
border-left: $arrow-width solid $arrow-color
=arrow-bot($arrow-width: 5px, $arrow-color: $black)
top: 0
left: 50%
margin-left: -$arrow-width
border-left: $arrow-width solid transparent
border-right: $arrow-width solid transparent
border-bottom: $arrow-width solid $arrow-color
=arrow-right($arrow-width: 5px, $arrow-color: $black)
top: 50%
left: 0
margin-top: -$arrow-width
border-top: $arrow-width solid transparent
border-bottom: $arrow-width solid transparent
border-right: $arrow-width solid $arrow-color
// OVERWRITES TO OUTSIDE LIBRARIES
// Clearfix
=clearfix
*zoom: 1
&:before,
&:after
display: table
content: ""
&:after
clear: both
.clearfix
+clearfix
// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be a different size and not have it effect grid size too,
// set the value of $em-base to $base-font-size ($em-base: $base-font-size;)
$em-base: 16px !default
// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
@function em($pxWidth)
@return $pxWidth / $em-base * 1em
=truncate($width)
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
display: block
width: $width
|
