material-sass 4.0.0.alpha6 → 4.0.0.beta

Sign up to get free protection for your applications and to get access to all the features.
Files changed (119) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +1 -0
  3. data/README.md +36 -8
  4. data/Rakefile +16 -3
  5. data/app/assets/javascripts/material-sprockets.js +6 -1
  6. data/app/assets/javascripts/material.js +654 -417
  7. data/app/assets/javascripts/material.min.js +1 -0
  8. data/app/assets/javascripts/material/addons/picker.date.js +234 -0
  9. data/app/assets/javascripts/material/addons/picker.js +172 -0
  10. data/app/assets/javascripts/material/addons/textarea-autosize.js +20 -2
  11. data/app/assets/javascripts/material/addons/waves.js +127 -0
  12. data/app/assets/javascripts/material/components/floating-label.js +92 -0
  13. data/app/assets/javascripts/material/components/navdrawer.js +353 -0
  14. data/app/assets/javascripts/material/components/selection-control-focus.js +47 -0
  15. data/app/assets/javascripts/material/components/tab-switch.js +148 -0
  16. data/app/assets/javascripts/material/components/util.js +133 -0
  17. data/app/assets/javascripts/material/initializers/picker.js +171 -0
  18. data/app/assets/javascripts/material/initializers/textarea-autosize.js +10 -0
  19. data/app/assets/javascripts/material/initializers/waves.js +13 -0
  20. data/app/assets/stylesheets/material/_colours.scss +324 -0
  21. data/app/assets/stylesheets/material/_functions.scss +65 -0
  22. data/app/assets/stylesheets/material/_mixins.scss +23 -23
  23. data/app/assets/stylesheets/material/_print.scss +102 -0
  24. data/app/assets/stylesheets/material/_utilities.scss +21 -17
  25. data/app/assets/stylesheets/material/_variables.scss +13 -42
  26. data/app/assets/stylesheets/material/base/_base.scss +420 -5
  27. data/app/assets/stylesheets/material/base/_grid.scss +34 -33
  28. data/app/assets/stylesheets/material/base/_typography.scss +165 -174
  29. data/app/assets/stylesheets/material/bootstrap/_alert.scss +32 -39
  30. data/app/assets/stylesheets/material/bootstrap/_badge.scss +34 -0
  31. data/app/assets/stylesheets/material/bootstrap/_breadcrumb.scss +18 -18
  32. data/app/assets/stylesheets/material/bootstrap/_carousel.scss +127 -142
  33. data/app/assets/stylesheets/material/bootstrap/_close.scss +18 -19
  34. data/app/assets/stylesheets/material/bootstrap/_code.scss +10 -7
  35. data/app/assets/stylesheets/material/bootstrap/_custom-form.scss +50 -56
  36. data/app/assets/stylesheets/material/bootstrap/_form.scss +159 -129
  37. data/app/assets/stylesheets/material/bootstrap/_image.scss +19 -16
  38. data/app/assets/stylesheets/material/bootstrap/_jumbotron.scss +10 -7
  39. data/app/assets/stylesheets/material/bootstrap/_nav.scss +71 -69
  40. data/app/assets/stylesheets/material/bootstrap/_pagination.scss +34 -26
  41. data/app/assets/stylesheets/material/bootstrap/_popover.scss +26 -59
  42. data/app/assets/stylesheets/material/bootstrap/_responsive-embed.scss +4 -4
  43. data/app/assets/stylesheets/material/bootstrap/_transition.scss +10 -8
  44. data/app/assets/stylesheets/material/material.scss +75 -62
  45. data/app/assets/stylesheets/material/material/_button-flat.scss +26 -39
  46. data/app/assets/stylesheets/material/material/_button-float.scss +10 -14
  47. data/app/assets/stylesheets/material/material/_button-group.scss +268 -0
  48. data/app/assets/stylesheets/material/material/_button.scss +133 -189
  49. data/app/assets/stylesheets/material/material/_card.scss +300 -248
  50. data/app/assets/stylesheets/material/material/_chip.scss +65 -64
  51. data/app/assets/stylesheets/material/material/_data-table.scss +135 -45
  52. data/app/assets/stylesheets/material/material/_dialog.scss +141 -110
  53. data/app/assets/stylesheets/material/material/_expansion-panel.scss +86 -119
  54. data/app/assets/stylesheets/material/material/_menu.scss +308 -228
  55. data/app/assets/stylesheets/material/material/_navdrawer.scss +239 -234
  56. data/app/assets/stylesheets/material/material/_picker.scss +157 -155
  57. data/app/assets/stylesheets/material/material/_progress-circular.scss +80 -80
  58. data/app/assets/stylesheets/material/material/_progress.scss +180 -115
  59. data/app/assets/stylesheets/material/material/_selection-control.scss +132 -139
  60. data/app/assets/stylesheets/material/material/_stepper.scss +94 -93
  61. data/app/assets/stylesheets/material/material/_tab.scss +74 -93
  62. data/app/assets/stylesheets/material/material/_text-field-floating-label.scss +29 -20
  63. data/app/assets/stylesheets/material/material/_text-field-input-group.scss +94 -24
  64. data/app/assets/stylesheets/material/material/_text-field-textarea.scss +13 -26
  65. data/app/assets/stylesheets/material/material/_text-field.scss +127 -118
  66. data/app/assets/stylesheets/material/material/_toolbar.scss +308 -313
  67. data/app/assets/stylesheets/material/material/_tooltip.scss +23 -62
  68. data/app/assets/stylesheets/material/mixins/_background-variant.scss +6 -6
  69. data/app/assets/stylesheets/material/mixins/_border-radius.scss +17 -17
  70. data/app/assets/stylesheets/material/mixins/_breakpoint.scss +32 -2
  71. data/app/assets/stylesheets/material/mixins/_clearfix.scss +1 -1
  72. data/app/assets/stylesheets/material/mixins/_form.scss +62 -25
  73. data/app/assets/stylesheets/material/mixins/_grid-framework.scss +8 -16
  74. data/app/assets/stylesheets/material/mixins/_grid.scss +40 -64
  75. data/app/assets/stylesheets/material/mixins/_material-icons.scss +36 -0
  76. data/app/assets/stylesheets/material/mixins/_nav-divider.scss +1 -1
  77. data/app/assets/stylesheets/material/mixins/_reset-text.scss +2 -21
  78. data/app/assets/stylesheets/material/mixins/_screenreader.scss +14 -12
  79. data/app/assets/stylesheets/material/mixins/_text-alignment.scss +23 -0
  80. data/app/assets/stylesheets/material/mixins/_text-emphasis.scss +6 -6
  81. data/app/assets/stylesheets/material/mixins/_transition.scss +42 -10
  82. data/app/assets/stylesheets/material/utilities/_background.scss +18 -18
  83. data/app/assets/stylesheets/material/utilities/_border.scss +88 -41
  84. data/app/assets/stylesheets/material/utilities/_display.scss +63 -30
  85. data/app/assets/stylesheets/material/utilities/_flex.scss +139 -134
  86. data/app/assets/stylesheets/material/utilities/_material-icons.scss +3 -5
  87. data/app/assets/stylesheets/material/utilities/_position.scss +19 -22
  88. data/app/assets/stylesheets/material/utilities/_sizing.scss +11 -12
  89. data/app/assets/stylesheets/material/utilities/_spacing.scss +51 -56
  90. data/app/assets/stylesheets/material/utilities/_text.scss +80 -75
  91. data/app/assets/stylesheets/material/utilities/_visibility.scss +5 -46
  92. data/app/assets/stylesheets/material/utilities/_waves.scss +11 -18
  93. data/app/assets/stylesheets/material/variables/_elevation-shadow.scss +89 -82
  94. data/app/assets/stylesheets/material/variables/_grid.scss +29 -26
  95. data/app/assets/stylesheets/material/variables/_palette.scss +45 -0
  96. data/app/assets/stylesheets/material/variables/_spacer.scss +34 -88
  97. data/app/assets/stylesheets/material/variables/_transition.scss +29 -0
  98. data/app/assets/stylesheets/material/variables/_typography.scss +88 -74
  99. data/app/assets/stylesheets/material/variables/_variable-bootstrap.scss +196 -133
  100. data/app/assets/stylesheets/material/variables/_variable-material.scss +481 -429
  101. data/lib/material-sass/version.rb +1 -1
  102. data/material-sass.gemspec +3 -3
  103. metadata +26 -21
  104. data/app/assets/javascripts/material/addons-materialise/pickadate.js +0 -139
  105. data/app/assets/javascripts/material/addons-materialise/textarea-autosize.js +0 -11
  106. data/app/assets/javascripts/material/addons-materialise/wave.js +0 -15
  107. data/app/assets/javascripts/material/addons/pickadate.js +0 -7
  108. data/app/assets/javascripts/material/addons/wave.js +0 -5
  109. data/app/assets/javascripts/material/src/floating-label.js +0 -91
  110. data/app/assets/javascripts/material/src/navdrawer.js +0 -352
  111. data/app/assets/javascripts/material/src/tab-switch.js +0 -133
  112. data/app/assets/javascripts/material/src/util.js +0 -138
  113. data/app/assets/stylesheets/material/base/_normalize.scss +0 -253
  114. data/app/assets/stylesheets/material/base/_reboot.scss +0 -239
  115. data/app/assets/stylesheets/material/bootstrap/_button-group.scss +0 -134
  116. data/app/assets/stylesheets/material/mixins/_tab-focus.scss +0 -5
  117. data/app/assets/stylesheets/material/mixins/_transform.scss +0 -9
  118. data/app/assets/stylesheets/material/variables/_animation.scss +0 -22
  119. data/app/assets/stylesheets/material/variables/_colour.scss +0 -389
@@ -1,429 +1,481 @@
1
- //
2
- // appbar / toolbar (navbar)
3
- // based on https://material.google.com/components/toolbars.html#toolbars-usage
4
- //
5
- $toolbar-color-dark: $black-primary !default;
6
- $toolbar-color-light: $white-primary !default;
7
- $toolbar-element-bg-dark: $black-divider !default;
8
- $toolbar-element-bg-light: $white-divider !default;
9
- $toolbar-elevation-shadow: $elevation-shadow-4dp !default;
10
- $toolbar-height: 3.5rem !default;
11
- $toolbar-link-font-size: 1rem !default;
12
- $toolbar-link-height: 2.25rem !default;
13
- $toolbar-link-opacity: 0.7 !default;
14
- $toolbar-link-opacity-active: 1 !default;
15
- $toolbar-link-padding-x: $spacer-md-x !default;
16
- $toolbar-link-padding-y: (($toolbar-link-height - $toolbar-link-font-size) / 2) !default;
17
- $toolbar-padding-x: $spacer-md-x !default;
18
- $toolbar-padding-y: (($toolbar-height - $toolbar-link-height) / 2) !default;
19
- $toolbar-toggler-bg-dark: url("data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' fill-opacity='0.87' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E") !default;
20
- $toolbar-toggler-bg-light: url("data:image/svg+xml;charset=utf8,%3Csvg fill='#ffffff' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E") !default;
21
- $toolbar-waterfall-bg: $brand-color !default;
22
-
23
- //
24
- // button
25
- // based on https://material.google.com/components/buttons.html#buttons-style
26
- // n.b. material design guideline only specifies specs for default button (.btn) and dense button (.btn-sm)
27
- //
28
- $btn-bg: transparent !default;
29
- $btn-bg-active: rgba(153, 153, 153, 0.40) !default;
30
- $btn-bg-disabled: $black-divider !default;
31
- $btn-block-spacer: $spacer-xs-y !default;
32
- $btn-color: $black-primary !default;
33
- $btn-color-disabled: rgba(0, 0, 0, 0.26) !default;
34
- $btn-elevation-shadow: $elevation-shadow-2dp !default;
35
- $btn-elevation-shadow-active: $elevation-shadow-8dp !default;
36
- $btn-focus-overlay: $black-divider !default;
37
- $btn-font-weight: $font-weight-medium !default;
38
- $btn-min-width: 5.5rem !default;
39
-
40
- // inverse
41
- $btn-bg-inverse-disabled: $white-divider !default;
42
- $btn-bg-inverse-active: rgba(204, 204, 204, 0.25) !default;
43
- $btn-color-inverse: $white-primary !default;
44
- $btn-color-inverse-disabled: rgba(255, 255, 255, 0.30) !default;
45
-
46
- // size
47
- $btn-font-size: 0.875rem !default;
48
- $btn-font-size-lg: 0.9375rem !default;
49
- $btn-font-size-sm: 0.8125rem !default;
50
- $btn-height: 2.25rem !default;
51
- $btn-height-lg: 2.5rem !default;
52
- $btn-height-sm: 2rem !default;
53
- $btn-padding-x: $spacer-md-x !default;
54
- $btn-padding-x-lg: $btn-padding-x !default;
55
- $btn-padding-x-sm: $btn-padding-x !default;
56
- $btn-padding-y: (($btn-height - $btn-font-size) / 2) !default;
57
- $btn-padding-y-lg: (($btn-height-lg - $btn-font-size-lg) / 2) !default;
58
- $btn-padding-y-sm: (($btn-height-sm - $btn-font-size-sm) / 2) !default;
59
-
60
- //
61
- // button: flat button
62
- // based on https://material.google.com/components/buttons.html#buttons-flat-buttons
63
- //
64
- $btn-flat-bg-opacity: 0.4 !default;
65
- $btn-flat-focus-overlay-inverse: rgba(204, 204, 204, 0.12) !default;
66
- $btn-flat-focus-overlay-opacity: 0.12 !default;
67
-
68
- //
69
- // button: floating action button
70
- // based on https://material.google.com/components/buttons-floating-action-button.html#buttons-floating-action-button-floating-action-button
71
- //
72
- $btn-float-elevation-shadow: $elevation-shadow-6dp !default;
73
- $btn-float-elevation-shadow-active: $elevation-shadow-12dp !default;
74
- $btn-float-font-size: ($material-icon-size / $font-size-root * 1rem) !default;
75
-
76
- // size
77
- $btn-float-size: 3.5rem !default;
78
- $btn-float-size-sm: 2.5rem !default;
79
-
80
- //
81
- // card
82
- // based on https://material.google.com/components/cards.html#cards-usage
83
- //
84
- $card-action-spacer-x: $spacer-sm-x !default;
85
- $card-action-spacer-y: $spacer-sm-y !default;
86
- $card-bg: $white-primary !default;
87
- $card-bg-inverse: $palette-grey-800 !default;
88
- $card-border-color: $border-color !default;
89
- $card-border-width: $border-width !default;
90
- $card-color: $black-primary !default;
91
- $card-color-inverse: $white-primary !default;
92
- $card-elevation-shadow: $elevation-shadow-2dp !default;
93
- $card-elevation-shadow-active: $elevation-shadow-8dp !default;
94
- $card-margin-bottom: $spacer-md-y !default;
95
- $card-spacer-inner-x: $spacer-md-x !default;
96
- $card-spacer-inner-y: $spacer-md-y !default;
97
- $card-spacer-outer-x: $spacer-sm-x !default;
98
- $card-spacer-outer-y: $spacer-sm-y !default;
99
-
100
- //
101
- // chip (label)
102
- // based on https://material.google.com/components/chips.html#chips-specs
103
- //
104
- $chip-active-overlay: $black-divider !default;
105
- $chip-bg: $black-divider !default;
106
- $chip-bg-inverse: $white-divider !default;
107
- $chip-color: $black-primary !default;
108
- $chip-color-inverse: $white-primary !default;
109
- $chip-elevation-shadow-active: $elevation-shadow-2dp !default;
110
- $chip-font-size: 0.8125rem !default;
111
- $chip-font-weight: $font-weight-regular !default;
112
- $chip-height: 2rem !default;
113
- $chip-padding-x: 0.75rem !default;
114
- $chip-padding-y: (($chip-height - $chip-font-size) / 2) !default;
115
-
116
- //
117
- // colour theme
118
- // based on https://material.google.com/style/color.html#color-themes
119
- //
120
- $dark-theme-1: $black !default;
121
- $dark-theme-2: $palette-grey-900 !default;
122
- $dark-theme-3: #303030 !default;
123
- $dark-theme-4: $palette-grey-800 !default;
124
-
125
- $light-theme-1: $palette-grey-300 !default;
126
- $light-theme-2: $palette-grey-100 !default;
127
- $light-theme-3: $palette-grey-050 !default;
128
- $light-theme-4: $white !default;
129
-
130
- //
131
- // data table (table)
132
- // based on https://material.google.com/components/data-tables.html#data-tables-structure
133
- //
134
- $table-bg: $white-primary !default;
135
- $table-bg-accent: $palette-grey-100 !default;
136
- $table-bg-hover: $palette-grey-200 !default;
137
- $table-border-color: $border-color-solid !default;
138
- $table-border-width: $border-width !default;
139
- $table-cell-padding-x: 1.75rem !default;
140
- $table-cell-padding-x-alt: $spacer-lg-x !default;
141
- $table-elevation-shadow: $elevation-shadow-2dp !default;
142
- $table-margin-bottom: $spacer-md-y !default;
143
-
144
- $table-tbody-cell-height: 3rem !default;
145
- $table-tbody-color: $black-primary !default;
146
- $table-tbody-font-size: 0.8125rem !default;
147
- $table-tbody-font-weight: $font-weight-regular !default;
148
- $table-tbody-padding-y: (($table-tbody-cell-height - $table-tbody-font-size * $line-height-base) / 2) !default;
149
-
150
- $table-tfoot-cell-height: 3.5rem !default;
151
- $table-tfoot-color: $black-secondary !default;
152
- $table-tfoot-font-size: 0.75rem !default;
153
- $table-tfoot-font-weight: $font-weight-regular !default;
154
- $table-tfoot-padding-y: (($table-tfoot-cell-height - $table-tfoot-font-size * $line-height-base) / 2) !default;
155
-
156
- $table-thead-cell-height: $table-tfoot-cell-height !default;
157
- $table-thead-color: $table-tfoot-color !default;
158
- $table-thead-font-size: $table-tfoot-font-size !default;
159
- $table-thead-font-weight: $font-weight-medium !default;
160
- $table-thead-padding-y: (($table-thead-cell-height - $table-thead-font-size * $line-height-base) / 2) !default;
161
-
162
- //
163
- // dialog (modal)
164
- // based on https://material.google.com/components/dialogs.html#dialogs-specs
165
- //
166
- $dialog-backdrop-bg: $black-hint !default;
167
- $dialog-content-bg: $white-primary !default;
168
- $dialog-elevation-shadow: $elevation-shadow-24dp !default;
169
- $dialog-footer-btn-min-width: 4rem !default;
170
- $dialog-footer-spacer-x: $spacer-sm-x !default;
171
- $dialog-footer-spacer-y: $spacer-sm-y !default;
172
- $dialog-inner-padding: 1.25rem $spacer-lg-x !default;
173
- $dialog-margin-x: $spacer-lg-x !default;
174
- $dialog-margin-y: $spacer-lg-y !default;
175
- $dialog-width: 35rem !default;
176
- $dialog-width-lg: 52.5rem !default;
177
- $dialog-width-sm: 17.5rem !default;
178
-
179
- //
180
- // expansion panel (list group)
181
- // based on https://material.google.com/components/expansion-panels.html#expansion-panels-specs
182
- //
183
- $expansion-panel-bg: $white-primary !default;
184
- $expansion-panel-bg-active: $palette-grey-200 !default;
185
- $expansion-panel-bg-disabled: $expansion-panel-bg !default;
186
- $expansion-panel-border-color: $border-color !default;
187
- $expansion-panel-border-width: $border-width !default;
188
- $expansion-panel-color: $black-primary !default;
189
- $expansion-panel-color-active: $expansion-panel-color !default;
190
- $expansion-panel-color-disabled: $black-hint !default;
191
- $expansion-panel-elevation-shadow: $elevation-shadow-2dp !default;
192
- $expansion-panel-font-size: 0.9375rem !default;
193
- $expansion-panel-font-size-secondary: 0.75rem !default;
194
- $expansion-panel-height: 3rem !default;
195
- $expansion-panel-inner-spacer-x: $spacer-lg-x !default;
196
- $expansion-panel-inner-spacer-y: ($expansion-panel-inner-spacer-x / 2) !default;
197
-
198
- //
199
- // menu (dropdown)
200
- // based on https://material.google.com/components/menus.html#menus-specs
201
- //
202
- $menu-bg: $white-primary !default;
203
- $menu-divider-bg: $black-divider !default;
204
- $menu-font-size: 1rem !default;
205
- $menu-font-size-cascading: 0.9375rem !default;
206
- $menu-elevation-shadow: $elevation-shadow-8dp !default;
207
- $menu-line-height: 1.5rem !default;
208
- $menu-line-height-cascading: $menu-line-height !default;
209
- $menu-link-bg: transparent !default;
210
- $menu-link-bg-active: $offwhite !default;
211
- $menu-link-color: $black-primary !default;
212
- $menu-link-color-disabled: $black-hint !default;
213
- $menu-link-height: 3rem !default;
214
- $menu-link-height-cascading: 2rem !default;
215
- $menu-link-padding: (($menu-link-height - $menu-line-height) / 2) $spacer-md-x !default;
216
- $menu-link-padding-cascading: (($menu-link-height-cascading - $menu-line-height-cascading) / 2) $spacer-lg-x !default;
217
- $menu-min-width: 7rem !default;
218
- $menu-min-width-cascading: 20rem !default;
219
- $menu-padding-y: $spacer-sm-y !default;
220
- $menu-padding-y-cascading: $spacer-md-y !default;
221
-
222
- //
223
- // navigation drawer
224
- // based on https://material.google.com/patterns/navigation-drawer.html#navigation-drawer-specs
225
- //
226
- $navdrawer-backdrop-bg: $dialog-backdrop-bg !default;
227
- $navdrawer-border-color: $border-color !default;
228
- $navdrawer-border-width: $border-width !default;
229
- $navdrawer-content-bg: $dialog-content-bg !default;
230
- $navdrawer-divider-bg: $black-divider !default;
231
- $navdrawer-elevation-shadow: $elevation-shadow-16dp !default;
232
- $navdrawer-gutter-width: $toolbar-height !default;
233
- $navdrawer-header-bg: $offwhite !default;
234
- $navdrawer-header-border-color: $border-color !default;
235
- $navdrawer-header-border-width: $border-width !default;
236
- $navdrawer-inner-spacer-x: $spacer-md-x !default;
237
- $navdrawer-inner-spacer-y: $spacer-sm-y !default;
238
- $navdrawer-nav-icon-color: $black-secondary !default;
239
- $navdrawer-nav-icon-width: $toolbar-height !default;
240
- $navdrawer-nav-link-bg-active: $offwhite !default;
241
- $navdrawer-nav-link-color: $black-primary !default;
242
- $navdrawer-nav-link-color-active: $brand-color !default;
243
- $navdrawer-nav-link-color-disabled: $black-hint !default;
244
- $navdrawer-nav-link-font-size: 0.875rem !default;
245
- $navdrawer-nav-link-font-weight: $font-weight-medium !default;
246
- $navdrawer-nav-link-height: 3rem !default;
247
- $navdrawer-subheader-color: $black-hint !default;
248
- $navdrawer-subheader-font-size: 0.875rem !default;
249
- $navdrawer-subheader-font-weight: $font-weight-medium !default;
250
- $navdrawer-subheader-height: 3rem !default;
251
- $navdrawer-width-mobile: 17.5rem !default;
252
- $navdrawer-width-tablet: 20rem !default;
253
-
254
- //
255
- // picker
256
- // based on https://material.google.com/components/pickers.html#pickers-date-pickers
257
- //
258
- $picker-cell-size: 2.5rem !default;
259
- $picker-content-bg: $dialog-content-bg !default;
260
- $picker-day-bg-selected: $brand-color !default;
261
- $picker-day-color-disabled: $black-hint !default;
262
- $picker-day-color-selected: $brand-text-color !default;
263
- $picker-day-color-today: $brand-color !default;
264
- $picker-elevation-shadow: $dialog-elevation-shadow !default;
265
- $picker-header-bg: $brand-color !default;
266
- $picker-header-color: $brand-text-color !default;
267
- $picker-header-padding: $spacer-md-y $spacer-lg-x !default;
268
- $picker-holder-bg: $dialog-backdrop-bg !default;
269
- $picker-inner-spacer-x: $spacer-sm-x !default;
270
- $picker-inner-spacer-y: $spacer-sm-y !default;
271
- $picker-margin-x: $dialog-margin-x !default;
272
- $picker-margin-y: $dialog-margin-y !default;
273
- $picker-nav-next-icon: "keyboard_arrow_right" !default;
274
- $picker-nav-prev-icon: "keyboard_arrow_left" !default;
275
- $picker-weekday-color: $black-hint !default;
276
-
277
- //
278
- // progress
279
- // based on https://material.google.com/components/progress-activity.html#progress-activity-types-of-indicators
280
- //
281
- $progress-bar-bg: $palette-indigo-500 !default;
282
- $progress-bar-mask: $white-secondary !default;
283
- $progress-height: 0.25rem !default;
284
-
285
- // circular
286
- $progress-circular-bg: $progress-bar-bg !default;
287
- $progress-circular-height: 2.5rem !default;
288
- $progress-circular-spinner-width: 0.25rem !default;
289
-
290
- //
291
- // selection control
292
- // based on https://material.google.com/components/selection-controls.html
293
- //
294
- $selection-control-checkbox-bg: url("data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' fill-opacity='0.54' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E") !default;
295
- $selection-control-checkbox-bg-checked: url("data:image/svg+xml;charset=utf8,%3Csvg fill='#{$brand-color-accent}' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") !default;
296
- $selection-control-checkbox-bg-disabled: url("data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' fill-opacity='0.26' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E") !default;
297
- $selection-control-checkbox-bg-disabled-checked: url("data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' fill-opacity='0.26' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") !default;
298
- $selection-control-checkbox-bg-indeterminate: url("data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' fill-opacity='0.54' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M0 0h24v24H0z' id='a'/%3E%3C/defs%3E%3CclipPath id='b'%3E%3Cuse overflow='visible' xlink:href='#a'/%3E%3C/clipPath%3E%3Cpath clip-path='url(#b)' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z'/%3E%3C/svg%3E") !default;
299
- $selection-control-color: $black-secondary !default;
300
- $selection-control-color-active: $brand-color-accent !default;
301
- $selection-control-color-disabled: rgba(0, 0, 0, 0.26) !default;
302
- $selection-control-indicator-size: $material-icon-size !default;
303
- $selection-control-radial-bg: $black-divider !default;
304
- $selection-control-radio-bg: url("data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' fill-opacity='0.54' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E") !default;
305
- $selection-control-radio-bg-checked: url("data:image/svg+xml;charset=utf8,%3Csvg fill='#{$brand-color-accent}' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E") !default;
306
- $selection-control-radio-bg-disabled: url("data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' fill-opacity='0.26' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E") !default;
307
- $selection-control-radio-bg-disabled-checked: url("data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' fill-opacity='0.26' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E") !default;
308
- $selection-control-spacer-x: ($material-icon-size / $font-size-root / 2 * 1rem) !default;
309
- $selection-control-spacer-y: ($material-icon-size / $font-size-root / 2 * 1rem) !default;
310
- $selection-control-thumb-bg: $offwhite-light !default;
311
- $selection-control-thumb-bg-disabled: #bdbdbd !default;
312
- $selection-control-thumb-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6) !default;
313
- $selection-control-track-bg: $black-hint !default;
314
- $selection-control-track-bg-disabled: $black-divider !default;
315
- $selection-control-track-height: $font-size-root !default;
316
- $selection-control-track-width: ($selection-control-indicator-size * 2) !default;
317
-
318
- //
319
- // stepper
320
- // based on https://material.google.com/components/steppers.html#steppers-specs
321
- //
322
- $stepper-bg: $white-primary !default;
323
- $stepper-border-color: $palette-grey-400 !default;
324
- $stepper-border-width: $border-width !default;
325
- $stepper-icon-bg: $black-hint !default;
326
- $stepper-icon-bg-active: $brand-color !default;
327
- $stepper-icon-color: $white-primary !default;
328
- $stepper-icon-color-active: $brand-text-color !default;
329
- $stepper-icon-font-size: 0.75rem !default;
330
- $stepper-icon-font-weight: $font-weight-regular !default;
331
- $stepper-icon-height: ($material-icon-size / $font-size-root * 1rem) !default;
332
- $stepper-inner-spacer: $spacer-sm !default;
333
- $stepper-padding-x: $spacer-lg-x !default;
334
- $stepper-padding-y: $spacer-lg-y !default;
335
- $stepper-text-color: $black-hint !default;
336
- $stepper-text-color-active: $black-primary !default;
337
- $stepper-text-font-size: 0.875rem !default;
338
- $stepper-text-font-weight: $font-weight-regular !default;
339
-
340
- //
341
- // tab (nav-tab)
342
- // based on https://material.google.com/components/tabs.html#tabs-specs
343
- //
344
- $nav-tab-border-color: $black-divider !default;
345
- $nav-tab-indicator-bg: $brand-color-accent !default;
346
- $nav-tab-indicator-height: 2px !default;
347
- $nav-tab-link-font-size: 0.875rem !default;
348
- $nav-tab-link-font-weight: $font-weight-medium !default;
349
- $nav-tab-link-height: 3rem !default;
350
- $nav-tab-link-opacity: 0.7 !default;
351
- $nav-tab-link-opacity-visible: 1 !default;
352
- $nav-tab-link-max-width: 16.5rem !default;
353
- $nav-tab-link-min-width: 4.5rem !default;
354
- $nav-tab-link-min-width-lg: 10rem !default;
355
- $nav-tab-link-padding-x: 0.75rem !default;
356
- $nav-tab-link-padding-x-lg: 1.5rem !default;
357
-
358
- //
359
- // text field (form)
360
- // based on https://material.google.com/components/text-fields.html#text-fields-single-line-text-field
361
- //
362
- $textfield-border-color: $border-color !default;
363
- $textfield-border-color-focus: $brand-color !default;
364
- $textfield-border-width: $border-width !default;
365
- $textfield-color: $black-primary !default;
366
- $textfield-color-disabled: $black-hint !default;
367
- $textfield-hint-color: $black-hint !default;
368
-
369
- // size
370
- $textfield-font-size: 1rem !default;
371
- $textfield-font-size-lg: 2.125rem !default;
372
- $textfield-font-size-sm: 0.8125rem !default;
373
- $textfield-height: 2.25rem !default;
374
- $textfield-height-lg: 3.75rem !default;
375
- $textfield-height-sm: 2rem !default;
376
- $textfield-margin-bottom: 0.5rem !default;
377
- $textfield-margin-bottom-lg: 0.75rem !default;
378
- $textfield-margin-bottom-sm: 0.25rem !default;
379
- $textfield-padding-bottom: 0.5rem !default;
380
- $textfield-padding-bottom-lg: 0.5rem !default;
381
- $textfield-padding-bottom-sm: 0.5rem !default;
382
- $textfield-padding-top: 0.5rem !default;
383
- $textfield-padding-top-lg: 0.5rem !default;
384
- $textfield-padding-top-sm: 0.25rem !default;
385
-
386
- //
387
- // text field: floating label (form: floating label)
388
- // based on https://material.google.com/components/text-fields.html#text-fields-labels
389
- //
390
- $floating-label-color: $textfield-hint-color !default;
391
- $floating-label-color-focus: $brand-color !default;
392
- $floating-label-font-size-focus: 0.75rem !default;
393
-
394
- // size
395
- $floating-label-divider-padding: 0.5rem !default;
396
- $floating-label-divider-padding-lg: 0.75rem !default;
397
- $floating-label-divider-padding-sm: 0.25rem !default;
398
- $floating-label-height: 4rem !default;
399
- $floating-label-height-lg: 5.25rem !default;
400
- $floating-label-height-sm: 3.5rem !default;
401
- $floating-label-padding-top: 1rem !default;
402
- $floating-label-padding-top-lg: 1.25rem !default;
403
- $floating-label-padding-top-sm: 0.75rem !default;
404
-
405
- //
406
- // tooltip
407
- // based on https://material.google.com/components/tooltips.html#tooltips-tooltips-desktop
408
- //
409
- $tooltip-bg: $palette-grey-700 !default;
410
- $tooltip-color: $white-primary !default;
411
- $tooltip-font-size: 0.875rem !default;
412
- $tooltip-font-size-md-up: 0.625rem !default;
413
- $tooltip-height: 2rem !default;
414
- $tooltip-height-md-up: 1.375rem !default;
415
- $tooltip-margin: $spacer-lg-y !default;
416
- $tooltip-margin-md-up: 0.875rem !default;
417
- $tooltip-opacity: 0.9 !default;
418
- $tooltip-padding-x: $spacer-md-x !default;
419
- $tooltip-padding-x-md-up: $spacer-sm-x !default;
420
- $tooltip-padding-y: (($tooltip-height - $line-height-base * $tooltip-font-size) / 2) !default;
421
- $tooltip-padding-y-md-up: (($tooltip-height-md-up - $line-height-base * $tooltip-font-size-md-up) / 2) !default;
422
- $tooltip-zindex: $elevation-24dp !default;
423
-
424
- //
425
- // waves
426
- //
427
- $waves-bg: $black-hint !default;
428
- $waves-bg-light: $white-hint !default;
429
- $waves-size: 4rem !default;
1
+ // Button (Bootstrap button)
2
+ // Based on https://material.google.com/components/buttons.html#buttons-style
3
+
4
+ // N.B. Material design only specifies specs for default button (.btn) and dense button (.btn-sm)
5
+
6
+ $btn-bg-active: rgba(153, 153, 153, .4) !default;
7
+ $btn-bg-active-inverse: rgba(204, 204, 204, .25) !default;
8
+ $btn-bg-disabled: $black-divider !default;
9
+ $btn-bg-disabled-inverse: $white-divider !default;
10
+ $btn-border-radius: $border-radius !default;
11
+ $btn-block-margin-y: $spacer-xs !default;
12
+ $btn-color: $black-primary !default;
13
+ $btn-color-disabled: rgba(0, 0, 0, .26) !default;
14
+ $btn-color-disabled-inverse: rgba(255, 255, 255, .3) !default;
15
+ $btn-elevation-shadow: $elevation-shadow-2dp !default;
16
+ $btn-elevation-shadow-active: $elevation-shadow-8dp !default;
17
+ $btn-font-weight: $font-weight-medium !default;
18
+ $btn-line-height: 1 !default;
19
+ $btn-min-width: 5.5rem !default;
20
+ $btn-overlay: $black-divider !default;
21
+ $btn-overlay-inverse: $white-divider !default;
22
+
23
+ // Size
24
+ $btn-font-size: .875rem !default;
25
+ $btn-font-size-lg: .9375rem !default;
26
+ $btn-font-size-sm: .8125rem !default;
27
+ $btn-height: 2.25rem !default;
28
+ $btn-height-lg: 2.5rem !default;
29
+ $btn-height-sm: 2rem !default;
30
+ $btn-padding-x: 1rem !default;
31
+ $btn-padding-x-lg: $btn-padding-x !default;
32
+ $btn-padding-x-sm: $btn-padding-x !default;
33
+ $btn-padding-y: (($btn-height - $btn-font-size * $btn-line-height) / 2) !default;
34
+ $btn-padding-y-lg: (($btn-height-lg - $btn-font-size-lg * $btn-line-height) / 2) !default;
35
+ $btn-padding-y-sm: (($btn-height-sm - $btn-font-size-sm * $btn-line-height) / 2) !default;
36
+
37
+
38
+
39
+ // Button: floating action button
40
+ // Based on https://material.google.com/components/buttons-floating-action-button.html#buttons-floating-action-button-floating-action-button
41
+
42
+ $btn-float-elevation-shadow: $elevation-shadow-6dp !default;
43
+ $btn-float-elevation-shadow-active: $elevation-shadow-12dp !default;
44
+ $btn-float-size: 3.5rem !default;
45
+ $btn-float-size-sm: 2.5rem !default;
46
+
47
+
48
+
49
+ // Button: toggle buttons (Boostrap button group)
50
+ // Based on https://material.io/guidelines/components/buttons.html#buttons-toggle-buttons
51
+
52
+ $btn-group-bg: $white-primary !default;
53
+ $btn-group-divider-bg: $border-color !default;
54
+ $btn-group-inner-spacer-x: 1px !default;
55
+ $btn-group-inner-spacer-y: 1px !default;
56
+ $btn-group-toggle-opacity: .7 !default;
57
+
58
+
59
+
60
+ // Card (Bootstrap card)
61
+ // Based on https://material.google.com/components/cards.html#cards-usage
62
+
63
+ $card-action-inner-spacer-x: .5rem !default;
64
+ $card-action-inner-spacer-y: .5rem !default;
65
+ $card-action-padding-x: $card-action-inner-spacer-x !default;
66
+ $card-action-padding-y: $card-action-inner-spacer-y !default;
67
+ $card-bg: $white !default;
68
+ $card-border-radius: $border-radius !default;
69
+ $card-border-width: $border-width !default;
70
+ $card-columns-count: 2 !default;
71
+ $card-columns-count-desktop: 3 !default;
72
+ $card-elevation-shadow: $elevation-shadow-2dp !default;
73
+ $card-elevation-shadow-hover: $elevation-shadow-8dp !default;
74
+ $card-inner-spacer-x: 1rem !default;
75
+ $card-inner-spacer-y: 1rem !default;
76
+ $card-margin-x: $spacer-sm !default;
77
+ $card-margin-y: $spacer-sm !default;
78
+ $card-padding-x: 1rem !default;
79
+ $card-padding-y: 1.5rem !default;
80
+
81
+
82
+
83
+ // Chip
84
+ // Based on https://material.google.com/components/chips.html#chips-specs
85
+
86
+ $chip-bg: $material-color-grey-300 !default;
87
+ $chip-bg-active: $material-color-grey-400 !default;
88
+ $chip-color: $black-primary !default;
89
+ $chip-elevation-shadow-hover: $elevation-shadow-2dp !default;
90
+ $chip-font-size: .875rem !default;
91
+ $chip-font-weight: $font-weight-regular !default;
92
+ $chip-height: 2rem !default;
93
+ $chip-icon-bg: map-get(theme-color(secondary), color) !default;
94
+ $chip-icon-font-size: 1rem !default;
95
+ $chip-inner-spacer-x: .25rem !default;
96
+ $chip-line-height: 1 !default;
97
+ $chip-padding-x: .75rem !default;
98
+
99
+
100
+
101
+ // Data table (Bootstrap table)
102
+ // Based on https://material.google.com/components/data-tables.html#data-tables-structure
103
+
104
+ $table-bg: $white !default;
105
+ $table-bg-accent: $material-color-grey-100 !default;
106
+ $table-bg-hover: $material-color-grey-200 !default;
107
+ $table-border-color: $border-color-solid !default;
108
+ $table-border-width: $border-width !default;
109
+ $table-cell-padding-x: 1.75rem !default;
110
+ $table-cell-padding-x-alt: 1.5rem !default;
111
+ $table-elevation-shadow: $elevation-shadow-2dp !default;
112
+ $table-line-height: $line-height-base !default;
113
+ $table-margin-y: $spacer !default;
114
+
115
+ $table-tbody-cell-height: 3rem !default;
116
+ $table-tbody-color: $black-primary !default;
117
+ $table-tbody-font-size: .8125rem !default;
118
+ $table-tbody-font-weight: $font-weight-regular !default;
119
+ $table-tbody-padding-y: (($table-tbody-cell-height - $table-tbody-font-size * $table-line-height) / 2) !default;
120
+
121
+ $table-tfoot-cell-height: 3.5rem !default;
122
+ $table-tfoot-color: $black-secondary !default;
123
+ $table-tfoot-font-size: .75rem !default;
124
+ $table-tfoot-font-weight: $font-weight-regular !default;
125
+ $table-tfoot-padding-y: (($table-tfoot-cell-height - $table-tfoot-font-size * $table-line-height) / 2) !default;
126
+
127
+ $table-thead-bg: $table-bg-accent !default;
128
+ $table-thead-cell-height: $table-tfoot-cell-height !default;
129
+ $table-thead-color: $table-tfoot-color !default;
130
+ $table-thead-font-size: $table-tfoot-font-size !default;
131
+ $table-thead-font-weight: $font-weight-medium !default;
132
+ $table-thead-padding-y: (($table-thead-cell-height - $table-thead-font-size * $table-line-height) / 2) !default;
133
+
134
+ // Size
135
+ $table-sm-cell-padding-x: 1rem !default;
136
+ $table-sm-cell-padding-x-alt: 1rem !default;
137
+
138
+ $table-sm-tbody-cell-height: 2.25rem !default;
139
+ $table-sm-tbody-padding-y: (($table-sm-tbody-cell-height - $table-tbody-font-size * $table-line-height) / 2) !default;
140
+
141
+ $table-sm-tfoot-cell-height: 2.5rem !default;
142
+ $table-sm-tfoot-padding-y: (($table-sm-tfoot-cell-height - $table-tfoot-font-size * $table-line-height) / 2) !default;
143
+
144
+ $table-sm-thead-cell-height: $table-sm-tfoot-cell-height !default;
145
+ $table-sm-thead-padding-y: (($table-sm-thead-cell-height - $table-thead-font-size * $table-line-height) / 2) !default;
146
+
147
+ // Theme
148
+ $table-dark-bg: $dark-theme-4 !default;
149
+ $table-dark-bg-accent: $dark-theme-3 !default;
150
+ $table-dark-bg-hover: $dark-theme-2 !default;
151
+ $table-dark-border-color: $dark-theme-3 !default;
152
+ $table-dark-color: $white-primary !default;
153
+
154
+
155
+
156
+ // Dialog (Bootstrap modal)
157
+ // Based on https://material.google.com/components/dialogs.html#dialogs-specs
158
+
159
+ $dialog-backdrop-bg: $black-hint !default;
160
+ $dialog-content-bg: $white !default;
161
+ $dialog-elevation-shadow: $elevation-shadow-24dp !default;
162
+ $dialog-footer-btn-min-width: 4rem !default;
163
+ $dialog-footer-inner-spacer-x: .5rem !default;
164
+ $dialog-footer-padding-x: .5rem !default;
165
+ $dialog-footer-padding-y: .5rem !default;
166
+ $dialog-margin-x: $spacer-lg !default;
167
+ $dialog-margin-y: $spacer-lg !default;
168
+ $dialog-padding-x: 1.5rem !default;
169
+ $dialog-padding-y: 1.25rem !default;
170
+ $dialog-scale: .87 !default;
171
+ $dialog-width: 35rem !default;
172
+ $dialog-width-lg: 52.5rem !default;
173
+ $dialog-width-sm: 17.5rem !default;
174
+
175
+
176
+
177
+ // Expansion panel (Bootstrap list group)
178
+ // Based on https://material.google.com/components/expansion-panels.html#expansion-panels-specs
179
+
180
+ $expansion-panel-bg: $white !default;
181
+ $expansion-panel-bg-active: $material-color-grey-200 !default;
182
+ $expansion-panel-border-color: $border-color !default;
183
+ $expansion-panel-border-radius: $border-radius !default;
184
+ $expansion-panel-border-width: $border-width !default;
185
+ $expansion-panel-color: $black-primary !default;
186
+ $expansion-panel-color-disabled: $black-hint !default;
187
+ $expansion-panel-elevation-shadow: $elevation-shadow-1dp !default;
188
+ $expansion-panel-font-size: .9375rem !default;
189
+ $expansion-panel-height: 3rem !default;
190
+ $expansion-panel-line-height: $line-height-base !default;
191
+ $expansion-panel-padding-x: 1.5rem !default;
192
+ $expansion-panel-padding-y: (($expansion-panel-height - $expansion-panel-font-size * $expansion-panel-line-height) / 2) !default;
193
+
194
+
195
+
196
+ // Menu (Bootstrap dropdown)
197
+ // Based on https://material.google.com/components/menus.html#menus-specs
198
+
199
+ $menu-bg: $white !default;
200
+ $menu-border-radius: $border-radius !default;
201
+ $menu-divider-bg: $border-color !default;
202
+ $menu-font-size: 1rem !default;
203
+ $menu-font-size-cascading: .9375rem !default;
204
+ $menu-elevation-shadow: $elevation-shadow-8dp !default;
205
+ $menu-header-color: $black-primary !default;
206
+ $menu-line-height: 1.5rem !default;
207
+ $menu-line-height-cascading: $menu-line-height !default;
208
+ $menu-link-bg: transparent !default;
209
+ $menu-link-bg-hover: $material-color-grey-100 !default;
210
+ $menu-link-color: $black-primary !default;
211
+ $menu-link-color-disabled: $black-hint !default;
212
+ $menu-link-height: 3rem !default;
213
+ $menu-link-height-cascading: 2rem !default;
214
+ $menu-link-padding-x: 1rem !default;
215
+ $menu-link-padding-x-cascading: 1.5rem !default;
216
+ $menu-link-padding-y: (($menu-link-height - $menu-line-height) / 2) !default;
217
+ $menu-link-padding-y-cascading: (($menu-link-height-cascading - $menu-line-height-cascading) / 2) !default;
218
+ $menu-min-width: 7rem !default;
219
+ $menu-min-width-cascading: 20rem !default;
220
+ $menu-padding-y: .5rem !default;
221
+ $menu-padding-y-cascading: 1rem !default;
222
+
223
+
224
+
225
+ // Navigation drawer
226
+ // Based on https://material.google.com/patterns/navigation-drawer.html#navigation-drawer-specs
227
+
228
+ $navdrawer-backdrop-bg: $dialog-backdrop-bg !default;
229
+ $navdrawer-border-color: $border-color !default;
230
+ $navdrawer-border-width: $border-width !default;
231
+ $navdrawer-content-bg: $dialog-content-bg !default;
232
+ $navdrawer-divider-bg: $border-color !default;
233
+ $navdrawer-elevation-shadow: $elevation-shadow-16dp !default;
234
+ $navdrawer-gutter-width: 3.5rem !default;
235
+ $navdrawer-header-bg: $material-color-grey-100 !default;
236
+ $navdrawer-header-border-color: $border-color !default;
237
+ $navdrawer-header-border-width: $border-width !default;
238
+ $navdrawer-inner-spacer-x: 1rem !default;
239
+ $navdrawer-inner-spacer-y: .5rem !default;
240
+ $navdrawer-nav-icon-color: $black-secondary !default;
241
+ $navdrawer-nav-icon-width: 3.5rem !default;
242
+ $navdrawer-nav-link-bg-hover: $material-color-grey-100 !default;
243
+ $navdrawer-nav-link-color: $black-primary !default;
244
+ $navdrawer-nav-link-color-active: map-get(theme-color(primary), color) !default;
245
+ $navdrawer-nav-link-color-disabled: $black-hint !default;
246
+ $navdrawer-nav-link-font-size: .875rem !default;
247
+ $navdrawer-nav-link-font-weight: $font-weight-medium !default;
248
+ $navdrawer-nav-link-height: 3rem !default;
249
+ $navdrawer-subheader-color: $black-hint !default;
250
+ $navdrawer-subheader-font-size: .875rem !default;
251
+ $navdrawer-subheader-font-weight: $font-weight-medium !default;
252
+ $navdrawer-subheader-height: 3rem !default;
253
+ $navdrawer-width: 17.5rem !default;
254
+
255
+
256
+
257
+ // Picker
258
+ // Based on https://material.google.com/components/pickers.html#pickers-date-pickers
259
+
260
+ $picker-cell-size: 2.5rem !default;
261
+ $picker-content-bg: $dialog-content-bg !default;
262
+ $picker-day-bg-selected: map-get(theme-color(primary), color) !default;
263
+ $picker-day-color-disabled: $black-hint !default;
264
+ $picker-day-color-today: map-get(theme-color(primary), color) !default;
265
+ $picker-elevation-shadow: $dialog-elevation-shadow !default;
266
+ $picker-header-bg: map-get(theme-color(primary), color) !default;
267
+ $picker-header-padding-x: 1.5rem !default;
268
+ $picker-header-padding-y: 1rem !default;
269
+ $picker-holder-bg: $dialog-backdrop-bg !default;
270
+ $picker-inner-spacer-x: .5rem !default;
271
+ $picker-inner-spacer-y: .5rem !default;
272
+ $picker-margin-x: $dialog-margin-x !default;
273
+ $picker-margin-y: $dialog-margin-y !default;
274
+ $picker-nav-next-icon: 'keyboard_arrow_right' !default;
275
+ $picker-nav-prev-icon: 'keyboard_arrow_left' !default;
276
+ $picker-weekday-color: $black-hint !default;
277
+
278
+
279
+
280
+ // Progress (Bootstrap progress bar)
281
+ // Based on https://material.google.com/components/progress-activity.html#progress-activity-types-of-indicators
282
+
283
+ $progress-bar-bg: $material-color-indigo-500 !default;
284
+ $progress-bar-border-radius: .25rem !default;
285
+ $progress-bar-height: .25rem !default;
286
+ $progress-bg: $material-color-indigo-100 !default;
287
+
288
+ // Circular
289
+ $progress-circular-animation-duration: 5.332s !default;
290
+ $progress-circular-bg: $material-color-indigo-500 !default;
291
+ $progress-circular-height: 2.5rem !default;
292
+ $progress-circular-spinner-width: .25rem !default;
293
+
294
+
295
+
296
+ // Selection control (Bootstrap custom form control)
297
+ // Based on https://material.google.com/components/selection-controls.html
298
+
299
+ $selection-control-checkbox-icon: 'check_box_outline_blank' !default;
300
+ $selection-control-checkbox-icon-checked: 'check_box' !default;
301
+ $selection-control-checkbox-icon-indeterminate: 'indeterminate_check_box' !default;
302
+ $selection-control-color: $black-secondary !default;
303
+ $selection-control-color-active: map-get(theme-color(secondary), color) !default;
304
+ $selection-control-color-disabled: rgba(0, 0, 0, .26) !default;
305
+ $selection-control-indicator-size: $material-icon-size !default;
306
+ $selection-control-radial-bg: $black-divider !default;
307
+ $selection-control-radio-icon: 'radio_button_unchecked' !default;
308
+ $selection-control-radio-icon-checked: 'radio_button_checked' !default;
309
+ $selection-control-spacer-x: ($material-icon-size / 2) !default;
310
+ $selection-control-spacer-y: ($material-icon-size / 2) !default;
311
+ $selection-control-thumb-bg: $material-color-grey-050 !default;
312
+ $selection-control-thumb-bg-disabled: #bdbdbd !default;
313
+ $selection-control-thumb-shadow: 0 1px 5px 0 rgba(0, 0, 0, $black-secondary-opacity) !default;
314
+ $selection-control-track-bg: $black-hint !default;
315
+ $selection-control-track-bg-disabled: $black-divider !default;
316
+ $selection-control-track-height: 1rem !default;
317
+ $selection-control-track-width: ($selection-control-indicator-size * 2) !default;
318
+
319
+
320
+
321
+ // Stepper
322
+ // Based on https://material.google.com/components/steppers.html#steppers-specs
323
+
324
+ $stepper-bg: $white !default;
325
+ $stepper-border-color: $material-color-grey-400 !default;
326
+ $stepper-border-width: $border-width !default;
327
+ $stepper-icon-bg: $black-hint !default;
328
+ $stepper-icon-bg-active: map-get(theme-color(primary), color) !default;
329
+ $stepper-icon-color: $white-primary !default;
330
+ $stepper-icon-font-size: .75rem !default;
331
+ $stepper-icon-font-weight: $font-weight-regular !default;
332
+ $stepper-icon-height: $material-icon-size !default;
333
+ $stepper-inner-spacer: .5rem !default;
334
+ $stepper-padding-x: 1.5rem !default;
335
+ $stepper-padding-y: 1.5rem !default;
336
+ $stepper-text-color: $black-hint !default;
337
+ $stepper-text-color-active: $black-primary !default;
338
+ $stepper-text-font-size: .875rem !default;
339
+ $stepper-text-font-weight: $font-weight-regular !default;
340
+
341
+
342
+
343
+ // Tab (Bootstrap tab)
344
+ // Based on https://material.google.com/components/tabs.html#tabs-specs
345
+
346
+ $nav-tab-bg-hover: $black-divider !default;
347
+ $nav-tab-border-color: $border-color !default;
348
+ $nav-tab-border-width: $border-width !default;
349
+ $nav-tab-color: $black-primary !default;
350
+ $nav-tab-color-active: map-get(theme-color(secondary), color) !default;
351
+ $nav-tab-color-disabled: $black-hint !default;
352
+ $nav-tab-font-size: .875rem !default;
353
+ $nav-tab-font-weight: $font-weight-medium !default;
354
+ $nav-tab-height: 3rem !default;
355
+ $nav-tab-indicator-bg: map-get(theme-color(secondary), color) !default;
356
+ $nav-tab-indicator-height: .125rem !default;
357
+ $nav-tab-line-height: 1 !default;
358
+ $nav-tab-link-opacity: .7 !default;
359
+ $nav-tab-link-padding-x: .75rem !default;
360
+ $nav-tab-link-padding-y: (($nav-tab-height - $nav-tab-font-size * $nav-tab-line-height) / 2) !default;
361
+
362
+
363
+
364
+ // Text field (Bootstrap form control)
365
+ // Based on https://material.io/guidelines/components/text-fields.html#text-fields-states
366
+
367
+ $textfield-border-color: rgba(0, 0, 0, .42) !default;
368
+ $textfield-border-color-focus: map-get(theme-color(primary), color) !default;
369
+ $textfield-border-color-hover: rgba(0, 0, 0, .87) !default;
370
+ $textfield-border-width: $border-width !default;
371
+ $textfield-border-width-focus: ($textfield-border-width * 2) !default;
372
+ $textfield-border-width-hover: ($textfield-border-width * 2) !default;
373
+ $textfield-color: $black-primary !default;
374
+ $textfield-color-disabled: $black-hint !default;
375
+ $textfield-hint-color: $black-hint !default;
376
+ $textfield-line-height: $line-height-base !default;
377
+ $textfield-margin-x: $spacer !default;
378
+
379
+ // Size
380
+ $textfield-font-size: 1rem !default;
381
+ $textfield-font-size-lg: 2.125rem !default;
382
+ $textfield-font-size-sm: .8125rem !default;
383
+ $textfield-height: 2.25rem !default;
384
+ $textfield-height-lg: 3.75rem !default;
385
+ $textfield-height-sm: 2rem !default;
386
+ $textfield-line-height: 1.5 !default;
387
+ $textfield-line-height-lg: 1.176471 !default;
388
+ $textfield-line-height-sm: 1.384615 !default;
389
+ $textfield-margin-y: .5rem !default;
390
+ $textfield-margin-y-lg: .75rem !default;
391
+ $textfield-margin-y-sm: .25rem !default;
392
+ $textfield-padding-x: 0 !default;
393
+ $textfield-padding-x-lg: 0 !default;
394
+ $textfield-padding-x-sm: 0 !default;
395
+ $textfield-padding-y: (($textfield-height - $textfield-font-size * $textfield-line-height) / 2) !default;
396
+ $textfield-padding-y-lg: (($textfield-height-lg - $textfield-font-size-lg * $textfield-line-height-lg) / 2) !default;
397
+ $textfield-padding-y-sm: (($textfield-height-sm - $textfield-font-size-sm * $textfield-line-height-sm) / 2) !default;
398
+
399
+
400
+
401
+ // Text field: box
402
+ // Based on https://material.io/guidelines/components/text-fields.html#text-fields-text-field-boxes
403
+
404
+ $textfield-box-border-radius: 4px !default;
405
+
406
+ // Size
407
+ $textfield-box-padding-x: 1rem !default;
408
+ $textfield-box-padding-x-lg: 1rem !default;
409
+ $textfield-box-padding-x-sm: .75rem !default;
410
+ $textfield-box-padding-y: 1.125rem !default;
411
+ $textfield-box-padding-y-lg: 1.125rem !default;
412
+ $textfield-box-padding-y-sm: .75rem !default;
413
+
414
+
415
+
416
+ // Text field: floating label
417
+ // Based on https://material.google.com/components/text-fields.html#text-fields-labels
418
+
419
+ $floating-label-color: $textfield-hint-color !default;
420
+ $floating-label-color-focus: map-get(theme-color(primary), color) !default;
421
+ $floating-label-font-size-focus: .75rem !default;
422
+
423
+
424
+
425
+ // Toolbar (Bootstrap navbar)
426
+ // Based on https://material.google.com/components/toolbars.html#toolbars-usage
427
+
428
+ $toolbar-color: $black-primary !default;
429
+ $toolbar-color-lighter: $black-hint !default;
430
+ $toolbar-element-bg: $black-divider !default;
431
+ $toolbar-element-border-radius: $border-radius !default;
432
+ $toolbar-element-height: 2.25rem !default;
433
+ $toolbar-element-opacity: .7 !default;
434
+ $toolbar-elevation-shadow: $elevation-shadow-4dp !default;
435
+ $toolbar-height: 3.5rem !default;
436
+ $toolbar-inner-spacer-x: 1rem !default;
437
+ $toolbar-inner-spacer-y: 1rem !default;
438
+ $toolbar-link-font-size: 1rem !default;
439
+ $toolbar-link-height: $toolbar-element-height !default;
440
+ $toolbar-link-line-height: 1 !default;
441
+ $toolbar-link-padding-x: 1rem !default;
442
+ $toolbar-link-padding-y: (($toolbar-link-height - $toolbar-link-font-size * $toolbar-link-line-height) / 2) !default;
443
+ $toolbar-padding-x: 1rem !default;
444
+ $toolbar-padding-y: (($toolbar-height - $toolbar-element-height) / 2) !default;
445
+ $toolbar-toggler-icon: 'menu' !default;
446
+ $toolbar-waterfall-bg: map-get(theme-color(primary), color) !default;
447
+
448
+ // Theme
449
+ $toolbar-dark-color: $white-primary !default;
450
+ $toolbar-dark-color-lighter: $white-hint !default;
451
+ $toolbar-dark-element-bg: $white-divider !default;
452
+
453
+
454
+
455
+ // Tooltip (Bootstrap tooltip)
456
+ // Based on https://material.google.com/components/tooltips.html#tooltips-tooltips-desktop
457
+
458
+ $tooltip-bg: $material-color-grey-700 !default;
459
+ $tooltip-color: $white-primary !default;
460
+ $tooltip-font-size: .875rem !default;
461
+ $tooltip-font-size-desktop: .625rem !default;
462
+ $tooltip-height: 2rem !default;
463
+ $tooltip-height-desktop: 1.375rem !default;
464
+ $tooltip-line-height: $line-height-base !default;
465
+ $tooltip-margin: 1.5rem !default;
466
+ $tooltip-margin-desktop: .875rem !default;
467
+ $tooltip-opacity: .9 !default;
468
+ $tooltip-padding-x: 1rem !default;
469
+ $tooltip-padding-x-desktop: .5rem !default;
470
+ $tooltip-padding-y: (($tooltip-height - $tooltip-font-size * $tooltip-line-height) / 2) !default;
471
+ $tooltip-padding-y-desktop: (($tooltip-height-desktop - $tooltip-font-size-desktop * $tooltip-line-height) / 2) !default;
472
+ $tooltip-scale: .87 !default;
473
+ $tooltip-zindex: $elevation-24dp !default;
474
+
475
+
476
+
477
+ // Waves
478
+
479
+ $waves-bg: $black-divider !default;
480
+ $waves-bg-light: $white-divider !default;
481
+ $waves-size: 4rem !default;