express_ui 0.1.3 → 0.1.4
Sign up to get free protection for your applications and to get access to all the features.
- 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