ellipsis-compass 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. checksums.yaml +15 -0
  2. data/lib/ellipsis-compass.rb +4 -0
  3. data/stylesheets/animation/_animate.scss +1206 -0
  4. data/stylesheets/animation/_animation.scss +121 -0
  5. data/stylesheets/animation/_animations.scss +771 -0
  6. data/stylesheets/animation/_transit.scss +425 -0
  7. data/stylesheets/animation/_transitions.scss +320 -0
  8. data/stylesheets/base/_breakpoints.scss +64 -0
  9. data/stylesheets/base/_document.scss +219 -0
  10. data/stylesheets/base/_global.scss +88 -0
  11. data/stylesheets/base/_normalize.scss +406 -0
  12. data/stylesheets/component/_component.scss +939 -0
  13. data/stylesheets/component/_ui.scss +955 -0
  14. data/stylesheets/flexbox/_flexbox.scss +305 -0
  15. data/stylesheets/font/_icons.scss +1492 -0
  16. data/stylesheets/font/_ubuntu.scss +38 -0
  17. data/stylesheets/form/_form.scss +836 -0
  18. data/stylesheets/grid/_grid.scss +312 -0
  19. data/stylesheets/helpers/_all.scss +8 -0
  20. data/stylesheets/helpers/_component.scss +177 -0
  21. data/stylesheets/helpers/_convenience.scss +277 -0
  22. data/stylesheets/helpers/_functions.scss +427 -0
  23. data/stylesheets/helpers/_grid.scss +39 -0
  24. data/stylesheets/helpers/_hardware-acceleration.scss +22 -0
  25. data/stylesheets/helpers/_mixins.scss +207 -0
  26. data/stylesheets/helpers/_touch.scss +107 -0
  27. data/stylesheets/helpers/_visibility.scss +138 -0
  28. data/stylesheets/image/_images.scss +19 -0
  29. data/stylesheets/imports/elements/_autosearch.scss +11 -0
  30. data/stylesheets/imports/elements/_badge.scss +23 -0
  31. data/stylesheets/imports/elements/_barchart.scss +254 -0
  32. data/stylesheets/imports/elements/_form.scss +8 -0
  33. data/stylesheets/imports/elements/_loginform.scss +6 -0
  34. data/stylesheets/imports/elements/_modellist.scss +14 -0
  35. data/stylesheets/imports/elements/_pluralize.scss +8 -0
  36. data/stylesheets/imports/elements/_signupform.scss +6 -0
  37. data/stylesheets/imports/elements/_slidenotification.scss +65 -0
  38. data/stylesheets/imports/elements/_stickyreveal.scss +44 -0
  39. data/stylesheets/imports/elements/_template.scss +7 -0
  40. data/stylesheets/imports/elements/_veneer.scss +36 -0
  41. data/stylesheets/shared/_shared.scss +282 -0
  42. data/stylesheets/touch/ui/_drawer.scss +41 -0
  43. data/stylesheets/touch/ui/_dropdown.scss +58 -0
  44. data/stylesheets/touch/ui/_menu.scss +131 -0
  45. data/stylesheets/touch/ui/_navbar.scss +44 -0
  46. data/stylesheets/touch/ui/_toggle.scss +127 -0
  47. data/stylesheets/touch/ui/_topbar.scss +48 -0
  48. data/stylesheets/typography/_typography.scss +746 -0
  49. data/stylesheets/ui/_autocomplete.scss +117 -0
  50. data/stylesheets/ui/_badge.scss +73 -0
  51. data/stylesheets/ui/_box.scss +78 -0
  52. data/stylesheets/ui/_breadcrumb.scss +64 -0
  53. data/stylesheets/ui/_button.scss +395 -0
  54. data/stylesheets/ui/_carousel.scss +284 -0
  55. data/stylesheets/ui/_collapsible.scss +61 -0
  56. data/stylesheets/ui/_container.scss +297 -0
  57. data/stylesheets/ui/_datepicker.scss +218 -0
  58. data/stylesheets/ui/_drawer.scss +96 -0
  59. data/stylesheets/ui/_dropdown.scss +394 -0
  60. data/stylesheets/ui/_file.scss +147 -0
  61. data/stylesheets/ui/_gallery.scss +219 -0
  62. data/stylesheets/ui/_label.scss +167 -0
  63. data/stylesheets/ui/_loading.scss +70 -0
  64. data/stylesheets/ui/_mediaobject.scss +108 -0
  65. data/stylesheets/ui/_menu.scss +287 -0
  66. data/stylesheets/ui/_menutab.scss +175 -0
  67. data/stylesheets/ui/_modal.scss +47 -0
  68. data/stylesheets/ui/_navbar.scss +315 -0
  69. data/stylesheets/ui/_notification.scss +154 -0
  70. data/stylesheets/ui/_pagination.scss +137 -0
  71. data/stylesheets/ui/_parallax.scss +233 -0
  72. data/stylesheets/ui/_popover.scss +3 -0
  73. data/stylesheets/ui/_rating.scss +106 -0
  74. data/stylesheets/ui/_sidebar.scss +110 -0
  75. data/stylesheets/ui/_slidingpanel.scss +57 -0
  76. data/stylesheets/ui/_social.scss +213 -0
  77. data/stylesheets/ui/_sticky.scss +9 -0
  78. data/stylesheets/ui/_table.scss +423 -0
  79. data/stylesheets/ui/_tabs.scss +242 -0
  80. data/stylesheets/ui/_toggle.scss +49 -0
  81. data/stylesheets/ui/_tooltip.scss +57 -0
  82. data/stylesheets/ui/_topbar.scss +210 -0
  83. data/stylesheets/ui/_tree.scss +3 -0
  84. data/stylesheets/ui/_window.scss +205 -0
  85. metadata +140 -0
data/stylesheets/component/_ui.scss ADDED
@@ -0,0 +1,955 @@
1
+
2
+
3
+ @mixin component-ui(){
4
+
5
+ /** core components ------------------------------------------------------------------------------------------------*/
6
+ $component-default-background: #fff,#f2f2f2 !default;
7
+ $component-default-background-alt: $white !default;
8
+ $component-default-font-color: #777 !default;
9
+ $component-default-text-shadow: 0 1px 0 $white !default;
10
+ $component-default-border: #ddd #ddd #bbb #ddd !default;
11
+
12
+ $component-primary-background: #617db4,#455e93 !default;
13
+ $component-primary-background-alt: #536da3 !default;
14
+ $component-primary-font-color: $white !default;
15
+ $component-primary-text-shadow: none !default;
16
+ $component-primary-border:#455e93 !default;
17
+
18
+ $component-inverse-background: #7c7c7c !default;
19
+ $component-inverse-font-color: $white !default;
20
+ $component-inverse-text-shadow: none !default;
21
+ $component-inverse-border: #7c7c7c !default;
22
+
23
+ $component-secondary-background: #aad240,#7ea613 !default;
24
+ $component-secondary-background-alt: #7ea613 !default;
25
+ $component-secondary-font-color: $white !default;
26
+ $component-secondary-text-shadow: 0 -1px 0 #81a830 !default;
27
+ $component-secondary-border: #7ea613 !default;
28
+
29
+
30
+
31
+ /** semantic components --------------------------------------------------------------------------------------------*/
32
+ $component-error-background: #f2dede !default;
33
+ $component-error-font-color: #bc5251 !default;
34
+ $component-error-border: #eed3d7 !default;
35
+ $component-error-text-shadow: none !default;
36
+
37
+ $component-info-background: #d9edf7 !default;
38
+ $component-info-border: #bce8f1 !default;
39
+ $component-info-font-color: #3a87ad !default;
40
+ $component-info-text-shadow: none !default;
41
+
42
+ $component-warning-background: #fcf8e3 !default;
43
+ $component-warning-border: #fbeed5 !default;
44
+ $component-warning-font-color: #c09853 !default;
45
+ $component-warning-text-shadow: none !default;
46
+
47
+ $component-success-background: #dff0d8 !default;
48
+ $component-success-border: #d6e9c6 !default;
49
+ $component-success-font-color: #468847 !default;
50
+ $component-success-text-shadow: none !default;
51
+
52
+
53
+ /** form components ------------------------------------------------------------------------------------------------*/
54
+ //input
55
+ $component-input-background:$white !default;
56
+ $component-input-font-color:$global-font-color !default;
57
+ $component-input-border:#d6d6d6 !default;
58
+ $component-input-border-hover:darken($white, 30%) !default;
59
+ $component-input-icon-color: $component-default-font-color !default;
60
+ $component-input-icon-text-shadow: $component-default-text-shadow !default;
61
+ $component-input-placeholder-color:#d4d4d4 !default;
62
+
63
+ //checkbox
64
+ $component-checkbox-background:$white !default;
65
+ $component-checkbox-font-color:$off-black !default;
66
+ $component-checkbox-border: 2px solid $gray !default;
67
+ $component-checkbox-icon-color: #5c5c5c !default;
68
+ $component-checkbox-icon-text-shadow: none !default;
69
+
70
+
71
+ //switch
72
+ $component-switch-background: #fff,#fefefe !default;
73
+ $component-switch-background-active: #00e02a !default;
74
+ $component-switch-border: #ccc #ccc #bbb #ccc !default;
75
+ $component-switch-border-active:darken($component-switch-background-active, 10%) !default;
76
+
77
+ $component-switch-toggle-background: $white !default;
78
+ $component-switch-toggle-background-active:$white !default;
79
+ $component-switch-toggle-border:2px solid $gray !default;
80
+ $component-switch-toggle-border-active: 2px solid darken($component-switch-background-active, 10%) !default;
81
+
82
+ //file input
83
+ $component-input-file-background:#eee !default;
84
+ $component-input-file-font-color:#aaa !default;
85
+ $component-input-file-font-color-active:#999 !default;
86
+ $component-input-file-border:5px dashed $gray !default;
87
+ $component-input-file-border-hover:5px dashed darken($gray,10%) !default;
88
+ $component-input-file-text-shadow: none !default;
89
+ $component-input-file-box-shadow: none !default;
90
+
91
+ //autocomplete
92
+ $component-autocomplete-background:#fff,#f2f2f2 !default;
93
+ $component-autocomplete-border:1px solid darken($white, 20%) !default;
94
+ $component-autocomplete-box-shadow:rgba(0, 0, 0, .20) 0px 1px 2px !default;
95
+ $component-autocomplete-font-color:#777 !default;
96
+ $component-autocomplete-background-hover:lighten(#888, 44%);
97
+ $component-autocomplete-font-color-hover:#333 !default;
98
+
99
+
100
+ /** table components -----------------------------------------------------------------------------------------------*/
101
+
102
+
103
+
104
+
105
+
106
+ /** pre-built components for widgets -------------------------------------------------------------------------------*/
107
+
108
+ //social icons
109
+ $component-social-background: transparent !default;
110
+ $component-social-border: none !default;
111
+ $component-social-box-shadow: none !default;
112
+ $component-social-icon-color: #bbb !default;
113
+ $component-social-icon-text-shadow: rgba(0, 0, 0, .80) 0 -1px 0 !default;
114
+
115
+ //menu-tab
116
+ $component-tab-background: #fff,#f5f5f5 !default;
117
+ $component-tab-background-alt: $white !default;
118
+ $component-tab-font-color: #131313 !default;
119
+ $component-tab-text-shadow: none !default;
120
+ $component-tab-border: false !default;
121
+ $component-tab-box-shadow: 0 2px 2px rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.04) !default;
122
+
123
+ //menu-panel
124
+ $component-panel-background: #f9f9f9,#eaeaea !default;
125
+ $component-panel-background-alt: #f7f7f7 !default;
126
+ $component-panel-font-color: #555 !default;
127
+ $component-panel-text-shadow: none !default;
128
+ $component-panel-border: false !default;
129
+ $component-panel-box-shadow: 0 4px 12px rgba(0,0,0,0.4),inset 0 1px rgba(255,255,255,0.04) !default;
130
+
131
+
132
+
133
+ //menu-button, dashboard-button
134
+ $component-button-background: #5bb6fa,#2091f3 !default;
135
+ $component-button-background-alt: #38a1f7 !default;
136
+ $component-button-font-color: $white !default;
137
+ $component-button-text-shadow: rgba(0,0,0,.2) 0 1px 0 !default;
138
+ $component-button-border: false !default;
139
+ $component-button-box-shadow: inset 1px 2px 1px rgba(0,0,0,0.15) !default;
140
+
141
+
142
+ //dropdown
143
+ $component-dropdown-background: #fff,#fcfcfc !default;
144
+ $component-dropdown-background-alt:$white !default;
145
+ $component-dropdown-font-color: #666 !default;
146
+ $component-dropdown-text-shadow: none !default;
147
+ $component-dropdown-border:#ddd #ddd #bbb #ddd !default;
148
+ $component-dropdown-background-disabled:none !default;
149
+
150
+ //divider
151
+ $component-divider-background:$gray !default;
152
+ $component-divider-border:#f2f2f2 !default;
153
+
154
+ //divider-2
155
+ $component-divider-2-border:#ababab !default;
156
+
157
+ //divider-3
158
+ $component-divider-3-background:darken($white, 7%) !default;
159
+
160
+
161
+ //rating
162
+ $component-rating-background: none !default;
163
+ $component-rating-font-color: #777 !default;
164
+ $component-rating-border: none !default;
165
+
166
+
167
+
168
+ //refine-tab
169
+ $component-refine-background: $white !default;
170
+ $component-refine-font-color: #9b9b98 !default;
171
+ $component-refine-border: 1px solid #dadada !default;
172
+ $component-refine-background-active: #fff,#f2f2f2 !default;
173
+
174
+ //refine-button
175
+ $component-refine-button-background: #dadada !default;
176
+ $component-refine-button-font-color: #5f5f5f !default;
177
+ $component-refine-button-border: none !default;
178
+
179
+ //refine-row
180
+ $component-refine-row-background: $white !default;
181
+ $component-refine-row-border: 1px solid #ccc !default;
182
+
183
+ //refine-row-option
184
+ $component-refine-row-option-background: $white !default;
185
+ $component-refine-row-option-font-color: #9b9b98 !default;
186
+ $component-refine-row-option-font-color-hover: .7 !default;
187
+ $component-refine-row-option-border: 1px solid #dadada !default;
188
+
189
+ //refine-summary
190
+ $component-refine-summary-background: #f7f7f7 !default;
191
+ $component-refine-summary-background-hover: #eee !default;
192
+ $component-refine-summary-font-color: #9b9b98 !default;
193
+ $component-refine-summary-font-color-hover: darken(#9b9b98,5%) !default;
194
+ $component-refine-summary-border: 1px solid #dadada !default;
195
+
196
+ //refine-summary-button
197
+ $component-refine-summary-button-background:#9b9b98 !default;
198
+ $component-refine-summary-button-font-color: $white !default;
199
+ $component-refine-summary-button-border: 1px solid #9b9b98 !default;
200
+ $component-refine-summary-button-icon-color:$component-refine-summary-button-background !default;
201
+
202
+ //css-bar
203
+ $component-topbar-background: #272727 !default;
204
+ $component-topbar-font-color: #999 !default;
205
+ $component-topbar-text-shadow: none !default;
206
+ $component-topbar-border:0 !default;
207
+ $component-topbar-box-shadow:none !default;
208
+
209
+ //dashboard-bar
210
+ $component-dashboard-bar-background: #fafafa,#e4e4e4 !default;
211
+ $component-dashboard-bar-background-alt: #fafafa !default;
212
+ $component-dashboard-bar-font-color: #666 !default;
213
+ $component-dashboard-bar-text-shadow: none !default;
214
+ $component-dashboard-bar-border: #fafafa #fafafa #eee #fafafa !default;
215
+ $component-dashboard-bar-box-shadow: rgba(0, 0, 0, .3) 0px 3px 5px !default;
216
+
217
+ //dashboard-tab
218
+ $component-dashboard-tab-background:#fff,#f2f2f2 !default;
219
+ $component-dashboard-tab-background-alt:$white !default;
220
+ $component-dashboard-tab-font-color: #777 !default;
221
+ $component-dashboard-tab-text-shadow: rgba(255, 255, 255, .80) 0 -1px 0 !default;
222
+ $component-dashboard-tab-border: #ddd #ddd #bbb #ddd !default;
223
+ $component-dashboard-tab-box-shadow: rgba(0, 0, 0, .20) 0px 1px 1px !default;
224
+ $component-dashboard-tab-icon-color: #666 !default;
225
+ $component-dashboard-tab-icon-text-shadow: rgba(255, 255, 255, .80) 0 -1px 0 !default;
226
+
227
+
228
+ //dashboard-icon
229
+ $component-dashboard-icon-background:#fff !default;
230
+ $component-dashboard-icon-font-color: #666 !default;
231
+ $component-dashboard-icon-text-shadow: rgba(0, 0, 0, .20) 0 -1px 0 !default;
232
+ $component-dashboard-icon-background-disabled: none !default;
233
+ $component-dashboard-icon-font-color-disabled: #ccc !default;
234
+
235
+
236
+
237
+ //window
238
+ $component-window-background:$white !default;
239
+ $component-window-font-color:$global-font-color !default;
240
+ $component-window-border:1px solid $white !default;
241
+ $component-window-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3) !default;
242
+
243
+ //window header
244
+ $component-window-header-background:#f7f7f7,#f5f5f5 !default;
245
+ $component-window-header-font-color: #999 !default;
246
+ $component-window-header-text-shadow: 0px 2px 3px #fff !default;
247
+ $component-window-header-border: 1px solid #ddd !default;
248
+
249
+ //window close
250
+ $component-window-close-background:#f5f5f5 !default;
251
+ $component-window-close-background-hover:#eee !default;
252
+ $component-window-close-font-color: #b4b4b4 !default;
253
+ $component-window-close-font-color-hover: #8f8f8f !default;
254
+ $component-window-close-text-shadow: 0px 1px 0px #fff !default;
255
+ $component-window-close-border: 1px solid #ddd !default;
256
+ $component-window-close-box-shadow:inset 1px 0 0 rgba(255, 255, 255, .5) !default;
257
+
258
+ //parallax button
259
+ $component-parallax-button-background:#e0e2e3 !default;
260
+ $component-parallax-button-icon-color: $white !default;
261
+
262
+ //tab
263
+ $component-tabs-background:#ddd !default;
264
+ $component-tabs-background-active:$white !default;
265
+ $component-tabs-border:1px solid #ddd !default;
266
+ $component-tabs-border-active:1px solid #ddd !default;
267
+ $component-tabs-box-shadow:none;
268
+ $component-tabs-box-shadow-active:none;
269
+ $component-tabs-font-color:$global-font-color !default;
270
+ $component-tabs-font-color-active:$global-font-color !default;
271
+
272
+ //datepicker-button
273
+ $component-datepicker-button-background:#f5f5f5 !default;
274
+ $component-datepicker-button-background-hover:#7c7c7c !default;
275
+ $component-datepicker-button-background-active:#7ea613 !default;
276
+ $component-datepicker-button-border:0 !default;
277
+ $component-datepicker-button-font-color:#666 !default;
278
+ $component-datepicker-button-font-color-hover:$white !default;
279
+ $component-datepicker-button-font-color-active:$white !default;
280
+ $component-datepicker-button-font-color-disabled:#eee !default;
281
+
282
+ //datepicker-today-button
283
+ $component-datepicker-today-button-background:#455e93 !default;
284
+ $component-datepicker-today-button-font-color:$white !default;
285
+
286
+
287
+ //sliding-panel
288
+ $component-sliding-panel-background:$white !default;
289
+ $component-sliding-panel-font-color:$global-font-color !default;
290
+ $component-sliding-panel-border:1px solid $gray !default;
291
+ $component-sliding-panel-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3) !default;
292
+
293
+
294
+ /** touch ----------------------------------------------------------------------------------------------------------*/
295
+ //touch-black
296
+ $component-touch-black-background: #272727,#1b1b1b !default;
297
+ $component-touch-black-background-alt: #272727 !default;
298
+ $component-touch-black-font-color: $white !default;
299
+ $component-touch-black-text-shadow: 0 1px 1px #373737 !default;
300
+ $component-touch-black-border: 0 !default;
301
+ $component-touch-black-box-shadow: rgba(0, 0, 0, .5) 0px 1px 2px !default;
302
+
303
+ //toggle-black
304
+ $component-toggle-black-background: transparent !default;
305
+ $component-toggle-black-font-color: #999 !default;
306
+ $component-toggle-black-text-shadow: rgba(0, 0, 0, 1) 0 1px 1px !default;
307
+ $component-toggle-black-border: #000 !default;
308
+ $component-toggle-black-box-shadow: darken(#666,14%) 0px -1px 0px 1px !default;
309
+
310
+
311
+ //drawer-header-black
312
+ $component-drawer-header-black-background: #272727,#000 !default;
313
+ $component-drawer-header-black-font-color: $white !default;
314
+ $component-drawer-header-black-text-shadow:rgba(0, 0, 0, 1) 0 1px 1px !default;
315
+ $component-drawer-header-black-border:0 !default;
316
+ $component-drawer-header-black-box-shadow:none !default;
317
+
318
+ //drawer-black
319
+ $component-drawer-black-background: #1b1b1b !default;
320
+ $component-drawer-black-font-color: #ccc !default;
321
+ $component-drawer-black-text-shadow:none !default;
322
+ $component-drawer-black-border:0 !default;
323
+ $component-drawer-black-box-shadow:none !default;
324
+
325
+ //touch white
326
+ $component-touch-white-background: #fff !default;
327
+ $component-touch-white-font-color: darken(#d8d8d8,10%) !default;
328
+ $component-touch-white-text-shadow: none !default;
329
+ $component-touch-white-border: 0 !default;
330
+ $component-touch-white-box-shadow: none !default;
331
+
332
+ //toggle-white
333
+ $component-toggle-white-background: transparent !default;
334
+ $component-toggle-white-font-color: darken(#d8d8d8,10%) !default;
335
+ $component-toggle-white-text-shadow: rgba(0, 0, 0, 1) 0 1px 1px !default;
336
+ $component-toggle-white-border: #d8d8d8 !default;
337
+ $component-toggle-white-box-shadow: none !default;
338
+
339
+ //drawer-header-white
340
+ $component-drawer-header-white-background: #fff !default;
341
+ $component-drawer-header-white-font-color: darken(#d8d8d8,10%) !default;
342
+ $component-drawer-header-white-text-shadow:none !default;
343
+ $component-drawer-header-white-border:0 !default;
344
+ $component-drawer-header-white-box-shadow:none !default;
345
+
346
+ //drawer-white
347
+ $component-drawer-white-background: #fff !default;
348
+ $component-drawer-white-font-color: #ccc !default;
349
+ $component-drawer-white-text-shadow:none !default;
350
+ $component-drawer-white-border:0 !default;
351
+ $component-drawer-white-box-shadow:none !default;
352
+
353
+
354
+ //touch
355
+ $component-touch-background: #40484b,#2c3134 !default;
356
+ $component-touch-background-alt: #3f474a !default;
357
+ $component-touch-font-color: $white !default;
358
+ $component-touch-text-shadow: 0 1px 1px #373737 !default;
359
+ $component-touch-border: 0 !default;
360
+ $component-touch-box-shadow: rgba(0, 0, 0, .5) 0px 1px 2px !default;
361
+
362
+ //toggle
363
+ $component-toggle-background: transparent !default;
364
+ $component-toggle-font-color: $white !default;
365
+ $component-toggle-text-shadow: rgba(0, 0, 0, 1) 0 1px 1px !default;
366
+ $component-toggle-border: #000 !default;
367
+ $component-toggle-box-shadow: #484e51 0px -1px 0px 1px !default;
368
+
369
+
370
+ //drawer
371
+ $component-drawer-background: #32393c !default;
372
+ $component-drawer-font-color: $white !default;
373
+ $component-drawer-text-shadow:none !default;
374
+ $component-drawer-border:0 !default;
375
+ $component-drawer-box-shadow:none !default;
376
+
377
+ //drawer-header
378
+ $component-drawer-header-background: #292e31, #141416 !default;
379
+ $component-drawer-header-font-color: $white !default;
380
+ $component-drawer-header-text-shadow:rgba(0, 0, 0, 1) 0 1px 1px !default;
381
+ $component-drawer-header-border:0 !default;
382
+ $component-drawer-header-box-shadow:none !default;
383
+
384
+ //menu
385
+ $component-touch-menu-background: #f7f7f7 !default;
386
+ $component-touch-menu-font-color:#434444 !default;
387
+ $component-touch-menu-text-shadow:none !default;
388
+ $component-touch-menu-border: #ddd !default;
389
+ $component-touch-menu-box-shadow:false !default;
390
+ $component-touch-menu-icon-color:#666 !default;
391
+ $component-touch-menu-icon-text-shadow:0 -1px 0 #373737 !default;
392
+
393
+ //dropdown
394
+ $component-touch-dropdown-background: #e2e4e5 !default;
395
+ $component-touch-dropdown-font-color:#373737 !default;
396
+ $component-touch-dropdown-text-shadow:none !default;
397
+ $component-touch-dropdown-border: #999 !default;
398
+ $component-touch-dropdown-box-shadow:inset 0px 3px 12px rgba(0,0,0,.1) !default;
399
+
400
+ //touch-input
401
+ $component-touch-input-background: $white !default;
402
+ $component-touch-input-font-color:#666 !default;
403
+ $component-touch-input-text-shadow:none !default;
404
+ $component-touch-input-border:0 !default;
405
+ $component-touch-input-box-shadow:inset 0px 1px 6px #999999 !default;
406
+
407
+
408
+ /** instantiate components -----------------------------------------------------------------------------------------*/
409
+
410
+ //default
411
+ @include component($component:default,
412
+ $background: $component-default-background,
413
+ $background-alt: $component-default-background-alt,
414
+ $font-color: $component-default-font-color,
415
+ $border: $component-default-border,
416
+ $text-shadow: $component-default-text-shadow
417
+ );
418
+
419
+ //primary
420
+ @include component($component:primary,
421
+ $background: $component-primary-background,
422
+ $background-alt: $component-primary-background-alt,
423
+ $font-color: $component-primary-font-color,
424
+ $border: $component-primary-border,
425
+ $text-shadow: $component-primary-text-shadow
426
+ );
427
+
428
+ //inverse
429
+ @include component($component:inverse,
430
+ $background: $component-inverse-background,
431
+ $font-color: $component-inverse-font-color,
432
+ $border: $component-inverse-border,
433
+ $text-shadow: $component-inverse-text-shadow
434
+ );
435
+
436
+ //secondary
437
+ @include component($component:secondary,
438
+ $background: $component-secondary-background,
439
+ $background-alt: $component-secondary-background-alt,
440
+ $font-color: $component-secondary-font-color,
441
+ $border: $component-secondary-border,
442
+ $text-shadow: $component-secondary-text-shadow
443
+ );
444
+
445
+ //error
446
+ @include component($component:error,
447
+ $background: $component-error-background,
448
+ $font-color: $component-error-font-color,
449
+ $border: $component-error-border,
450
+ $text-shadow: $component-error-text-shadow
451
+ );
452
+
453
+ //info
454
+ @include component($component:info,
455
+ $background: $component-info-background,
456
+ $font-color: $component-info-font-color,
457
+ $border: $component-info-border,
458
+ $text-shadow: $component-info-text-shadow
459
+ );
460
+
461
+ //warning
462
+ @include component($component:warning,
463
+ $background: $component-warning-background,
464
+ $font-color: $component-warning-font-color,
465
+ $border: $component-warning-border,
466
+ $text-shadow: $component-warning-text-shadow
467
+ );
468
+
469
+ //success
470
+ @include component($component:success,
471
+ $background: $component-success-background,
472
+ $font-color: $component-success-font-color,
473
+ $border: $component-success-border,
474
+ $text-shadow: $component-success-text-shadow
475
+ );
476
+
477
+
478
+ //forms
479
+ //input
480
+ @include component($component:css-input,
481
+ $background: $component-input-background,
482
+ $font-color:$component-input-font-color,
483
+ $border: $component-input-border,
484
+ $border-hover: $component-input-border-hover,
485
+ $icon-color:$component-input-icon-color,
486
+ $icon-text-shadow:$component-input-icon-text-shadow,
487
+ $placeholder-color:$component-input-placeholder-color
488
+ );
489
+
490
+ //input
491
+ @include extend-component($extend-component:css-input,$component:css-input-2,
492
+ $box-shadow:#f4f4f4 0 0 0 4px
493
+ );
494
+
495
+ //file input
496
+ @include component($component:css-input-file,
497
+ $background: $component-input-file-background,
498
+ $font-color:$component-input-file-font-color,
499
+ $font-color-active:$component-input-file-font-color-active,
500
+ $border: $component-input-file-border,
501
+ $border-hover: $component-input-border-hover,
502
+ $text-shadow:$component-input-file-text-shadow,
503
+ $box-shadow:$component-input-file-box-shadow
504
+ );
505
+
506
+ //checkbox
507
+ @include component($component:css-checkbox,
508
+ $background: $component-checkbox-background,
509
+ $font-color:$component-checkbox-font-color,
510
+ $border: $component-checkbox-border,
511
+ $icon-color:$component-checkbox-icon-color,
512
+ $icon-text-shadow:$component-checkbox-icon-text-shadow
513
+ );
514
+
515
+
516
+ //switch
517
+ @include component($component:css-switch,
518
+ $background: $component-switch-background,
519
+ $background-active: $component-switch-background-active,
520
+ $border: $component-switch-border,
521
+ $border-active: $component-switch-border-active
522
+ );
523
+
524
+ //switch-toggle
525
+ @include component($component:css-switch-toggle,
526
+ $background: $component-switch-toggle-background,
527
+ $background-active: $component-switch-toggle-background-active,
528
+ $border: $component-switch-toggle-border,
529
+ $border-active: $component-switch-toggle-border-active
530
+ );
531
+
532
+ //autocomplete
533
+ @include component($component:css-autocomplete,
534
+ $background: $component-autocomplete-background,
535
+ $background-hover: $component-autocomplete-background-hover,
536
+ $border: $component-autocomplete-border,
537
+ $font-color: $component-autocomplete-font-color,
538
+ $font-color-hover:$component-autocomplete-font-color-hover,
539
+ $box-shadow:$component-autocomplete-box-shadow
540
+ );
541
+
542
+
543
+
544
+ //social
545
+ @include component($component:css-social,
546
+ $background: $component-social-background,
547
+ $border: $component-social-border,
548
+ $box-shadow: $component-social-box-shadow,
549
+ $icon-color: $component-social-icon-color,
550
+ $icon-text-shadow: $component-social-icon-text-shadow
551
+ );
552
+
553
+ //tab
554
+ @include component($component:css-tab,
555
+ $background: $component-tab-background,
556
+ $background-alt: $component-tab-background,
557
+ $font-color: $component-tab-font-color,
558
+ $border: $component-tab-border,
559
+ $text-shadow: $component-tab-text-shadow,
560
+ $box-shadow: $component-tab-box-shadow
561
+ );
562
+
563
+ //panel
564
+ @include component($component:css-panel,
565
+ $background: $component-panel-background,
566
+ $background-alt: $component-panel-background,
567
+ $font-color: $component-panel-font-color,
568
+ $border: $component-panel-border,
569
+ $text-shadow: $component-panel-text-shadow,
570
+ $box-shadow: $component-panel-box-shadow
571
+ );
572
+
573
+ //button
574
+ @include component($component:css-button,
575
+ $background: $component-button-background,
576
+ $background-alt: $component-button-background-alt,
577
+ $font-color: $component-button-font-color,
578
+ $border: $component-button-border,
579
+ $text-shadow: $component-button-text-shadow,
580
+ $box-shadow: $component-button-box-shadow
581
+ );
582
+
583
+ //divider
584
+ @include component($component:css-divider,
585
+ $background: $component-divider-background,
586
+ $border: $component-divider-border
587
+ );
588
+
589
+ @include extend-component($extend-component:css-divider,$component:css-divider-2,
590
+ $border:$component-divider-2-border
591
+ );
592
+
593
+ //divider 3
594
+ @include component($component:css-divider-3,
595
+ $background: $component-divider-3-background
596
+ );
597
+
598
+ //rating
599
+ @include component($component:css-rating,
600
+ $background: $component-rating-background,
601
+ $font-color: $component-rating-font-color,
602
+ $border: $component-rating-border
603
+ );
604
+
605
+ //dropdown
606
+ @include component($component:css-dropdown,
607
+ $background: $component-dropdown-background,
608
+ $background-alt: $component-dropdown-background-alt,
609
+ $font-color: $component-dropdown-font-color,
610
+ $border: $component-dropdown-border,
611
+ $text-shadow: $component-dropdown-text-shadow,
612
+ $background-disabled:$component-dropdown-background-disabled
613
+ );
614
+
615
+ //refine tab
616
+ @include component($component:css-refine-tab,
617
+ $background: $component-refine-background,
618
+ $font-color: $component-refine-font-color,
619
+ $border: $component-refine-border,
620
+ $background-active:$component-refine-background-active
621
+ );
622
+
623
+ //refine button
624
+ @include component($component:css-refine-button,
625
+ $background: $component-refine-button-background,
626
+ $font-color: $component-refine-button-font-color,
627
+ $border: $component-refine-button-border
628
+ );
629
+
630
+ //refine row
631
+ @include component($component:css-refine-row,
632
+ $background: $component-refine-row-background,
633
+ $border: $component-refine-row-border
634
+ );
635
+
636
+ //refine row option
637
+ @include component($component:css-refine-row-option,
638
+ $background: $component-refine-row-option-background,
639
+ $font-color: $component-refine-row-option-font-color,
640
+ $font-color-hover: $component-refine-row-option-font-color-hover,
641
+ $border: $component-refine-row-option-border
642
+ );
643
+
644
+ //refine summary
645
+ @include component($component:css-refine-summary,
646
+ $background: $component-refine-summary-background,
647
+ $background-hover: $component-refine-summary-background-hover,
648
+ $font-color: $component-refine-summary-font-color,
649
+ $font-color-hover: $component-refine-summary-font-color-hover,
650
+ $border: $component-refine-summary-border
651
+ );
652
+
653
+ //refine summary button
654
+ @include component($component:css-refine-summary-button,
655
+ $background: $component-refine-summary-button-background,
656
+ $font-color: $component-refine-summary-button-font-color,
657
+ $border: $component-refine-summary-button-border
658
+
659
+ );
660
+
661
+ //dashboard-bar
662
+ @include desktop-component($component:css-dashboard-bar,
663
+ $background: $component-dashboard-bar-background,
664
+ $background-alt: $component-dashboard-bar-background,
665
+ $font-color: $component-dashboard-bar-font-color,
666
+ $border: $component-dashboard-bar-border,
667
+ $text-shadow: $component-dashboard-bar-text-shadow,
668
+ $box-shadow: $component-dashboard-bar-box-shadow
669
+ );
670
+
671
+ //css-bar
672
+ @include desktop-component($component:css-bar,
673
+ $background: $component-topbar-background,
674
+ $font-color: $component-topbar-font-color,
675
+ $border: $component-topbar-border,
676
+ $text-shadow: $component-topbar-text-shadow,
677
+ $box-shadow: $component-topbar-box-shadow
678
+ );
679
+
680
+ @include extend-component($extend-component: css-bar, $component: css-bar-menu,
681
+ $background-hover: $black, $font-color: $white, $font-color-hover: darken($white,20%),$font-color-active:darken($white,30%));
682
+
683
+ @include component($component: css-menu-divider,
684
+ $border: lighten($component-topbar-background, 10%));
685
+
686
+ //dashboard-tab
687
+ @include component($component:css-dashboard-tab,
688
+ $background: $component-dashboard-tab-background,
689
+ $background-alt: $component-dashboard-tab-background,
690
+ $font-color: $component-dashboard-tab-font-color,
691
+ $border: $component-dashboard-tab-border,
692
+ $text-shadow: $component-dashboard-tab-text-shadow,
693
+ $box-shadow: $component-dashboard-tab-box-shadow,
694
+ $icon-color: $component-dashboard-tab-icon-color,
695
+ $icon-text-shadow: $component-dashboard-tab-icon-text-shadow
696
+ );
697
+
698
+ //dashboard-icon
699
+ @include component($component:css-dashboard-icon,
700
+ $background: $component-dashboard-icon-background,
701
+ $font-color: $component-dashboard-icon-font-color,
702
+ $text-shadow: $component-dashboard-icon-text-shadow,
703
+ $background-disabled:$component-dashboard-icon-background-disabled,
704
+ $font-color-disabled:$component-dashboard-icon-font-color-disabled
705
+ );
706
+
707
+
708
+
709
+ //css-window
710
+ @include component($component:css-window,
711
+ $background:$component-window-background,
712
+ $font-color:$component-window-font-color,
713
+ $border:$component-window-border,
714
+ $box-shadow:$component-window-box-shadow
715
+ );
716
+
717
+ //css-window-header
718
+ @include component($component:css-window-header,
719
+ $background:$component-window-header-background,
720
+ $font-color:$component-window-header-font-color,
721
+ $border:$component-window-header-border,
722
+ $text-shadow:$component-window-header-text-shadow
723
+ );
724
+
725
+ //css-window-close
726
+ @include component($component:css-window-close,
727
+ $background:$component-window-close-background,
728
+ $background-hover:$component-window-close-background-hover,
729
+ $font-color:$component-window-close-font-color,
730
+ $font-color-hover:$component-window-close-font-color-hover,
731
+ $border:$component-window-close-border,
732
+ $text-shadow:$component-window-close-text-shadow,
733
+ $box-shadow:$component-window-close-box-shadow
734
+ );
735
+
736
+ //css-window-footer
737
+ @include extend-component($extend-component:css-window-header,$component:css-window-footer,
738
+ $text-shadow:none,
739
+ $box-shadow:inset 0 1px 0 rgba(255, 255, 255, .5)
740
+ );
741
+
742
+ //css-parallax-button
743
+ @include component($component:css-parallax-button,
744
+ $background:$component-parallax-button-background,
745
+ $icon-color:$component-parallax-button-icon-color
746
+ );
747
+
748
+ //css-tabs
749
+ @include component($component:css-tabs,
750
+ $background:$component-tabs-background,
751
+ $background-active:$component-tabs-background-active,
752
+ $border:$component-tabs-border,
753
+ $border-active:$component-tabs-border-active,
754
+ $font-color:$component-tabs-font-color,
755
+ $font-color-active:$component-tabs-font-color-active,
756
+ $box-shadow:$component-tabs-box-shadow,
757
+ $box-shadow-active:$component-tabs-box-shadow-active
758
+
759
+ );
760
+
761
+ //css-datepicker
762
+ @include extend-component($extend-component:default,$component:css-datepicker,
763
+ $background:(#fff,#f5f5f5),
764
+ $icon-color:#bbb
765
+ );
766
+
767
+ //css-datepicker-button
768
+ @include component($component:css-datepicker-button,
769
+ $background:$component-datepicker-button-background,
770
+ $background-hover:$component-datepicker-button-background-hover,
771
+ $background-active:$component-datepicker-button-background-active,
772
+ $border:$component-datepicker-button-border,
773
+ $font-color:$component-datepicker-button-font-color,
774
+ $font-color-hover:$component-datepicker-button-font-color-hover,
775
+ $font-color-active:$component-datepicker-button-font-color-active,
776
+ $font-color-disabled:$component-datepicker-button-font-color-disabled
777
+ );
778
+
779
+ //css-datepicker-today-button
780
+ @include component($component:css-datepicker-today-button,
781
+ $background:$component-datepicker-today-button-background,
782
+ $font-color:$component-datepicker-today-button-font-color
783
+ );
784
+
785
+ //css-sliding-panel
786
+ @include component($component:css-sliding-panel,
787
+ $background:$component-sliding-panel-background,
788
+ $font-color:$component-sliding-panel-font-color,
789
+ $border:$component-sliding-panel-border,
790
+ $box-shadow:$component-sliding-panel-box-shadow
791
+ );
792
+
793
+ /** touch widgets----------------------------------------------------------------------------------------------------*/
794
+
795
+
796
+ //touch-black
797
+ @include touch-component($component:css-touch-black,
798
+ $background: $component-touch-black-background,
799
+ $background-alt: $component-touch-black-background-alt,
800
+ $font-color: $component-touch-black-font-color,
801
+ $border: $component-touch-black-border,
802
+ $text-shadow: $component-touch-black-text-shadow,
803
+ $box-shadow: $component-touch-black-box-shadow
804
+ );
805
+
806
+ //toggle-black
807
+ @include touch-component($component:css-toggle-black,
808
+ $background: $component-toggle-black-background,
809
+ $font-color: $component-toggle-black-font-color,
810
+ $border: $component-toggle-black-border,
811
+ $text-shadow: $component-toggle-black-text-shadow,
812
+ $box-shadow: $component-toggle-black-box-shadow
813
+ );
814
+
815
+ //drawer-header-black
816
+ @include touch-component($component:css-touch-drawer-header-black,
817
+ $background: $component-drawer-header-black-background,
818
+ $font-color: $component-drawer-header-black-font-color,
819
+ $border: $component-drawer-header-black-border,
820
+ $text-shadow: $component-drawer-header-black-text-shadow,
821
+ $box-shadow: $component-drawer-header-black-box-shadow
822
+ );
823
+
824
+ //drawer-black
825
+ @include touch-component($component:css-touch-drawer-black,
826
+ $background: $component-drawer-black-background,
827
+ $font-color: $component-drawer-black-font-color,
828
+ $border: $component-drawer-black-border,
829
+ $text-shadow: $component-drawer-black-text-shadow,
830
+ $box-shadow: $component-drawer-black-box-shadow
831
+ );
832
+
833
+ //touch-white
834
+ @include touch-component($component:css-touch-white,
835
+ $background: $component-touch-white-background,
836
+ $font-color: $component-touch-white-font-color,
837
+ $border: $component-touch-white-border,
838
+ $text-shadow: $component-touch-white-text-shadow,
839
+ $box-shadow: $component-touch-white-box-shadow
840
+ );
841
+
842
+ //toggle-white
843
+ @include touch-component($component:css-toggle-white,
844
+ $background: $component-toggle-white-background,
845
+ $font-color: $component-toggle-white-font-color,
846
+ $border: $component-toggle-white-border,
847
+ $text-shadow: $component-toggle-white-text-shadow,
848
+ $box-shadow: $component-toggle-white-box-shadow
849
+ );
850
+
851
+ //drawer-header-white
852
+ @include touch-component($component:css-touch-drawer-header-white,
853
+ $background: $component-drawer-header-white-background,
854
+ $font-color: $component-drawer-header-white-font-color,
855
+ $border: $component-drawer-header-white-border,
856
+ $text-shadow: $component-drawer-header-white-text-shadow,
857
+ $box-shadow: $component-drawer-header-white-box-shadow
858
+ );
859
+
860
+ //drawer-white
861
+ @include touch-component($component:css-touch-drawer-white,
862
+ $background: $component-drawer-white-background,
863
+ $font-color: $component-drawer-white-font-color,
864
+ $border: $component-drawer-white-border,
865
+ $text-shadow: $component-drawer-white-text-shadow,
866
+ $box-shadow: $component-drawer-white-box-shadow
867
+ );
868
+
869
+
870
+
871
+ //touch
872
+ @include touch-component($component:css-touch,
873
+ $background: $component-touch-background,
874
+ $background-alt: $component-touch-background-alt,
875
+ $font-color: $component-touch-font-color,
876
+ $border: $component-touch-border,
877
+ $text-shadow: $component-touch-text-shadow,
878
+ $box-shadow: $component-touch-box-shadow
879
+ );
880
+
881
+
882
+ //toggle
883
+ @include touch-component($component:css-toggle,
884
+ $background: $component-toggle-background,
885
+ $font-color: $component-toggle-font-color,
886
+ $border: $component-toggle-border,
887
+ $text-shadow: $component-toggle-text-shadow,
888
+ $box-shadow: $component-toggle-box-shadow
889
+ );
890
+
891
+
892
+
893
+ //drawer
894
+ @include touch-component($component:css-touch-drawer,
895
+ $background: $component-drawer-background,
896
+ $font-color: $component-drawer-font-color,
897
+ $border: $component-drawer-border,
898
+ $text-shadow: $component-drawer-text-shadow,
899
+ $box-shadow: $component-drawer-box-shadow
900
+ );
901
+
902
+ //drawer-header
903
+ @include touch-component($component:css-touch-drawer-header,
904
+ $background: $component-drawer-header-background,
905
+ $font-color: $component-drawer-header-font-color,
906
+ $border: $component-drawer-header-border,
907
+ $text-shadow: $component-drawer-header-text-shadow,
908
+ $box-shadow: $component-drawer-header-box-shadow
909
+ );
910
+
911
+ //touch-menu
912
+ @include touch-component($component:css-touch-menu,
913
+ $background: $component-touch-menu-background,
914
+ $font-color: $component-touch-menu-font-color,
915
+ $border: $component-touch-menu-border,
916
+ $text-shadow: $component-touch-menu-text-shadow,
917
+ $box-shadow: $component-touch-menu-box-shadow,
918
+ $icon-color: $component-touch-menu-icon-color,
919
+ $icon-text-shadow: $component-touch-menu-icon-text-shadow
920
+ );
921
+
922
+ //touch-dropdown
923
+ @include touch-component($component:css-touch-dropdown,
924
+ $background: $component-touch-dropdown-background,
925
+ $font-color: $component-touch-dropdown-font-color,
926
+ $border: $component-touch-dropdown-border,
927
+ $text-shadow: $component-touch-dropdown-text-shadow,
928
+ $box-shadow: $component-touch-dropdown-box-shadow
929
+ );
930
+
931
+ //touch-input
932
+ @include touch-component($component:css-touch-input,
933
+ $background: $component-touch-input-background,
934
+ $font-color: $component-touch-input-font-color,
935
+ $border: $component-touch-input-border,
936
+ $text-shadow: $component-touch-input-text-shadow,
937
+ $box-shadow: $component-touch-input-box-shadow
938
+ );
939
+
940
+ }
941
+
942
+
943
+
944
+
945
+
946
+
947
+
948
+
949
+
950
+
951
+
952
+
953
+
954
+
955
+