express_ui 0.2.0 → 0.2.1

Sign up to get free protection for your applications and to get access to all the features.
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%)