expressionui 0.0.2 → 0.0.3

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.
@@ -0,0 +1,208 @@
1
+ *
2
+ margin: 0
3
+ padding: 0
4
+ +box-sizing(border-box)
5
+ -webkit-font-smoothing: antialiased
6
+
7
+ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
8
+ display: block
9
+
10
+ audio[controls], canvas, video
11
+ display: inline-block
12
+ *display: inline
13
+ *zoom: 1
14
+
15
+ html
16
+ font-size: 100%
17
+ overflow-y: scroll
18
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
19
+ -webkit-text-size-adjust: 100%
20
+ -ms-text-size-adjust: 100%
21
+
22
+ body
23
+ margin: 0
24
+ font-size: 16px
25
+ line-height: 1.231
26
+ +font_stack
27
+ font-weight: normal
28
+ //color: #404040
29
+
30
+ button, input, select, textarea
31
+ +font_stack
32
+ font-weight: normal
33
+ //color: #404040
34
+
35
+ a
36
+ //color: #0067AF
37
+ text-decoration: none
38
+ outline: 0
39
+ outline: none
40
+ &:visited
41
+ //color: #0067AF
42
+ &:focus
43
+ outline: 0
44
+ outline: none
45
+ &:hover, &:active
46
+ outline: 0
47
+ outline: none
48
+ color: $accent
49
+
50
+ abbr[title]
51
+ border-bottom: 1px dotted
52
+
53
+ b, strong
54
+ +font_stack
55
+
56
+ blockquote
57
+ margin: 1em 40px
58
+
59
+ dfn
60
+ font-style: italic
61
+
62
+ hr
63
+ display: block
64
+ height: 1px
65
+ border: 0
66
+ border-top: 1px solid #ccc
67
+ margin: 1em 0
68
+ padding: 0
69
+
70
+ ins
71
+ background: #ff9
72
+ color: #000
73
+ text-decoration: none
74
+
75
+ mark
76
+ background: #ff0
77
+ color: #000
78
+ font-style: italic
79
+
80
+ pre, code, kbd, samp
81
+ font-family: monospace, monospace
82
+ _font-family: 'courier new', monospace
83
+ font-size: 1em
84
+
85
+ pre
86
+ white-space: pre
87
+ white-space: pre-wrap
88
+ word-wrap: break-word
89
+
90
+ q
91
+ quotes: none
92
+ &:before, &:after
93
+ content: ""
94
+ content: none
95
+
96
+ small
97
+ font-size: 85%
98
+
99
+ sub
100
+ font-size: 75%
101
+ line-height: 0
102
+ position: relative
103
+ vertical-align: baseline
104
+
105
+ sup
106
+ font-size: 75%
107
+ line-height: 0
108
+ position: relative
109
+ vertical-align: baseline
110
+ top: -0.5em
111
+
112
+ sub
113
+ bottom: -0.25em
114
+
115
+ ul, ol
116
+ margin: 0
117
+ padding: 0
118
+ list-style: none
119
+
120
+ dd
121
+ margin: 0 0 0 40px
122
+
123
+ nav
124
+ ul, ol
125
+ list-style: none
126
+ margin: 0
127
+ padding: 0
128
+
129
+ img
130
+ border: 0
131
+ -ms-interpolation-mode: bicubic
132
+
133
+ svg:not(:root)
134
+ overflow: hidden
135
+
136
+ figure, form
137
+ margin: 0
138
+
139
+ fieldset
140
+ border: 0
141
+ margin: 0
142
+ padding: 0
143
+
144
+ legend
145
+ border: 0
146
+ *margin-left: -7px
147
+ padding: 0
148
+
149
+ label
150
+ cursor: pointer
151
+
152
+ button, input, select, textarea
153
+ font-size: 100%
154
+ margin: 0
155
+ vertical-align: baseline
156
+ *vertical-align: middle
157
+
158
+ select
159
+ margin-top: 2px
160
+
161
+ button, input
162
+ line-height: normal
163
+ *overflow: visible
164
+
165
+ button
166
+ cursor: pointer
167
+ -webkit-appearance: button
168
+
169
+ input
170
+ &[type="button"], &[type="reset"], &[type="submit"]
171
+ cursor: pointer
172
+ -webkit-appearance: button
173
+ &[type="checkbox"], &[type="radio"]
174
+ box-sizing: border-box
175
+ &[type="search"]
176
+ -moz-box-sizing: content-box
177
+ -webkit-box-sizing: content-box
178
+ box-sizing: content-box
179
+
180
+ button::-moz-focus-inner, input::-moz-focus-inner
181
+ border: 0
182
+ padding: 0
183
+
184
+ textarea
185
+ overflow: auto
186
+ vertical-align: top
187
+
188
+ input:invalid, textarea:invalid
189
+ background-color: #f0dddd
190
+
191
+ table
192
+ border-collapse: collapse
193
+ border-spacing: 0
194
+
195
+ +font-face("grokkregular", font-files("grokk-webfont.woff#{$ver}", woff, "grokk-webfont.otf#{$ver}", opentype, "grokk-webfont.svg#grokkregular#{$ver}", svg), "grokk-webfont.eot#{$ver}", "normal", "normal")
196
+
197
+
198
+
199
+
200
+
201
+
202
+
203
+
204
+
205
+
206
+
207
+
208
+
@@ -0,0 +1,345 @@
1
+ $field_margin: $pad
2
+ $form_border_color: tint(#B8B8B8, 50%)
3
+ $label_color: #999999
4
+ $focus_color: #6BABC1
5
+ $field_height: 35px
6
+
7
+ =form_text_input_color
8
+ line-height: 40px
9
+ padding: 0 $pad/2
10
+ +inline_block
11
+ border: 1px solid $form_border_color
12
+ +border-radius(4px)
13
+ font-size: 22px
14
+ color: black
15
+ font-weight: 100
16
+ &:focus
17
+ outline: 0
18
+ border: 1px solid $focus_color
19
+ //+box-shadow(rgba($focus_color, 0.31) 0 0 4px, inset rgba(black, 0.10) 0 2px 3px 0)
20
+
21
+ // GENERAL FORM ELEMETS STYLINGS
22
+
23
+
24
+ // RADIO AND CHECKBOX (add a toggle to make it a toggle)
25
+ input
26
+ &[type=checkbox], &[type=radio]
27
+ -webkit-appearance: none
28
+ -moz-appearance: none
29
+ appearance: none
30
+ +inline_block
31
+ cursor: pointer
32
+ &[type=radio]
33
+ +border-radius(200px)
34
+ +background-image(linear-gradient(white, #ccc))
35
+ &[type=checkbox]
36
+ +border-radius(3px)
37
+ //+background-image(linear-gradient(#FEFCF8, #E7E3DA))
38
+ background: #D7DCDE
39
+ width: 25px
40
+ height: 25px
41
+ position: relative
42
+ +transition-property(all)
43
+ +transition-duration(0.2s)
44
+ +transition-timing-function(ease-in)
45
+ &:hover
46
+ background: shade(#D7DCDE, 5%)
47
+ &:checked
48
+ background: $accent
49
+ +box-shadow(rgba(black, 0.20) 0 2px 0 0 inset)
50
+ &:hover
51
+ background: shade($accent, 5%)
52
+ &:after
53
+ +icon_font
54
+ content: "/"
55
+ line-height: 27px
56
+ width: 100%
57
+ text-align: center
58
+ font-size: 16px
59
+ color: white
60
+ //text-shadow: rgba(white, 0.40) 0 1px 0
61
+ position: absolute
62
+ margin-top: -0.1em
63
+ &.toggle
64
+ +border-radius(30px)
65
+ +background-image(linear-gradient(#FEFCF8, #E2DDD3))
66
+ width: 60px
67
+ height: 27px
68
+ border: 1px solid #BBB9B5
69
+ +box-shadow(rgba(black, 0.20) 0 2px 4px 0 inset, rgba(white, 0.20) 0 1px 0 0)
70
+ position: relative
71
+ &:before
72
+ +icon_font
73
+ content: "/ x"
74
+ line-height: 29px
75
+ width: 100%
76
+ text-align: center
77
+ font-size: 16px
78
+ color: #85817E
79
+ text-shadow: rgba(white, 0.40) 0 1px 0
80
+ letter-spacing: 1px
81
+ position: absolute
82
+ &:after
83
+ +border-radius(300px)
84
+ content: " "
85
+ display: block
86
+ position: absolute
87
+ +background-image(linear-gradient(#FEFCF8, #E7E3DA))
88
+ width: 25px
89
+ height: 25px
90
+ border: 1px solid #BBB9B5
91
+ +box-shadow(white 0 1px 0 inset, rgba(black, 0.20) 0 2px 2px 0)
92
+ +transition-property(all)
93
+ +transition-duration(5.2s)
94
+ +transition-timing-function(ease-in)
95
+ top: -1px
96
+ left: -1px
97
+ right: initial
98
+ &:checked
99
+ +background-image(linear-gradient(#F9FCF8, #C3DCAE))
100
+ &:before
101
+ color: #739953
102
+ &:after
103
+ right: -1px
104
+ left: initial
105
+ +transition-property(all)
106
+ +transition-duration(5.2s)
107
+ +transition-timing-function(ease-in)
108
+
109
+ // Radio only
110
+ &[type=radio]
111
+ +border-radius(300px)
112
+ +background-image(linear-gradient(#FEFCF8, #E7E3DA))
113
+ width: 27px
114
+ height: 27px
115
+ border: 1px solid #BBB9B5
116
+ +box-shadow(white 0 1px 0 inset, rgba(black, 0.20) 0 2px 2px 0)
117
+ position: relative
118
+ +transition-property(all)
119
+ +transition-duration(5.2s)
120
+ +transition-timing-function(ease-in)
121
+ &:after
122
+ border: 1px solid #BBB9B5
123
+ +border-radius(300px)
124
+ content: " "
125
+ display: block
126
+ width: 11px
127
+ height: 11px
128
+ +background-image(linear-gradient(#E2DDD3, #E2DDD3))
129
+ position: absolute
130
+ top: 6px
131
+ left: 6px
132
+ +box-shadow(rgba(black, 0.20) 0 2px 4px 0 inset, rgba(white, 0.20) 0 1px 0 0)
133
+ &:checked
134
+ &:after
135
+ border: 1px solid #466923
136
+ +background-image(linear-gradient(#A6CC85, #4D722B))
137
+ +box-shadow(rgba(white, 0.20) 0 1px 0 inset, rgba(white, 0.20) 0 1px 0 0)
138
+
139
+
140
+ // TEXT
141
+ &[type="text"], &[type="password"]
142
+ +form_text_input_color
143
+
144
+
145
+ // TEXTAREA
146
+
147
+ textarea
148
+ +form_text_input_color
149
+ resize: none
150
+ line-height: 24px
151
+ font-size: 22px !important
152
+ font-weight: 100 !important
153
+ height: $field_height*3
154
+ padding: $pad/2
155
+
156
+
157
+
158
+ // select
159
+
160
+ select
161
+ -webkit-appearance: none
162
+ -moz-appearance: none
163
+ appearance: none
164
+ +background-image( image-url('/assets/dropdown_arrow.svg'), linear_gradient(tint(#F5F5F5, 30%), shade(#F5F5F5, 10%)) )
165
+ background-position: 95% 53%, 0 0
166
+ background-repeat: no-repeat, repeat
167
+ background-size: 8px 8px, auto auto
168
+ border: 1px solid shade(#F5F5F5, 20%)
169
+ border-top: 1px solid shade(#F5F5F5, 10%)
170
+ border-bottom: 1px solid shade(#F5F5F5, 40%)
171
+ outline: 0
172
+ text-decoration: none
173
+ line-height: 1em
174
+ +font_stack
175
+ width: auto
176
+ +inline-block
177
+ padding: 8px 24px 8px 11px
178
+ font-size: 1em
179
+ +border-radius(2px)
180
+ +box-shadow(rgba(white, 0.15) 1px 1px 0 inset, rgba(white, 0.15) -1px -1px 0 0 inset, rgba(white, 0.1) 0 1px 0 0)
181
+ +text_color(#F5F5F5)
182
+ cursor: pointer
183
+ &:hover, &:active
184
+ +background-image( image-url('/assets/dropdown_arrow.svg'), linear_gradient(shade(#FFFFFF, 1%), shade(#F5F5F5, 8%)) )
185
+ background-position: 95% 53%, 0 0
186
+ background-repeat: no-repeat, repeat
187
+ background-size: 8px 8px, auto auto
188
+ +box-shadow(rgba(black, 0.6) 0 2px 4px inset, rgba(white, 0.1) 0 1px 0 0)
189
+ +text_color(shade(#F5F5F5, 10%))
190
+
191
+ // form fields
192
+ .form
193
+ .field
194
+ display: block
195
+ padding: 0
196
+ position: relative
197
+ margin-bottom: $pad
198
+ width: auto
199
+ height: auto
200
+ +group
201
+ label, span.optional
202
+ display: block
203
+ color: $label_color
204
+ font-size: 15px
205
+ line-height: 20px
206
+ span.optional
207
+ position: absolute
208
+ top: 2px
209
+ right: 0
210
+ input[type="text"], input[type="password"], textarea, select
211
+ display: block
212
+ width: 100%
213
+ &.left
214
+ margin: 10px 39px 3px 0
215
+ &.right
216
+ margin: 10px 0 3px 0
217
+ &.full
218
+ textarea
219
+ width: 98%
220
+ resize: none
221
+ height: auto
222
+ padding: 1%
223
+ display: block
224
+ line-height: 18px
225
+ &.outline
226
+ +inline_block
227
+ +btn(white)
228
+ padding: 5px
229
+ margin: 10px $pad*2 3px 0
230
+ input[type=checkbox]
231
+ ~ span
232
+ margin: 0 $pad/1.5 0 $pad
233
+ line-height: 25px
234
+ color: #D7DCDE
235
+ &.icon
236
+ text-transform: none !important
237
+ font-size: 25px
238
+ position: relative
239
+ //top: -0.1em
240
+ &:hover
241
+ input[type=checkbox]
242
+ background: tint(black, 40%)
243
+ &:checked
244
+ background: shade($accent, 5%)
245
+ ~ span
246
+ color: tint(black, 40%)
247
+ &.icon
248
+
249
+
250
+
251
+
252
+
253
+
254
+ &.inside
255
+ .formfield
256
+ margin: $pad 0
257
+ padding: 2px 10px
258
+ position: relative
259
+ width: 291px
260
+ &.check
261
+ background: none
262
+ +box-shadow(none)
263
+ border: none
264
+ padding: 0
265
+ width: auto
266
+ label
267
+ line-height: 15px
268
+ font-weight: normal
269
+ color: white
270
+ a
271
+ color: #A6DFFD
272
+ border-bottom: 1px dashed #A6DFFD
273
+ &:hover
274
+ color: white
275
+ border-bottom: none
276
+ &:hover
277
+ +box-shadow(none)
278
+ &.drop
279
+ background: none
280
+ +box-shadow(none)
281
+ border: none
282
+ padding: 0
283
+ width: auto
284
+ &:hover
285
+ +box-shadow(none)
286
+ &.small
287
+ width: 200px
288
+ .hoverhelp
289
+ width: 27px
290
+ height: 20px
291
+ background: url("../images/content/home_sprite.png#{$ver}") 0 -269px no-repeat
292
+ display: block
293
+ position: absolute
294
+ right: -10px
295
+ top: 6px
296
+ label
297
+ +inline_block
298
+ font-size: 11px
299
+ line-height: 21px
300
+ font-weight: bold
301
+ .req
302
+ color: #F05A4F
303
+ margin-right: 5px
304
+ input[type="text"], input[type="password"]
305
+ background: none
306
+ border: none
307
+ height: 18px
308
+ padding: 0 5px
309
+ +inline_block
310
+ line-height: 20px
311
+ width: auto
312
+ outline: none
313
+ font-weight: bold
314
+ +box-shadow(none)
315
+ font-size: 11px
316
+ &:focus
317
+ outline: none
318
+ &.errorField
319
+ border: 1px solid #BA2528
320
+ &:before, & .before
321
+ content: ''
322
+ before: ''
323
+ width: 27px
324
+ height: 20px
325
+ background: url("../images/content/home_sprite.png#{$ver}") 0 -249px no-repeat
326
+ display: block
327
+ position: absolute
328
+ right: 10px
329
+ .hoverhelp
330
+ right: 9px
331
+ background: none
332
+ &:hover, &.hover
333
+ +box-shadow(rgba(black, 0.12) 0 1px 2px inset, rgba(white, 0.65) 0 1px 0 0, rgba(#00A8FF, .34) 0 1px 8px 0)
334
+ .group
335
+ margin: $pad 0
336
+ &.nopad
337
+ margin: 0
338
+ .button
339
+ margin: 0
340
+ .formfield
341
+ margin: 0 !important
342
+ float: left
343
+ width: 294px
344
+ & + .formfield
345
+ float: right