express_ui 0.2.0 → 0.2.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 (27) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/express_ui/application.js +2 -0
  3. data/app/assets/stylesheets/express_ui/{style.sass → application.sass} +2 -2
  4. data/app/assets/stylesheets/express_ui/atoms/{_variables.sass → _01_variables.sass} +0 -28
  5. data/app/assets/stylesheets/express_ui/atoms/_02_mixins.sass +266 -0
  6. data/app/assets/stylesheets/express_ui/atoms/_animations.sass +0 -12
  7. data/app/assets/stylesheets/express_ui/atoms/_buttons.sass +0 -18
  8. data/app/assets/stylesheets/express_ui/atoms/_headings.sass +0 -25
  9. data/app/assets/stylesheets/express_ui/atoms/_media_queries.sass +0 -40
  10. data/app/assets/stylesheets/express_ui/atoms/_typography.sass +0 -80
  11. data/app/assets/stylesheets/express_ui/molecules/_container.sass +0 -5
  12. data/app/assets/stylesheets/express_ui/molecules/_form_groups.sass +0 -12
  13. data/app/assets/stylesheets/express_ui/molecules/_forms.sass +0 -15
  14. data/app/assets/stylesheets/express_ui/organisms/_sidebar.sass +0 -18
  15. data/app/assets/stylesheets/express_ui/scripts/_accordion.sass +13 -2
  16. data/app/assets/stylesheets/express_ui/styleguide.sass +1 -1
  17. data/app/assets/stylesheets/express_ui/templates/_master_detail.sass +0 -7
  18. data/app/views/express_ui/pages/login.html.erb +46 -26
  19. data/app/views/express_ui/scripts/_accordion.html.et +43 -5
  20. data/app/views/express_ui/scripts/index.html.erb +1 -4
  21. data/app/views/express_ui/uicomponents/_pages.html.erb +1 -1
  22. data/app/views/express_ui/uicomponents/index.html.et +1 -1
  23. data/lib/express_ui/version.rb +1 -1
  24. data/vendor/assets/javascripts/quickaccord.js +256 -0
  25. metadata +31 -31
  26. data/app/assets/stylesheets/express_ui/application.css +0 -3
  27. data/app/assets/stylesheets/express_ui/atoms/_mixins.sass +0 -33
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 38f7fdbd6b91c8b15858ee9cca1a7df85f857c6d
4
- data.tar.gz: 9c3f86b2257146e29e9416d47adc34c9ae12bb2c
3
+ metadata.gz: 75e1e5572ca4d44eb9962fa276654364155cd277
4
+ data.tar.gz: 1f4bb353592ebb1bee249c9ce6f9eb77294cf741
5
5
  SHA512:
6
- metadata.gz: cc8489280f5068aa146edfbc03cb0686d14f4a1711e1c1859cbea77de925d460f7d43ecccc378c51b653e781e4027c4a3f1d3e9277798360f49c8c0e40ed12fe
7
- data.tar.gz: 3a7cd9e7acfff95c3dccffb4d825709d0669dc348ccd342b4d6049276cd698f228991f1c66bc3e6891a7cabb0d7bde620c277f321aed9d1d75df3e341bf0b21d
6
+ metadata.gz: b8f97a85011fddc1e9aa973e795d0f1661ce10a9c6975289e8539a6ef9641a383c0e606b4fb29c216b24cc62c93a6e71a27974cf64c5c9e965bb916e9466f76b
7
+ data.tar.gz: 4e1239f77a8d21c916f791f951a5f5a7e1d704e0662724c62b064852a549084b50ee9023ca95ba89f216267bdd05c9a48d66da7c8f4355b6d9406d5d16c8ba02
@@ -13,11 +13,13 @@
13
13
  //= require picker.date
14
14
  //= require forms
15
15
  //= require ion.rangeSlider
16
+ //= require quickaccord
16
17
 
17
18
  $(document).ready(function() {
18
19
  $('.ae-popup-link').magnificPopup();
19
20
  $('.ae-calendar').fullCalendar();
20
21
  $('.ae-select').select2();
22
+ $('.ae-accordion-trigger').QuickAccord();
21
23
  $('.ae-open-filter').click(function() {
22
24
  $(this).parent().siblings( '.ae-table-filter' ).toggleClass('ae-hidden');
23
25
  return false;
@@ -1,7 +1,7 @@
1
1
  // Global – Do not change order
2
- @import "atoms/mixins"
2
+ @import "atoms/01_variables"
3
+ @import "atoms/02_mixins"
3
4
  @import "atoms/animations"
4
- @import "atoms/variables"
5
5
  @import "atoms/media_queries"
6
6
  @import "atoms/typography"
7
7
  // End Global
@@ -1,58 +1,30 @@
1
1
  $primary-color: #6699CC
2
-
3
2
  $primary-active-color: #477db0
4
-
5
3
  $secondary-color: #999999
6
-
7
4
  $sidebar-caret-icon: #ffffff
8
-
9
5
  $success: #3c763d
10
-
11
6
  $cancelled: #a94442
12
-
13
7
  $pending: #faf2cc
14
-
15
8
  $deleted: lighten($secondary-color, 30%)
16
-
17
9
  $border-dark: $secondary-color
18
-
19
10
  $border-light: #eaeaea
20
-
21
11
  $body-color: #666
22
-
23
12
  $body-background: #fff
24
-
25
13
  $heading-color: #333
26
-
27
14
  $link-color: $primary-color
28
-
29
15
  $body-lighter: #999
30
-
31
16
  $icon-color: #333
32
-
33
17
  $smartphone: 480px
34
-
35
18
  $tablet: 768px
36
-
37
19
  $laptop: 1024px
38
-
39
20
  $desktop: 1440px
40
-
41
21
  $gray-background: #F7F7F7
42
-
43
22
  $thead-color: #888
44
-
45
23
  $dark-gray-background: rgba(#ccc, 0.1)
46
-
47
24
  $container: 960px
48
-
49
25
  $line-height: 14px
50
-
51
26
  $font-size-root: 62.5%
52
-
53
27
  $header-height: 55px
54
-
55
28
  $header-max-height: 60px
56
-
57
29
  $container-padding: 0.25em
58
30
  // Because all browsers have a default font-size of 16px, setting the font-size to 62.5% on the html element gives it a font-size of 10px (10 / 16 * 100 = 62.5)
@@ -0,0 +1,266 @@
1
+ // All these mixins need to be present in the app.
2
+ @mixin border-radius($n)
3
+ -moz-border-radius: $n
4
+ -webkit-border-radius: $n
5
+ border-radius: $n
6
+
7
+ @mixin box-shadow($top, $left, $blur, $color, $inset:"")
8
+ -webkit-box-shadow: $top $left $blur $color #{$inset}
9
+ -moz-box-shadow: $top $left $blur $color #{$inset}
10
+ box-shadow: $top $left $blur $color #{$inset}
11
+
12
+ @mixin well
13
+ margin: 0
14
+ background: $gray-background
15
+ @include border-radius(2px)
16
+ @include box-shadow(inset 0, 0, 3px, $border-dark)
17
+ @include animate(0.5s)
18
+
19
+ &:hover
20
+ background: rgba($primary-color, 0.1)
21
+
22
+ *
23
+ color: #333
24
+
25
+ @mixin clearfix
26
+ overflow: auto
27
+
28
+ &:before, &:after
29
+ content: ""
30
+ display: table
31
+
32
+
33
+ @mixin easeInOut
34
+ -moz-transition: all 0.3s ease-in-out
35
+ -o-transition: all 0.3s ease-in-out
36
+ -webkit-transition: all 0.3s ease-in-out
37
+ transition: all 0.3s ease-in-out
38
+
39
+ @mixin animate($n)
40
+ transition: all $n ease-out
41
+
42
+ @mixin scale
43
+ transform: scale(1.1)
44
+
45
+ @mixin button
46
+ @include border-radius(3px)
47
+ padding: 0.5em
48
+ margin: 0.25em 0.25em 0 0
49
+ border: 0
50
+ cursor: pointer
51
+ text-align: center
52
+
53
+ @mixin btn-type($type)
54
+ background: $type
55
+ border: 1px solid $type
56
+
57
+ &.ae-btn-border
58
+ color: $type !important
59
+
60
+ &:active, &:focus
61
+ @include box-shadow(inset, 2px, 2px, 2px, darken($type, 20%))
62
+
63
+ @mixin h1
64
+ @include font-size(32px, 32px)
65
+
66
+ @mixin h2
67
+ @include font-size(28px, 28px)
68
+
69
+ @mixin h3
70
+ @include font-size(24px, 24px)
71
+
72
+ @mixin h4
73
+ @include font-size(20px, 20px)
74
+
75
+ @mixin h5
76
+ @include font-size(16px, 16px)
77
+
78
+ @mixin h6
79
+ @include font-size(12px, 12px)
80
+
81
+ @mixin heading($border-color, $casing)
82
+ text-transform: $casing
83
+ border-bottom: 1px solid $border-color
84
+ padding-bottom: 0.5em
85
+
86
+ // $casing: uppercase, default
87
+
88
+
89
+ @mixin smartphone
90
+ @media only screen and (min-width: $smartphone)
91
+ @content
92
+
93
+ @mixin smartphone-max
94
+ @media only screen and (max-width: $smartphone)
95
+ @content
96
+
97
+ @mixin tablet
98
+ @media only screen and (min-width: $tablet)
99
+ @content
100
+
101
+ @mixin tablet-max
102
+ @media only screen and (max-width: $tablet)
103
+ @content
104
+
105
+ @mixin laptop
106
+ @media only screen and (min-width: $laptop)
107
+ @content
108
+
109
+ @mixin laptop-max
110
+ @media only screen and (max-width: $laptop)
111
+ @content
112
+
113
+ @mixin desktop
114
+ @media only screen and (min-width: $desktop)
115
+ @content
116
+
117
+ @mixin desktop-only
118
+ display: none !important
119
+
120
+ @include tablet
121
+ display: inline-block !important
122
+
123
+ @mixin mobile-only
124
+ display: block
125
+
126
+ @include tablet
127
+ display: none !important
128
+
129
+
130
+ @mixin body-font
131
+ font-family: 'Lato', sans-serif
132
+
133
+ @mixin header-font
134
+ font-family: 'Lato', sans-serif
135
+
136
+ @mixin icon-font
137
+ font-family: FontAwesome
138
+
139
+ @function rem($size)
140
+ $remSize: $size / 16px
141
+ @return #{$remSize}rem
142
+
143
+ @mixin font-size($size, $large_size)
144
+ font-size: rem($size)
145
+
146
+ @include tablet
147
+ font-size: rem($large_size*1.3)
148
+
149
+ @include desktop
150
+ font-size: rem($large_size*1.5)
151
+
152
+ @mixin p
153
+ @include font-size(18px, 24px)
154
+ font-weight: normal
155
+
156
+
157
+ @mixin ae-margin-left
158
+ margin-left: 0.25em
159
+
160
+ @mixin ae-margin-right
161
+ margin-right: 0.25em
162
+
163
+ @mixin status
164
+ @include border-radius(2px)
165
+ padding: 4px 10px
166
+ font-weight: bold
167
+ text-transform: uppercase
168
+
169
+ @mixin status-success
170
+ background: $success
171
+ color: #fff !important
172
+
173
+ @mixin status-error
174
+ background: $cancelled
175
+ color: #fff !important
176
+
177
+ @mixin status-pending
178
+ background: $pending
179
+ color: darken($pending, 60%)
180
+
181
+ @mixin status-deleted
182
+ background: $deleted
183
+ color: #999
184
+
185
+ @mixin badge
186
+ background: $primary-color
187
+ color: #fff
188
+ @include border-radius(20px)
189
+ margin-left: 10px
190
+ padding: 4px 10px
191
+ font-weight: bold
192
+ text-transform: uppercase
193
+
194
+ @mixin badge-success
195
+ background: $success
196
+ color: #fff !important
197
+
198
+ @mixin badge-error
199
+ background: $cancelled
200
+ color: #fff !important
201
+
202
+ @mixin badge-pending
203
+ background: $pending
204
+ color: darken($pending, 60%) !important
205
+
206
+ @mixin badge-deleted
207
+ background: $deleted
208
+ color: #999 !important
209
+
210
+ @mixin container-table
211
+ display: table
212
+
213
+ @mixin container-table-cell
214
+ display: table-cell
215
+
216
+ @mixin fa-input
217
+ position: absolute
218
+ top: 30%
219
+ left: 15px
220
+ color: $body-color
221
+
222
+ @include tablet-max
223
+ top: 34%
224
+
225
+ @include desktop
226
+ top: 30%
227
+
228
+ @mixin input
229
+ border: 1px solid $border-dark
230
+ width: 100%
231
+ @include border-radius(3px)
232
+ @include box-shadow(inset, 2px, 2px, 2px, lighten($border-dark, 20%))
233
+ outline: none
234
+ @include easeInOut
235
+ margin: 10px 0
236
+ @include body-font
237
+ vertical-align: top
238
+
239
+ &:focus
240
+ border: 1px solid $primary-color
241
+ @include box-shadow(0, 0, 5px, 0, $primary-color)
242
+
243
+ @mixin sidebar($width)
244
+ .ae-sidebar-left
245
+ width: $width
246
+
247
+ @include laptop
248
+ width: 250px
249
+
250
+ @mixin sidebar-fixed($width)
251
+ .ae-sidebar-left
252
+ width: $width
253
+ position: fixed
254
+
255
+ @include laptop
256
+ max-width: 250px
257
+
258
+ .ae-content
259
+ left: $width
260
+
261
+ @mixin sidebar-right($width)
262
+ .ae-content
263
+ right: $width
264
+
265
+ .ae-sidebar-right
266
+ width: $width
@@ -1,15 +1,3 @@
1
- @mixin easeInOut
2
- -moz-transition: all 0.3s ease-in-out
3
- -o-transition: all 0.3s ease-in-out
4
- -webkit-transition: all 0.3s ease-in-out
5
- transition: all 0.3s ease-in-out
6
-
7
- @mixin animate($n)
8
- transition: all $n ease-out
9
-
10
- @mixin scale
11
- transform: scale(1.1)
12
-
13
1
  .ae-fade-in
14
2
  &:hover
15
3
  animation: fadeIn 1s linear
@@ -1,21 +1,3 @@
1
- @mixin button
2
- @include border-radius(3px)
3
- padding: 0.5em
4
- margin: 0.25em 0.25em 0 0
5
- border: 0
6
- cursor: pointer
7
- text-align: center
8
-
9
- @mixin btn-type($type)
10
- background: $type
11
- border: 1px solid $type
12
-
13
- &.ae-btn-border
14
- color: $type !important
15
-
16
- &:active, &:focus
17
- @include box-shadow(inset, 2px, 2px, 2px, darken($type, 20%))
18
-
19
1
  .ae-btn
20
2
  @include easeInOut
21
3
  @include button
@@ -1,28 +1,3 @@
1
- @mixin h1
2
- @include font-size(32px, 32px)
3
-
4
- @mixin h2
5
- @include font-size(28px, 28px)
6
-
7
- @mixin h3
8
- @include font-size(24px, 24px)
9
-
10
- @mixin h4
11
- @include font-size(20px, 20px)
12
-
13
- @mixin h5
14
- @include font-size(16px, 16px)
15
-
16
- @mixin h6
17
- @include font-size(12px, 12px)
18
-
19
- @mixin heading($border-color, $casing)
20
- text-transform: $casing
21
- border-bottom: 1px solid $border-color
22
- padding-bottom: 0.5em
23
-
24
- // $casing: uppercase, default
25
-
26
1
  h1, h2, h3, h4, h5, h6
27
2
  padding-top: 1.25em
28
3
  margin-bottom: 0.25em
@@ -1,43 +1,3 @@
1
- @mixin smartphone
2
- @media only screen and (min-width: $smartphone)
3
- @content
4
-
5
- @mixin smartphone-max
6
- @media only screen and (max-width: $smartphone)
7
- @content
8
-
9
- @mixin tablet
10
- @media only screen and (min-width: $tablet)
11
- @content
12
-
13
- @mixin tablet-max
14
- @media only screen and (max-width: $tablet)
15
- @content
16
-
17
- @mixin laptop
18
- @media only screen and (min-width: $laptop)
19
- @content
20
-
21
- @mixin laptop-max
22
- @media only screen and (max-width: $laptop)
23
- @content
24
-
25
- @mixin desktop
26
- @media only screen and (min-width: $desktop)
27
- @content
28
-
29
- @mixin desktop-only
30
- display: none !important
31
-
32
- @include tablet
33
- display: inline-block !important
34
-
35
- @mixin mobile-only
36
- display: block
37
-
38
- @include tablet
39
- display: none !important
40
-
41
1
  .ae-mobile-only
42
2
  @include mobile-only
43
3
 
@@ -1,31 +1,5 @@
1
1
  @import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i')
2
2
 
3
- @mixin body-font
4
- font-family: 'Lato', sans-serif
5
-
6
- @mixin header-font
7
- font-family: 'Lato', sans-serif
8
-
9
- @mixin icon-font
10
- font-family: FontAwesome
11
-
12
- @function rem($size)
13
- $remSize: $size / 16px
14
- @return #{$remSize}rem
15
-
16
- @mixin font-size($size, $large_size)
17
- font-size: rem($size)
18
-
19
- @include tablet
20
- font-size: rem($large_size*1.3)
21
-
22
- @include desktop
23
- font-size: rem($large_size*1.5)
24
-
25
- @mixin p
26
- @include font-size(18px, 24px)
27
- font-weight: normal
28
-
29
3
  .ae-u-text-left
30
4
  text-align: left
31
5
 
@@ -50,35 +24,6 @@
50
24
  .ae-u-hidden
51
25
  display: none
52
26
 
53
- @mixin ae-margin-left
54
- margin-left: 0.25em
55
-
56
- @mixin ae-margin-right
57
- margin-right: 0.25em
58
-
59
- @mixin status
60
- @include border-radius(2px)
61
- padding: 4px 10px
62
- font-weight: bold
63
- text-transform: uppercase
64
-
65
- @mixin status-success
66
- background: $success
67
- color: #fff !important
68
-
69
- @mixin status-error
70
- background: $cancelled
71
- color: #fff !important
72
-
73
- @mixin status-pending
74
- background: $pending
75
- color: darken($pending, 60%)
76
-
77
- @mixin status-deleted
78
- background: $deleted
79
- color: #999
80
-
81
-
82
27
  html
83
28
  font-size: $font-size-root
84
29
 
@@ -138,31 +83,6 @@ a:hover
138
83
  &-cancelled
139
84
  color: $cancelled !important
140
85
 
141
- @mixin badge
142
- background: $primary-color
143
- color: #fff
144
- @include border-radius(20px)
145
- margin-left: 10px
146
- padding: 4px 10px
147
- font-weight: bold
148
- text-transform: uppercase
149
-
150
- @mixin badge-success
151
- background: $success
152
- color: #fff !important
153
-
154
- @mixin badge-error
155
- background: $cancelled
156
- color: #fff !important
157
-
158
- @mixin badge-pending
159
- background: $pending
160
- color: darken($pending, 60%) !important
161
-
162
- @mixin badge-deleted
163
- background: $deleted
164
- color: #999 !important
165
-
166
86
  .ae-badge
167
87
  @include badge
168
88
 
@@ -1,8 +1,3 @@
1
- @mixin container-table
2
- display: table
3
-
4
- @mixin container-table-cell
5
- display: table-cell
6
1
 
7
2
  .ae-container
8
3
  position: relative
@@ -1,15 +1,3 @@
1
- @mixin fa-input
2
- position: absolute
3
- top: 30%
4
- left: 15px
5
- color: $body-color
6
-
7
- @include tablet-max
8
- top: 34%
9
-
10
- @include desktop
11
- top: 30%
12
-
13
1
  .ae-form-horizontal
14
2
  @include tablet
15
3
  .ae-form-field
@@ -1,18 +1,3 @@
1
- @mixin input
2
- border: 1px solid $border-dark
3
- width: 100%
4
- @include border-radius(3px)
5
- @include box-shadow(inset, 2px, 2px, 2px, lighten($border-dark, 20%))
6
- outline: none
7
- @include easeInOut
8
- margin: 10px 0
9
- @include body-font
10
- vertical-align: top
11
-
12
- &:focus
13
- border: 1px solid $primary-color
14
- @include box-shadow(0, 0, 5px, 0, $primary-color)
15
-
16
1
  .ae-text-field
17
2
  @include input
18
3
 
@@ -1,21 +1,3 @@
1
- @mixin sidebar($width)
2
- .ae-sidebar-left
3
- width: $width
4
-
5
- @include laptop
6
- width: 250px
7
-
8
- @mixin sidebar-fixed($width)
9
- .ae-sidebar-left
10
- width: $width
11
- position: fixed
12
-
13
- @include laptop
14
- max-width: 250px
15
-
16
- .ae-content
17
- left: $width
18
-
19
1
  .ae-show-left-sidebar
20
2
  @include tablet-max
21
3
  position: fixed
@@ -28,7 +28,18 @@
28
28
  padding: 0 1em 1em 1em
29
29
  border: 1px solid $border-light
30
30
  border-top: 0
31
-
31
+ overflow: hidden
32
+ -webkit-transition: height 0.25s
33
+ -moz-transition: height 0.25s
34
+ transition: height 0.25s
35
+ box-sizing: border-box
36
+ -moz-box-sizing: border-box
37
+ -webkit-box-sizing: border-box
38
+ @include easeInOut
39
+ &.expanded
40
+ height: auto
41
+ &.collapsed
42
+ height: 0
32
43
  &.collapsed
33
44
  display: none
34
45
 
@@ -36,4 +47,4 @@
36
47
  margin-bottom: 1em
37
48
 
38
49
  @include tablet-max
39
- margin-bottom: 0.5em
50
+ margin-bottom: 0.5em
@@ -1,4 +1,4 @@
1
- @import "style"
1
+ @import "application"
2
2
  @import "resizable"
3
3
 
4
4
  header
@@ -1,10 +1,3 @@
1
- @mixin sidebar-right($width)
2
- .ae-content
3
- right: $width
4
-
5
- .ae-sidebar-right
6
- width: $width
7
-
8
1
  .ae-template-master-detail
9
2
  @include sidebar(15%)
10
3
  @include sidebar-right(30%)