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,274 @@
1
+ =amp
2
+ font-family: Baskerville, "Goudy Old Style", serif
3
+ font-weight: normal
4
+ font-style: italic
5
+
6
+ =offscreen
7
+ position: absolute
8
+ left: -9999px
9
+ top: -9999px
10
+ display: block
11
+
12
+ =font_stack
13
+ font-family: "source-sans-pro"
14
+
15
+ =serif
16
+ font-family: "ff-meta-serif-web-pro"
17
+
18
+ =logo_serif
19
+ font-family: "rooney-web"
20
+
21
+ =inline_block
22
+ display: -moz-inline-stack
23
+ display: inline-block
24
+ vertical-align: top
25
+ zoom: 1
26
+ *display: inline
27
+
28
+ =group
29
+ &:before, &:after
30
+ content: ""
31
+ display: table
32
+ &:after
33
+ clear: both
34
+ *zoom: 1
35
+
36
+ =transition($time:0.5)
37
+ +transition-property(all)
38
+ +transition-duration($time + s)
39
+ +transition-timing-function(ease-in)
40
+
41
+ =min_height($size)
42
+ min-height: $size
43
+ height: auto !important
44
+ height: $size
45
+
46
+ =min_width($size)
47
+ min-width: $size
48
+ width: auto !important
49
+ width: $size
50
+
51
+ =max_height($size)
52
+ max-height: $size
53
+ height: auto !important
54
+ height: $size
55
+
56
+ =text_color($base_color, $shadow: true)
57
+ @if lightness($base_color) > 75%
58
+ color: shade($base_color, 60%)
59
+ @if $shadow
60
+ text-shadow: rgba(white, .2 + lightness($base_color) * .8 / 100) 0 1px 0
61
+ @else
62
+ color: tint($base_color, 95%)
63
+ @if $shadow
64
+ text-shadow: rgba(black, .4) 0 -1px 1px
65
+
66
+ =smart_gradient($base_color, $direction: both)
67
+ +text_color($base_color)
68
+ @if $direction == both
69
+ //$experimental-support-for-svg: true
70
+ +background(linear_gradient(tint($base_color, 30%), shade($base_color, 10%)))
71
+ @else if $direction == top
72
+ +background(linear_gradient(tint($base_color, 50%), $base_color 85%))
73
+ @else if $direction == bottom
74
+ +background(linear_gradient($base_color, shade($base_color, 30%)))
75
+
76
+ =smart_border($base_color, $direction: both)
77
+ @if $direction == both
78
+ border: 1px solid shade($base_color, 20%)
79
+ border-top: 1px solid shade($base_color, 10%)
80
+ border-bottom: 1px solid shade($base_color, 40%)
81
+ @else if $direction == top
82
+ border: 1px solid shade($base_color, 20%)
83
+ border-top: 1px solid $base_color
84
+ @else if $direction == bottom
85
+ border: 1px solid shade($base_color, 30%)
86
+ border-top: 1px solid shade($base_color, 15%)
87
+ border-bottom: 1px solid shade($base_color, 50%)
88
+
89
+ =btn_color($base_color, $behind: null)
90
+ +smart_gradient($base_color)
91
+ @if $behind == null
92
+ +smart_border($base_color)
93
+ @else
94
+ +smart_border($behind)
95
+
96
+ =btn_flat($base_color, $behind: null)
97
+ outline: 0
98
+ text-align: center
99
+ text-transform: capitalize
100
+ text-decoration: none
101
+ font-weight: 600
102
+ line-height: 1em
103
+ +font_stack
104
+ width: auto
105
+ +inline-block
106
+ padding: 8px 11px
107
+ font-size: 1em
108
+ +border-radius(2px)
109
+ +box-shadow(rgba(white, 0.3) 0 1px 0 inset, rgba(black, 0.20) 0 2px 2px 0)
110
+ cursor: pointer
111
+ +btn_color($base_color, $behind)
112
+ border: 0
113
+ &:hover
114
+ +box-shadow(rgba(white, 0.6) 0 1px 3px inset, rgba(black, 0.20) 0 2px 2px 0)
115
+ +btn_color(tint($base_color, 10%), $behind)
116
+ &:active
117
+ +box-shadow(rgba(black, 0.6) 0 2px 4px inset, rgba(black, 0.50) 0 1px 0 0)
118
+ +btn_color(shade($base_color, 10%), $behind)
119
+
120
+ =btn($base_color, $behind: null)
121
+ outline: 0
122
+ border: 0
123
+ text-align: center
124
+ text-transform: capitalize
125
+ text-decoration: none
126
+ font-weight: 600
127
+ line-height: 1em
128
+ +font_stack
129
+ width: auto
130
+ +inline-block
131
+ padding: 10px 13px
132
+ font-size: 1em
133
+ +border-radius(2px)
134
+ cursor: pointer
135
+ background: $base_color
136
+ +text_color($base_color)
137
+ +text-shadow(none)
138
+ @if lightness($base_color) == 100%
139
+ border: 1px solid shade($base_color, 10%)
140
+ +border-radius(3px)
141
+ &:hover, &:active
142
+ @if lightness($base_color) == 100%
143
+ border: 1px solid shade($base_color, 20%)
144
+ background: shade($base_color, 10%)
145
+ +box-shadow(shade($base_color, 20%) 0 2px 0 inset)
146
+ +text_color($base_color)
147
+ +text-shadow(none)
148
+
149
+ =shadow_scroll($background: #E5E5E5, $top: 62px, $left: 56px, $right: 0, $height: 10px, $z-index: 1111)
150
+ &:before
151
+ content: ""
152
+ display: block
153
+ +background(linear_gradient(rgba(black, 0.2), rgba(black, 0)))
154
+ position: fixed
155
+ top: $top
156
+ height: ($height)/2
157
+ left: $left
158
+ right: $right
159
+ width: 100%
160
+ z-index: $z-index
161
+ &:after
162
+ content: ""
163
+ display: block
164
+ +background(linear_gradient($background 60%, rgba($background, 0)))
165
+ position: absolute
166
+ top: 0
167
+ height: $height
168
+ left: 0
169
+ width: 100%
170
+ z-index: ($z-index)+1
171
+
172
+
173
+
174
+ =text_replace
175
+ text-indent: 100%
176
+ white-space: nowrap
177
+ overflow: hidden
178
+ display: block
179
+
180
+ =complement($color)
181
+ adjust-hue($color, 180deg)
182
+
183
+ =text_truncate
184
+ position: relative
185
+ overflow: hidden
186
+ white-space: nowrap
187
+ text-overflow: ellipsis
188
+ -o-text-overflow: ellipsis
189
+ -ms-text-overflow: ellipsis
190
+
191
+ //doesn't work on typekit fonts
192
+ =multiline_text_truncate($lines: 2)
193
+ overflow : hidden
194
+ text-overflow: ellipsis
195
+ display: -webkit-box
196
+ -webkit-line-clamp: $lines
197
+ -webkit-box-orient: vertical
198
+
199
+ =retina
200
+ @media (-webkit-min-device-pixel-ratio: 2)
201
+ @content
202
+
203
+ =at-landscape
204
+ @media screen and (orientation:landscape)
205
+ @content
206
+
207
+ =supports-transform
208
+ @media all and (-webkit-transform-3d)
209
+ @content
210
+
211
+ =at-retina($asset, $width, $height)
212
+ @media (-webkit-min-device-pixel-ratio: 2)
213
+ background-image: url($asset)
214
+ background-size: $width, $height
215
+
216
+ =mobile-only($include_portrait_tablet: false)
217
+ @if $include_portrait_tablet == true
218
+ @media screen and (max-width: $mobile), (orientation: portrait)
219
+ @content
220
+ @else
221
+ @media screen and (max-width: $mobile)
222
+ @content
223
+
224
+ =tablet-only
225
+ @media screen and (min-device-width: $tablet) and (max-device-width: $desktop)
226
+ @content
227
+
228
+ =tablet-and-above
229
+ @media screen and (min-width: $tablet)
230
+ @content
231
+
232
+ =desktop-only
233
+ @media screen and (min-width: $desktop)
234
+ @content
235
+
236
+ =desktop-large
237
+ @media screen and (min-width: $large_desktop)
238
+ @content
239
+
240
+ =media_min_width($size)
241
+ @media screen and (min-width: $size)
242
+ @content
243
+
244
+ =media_max_width($size)
245
+ @media screen and (max-width: $size)
246
+ @content
247
+
248
+ =icon_font
249
+ font-family: 'grokkregular'
250
+ font-weight: normal !important
251
+ -webkit-font-smoothing: antialiased
252
+
253
+ =icon_inline
254
+ +icon_font
255
+ position: relative
256
+ content: attr(data-icon)
257
+ text-transform: none
258
+ vertical-align: baseline
259
+ line-height: 0
260
+ font-size: 1.4em
261
+ top: 0.1em
262
+
263
+ =shadow_base
264
+ +box-shadow(rgba(#000, .3) 0 1px 4px, rgba(#000, .1) 0 0 40px 0 true)
265
+ &:before, &:after
266
+ content: ""
267
+ position: absolute
268
+ z-index: -2
269
+
270
+ =shadow_raised
271
+ +shadow-base
272
+ -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.05) inset
273
+ -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.05) inset
274
+ box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.05) inset
@@ -0,0 +1,163 @@
1
+ @import libs/animate
2
+ @import libs/animate/shared
3
+ @import libs/animate/animations/bouncing-entrances/bounceInUp
4
+ @import libs/animate/animations/bouncing-exits/bounceOutDown
5
+
6
+ //Need to add this here as it is a global module
7
+ @import partials/uielements/modals/create_collections
8
+
9
+ $modal_footer_height: (68px)-$pad
10
+ $borderColor: #cacaca
11
+
12
+ .dialog_open .dialog_container
13
+ .pageOverlay
14
+ +transition
15
+ +opacity(0.5)
16
+ .dialog
17
+ +opacity(1)
18
+ +animation-name(bounceInUp)
19
+ +animation-duration(0.5s)
20
+ +animation-timing-function(ease)
21
+ .dialog_close .dialog_container
22
+ .dialog
23
+ +animation-name(bounceOutDown)
24
+ +animation-duration(1s)
25
+ +animation-timing-function(ease)
26
+
27
+
28
+ .dialog_container
29
+ position: fixed
30
+ top: 0
31
+ left: 0
32
+ z-index: 5000
33
+ .pageOverlay
34
+ +transition
35
+ background: black
36
+ position: fixed
37
+ top: 0
38
+ left: 0
39
+ z-index: 99
40
+ height: 100%
41
+ width: 100%
42
+ +opacity(0)
43
+ .dialog
44
+ width: auto
45
+ +opacity(0)
46
+ position: fixed
47
+ top: 50%
48
+ left: 50%
49
+ z-index: 100
50
+ background: #fff
51
+ +box-shadow(rgba(black, 0.4) 0 2px 12px)
52
+ padding-bottom: $modal_footer_height
53
+ .content
54
+ background: #fff
55
+ display: block
56
+ > h1
57
+ background: #FAFAFA
58
+ position: absolute
59
+ width: 100%
60
+ z-index: 10
61
+ line-height: 55px
62
+ text-transform: capitalize
63
+ padding: 0 0 0 $pad*2
64
+ font-weight: 800
65
+ font-size: 25px
66
+ color: shade(#FAFAFA, 10%)
67
+ span.container
68
+ background: none !important
69
+ display: block
70
+ .closeDialog
71
+ color: shade(#FAFAFA, 10%)
72
+ position: absolute
73
+ border-top: 0
74
+ right: 0px
75
+ top: 0px
76
+ display: block
77
+ padding: 0 $pad*2
78
+ +icon_font
79
+ text-transform: none
80
+ &:hover
81
+ color: $accent
82
+ .dialogBody
83
+ padding: 55px $pad $pad $pad
84
+ height: 100%
85
+ overflow-y: auto
86
+ +group
87
+ .container
88
+ width: auto
89
+ height: auto
90
+ background: none !important
91
+ .field
92
+ input, textarea
93
+ .share_item
94
+ .card_wrapper
95
+ width: 260px
96
+ border: 1px solid #ccc
97
+ box-shadow: 1px 3px 4px rgba(0,0,0,0.3)
98
+ footer
99
+ a
100
+ visibility: hidden
101
+ .bottom_footer
102
+ display: none
103
+ .dialogFooter
104
+ padding: $pad
105
+ font-size: 18px
106
+ line-height: 36px
107
+ position: absolute
108
+ bottom: 0
109
+ width: 100%
110
+ +group
111
+ a
112
+ float: right
113
+ +btn(#fff)
114
+ margin-left: $pad
115
+ &.defaultButton
116
+ +btn($accent)
117
+ float: left
118
+ margin-left: 0
119
+ margin-right: $pad
120
+ &.full
121
+ .dialog
122
+ position: fixed
123
+ +media_max_width(900px)
124
+ width: 85% !important
125
+ +mobile_only
126
+ width: 95% !important
127
+ .dialogBody
128
+ height: 100%
129
+ overflow-y: auto
130
+
131
+
132
+
133
+
134
+
135
+ // WRONG PLACE FOR THIS
136
+ .colorpicker
137
+ .preview
138
+ float: left
139
+ width: 50px
140
+ height: 50px
141
+ margin: 0 10px 0 0
142
+ border: 1px solid #efefef
143
+ #picker
144
+ cursor: crosshair
145
+
146
+
147
+ // WRONG PLACE FOR THIS
148
+ #idea_modal
149
+ width: 500px
150
+ label
151
+ display: block
152
+ margin-bottom: 5px
153
+ input, textarea
154
+ width: 100%
155
+ font-size: 14px
156
+ padding: 5px
157
+ border: 1px solid $borderColor
158
+ input#inputTitle
159
+ margin-bottom: 15px
160
+ textarea
161
+ margin-bottom: 5px
162
+
163
+