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,201 @@
1
+ /* ==========================================================================
2
+ $BASE-PICKER
3
+ ========================================================================== */
4
+ /**
5
+ * Note: the root picker element should *NOT* be styled more than what's here.
6
+ */
7
+ .picker {
8
+ font-size: 16px;
9
+ text-align: left;
10
+ line-height: 1.2;
11
+ color: #000000;
12
+ position: absolute;
13
+ z-index: 10000;
14
+ -webkit-user-select: none;
15
+ -moz-user-select: none;
16
+ -ms-user-select: none;
17
+ user-select: none;
18
+ }
19
+ /**
20
+ * The picker input element.
21
+ */
22
+ .picker__input {
23
+ cursor: default;
24
+ }
25
+ /**
26
+ * When the picker is opened, the input element is "activated".
27
+ */
28
+ .picker__input.picker__input--active {
29
+ border-color: #0089ec;
30
+ }
31
+ /**
32
+ * The holder is the only "scrollable" top-level container element.
33
+ */
34
+ .picker__holder {
35
+ width: 100%;
36
+ overflow-y: auto;
37
+ -webkit-overflow-scrolling: touch;
38
+ }
39
+
40
+ /*!
41
+ * Default mobile-first, responsive styling for pickadate.js
42
+ * Demo: http://amsul.github.io/pickadate.js
43
+ */
44
+ /**
45
+ * Note: the root picker element should *NOT* be styled more than what's here.
46
+ */
47
+ /**
48
+ * Make the holder and frame fullscreen.
49
+ */
50
+ .picker__holder,
51
+ .picker__frame {
52
+ bottom: 0;
53
+ left: 0;
54
+ right: 0;
55
+ top: 100%;
56
+ }
57
+ /**
58
+ * The holder should overlay the entire screen.
59
+ */
60
+ .picker__holder {
61
+ position: fixed;
62
+ -webkit-transition: background 0.15s ease-out, top 0s 0.15s;
63
+ -moz-transition: background 0.15s ease-out, top 0s 0.15s;
64
+ transition: background 0.15s ease-out, top 0s 0.15s;
65
+ -webkit-backface-visibility: hidden;
66
+ }
67
+ /**
68
+ * The frame that bounds the box contents of the picker.
69
+ */
70
+ .picker__frame {
71
+ position: absolute;
72
+ margin: 0 auto;
73
+ min-width: 256px;
74
+
75
+ // picker width
76
+ width: 300px;
77
+ max-height: 350px;
78
+
79
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
80
+ filter: alpha(opacity=0);
81
+ -moz-opacity: 0;
82
+ opacity: 0;
83
+ -webkit-transition: all 0.15s ease-out;
84
+ -moz-transition: all 0.15s ease-out;
85
+ transition: all 0.15s ease-out;
86
+ }
87
+ @media (min-height: 28.875em) {
88
+ .picker__frame {
89
+ overflow: visible;
90
+ top: auto;
91
+ bottom: -100%;
92
+ max-height: 80%;
93
+ }
94
+ }
95
+ @media (min-height: 40.125em) {
96
+ .picker__frame {
97
+ margin-bottom: 7.5%;
98
+ }
99
+ }
100
+ /**
101
+ * The wrapper sets the stage to vertically align the box contents.
102
+ */
103
+ .picker__wrap {
104
+ display: table;
105
+ width: 100%;
106
+ height: 100%;
107
+ }
108
+ @media (min-height: 28.875em) {
109
+ .picker__wrap {
110
+ display: block;
111
+ }
112
+ }
113
+ /**
114
+ * The box contains all the picker contents.
115
+ */
116
+ .picker__box {
117
+ background: #ffffff;
118
+ display: table-cell;
119
+ vertical-align: middle;
120
+ }
121
+ //@media (min-height: 26.5em) {
122
+ // .picker__box {
123
+ //// font-size: 1.25em;
124
+ // }
125
+ //}
126
+ @media (min-height: 28.875em) {
127
+ .picker__box {
128
+ display: block;
129
+
130
+ // picker header font-size
131
+ // font-size: 1rem;
132
+
133
+ border: 1px solid #777777;
134
+ border-top-color: #898989;
135
+ border-bottom-width: 0;
136
+ -webkit-border-radius: 5px 5px 0 0;
137
+ -moz-border-radius: 5px 5px 0 0;
138
+ border-radius: 5px 5px 0 0;
139
+ -webkit-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
140
+ -moz-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
141
+ box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
142
+ }
143
+ }
144
+ //@media (min-height: 40.125em) {
145
+ // .picker__box {
146
+ // font-size: 1.1rem;
147
+ // border-bottom-width: 1px;
148
+ // -webkit-border-radius: 5px;
149
+ // -moz-border-radius: 5px;
150
+ // border-radius: 5px;
151
+ // }
152
+ //}
153
+ /**
154
+ * When the picker opens...
155
+ */
156
+ .picker--opened .picker__holder {
157
+ top: 0;
158
+ background: transparent;
159
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
160
+ zoom: 1;
161
+ background: rgba(0, 0, 0, 0.32);
162
+ -webkit-transition: background 0.15s ease-out;
163
+ -moz-transition: background 0.15s ease-out;
164
+ transition: background 0.15s ease-out;
165
+ }
166
+ .picker--opened .picker__frame {
167
+ top: 0;
168
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
169
+ filter: alpha(opacity=100);
170
+ -moz-opacity: 1;
171
+ opacity: 1;
172
+ }
173
+ @media (min-height: 35.875em) {
174
+ .picker--opened .picker__frame {
175
+ top: 10%;
176
+ bottom: auto;
177
+ }
178
+ }
179
+ /**
180
+ * For `large` screens, transform into an inline picker.
181
+ */
182
+
183
+ /* ==========================================================================
184
+ CUSTOM MATERIALIZE STYLES
185
+ ========================================================================== */
186
+
187
+ .picker__input.picker__input--active {
188
+ border-color: color("blue", "lighten-5");
189
+ }
190
+
191
+ .picker__frame {
192
+ margin: 0 auto;
193
+ max-width: 325px;
194
+ }
195
+
196
+ @media (min-height: 38.875em) {
197
+ .picker--opened .picker__frame {
198
+ top: 10%;
199
+ bottom: auto;
200
+ }
201
+ }
@@ -0,0 +1,125 @@
1
+ /* ==========================================================================
2
+ $BASE-TIME-PICKER
3
+ ========================================================================== */
4
+ /**
5
+ * The list of times.
6
+ */
7
+ .picker__list {
8
+ list-style: none;
9
+ padding: 0.75em 0 4.2em;
10
+ margin: 0;
11
+ }
12
+ /**
13
+ * The times on the clock.
14
+ */
15
+ .picker__list-item {
16
+ border-bottom: 1px solid #dddddd;
17
+ border-top: 1px solid #dddddd;
18
+ margin-bottom: -1px;
19
+ position: relative;
20
+ background: #ffffff;
21
+ padding: .75em 1.25em;
22
+ }
23
+ @media (min-height: 46.75em) {
24
+ .picker__list-item {
25
+ padding: .5em 1em;
26
+ }
27
+ }
28
+ /* Hovered time */
29
+ .picker__list-item:hover {
30
+ cursor: pointer;
31
+ color: #000000;
32
+ background: #b1dcfb;
33
+ border-color: #0089ec;
34
+ z-index: 10;
35
+ }
36
+ /* Highlighted and hovered/focused time */
37
+ .picker__list-item--highlighted {
38
+ border-color: #0089ec;
39
+ z-index: 10;
40
+ }
41
+ .picker__list-item--highlighted:hover,
42
+ .picker--focused .picker__list-item--highlighted {
43
+ cursor: pointer;
44
+ color: #000000;
45
+ background: #b1dcfb;
46
+ }
47
+ /* Selected and hovered/focused time */
48
+ .picker__list-item--selected,
49
+ .picker__list-item--selected:hover,
50
+ .picker--focused .picker__list-item--selected {
51
+ background: #0089ec;
52
+ color: #ffffff;
53
+ z-index: 10;
54
+ }
55
+ /* Disabled time */
56
+ .picker__list-item--disabled,
57
+ .picker__list-item--disabled:hover,
58
+ .picker--focused .picker__list-item--disabled {
59
+ background: #f5f5f5;
60
+ border-color: #f5f5f5;
61
+ color: #dddddd;
62
+ cursor: default;
63
+ border-color: #dddddd;
64
+ z-index: auto;
65
+ }
66
+ /**
67
+ * The clear button
68
+ */
69
+ .picker--time .picker__button--clear {
70
+ display: block;
71
+ width: 80%;
72
+ margin: 1em auto 0;
73
+ padding: 1em 1.25em;
74
+ background: none;
75
+ border: 0;
76
+ font-weight: 500;
77
+ font-size: .67em;
78
+ text-align: center;
79
+ text-transform: uppercase;
80
+ color: #666;
81
+ }
82
+ .picker--time .picker__button--clear:hover,
83
+ .picker--time .picker__button--clear:focus {
84
+ color: #000000;
85
+ background: #b1dcfb;
86
+ background: #ee2200;
87
+ border-color: #ee2200;
88
+ cursor: pointer;
89
+ color: #ffffff;
90
+ outline: none;
91
+ }
92
+ .picker--time .picker__button--clear:before {
93
+ top: -0.25em;
94
+ color: #666;
95
+ font-size: 1.25em;
96
+ font-weight: bold;
97
+ }
98
+ .picker--time .picker__button--clear:hover:before,
99
+ .picker--time .picker__button--clear:focus:before {
100
+ color: #ffffff;
101
+ }
102
+
103
+ /* ==========================================================================
104
+ $DEFAULT-TIME-PICKER
105
+ ========================================================================== */
106
+ /**
107
+ * The frame the bounds the time picker.
108
+ */
109
+ .picker--time .picker__frame {
110
+ min-width: 256px;
111
+ max-width: 320px;
112
+ }
113
+ /**
114
+ * The picker box.
115
+ */
116
+ .picker--time .picker__box {
117
+ font-size: 1em;
118
+ background: #f2f2f2;
119
+ padding: 0;
120
+ }
121
+ @media (min-height: 40.125em) {
122
+ .picker--time .picker__box {
123
+ margin-bottom: 5em;
124
+ }
125
+ }
@@ -0,0 +1,220 @@
1
+ /* Checkboxes
2
+ ========================================================================== */
3
+
4
+ /* CUSTOM CSS CHECKBOXES */
5
+ form p {
6
+ margin-bottom: 10px;
7
+ text-align: left;
8
+ }
9
+
10
+ form p:last-child {
11
+ margin-bottom: 0;
12
+ }
13
+
14
+ /* Remove default checkbox */
15
+ [type="checkbox"]:not(:checked),
16
+ [type="checkbox"]:checked {
17
+ position: absolute;
18
+ left: -9999px;
19
+ opacity: 0;
20
+ }
21
+
22
+ // Checkbox Styles
23
+ [type="checkbox"] {
24
+ // Text Label Style
25
+ + label {
26
+ position: relative;
27
+ padding-left: 35px;
28
+ cursor: pointer;
29
+ display: inline-block;
30
+ height: 25px;
31
+ line-height: 25px;
32
+ font-size: 1rem;
33
+
34
+ -webkit-user-select: none; /* webkit (safari, chrome) browsers */
35
+ -moz-user-select: none; /* mozilla browsers */
36
+ -khtml-user-select: none; /* webkit (konqueror) browsers */
37
+ -ms-user-select: none; /* IE10+ */
38
+ }
39
+
40
+ /* checkbox aspect */
41
+ + label:before,
42
+ &:not(.filled-in) + label:after {
43
+ content: '';
44
+ position: absolute;
45
+ top: 0;
46
+ left: 0;
47
+ width: 18px;
48
+ height: 18px;
49
+ z-index: 0;
50
+ border: 2px solid $radio-empty-color;
51
+ border-radius: 1px;
52
+ margin-top: 2px;
53
+ transition: .2s;
54
+ }
55
+
56
+ &:not(.filled-in) + label:after {
57
+ border: 0;
58
+ transform: scale(0);
59
+ }
60
+
61
+ &:not(:checked):disabled + label:before {
62
+ border: none;
63
+ background-color: $input-disabled-color;
64
+ }
65
+
66
+ // Focused styles
67
+ &.tabbed:focus + label:after {
68
+ transform: scale(1);
69
+ border: 0;
70
+ border-radius: 50%;
71
+ box-shadow: 0 0 0 10px rgba(0,0,0,.1);
72
+ background-color: rgba(0,0,0,.1);
73
+ }
74
+ }
75
+
76
+ [type="checkbox"]:checked {
77
+ + label:before {
78
+ top: -4px;
79
+ left: -5px;
80
+ width: 12px;
81
+ height: 22px;
82
+ border-top: 2px solid transparent;
83
+ border-left: 2px solid transparent;
84
+ border-right: $radio-border;
85
+ border-bottom: $radio-border;
86
+ transform: rotate(40deg);
87
+ backface-visibility: hidden;
88
+ transform-origin: 100% 100%;
89
+ }
90
+
91
+ &:disabled + label:before {
92
+ border-right: 2px solid $input-disabled-color;
93
+ border-bottom: 2px solid $input-disabled-color;
94
+ }
95
+ }
96
+
97
+ /* Indeterminate checkbox */
98
+ [type="checkbox"]:indeterminate {
99
+ +label:before {
100
+ top: -11px;
101
+ left: -12px;
102
+ width: 10px;
103
+ height: 22px;
104
+ border-top: none;
105
+ border-left: none;
106
+ border-right: $radio-border;
107
+ border-bottom: none;
108
+ transform: rotate(90deg);
109
+ backface-visibility: hidden;
110
+ transform-origin: 100% 100%;
111
+ }
112
+
113
+ // Disabled indeterminate
114
+ &:disabled + label:before {
115
+ border-right: 2px solid $input-disabled-color;
116
+ background-color: transparent;
117
+ }
118
+ }
119
+
120
+ // Filled in Style
121
+ [type="checkbox"].filled-in {
122
+ // General
123
+ + label:after {
124
+ border-radius: 2px;
125
+ }
126
+
127
+ + label:before,
128
+ + label:after {
129
+ content: '';
130
+ left: 0;
131
+ position: absolute;
132
+ /* .1s delay is for check animation */
133
+ transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
134
+ z-index: 1;
135
+ }
136
+
137
+ // Unchecked style
138
+ &:not(:checked) + label:before {
139
+ width: 0;
140
+ height: 0;
141
+ border: 3px solid transparent;
142
+ left: 6px;
143
+ top: 10px;
144
+
145
+ -webkit-transform: rotateZ(37deg);
146
+ transform: rotateZ(37deg);
147
+ -webkit-transform-origin: 20% 40%;
148
+ transform-origin: 100% 100%;
149
+ }
150
+
151
+ &:not(:checked) + label:after {
152
+ height: 20px;
153
+ width: 20px;
154
+ background-color: transparent;
155
+ border: 2px solid $radio-empty-color;
156
+ top: 0px;
157
+ z-index: 0;
158
+ }
159
+
160
+ // Checked style
161
+ &:checked {
162
+ + label:before {
163
+ top: 0;
164
+ left: 1px;
165
+ width: 8px;
166
+ height: 13px;
167
+ border-top: 2px solid transparent;
168
+ border-left: 2px solid transparent;
169
+ border-right: 2px solid $input-background;
170
+ border-bottom: 2px solid $input-background;
171
+ -webkit-transform: rotateZ(37deg);
172
+ transform: rotateZ(37deg);
173
+
174
+ -webkit-transform-origin: 100% 100%;
175
+ transform-origin: 100% 100%;
176
+ }
177
+
178
+ + label:after {
179
+ top: 0;
180
+ width: 20px;
181
+ height: 20px;
182
+ border: 2px solid $secondary-color;
183
+ background-color: $secondary-color;
184
+ z-index: 0;
185
+ }
186
+ }
187
+
188
+ // Focused styles
189
+ &.tabbed:focus + label:after {
190
+ border-radius: 2px;
191
+ border-color: $radio-empty-color;
192
+ background-color: rgba(0,0,0,.1);
193
+ }
194
+
195
+ &.tabbed:checked:focus + label:after {
196
+ border-radius: 2px;
197
+ background-color: $secondary-color;
198
+ border-color: $secondary-color;
199
+ }
200
+
201
+ // Disabled style
202
+ &:disabled:not(:checked) + label:before {
203
+ background-color: transparent;
204
+ border: 2px solid transparent;
205
+ }
206
+
207
+ &:disabled:not(:checked) + label:after {
208
+ border-color: transparent;
209
+ background-color: $input-disabled-solid-color;
210
+ }
211
+
212
+ &:disabled:checked + label:before {
213
+ background-color: transparent;
214
+ }
215
+
216
+ &:disabled:checked + label:after {
217
+ background-color: $input-disabled-solid-color;
218
+ border-color: $input-disabled-solid-color;
219
+ }
220
+ }
@@ -0,0 +1,38 @@
1
+ /* File Input
2
+ ========================================================================== */
3
+
4
+ .file-field {
5
+ position: relative;
6
+
7
+ .file-path-wrapper {
8
+ overflow: hidden;
9
+ padding-left: 10px;
10
+ }
11
+
12
+ input.file-path { width: 100%; }
13
+
14
+ .btn {
15
+ float: left;
16
+ height: $input-height;
17
+ line-height: $input-height;
18
+ }
19
+
20
+ span {
21
+ cursor: pointer;
22
+ }
23
+
24
+ input[type=file] {
25
+ position: absolute;
26
+ top: 0;
27
+ right: 0;
28
+ left: 0;
29
+ bottom: 0;
30
+ width: 100%;
31
+ margin: 0;
32
+ padding: 0;
33
+ font-size: 20px;
34
+ cursor: pointer;
35
+ opacity: 0;
36
+ filter: alpha(opacity=0);
37
+ }
38
+ }
@@ -0,0 +1,22 @@
1
+ // Remove Focus Boxes
2
+ select:focus {
3
+ outline: $select-focus;
4
+ }
5
+
6
+ button:focus {
7
+ outline: none;
8
+ background-color: $button-background-focus;
9
+ }
10
+
11
+ label {
12
+ font-size: $label-font-size;
13
+ color: $input-border-color;
14
+ }
15
+
16
+ @import 'input-fields';
17
+ @import 'radio-buttons';
18
+ @import 'checkboxes';
19
+ @import 'switches';
20
+ @import 'select';
21
+ @import 'file-input';
22
+ @import 'range';