material-sass 1.4.1 → 4.0.0.alpha5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (189) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +1 -0
  3. data/Rakefile +61 -0
  4. data/app/assets/fonts/{MaterialIcons-Regular.eot → material-icons/MaterialIcons-Regular.eot} +0 -0
  5. data/app/assets/fonts/{MaterialIcons-Regular.ijmap → material-icons/MaterialIcons-Regular.ijmap} +0 -0
  6. data/app/assets/fonts/{MaterialIcons-Regular.svg → material-icons/MaterialIcons-Regular.svg} +0 -0
  7. data/app/assets/fonts/{MaterialIcons-Regular.ttf → material-icons/MaterialIcons-Regular.ttf} +0 -0
  8. data/app/assets/fonts/{MaterialIcons-Regular.woff → material-icons/MaterialIcons-Regular.woff} +0 -0
  9. data/app/assets/fonts/{MaterialIcons-Regular.woff2 → material-icons/MaterialIcons-Regular.woff2} +0 -0
  10. data/app/assets/fonts/{README.md → material-icons/README.md} +0 -0
  11. data/app/assets/fonts/{codepoints → material-icons/codepoints} +0 -0
  12. data/app/assets/fonts/roboto/Roboto-Bold.eot +0 -0
  13. data/app/assets/fonts/roboto/Roboto-Bold.ttf +0 -0
  14. data/app/assets/fonts/roboto/Roboto-Bold.woff +0 -0
  15. data/app/assets/fonts/roboto/Roboto-Bold.woff2 +0 -0
  16. data/app/assets/fonts/roboto/Roboto-Light.eot +0 -0
  17. data/app/assets/fonts/roboto/Roboto-Light.ttf +0 -0
  18. data/app/assets/fonts/roboto/Roboto-Light.woff +0 -0
  19. data/app/assets/fonts/roboto/Roboto-Light.woff2 +0 -0
  20. data/app/assets/fonts/roboto/Roboto-Medium.eot +0 -0
  21. data/app/assets/fonts/roboto/Roboto-Medium.ttf +0 -0
  22. data/app/assets/fonts/roboto/Roboto-Medium.woff +0 -0
  23. data/app/assets/fonts/roboto/Roboto-Medium.woff2 +0 -0
  24. data/app/assets/fonts/roboto/Roboto-Regular.eot +0 -0
  25. data/app/assets/fonts/roboto/Roboto-Regular.ttf +0 -0
  26. data/app/assets/fonts/roboto/Roboto-Regular.woff +0 -0
  27. data/app/assets/fonts/roboto/Roboto-Regular.woff2 +0 -0
  28. data/app/assets/fonts/roboto/Roboto-Thin.eot +0 -0
  29. data/app/assets/fonts/roboto/Roboto-Thin.ttf +0 -0
  30. data/app/assets/fonts/roboto/Roboto-Thin.woff +0 -0
  31. data/app/assets/fonts/roboto/Roboto-Thin.woff2 +0 -0
  32. data/app/assets/javascripts/material.js +739 -798
  33. data/app/assets/javascripts/material/addons-materialise/pickadate.js +139 -0
  34. data/app/assets/javascripts/material/addons-materialise/textarea-autosize.js +9 -0
  35. data/app/assets/javascripts/material/addons-materialise/wave.js +12 -0
  36. data/app/assets/javascripts/material/addons/pickadate.js +7 -0
  37. data/app/assets/javascripts/material/addons/textarea-autosize.js +5 -0
  38. data/app/assets/javascripts/material/{wave.js → addons/wave.js} +0 -10
  39. data/app/assets/javascripts/material/src/floating-label.js +91 -0
  40. data/app/assets/javascripts/material/src/navdrawer.js +352 -0
  41. data/app/assets/javascripts/material/src/tab-switch.js +136 -0
  42. data/app/assets/javascripts/material/src/util.js +138 -0
  43. data/app/assets/stylesheets/material.min.css +2 -2
  44. data/app/assets/stylesheets/material.scss +1 -1
  45. data/app/assets/stylesheets/material/_mixins.scss +21 -0
  46. data/app/assets/stylesheets/material/_utilities.scss +15 -0
  47. data/app/assets/stylesheets/material/_variables.scss +25 -0
  48. data/app/assets/stylesheets/material/base/_base.scss +482 -0
  49. data/app/assets/stylesheets/material/base/_grid.scss +28 -40
  50. data/app/assets/stylesheets/material/base/_typography.scss +208 -0
  51. data/app/assets/stylesheets/material/bootstrap/_alert.scss +55 -0
  52. data/app/assets/stylesheets/material/bootstrap/_animation.scss +26 -0
  53. data/app/assets/stylesheets/material/bootstrap/_breadcrumb.scss +39 -0
  54. data/app/assets/stylesheets/material/bootstrap/_button-group.scss +155 -0
  55. data/app/assets/stylesheets/material/bootstrap/_carousel.scss +234 -0
  56. data/app/assets/stylesheets/material/bootstrap/_close.scss +31 -0
  57. data/app/assets/stylesheets/material/bootstrap/_code.scss +50 -0
  58. data/app/assets/stylesheets/material/bootstrap/_custom-form.scss +69 -0
  59. data/app/assets/stylesheets/material/bootstrap/_form.scss +116 -0
  60. data/app/assets/stylesheets/material/bootstrap/_image.scss +25 -0
  61. data/app/assets/stylesheets/material/bootstrap/_jumbotron.scss +12 -0
  62. data/app/assets/stylesheets/material/bootstrap/_media.scss +69 -0
  63. data/app/assets/stylesheets/material/bootstrap/_nav.scss +118 -0
  64. data/app/assets/stylesheets/material/bootstrap/_pagination.scss +68 -0
  65. data/app/assets/stylesheets/material/bootstrap/_popover.scss +84 -0
  66. data/app/assets/stylesheets/material/bootstrap/_responsive-embed.scss +37 -0
  67. data/app/assets/stylesheets/material/material.scss +62 -0
  68. data/app/assets/stylesheets/material/material/_button-flat.scss +53 -0
  69. data/app/assets/stylesheets/material/material/_button-float.scss +29 -0
  70. data/app/assets/stylesheets/material/material/_button.scss +241 -0
  71. data/app/assets/stylesheets/material/material/_card.scss +286 -0
  72. data/app/assets/stylesheets/material/material/_chip.scss +93 -0
  73. data/app/assets/stylesheets/material/material/_data-table.scss +138 -0
  74. data/app/assets/stylesheets/material/material/_dialog.scss +147 -0
  75. data/app/assets/stylesheets/material/material/_expansion-panel.scss +292 -0
  76. data/app/assets/stylesheets/material/material/_menu.scss +281 -0
  77. data/app/assets/stylesheets/material/material/_navdrawer.scss +289 -0
  78. data/app/assets/stylesheets/material/material/_picker.scss +272 -0
  79. data/app/assets/stylesheets/material/material/_progress-circular.scss +144 -0
  80. data/app/assets/stylesheets/material/material/_progress.scss +174 -0
  81. data/app/assets/stylesheets/material/material/_selection-control.scss +221 -0
  82. data/app/assets/stylesheets/material/material/_stepper.scss +135 -0
  83. data/app/assets/stylesheets/material/material/_tab.scss +196 -0
  84. data/app/assets/stylesheets/material/material/_text-field-floating-label.scss +51 -0
  85. data/app/assets/stylesheets/material/material/_text-field-input-group.scss +76 -0
  86. data/app/assets/stylesheets/material/material/_text-field-textarea.scss +31 -0
  87. data/app/assets/stylesheets/material/material/_text-field.scss +179 -0
  88. data/app/assets/stylesheets/material/material/_toolbar.scss +516 -0
  89. data/app/assets/stylesheets/material/material/_tooltip.scss +86 -0
  90. data/app/assets/stylesheets/material/mixins/_background-variant.scss +14 -0
  91. data/app/assets/stylesheets/material/mixins/_border-radius.scss +34 -0
  92. data/app/assets/stylesheets/material/mixins/_breakpoint.scss +38 -0
  93. data/app/assets/stylesheets/material/mixins/_clearfix.scss +7 -0
  94. data/app/assets/stylesheets/material/mixins/_form.scss +60 -0
  95. data/app/assets/stylesheets/material/mixins/_grid.scss +149 -0
  96. data/app/assets/stylesheets/material/mixins/_hex-to-rgba.scss +3 -0
  97. data/app/assets/stylesheets/material/mixins/_hover.scss +70 -0
  98. data/app/assets/stylesheets/material/mixins/_image.scss +4 -0
  99. data/app/assets/stylesheets/material/mixins/_list.scss +4 -0
  100. data/app/assets/stylesheets/material/mixins/_nav-divider.scss +6 -0
  101. data/app/assets/stylesheets/material/mixins/_pull.scss +7 -0
  102. data/app/assets/stylesheets/material/mixins/_reset-text.scss +35 -0
  103. data/app/assets/stylesheets/material/mixins/_screenreader.scss +23 -0
  104. data/app/assets/stylesheets/material/mixins/_strip-unit.scss +3 -0
  105. data/app/assets/stylesheets/material/mixins/_tab-focus.scss +5 -0
  106. data/app/assets/stylesheets/material/mixins/_text-emphasis.scss +14 -0
  107. data/app/assets/stylesheets/material/mixins/_text-hide.scss +7 -0
  108. data/app/assets/stylesheets/material/mixins/_text-truncate.scss +5 -0
  109. data/app/assets/stylesheets/material/mixins/_transition.scss +55 -0
  110. data/app/assets/stylesheets/material/mixins/_typography.scss +69 -0
  111. data/app/assets/stylesheets/material/utilities/_align.scss +23 -0
  112. data/app/assets/stylesheets/material/utilities/_background.scss +23 -0
  113. data/app/assets/stylesheets/material/utilities/_border.scss +27 -0
  114. data/app/assets/stylesheets/material/utilities/_clearfix.scss +3 -0
  115. data/app/assets/stylesheets/material/utilities/_display.scss +11 -0
  116. data/app/assets/stylesheets/material/utilities/_float.scss +15 -0
  117. data/app/assets/stylesheets/material/utilities/_material-icons.scss +10 -0
  118. data/app/assets/stylesheets/material/utilities/_screenreader.scss +7 -0
  119. data/app/assets/stylesheets/material/utilities/_spacing.scss +65 -0
  120. data/app/assets/stylesheets/material/utilities/_text.scss +95 -0
  121. data/app/assets/stylesheets/material/utilities/_visibility.scss +50 -0
  122. data/app/assets/stylesheets/material/utilities/_waves.scss +48 -0
  123. data/app/assets/stylesheets/material/variables/_animation.scss +22 -0
  124. data/app/assets/stylesheets/material/variables/_colour.scss +389 -0
  125. data/app/assets/stylesheets/material/variables/_elevation-shadow.scss +84 -0
  126. data/app/assets/stylesheets/material/variables/_grid.scss +32 -0
  127. data/app/assets/stylesheets/material/variables/_spacer.scss +73 -0
  128. data/app/assets/stylesheets/material/variables/_typography.scss +72 -0
  129. data/app/assets/stylesheets/material/variables/_variable-bootstrap.scss +129 -0
  130. data/app/assets/stylesheets/material/variables/_variable-material.scss +434 -0
  131. data/lib/material-sass/engine.rb +3 -2
  132. data/lib/material-sass/version.rb +1 -1
  133. metadata +128 -70
  134. data/app/assets/javascripts/material.min.js +0 -2
  135. data/app/assets/javascripts/material/_.js +0 -6
  136. data/app/assets/javascripts/material/bootstrap.js +0 -6
  137. data/app/assets/javascripts/material/form-floating-label.js +0 -49
  138. data/app/assets/javascripts/material/form-textarea.js +0 -13
  139. data/app/assets/javascripts/material/header.js +0 -12
  140. data/app/assets/javascripts/material/menu.js +0 -200
  141. data/app/assets/javascripts/material/modal.js +0 -12
  142. data/app/assets/javascripts/material/picker.js +0 -141
  143. data/app/assets/javascripts/material/snackbar.js +0 -116
  144. data/app/assets/javascripts/material/tab.js +0 -51
  145. data/app/assets/javascripts/material/tile.js +0 -181
  146. data/app/assets/stylesheets/material/addons/_material-icons.scss +0 -9
  147. data/app/assets/stylesheets/material/addons/_waves.scss +0 -44
  148. data/app/assets/stylesheets/material/addons/material-icons/_core.scss +0 -20
  149. data/app/assets/stylesheets/material/addons/material-icons/_larger.scss +0 -23
  150. data/app/assets/stylesheets/material/addons/material-icons/_path.scss +0 -11
  151. data/app/assets/stylesheets/material/addons/material-icons/_variables.scss +0 -3
  152. data/app/assets/stylesheets/material/base.scss +0 -50
  153. data/app/assets/stylesheets/material/base/_reset.scss +0 -421
  154. data/app/assets/stylesheets/material/components/_avatar.scss +0 -59
  155. data/app/assets/stylesheets/material/components/_breadcrumb.scss +0 -26
  156. data/app/assets/stylesheets/material/components/_button-flat.scss +0 -22
  157. data/app/assets/stylesheets/material/components/_button-float.scss +0 -183
  158. data/app/assets/stylesheets/material/components/_button.scss +0 -81
  159. data/app/assets/stylesheets/material/components/_card.scss +0 -175
  160. data/app/assets/stylesheets/material/components/_code.scss +0 -53
  161. data/app/assets/stylesheets/material/components/_dropdown.scss +0 -99
  162. data/app/assets/stylesheets/material/components/_form-checkbox.scss +0 -161
  163. data/app/assets/stylesheets/material/components/_form-floating-label.scss +0 -64
  164. data/app/assets/stylesheets/material/components/_form-switch.scss +0 -96
  165. data/app/assets/stylesheets/material/components/_form-textarea.scss +0 -4
  166. data/app/assets/stylesheets/material/components/_form.scss +0 -217
  167. data/app/assets/stylesheets/material/components/_label.scss +0 -23
  168. data/app/assets/stylesheets/material/components/_modal.scss +0 -164
  169. data/app/assets/stylesheets/material/components/_nav.scss +0 -53
  170. data/app/assets/stylesheets/material/components/_picker.scss +0 -298
  171. data/app/assets/stylesheets/material/components/_progress-circular.scss +0 -169
  172. data/app/assets/stylesheets/material/components/_progress-loadbar.scss +0 -97
  173. data/app/assets/stylesheets/material/components/_progress.scss +0 -132
  174. data/app/assets/stylesheets/material/components/_snackbar.scss +0 -59
  175. data/app/assets/stylesheets/material/components/_stepper.scss +0 -201
  176. data/app/assets/stylesheets/material/components/_tab.scss +0 -84
  177. data/app/assets/stylesheets/material/components/_table.scss +0 -82
  178. data/app/assets/stylesheets/material/components/_tile.scss +0 -156
  179. data/app/assets/stylesheets/material/elements/_content.scss +0 -42
  180. data/app/assets/stylesheets/material/elements/_header.scss +0 -141
  181. data/app/assets/stylesheets/material/elements/_menu.scss +0 -267
  182. data/app/assets/stylesheets/material/mixin/_grid.scss +0 -78
  183. data/app/assets/stylesheets/material/mixin/_responsive.scss +0 -32
  184. data/app/assets/stylesheets/material/mixin/_utilities.scss +0 -69
  185. data/app/assets/stylesheets/material/utilities/_print.scss +0 -95
  186. data/app/assets/stylesheets/material/utilities/_utilities-responsive.scss +0 -97
  187. data/app/assets/stylesheets/material/utilities/_utilities.scss +0 -393
  188. data/app/assets/stylesheets/material/var/_colours.scss +0 -336
  189. data/app/assets/stylesheets/material/var/_variables.scss +0 -78
@@ -0,0 +1,51 @@
1
+ .floating-label {
2
+ position: relative;
3
+ @include floating-label-size($floating-label-height, $floating-label-padding-top, $textfield-font-size, $textfield-height, $textfield-line-height, $textfield-margin-bottom, $textfield-padding-top);
4
+
5
+ > label {
6
+ color: $floating-label-color;
7
+ cursor: text;
8
+ display: block;
9
+ font-weight: normal;
10
+ margin: 0;
11
+ overflow: hidden;
12
+ padding: 0;
13
+ position: absolute;
14
+ left: 0;
15
+ text-overflow: ellipsis;
16
+ transform-origin: 0 0;
17
+ white-space: nowrap;
18
+ @include transition-standard(color, top, transform);
19
+ }
20
+
21
+ &.is-focused > label {
22
+ color: $floating-label-color-focus;
23
+ }
24
+
25
+ > .form-control {
26
+ margin-bottom: 0;
27
+ position: relative;
28
+
29
+ &::placeholder {
30
+ color: transparent;
31
+ opacity: 0;
32
+ }
33
+ }
34
+ }
35
+
36
+ // size
37
+ .floating-label-lg {
38
+ @include floating-label-size($floating-label-height-lg, $floating-label-padding-top-lg, $textfield-font-size-lg, $textfield-height-lg, $textfield-line-height-lg, $textfield-margin-bottom-lg, $textfield-padding-top-lg);
39
+
40
+ > .form-control {
41
+ @extend .form-control-lg;
42
+ }
43
+ }
44
+
45
+ .floating-label-sm {
46
+ @include floating-label-size($floating-label-height-sm, $floating-label-padding-top-sm, $textfield-font-size-sm, $textfield-height-sm, $textfield-line-height-sm, $textfield-margin-bottom-sm, $textfield-padding-top-sm);
47
+
48
+ > .form-control {
49
+ @extend .form-control-sm;
50
+ }
51
+ }
@@ -0,0 +1,76 @@
1
+ .input-group {
2
+ margin-bottom: $textfield-margin-bottom;
3
+ position: relative;
4
+ width: 100%;
5
+
6
+ @if $enable-flex {
7
+ display: flex;
8
+ } @else {
9
+ border-collapse: separate;
10
+ display: table;
11
+ }
12
+
13
+ .form-control {
14
+ margin-bottom: 0;
15
+ position: relative;
16
+
17
+ @if $enable-flex {
18
+ flex-grow: 1;
19
+ } @else {
20
+ display: table-cell;
21
+ width: 100%;
22
+ }
23
+ }
24
+ }
25
+
26
+ .input-group-addon {
27
+ color: inherit;
28
+ font-size: $textfield-font-size;
29
+ line-height: $textfield-line-height;
30
+ margin: 0 $spacer-md-x;
31
+ min-width: ($textfield-height + $textfield-margin-bottom);
32
+ padding-top: $textfield-padding-top;
33
+ text-align: center;
34
+ vertical-align: top;
35
+ white-space: nowrap;
36
+
37
+ @if not $enable-flex {
38
+ display: table-cell;
39
+ width: 1%;
40
+ }
41
+
42
+ &:first-child {
43
+ margin-left: 0;
44
+ }
45
+
46
+ &:last-child {
47
+ margin-right: 0;
48
+ }
49
+ }
50
+
51
+ // size
52
+ .input-group-addon {
53
+ &.form-control-lg,
54
+ .input-group-lg > & {
55
+ font-size: $textfield-font-size-lg;
56
+ line-height: $textfield-line-height-lg;
57
+ min-width: ($textfield-height-lg + $textfield-margin-bottom-lg);
58
+ padding-top: $textfield-padding-top-lg;
59
+ }
60
+
61
+ &.form-control-sm,
62
+ .input-group-sm > & {
63
+ font-size: $textfield-font-size-sm;
64
+ line-height: $textfield-line-height-sm;
65
+ min-width: ($textfield-height-sm + $textfield-margin-bottom-sm);
66
+ padding-top: $textfield-padding-top-sm;
67
+ }
68
+ }
69
+
70
+ .input-group-lg > .form-control {
71
+ @extend .form-control-lg;
72
+ }
73
+
74
+ .input-group-sm > .form-control {
75
+ @extend .form-control-sm;
76
+ }
@@ -0,0 +1,31 @@
1
+ .textarea-autosize {
2
+ height: $textfield-height;
3
+ min-height: $textfield-height;
4
+ resize: none;
5
+
6
+ .floating-label > & {
7
+ height: ($floating-label-height - $floating-label-padding-top);
8
+ min-height: ($floating-label-height - $floating-label-padding-top);
9
+ }
10
+ }
11
+
12
+ // size
13
+ .form-control-lg.textarea-autosize {
14
+ height: $textfield-height-lg;
15
+ min-height: $textfield-height-lg;
16
+
17
+ .floating-label > & {
18
+ height: ($floating-label-height-lg - $floating-label-padding-top-lg);
19
+ min-height: ($floating-label-height-lg - $floating-label-padding-top-lg);
20
+ }
21
+ }
22
+
23
+ .form-control-sm.textarea-autosize {
24
+ height: $textfield-height-sm;
25
+ min-height: $textfield-height-sm;
26
+
27
+ .floating-label > & {
28
+ height: ($floating-label-height-sm - $floating-label-padding-top-sm);
29
+ min-height: ($floating-label-height-sm - $floating-label-padding-top-sm);
30
+ }
31
+ }
@@ -0,0 +1,179 @@
1
+ .custom-select,
2
+ .form-control {
3
+ background-clip: padding-box;
4
+ background-color: transparent;
5
+ background-image: none;
6
+ border: 0;
7
+ border-bottom: $textfield-border-width solid $textfield-border-color;
8
+ border-radius: 0;
9
+ box-shadow: none;
10
+ color: inherit;
11
+ display: block;
12
+ font-weight: $font-weight-regular;
13
+ width: 100%;
14
+ @include form-control-size($textfield-border-width, $textfield-font-size, $textfield-height, $textfield-line-height, $textfield-margin-bottom, $textfield-padding-top);
15
+ @include transition-standard(border-bottom-color);
16
+
17
+ &::-ms-expand {
18
+ background-color: transparent;
19
+ border: 0;
20
+ }
21
+
22
+ &::placeholder {
23
+ color: $textfield-hint-color;
24
+ opacity: 1;
25
+ }
26
+
27
+ // active, focus, hover
28
+ &:focus {
29
+ border-bottom-color: $textfield-border-color-focus;
30
+ border-bottom-width: ($textfield-border-width + 1);
31
+ outline: 0;
32
+ }
33
+
34
+ // disbaled
35
+ &:disabled,
36
+ &[readonly] {
37
+ border-bottom-style: dotted;
38
+ color: $textfield-color-disabled;
39
+ opacity: 1;
40
+ }
41
+
42
+ &:disabled {
43
+ cursor: $cursor-disabled;
44
+ }
45
+
46
+ @include media-breakpoint-up(sm) {
47
+ .form-inline & {
48
+ display: inline-block;
49
+ vertical-align: middle;
50
+ width: auto;
51
+ }
52
+ }
53
+ }
54
+
55
+ .custom-select,
56
+ select.form-control {
57
+ -webkit-appearance: none;
58
+ -moz-appearance: none;
59
+
60
+ @media screen and (-webkit-min-device-pixel-ratio: 0), (min--moz-device-pixel-ratio: 0) {
61
+ background-image: url($caret-bg);
62
+ background-position: 100% ($textfield-padding-top + ($textfield-line-height - $material-icon-size / $font-size-root) / 2);
63
+ background-repeat: no-repeat;
64
+ background-size: $material-icon-size;
65
+ padding-right: ($spacer-xs-x + $material-icon-size / $font-size-root);
66
+
67
+ &[multiple],
68
+ &[size] {
69
+ background-image: none;
70
+ padding-right: 0;
71
+ }
72
+ }
73
+ }
74
+
75
+ // colour
76
+ @each $color in $palettes {
77
+ $i: index($palettes, $color);
78
+
79
+ .form-control-#{$color} {
80
+ &,
81
+ &:focus {
82
+ border-bottom-color: nth($palettes-color, $i);
83
+ }
84
+ }
85
+ }
86
+
87
+ // size
88
+ .custom-select-lg,
89
+ .form-control-lg {
90
+ @include form-control-size($textfield-border-width, $textfield-font-size-lg, $textfield-height-lg, $textfield-line-height-lg, $textfield-margin-bottom-lg, $textfield-padding-top-lg);
91
+ }
92
+
93
+ .custom-select-lg,
94
+ select.form-control-lg {
95
+ @media screen and (-webkit-min-device-pixel-ratio: 0), (min--moz-device-pixel-ratio: 0) {
96
+ background-position: 100% ($textfield-padding-top-lg + ($textfield-line-height-lg - $material-icon-size / $font-size-root) / 2);
97
+ }
98
+ }
99
+
100
+ .custom-select-sm,
101
+ .form-control-sm {
102
+ @include form-control-size($textfield-border-width, $textfield-font-size-sm, $textfield-height-sm, $textfield-line-height-sm, $textfield-margin-bottom-sm, $textfield-padding-top-sm);
103
+ }
104
+
105
+ .custom-select-sm,
106
+ select.form-control-sm {
107
+ @media screen and (-webkit-min-device-pixel-ratio: 0), (min--moz-device-pixel-ratio: 0) {
108
+ background-position: 100% ($textfield-padding-top-sm + ($textfield-line-height-sm - $material-icon-size / $font-size-root) / 2);
109
+ }
110
+ }
111
+
112
+ input[type="color"],
113
+ input[type="date"],
114
+ input[type="datetime-local"],
115
+ input[type="month"],
116
+ input[type="time"],
117
+ input[type="week"] {
118
+ &.form-control {
119
+ height: $textfield-height;
120
+ }
121
+
122
+ &.form-control-lg {
123
+ height: $textfield-height-lg;
124
+ }
125
+
126
+ &.form-control-sm {
127
+ height: $textfield-height-sm;
128
+ }
129
+ }
130
+
131
+ input[type="color"] {
132
+ &.form-control {
133
+ min-width: $textfield-font-size;
134
+ }
135
+
136
+ &.form-control-lg {
137
+ min-width: $textfield-font-size-lg;
138
+ }
139
+
140
+ &.form-control-sm {
141
+ min-width: $textfield-font-size-sm;
142
+ }
143
+ }
144
+
145
+ //
146
+ // form control state
147
+ //
148
+ .has-danger {
149
+ @include form-control-validation($palette-red-500);
150
+ }
151
+
152
+ .has-success {
153
+ @include form-control-validation($palette-green-500);
154
+ }
155
+
156
+ .has-warning {
157
+ @include form-control-validation($palette-orange-500);
158
+ }
159
+
160
+ //
161
+ // form control static
162
+ //
163
+ .form-control-static {
164
+ @include form-control-size(0px, $textfield-font-size, $textfield-height, $textfield-line-height, $textfield-margin-bottom, $textfield-padding-top);
165
+
166
+ @include media-breakpoint-up(sm) {
167
+ .form-inline & {
168
+ display: inline-block;
169
+ }
170
+ }
171
+
172
+ &.form-control-lg {
173
+ @include form-control-size(0px, $textfield-font-size-lg, $textfield-height-lg, $textfield-line-height-lg, $textfield-margin-bottom-lg, $textfield-padding-top-lg);
174
+ }
175
+
176
+ &.form-control-sm {
177
+ @include form-control-size(0px, $textfield-font-size-sm, $textfield-height-sm, $textfield-line-height-sm, $textfield-margin-bottom-sm, $textfield-padding-top-sm);
178
+ }
179
+ }
@@ -0,0 +1,516 @@
1
+ .navbar,
2
+ .toolbar {
3
+ min-height: $toolbar-height;
4
+ padding: $toolbar-padding-y $toolbar-padding-x;
5
+ position: relative;
6
+ @include clearfix;
7
+ }
8
+
9
+ // color
10
+ .navbar-dark,
11
+ .toolbar-dark {
12
+ color: $toolbar-color-dark;
13
+ }
14
+
15
+ .navbar-light,
16
+ .toolbar-light {
17
+ color: $toolbar-color-light;
18
+ }
19
+
20
+ // variation
21
+ .navbar-fixed-bottom,
22
+ .navbar-fixed-top,
23
+ .toolbar-clipped {
24
+ box-shadow: map-get($toolbar-elevation-shadow, shadow);
25
+ position: fixed;
26
+ right: 0;
27
+ left: 0;
28
+ z-index: map-get($toolbar-elevation-shadow, elevation);
29
+ }
30
+
31
+ .navbar-fixed-bottom {
32
+ // position
33
+ bottom: 0;
34
+ }
35
+
36
+ .navbar-fixed-top,
37
+ .toolbar-clipped {
38
+ // position
39
+ top: 0;
40
+ }
41
+
42
+ .navbar-full {
43
+ box-shadow: map-get($toolbar-elevation-shadow, shadow);
44
+ z-index: map-get($toolbar-elevation-shadow, elevation);
45
+ }
46
+
47
+ .navbar-sticky-top {
48
+ box-shadow: map-get($toolbar-elevation-shadow, shadow);
49
+ position: sticky;
50
+ top: 0;
51
+ width: 100%;
52
+ z-index: map-get($toolbar-elevation-shadow, elevation);
53
+ }
54
+
55
+ .toolbar-waterfall {
56
+ position: absolute;
57
+ top: 0;
58
+ right: 0;
59
+ left: 0;
60
+ z-index: map-get($toolbar-elevation-shadow, elevation);
61
+ @include transition-standard(background-color, box-shadow);
62
+
63
+ &.waterfall {
64
+ background-color: $toolbar-waterfall-bg;
65
+ box-shadow: map-get($toolbar-elevation-shadow, shadow);
66
+ position: fixed;
67
+ }
68
+ }
69
+
70
+ //
71
+ // misc
72
+ //
73
+ .navbar-brand,
74
+ .toolbar-brand {
75
+ display: block;
76
+ float: left;
77
+ height: $toolbar-link-height;
78
+ margin-top: 0;
79
+ margin-right: $toolbar-inner-spacer;
80
+ margin-bottom: 0;
81
+ padding-top: (($toolbar-link-height - $line-height-title) / 2);
82
+ padding-bottom: (($toolbar-link-height - $line-height-title) / 2);
83
+ position: relative;
84
+ z-index: 1;
85
+ @include border-radius($border-radius);
86
+ @include typography-title;
87
+
88
+ &::before {
89
+ background-color: currentColor;
90
+ content: "";
91
+ display: block;
92
+ opacity: 0;
93
+ position: absolute;
94
+ top: 0;
95
+ right: ($toolbar-inner-spacer / -2);
96
+ bottom: 0;
97
+ left: ($toolbar-inner-spacer / -2);
98
+ z-index: -1;
99
+ @include border-radius($border-radius);
100
+ @include transition-standard(opacity);
101
+ }
102
+
103
+ // active, focus, hover
104
+ @include active-focus-hover {
105
+ @if ($link-decoration-active != "none") {
106
+ text-decoration: none;
107
+ }
108
+
109
+ &::before {
110
+ opacity: 0.12;
111
+ }
112
+ }
113
+
114
+ &:focus {
115
+ outline: 0;
116
+ }
117
+ }
118
+
119
+ // colour
120
+ .navbar-dark,
121
+ .toolbar-dark {
122
+ .navbar-brand,
123
+ .toolbar-brand {
124
+ @include plain-active-focus-hover {
125
+ color: $toolbar-color-dark;
126
+ }
127
+ }
128
+ }
129
+
130
+ .navbar-light,
131
+ .toolbar-light {
132
+ .navbar-brand,
133
+ .toolbar-brand {
134
+ @include plain-active-focus-hover {
135
+ color: $toolbar-color-light;
136
+ }
137
+ }
138
+ }
139
+
140
+ .navbar-divider,
141
+ .toolbar-divider {
142
+ float: left;
143
+ margin-right: $toolbar-inner-spacer;
144
+ margin-left: $toolbar-inner-spacer;
145
+ overflow: hidden;
146
+ padding-top: (($toolbar-link-height - $font-size-base * $line-height-base) / 2);
147
+ padding-bottom: (($toolbar-link-height - $font-size-base * $line-height-base) / 2);
148
+ width: 1px;
149
+
150
+ &::before {
151
+ content: "\00a0";
152
+ }
153
+ }
154
+
155
+ // colour
156
+ .navbar-dark,
157
+ .toolbar-dark {
158
+ .navbar-divider,
159
+ .toolbar-divider {
160
+ background-color: $white-divider;
161
+ }
162
+ }
163
+
164
+ .navbar-light,
165
+ .toolbar-light {
166
+ .navbar-divider,
167
+ .toolbar-divider {
168
+ background-color: $black-divider;
169
+ }
170
+ }
171
+
172
+ .navbar-text,
173
+ .toolbar-text {
174
+ display: inline-block;
175
+ padding-top: (($toolbar-link-height - $font-size-base * $line-height-base) / 2);
176
+ padding-bottom: (($toolbar-link-height - $font-size-base * $line-height-base) / 2);
177
+ }
178
+
179
+ //
180
+ // nav
181
+ //
182
+ .navbar-nav,
183
+ .toolbar-nav {
184
+ .nav-item {
185
+ float: left;
186
+
187
+ + .nav-item {
188
+ margin-left: 1px;
189
+ }
190
+ }
191
+
192
+ .nav-link {
193
+ display: block;
194
+ font-size: $toolbar-link-font-size;
195
+ line-height: 1;
196
+ padding: $toolbar-link-padding-y $toolbar-link-padding-x;
197
+ @include border-radius($border-radius);
198
+ @include transition-standard(background-color);
199
+
200
+ &::before {
201
+ content: "";
202
+ display: block;
203
+ opacity: 0;
204
+ position: absolute;
205
+ top: 0;
206
+ right: 0;
207
+ bottom: 0;
208
+ left: 0;
209
+ @include border-radius($border-radius);
210
+ @include transition-standard(opacity);
211
+ }
212
+
213
+ // active, focus, hover
214
+ @include active-focus-hover {
215
+ &::before {
216
+ opacity: 1;
217
+ }
218
+ }
219
+
220
+ &:focus {
221
+ outline: 0;
222
+ }
223
+
224
+ // disabled
225
+ &.disabled {
226
+ &::before {
227
+ display: none;
228
+ }
229
+ }
230
+ }
231
+
232
+ .nav-link.active,
233
+ .nav-link.open,
234
+ .active > .nav-link,
235
+ .open > .nav-link {
236
+ &::before {
237
+ opacity: 1;
238
+ }
239
+ }
240
+
241
+ .dropdown.open > .nav-link::before {
242
+ @include border-bottom-radius(0);
243
+ }
244
+
245
+ .dropup.open> .nav-link::before {
246
+ @include border-top-radius(0);
247
+ }
248
+ }
249
+
250
+ // colour
251
+ .navbar-dark,
252
+ .toolbar-dark {
253
+ .navbar-nav,
254
+ .toolbar-nav {
255
+ .nav-link {
256
+ @include plain-active-focus-hover {
257
+ color: $toolbar-color-dark;
258
+ }
259
+
260
+ &::before {
261
+ background-color: $white-divider;
262
+ }
263
+
264
+ // disabled
265
+ &.disabled {
266
+ color: $white-hint;
267
+ }
268
+ }
269
+ }
270
+ }
271
+
272
+ .navbar-light,
273
+ .toolbar-light {
274
+ .navbar-nav,
275
+ .toolbar-nav {
276
+ .nav-link {
277
+ @include plain-active-focus-hover {
278
+ color: $toolbar-color-light;
279
+ }
280
+
281
+ &::before {
282
+ background-color: $black-divider;
283
+ }
284
+
285
+ // disabled
286
+ &.disabled {
287
+ color: $black-hint;
288
+ }
289
+ }
290
+ }
291
+ }
292
+
293
+ //
294
+ // toggleable
295
+ //
296
+ .navbar-toggleable {
297
+ @each $breakpoint in map-keys($grid-breakpoints) {
298
+ $next: breakpoint-next($breakpoint);
299
+
300
+ &-#{$breakpoint} {
301
+ @include clearfix;
302
+
303
+ @include media-breakpoint-down($breakpoint) {
304
+ .navbar-brand,
305
+ .toolbar-brand {
306
+ float: none;
307
+ margin-top: $toolbar-padding-y;
308
+ margin-right: 0;
309
+ padding-right: $toolbar-link-padding-x;
310
+ padding-left: $toolbar-link-padding-x;
311
+
312
+ &::before {
313
+ // position
314
+ right: 0;
315
+ left: 0;
316
+ }
317
+ }
318
+
319
+ .navbar-nav,
320
+ .toolbar-nav {
321
+ margin-top: $toolbar-padding-y;
322
+ margin-bottom: $toolbar-padding-y;
323
+
324
+ .dropdown-menu {
325
+ float: none;
326
+ position: static;
327
+ }
328
+
329
+ .nav-item {
330
+ float: none;
331
+
332
+ + .nav-item {
333
+ margin-top: 1px;
334
+ margin-left: 0;
335
+ }
336
+ }
337
+ }
338
+ }
339
+
340
+ @include media-breakpoint-up($next) {
341
+ display: block;
342
+ }
343
+ }
344
+ }
345
+ }
346
+
347
+ .navbar-toggler,
348
+ .toolbar-toggler {
349
+ background-color: transparent;
350
+ background-position: 50% 50%;
351
+ background-repeat: no-repeat;
352
+ background-size: $material-icon-size;
353
+ border: 0;
354
+ border-radius: 50%;
355
+ display: block;
356
+ height: $toolbar-link-height;
357
+ margin-right: $toolbar-inner-spacer;
358
+ overflow: hidden;
359
+ padding-top: (($toolbar-link-height - $material-icon-size / $font-size-root) / 2);
360
+ padding-bottom: (($toolbar-link-height - $material-icon-size / $font-size-root) / 2);
361
+ position: relative;
362
+ text-align: center;
363
+ vertical-align: middle;
364
+ width: $toolbar-link-height;
365
+ z-index: 1;
366
+
367
+ &::before {
368
+ border-radius: 50%;
369
+ content: "";
370
+ display: block;
371
+ opacity: 0;
372
+ position: absolute;
373
+ top: 0;
374
+ right: 0;
375
+ bottom: 0;
376
+ left: 0;
377
+ z-index: -1;
378
+ @include transition-standard(opacity);
379
+ }
380
+
381
+ // active, focus, hover
382
+ @include active-focus-hover {
383
+ color: inherit;
384
+
385
+ @if ($link-decoration-active != "none") {
386
+ text-decoration: none;
387
+ }
388
+
389
+ &::before {
390
+ opacity: 1;
391
+ }
392
+ }
393
+
394
+ &:focus {
395
+ outline: 0;
396
+ }
397
+
398
+ // disabled
399
+ &.disabled {
400
+ cursor: $cursor-disabled;
401
+
402
+ &::before {
403
+ display: none;
404
+ }
405
+ }
406
+
407
+ // open
408
+ .open > & {
409
+ &::before {
410
+ opacity: 1;
411
+ }
412
+ }
413
+ }
414
+
415
+ // colour
416
+ .navbar-dark,
417
+ .toolbar-dark {
418
+ .navbar-toggler,
419
+ .toolbar-toggler {
420
+ background-image: $toolbar-toggler-bg-dark;
421
+
422
+ &::before {
423
+ background-color: $white-divider;
424
+ }
425
+ }
426
+ }
427
+
428
+ .navbar-light,
429
+ .toolbar-light {
430
+ .navbar-toggler,
431
+ .toolbar-toggler {
432
+ background-image: $toolbar-toggler-bg-light;
433
+
434
+ &::before {
435
+ background-color: $black-divider;
436
+ }
437
+ }
438
+ }
439
+
440
+ //
441
+ // vertical align some elements normally placed in `.navbar` or `.toolbar`
442
+ //
443
+ .navbar,
444
+ .toolbar {
445
+ .btn {
446
+ margin-top: (($btn-height - $toolbar-link-height) / -2);
447
+ margin-bottom: (($btn-height - $toolbar-link-height) / -2);
448
+ }
449
+
450
+ .btn-lg {
451
+ margin-top: (($btn-height-lg - $toolbar-link-height) / -2);
452
+ margin-bottom: (($btn-height-lg - $toolbar-link-height) / -2);
453
+ }
454
+
455
+ .btn-sm {
456
+ margin-top: (($btn-height-sm - $toolbar-link-height) / -2);
457
+ margin-bottom: (($btn-height-sm - $toolbar-link-height) / -2);
458
+ }
459
+
460
+ .form-control {
461
+ margin-top: (($textfield-height - $toolbar-link-height) / -2);
462
+ @include form-control-size($textfield-border-width, $textfield-font-size, $textfield-height, $textfield-line-height, ($textfield-height - $toolbar-link-height) / -2, ($textfield-height - $textfield-line-height) / 2);
463
+ }
464
+
465
+ .form-control-lg {
466
+ margin-top: (($textfield-height-lg - $toolbar-link-height) / -2);
467
+ @include form-control-size($textfield-border-width, $textfield-font-size-lg, $textfield-height-lg, $textfield-line-height-lg, ($textfield-height-lg - $toolbar-link-height) / -2, ($textfield-height-lg - $textfield-line-height-lg) / 2);
468
+ }
469
+
470
+ .form-control-sm {
471
+ margin-top: (($textfield-height-sm - $toolbar-link-height) / -2);
472
+ @include form-control-size($textfield-border-width, $textfield-font-size-sm, $textfield-height-sm, $textfield-line-height-sm, ($textfield-height-sm - $toolbar-link-height) / -2, ($textfield-height-sm - $textfield-line-height-sm) / 2);
473
+ }
474
+
475
+ .input-group {
476
+ margin-bottom: 0;
477
+ }
478
+
479
+ .input-group-addon {
480
+ padding-top: 0;
481
+ vertical-align: middle;
482
+ }
483
+
484
+ .nav-tabs {
485
+ margin-top: (($nav-tab-link-height - $toolbar-link-height) / -2);
486
+ margin-bottom: (($nav-tab-link-height - $toolbar-link-height) / -2);
487
+
488
+ .nav-link {
489
+ height: $toolbar-height;
490
+ }
491
+ }
492
+ }
493
+
494
+ .navbar-dark,
495
+ .toolbar-dark {
496
+ .form-control {
497
+ border-bottom-color: $toolbar-color-dark;
498
+ color: $toolbar-color-dark;
499
+
500
+ &::placeholder {
501
+ color: $white-hint;
502
+ }
503
+ }
504
+ }
505
+
506
+ .navbar-light,
507
+ .toolbar-light {
508
+ .form-control {
509
+ border-bottom-color: $toolbar-color-light;
510
+ color: $toolbar-color-light;
511
+
512
+ &::placeholder {
513
+ color: $black-hint;
514
+ }
515
+ }
516
+ }