rails-bootstrap-material-design 0.5.10

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 (55) hide show
  1. checksums.yaml +7 -0
  2. data/Gemfile +4 -0
  3. data/README.md +18 -0
  4. data/Rakefile +1 -0
  5. data/app/.DS_Store +0 -0
  6. data/app/assets/.DS_Store +0 -0
  7. data/app/assets/images/.DS_Store +0 -0
  8. data/app/assets/images/bootstrap-material-design/material-design-color-palette.jpg +0 -0
  9. data/app/assets/javascripts/.DS_Store +0 -0
  10. data/app/assets/javascripts/bootstrap-material-design.js +2 -0
  11. data/app/assets/javascripts/bootstrap-material-design/material.js +350 -0
  12. data/app/assets/javascripts/bootstrap-material-design/ripples.js +325 -0
  13. data/app/assets/stylesheets/.DS_Store +0 -0
  14. data/app/assets/stylesheets/bootstrap-material-design.scss +4 -0
  15. data/app/assets/stylesheets/bootstrap-material-design/.DS_Store +0 -0
  16. data/app/assets/stylesheets/bootstrap-material-design/_alerts.scss +17 -0
  17. data/app/assets/stylesheets/bootstrap-material-design/_buttons.scss +244 -0
  18. data/app/assets/stylesheets/bootstrap-material-design/_cards.scss +66 -0
  19. data/app/assets/stylesheets/bootstrap-material-design/_checkboxes.scss +270 -0
  20. data/app/assets/stylesheets/bootstrap-material-design/_colors-map.scss +311 -0
  21. data/app/assets/stylesheets/bootstrap-material-design/_colors.scss +359 -0
  22. data/app/assets/stylesheets/bootstrap-material-design/_core.scss +93 -0
  23. data/app/assets/stylesheets/bootstrap-material-design/_dialogs.scss +52 -0
  24. data/app/assets/stylesheets/bootstrap-material-design/_dividers.scss +71 -0
  25. data/app/assets/stylesheets/bootstrap-material-design/_form.scss +40 -0
  26. data/app/assets/stylesheets/bootstrap-material-design/_import-bs-sass.scss +2 -0
  27. data/app/assets/stylesheets/bootstrap-material-design/_inputs-size.scss +221 -0
  28. data/app/assets/stylesheets/bootstrap-material-design/_inputs.scss +352 -0
  29. data/app/assets/stylesheets/bootstrap-material-design/_labels.scss +4 -0
  30. data/app/assets/stylesheets/bootstrap-material-design/_lists.scss +102 -0
  31. data/app/assets/stylesheets/bootstrap-material-design/_mixins-utilities.scss +31 -0
  32. data/app/assets/stylesheets/bootstrap-material-design/_mixins.scss +241 -0
  33. data/app/assets/stylesheets/bootstrap-material-design/_navbar.scss +232 -0
  34. data/app/assets/stylesheets/bootstrap-material-design/_panels.scss +21 -0
  35. data/app/assets/stylesheets/bootstrap-material-design/_plugins.scss +5 -0
  36. data/app/assets/stylesheets/bootstrap-material-design/_popups.scss +18 -0
  37. data/app/assets/stylesheets/bootstrap-material-design/_progress.scss +10 -0
  38. data/app/assets/stylesheets/bootstrap-material-design/_radios.scss +115 -0
  39. data/app/assets/stylesheets/bootstrap-material-design/_shadows.scss +82 -0
  40. data/app/assets/stylesheets/bootstrap-material-design/_table.scss +15 -0
  41. data/app/assets/stylesheets/bootstrap-material-design/_tabs.scss +24 -0
  42. data/app/assets/stylesheets/bootstrap-material-design/_themes.scss +6 -0
  43. data/app/assets/stylesheets/bootstrap-material-design/_togglebutton.scss +83 -0
  44. data/app/assets/stylesheets/bootstrap-material-design/_typography.scss +15 -0
  45. data/app/assets/stylesheets/bootstrap-material-design/_variables.scss +169 -0
  46. data/app/assets/stylesheets/bootstrap-material-design/_welljumbo.scss +26 -0
  47. data/app/assets/stylesheets/bootstrap-material-design/plugins/_plugin-dropdownjs.scss +15 -0
  48. data/app/assets/stylesheets/bootstrap-material-design/plugins/_plugin-nouislider.scss +110 -0
  49. data/app/assets/stylesheets/bootstrap-material-design/plugins/_plugin-selectize.scss +91 -0
  50. data/app/assets/stylesheets/bootstrap-material-design/plugins/_plugin-snackbarjs.scss +32 -0
  51. data/app/assets/stylesheets/bootstrap-material-design/ripples.scss +36 -0
  52. data/lib/rails-bootstrap-material-design.rb +25 -0
  53. data/lib/rails-bootstrap-material-design/version.rb +3 -0
  54. data/rails-bootstrap-material-design.gemspec +20 -0
  55. metadata +124 -0
@@ -0,0 +1,352 @@
1
+ @import '_inputs-size';
2
+
3
+ // label variations
4
+ .label {
5
+ border-radius: $border-radius-small;
6
+ @include variations(unquote(".label"), unquote(""), background-color, $grey);
7
+ padding: .3em .6em; // Make top & bottom .label padding the same: https://github.com/twbs/bootstrap/pull/19631
8
+ }
9
+
10
+ // must be broken out for reuse - webkit selector breaks firefox
11
+ @mixin label-static($label-top, $static-font-size, $static-line-height){
12
+ label.control-label {
13
+ top: $label-top;
14
+ left: 0;
15
+ // must repeat because the selector above is more specific than the general label sizing
16
+ font-size: $static-font-size;
17
+ line-height: $static-line-height;
18
+ }
19
+ }
20
+
21
+ @mixin label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size){
22
+ .form-control {
23
+ @include material-placeholder {
24
+ font-size: $placeholder-font-size;
25
+ line-height: $line-height;
26
+ color: $mdb-input-placeholder-color;
27
+ font-weight: 400;
28
+
29
+ }
30
+ // margin-bottom must be specified to give help-block vertical space.
31
+ // $see also form-group padding-bottom (and size variants) re: collapsible margins. These work together.
32
+ margin-bottom: $vertical-padding;
33
+ }
34
+
35
+ // generic labels used anywhere in the form (not control-label)
36
+ .checkbox label,
37
+ .radio label,
38
+ label {
39
+ font-size: $placeholder-font-size;
40
+ line-height: $line-height;
41
+ color: $mdb-input-placeholder-color;
42
+ font-weight: 400;
43
+ }
44
+
45
+ // smaller focused or static size
46
+ label.control-label {
47
+ font-size: $static-font-size;
48
+ line-height: $static-line-height;
49
+ font-weight: 400;
50
+ margin: 16px 0 0 0; // std and lg
51
+ }
52
+
53
+ .help-block {
54
+ margin-top: 0; // allow the input margin to set-off the top of the help-block
55
+ font-size: $help-block-font-size;
56
+ }
57
+ }
58
+
59
+ @mixin form-group-validation-state($name, $color){
60
+
61
+ &.#{$name} { // e.g. has-error
62
+ .form-control {
63
+ box-shadow: none;
64
+ }
65
+ &.is-focused .form-control {
66
+ background-image: linear-gradient($color, $color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
67
+ }
68
+ label.control-label,
69
+ .help-block {
70
+ color: $color;
71
+ }
72
+ }
73
+ }
74
+
75
+ @mixin form-group-size-variant($parent, $placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim){
76
+ $static-font-size: ceil(($mdb-label-static-size-ratio * $placeholder-font-size)) !default;
77
+ $static-line-height: ($mdb-label-static-size-ratio * $line-height) !default;
78
+
79
+ $label-as-placeholder-top: -1 * ($vertical-padding + $label-as-placeholder-shim) !default;
80
+ $label-top: $label-as-placeholder-top - ($placeholder-font-size + $vertical-padding) !default;
81
+
82
+ $help-block-font-size: ceil(($mdb-help-block-size-ratio * $placeholder-font-size)) !default;
83
+ $help-block-line-height: ($mdb-help-block-size-ratio * $line-height) !default;
84
+
85
+ // this is outside a form-group
86
+ @if not $parent {
87
+ @include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size);
88
+ }
89
+
90
+ // this is inside a form-group, may be .form-group.form-group-sm or .form-group.form-group-lg
91
+ @else {
92
+ #{$parent} {
93
+ @include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size);
94
+
95
+ // form-group padding-bottom
96
+ // upon collapsing margins, the largest margin is honored which collapses the form-control margin-bottom,
97
+ // so the form-control margin-bottom must also be expressed as form-group padding
98
+ padding-bottom: $vertical-padding;
99
+
100
+ // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
101
+ margin: ($label-top-margin + $static-font-size) 0 0 0;
102
+
103
+ // larger labels as placeholders
104
+ &.label-floating,
105
+ &.label-placeholder {
106
+ label.control-label {
107
+ top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
108
+ font-size: $placeholder-font-size;
109
+ line-height: $line-height;
110
+ }
111
+ }
112
+
113
+ // static, focused, or autofill floating labels
114
+ &.label-static,
115
+ &.label-floating.is-focused,
116
+ &.label-floating:not(.is-empty) {
117
+ @include label-static($label-top, $static-font-size, $static-line-height);
118
+ }
119
+ // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
120
+ &.label-floating input.form-control:-webkit-autofill ~ label.control-label {
121
+ @include label-static($label-top, $static-font-size, $static-line-height);
122
+ }
123
+ }
124
+ }
125
+ }
126
+
127
+ // -----
128
+ // Inputs
129
+ //
130
+ // Reference http://www.google.com/design/spec/components/text-fields.html
131
+ // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
132
+ .form-control,
133
+ .form-group .form-control {
134
+ border: 0;
135
+ background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
136
+ background-size: 0 2px, 100% 1px;
137
+ background-repeat: no-repeat;
138
+ background-position: center bottom, center calc(100% - 1px);
139
+ background-color: rgba(0, 0, 0, 0);
140
+ transition: background 0s ease-out;
141
+ float: none;
142
+ box-shadow: none;
143
+ border-radius: 0;
144
+
145
+ // Placeholders and and labels-as-placeholders should look the same
146
+ @include material-placeholder {
147
+ color: $mdb-input-placeholder-color;
148
+ font-weight: 400;
149
+
150
+ }
151
+
152
+
153
+ //&:textarea { // appears to be an invalid selector
154
+ // height: 40px;
155
+ //}
156
+
157
+ &[readonly],
158
+ &[disabled],
159
+ fieldset[disabled] & {
160
+ background-color: rgba(0, 0, 0, 0);
161
+ }
162
+
163
+ &[disabled],
164
+ fieldset[disabled] & {
165
+ background-image: none;
166
+ border-bottom: 1px dotted $mdb-input-underline-color;
167
+ }
168
+ }
169
+
170
+ // -----
171
+ // Labels with form-group signalled state
172
+ //
173
+ // Reference http://www.google.com/design/spec/components/text-fields.html
174
+ // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
175
+ //.variations(unquote(" label.control-label"), color, $mdb-input-placeholder-color); // default label color variations
176
+
177
+ .form-group {
178
+ position: relative;
179
+
180
+ // -----
181
+ // Labels with form-group signalled state
182
+ //
183
+ // Reference http://www.google.com/design/spec/components/text-fields.html
184
+ // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
185
+ &.label-static,
186
+ &.label-placeholder,
187
+ &.label-floating {
188
+ label.control-label {
189
+ position: absolute;
190
+ pointer-events: none;
191
+ transition: 0.3s ease all;
192
+ }
193
+ }
194
+
195
+ // hint to browser for optimization
196
+ // TODO: evaluate effectiveness - looking for community feedback
197
+ &.label-floating label.control-label {
198
+ will-change: left, top, contents;
199
+ }
200
+
201
+ // hide label-placeholders when the field is not empty
202
+ &.label-placeholder:not(.is-empty){
203
+ label.control-label{
204
+ display: none;
205
+ }
206
+ }
207
+
208
+ // Help blocks - position: absolute approach - uses no vertical space, text wrapping - not so good.
209
+ .help-block {
210
+ position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur
211
+ display: none;
212
+ }
213
+
214
+ // form-group is-focused display
215
+ &.is-focused {
216
+ .form-control {
217
+ outline: none;
218
+ background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
219
+ background-size: 100% 2px, 100% 1px;
220
+ box-shadow: none;
221
+ transition-duration: 0.3s;
222
+
223
+ .material-input:after {
224
+ background-color: $brand-primary;
225
+ }
226
+ }
227
+
228
+ //.variations(unquote(".is-focused label.control-label"), color, $brand-primary); // focused label color variations
229
+ label,
230
+ label.control-label {
231
+ color: $brand-primary;
232
+ }
233
+
234
+ //.variations(unquote(".is-focused.label-placeholder label.control-label"), color, $mdb-input-placeholder-color); // default label color variations
235
+ &.label-placeholder {
236
+ label,
237
+ label.control-label {
238
+ color: $mdb-input-placeholder-color;
239
+ }
240
+ }
241
+
242
+ .help-block {
243
+ display: block;
244
+ }
245
+ }
246
+
247
+ @include form-group-validation-state(has-warning, $brand-warning);
248
+ @include form-group-validation-state(has-error, $brand-danger);
249
+ @include form-group-validation-state(has-success, $brand-success);
250
+ @include form-group-validation-state(has-info, $brand-info);
251
+
252
+ textarea {
253
+ resize: none;
254
+ & ~ .form-control-highlight {
255
+ margin-top: -11px;
256
+ }
257
+ }
258
+
259
+ select {
260
+ appearance: none; // Fix for OS X
261
+
262
+ & ~ .material-input:after {
263
+ display: none;
264
+ }
265
+ }
266
+ }
267
+
268
+ // default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation)
269
+ @include form-group-size-variant(null, $mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base);
270
+
271
+ // default floating size/location with a form-group (need margin etc from a default form-group)
272
+ @include form-group-size-variant(unquote(".form-group"), $mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base);
273
+
274
+ // sm floating size/location
275
+ @include form-group-size-variant(unquote(".form-group.form-group-sm"), $mdb-input-font-size-small, $mdb-label-top-margin-small, $mdb-input-padding-small-vertical, $mdb-input-line-height-small, $mdb-label-as-placeholder-shim-small);
276
+
277
+ // lg floating size/location
278
+ @include form-group-size-variant(unquote(".form-group.form-group-lg"), $mdb-input-font-size-large, $mdb-label-top-margin-large, $mdb-input-padding-large-vertical, $mdb-input-line-height-large, $mdb-label-as-placeholder-shim-large);
279
+
280
+
281
+ select.form-control {
282
+
283
+ border: 0;
284
+ box-shadow: none;
285
+ border-radius: 0;
286
+
287
+ .form-group.is-focused & {
288
+ box-shadow: none;
289
+ border-color: $mdb-input-underline-color;
290
+ }
291
+
292
+ &[multiple] {
293
+ &,
294
+ .form-group.is-focused & {
295
+ height: 85px;
296
+ }
297
+ }
298
+ }
299
+
300
+ @mixin input-group-button-variation($vertical-padding){
301
+ .input-group-btn {
302
+ .btn {
303
+ margin: 0 0 $vertical-padding 0;
304
+ }
305
+ }
306
+ }
307
+
308
+ // ----------------
309
+ // input group/addon related styles
310
+
311
+ // default margin - no form-group required
312
+ @include input-group-button-variation($mdb-input-padding-base-vertical);
313
+
314
+ .form-group {
315
+ //.form-control {
316
+ // float: none;
317
+ //}
318
+
319
+ // sm margin
320
+ &.form-group-sm {
321
+ @include input-group-button-variation($mdb-input-padding-small-vertical);
322
+ }
323
+
324
+ // lg margin
325
+ &.form-group-lg {
326
+ @include input-group-button-variation($mdb-input-padding-large-vertical);
327
+ }
328
+ }
329
+
330
+ .input-group { // may be in or outside of form-group
331
+ .input-group-btn {
332
+ padding: 0 12px; // match addon spacing
333
+ }
334
+
335
+ .input-group-addon {
336
+ border: 0;
337
+ background: transparent;
338
+ }
339
+ }
340
+
341
+ // Input files - hide actual input - requires specific markup in the sample.
342
+ .form-group input[type=file] {
343
+ opacity: 0;
344
+ position: absolute;
345
+ top: 0;
346
+ right: 0;
347
+ bottom: 0;
348
+ left: 0;
349
+ width: 100%;
350
+ height: 100%;
351
+ z-index: 100;
352
+ }
@@ -0,0 +1,4 @@
1
+ .label {
2
+ border-radius: 1px;
3
+ @include variations(unquote(""), background-color, $grey);
4
+ }
@@ -0,0 +1,102 @@
1
+ .list-group {
2
+ border-radius: 0;
3
+ .list-group-item {
4
+ background-color: transparent;
5
+ overflow: hidden;
6
+ border: 0;
7
+ border-radius: 0;
8
+ padding: 0 16px;
9
+ &.baseline {
10
+ border-bottom: 1px solid #cecece;
11
+ &:last-child {
12
+ border-bottom: none;
13
+ }
14
+ }
15
+ .row-picture, .row-action-primary {
16
+ //float: left; WARNING: float can't be used with display: inline-block. Certain properties shouldn't be used with certain display property values. (display-property-grouping) Browsers: All
17
+ display: inline-block;
18
+ padding-right: 16px;
19
+ img, i, label {
20
+ display: block;
21
+ width: 56px;
22
+ height: 56px;
23
+ }
24
+ img {
25
+ background: rgba(0,0,0,0.1);
26
+ padding: 1px;
27
+ &.circle {
28
+ border-radius: 100%;
29
+ }
30
+ }
31
+ i {
32
+ background: rgba(0,0,0,0.25);
33
+ border-radius: 100%;
34
+ text-align: center;
35
+ line-height: 56px;
36
+ font-size: 20px;
37
+ color: white;
38
+ }
39
+ label {
40
+ margin-left: 7px;
41
+ margin-right: -7px;
42
+ margin-top: 5px;
43
+ margin-bottom: -5px;
44
+ .checkbox-material {
45
+ left: -10px;
46
+ }
47
+ }
48
+ }
49
+ .row-content {
50
+ display: inline-block;
51
+ width: unquote("calc(100% - 92px)");
52
+ min-height: 66px;
53
+ .action-secondary {
54
+ position: absolute;
55
+ right: 16px;
56
+ top: 16px;
57
+ i {
58
+ font-size: 20px;
59
+ color: rgba(0,0,0,0.25);
60
+ cursor: pointer;
61
+ }
62
+ }
63
+ .action-secondary ~ * {
64
+ max-width: unquote("calc(100% - 30px)");
65
+ }
66
+ .least-content {
67
+ position: absolute;
68
+ right: 16px;
69
+ top: 0;
70
+ color: rgba(0,0,0,0.54);
71
+ font-size: 14px;
72
+ }
73
+ }
74
+ .list-group-item-heading {
75
+ color: rgba(0, 0, 0, 0.77);
76
+ font-size: 20px;
77
+ line-height: 29px;
78
+ }
79
+ }
80
+ .list-group-item.active {
81
+ &:hover, &:focus {
82
+ background: rgba(0,0,0,.15);
83
+ outline: 10px solid rgba(0,0,0,.15);
84
+ }
85
+ .list-group-item-heading, .list-group-item-text {
86
+ color: $mdb-text-color-primary;
87
+ }
88
+
89
+ }
90
+ .list-group-separator {
91
+ clear: both;
92
+ overflow: hidden;
93
+ margin-top: 10px;
94
+ margin-bottom: 10px;
95
+ &:before {
96
+ content: "";
97
+ width: unquote("calc(100% - 90px)");
98
+ border-bottom: 1px solid rgba(0,0,0,0.1);
99
+ float: right;
100
+ }
101
+ }
102
+ }