headmin 0.2.7 → 0.3.3

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 (270) 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 +64 -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/app/assets/javascripts/headmin/controllers/date_range_controller.js +32 -0
  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/app/assets/javascripts/headmin/controllers/flatpickr_controller.js +39 -0
  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 -1
  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 +9 -39
  28. data/{src/js → app/assets/javascripts}/headmin/controllers/table_controller.js +51 -16
  29. data/app/assets/javascripts/headmin/index.js +37 -0
  30. data/app/assets/javascripts/headmin.js +15271 -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 +57 -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 +10 -6
  159. data/app/views/headmin/_dropdown.html.erb +1 -1
  160. data/app/views/headmin/_filters.html.erb +22 -10
  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 +3 -5
  165. data/app/views/headmin/_popup.html.erb +10 -4
  166. data/app/views/headmin/_table.html.erb +10 -4
  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 +9 -13
  172. data/app/views/headmin/filters/_flatpickr.html.erb +57 -0
  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 +100 -46
  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 +30 -34
  182. data/app/views/headmin/forms/_date_range.html.erb +42 -0
  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 +34 -0
  186. data/app/views/headmin/forms/_flatpickr_range.html.erb +50 -0
  187. data/app/views/headmin/forms/_hidden.html.erb +24 -0
  188. data/app/views/headmin/forms/_image.html.erb +11 -45
  189. data/app/views/headmin/forms/_label.html.erb +18 -12
  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 -45
  195. data/app/views/headmin/forms/_text.html.erb +94 -59
  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 +12 -6
  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 +3 -5
  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 +4 -4
  227. data/app/views/headmin/table/actions/_delete.html.erb +1 -1
  228. data/app/views/headmin/table/actions/_export.html.erb +1 -1
  229. data/app/views/headmin/table/body/_row.html.erb +15 -7
  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 +17 -34
  258. data/src/js/headmin.js +1 -1
  259. data/src/scss/headmin.scss +1 -61
  260. data/yarn.lock +234 -5275
  261. metadata +198 -36
  262. data/.nvmrc +0 -1
  263. data/.rubocop.yml +0 -13
  264. data/app/controllers/concerns/headmin/ckeditor.rb +0 -27
  265. data/app/views/headmin/forms/_ckeditor.html.erb +0 -42
  266. data/dist/css/headmin.css +0 -12354
  267. data/dist/js/headmin.js +0 -1080
  268. data/src/js/headmin/headmin.js +0 -141
  269. data/src/scss/headmin/utilities.scss +0 -19
  270. data/webpack.config.js +0 -30
@@ -0,0 +1,209 @@
1
+ // .modal-open - body class for killing the scroll
2
+ // .modal - container to scroll within
3
+ // .modal-dialog - positioning shell for the actual modal
4
+ // .modal-content - actual modal w/ bg and corners and stuff
5
+
6
+
7
+ // Container that the modal scrolls within
8
+ .modal {
9
+ position: fixed;
10
+ top: 0;
11
+ left: 0;
12
+ z-index: $zindex-modal;
13
+ display: none;
14
+ width: 100%;
15
+ height: 100%;
16
+ overflow-x: hidden;
17
+ overflow-y: auto;
18
+ // Prevent Chrome on Windows from adding a focus outline. For details, see
19
+ // https://github.com/twbs/bootstrap/pull/10951.
20
+ outline: 0;
21
+ // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
22
+ // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
23
+ // See also https://github.com/twbs/bootstrap/issues/17695
24
+ }
25
+
26
+ // Shell div to position the modal with bottom padding
27
+ .modal-dialog {
28
+ position: relative;
29
+ width: auto;
30
+ margin: $modal-dialog-margin;
31
+ // allow clicks to pass through for custom click handling to close modal
32
+ pointer-events: none;
33
+
34
+ // When fading in the modal, animate it to slide down
35
+ .modal.fade & {
36
+ @include transition($modal-transition);
37
+ transform: $modal-fade-transform;
38
+ }
39
+ .modal.show & {
40
+ transform: $modal-show-transform;
41
+ }
42
+
43
+ // When trying to close, animate focus to scale
44
+ .modal.modal-static & {
45
+ transform: $modal-scale-transform;
46
+ }
47
+ }
48
+
49
+ .modal-dialog-scrollable {
50
+ height: subtract(100%, $modal-dialog-margin * 2);
51
+
52
+ .modal-content {
53
+ max-height: 100%;
54
+ overflow: hidden;
55
+ }
56
+
57
+ .modal-body {
58
+ overflow-y: auto;
59
+ }
60
+ }
61
+
62
+ .modal-dialog-centered {
63
+ display: flex;
64
+ align-items: center;
65
+ min-height: subtract(100%, $modal-dialog-margin * 2);
66
+ }
67
+
68
+ // Actual modal
69
+ .modal-content {
70
+ position: relative;
71
+ display: flex;
72
+ flex-direction: column;
73
+ width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
74
+ // counteract the pointer-events: none; in the .modal-dialog
75
+ color: $modal-content-color;
76
+ pointer-events: auto;
77
+ background-color: $modal-content-bg;
78
+ background-clip: padding-box;
79
+ border: $modal-content-border-width solid $modal-content-border-color;
80
+ @include border-radius($modal-content-border-radius);
81
+ @include box-shadow($modal-content-box-shadow-xs);
82
+ // Remove focus outline from opened modal
83
+ outline: 0;
84
+ }
85
+
86
+ // Modal background
87
+ .modal-backdrop {
88
+ @include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $modal-backdrop-opacity);
89
+ }
90
+
91
+ // Modal header
92
+ // Top section of the modal w/ title and dismiss
93
+ .modal-header {
94
+ display: flex;
95
+ flex-shrink: 0;
96
+ align-items: center;
97
+ justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
98
+ padding: $modal-header-padding;
99
+ border-bottom: $modal-header-border-width solid $modal-header-border-color;
100
+ @include border-top-radius($modal-content-inner-border-radius);
101
+
102
+ .btn-close {
103
+ padding: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5);
104
+ margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto;
105
+ }
106
+ }
107
+
108
+ // Title text within header
109
+ .modal-title {
110
+ margin-bottom: 0;
111
+ line-height: $modal-title-line-height;
112
+ }
113
+
114
+ // Modal body
115
+ // Where all modal content resides (sibling of .modal-header and .modal-footer)
116
+ .modal-body {
117
+ position: relative;
118
+ // Enable `flex-grow: 1` so that the body take up as much space as possible
119
+ // when there should be a fixed height on `.modal-dialog`.
120
+ flex: 1 1 auto;
121
+ padding: $modal-inner-padding;
122
+ }
123
+
124
+ // Footer (for actions)
125
+ .modal-footer {
126
+ display: flex;
127
+ flex-wrap: wrap;
128
+ flex-shrink: 0;
129
+ align-items: center; // vertically center
130
+ justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
131
+ padding: $modal-inner-padding - $modal-footer-margin-between * .5;
132
+ border-top: $modal-footer-border-width solid $modal-footer-border-color;
133
+ @include border-bottom-radius($modal-content-inner-border-radius);
134
+
135
+ // Place margin between footer elements
136
+ // This solution is far from ideal because of the universal selector usage,
137
+ // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
138
+ > * {
139
+ margin: $modal-footer-margin-between * .5;
140
+ }
141
+ }
142
+
143
+ // Scale up the modal
144
+ @include media-breakpoint-up(sm) {
145
+ // Automatically set modal's width for larger viewports
146
+ .modal-dialog {
147
+ max-width: $modal-md;
148
+ margin: $modal-dialog-margin-y-sm-up auto;
149
+ }
150
+
151
+ .modal-dialog-scrollable {
152
+ height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
153
+ }
154
+
155
+ .modal-dialog-centered {
156
+ min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
157
+ }
158
+
159
+ .modal-content {
160
+ @include box-shadow($modal-content-box-shadow-sm-up);
161
+ }
162
+
163
+ .modal-sm { max-width: $modal-sm; }
164
+ }
165
+
166
+ @include media-breakpoint-up(lg) {
167
+ .modal-lg,
168
+ .modal-xl {
169
+ max-width: $modal-lg;
170
+ }
171
+ }
172
+
173
+ @include media-breakpoint-up(xl) {
174
+ .modal-xl { max-width: $modal-xl; }
175
+ }
176
+
177
+ // scss-docs-start modal-fullscreen-loop
178
+ @each $breakpoint in map-keys($grid-breakpoints) {
179
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
180
+ $postfix: if($infix != "", $infix + "-down", "");
181
+
182
+ @include media-breakpoint-down($breakpoint) {
183
+ .modal-fullscreen#{$postfix} {
184
+ width: 100vw;
185
+ max-width: none;
186
+ height: 100%;
187
+ margin: 0;
188
+
189
+ .modal-content {
190
+ height: 100%;
191
+ border: 0;
192
+ @include border-radius(0);
193
+ }
194
+
195
+ .modal-header {
196
+ @include border-radius(0);
197
+ }
198
+
199
+ .modal-body {
200
+ overflow-y: auto;
201
+ }
202
+
203
+ .modal-footer {
204
+ @include border-radius(0);
205
+ }
206
+ }
207
+ }
208
+ }
209
+ // scss-docs-end modal-fullscreen-loop
@@ -0,0 +1,139 @@
1
+ // Base class
2
+ //
3
+ // Kickstart any navigation component with a set of style resets. Works with
4
+ // `<nav>`s, `<ul>`s or `<ol>`s.
5
+
6
+ .nav {
7
+ display: flex;
8
+ flex-wrap: wrap;
9
+ padding-left: 0;
10
+ margin-bottom: 0;
11
+ list-style: none;
12
+ }
13
+
14
+ .nav-link {
15
+ display: block;
16
+ padding: $nav-link-padding-y $nav-link-padding-x;
17
+ @include font-size($nav-link-font-size);
18
+ font-weight: $nav-link-font-weight;
19
+ color: $nav-link-color;
20
+ text-decoration: if($link-decoration == none, null, none);
21
+ @include transition($nav-link-transition);
22
+
23
+ &:hover,
24
+ &:focus {
25
+ color: $nav-link-hover-color;
26
+ text-decoration: if($link-hover-decoration == underline, none, null);
27
+ }
28
+
29
+ // Disabled state lightens text
30
+ &.disabled {
31
+ color: $nav-link-disabled-color;
32
+ pointer-events: none;
33
+ cursor: default;
34
+ }
35
+ }
36
+
37
+ //
38
+ // Tabs
39
+ //
40
+
41
+ .nav-tabs {
42
+ border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
43
+
44
+ .nav-link {
45
+ margin-bottom: -$nav-tabs-border-width;
46
+ background: none;
47
+ border: $nav-tabs-border-width solid transparent;
48
+ @include border-top-radius($nav-tabs-border-radius);
49
+
50
+ &:hover,
51
+ &:focus {
52
+ border-color: $nav-tabs-link-hover-border-color;
53
+ // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
54
+ isolation: isolate;
55
+ }
56
+
57
+ &.disabled {
58
+ color: $nav-link-disabled-color;
59
+ background-color: transparent;
60
+ border-color: transparent;
61
+ }
62
+ }
63
+
64
+ .nav-link.active,
65
+ .nav-item.show .nav-link {
66
+ color: $nav-tabs-link-active-color;
67
+ background-color: $nav-tabs-link-active-bg;
68
+ border-color: $nav-tabs-link-active-border-color;
69
+ }
70
+
71
+ .dropdown-menu {
72
+ // Make dropdown border overlap tab border
73
+ margin-top: -$nav-tabs-border-width;
74
+ // Remove the top rounded corners here since there is a hard edge above the menu
75
+ @include border-top-radius(0);
76
+ }
77
+ }
78
+
79
+
80
+ //
81
+ // Pills
82
+ //
83
+
84
+ .nav-pills {
85
+ .nav-link {
86
+ background: none;
87
+ border: 0;
88
+ @include border-radius($nav-pills-border-radius);
89
+ }
90
+
91
+ .nav-link.active,
92
+ .show > .nav-link {
93
+ color: $nav-pills-link-active-color;
94
+ @include gradient-bg($nav-pills-link-active-bg);
95
+ }
96
+ }
97
+
98
+
99
+ //
100
+ // Justified variants
101
+ //
102
+
103
+ .nav-fill {
104
+ > .nav-link,
105
+ .nav-item {
106
+ flex: 1 1 auto;
107
+ text-align: center;
108
+ }
109
+ }
110
+
111
+ .nav-justified {
112
+ > .nav-link,
113
+ .nav-item {
114
+ flex-basis: 0;
115
+ flex-grow: 1;
116
+ text-align: center;
117
+ }
118
+ }
119
+
120
+ .nav-fill,
121
+ .nav-justified {
122
+ .nav-item .nav-link {
123
+ width: 100%; // Make sure button will grow
124
+ }
125
+ }
126
+
127
+
128
+ // Tabbable tabs
129
+ //
130
+ // Hide tabbable panes to start, show them when `.active`
131
+
132
+ .tab-content {
133
+ > .tab-pane {
134
+ display: none;
135
+ }
136
+ > .active {
137
+ display: block;
138
+ }
139
+ }
@@ -0,0 +1,335 @@
1
+ // Contents
2
+ //
3
+ // Navbar
4
+ // Navbar brand
5
+ // Navbar nav
6
+ // Navbar text
7
+ // Responsive navbar
8
+ // Navbar position
9
+ // Navbar themes
10
+
11
+
12
+ // Navbar
13
+ //
14
+ // Provide a static navbar from which we expand to create full-width, fixed, and
15
+ // other navbar variations.
16
+
17
+ .navbar {
18
+ position: relative;
19
+ display: flex;
20
+ flex-wrap: wrap; // allow us to do the line break for collapsing content
21
+ align-items: center;
22
+ justify-content: space-between; // space out brand from logo
23
+ padding-top: $navbar-padding-y;
24
+ padding-right: $navbar-padding-x; // default: null
25
+ padding-bottom: $navbar-padding-y;
26
+ padding-left: $navbar-padding-x; // default: null
27
+ @include gradient-bg();
28
+
29
+ // Because flex properties aren't inherited, we need to redeclare these first
30
+ // few properties so that content nested within behave properly.
31
+ // The `flex-wrap` property is inherited to simplify the expanded navbars
32
+ %container-flex-properties {
33
+ display: flex;
34
+ flex-wrap: inherit;
35
+ align-items: center;
36
+ justify-content: space-between;
37
+ }
38
+
39
+ > .container,
40
+ > .container-fluid {
41
+ @extend %container-flex-properties;
42
+ }
43
+
44
+ @each $breakpoint, $container-max-width in $container-max-widths {
45
+ > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
46
+ @extend %container-flex-properties;
47
+ }
48
+ }
49
+ }
50
+
51
+
52
+ // Navbar brand
53
+ //
54
+ // Used for brand, project, or site names.
55
+
56
+ .navbar-brand {
57
+ padding-top: $navbar-brand-padding-y;
58
+ padding-bottom: $navbar-brand-padding-y;
59
+ margin-right: $navbar-brand-margin-end;
60
+ @include font-size($navbar-brand-font-size);
61
+ text-decoration: if($link-decoration == none, null, none);
62
+ white-space: nowrap;
63
+
64
+ &:hover,
65
+ &:focus {
66
+ text-decoration: if($link-hover-decoration == underline, none, null);
67
+ }
68
+ }
69
+
70
+
71
+ // Navbar nav
72
+ //
73
+ // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
74
+
75
+ .navbar-nav {
76
+ display: flex;
77
+ flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
78
+ padding-left: 0;
79
+ margin-bottom: 0;
80
+ list-style: none;
81
+
82
+ .nav-link {
83
+ padding-right: 0;
84
+ padding-left: 0;
85
+ }
86
+
87
+ .dropdown-menu {
88
+ position: static;
89
+ }
90
+ }
91
+
92
+
93
+ // Navbar text
94
+ //
95
+ //
96
+
97
+ .navbar-text {
98
+ padding-top: $nav-link-padding-y;
99
+ padding-bottom: $nav-link-padding-y;
100
+ }
101
+
102
+
103
+ // Responsive navbar
104
+ //
105
+ // Custom styles for responsive collapsing and toggling of navbar contents.
106
+ // Powered by the collapse Bootstrap JavaScript plugin.
107
+
108
+ // When collapsed, prevent the toggleable navbar contents from appearing in
109
+ // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
110
+ // on the `.navbar` parent.
111
+ .navbar-collapse {
112
+ flex-basis: 100%;
113
+ flex-grow: 1;
114
+ // For always expanded or extra full navbars, ensure content aligns itself
115
+ // properly vertically. Can be easily overridden with flex utilities.
116
+ align-items: center;
117
+ }
118
+
119
+ // Button for toggling the navbar when in its collapsed state
120
+ .navbar-toggler {
121
+ padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
122
+ @include font-size($navbar-toggler-font-size);
123
+ line-height: 1;
124
+ background-color: transparent; // remove default button style
125
+ border: $border-width solid transparent; // remove default button style
126
+ @include border-radius($navbar-toggler-border-radius);
127
+ @include transition($navbar-toggler-transition);
128
+
129
+ &:hover {
130
+ text-decoration: none;
131
+ }
132
+
133
+ &:focus {
134
+ text-decoration: none;
135
+ outline: 0;
136
+ box-shadow: 0 0 0 $navbar-toggler-focus-width;
137
+ }
138
+ }
139
+
140
+ // Keep as a separate element so folks can easily override it with another icon
141
+ // or image file as needed.
142
+ .navbar-toggler-icon {
143
+ display: inline-block;
144
+ width: 1.5em;
145
+ height: 1.5em;
146
+ vertical-align: middle;
147
+ background-repeat: no-repeat;
148
+ background-position: center;
149
+ background-size: 100%;
150
+ }
151
+
152
+ .navbar-nav-scroll {
153
+ max-height: var(--#{$variable-prefix}scroll-height, 75vh);
154
+ overflow-y: auto;
155
+ }
156
+
157
+ // scss-docs-start navbar-expand-loop
158
+ // Generate series of `.navbar-expand-*` responsive classes for configuring
159
+ // where your navbar collapses.
160
+ .navbar-expand {
161
+ @each $breakpoint in map-keys($grid-breakpoints) {
162
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
163
+ $infix: breakpoint-infix($next, $grid-breakpoints);
164
+
165
+ // stylelint-disable-next-line scss/selector-no-union-class-name
166
+ &#{$infix} {
167
+ @include media-breakpoint-up($next) {
168
+ flex-wrap: nowrap;
169
+ justify-content: flex-start;
170
+
171
+ .navbar-nav {
172
+ flex-direction: row;
173
+
174
+ .dropdown-menu {
175
+ position: absolute;
176
+ }
177
+
178
+ .nav-link {
179
+ padding-right: $navbar-nav-link-padding-x;
180
+ padding-left: $navbar-nav-link-padding-x;
181
+ }
182
+ }
183
+
184
+ .navbar-nav-scroll {
185
+ overflow: visible;
186
+ }
187
+
188
+ .navbar-collapse {
189
+ display: flex !important; // stylelint-disable-line declaration-no-important
190
+ flex-basis: auto;
191
+ }
192
+
193
+ .navbar-toggler {
194
+ display: none;
195
+ }
196
+
197
+ .offcanvas-header {
198
+ display: none;
199
+ }
200
+
201
+ .offcanvas {
202
+ position: inherit;
203
+ bottom: 0;
204
+ z-index: 1000;
205
+ flex-grow: 1;
206
+ visibility: visible !important; // stylelint-disable-line declaration-no-important
207
+ background-color: transparent;
208
+ border-right: 0;
209
+ border-left: 0;
210
+ @include transition(none);
211
+ transform: none;
212
+ }
213
+ .offcanvas-top,
214
+ .offcanvas-bottom {
215
+ height: auto;
216
+ border-top: 0;
217
+ border-bottom: 0;
218
+ }
219
+
220
+ .offcanvas-body {
221
+ display: flex;
222
+ flex-grow: 0;
223
+ padding: 0;
224
+ overflow-y: visible;
225
+ }
226
+ }
227
+ }
228
+ }
229
+ }
230
+ // scss-docs-end navbar-expand-loop
231
+
232
+ // Navbar themes
233
+ //
234
+ // Styles for switching between navbars with light or dark background.
235
+
236
+ // Dark links against a light background
237
+ .navbar-light {
238
+ .navbar-brand {
239
+ color: $navbar-light-brand-color;
240
+
241
+ &:hover,
242
+ &:focus {
243
+ color: $navbar-light-brand-hover-color;
244
+ }
245
+ }
246
+
247
+ .navbar-nav {
248
+ .nav-link {
249
+ color: $navbar-light-color;
250
+
251
+ &:hover,
252
+ &:focus {
253
+ color: $navbar-light-hover-color;
254
+ }
255
+
256
+ &.disabled {
257
+ color: $navbar-light-disabled-color;
258
+ }
259
+ }
260
+
261
+ .show > .nav-link,
262
+ .nav-link.active {
263
+ color: $navbar-light-active-color;
264
+ }
265
+ }
266
+
267
+ .navbar-toggler {
268
+ color: $navbar-light-color;
269
+ border-color: $navbar-light-toggler-border-color;
270
+ }
271
+
272
+ .navbar-toggler-icon {
273
+ background-image: escape-svg($navbar-light-toggler-icon-bg);
274
+ }
275
+
276
+ .navbar-text {
277
+ color: $navbar-light-color;
278
+
279
+ a,
280
+ a:hover,
281
+ a:focus {
282
+ color: $navbar-light-active-color;
283
+ }
284
+ }
285
+ }
286
+
287
+ // White links against a dark background
288
+ .navbar-dark {
289
+ .navbar-brand {
290
+ color: $navbar-dark-brand-color;
291
+
292
+ &:hover,
293
+ &:focus {
294
+ color: $navbar-dark-brand-hover-color;
295
+ }
296
+ }
297
+
298
+ .navbar-nav {
299
+ .nav-link {
300
+ color: $navbar-dark-color;
301
+
302
+ &:hover,
303
+ &:focus {
304
+ color: $navbar-dark-hover-color;
305
+ }
306
+
307
+ &.disabled {
308
+ color: $navbar-dark-disabled-color;
309
+ }
310
+ }
311
+
312
+ .show > .nav-link,
313
+ .nav-link.active {
314
+ color: $navbar-dark-active-color;
315
+ }
316
+ }
317
+
318
+ .navbar-toggler {
319
+ color: $navbar-dark-color;
320
+ border-color: $navbar-dark-toggler-border-color;
321
+ }
322
+
323
+ .navbar-toggler-icon {
324
+ background-image: escape-svg($navbar-dark-toggler-icon-bg);
325
+ }
326
+
327
+ .navbar-text {
328
+ color: $navbar-dark-color;
329
+ a,
330
+ a:hover,
331
+ a:focus {
332
+ color: $navbar-dark-active-color;
333
+ }
334
+ }
335
+ }