headmin 0.2.8 → 0.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (271) hide show
  1. checksums.yaml +4 -4
  2. data/.ruby-version +1 -1
  3. data/CHANGELOG.md +29 -3
  4. data/Gemfile +1 -1
  5. data/Gemfile.lock +39 -24
  6. data/README.md +65 -57
  7. data/app/assets/config/headmin_manifest.js +2 -0
  8. data/app/assets/images/document.docx +0 -0
  9. data/{src/scss/headmin/filters.scss → app/assets/images/document.pdf} +0 -0
  10. data/app/assets/images/image.jpg +0 -0
  11. data/app/assets/images/spreadsheet.xls +0 -0
  12. data/app/assets/images/video.mp4 +0 -0
  13. data/app/assets/javascripts/headmin/config/i18n.js +11 -0
  14. data/{src/js → app/assets/javascripts}/headmin/controllers/blocks_controller.js +0 -1
  15. data/{src/js → app/assets/javascripts}/headmin/controllers/date_range_controller.js +0 -2
  16. data/app/assets/javascripts/headmin/controllers/dropzone_controller.js +33 -0
  17. data/app/assets/javascripts/headmin/controllers/file_preview_controller.js +244 -0
  18. data/{src/js → app/assets/javascripts}/headmin/controllers/filter_controller.js +12 -6
  19. data/{src/js → app/assets/javascripts}/headmin/controllers/filters_controller.js +0 -0
  20. data/{src/js → app/assets/javascripts}/headmin/controllers/flatpickr_controller.js +2 -1
  21. data/app/assets/javascripts/headmin/controllers/hello_controller.js +7 -0
  22. data/app/assets/javascripts/headmin/controllers/notification_controller.js +8 -0
  23. data/{src/js → app/assets/javascripts}/headmin/controllers/popup_controller.js +0 -1
  24. data/app/assets/javascripts/headmin/controllers/redactorx_controller.js +13 -0
  25. data/{src/js → app/assets/javascripts}/headmin/controllers/repeater_controller.js +0 -0
  26. data/app/assets/javascripts/headmin/controllers/select_controller.js +48 -0
  27. data/{src/js → app/assets/javascripts}/headmin/controllers/table_actions_controller.js +18 -6
  28. data/{src/js → app/assets/javascripts}/headmin/controllers/table_controller.js +28 -14
  29. data/app/assets/javascripts/headmin/index.js +37 -0
  30. data/app/assets/javascripts/headmin.js +15280 -0
  31. data/{src/scss → app/assets/stylesheets}/headmin/filter.scss +0 -0
  32. data/app/assets/stylesheets/headmin/filters.scss +0 -0
  33. data/{src/scss → app/assets/stylesheets}/headmin/form.scss +53 -4
  34. data/{src/scss → app/assets/stylesheets}/headmin/general.scss +0 -0
  35. data/{src/scss → app/assets/stylesheets}/headmin/layout/body.scss +0 -0
  36. data/{src/scss → app/assets/stylesheets}/headmin/layout/sidebar.scss +0 -0
  37. data/{src/scss → app/assets/stylesheets}/headmin/layout.scss +0 -0
  38. data/{src/scss → app/assets/stylesheets}/headmin/login.scss +0 -0
  39. data/{src/scss/vendor/bootstrap/variables.scss → app/assets/stylesheets/headmin/overrides/bootstrap.scss} +0 -0
  40. data/{src/scss/vendor/redactorx/override.css → app/assets/stylesheets/headmin/overrides/redactorx.css} +0 -0
  41. data/{src/scss → app/assets/stylesheets}/headmin/popup.scss +0 -0
  42. data/app/assets/stylesheets/headmin/syntax.scss +349 -0
  43. data/{src/scss → app/assets/stylesheets}/headmin/table.scss +0 -0
  44. data/app/assets/stylesheets/headmin/thumbnail.scss +20 -0
  45. data/app/assets/stylesheets/headmin/utilities.scss +68 -0
  46. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_accordion.scss +118 -0
  47. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_alert.scss +57 -0
  48. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_badge.scss +29 -0
  49. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_breadcrumb.scss +28 -0
  50. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_button-group.scss +139 -0
  51. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_buttons.scss +111 -0
  52. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_card.scss +216 -0
  53. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_carousel.scss +229 -0
  54. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_close.scss +40 -0
  55. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_containers.scss +41 -0
  56. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_dropdown.scss +240 -0
  57. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_forms.scss +9 -0
  58. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_functions.scss +302 -0
  59. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_grid.scss +33 -0
  60. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_helpers.scss +9 -0
  61. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_images.scss +42 -0
  62. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_list-group.scss +174 -0
  63. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_mixins.scss +43 -0
  64. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_modal.scss +209 -0
  65. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_nav.scss +139 -0
  66. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_navbar.scss +335 -0
  67. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_offcanvas.scss +83 -0
  68. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_pagination.scss +64 -0
  69. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_placeholders.scss +51 -0
  70. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_popover.scss +158 -0
  71. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_progress.scss +48 -0
  72. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_reboot.scss +625 -0
  73. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_root.scss +54 -0
  74. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_spinners.scss +69 -0
  75. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_tables.scss +155 -0
  76. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_toasts.scss +51 -0
  77. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_tooltip.scss +115 -0
  78. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_transitions.scss +27 -0
  79. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_type.scss +104 -0
  80. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_utilities.scss +630 -0
  81. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_variables.scss +1641 -0
  82. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/bootstrap-grid.scss +67 -0
  83. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/bootstrap-reboot.scss +13 -0
  84. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/bootstrap-utilities.scss +18 -0
  85. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/bootstrap.scss +53 -0
  86. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/forms/_floating-labels.scss +63 -0
  87. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/forms/_form-check.scss +152 -0
  88. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/forms/_form-control.scss +219 -0
  89. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/forms/_form-range.scss +91 -0
  90. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/forms/_form-select.scss +72 -0
  91. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/forms/_form-text.scss +11 -0
  92. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/forms/_input-group.scss +121 -0
  93. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/forms/_labels.scss +36 -0
  94. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/forms/_validation.scss +12 -0
  95. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/helpers/_clearfix.scss +3 -0
  96. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/helpers/_colored-links.scss +12 -0
  97. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/helpers/_position.scss +30 -0
  98. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/helpers/_ratio.scss +26 -0
  99. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/helpers/_stacks.scss +15 -0
  100. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/helpers/_stretched-link.scss +15 -0
  101. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/helpers/_text-truncation.scss +7 -0
  102. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/helpers/_visually-hidden.scss +8 -0
  103. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/helpers/_vr.scss +8 -0
  104. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_alert.scss +11 -0
  105. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_backdrop.scss +14 -0
  106. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_border-radius.scss +78 -0
  107. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_box-shadow.scss +18 -0
  108. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_breakpoints.scss +127 -0
  109. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_buttons.scss +133 -0
  110. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_caret.scss +64 -0
  111. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_clearfix.scss +9 -0
  112. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_color-scheme.scss +7 -0
  113. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_container.scss +9 -0
  114. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_deprecate.scss +10 -0
  115. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_forms.scss +144 -0
  116. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_gradients.scss +47 -0
  117. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_grid.scss +151 -0
  118. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_image.scss +16 -0
  119. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_list-group.scss +24 -0
  120. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_lists.scss +7 -0
  121. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_pagination.scss +31 -0
  122. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_reset-text.scss +17 -0
  123. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_resize.scss +6 -0
  124. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_table-variants.scss +21 -0
  125. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_text-truncate.scss +8 -0
  126. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_transition.scss +26 -0
  127. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_utilities.scss +89 -0
  128. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_visually-hidden.scss +29 -0
  129. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/utilities/_api.scss +47 -0
  130. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/vendor/_rfs.scss +354 -0
  131. data/app/assets/stylesheets/headmin/vendor/flatpickr.css +903 -0
  132. data/{src/scss/vendor/redactorx → app/assets/stylesheets/headmin/vendor}/redactorx.css +0 -0
  133. data/app/assets/stylesheets/headmin/vendor/tom-select-bootstrap.css +536 -0
  134. data/app/assets/stylesheets/headmin.css +13454 -0
  135. data/app/assets/stylesheets/headmin.scss +65 -0
  136. data/app/controllers/concerns/headmin/authentication.rb +1 -1
  137. data/app/controllers/concerns/headmin/searchable.rb +1 -1
  138. data/app/controllers/concerns/headmin/sortable.rb +7 -7
  139. data/app/helpers/headmin/admin_helper.rb +2 -1
  140. data/app/helpers/headmin/bootstrap_helper.rb +4 -4
  141. data/app/helpers/headmin/documentation_helper.rb +35 -0
  142. data/app/helpers/headmin/filter_helper.rb +1 -1
  143. data/app/helpers/headmin/form_helper.rb +7 -3
  144. data/app/helpers/headmin/notification_helper.rb +21 -21
  145. data/app/helpers/headmin/request_helper.rb +5 -10
  146. data/app/models/concerns/headmin/block.rb +1 -2
  147. data/app/models/concerns/headmin/blockable.rb +1 -1
  148. data/app/models/concerns/headmin/field.rb +1 -1
  149. data/app/models/concerns/headmin/fieldable.rb +8 -8
  150. data/app/models/headmin/documentation_renderer.rb +32 -0
  151. data/app/models/headmin/form/base.rb +78 -0
  152. data/app/models/headmin/form/text.rb +51 -0
  153. data/app/models/headmin/thumbnail.rb +61 -0
  154. data/app/services/block_service.rb +53 -53
  155. data/app/views/examples/admin.html.erb +1 -1
  156. data/app/views/headmin/_blocks.html.erb +2 -2
  157. data/app/views/headmin/_breadcrumbs.html.erb +1 -1
  158. data/app/views/headmin/_card.html.erb +8 -6
  159. data/app/views/headmin/_dropdown.html.erb +1 -1
  160. data/app/views/headmin/_filters.html.erb +20 -8
  161. data/app/views/headmin/_form.html.erb +14 -14
  162. data/app/views/headmin/_heading.html.erb +1 -1
  163. data/app/views/headmin/_notifications.html.erb +1 -1
  164. data/app/views/headmin/_pagination.html.erb +1 -1
  165. data/app/views/headmin/_popup.html.erb +10 -4
  166. data/app/views/headmin/_table.html.erb +2 -2
  167. data/app/views/headmin/_thumbnail.html.erb +47 -0
  168. data/app/views/headmin/dropdown/_devise.html.erb +2 -2
  169. data/app/views/headmin/dropdown/_item.html.erb +1 -1
  170. data/app/views/headmin/dropdown/_list.html.erb +3 -6
  171. data/app/views/headmin/filters/_date.html.erb +4 -10
  172. data/app/views/headmin/filters/_flatpickr.html.erb +5 -5
  173. data/app/views/headmin/filters/_search.html.erb +5 -5
  174. data/app/views/headmin/filters/_select.html.erb +6 -6
  175. data/app/views/headmin/filters/filter/_button.html.erb +7 -7
  176. data/app/views/headmin/filters/filter/_template.html.erb +1 -1
  177. data/app/views/headmin/forms/_actions.html.erb +1 -1
  178. data/app/views/headmin/forms/_base.html.erb +98 -45
  179. data/app/views/headmin/forms/_blocks.html.erb +4 -4
  180. data/app/views/headmin/forms/_checkbox.html.erb +4 -4
  181. data/app/views/headmin/forms/_date.html.erb +29 -45
  182. data/app/views/headmin/forms/_date_range.html.erb +24 -66
  183. data/app/views/headmin/forms/_email.html.erb +35 -26
  184. data/app/views/headmin/forms/_file.html.erb +186 -34
  185. data/app/views/headmin/forms/_flatpickr.html.erb +18 -39
  186. data/app/views/headmin/forms/_flatpickr_range.html.erb +34 -45
  187. data/app/views/headmin/forms/_hidden.html.erb +13 -12
  188. data/app/views/headmin/forms/_image.html.erb +11 -45
  189. data/app/views/headmin/forms/_label.html.erb +18 -14
  190. data/app/views/headmin/forms/_number.html.erb +40 -37
  191. data/app/views/headmin/forms/_password.html.erb +37 -58
  192. data/app/views/headmin/forms/_redactorx.html.erb +8 -7
  193. data/app/views/headmin/forms/_repeater.html.erb +7 -7
  194. data/app/views/headmin/forms/_select.html.erb +43 -48
  195. data/app/views/headmin/forms/_text.html.erb +95 -58
  196. data/app/views/headmin/forms/_textarea.html.erb +37 -26
  197. data/app/views/headmin/forms/_url.html.erb +35 -26
  198. data/app/views/headmin/forms/_validation.html.erb +3 -3
  199. data/app/views/headmin/forms/_video.html.erb +21 -0
  200. data/app/views/headmin/forms/actions/_destroy.html.erb +3 -3
  201. data/app/views/headmin/forms/fields/_base.html.erb +3 -3
  202. data/app/views/headmin/forms/fields/_file.html.erb +2 -2
  203. data/app/views/headmin/forms/fields/_group.html.erb +4 -4
  204. data/app/views/headmin/forms/fields/_image.html.erb +2 -2
  205. data/app/views/headmin/forms/fields/_list.html.erb +3 -3
  206. data/app/views/headmin/forms/fields/_text.html.erb +2 -2
  207. data/app/views/headmin/forms/repeater/_row.html.erb +1 -1
  208. data/app/views/headmin/heading/_title.html.erb +1 -1
  209. data/app/views/headmin/layout/_body.html.erb +1 -1
  210. data/app/views/headmin/layout/_content.html.erb +1 -1
  211. data/app/views/headmin/layout/_footer.html.erb +1 -1
  212. data/app/views/headmin/layout/_header.html.erb +1 -1
  213. data/app/views/headmin/layout/_main.html.erb +1 -1
  214. data/app/views/headmin/layout/_sidebar.html.erb +3 -3
  215. data/app/views/headmin/layout/sidebar/_bottom.html.erb +1 -1
  216. data/app/views/headmin/layout/sidebar/_nav.html.erb +1 -1
  217. data/app/views/headmin/nav/_dropdown.html.erb +34 -0
  218. data/app/views/headmin/nav/_item.html.erb +22 -13
  219. data/app/views/headmin/nav/item/_devise.html.erb +1 -1
  220. data/app/views/headmin/table/_actions.html.erb +2 -2
  221. data/app/views/headmin/table/_body.html.erb +1 -1
  222. data/app/views/headmin/table/_foot.html.erb +1 -1
  223. data/app/views/headmin/table/_footer.html.erb +1 -1
  224. data/app/views/headmin/table/_head.html.erb +1 -1
  225. data/app/views/headmin/table/_header.html.erb +1 -1
  226. data/app/views/headmin/table/actions/_action.html.erb +6 -5
  227. data/app/views/headmin/table/actions/_delete.html.erb +2 -2
  228. data/app/views/headmin/table/actions/_export.html.erb +1 -1
  229. data/app/views/headmin/table/body/_row.html.erb +2 -2
  230. data/app/views/headmin/views/devise/registrations/_edit.html.erb +2 -2
  231. data/config/importmap.rb +2 -0
  232. data/config/initializers/customize_input_error.rb +4 -4
  233. data/config/locales/en.yml +0 -3
  234. data/config/locales/headmin/forms/en.yml +5 -0
  235. data/config/locales/headmin/forms/nl.yml +5 -0
  236. data/config/locales/headmin/popup/en.yml +4 -0
  237. data/config/locales/headmin/popup/nl.yml +4 -0
  238. data/config/locales/headmin/thumbnail/en.yml +4 -0
  239. data/config/locales/headmin/thumbnail/nl.yml +4 -0
  240. data/config/locales/nl.yml +0 -3
  241. data/esbuild-css.js +25 -0
  242. data/esbuild-js.js +11 -0
  243. data/headmin.gemspec +4 -1
  244. data/lib/generators/headmin/blocks_generator.rb +8 -8
  245. data/lib/generators/headmin/devise_generator.rb +4 -4
  246. data/lib/generators/headmin/fields_generator.rb +9 -9
  247. data/lib/generators/templates/controllers/auth/confirmations_controller.rb +1 -1
  248. data/lib/generators/templates/controllers/auth/omniauth_callbacks_controller.rb +1 -1
  249. data/lib/generators/templates/controllers/auth/passwords_controller.rb +1 -1
  250. data/lib/generators/templates/controllers/auth/registrations_controller.rb +1 -1
  251. data/lib/generators/templates/controllers/auth/sessions_controller.rb +1 -1
  252. data/lib/generators/templates/controllers/auth/unlocks_controller.rb +1 -1
  253. data/lib/generators/templates/models/block.rb +1 -1
  254. data/lib/headmin/engine.rb +18 -3
  255. data/lib/headmin/version.rb +1 -1
  256. data/lib/headmin.rb +1 -1
  257. data/package.json +16 -34
  258. data/src/js/headmin.js +1 -1
  259. data/src/scss/headmin.scss +1 -61
  260. data/yarn-error.log +362 -0
  261. data/yarn.lock +234 -5275
  262. metadata +194 -38
  263. data/.nvmrc +0 -1
  264. data/.rubocop.yml +0 -13
  265. data/app/controllers/concerns/headmin/ckeditor.rb +0 -27
  266. data/app/views/headmin/forms/_ckeditor.html.erb +0 -42
  267. data/dist/css/headmin.css +0 -12357
  268. data/dist/js/headmin.js +0 -1115
  269. data/src/js/headmin/headmin.js +0 -158
  270. data/src/scss/headmin/utilities.scss +0 -19
  271. data/webpack.config.js +0 -30
@@ -0,0 +1,133 @@
1
+ // Button variants
2
+ //
3
+ // Easily pump out default styles, as well as :hover, :focus, :active,
4
+ // and disabled options for all buttons
5
+
6
+ // scss-docs-start btn-variant-mixin
7
+ @mixin button-variant(
8
+ $background,
9
+ $border,
10
+ $color: color-contrast($background),
11
+ $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
12
+ $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
13
+ $hover-color: color-contrast($hover-background),
14
+ $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
15
+ $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
16
+ $active-color: color-contrast($active-background),
17
+ $disabled-background: $background,
18
+ $disabled-border: $border,
19
+ $disabled-color: color-contrast($disabled-background)
20
+ ) {
21
+ color: $color;
22
+ @include gradient-bg($background);
23
+ border-color: $border;
24
+ @include box-shadow($btn-box-shadow);
25
+
26
+ &:hover {
27
+ color: $hover-color;
28
+ @include gradient-bg($hover-background);
29
+ border-color: $hover-border;
30
+ }
31
+
32
+ .btn-check:focus + &,
33
+ &:focus {
34
+ color: $hover-color;
35
+ @include gradient-bg($hover-background);
36
+ border-color: $hover-border;
37
+ @if $enable-shadows {
38
+ @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
39
+ } @else {
40
+ // Avoid using mixin so we can pass custom focus shadow properly
41
+ box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
42
+ }
43
+ }
44
+
45
+ .btn-check:checked + &,
46
+ .btn-check:active + &,
47
+ &:active,
48
+ &.active,
49
+ .show > &.dropdown-toggle {
50
+ color: $active-color;
51
+ background-color: $active-background;
52
+ // Remove CSS gradients if they're enabled
53
+ background-image: if($enable-gradients, none, null);
54
+ border-color: $active-border;
55
+
56
+ &:focus {
57
+ @if $enable-shadows {
58
+ @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
59
+ } @else {
60
+ // Avoid using mixin so we can pass custom focus shadow properly
61
+ box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
62
+ }
63
+ }
64
+ }
65
+
66
+ &:disabled,
67
+ &.disabled {
68
+ color: $disabled-color;
69
+ background-color: $disabled-background;
70
+ // Remove CSS gradients if they're enabled
71
+ background-image: if($enable-gradients, none, null);
72
+ border-color: $disabled-border;
73
+ }
74
+ }
75
+ // scss-docs-end btn-variant-mixin
76
+
77
+ // scss-docs-start btn-outline-variant-mixin
78
+ @mixin button-outline-variant(
79
+ $color,
80
+ $color-hover: color-contrast($color),
81
+ $active-background: $color,
82
+ $active-border: $color,
83
+ $active-color: color-contrast($active-background)
84
+ ) {
85
+ color: $color;
86
+ border-color: $color;
87
+
88
+ &:hover {
89
+ color: $color-hover;
90
+ background-color: $active-background;
91
+ border-color: $active-border;
92
+ }
93
+
94
+ .btn-check:focus + &,
95
+ &:focus {
96
+ box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
97
+ }
98
+
99
+ .btn-check:checked + &,
100
+ .btn-check:active + &,
101
+ &:active,
102
+ &.active,
103
+ &.dropdown-toggle.show {
104
+ color: $active-color;
105
+ background-color: $active-background;
106
+ border-color: $active-border;
107
+
108
+ &:focus {
109
+ @if $enable-shadows {
110
+ @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
111
+ } @else {
112
+ // Avoid using mixin so we can pass custom focus shadow properly
113
+ box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
114
+ }
115
+ }
116
+ }
117
+
118
+ &:disabled,
119
+ &.disabled {
120
+ color: $color;
121
+ background-color: transparent;
122
+ }
123
+ }
124
+ // scss-docs-end btn-outline-variant-mixin
125
+
126
+ // scss-docs-start btn-size-mixin
127
+ @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
128
+ padding: $padding-y $padding-x;
129
+ @include font-size($font-size);
130
+ // Manually declare to provide an override to the browser default
131
+ @include border-radius($border-radius, 0);
132
+ }
133
+ // scss-docs-end btn-size-mixin
@@ -0,0 +1,64 @@
1
+ // scss-docs-start caret-mixins
2
+ @mixin caret-down {
3
+ border-top: $caret-width solid;
4
+ border-right: $caret-width solid transparent;
5
+ border-bottom: 0;
6
+ border-left: $caret-width solid transparent;
7
+ }
8
+
9
+ @mixin caret-up {
10
+ border-top: 0;
11
+ border-right: $caret-width solid transparent;
12
+ border-bottom: $caret-width solid;
13
+ border-left: $caret-width solid transparent;
14
+ }
15
+
16
+ @mixin caret-end {
17
+ border-top: $caret-width solid transparent;
18
+ border-right: 0;
19
+ border-bottom: $caret-width solid transparent;
20
+ border-left: $caret-width solid;
21
+ }
22
+
23
+ @mixin caret-start {
24
+ border-top: $caret-width solid transparent;
25
+ border-right: $caret-width solid;
26
+ border-bottom: $caret-width solid transparent;
27
+ }
28
+
29
+ @mixin caret($direction: down) {
30
+ @if $enable-caret {
31
+ &::after {
32
+ display: inline-block;
33
+ margin-left: $caret-spacing;
34
+ vertical-align: $caret-vertical-align;
35
+ content: "";
36
+ @if $direction == down {
37
+ @include caret-down();
38
+ } @else if $direction == up {
39
+ @include caret-up();
40
+ } @else if $direction == end {
41
+ @include caret-end();
42
+ }
43
+ }
44
+
45
+ @if $direction == start {
46
+ &::after {
47
+ display: none;
48
+ }
49
+
50
+ &::before {
51
+ display: inline-block;
52
+ margin-right: $caret-spacing;
53
+ vertical-align: $caret-vertical-align;
54
+ content: "";
55
+ @include caret-start();
56
+ }
57
+ }
58
+
59
+ &:empty::after {
60
+ margin-left: 0;
61
+ }
62
+ }
63
+ }
64
+ // scss-docs-end caret-mixins
@@ -0,0 +1,9 @@
1
+ // scss-docs-start clearfix
2
+ @mixin clearfix() {
3
+ &::after {
4
+ display: block;
5
+ clear: both;
6
+ content: "";
7
+ }
8
+ }
9
+ // scss-docs-end clearfix
@@ -0,0 +1,7 @@
1
+ // scss-docs-start mixin-color-scheme
2
+ @mixin color-scheme($name) {
3
+ @media (prefers-color-scheme: #{$name}) {
4
+ @content;
5
+ }
6
+ }
7
+ // scss-docs-end mixin-color-scheme
@@ -0,0 +1,9 @@
1
+ // Container mixins
2
+
3
+ @mixin make-container($gutter: $container-padding-x) {
4
+ width: 100%;
5
+ padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter});
6
+ padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter});
7
+ margin-right: auto;
8
+ margin-left: auto;
9
+ }
@@ -0,0 +1,10 @@
1
+ // Deprecate mixin
2
+ //
3
+ // This mixin can be used to deprecate mixins or functions.
4
+ // `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
5
+ // some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
6
+ @mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {
7
+ @if ($enable-deprecation-messages != false and $ignore-warning != true) {
8
+ @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.";
9
+ }
10
+ }
@@ -0,0 +1,144 @@
1
+ // This mixin uses an `if()` technique to be compatible with Dart Sass
2
+ // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
3
+
4
+ // scss-docs-start form-validation-mixins
5
+ @mixin form-validation-state-selector($state) {
6
+ @if ($state == "valid" or $state == "invalid") {
7
+ .was-validated #{if(&, "&", "")}:#{$state},
8
+ #{if(&, "&", "")}.is-#{$state} {
9
+ @content;
10
+ }
11
+ } @else {
12
+ #{if(&, "&", "")}.is-#{$state} {
13
+ @content;
14
+ }
15
+ }
16
+ }
17
+
18
+ @mixin form-validation-state(
19
+ $state,
20
+ $color,
21
+ $icon,
22
+ $tooltip-color: color-contrast($color),
23
+ $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
24
+ $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
25
+ ) {
26
+ .#{$state}-feedback {
27
+ display: none;
28
+ width: 100%;
29
+ margin-top: $form-feedback-margin-top;
30
+ @include font-size($form-feedback-font-size);
31
+ font-style: $form-feedback-font-style;
32
+ color: $color;
33
+ }
34
+
35
+ .#{$state}-tooltip {
36
+ position: absolute;
37
+ top: 100%;
38
+ z-index: 5;
39
+ display: none;
40
+ max-width: 100%; // Contain to parent when possible
41
+ padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
42
+ margin-top: .1rem;
43
+ @include font-size($form-feedback-tooltip-font-size);
44
+ line-height: $form-feedback-tooltip-line-height;
45
+ color: $tooltip-color;
46
+ background-color: $tooltip-bg-color;
47
+ @include border-radius($form-feedback-tooltip-border-radius);
48
+ }
49
+
50
+ @include form-validation-state-selector($state) {
51
+ ~ .#{$state}-feedback,
52
+ ~ .#{$state}-tooltip {
53
+ display: block;
54
+ }
55
+ }
56
+
57
+ .form-control {
58
+ @include form-validation-state-selector($state) {
59
+ border-color: $color;
60
+
61
+ @if $enable-validation-icons {
62
+ padding-right: $input-height-inner;
63
+ background-image: escape-svg($icon);
64
+ background-repeat: no-repeat;
65
+ background-position: right $input-height-inner-quarter center;
66
+ background-size: $input-height-inner-half $input-height-inner-half;
67
+ }
68
+
69
+ &:focus {
70
+ border-color: $color;
71
+ box-shadow: $focus-box-shadow;
72
+ }
73
+ }
74
+ }
75
+
76
+ // stylelint-disable-next-line selector-no-qualifying-type
77
+ textarea.form-control {
78
+ @include form-validation-state-selector($state) {
79
+ @if $enable-validation-icons {
80
+ padding-right: $input-height-inner;
81
+ background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
82
+ }
83
+ }
84
+ }
85
+
86
+ .form-select {
87
+ @include form-validation-state-selector($state) {
88
+ border-color: $color;
89
+
90
+ @if $enable-validation-icons {
91
+ &:not([multiple]):not([size]),
92
+ &:not([multiple])[size="1"] {
93
+ padding-right: $form-select-feedback-icon-padding-end;
94
+ background-image: escape-svg($form-select-indicator), escape-svg($icon);
95
+ background-position: $form-select-bg-position, $form-select-feedback-icon-position;
96
+ background-size: $form-select-bg-size, $form-select-feedback-icon-size;
97
+ }
98
+ }
99
+
100
+ &:focus {
101
+ border-color: $color;
102
+ box-shadow: $focus-box-shadow;
103
+ }
104
+ }
105
+ }
106
+
107
+ .form-check-input {
108
+ @include form-validation-state-selector($state) {
109
+ border-color: $color;
110
+
111
+ &:checked {
112
+ background-color: $color;
113
+ }
114
+
115
+ &:focus {
116
+ box-shadow: $focus-box-shadow;
117
+ }
118
+
119
+ ~ .form-check-label {
120
+ color: $color;
121
+ }
122
+ }
123
+ }
124
+ .form-check-inline .form-check-input {
125
+ ~ .#{$state}-feedback {
126
+ margin-left: .5em;
127
+ }
128
+ }
129
+
130
+ .input-group .form-control,
131
+ .input-group .form-select {
132
+ @include form-validation-state-selector($state) {
133
+ @if $state == "valid" {
134
+ z-index: 1;
135
+ } @else if $state == "invalid" {
136
+ z-index: 2;
137
+ }
138
+ &:focus {
139
+ z-index: 3;
140
+ }
141
+ }
142
+ }
143
+ }
144
+ // scss-docs-end form-validation-mixins
@@ -0,0 +1,47 @@
1
+ // Gradients
2
+
3
+ // scss-docs-start gradient-bg-mixin
4
+ @mixin gradient-bg($color: null) {
5
+ background-color: $color;
6
+
7
+ @if $enable-gradients {
8
+ background-image: var(--#{$variable-prefix}gradient);
9
+ }
10
+ }
11
+ // scss-docs-end gradient-bg-mixin
12
+
13
+ // scss-docs-start gradient-mixins
14
+ // Horizontal gradient, from left to right
15
+ //
16
+ // Creates two color stops, start and end, by specifying a color and position for each color stop.
17
+ @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
18
+ background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
19
+ }
20
+
21
+ // Vertical gradient, from top to bottom
22
+ //
23
+ // Creates two color stops, start and end, by specifying a color and position for each color stop.
24
+ @mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
25
+ background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
26
+ }
27
+
28
+ @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
29
+ background-image: linear-gradient($deg, $start-color, $end-color);
30
+ }
31
+
32
+ @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
33
+ background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
34
+ }
35
+
36
+ @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
37
+ background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
38
+ }
39
+
40
+ @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
41
+ background-image: radial-gradient(circle, $inner-color, $outer-color);
42
+ }
43
+
44
+ @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
45
+ background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
46
+ }
47
+ // scss-docs-end gradient-mixins
@@ -0,0 +1,151 @@
1
+ // Grid system
2
+ //
3
+ // Generate semantic grid columns with these mixins.
4
+
5
+ @mixin make-row($gutter: $grid-gutter-width) {
6
+ --#{$variable-prefix}gutter-x: #{$gutter};
7
+ --#{$variable-prefix}gutter-y: 0;
8
+ display: flex;
9
+ flex-wrap: wrap;
10
+ // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
11
+ margin-top: calc(-1 * var(--#{$variable-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
12
+ margin-right: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
13
+ margin-left: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
14
+ }
15
+
16
+ @mixin make-col-ready($gutter: $grid-gutter-width) {
17
+ // Add box sizing if only the grid is loaded
18
+ box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
19
+ // Prevent columns from becoming too narrow when at smaller grid tiers by
20
+ // always setting `width: 100%;`. This works because we set the width
21
+ // later on to override this initial width.
22
+ flex-shrink: 0;
23
+ width: 100%;
24
+ max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
25
+ padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
26
+ padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
27
+ margin-top: var(--#{$variable-prefix}gutter-y);
28
+ }
29
+
30
+ @mixin make-col($size: false, $columns: $grid-columns) {
31
+ @if $size {
32
+ flex: 0 0 auto;
33
+ width: percentage(divide($size, $columns));
34
+
35
+ } @else {
36
+ flex: 1 1 0;
37
+ max-width: 100%;
38
+ }
39
+ }
40
+
41
+ @mixin make-col-auto() {
42
+ flex: 0 0 auto;
43
+ width: auto;
44
+ }
45
+
46
+ @mixin make-col-offset($size, $columns: $grid-columns) {
47
+ $num: divide($size, $columns);
48
+ margin-left: if($num == 0, 0, percentage($num));
49
+ }
50
+
51
+ // Row columns
52
+ //
53
+ // Specify on a parent element(e.g., .row) to force immediate children into NN
54
+ // numberof columns. Supports wrapping to new lines, but does not do a Masonry
55
+ // style grid.
56
+ @mixin row-cols($count) {
57
+ > * {
58
+ flex: 0 0 auto;
59
+ width: divide(100%, $count);
60
+ }
61
+ }
62
+
63
+ // Framework grid generation
64
+ //
65
+ // Used only by Bootstrap to generate the correct number of grid classes given
66
+ // any value of `$grid-columns`.
67
+
68
+ @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
69
+ @each $breakpoint in map-keys($breakpoints) {
70
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
71
+
72
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
73
+ // Provide basic `.col-{bp}` classes for equal-width flexbox columns
74
+ .col#{$infix} {
75
+ flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
76
+ }
77
+
78
+ .row-cols#{$infix}-auto > * {
79
+ @include make-col-auto();
80
+ }
81
+
82
+ @if $grid-row-columns > 0 {
83
+ @for $i from 1 through $grid-row-columns {
84
+ .row-cols#{$infix}-#{$i} {
85
+ @include row-cols($i);
86
+ }
87
+ }
88
+ }
89
+
90
+ .col#{$infix}-auto {
91
+ @include make-col-auto();
92
+ }
93
+
94
+ @if $columns > 0 {
95
+ @for $i from 1 through $columns {
96
+ .col#{$infix}-#{$i} {
97
+ @include make-col($i, $columns);
98
+ }
99
+ }
100
+
101
+ // `$columns - 1` because offsetting by the width of an entire row isn't possible
102
+ @for $i from 0 through ($columns - 1) {
103
+ @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
104
+ .offset#{$infix}-#{$i} {
105
+ @include make-col-offset($i, $columns);
106
+ }
107
+ }
108
+ }
109
+ }
110
+
111
+ // Gutters
112
+ //
113
+ // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
114
+ @each $key, $value in $gutters {
115
+ .g#{$infix}-#{$key},
116
+ .gx#{$infix}-#{$key} {
117
+ --#{$variable-prefix}gutter-x: #{$value};
118
+ }
119
+
120
+ .g#{$infix}-#{$key},
121
+ .gy#{$infix}-#{$key} {
122
+ --#{$variable-prefix}gutter-y: #{$value};
123
+ }
124
+ }
125
+ }
126
+ }
127
+ }
128
+
129
+ @mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
130
+ @each $breakpoint in map-keys($breakpoints) {
131
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
132
+
133
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
134
+ @if $columns > 0 {
135
+ @for $i from 1 through $columns {
136
+ .g-col#{$infix}-#{$i} {
137
+ grid-column: auto / span $i;
138
+ }
139
+ }
140
+
141
+ // Start with `1` because `0` is and invalid value.
142
+ // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
143
+ @for $i from 1 through ($columns - 1) {
144
+ .g-start#{$infix}-#{$i} {
145
+ grid-column-start: $i;
146
+ }
147
+ }
148
+ }
149
+ }
150
+ }
151
+ }
@@ -0,0 +1,16 @@
1
+ // Image Mixins
2
+ // - Responsive image
3
+ // - Retina image
4
+
5
+
6
+ // Responsive image
7
+ //
8
+ // Keep images from scaling beyond the width of their parents.
9
+
10
+ @mixin img-fluid {
11
+ // Part 1: Set a maximum relative to the parent
12
+ max-width: 100%;
13
+ // Part 2: Override the height to auto, otherwise images will be stretched
14
+ // when setting a width and height attribute on the img element.
15
+ height: auto;
16
+ }
@@ -0,0 +1,24 @@
1
+ // List Groups
2
+
3
+ // scss-docs-start list-group-mixin
4
+ @mixin list-group-item-variant($state, $background, $color) {
5
+ .list-group-item-#{$state} {
6
+ color: $color;
7
+ background-color: $background;
8
+
9
+ &.list-group-item-action {
10
+ &:hover,
11
+ &:focus {
12
+ color: $color;
13
+ background-color: shade-color($background, 10%);
14
+ }
15
+
16
+ &.active {
17
+ color: $white;
18
+ background-color: $color;
19
+ border-color: $color;
20
+ }
21
+ }
22
+ }
23
+ }
24
+ // scss-docs-end list-group-mixin
@@ -0,0 +1,7 @@
1
+ // Lists
2
+
3
+ // Unstyled keeps list items block level, just removes default browser padding and list-style
4
+ @mixin list-unstyled {
5
+ padding-left: 0;
6
+ list-style: none;
7
+ }
@@ -0,0 +1,31 @@
1
+ // Pagination
2
+
3
+ // scss-docs-start pagination-mixin
4
+ @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
5
+ .page-link {
6
+ padding: $padding-y $padding-x;
7
+ @include font-size($font-size);
8
+ }
9
+
10
+ .page-item {
11
+ @if $pagination-margin-start == (-$pagination-border-width) {
12
+ &:first-child {
13
+ .page-link {
14
+ @include border-start-radius($border-radius);
15
+ }
16
+ }
17
+
18
+ &:last-child {
19
+ .page-link {
20
+ @include border-end-radius($border-radius);
21
+ }
22
+ }
23
+ } @else {
24
+ //Add border-radius to all pageLinks in case they have left margin
25
+ .page-link {
26
+ @include border-radius($border-radius);
27
+ }
28
+ }
29
+ }
30
+ }
31
+ // scss-docs-end pagination-mixin
@@ -0,0 +1,17 @@
1
+ @mixin reset-text {
2
+ font-family: $font-family-base;
3
+ // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
4
+ font-style: normal;
5
+ font-weight: $font-weight-normal;
6
+ line-height: $line-height-base;
7
+ text-align: left; // Fallback for where `start` is not supported
8
+ text-align: start;
9
+ text-decoration: none;
10
+ text-shadow: none;
11
+ text-transform: none;
12
+ letter-spacing: normal;
13
+ word-break: normal;
14
+ word-spacing: normal;
15
+ white-space: normal;
16
+ line-break: auto;
17
+ }
@@ -0,0 +1,6 @@
1
+ // Resize anything
2
+
3
+ @mixin resizable($direction) {
4
+ overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
5
+ resize: $direction; // Options: horizontal, vertical, both
6
+ }