express_ui 0.1.3 → 0.1.4
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.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/express_ui/atoms/_buttons.sass +28 -18
- data/app/assets/stylesheets/express_ui/atoms/_headings.sass +1 -1
- data/app/assets/stylesheets/express_ui/atoms/_typography.sass +3 -4
- data/app/assets/stylesheets/express_ui/molecules/_form_groups.sass +16 -3
- data/app/assets/stylesheets/express_ui/molecules/_forms.sass +12 -7
- data/app/assets/stylesheets/express_ui/molecules/_lists.sass +12 -0
- data/app/assets/stylesheets/express_ui/molecules/_tables.sass +4 -0
- data/app/assets/stylesheets/express_ui/templates/_full_width.sass +3 -2
- data/app/views/layouts/express_ui/_head.html.erb +1 -1
- data/lib/express_ui/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6940e22e18cc5e67530363c134a4fe469aa4c8f0
|
|
4
|
+
data.tar.gz: bce52915febf02ec52a47143a45b24b5263349da
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ab47fb4552dc0db7a8547b9171aa44eeb30f42e59a41380376e0f148259553572fda77e8cdd0bbd387b48910f3f147a65cbf75a1df551dd7b6a1c385cf2bc073
|
|
7
|
+
data.tar.gz: 9d3976e892da81832e88eb8da1e3c6430674618623956670da46ad99574c9dc43b36ae716c6ed03aa2e713142f0f23b0258083b4a581ca6c4b9fb5ed7d8f4b85
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
@mixin button
|
|
2
|
-
@include border-radius(3px
|
|
2
|
+
@include border-radius(3px)
|
|
3
3
|
padding: 0.5em
|
|
4
4
|
margin: 0.25em 0.25em 0 0
|
|
5
5
|
border: 0
|
|
6
6
|
cursor: pointer
|
|
7
7
|
text-align: center
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
input[type="submit"]
|
|
10
|
+
-webkit-appearance: none !important
|
|
11
|
+
|
|
12
|
+
.ae-btn, input[type="submit"]
|
|
10
13
|
@include easeInOut
|
|
11
14
|
@include button
|
|
12
15
|
display: inline-block
|
|
@@ -16,6 +19,7 @@
|
|
|
16
19
|
vertical-align: top
|
|
17
20
|
@include body-font
|
|
18
21
|
|
|
22
|
+
.ae-btn
|
|
19
23
|
&:hover, &-hover
|
|
20
24
|
@include box-shadow(0, 0px, 5px, 0, $border-dark)
|
|
21
25
|
|
|
@@ -28,7 +32,7 @@
|
|
|
28
32
|
|
|
29
33
|
|
|
30
34
|
.ae-btn-default
|
|
31
|
-
background: $secondary-color
|
|
35
|
+
background-color: $secondary-color
|
|
32
36
|
border: 1px solid $secondary-color
|
|
33
37
|
color: $icon-color !important
|
|
34
38
|
|
|
@@ -36,7 +40,7 @@
|
|
|
36
40
|
@include box-shadow(inset, 2px, 2px, 2px, darken($secondary-color, 20%))
|
|
37
41
|
|
|
38
42
|
.ae-btn-primary
|
|
39
|
-
background: $primary-color
|
|
43
|
+
background-color: $primary-color
|
|
40
44
|
border: 1px solid $primary-color
|
|
41
45
|
color: #fff !important
|
|
42
46
|
|
|
@@ -51,7 +55,7 @@
|
|
|
51
55
|
@include box-shadow(inset, 2px, 2px, 2px, darken($primary-color, 20%))
|
|
52
56
|
|
|
53
57
|
.ae-btn-secondary
|
|
54
|
-
background: $secondary-color
|
|
58
|
+
background-color: $secondary-color
|
|
55
59
|
border: 1px solid $secondary-color
|
|
56
60
|
color: #fff !important
|
|
57
61
|
|
|
@@ -65,7 +69,7 @@
|
|
|
65
69
|
@include box-shadow(inset, 2px, 2px, 2px, darken($secondary-color, 5%))
|
|
66
70
|
|
|
67
71
|
.ae-btn-success
|
|
68
|
-
background: $success
|
|
72
|
+
background-color: $success
|
|
69
73
|
border: 1px solid $success
|
|
70
74
|
color: #fff !important
|
|
71
75
|
|
|
@@ -76,7 +80,7 @@
|
|
|
76
80
|
@include box-shadow(inset, 2px, 2px, 2px, darken($success, 20%))
|
|
77
81
|
|
|
78
82
|
.ae-btn-danger
|
|
79
|
-
background: $cancelled
|
|
83
|
+
background-color: $cancelled
|
|
80
84
|
border: 1px solid $cancelled
|
|
81
85
|
color: #fff !important
|
|
82
86
|
|
|
@@ -88,30 +92,36 @@
|
|
|
88
92
|
|
|
89
93
|
|
|
90
94
|
.ae-btn-sm
|
|
91
|
-
padding-top: 0.25em
|
|
92
|
-
padding-bottom: 0.25em
|
|
93
|
-
@include
|
|
95
|
+
padding-top: 0.25em !important
|
|
96
|
+
padding-bottom: 0.25em !important
|
|
97
|
+
@include font-size(16px, 16px)
|
|
98
|
+
max-height: 30px
|
|
99
|
+
line-height: 100%
|
|
94
100
|
|
|
95
101
|
.ae-btn-md
|
|
96
|
-
padding-top: 0.45em
|
|
97
|
-
padding-bottom: 0.45em
|
|
98
|
-
@include
|
|
102
|
+
padding-top: 0.45em !important
|
|
103
|
+
padding-bottom: 0.45em !important
|
|
104
|
+
@include font-size(18px, 18px)
|
|
105
|
+
max-height: 34px
|
|
106
|
+
line-height: 100%
|
|
99
107
|
|
|
100
108
|
.ae-btn-lg
|
|
101
|
-
padding-top:
|
|
102
|
-
padding-bottom:
|
|
103
|
-
@include
|
|
109
|
+
padding-top: 1em !important
|
|
110
|
+
padding-bottom: 1em !important
|
|
111
|
+
@include font-size(20px, 20px)
|
|
112
|
+
max-height: 40px
|
|
113
|
+
line-height: 100%
|
|
104
114
|
|
|
105
115
|
.ae-btn-border
|
|
106
116
|
border-style: solid
|
|
107
117
|
border-width: 1px
|
|
108
|
-
background:
|
|
118
|
+
background-color: transparent
|
|
109
119
|
|
|
110
120
|
&:active
|
|
111
121
|
@include box-shadow(inset, 2px, 2px, 2px, lighten($secondary-color, 15%))
|
|
112
122
|
|
|
113
123
|
.ae-btn-disabled, button:disabled
|
|
114
|
-
background: lighten($secondary-color, 30%)
|
|
124
|
+
background-color: lighten($secondary-color, 30%)
|
|
115
125
|
color: #ccc
|
|
116
126
|
cursor: not-allowed
|
|
117
127
|
border-color: lighten($secondary-color, 30%)
|
|
@@ -44,6 +44,9 @@
|
|
|
44
44
|
.ae-code-block
|
|
45
45
|
white-space: pre-wrap
|
|
46
46
|
|
|
47
|
+
.ae-u-hidden
|
|
48
|
+
display: none
|
|
49
|
+
|
|
47
50
|
@mixin ae-margin-left
|
|
48
51
|
margin-left: 0.25em
|
|
49
52
|
|
|
@@ -81,10 +84,6 @@ body
|
|
|
81
84
|
font-size: 1.6rem
|
|
82
85
|
color: $body-color
|
|
83
86
|
|
|
84
|
-
// The type font size in a responsive layout should be able to adjust with each viewport. You can calculate the font size based on the viewport height and width using :root:. Now that you've set the :root pseudo-class to calculate font-size based on viewport height and width, the body will utilize the root em that's based on the value calculated by :root. Notice when you resize the window that the root font size for all elements stays relative no matter viewport size?
|
|
85
|
-
\:root
|
|
86
|
-
font-size: calc(1vw + 1vh + .5vmin)
|
|
87
|
-
|
|
88
87
|
p
|
|
89
88
|
@include body-font
|
|
90
89
|
@include p
|
|
@@ -8,14 +8,22 @@
|
|
|
8
8
|
top: 34%
|
|
9
9
|
|
|
10
10
|
.ae-form-horizontal
|
|
11
|
+
@include tablet
|
|
12
|
+
.ae-form-field
|
|
13
|
+
input
|
|
14
|
+
width: 100%
|
|
15
|
+
|
|
11
16
|
.ae-form-field
|
|
12
|
-
|
|
13
|
-
|
|
17
|
+
label
|
|
18
|
+
margin: 0.5em 0
|
|
14
19
|
|
|
15
20
|
.ae-form-field.ae-has-icon
|
|
16
21
|
& > div
|
|
17
22
|
display: block
|
|
18
23
|
|
|
24
|
+
& + &
|
|
25
|
+
margin-top: 1em
|
|
26
|
+
|
|
19
27
|
.ae-form-inline
|
|
20
28
|
.ae-form-field
|
|
21
29
|
input
|
|
@@ -27,11 +35,17 @@
|
|
|
27
35
|
margin: 0.5em 1em 0.5em 0
|
|
28
36
|
display: inline-block
|
|
29
37
|
|
|
38
|
+
& + &
|
|
39
|
+
margin-top: 1em
|
|
40
|
+
|
|
30
41
|
.ae-form-single
|
|
31
42
|
display: flex
|
|
32
43
|
flex-flow: row nowrap
|
|
33
44
|
align-items: stretch
|
|
34
45
|
|
|
46
|
+
& + &
|
|
47
|
+
margin-top: 1em
|
|
48
|
+
|
|
35
49
|
.ae-form-field
|
|
36
50
|
position: relative
|
|
37
51
|
|
|
@@ -93,7 +107,6 @@
|
|
|
93
107
|
.ae-has-icon
|
|
94
108
|
padding: 0 4px
|
|
95
109
|
|
|
96
|
-
|
|
97
110
|
@include tablet-max
|
|
98
111
|
form, input
|
|
99
112
|
width: 100%
|
|
@@ -16,6 +16,11 @@
|
|
|
16
16
|
.ae-text-field
|
|
17
17
|
@include input
|
|
18
18
|
|
|
19
|
+
input[type="date"]
|
|
20
|
+
-webkit-appearance: none
|
|
21
|
+
-moz-appearance: none
|
|
22
|
+
-webkit-text-size-adjust: none
|
|
23
|
+
|
|
19
24
|
.ae-form-field
|
|
20
25
|
|
|
21
26
|
input[type="range"]
|
|
@@ -45,10 +50,10 @@
|
|
|
45
50
|
width: 20px
|
|
46
51
|
|
|
47
52
|
&:checked ~ label:before
|
|
48
|
-
color: $
|
|
53
|
+
color: $body-color
|
|
49
54
|
|
|
50
55
|
&:checked ~ label
|
|
51
|
-
color: $
|
|
56
|
+
color: $body-color
|
|
52
57
|
|
|
53
58
|
.ae-radio-field
|
|
54
59
|
& ~ label:before
|
|
@@ -69,22 +74,22 @@
|
|
|
69
74
|
font-size: 14px
|
|
70
75
|
|
|
71
76
|
.ae-input-sm
|
|
72
|
-
@include
|
|
77
|
+
@include font-size(16px, 16px)
|
|
73
78
|
padding: rem(3px)
|
|
74
79
|
|
|
75
80
|
@include desktop
|
|
76
81
|
padding: rem(2px)
|
|
77
82
|
|
|
78
83
|
.ae-input-md
|
|
79
|
-
@include
|
|
80
|
-
padding: rem(
|
|
84
|
+
@include font-size(18px, 18px)
|
|
85
|
+
padding: rem(12px)
|
|
81
86
|
|
|
82
87
|
@include desktop
|
|
83
88
|
padding: rem(5px)
|
|
84
89
|
|
|
85
90
|
.ae-input-lg
|
|
86
|
-
@include
|
|
87
|
-
padding: rem(
|
|
91
|
+
@include font-size(20px, 20px)
|
|
92
|
+
padding: rem(16px)
|
|
88
93
|
|
|
89
94
|
@include desktop
|
|
90
95
|
padding: rem(7px)
|
|
@@ -31,6 +31,18 @@ ul
|
|
|
31
31
|
display: block
|
|
32
32
|
clear: both
|
|
33
33
|
|
|
34
|
+
.ae-list-flex
|
|
35
|
+
display: flex
|
|
36
|
+
flex-direction: row
|
|
37
|
+
flex-wrap: nowrap
|
|
38
|
+
justify-content: space-between
|
|
39
|
+
align-items: stretch
|
|
40
|
+
align-content: stretch
|
|
41
|
+
|
|
42
|
+
li
|
|
43
|
+
flex: 1
|
|
44
|
+
padding: 0 0.8em
|
|
45
|
+
|
|
34
46
|
.ae-list-block
|
|
35
47
|
li
|
|
36
48
|
display: block
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<meta content="AppExpress" name="author"/>
|
|
8
8
|
<title><%= @page_title || content_for(:page_title) || (page_title rescue "No Page Title Set") %></title>
|
|
9
9
|
<%= csrf_meta_tags %>
|
|
10
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
10
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
|
|
11
11
|
<%= stylesheet_link_tag 'express_ui/styleguide', :media => "all" %>
|
|
12
12
|
<%= stylesheet_link_tag 'application', :media => "all" %>
|
|
13
13
|
<%= javascript_include_tag 'express_ui/application', 'data-turbolinks-track': 'reload' %>
|
data/lib/express_ui/version.rb
CHANGED