curo-material-interface 0.0.3 → 0.0.4

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