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/_loading-indicator.sass CHANGED
@@ -19,23 +19,23 @@
19
19
  left: 50%
20
20
  top: 50%
21
21
  margin: ($loading-diameter * -0.5) 0 0 ($loading-diameter * -0.5)
22
- .circular
22
+ .cmi-circular
23
23
  position: relative
24
24
  height: $loading-diameter
25
25
  width: $loading-diameter
26
- +animation(cumaLoadingRotate 2s linear infinite)
27
- .path
26
+ +animation(cmiLoadingRotate 2s linear infinite)
27
+ .cmi-path
28
28
  stroke-dasharray: 1, 200
29
29
  stroke-dashoffset: 0
30
30
  stroke-linecap: round
31
31
  stroke: $loading-color
32
- +animation(cumaLoadingDash 1.5s ease-in-out infinite)
32
+ +animation(cmiLoadingDash 1.5s ease-in-out infinite)
33
33
 
34
- +keyframes(cumaLoadingRotate)
34
+ +keyframes(cmiLoadingRotate)
35
35
  100%
36
36
  +transform(rotate(360deg))
37
37
 
38
- +keyframes(cumaLoadingDash)
38
+ +keyframes(cmiLoadingDash)
39
39
  0%
40
40
  stroke-dasharray: 1, 200
41
41
  stroke-dashoffset: 0
data/lib/assets/stylesheets/cmi/components/_navbar.sass CHANGED
@@ -3,7 +3,7 @@
3
3
  z-index: 1
4
4
  margin-bottom: 5px
5
5
  background-color: #fff
6
- +box-shadow(0px 4px 4px -2px rgba(#000, 0.3))
6
+ +cmi-box-shadow(0px 4px 4px -2px rgba(#000, 0.3))
7
7
  &.cmi-navbar-padding
8
8
  padding: 1rem
9
9
  & + .cmi-navbar-alert
@@ -12,11 +12,11 @@
12
12
  margin: -5px 0 5px 0
13
13
  padding: 15px 15px 10px 15px
14
14
  background-color: rgba(#000, 0.03)
15
- +box-shadow(inset 0px -5px 3px -5px rgba(#000, 0.3))
16
- p
15
+ +cmi-box-shadow(inset 0px -5px 3px -5px rgba(#000, 0.3))
16
+ .cmi-p
17
17
  margin: 0 0 5px 0
18
18
  font-size: 0.75rem
19
19
  color: #333
20
20
  &.cmi-navbar-alert-danger
21
- p
22
- color: #c00
21
+ .cmi-p
22
+ color: #c00
data/lib/assets/stylesheets/cmi/components/_ripples.sass CHANGED
@@ -1,26 +1,25 @@
1
- .cmi
2
- .cmi-ripples,
3
- .cmi-ripples-standalone
4
- .cmi-ink
5
- position: absolute
6
- display: block
7
- transform: scale(0)
8
- background: $ripples-color-default
9
- opacity: 1
10
- +border-radius(100%)
11
- &.cmi-animate
12
- +animation(cmiRipple 0.4s linear)
1
+ .cmi-ripples,
2
+ .cmi-ripples-standalone
3
+ .cmi-ink
4
+ position: absolute
5
+ display: block
6
+ transform: scale(0)
7
+ background: $ripples-color-default
8
+ opacity: 1
9
+ +cmi-border-radius(100%)
10
+ &.cmi-animate
11
+ +animation(cmiRipple 0.4s linear)
13
12
 
14
- &.cmi-ripples-dark
15
- .cmi-ink
16
- background: $ripples-color-dark
13
+ &.cmi-ripples-dark
14
+ .cmi-ink
15
+ background: $ripples-color-dark
17
16
 
18
- &.cmi-ripples-primary
19
- .cmi-ink
20
- background: $ripples-color-primary
17
+ &.cmi-ripples-primary
18
+ .cmi-ink
19
+ background: $ripples-color-primary
21
20
 
22
21
 
23
22
  +keyframes(cmiRipple)
24
23
  100%
25
24
  opacity: 0
26
- +transform(scale(2.5))
25
+ +transform(scale(2.5))
data/lib/assets/stylesheets/cmi/components/_tabs.sass CHANGED
@@ -6,7 +6,7 @@
6
6
  font-size: 16px
7
7
  font-size: 1rem
8
8
  +clearfix
9
- a
9
+ .cmi-a
10
10
  display: block
11
11
  padding: 0.8rem 1em 0.7rem 1em
12
12
  font-size: 0.875em
@@ -17,14 +17,14 @@
17
17
  &:hover
18
18
  text-decoration: none
19
19
  background-color: $tabs-color-hover-bg
20
- li
20
+ .cmi-li
21
21
  position: relative
22
22
  overflow: hidden
23
23
  float: left
24
- li.cmi-tabs-active
25
- a
24
+ .cmi-li.cmi-tabs-active
25
+ .cmi-a
26
26
  color: $tabs-color-link-active
27
- li.cmi-tabs-active-indicator
27
+ .cmi-li.cmi-tabs-active-indicator
28
28
  position: absolute
29
29
  float: none
30
30
  height: 3px
data/lib/assets/stylesheets/cmi/form_components/_checkbox.sass CHANGED
@@ -6,7 +6,7 @@
6
6
  font-size: 14px
7
7
  font-size: 0.875rem
8
8
  +backface-visibility(hidden)
9
- label
9
+ .cmi-label
10
10
  position: relative
11
11
  display: inline-block
12
12
  max-width: 100%
@@ -18,15 +18,15 @@
18
18
  cursor: pointer
19
19
  vertical-align: top
20
20
  +user-select(none)
21
- input[type="checkbox"]
21
+ .cmi-input[type="checkbox"]
22
22
  position: absolute
23
23
  opacity: 0
24
24
  visibility: hidden
25
25
  margin-left: -9999px
26
- span
26
+ .cmi-span
27
27
  left: 0px
28
28
  +transition-duration(0.2s)
29
- span.cmi-animation
29
+ .cmi-span.cmi-animation
30
30
  position: absolute
31
31
  display: block
32
32
  overflow: hidden
@@ -39,8 +39,8 @@
39
39
  visibility: hidden
40
40
  opacity: 0
41
41
  background-color: rgba(#000, 0.07)
42
- +border-radius(100%)
43
- span.cmi-checkbox
42
+ +cmi-border-radius(100%)
43
+ .cmi-span.cmi-checkbox
44
44
  position: relative
45
45
  display: inline-block
46
46
  overflow: hidden
@@ -50,7 +50,7 @@
50
50
  top: 3px
51
51
  margin-right: 11px
52
52
  border: 2px solid rgba(#000, 0.5)
53
- +border-radius(2px)
53
+ +cmi-border-radius(2px)
54
54
  &:before
55
55
  position: relative
56
56
  content: "\e899"
@@ -61,12 +61,12 @@
61
61
  line-height: 15px
62
62
  color: #fff
63
63
  &.cmi-valid
64
- label
64
+ .cmi-label
65
65
  color: $checkbox-color-valid
66
66
  &.cmi-invalid
67
- label
67
+ .cmi-label
68
68
  color: $checkbox-color-invalid
69
- p.cmi-hint
69
+ p.cmi-hint, .cmi-p.cmi-hint
70
70
  margin: 0 0 0 40px
71
71
  font-size: 0.86em
72
72
  color: $checkbox-color-hint
@@ -74,14 +74,14 @@
74
74
  color: $checkbox-color-valid
75
75
  &.cmi-invalid
76
76
  color: $checkbox-color-invalid
77
- label:hover
77
+ .cmi-label:hover
78
78
  .cmi-animation
79
79
  visibility: visible
80
80
  opacity: 1
81
81
  +transition(all 0.1s linear)
82
82
  &.cmi-active
83
- span.cmi-checkbox
83
+ .cmi-span.cmi-checkbox
84
84
  border-color: $checkbox-color-check
85
85
  background-color: $checkbox-color-check
86
- span.cmi-checkbox:before
86
+ .cmi-span.cmi-checkbox:before
87
87
  font-size: 15px
data/lib/assets/stylesheets/cmi/form_components/_text_field.sass CHANGED
@@ -3,7 +3,7 @@
3
3
  margin: 1.25rem 0 1.5rem 0
4
4
  font-size: 14px
5
5
  font-size: 0.875rem
6
- label
6
+ .cmi-label
7
7
  position: absolute
8
8
  left: 0
9
9
  font-size: 1em
@@ -11,23 +11,23 @@
11
11
  pointer-events: none
12
12
  cursor: text
13
13
  +transition(.2s ease-out all)
14
- input
14
+ .cmi-input
15
15
  font-size: 1em
16
16
  height: 2em
17
17
  padding: 0
18
- + label
18
+ + label, + .cmi-label
19
19
  top: 0.3em
20
- textarea
20
+ .cmi-textarea
21
21
  width: 100%
22
22
  min-height: 2rem
23
23
  padding: 0.6em 0 0.7em 0
24
24
  font-size: 1em
25
25
  background-color: transparent
26
26
  overflow: hidden
27
- + label
27
+ + label, .cmi-label
28
28
  top: 0.5em
29
29
  &.cmi-growing-textarea
30
- textarea
30
+ .cmi-textarea
31
31
  resize: none
32
32
  +transition(height 0.05s ease)
33
33
  .cmi-hidden-textarea-reference
@@ -36,65 +36,65 @@
36
36
  top: 9999px
37
37
  left: 9999px
38
38
 
39
- input,
40
- textarea
39
+ .cmi-input,
40
+ .cmi-textarea
41
41
  background-color: transparent
42
42
  border: none
43
43
  border-bottom: 1px solid $input-color-border
44
44
  outline: none
45
45
  width: 100%
46
46
  margin: 0
47
- +box-shadow(none)
47
+ +cmi-box-shadow(none)
48
48
  +box-sizing(content-box)
49
49
  +transition(border-bottom .3s ease)
50
50
  &:focus
51
51
  border-bottom: 1px solid $input-color-focus
52
- +box-shadow(0 1px 0 0 $input-color-focus)
52
+ +cmi-box-shadow(0 1px 0 0 $input-color-focus)
53
53
 
54
54
  &.cmi-active,
55
- input:focus,
56
- textarea:focus
57
- label
55
+ .cmi-input:focus,
56
+ .cmi-textarea:focus
57
+ .cmi-label
58
58
  top: 0
59
59
  font-size: 0.8125em
60
60
  font-weight: 300
61
61
  +transform(translateY(-80%))
62
62
 
63
63
  &.cmi-active
64
- label
64
+ .cmi-label
65
65
  color: color("grey", "base")
66
66
 
67
- input:focus,
68
- textarea:focus
69
- + label
67
+ .cmi-input:focus
68
+ .cmi-textarea:focus
69
+ + .cmi-label
70
70
  color: $input-color-focus
71
71
 
72
72
  &.cmi-valid
73
- label
73
+ .cmi-label
74
74
  color: $input-color-valid
75
- input,
76
- textarea
75
+ .cmi-input,
76
+ .cmi-textarea
77
77
  border-bottom: 1px solid $input-color-valid
78
- +box-shadow(0 1px 0 0 $input-color-valid)
78
+ +cmi-box-shadow(0 1px 0 0 $input-color-valid)
79
79
 
80
80
  &.cmi-invalid
81
- label
81
+ .cmi-label
82
82
  color: $input-color-invalid
83
- input,
84
- textarea
83
+ .cmi-input,
84
+ .cmi-textarea
85
85
  border-bottom: 1px solid $input-color-invalid
86
- +box-shadow(0 1px 0 0 $input-color-invalid)
86
+ +cmi-box-shadow(0 1px 0 0 $input-color-invalid)
87
87
 
88
88
  // hints
89
- p.cmi-hint
89
+ .cmi-p.cmi-hint
90
90
  margin: 3px 0 0 0
91
91
  font-size: 0.85em
92
92
  font-weight: 300
93
93
  text-align: right
94
94
  color: color("grey", "lighten-1")
95
- p.cmi-hint.cmi-valid
95
+ .cmi-p.cmi-hint.cmi-valid
96
96
  color: $input-color-valid
97
- p.cmi-hint.cmi-invalid
97
+ .cmi-p.cmi-hint.cmi-invalid
98
98
  color: $input-color-invalid
99
99
 
100
100
 
data/lib/curo_material_interface/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module CuroMaterialInterface
2
- VERSION = "0.0.3"
2
+ VERSION = "0.0.4"
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: curo-material-interface
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.3
4
+ version: 0.0.4
5
5
  platform: ruby
6
6
  authors:
7
7
  - Sascha Hillig
@@ -10,7 +10,7 @@ authors:
10
10
  autorequire:
11
11
  bindir: bin
12
12
  cert_chain: []
13
- date: 2015-04-20 00:00:00.000000000 Z
13
+ date: 2015-05-16 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: sass