curo-material-interface 0.0.3 → 0.0.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.
Files changed (19) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +4 -4
  3. data/lib/assets/javascripts/cmi/form_components/text_field.coffee +2 -2
  4. data/lib/assets/javascripts/cmi/loading_indicator.coffee +2 -2
  5. data/lib/assets/javascripts/cmi/tabs.coffee +1 -1
  6. data/lib/assets/stylesheets/cmi/_extensions.sass +12 -12
  7. data/lib/assets/stylesheets/cmi/_global.sass +68 -68
  8. data/lib/assets/stylesheets/cmi/_mixins.sass +2 -2
  9. data/lib/assets/stylesheets/cmi/_typography.sass +116 -116
  10. data/lib/assets/stylesheets/cmi/components/_buttons.sass +97 -98
  11. data/lib/assets/stylesheets/cmi/components/_flex-modal.sass +175 -177
  12. data/lib/assets/stylesheets/cmi/components/_loading-indicator.sass +6 -6
  13. data/lib/assets/stylesheets/cmi/components/_navbar.sass +5 -5
  14. data/lib/assets/stylesheets/cmi/components/_ripples.sass +18 -19
  15. data/lib/assets/stylesheets/cmi/components/_tabs.sass +5 -5
  16. data/lib/assets/stylesheets/cmi/form_components/_checkbox.sass +13 -13
  17. data/lib/assets/stylesheets/cmi/form_components/_text_field.sass +28 -28
  18. data/lib/curo_material_interface/version.rb +1 -1
  19. metadata +2 -2
data/lib/assets/stylesheets/cmi/components/_buttons.sass CHANGED
@@ -1,114 +1,113 @@
1
- .cmi
2
-
3
- // base declaration
4
- .cmi-btn
5
- position: relative
6
- display: inline-block
7
- overflow: hidden
8
- min-width: $button-min-width
9
- height: $button-height
10
- margin: $button-margin-vertical $button-margin-horizontal
11
- padding: $button-padding-vertical $button-padding-horizontal
12
- font-size: $button-font-size
13
- text-align: center
14
- text-transform: uppercase
1
+ // base declaration
2
+ .cmi-btn, a.cmi-btn, button.cmi-btn
3
+ position: relative
4
+ display: inline-block
5
+ overflow: hidden
6
+ min-width: $button-min-width
7
+ height: $button-height
8
+ margin: $button-margin-vertical $button-margin-horizontal
9
+ padding: $button-padding-vertical $button-padding-horizontal
10
+ font-size: $button-font-size
11
+ text-align: center
12
+ text-transform: uppercase
13
+ text-decoration: none
14
+ line-height: 1
15
+ letter-spacing: 0.05rem
16
+ border: none
17
+ outline: 0
18
+ cursor: pointer
19
+ -webkit-tap-highlight-color: transparent
20
+ +cmi-border-radius($button-border-radius)
21
+ &:hover
22
+ outline: none
23
+ text-decoration: none
24
+ color: darken($color-primary, 7%)
25
+ background-color: $button-color-hover
26
+ &:active,
27
+ &:target
28
+ outline: none
15
29
  text-decoration: none
16
- line-height: 1
17
- letter-spacing: 0.05rem
18
- border: none
19
- outline: 0
20
- cursor: pointer
21
- -webkit-tap-highlight-color: transparent
22
- +border-radius($button-border-radius)
23
- &:hover
24
- outline: none
25
- text-decoration: none
26
- color: darken($color-primary, 7%)
27
- background-color: $button-color-hover
28
- &:active,
29
- &:target
30
- outline: none
31
- text-decoration: none
32
- color: darken($color-primary, 10%)
33
- background-color: opacify($button-color-hover, 0.05)
30
+ color: darken($color-primary, 10%)
31
+ background-color: opacify($button-color-hover, 0.05)
32
+
34
33
 
35
- // button raised
36
- .cmi-btn.cmi-btn-raised
37
- background-color: $button-color-raised
38
- @extend .z-depth-1
39
- +transition(.1s ease-out)
40
- &:hover
41
- background-color: $button-color-hover
42
- @extend .z-depth-1-hover
43
- &:active,
44
- &:target
45
- background-color: opacify($button-color-hover, 0.05)
46
- @extend .z-depth-2
34
+ // button raised
35
+ .cmi-btn.cmi-btn-raised, a.cmi-btn.cmi-btn-raised, button.cmi-btn.cmi-btn-raised
36
+ background-color: $button-color-raised
37
+ @extend .cmi-z-depth-1
38
+ +transition(.1s ease-out)
39
+ &:hover
40
+ background-color: $button-color-hover
41
+ @extend .cmi-z-depth-1-hover
42
+ &:active,
43
+ &:target
44
+ background-color: opacify($button-color-hover, 0.05)
45
+ @extend .cmi-z-depth-2
47
46
 
48
- // button default
49
- .cmi-btn.cmi-btn-default
50
- background-color: $button-default-bg-color
51
- color: $button-default-font-color
52
- &:hover
53
- background-color: opacify($button-default-bg-color, 0.02)
54
- color: $button-primary-font-color
55
- &:active,
56
- &:target
57
- background-color: opacify($button-default-bg-color, 0.07)
58
- color: $button-primary-font-color
47
+ // button default
48
+ .cmi-btn.cmi-btn-default, a.cmi-btn.cmi-btn-default, button.cmi-btn.cmi-btn-default
49
+ background-color: $button-default-bg-color
50
+ color: $button-default-font-color
51
+ &:hover
52
+ background-color: opacify($button-default-bg-color, 0.02)
53
+ color: $button-primary-font-color
54
+ &:active,
55
+ &:target
56
+ background-color: opacify($button-default-bg-color, 0.07)
57
+ color: $button-primary-font-color
59
58
 
60
- // button primary
61
- .cmi-btn.cmi-btn-primary
62
- background-color: $button-primary-bg-color
59
+ // button primary
60
+ .cmi-btn.cmi-btn-primary, a.cmi-btn.cmi-btn-primary, button.cmi-btn.cmi-btn-primary
61
+ background-color: $button-primary-bg-color
62
+ color: $button-primary-font-color
63
+ &:hover
64
+ background-color: lighten($button-primary-bg-color, 5%)
65
+ color: $button-primary-font-color
66
+ &:active,
67
+ &:target
68
+ background-color: lighten($button-primary-bg-color, 10%)
63
69
  color: $button-primary-font-color
64
- &:hover
65
- background-color: lighten($button-primary-bg-color, 5%)
66
- color: $button-primary-font-color
67
- &:active,
68
- &:target
69
- background-color: lighten($button-primary-bg-color, 10%)
70
- color: $button-primary-font-color
71
70
 
72
- // button small
73
- .cmi-btn.cmi-btn-small
74
- min-width: $button-small-min-width
75
- height: $button-small-height
76
- padding: $button-small-padding-vertical $button-small-padding-horizontal
77
- font-size: $button-small-font-size
71
+ // button small
72
+ .cmi-btn.cmi-btn-small, a.cmi-btn.cmi-btn-small, button.cmi-btn.cmi-btn-small
73
+ min-width: $button-small-min-width
74
+ height: $button-small-height
75
+ padding: $button-small-padding-vertical $button-small-padding-horizontal
76
+ font-size: $button-small-font-size
78
77
 
79
- // button large
80
- .cmi-btn.cmi-btn-large
81
- min-width: $button-large-min-width
82
- height: $button-large-height
83
- padding: $button-large-padding-vertical $button-large-padding-horizontal
84
- font-size: $button-large-font-size
78
+ // button large
79
+ .cmi-btn.cmi-btn-large, a.cmi-btn.cmi-btn-large, button.cmi-btn.cmi-btn-large
80
+ min-width: $button-large-min-width
81
+ height: $button-large-height
82
+ padding: $button-large-padding-vertical $button-large-padding-horizontal
83
+ font-size: $button-large-font-size
85
84
 
86
- // button block
87
- .cmi-btn.cmi-btn-block
88
- display: block
85
+ // button block
86
+ .cmi-btn.cmi-btn-block, a.cmi-btn.cmi-btn-block, button.cmi-btn.cmi-btn-block
87
+ display: block
89
88
 
90
89
 
91
- // ------------------------------------
92
- // ripples
90
+ // ------------------------------------
91
+ // ripples
93
92
 
94
- .cmi-btn
95
- &:active,
96
- &:target
97
- background-color: $button-color-hover
93
+ .cmi-btn, a.cmi-btn, button.cmi-btn
94
+ &:active,
95
+ &:target
96
+ background-color: $button-color-hover
98
97
 
99
- .cmi-btn.cmi-btn-raised
100
- &:active,
101
- &:target
102
- background-color: $button-color-hover
98
+ .cmi-btn.cmi-btn-raised, a.cmi-btn.cmi-btn-raised, button.cmi-btn.cmi-btn-raised
99
+ &:active,
100
+ &:target
101
+ background-color: $button-color-hover
103
102
 
104
- .cmi-btn.cmi-btn-default
105
- &:active,
106
- &:target
107
- background-color: opacify($button-default-bg-color, 0.02)
103
+ .cmi-btn.cmi-btn-default, a.cmi-btn.cmi-btn-default, button.cmi-btn.cmi-btn-default
104
+ &:active,
105
+ &:target
106
+ background-color: opacify($button-default-bg-color, 0.02)
108
107
 
109
- .cmi-btn.cmi-btn-primary
110
- &:active,
111
- &:target
112
- background-color: lighten($button-primary-bg-color, 5%)
108
+ .cmi-btn.cmi-btn-primary, a.cmi-btn.cmi-btn-primary, button.cmi-btn.cmi-btn-primary
109
+ &:active,
110
+ &:target
111
+ background-color: lighten($button-primary-bg-color, 5%)
113
112
 
114
113
 
data/lib/assets/stylesheets/cmi/components/_flex-modal.sass CHANGED
@@ -2,199 +2,197 @@ body.cmi-flex-modal-open
2
2
  overflow: hidden
3
3
 
4
4
  // base modal structure
5
- .cmi
6
- &.cmi-flex-modal
7
- +position(fixed, 0 0 0 0)
8
- +backface-visibility(hidden)
9
- display: block
10
- overflow: hidden
11
- outline: 0
12
- z-index: $modal-z-index
13
- background-color: $modal-backdrop-color
14
-
15
- .cmi-flex-modal-dialog,
16
- .cmi-flex-modal-dialog-inner
17
- overflow: hidden
18
- z-index: 0
19
- margin: 0
20
- padding: 0
21
- outline: 0
22
- +display(flex)
23
- +flex-direction(column)
24
- +flex-wrap(nowrap)
25
- +align-items(stretch)
26
- +border-radius(3px)
27
-
28
- .cmi-flex-modal-dialog
29
- +position(absolute, 5% 5% auto 5%)
30
- max-height: 90%
31
- @extend .z-depth-5
5
+ .cmi-flex-modal
6
+ +position(fixed, 0 0 0 0)
7
+ +backface-visibility(hidden)
8
+ display: block
9
+ overflow: hidden
10
+ outline: 0
11
+ z-index: $modal-z-index
12
+ background-color: $modal-backdrop-color
32
13
 
33
- .cmi-flex-modal-dialog-inner
14
+ .cmi-flex-modal-dialog,
15
+ .cmi-flex-modal-dialog-inner
16
+ overflow: hidden
17
+ z-index: 0
18
+ margin: 0
19
+ padding: 0
20
+ outline: 0
21
+ +display(flex)
22
+ +flex-direction(column)
23
+ +flex-wrap(nowrap)
24
+ +align-items(stretch)
25
+ +cmi-border-radius(3px)
26
+
27
+ .cmi-flex-modal-dialog
28
+ +position(absolute, 5% 5% auto 5%)
29
+ max-height: 90%
30
+ @extend .cmi-z-depth-5
31
+
32
+ .cmi-flex-modal-dialog-inner
33
+ position: relative
34
+
35
+ .cmi-flex-modal-dialog,
36
+ .cmi-flex-modal-dialog-inner
37
+ > header.cmi-header,
38
+ > main.cmi-main,
39
+ > footer.cmi-footer
34
40
  position: relative
35
41
 
36
- .cmi-flex-modal-dialog,
37
- .cmi-flex-modal-dialog-inner
38
- > header,
39
- > main,
40
- > footer
41
- position: relative
42
-
43
- > header,
44
- > footer
45
- overflow: hidden
46
- z-index: 10
47
- +display(flex)
48
- +flex-shrink(0)
49
-
50
- > header
51
- height: $modal-header-height
52
- background-color: $modal-header-bgcolor
53
- +border-top-radius(3px)
54
-
55
- > main
56
- overflow: scroll
57
- overflow-x: hidden
58
- overflow-y: scroll
59
- z-index: 1
60
- background-color: $modal-main-bgcolor
61
- +display(flex)
62
- +flex-direction(column)
63
- +flex-shrink(1)
64
-
65
- > footer
66
- height: $modal-footer-height
67
- background-color: $modal-footer-bgcolor
68
- +border-bottom-radius(3px)
69
-
70
- .cmi-flex-modal-main-inside
71
- position: relative
72
- height: auto
73
- display: -webkit-box
42
+ > header.cmi-header,
43
+ > footer.cmi-footer
44
+ overflow: hidden
45
+ z-index: 10
74
46
  +display(flex)
75
- +flex-direction(row)
76
- +flex-wrap(nowrap)
77
- +flex-grow(1)
78
47
  +flex-shrink(0)
79
- +align-items(stretch)
80
48
 
81
- > aside,
82
- > section
83
- position: relative
49
+ > header.cmi-header
50
+ height: $modal-header-height
51
+ background-color: $modal-header-bgcolor
52
+ +border-top-radius(3px)
53
+
54
+ > main.cmi-main
55
+ overflow: scroll
56
+ overflow-x: hidden
57
+ overflow-y: scroll
58
+ z-index: 1
59
+ background-color: $modal-main-bgcolor
60
+ +display(flex)
61
+ +flex-direction(column)
62
+ +flex-shrink(1)
63
+
64
+ > footer.cmi-footer
65
+ height: $modal-footer-height
66
+ background-color: $modal-footer-bgcolor
67
+ +border-bottom-radius(3px)
68
+
69
+ .cmi-flex-modal-main-inside
70
+ position: relative
71
+ height: auto
72
+ display: -webkit-box
73
+ +display(flex)
74
+ +flex-direction(row)
75
+ +flex-wrap(nowrap)
76
+ +flex-grow(1)
77
+ +flex-shrink(0)
78
+ +align-items(stretch)
79
+
80
+ > aside.cmi-aside,
81
+ > section.cmi-section
82
+ position: relative
84
83
 
85
- > aside
86
- width: $modal-sidebar-width
87
- min-width: $modal-sidebar-width
88
- background-color: $modal-sidebar-bgcolor
89
- +flex-grow(0)
90
- > section
91
- +flex-grow(1)
84
+ > aside.cmi-aside
85
+ width: $modal-sidebar-width
86
+ min-width: $modal-sidebar-width
87
+ background-color: $modal-sidebar-bgcolor
88
+ +flex-grow(0)
89
+ > .cmi-section
90
+ +flex-grow(1)
92
91
 
93
92
  // modal additional content styling
94
- .cmi
95
- .cmi-flex-modal-dialog,
96
- .cmi-flex-modal-dialog-inner
97
- > header,
98
- > footer
99
- .cmi-pull-left
100
- a.btn
101
- margin-right: 8px
102
- .cmi-pull-right
103
- a.btn
104
- margin-left: 8px
105
- .cmi-flex-modal-back
106
- position: relative
107
- overflow: visible
108
- min-width: 0
109
- height: auto
110
- padding: 4px 6px 2px 6px
111
- line-height: 1.3
112
- letter-spacing: 0
113
- i
114
- font-size: 15px
115
- .btn
116
- height: auto
117
-
118
- .cmi-flex-modal-header-inside
119
- position: relative
120
- display: block
121
- width: 100%
122
- padding: 8px
123
- +clearfix
124
-
125
- h1,
126
- h2,
127
- h3,
128
- h4,
129
- h5
130
- margin: 5px
131
- font-weight: 200
132
- font-size: 16px
133
- line-height: 1.2
134
- color: #e5e5e5
135
-
136
- .cmi-flex-modal-close
93
+ .cmi-flex-modal-dialog,
94
+ .cmi-flex-modal-dialog-inner
95
+ > header.cmi-header,
96
+ > footer.cmi-footer
97
+ .cmi-pull-left
98
+ .cmi-a.cmi-btn
99
+ margin-right: 8px
100
+ .cmi-pull-right
101
+ .cmi-a.cmi-btn
102
+ margin-left: 8px
103
+ .cmi-flex-modal-back
137
104
  position: relative
138
105
  overflow: visible
139
106
  min-width: 0
140
107
  height: auto
141
- margin: 0
142
108
  padding: 4px 6px 2px 6px
143
109
  line-height: 1.3
144
110
  letter-spacing: 0
111
+ .cmi-i
112
+ font-size: 15px
113
+ .cmi-btn
114
+ height: auto
145
115
 
146
- .cmi-flex-modal-back,
147
- .cmi-flex-modal-close
148
- margin: 0
149
- color: #e5e5e5
150
- border: 1px solid #606060
151
- background-color: $modal-header-bgcolor
152
- i
153
- color: #ccc
154
- &:hover
155
- background-color: darken($modal-header-bgcolor, 5%)
156
- i
157
- color: #fff
158
-
159
- .cmi-flex-modal-footer-inside
116
+ .cmi-flex-modal-header-inside
117
+ position: relative
118
+ display: block
119
+ width: 100%
120
+ padding: 8px
121
+ +clearfix
122
+
123
+ h1.cmi-h1,
124
+ h2.cmi-h2,
125
+ h3.cmi-h3,
126
+ h4.cmi-h4,
127
+ h5.cmi-h5
128
+ margin: 5px
129
+ font-weight: 200
130
+ font-size: 16px
131
+ line-height: 1.2
132
+ color: #e5e5e5
133
+
134
+ .cmi-flex-modal-close
160
135
  position: relative
161
- display: block
162
- width: 100%
163
- padding: 0px 8px
164
- +clearfix
136
+ overflow: visible
137
+ min-width: 0
138
+ height: auto
139
+ margin: 0
140
+ padding: 4px 6px 2px 6px
141
+ line-height: 1.3
142
+ letter-spacing: 0
165
143
 
166
- .cmi-flex-modal-back
167
- margin: 13px 0
168
- color: #e5e5e5
169
- border: 1px solid #cccccc
170
- background-color: $modal-footer-bgcolor
171
- i
172
- color: #999999
173
- &:hover
174
- background-color: darken($modal-footer-bgcolor, 5%)
175
- i
176
- color: #333
177
-
178
- ul.cmi-flex-modal-aside-tab-list
179
- margin: 8px 0 8px 8px
180
- padding: 0
181
- list-style: none
182
- li
183
- margin-bottom: 4px
184
- a
185
- position: relative
186
- display: block
187
- padding: 8px 20px
188
- font-size: 13px
189
- text-align: right
190
- color: $modal-sidebar-tab-link-color
191
- +border-left-radius(3px)
192
- &:hover
193
- color: #000
194
- cursor: pointer
195
- text-decoration: none
196
- background-color: darken($modal-sidebar-bgcolor, 5%)
197
- li.active > a,
198
- a.active
199
- color: $color-primary
200
- background-color: #fff
144
+ .cmi-flex-modal-back,
145
+ .cmi-flex-modal-close
146
+ margin: 0
147
+ color: #e5e5e5
148
+ border: 1px solid #606060
149
+ background-color: $modal-header-bgcolor
150
+ i.cmi-i
151
+ color: #ccc
152
+ &:hover
153
+ background-color: darken($modal-header-bgcolor, 5%)
154
+ i.cmi-i
155
+ color: #fff
156
+
157
+ .cmi-flex-modal-footer-inside
158
+ position: relative
159
+ display: block
160
+ width: 100%
161
+ padding: 0px 8px
162
+ +clearfix
163
+
164
+ .cmi-flex-modal-back
165
+ margin: 13px 0
166
+ color: #e5e5e5
167
+ border: 1px solid #cccccc
168
+ background-color: $modal-footer-bgcolor
169
+ i.cmi-i
170
+ color: #999999
171
+ &:hover
172
+ background-color: darken($modal-footer-bgcolor, 5%)
173
+ i.cmi-i
174
+ color: #333
175
+
176
+ ul.cmi-flex-modal-aside-tab-list
177
+ margin: 8px 0 8px 8px
178
+ padding: 0
179
+ list-style: none
180
+ li.cmi-li
181
+ margin-bottom: 4px
182
+ a.cmi-a
183
+ position: relative
184
+ display: block
185
+ padding: 8px 20px
186
+ font-size: 13px
187
+ text-align: right
188
+ color: $modal-sidebar-tab-link-color
189
+ +border-left-radius(3px)
190
+ &:hover
191
+ color: #000
192
+ cursor: pointer
193
+ text-decoration: none
194
+ background-color: darken($modal-sidebar-bgcolor, 5%)
195
+ li.cmi-li.cmi-active > a.cmi-a,
196
+ a.cmi-a.cmi-active
197
+ color: $color-primary
198
+ background-color: #fff