-
Notifications
You must be signed in to change notification settings - Fork 2.3k
/
_demo.sass
228 lines (185 loc) · 4.4 KB
/
_demo.sass
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
// For demo purposes only
.demo-headline
padding: 73px 0 110px
text-align: center
.demo-logo
font-size: 90px
font-weight: 900
letter-spacing: -2px
line-height: 100px
.logo
background: url('../images/demo/logo-mask.png') center 0 no-repeat
background-size: 256px 186px
height: 186px
margin: 0 auto 26px
overflow: hidden
text-indent: -9999em
width: 256px
small
color: rgba($base, .3)
display: block
font-size: 22px
font-weight: 700
letter-spacing: -1px
padding-top: 5px
// Panels delimiter
.demo-row
margin-bottom: 20px
.demo-panel-title
margin-bottom: 20px
padding-top: 20px
small
color: scale-color(desaturate($base, 25%), $lightness: 66%)
font-size: inherit
font-weight: 400
// Shift blocks to fit design
.demo-navigation
margin-bottom: -4px
margin-top: -10px
.demo-pager
margin-top: -10px
.demo-tooltips
height: 126px
// Needed just for the demo. Don't use it in producion ;)
.tooltip
left: -8px !important
position: relative !important
top: -8px !important
.demo-headings
margin-bottom: 12px
.demo-tiles
margin-bottom: 46px
.demo-icons
margin-bottom: 115px
.demo-icons-24
font-size: 24px
margin-bottom: 38px
position: relative
span
margin: 0 0 0 18px
&:first-child
margin-left: 0
.demo-icons-16
font-size: 16px
margin: 0 0 38px 5px
position: relative
span
margin: 0 0 0 28px
&:first-child
margin-left: 0
.demo-icons-tooltip
bottom: 0
color: scale-color($base, $lightness: 70%)
font-size: 12px
left: 100%
margin-left: 0 !important
position: absolute
width: 80px
.demo-illustrations
margin-bottom: 45px
img
height: 100px
margin-left: 35px
width: 100px
vertical-align: bottom
&:first-child
margin-left: 0
&.big-illustration
height: 111px
width: 112px
&.big-retina-illustration
height: 104px
margin-right: -24px
width: 117px
&.big-illustration-pusher
margin-right: 12px
.demo-samples
margin-bottom: 46px
.demo-video
border-radius: 6px
padding-top: 95px
.demo-download-section
float: none
margin: 0 auto
padding: 60px 0 90px 20px
text-align: center
[class*='fui-']
margin: 3px 0 -3px
.demo-download
background-color: scale-color($base, $lightness: 90%)
border-radius: 50%
height: 120px
margin: 0 auto 32px
padding: 40px 28px 30px 32px
text-align: center
width: 130px
img
height: 104px
width: 82px
.demo-download-text
font-size: 15px
padding: 20px 0
text-align: center
.demo-text-box
a:hover
color: $firm
.demo-browser
background: scale-color($base, $lightness: -15%) url('../images/demo/browser.png') 0 0 no-repeat
background-size: 659px 42px
border-radius: 0 0 6px 6px
color: $inverse
margin: 0 41px 140px 0
padding-top: 42px
.demo-browser-side
float: left
padding: 22px 20px
width: 111px
> h5
margin-bottom: 3px
text-transform: none
> h6
font-size: 11px
font-weight: 300
line-height: 18px
margin-top: 3px
text-transform: none
.demo-browser-author
background: url('../images/demo/browser-author.jpg') center center no-repeat
border: 3px solid $inverse
display: block
height: 84px
margin: 0 auto
width: 84px
+border-radius(50%)
.demo-browser-action
padding: 30px 0 12px
> .btn
padding: 9px 0 10px 11px
text-align: left
+border-radius(3px)
&:before
color: $inverse
content: '\e004'
font-size: 16px
font-family: 'Flat-UI-Icons-16'
font-weight: 300
margin-right: 12px
position: relative
top: 1px
-webkit-font-smoothing: antialiased
.demo-browser-content
background-color: $base
border-radius: 0 0 6px
overflow: hidden
padding: 21px 0 0 20px
> img
border: 6px solid $inverse
float: left
margin: 0 15px 20px 0
width: 134px
// Serving 2x images
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2)
.logo
background-image: url('../images/demo/logo-mask-2x.png')
.demo-browser
background-image: url('../images/demo/browser-2x.png')