mtl 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (158) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +12 -0
  3. data/Gemfile +9 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +104 -0
  6. data/Rakefile +6 -0
  7. data/app/assets/javascripts/mtl/clickables.coffee +25 -0
  8. data/app/assets/javascripts/mtl/collapsible.coffee +43 -0
  9. data/app/assets/javascripts/mtl/configuration.coffee.erb +1 -0
  10. data/app/assets/javascripts/mtl/document_modal.coffee +130 -0
  11. data/app/assets/javascripts/mtl/dropdown.coffee +24 -0
  12. data/app/assets/javascripts/mtl/hooks.coffee +14 -0
  13. data/app/assets/javascripts/mtl/icon.coffee.erb +17 -0
  14. data/app/assets/javascripts/mtl/modal.coffee +32 -0
  15. data/app/assets/javascripts/mtl/select.coffee +44 -0
  16. data/app/assets/javascripts/mtl/templates.coffee +4 -0
  17. data/app/assets/javascripts/mtl/toc.coffee +31 -0
  18. data/app/assets/javascripts/mtl.js +42 -0
  19. data/app/assets/stylesheets/mtl/all.scss +69 -0
  20. data/app/assets/stylesheets/mtl/extend/_avatars.scss +37 -0
  21. data/app/assets/stylesheets/mtl/extend/_buttons.scss +31 -0
  22. data/app/assets/stylesheets/mtl/extend/_cards.scss +21 -0
  23. data/app/assets/stylesheets/mtl/extend/_chips.scss +3 -0
  24. data/app/assets/stylesheets/mtl/extend/_collection-files.scss +108 -0
  25. data/app/assets/stylesheets/mtl/extend/_document-modals.scss +95 -0
  26. data/app/assets/stylesheets/mtl/extend/_dropdown.scss +12 -0
  27. data/app/assets/stylesheets/mtl/extend/_forms.scss +66 -0
  28. data/app/assets/stylesheets/mtl/extend/_global.scss +77 -0
  29. data/app/assets/stylesheets/mtl/extend/_grid.scss +25 -0
  30. data/app/assets/stylesheets/mtl/extend/_material-icons.scss +37 -0
  31. data/app/assets/stylesheets/mtl/extend/_mixins.scss +10 -0
  32. data/app/assets/stylesheets/mtl/extend/_roboto-rails.scss +49 -0
  33. data/app/assets/stylesheets/mtl/extend/_side-nav.scss +22 -0
  34. data/app/assets/stylesheets/mtl/extend/_toc.scss +12 -0
  35. data/app/assets/stylesheets/mtl/extend/_typography.scss +32 -0
  36. data/app/assets/stylesheets/mtl/extend/forms/_input-fields.scss +50 -0
  37. data/app/assets/stylesheets/mtl/layouts/_default.scss +220 -0
  38. data/app/assets/stylesheets/mtl/layouts/_single.scss +25 -0
  39. data/app/views/mtl/header.html.erb +25 -0
  40. data/bin/coffeelint.rb +16 -0
  41. data/lib/generators/mtl/install_generator.rb +20 -0
  42. data/lib/generators/mtl/templates/_color.scss +410 -0
  43. data/lib/generators/mtl/templates/_variables.scss +330 -0
  44. data/lib/generators/mtl/templates/mtl.scss +8 -0
  45. data/lib/generators/mtl/templates/simple_form.rb +211 -0
  46. data/lib/mtl/rails/card_file_presenter.rb +70 -0
  47. data/lib/mtl/rails/view_helpers.rb +412 -0
  48. data/lib/mtl/simple_form/suffix.rb +52 -0
  49. data/lib/mtl/version.rb +6 -0
  50. data/lib/mtl.rb +38 -0
  51. data/mtl.gemspec +35 -0
  52. data/package.json +11 -0
  53. data/spec/mtl/rails/card_file_presenter_spec.rb +126 -0
  54. data/spec/mtl/rails/view_helpers_spec.rb +193 -0
  55. data/spec/mtl/simple_form/suffix_spec.rb +39 -0
  56. data/spec/mtl_spec.rb +34 -0
  57. data/spec/spec_helper.rb +18 -0
  58. data/spec/support/dom.rb +15 -0
  59. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.eot +0 -0
  60. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.ijmap +1 -0
  61. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.svg +2373 -0
  62. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.ttf +0 -0
  63. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.woff +0 -0
  64. data/vendor/assets/fonts/material-icons/MaterialIcons-Regular.woff2 +0 -0
  65. data/vendor/assets/fonts/roboto/Roboto-Bold.eot +0 -0
  66. data/vendor/assets/fonts/roboto/Roboto-Bold.ttf +0 -0
  67. data/vendor/assets/fonts/roboto/Roboto-Bold.woff +0 -0
  68. data/vendor/assets/fonts/roboto/Roboto-Bold.woff2 +0 -0
  69. data/vendor/assets/fonts/roboto/Roboto-Light.eot +0 -0
  70. data/vendor/assets/fonts/roboto/Roboto-Light.ttf +0 -0
  71. data/vendor/assets/fonts/roboto/Roboto-Light.woff +0 -0
  72. data/vendor/assets/fonts/roboto/Roboto-Light.woff2 +0 -0
  73. data/vendor/assets/fonts/roboto/Roboto-Medium.eot +0 -0
  74. data/vendor/assets/fonts/roboto/Roboto-Medium.ttf +0 -0
  75. data/vendor/assets/fonts/roboto/Roboto-Medium.woff +0 -0
  76. data/vendor/assets/fonts/roboto/Roboto-Medium.woff2 +0 -0
  77. data/vendor/assets/fonts/roboto/Roboto-Regular.eot +0 -0
  78. data/vendor/assets/fonts/roboto/Roboto-Regular.ttf +0 -0
  79. data/vendor/assets/fonts/roboto/Roboto-Regular.woff +0 -0
  80. data/vendor/assets/fonts/roboto/Roboto-Regular.woff2 +0 -0
  81. data/vendor/assets/fonts/roboto/Roboto-Thin.eot +0 -0
  82. data/vendor/assets/fonts/roboto/Roboto-Thin.ttf +0 -0
  83. data/vendor/assets/fonts/roboto/Roboto-Thin.woff +0 -0
  84. data/vendor/assets/fonts/roboto/Roboto-Thin.woff2 +0 -0
  85. data/vendor/assets/javascripts/lodash.js +16607 -0
  86. data/vendor/assets/javascripts/materialize/animation.js +9 -0
  87. data/vendor/assets/javascripts/materialize/buttons.js +91 -0
  88. data/vendor/assets/javascripts/materialize/cards.js +26 -0
  89. data/vendor/assets/javascripts/materialize/carousel.js +454 -0
  90. data/vendor/assets/javascripts/materialize/character_counter.js +72 -0
  91. data/vendor/assets/javascripts/materialize/chips.js +267 -0
  92. data/vendor/assets/javascripts/materialize/collapsible.js +160 -0
  93. data/vendor/assets/javascripts/materialize/date_picker/picker.date.js +1430 -0
  94. data/vendor/assets/javascripts/materialize/date_picker/picker.js +1123 -0
  95. data/vendor/assets/javascripts/materialize/dropdown.js +265 -0
  96. data/vendor/assets/javascripts/materialize/forms.js +681 -0
  97. data/vendor/assets/javascripts/materialize/global.js +45 -0
  98. data/vendor/assets/javascripts/materialize/hammer.min.js +1 -0
  99. data/vendor/assets/javascripts/materialize/init.js +173 -0
  100. data/vendor/assets/javascripts/materialize/initial.js +11 -0
  101. data/vendor/assets/javascripts/materialize/jquery.easing.1.3.js +205 -0
  102. data/vendor/assets/javascripts/materialize/jquery.hammer.js +33 -0
  103. data/vendor/assets/javascripts/materialize/jquery.timeago.min.js +1 -0
  104. data/vendor/assets/javascripts/materialize/leanModal.js +192 -0
  105. data/vendor/assets/javascripts/materialize/materialbox.js +269 -0
  106. data/vendor/assets/javascripts/materialize/parallax.js +58 -0
  107. data/vendor/assets/javascripts/materialize/prism.js +8 -0
  108. data/vendor/assets/javascripts/materialize/pushpin.js +71 -0
  109. data/vendor/assets/javascripts/materialize/scrollFire.js +48 -0
  110. data/vendor/assets/javascripts/materialize/scrollspy.js +283 -0
  111. data/vendor/assets/javascripts/materialize/sideNav.js +352 -0
  112. data/vendor/assets/javascripts/materialize/slider.js +321 -0
  113. data/vendor/assets/javascripts/materialize/tabs.js +148 -0
  114. data/vendor/assets/javascripts/materialize/toasts.js +136 -0
  115. data/vendor/assets/javascripts/materialize/tooltip.js +230 -0
  116. data/vendor/assets/javascripts/materialize/transitions.js +169 -0
  117. data/vendor/assets/javascripts/materialize/velocity.min.js +5 -0
  118. data/vendor/assets/javascripts/materialize/waves.js +338 -0
  119. data/vendor/assets/javascripts/pdfobject.js +254 -0
  120. data/vendor/assets/stylesheets/materialize/_buttons.scss +211 -0
  121. data/vendor/assets/stylesheets/materialize/_cards.scss +185 -0
  122. data/vendor/assets/stylesheets/materialize/_carousel.scss +85 -0
  123. data/vendor/assets/stylesheets/materialize/_chips.scss +74 -0
  124. data/vendor/assets/stylesheets/materialize/_collapsible.scss +90 -0
  125. data/vendor/assets/stylesheets/materialize/_color.scss +412 -0
  126. data/vendor/assets/stylesheets/materialize/_dropdown.scss +57 -0
  127. data/vendor/assets/stylesheets/materialize/_global.scss +781 -0
  128. data/vendor/assets/stylesheets/materialize/_grid.scss +147 -0
  129. data/vendor/assets/stylesheets/materialize/_icons-material-design.scss +5 -0
  130. data/vendor/assets/stylesheets/materialize/_materialbox.scss +42 -0
  131. data/vendor/assets/stylesheets/materialize/_mixins.scss +5 -0
  132. data/vendor/assets/stylesheets/materialize/_modal.scss +90 -0
  133. data/vendor/assets/stylesheets/materialize/_navbar.scss +182 -0
  134. data/vendor/assets/stylesheets/materialize/_normalize.scss +424 -0
  135. data/vendor/assets/stylesheets/materialize/_prefixer.scss +384 -0
  136. data/vendor/assets/stylesheets/materialize/_preloader.scss +334 -0
  137. data/vendor/assets/stylesheets/materialize/_roboto.scss +49 -0
  138. data/vendor/assets/stylesheets/materialize/_sideNav.scss +219 -0
  139. data/vendor/assets/stylesheets/materialize/_slider.scss +92 -0
  140. data/vendor/assets/stylesheets/materialize/_table_of_contents.scss +33 -0
  141. data/vendor/assets/stylesheets/materialize/_tabs.scss +56 -0
  142. data/vendor/assets/stylesheets/materialize/_toast.scss +65 -0
  143. data/vendor/assets/stylesheets/materialize/_tooltip.scss +32 -0
  144. data/vendor/assets/stylesheets/materialize/_typography.scss +61 -0
  145. data/vendor/assets/stylesheets/materialize/_variables.scss +313 -0
  146. data/vendor/assets/stylesheets/materialize/_waves.scss +177 -0
  147. data/vendor/assets/stylesheets/materialize/date_picker/_default.date.scss +435 -0
  148. data/vendor/assets/stylesheets/materialize/date_picker/_default.scss +201 -0
  149. data/vendor/assets/stylesheets/materialize/date_picker/_default.time.scss +125 -0
  150. data/vendor/assets/stylesheets/materialize/forms/_checkboxes.scss +220 -0
  151. data/vendor/assets/stylesheets/materialize/forms/_file-input.scss +38 -0
  152. data/vendor/assets/stylesheets/materialize/forms/_forms.scss +22 -0
  153. data/vendor/assets/stylesheets/materialize/forms/_input-fields.scss +273 -0
  154. data/vendor/assets/stylesheets/materialize/forms/_radio-buttons.scss +119 -0
  155. data/vendor/assets/stylesheets/materialize/forms/_range.scss +159 -0
  156. data/vendor/assets/stylesheets/materialize/forms/_select.scss +116 -0
  157. data/vendor/assets/stylesheets/materialize/forms/_switches.scss +78 -0
  158. metadata +309 -0
@@ -0,0 +1,211 @@
1
+ // shared styles
2
+ .btn,
3
+ .btn-flat {
4
+ border: $button-border;
5
+ border-radius: $button-radius;
6
+ display: inline-block;
7
+ height: $button-height;
8
+ line-height: $button-height;
9
+ outline: 0;
10
+ padding: $button-padding;
11
+ text-transform: uppercase;
12
+ vertical-align: middle;
13
+ // Gets rid of tap active state
14
+ -webkit-tap-highlight-color: transparent;
15
+ }
16
+
17
+ // Disabled shared style
18
+ .btn.disabled,
19
+ .btn-floating.disabled,
20
+ .btn-large.disabled,
21
+ .btn:disabled,
22
+ .btn-large:disabled,
23
+ .btn-floating:disabled,
24
+ .btn[disabled],
25
+ .btn-large[disabled],
26
+ .btn-floating[disabled] {
27
+ background-color: $button-disabled-background !important;
28
+ box-shadow: none;
29
+ color: $button-disabled-color !important;
30
+ cursor: default;
31
+
32
+ * {
33
+ pointer-events: none;
34
+ }
35
+
36
+ &:hover {
37
+ background-color: $button-disabled-background !important;
38
+ color: $button-disabled-color !important;
39
+ }
40
+ }
41
+
42
+ // Shared icon styles
43
+ .btn,
44
+ .btn-floating,
45
+ .btn-large,
46
+ .btn-flat {
47
+ i {
48
+ font-size: $button-font-size;
49
+ line-height: inherit;
50
+ }
51
+ }
52
+
53
+ // Raised Button
54
+ .btn {
55
+ text-decoration: none;
56
+ color: $button-raised-color;
57
+ background-color: $button-raised-background;
58
+ text-align: center;
59
+ letter-spacing: .5px;
60
+ @extend .z-depth-1;
61
+ transition: .2s ease-out;
62
+ cursor: pointer;
63
+
64
+ &:hover {
65
+ background-color: $button-raised-background-hover;
66
+ @extend .z-depth-1-half;
67
+ }
68
+ }
69
+
70
+ // Floating button
71
+ .btn-floating {
72
+ display: inline-block;
73
+ color: $button-floating-color;
74
+ position: relative;
75
+ overflow: hidden;
76
+ z-index: 1;
77
+ width: $button-floating-size;
78
+ height: $button-floating-size;
79
+ line-height: $button-floating-size;
80
+ padding: 0;
81
+ background-color: $button-floating-background;
82
+ border-radius: $button-floating-radius;
83
+ @extend .z-depth-1;
84
+ transition: .3s;
85
+ cursor: pointer;
86
+ vertical-align: middle;
87
+
88
+ i {
89
+ width: inherit;
90
+ display: inline-block;
91
+ text-align: center;
92
+ color: $button-floating-color;
93
+ font-size: $button-large-icon-font-size;
94
+ line-height: $button-floating-size;
95
+ }
96
+
97
+ &:hover {
98
+ background-color: $button-floating-background-hover;
99
+ @extend .z-depth-1-half;
100
+ }
101
+
102
+ &:before {
103
+ border-radius: 0;
104
+ }
105
+
106
+ &.btn-large {
107
+ width: $button-floating-large-size;
108
+ height: $button-floating-large-size;
109
+ i {
110
+ line-height: $button-floating-large-size;
111
+ }
112
+ }
113
+ }
114
+
115
+ // button fix
116
+ button.btn-floating {
117
+ border: $button-border;
118
+ }
119
+
120
+ // Fixed Action Button
121
+ .fixed-action-btn {
122
+ &.active {
123
+ ul {
124
+ visibility: visible;
125
+ }
126
+ }
127
+
128
+ &.horizontal {
129
+ padding: 0 0 0 15px;
130
+
131
+ ul {
132
+ text-align: right;
133
+ right: 64px;
134
+ top: 50%;
135
+ transform: translateY(-50%);
136
+ height: 100%;
137
+ left: auto;
138
+ width: 500px; /*width 100% only goes to width of button container */
139
+
140
+ li {
141
+ display: inline-block;
142
+ margin: 15px 15px 0 0;
143
+ }
144
+ }
145
+ }
146
+
147
+ position: fixed;
148
+ right: 23px;
149
+ bottom: 23px;
150
+ padding-top: 15px;
151
+ margin-bottom: 0;
152
+ z-index: 998;
153
+
154
+ ul {
155
+ left: 0;
156
+ right: 0;
157
+ text-align: center;
158
+ position: absolute;
159
+ bottom: 64px;
160
+ margin: 0;
161
+ visibility: hidden;
162
+
163
+ li {
164
+ margin-bottom: 15px;
165
+ }
166
+
167
+ a.btn-floating {
168
+ opacity: 0;
169
+ }
170
+ }
171
+ }
172
+
173
+ // Flat button
174
+ .btn-flat {
175
+ box-shadow: none;
176
+ background-color: transparent;
177
+ color: $button-flat-color;
178
+ cursor: pointer;
179
+ transition: background-color .2s;
180
+
181
+ &:focus,
182
+ &:active {
183
+ background-color: transparent;
184
+ }
185
+
186
+ &:hover {
187
+ background-color: rgba(0,0,0,.1);
188
+ box-shadow: none;
189
+ }
190
+
191
+ &.disabled {
192
+ color: $button-flat-disabled-color;
193
+ cursor: default;
194
+ }
195
+ }
196
+
197
+ // Large button
198
+ .btn-large {
199
+ @extend .btn;
200
+ height: $button-large-height;
201
+ line-height: $button-large-height;
202
+
203
+ i {
204
+ font-size: $button-large-icon-font-size;
205
+ }
206
+ }
207
+
208
+ // Block button
209
+ .btn-block {
210
+ display: block;
211
+ }
@@ -0,0 +1,185 @@
1
+
2
+
3
+ .card-panel {
4
+ transition: box-shadow .25s;
5
+ padding: $card-padding;
6
+ margin: $element-top-margin 0 $element-bottom-margin 0;
7
+ border-radius: 2px;
8
+ @extend .z-depth-1;
9
+ background-color: $card-bg-color;
10
+ }
11
+
12
+ .card {
13
+ position: relative;
14
+ margin: $element-top-margin 0 $element-bottom-margin 0;
15
+ background-color: $card-bg-color;
16
+ transition: box-shadow .25s;
17
+ border-radius: 2px;
18
+ @extend .z-depth-1;
19
+
20
+
21
+ .card-title {
22
+ font-size: 24px;
23
+ font-weight: 300;
24
+ &.activator {
25
+ cursor: pointer;
26
+ }
27
+ }
28
+
29
+ // Card Sizes
30
+ &.small, &.medium, &.large {
31
+ position: relative;
32
+
33
+ .card-image {
34
+ max-height: 60%;
35
+ overflow: hidden;
36
+ }
37
+ .card-image + .card-content {
38
+ max-height: 40%;
39
+ }
40
+ .card-content {
41
+ max-height: 100%;
42
+ overflow: hidden;
43
+ }
44
+ .card-action {
45
+ position: absolute;
46
+ bottom: 0;
47
+ left: 0;
48
+ right: 0;
49
+ }
50
+ }
51
+
52
+ &.small {
53
+ height: 300px;
54
+ }
55
+
56
+ &.medium {
57
+ height: 400px;
58
+ }
59
+
60
+ &.large {
61
+ height: 500px;
62
+ }
63
+
64
+ // Horizontal Cards
65
+ &.horizontal {
66
+ &.small, &.medium, &.large {
67
+ .card-image {
68
+ height: 100%;
69
+ max-height: none;
70
+ overflow: visible;
71
+
72
+ img {
73
+ height: 100%;
74
+ }
75
+ }
76
+ }
77
+
78
+ display: flex;
79
+
80
+ .card-image {
81
+ max-width: 50%;
82
+ img {
83
+ max-width: 100%;
84
+ width: auto;
85
+ }
86
+ }
87
+
88
+ .card-stacked {
89
+ display: flex;
90
+ flex-direction: column;
91
+ flex: 1;
92
+ position: relative;
93
+
94
+ .card-content {
95
+ flex-grow: 1;
96
+ }
97
+ }
98
+ }
99
+
100
+ // Sticky Action Section
101
+ &.sticky-action {
102
+ .card-action {
103
+ z-index: 2;
104
+ }
105
+
106
+ .card-reveal {
107
+ z-index: 1;
108
+ padding-bottom: 64px;
109
+ }
110
+ }
111
+
112
+
113
+
114
+
115
+ .card-image {
116
+ position: relative;
117
+
118
+ // Image background for content
119
+ img {
120
+ display: block;
121
+ border-radius: 2px 2px 0 0;
122
+ position: relative;
123
+ left: 0;
124
+ right: 0;
125
+ top: 0;
126
+ bottom: 0;
127
+ width: 100%;
128
+ }
129
+
130
+ .card-title {
131
+ color: $card-bg-color;
132
+ position: absolute;
133
+ bottom: 0;
134
+ left: 0;
135
+ padding: $card-padding;
136
+ }
137
+
138
+ }
139
+
140
+ .card-content {
141
+ padding: $card-padding;
142
+ border-radius: 0 0 2px 2px;
143
+
144
+ p {
145
+ margin: 0;
146
+ color: inherit;
147
+ }
148
+ .card-title {
149
+ line-height: 48px;
150
+ }
151
+ }
152
+
153
+ .card-action {
154
+ position: relative;
155
+ background-color: inherit;
156
+ border-top: 1px solid rgba(160,160,160,.2);
157
+ padding: $card-padding;
158
+
159
+ a:not(.btn):not(.btn-large):not(.btn-floating) {
160
+ color: $card-link-color;
161
+ margin-right: $card-padding;
162
+ transition: color .3s ease;
163
+ text-transform: uppercase;
164
+
165
+ &:hover { color: $card-link-color-light; }
166
+ }
167
+ }
168
+
169
+ .card-reveal {
170
+ padding: $card-padding;
171
+ position: absolute;
172
+ background-color: $card-bg-color;
173
+ width: 100%;
174
+ overflow-y: auto;
175
+ top: 100%;
176
+ height: 100%;
177
+ z-index: 3;
178
+ display: none;
179
+
180
+ .card-title {
181
+ cursor: pointer;
182
+ display: block;
183
+ }
184
+ }
185
+ }
@@ -0,0 +1,85 @@
1
+ .carousel {
2
+ &.carousel-slider {
3
+ top: 0;
4
+ left: 0;
5
+ height: 0;
6
+
7
+ .carousel-fixed-item {
8
+ &.with-indicators {
9
+ bottom: 68px;
10
+ }
11
+
12
+ position: absolute;
13
+ left: 0;
14
+ right: 0;
15
+ bottom: 20px;
16
+ z-index: 1;
17
+ }
18
+
19
+ .carousel-item {
20
+ width: 100%;
21
+ height: 100%;
22
+ min-height: 400px;
23
+ position: absolute;
24
+ top: 0;
25
+ left: 0;
26
+
27
+ h2 {
28
+ font-size: 24px;
29
+ font-weight: 500;
30
+ line-height: 32px;
31
+ }
32
+
33
+ p {
34
+ font-size: 15px;
35
+ }
36
+ }
37
+ }
38
+
39
+ overflow: hidden;
40
+ position: relative;
41
+ width: 100%;
42
+ height: 400px;
43
+ perspective: 500px;
44
+ transform-style: preserve-3d;
45
+ transform-origin: 0% 50%;
46
+
47
+ .carousel-item {
48
+ display: none;
49
+ width: 200px;
50
+ height: 400px;
51
+ position: absolute;
52
+ top: 0;
53
+ left: 0;
54
+
55
+ img {
56
+ width: 100%;
57
+ }
58
+ }
59
+
60
+ .indicators {
61
+ position: absolute;
62
+ text-align: center;
63
+ left: 0;
64
+ right: 0;
65
+ bottom: 0;
66
+ margin: 0;
67
+
68
+ .indicator-item {
69
+ &.active {
70
+ background-color: #fff;
71
+ }
72
+
73
+ display: inline-block;
74
+ position: relative;
75
+ cursor: pointer;
76
+ height: 8px;
77
+ width: 8px;
78
+ margin: 24px 4px;
79
+ background-color: rgba(255,255,255,.5);
80
+
81
+ transition: background-color .3s;
82
+ border-radius: 50%;
83
+ }
84
+ }
85
+ }
@@ -0,0 +1,74 @@
1
+ .chip {
2
+ display: inline-block;
3
+ height: 32px;
4
+ font-size: 13px;
5
+ font-weight: 500;
6
+ color: rgba(0,0,0,.6);
7
+ line-height: 32px;
8
+ padding: 0 12px;
9
+ border-radius: 16px;
10
+ background-color: $chip-bg-color;
11
+ margin-bottom: $chip-margin;
12
+ margin-right: $chip-margin;
13
+
14
+ img {
15
+ float: left;
16
+ margin: 0 8px 0 -12px;
17
+ height: 32px;
18
+ width: 32px;
19
+ border-radius: 50%;
20
+ }
21
+
22
+ .close {
23
+ cursor: pointer;
24
+ float: right;
25
+ font-size: 16px;
26
+ line-height: 32px;
27
+ padding-left: 8px;
28
+ }
29
+ }
30
+
31
+ .chips {
32
+ border: none;
33
+ border-bottom: 1px solid $chip-border-color;
34
+ box-shadow: none;
35
+ margin-bottom: 30px;
36
+ min-height: 45px;
37
+ outline: none;
38
+ padding-bottom: $chip-margin;
39
+ transition: all .3s;
40
+
41
+ &.focus {
42
+ border-bottom: 1px solid $chip-selected-color;
43
+ box-shadow: 0 1px 0 0 $chip-selected-color;
44
+ }
45
+
46
+ &:hover {
47
+ cursor: text;
48
+ }
49
+
50
+ .chip.selected {
51
+ background-color: $chip-selected-color;
52
+ color: #fff;
53
+ }
54
+
55
+ .input {
56
+ background: none;
57
+ border: 0;
58
+ color: rgba(0,0,0,.6);
59
+ display: inline-block;
60
+ font-size: 13px;
61
+ font-weight: 500;
62
+ height: 32px;
63
+ margin-right: 20px;
64
+ line-height: 32px;
65
+ outline: 0;
66
+ padding: 0 !important;
67
+ width: 120px !important;
68
+ }
69
+
70
+ .input:focus {
71
+ border: 0 !important;
72
+ box-shadow: none !important;
73
+ }
74
+ }
@@ -0,0 +1,90 @@
1
+ .collapsible {
2
+ border-top: 1px solid $collapsible-border-color;
3
+ border-right: 1px solid $collapsible-border-color;
4
+ border-left: 1px solid $collapsible-border-color;
5
+ margin: $element-top-margin 0 $element-bottom-margin 0;
6
+ @extend .z-depth-1;
7
+ }
8
+
9
+ .collapsible-header {
10
+ display: block;
11
+ cursor: pointer;
12
+ min-height: $collapsible-height;
13
+ line-height: $collapsible-height;
14
+ padding: 0 1rem;
15
+ background-color: $collapsible-header-color;
16
+ border-bottom: 1px solid $collapsible-border-color;
17
+
18
+ i {
19
+ width: 2rem;
20
+ font-size: 1.6rem;
21
+ line-height: $collapsible-height;
22
+ display: block;
23
+ float: left;
24
+ text-align: center;
25
+ margin-right: 1rem;
26
+ }
27
+ }
28
+
29
+ .collapsible-body {
30
+ display: none;
31
+ border-bottom: 1px solid $collapsible-border-color;
32
+ box-sizing: border-box;
33
+
34
+ p {
35
+ margin: 0;
36
+ padding: 2rem;
37
+ }
38
+ }
39
+
40
+ // sideNav collapsible styling
41
+ .side-nav,
42
+ .side-nav.fixed {
43
+
44
+ .collapsible {
45
+ border: none;
46
+ box-shadow: none;
47
+
48
+ li { padding: 0; }
49
+ }
50
+
51
+ .collapsible-header {
52
+ background-color: transparent;
53
+ border: none;
54
+ line-height: inherit;
55
+ height: inherit;
56
+ padding: 0 $sidenav-padding;
57
+
58
+ &:hover { background-color: rgba(0,0,0,.05); }
59
+ i { line-height: inherit; }
60
+ }
61
+
62
+ .collapsible-body {
63
+ border: 0;
64
+ background-color: $collapsible-header-color;
65
+
66
+ li a {
67
+ padding: 0 (7.5px + $sidenav-padding)
68
+ 0 (15px + $sidenav-padding);
69
+ }
70
+ }
71
+
72
+ }
73
+
74
+ // Popout Collapsible
75
+
76
+ .collapsible.popout {
77
+ border: none;
78
+ box-shadow: none;
79
+ > li {
80
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
81
+ // transform: scaleX(.92);
82
+ margin: 0 24px;
83
+ transition: margin .35s cubic-bezier(0.250, 0.460, 0.450, 0.940);
84
+ }
85
+ > li.active {
86
+ box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
87
+ margin: 16px 0;
88
+ // transform: scaleX(1);
89
+ }
90
+ }