headmin 0.2.9 → 0.3.1

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 (237) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +29 -3
  3. data/Gemfile.lock +12 -1
  4. data/README.md +64 -57
  5. data/app/assets/config/headmin_manifest.js +2 -0
  6. data/app/assets/javascripts/headmin/config/i18n.js +11 -0
  7. data/{src/js → app/assets/javascripts}/headmin/controllers/blocks_controller.js +0 -1
  8. data/{src/js → app/assets/javascripts}/headmin/controllers/date_range_controller.js +0 -2
  9. data/app/assets/javascripts/headmin/controllers/dropzone_controller.js +33 -0
  10. data/app/assets/javascripts/headmin/controllers/file_preview_controller.js +244 -0
  11. data/{src/js → app/assets/javascripts}/headmin/controllers/filter_controller.js +12 -6
  12. data/{src/js → app/assets/javascripts}/headmin/controllers/flatpickr_controller.js +2 -1
  13. data/app/assets/javascripts/headmin/controllers/hello_controller.js +7 -0
  14. data/app/assets/javascripts/headmin/controllers/notification_controller.js +8 -0
  15. data/{src/js → app/assets/javascripts}/headmin/controllers/popup_controller.js +0 -1
  16. data/app/assets/javascripts/headmin/controllers/redactorx_controller.js +13 -0
  17. data/app/assets/javascripts/headmin/controllers/select_controller.js +48 -0
  18. data/{src/js → app/assets/javascripts}/headmin/controllers/table_controller.js +1 -1
  19. data/app/assets/javascripts/headmin/index.js +41 -0
  20. data/app/assets/javascripts/headmin.js +15934 -0
  21. data/{src/scss → app/assets/stylesheets}/headmin/form.scss +51 -2
  22. data/app/assets/stylesheets/headmin/syntax.scss +349 -0
  23. data/app/assets/stylesheets/headmin/thumbnail.scss +20 -0
  24. data/app/assets/stylesheets/headmin/utilities.scss +68 -0
  25. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_accordion.scss +118 -0
  26. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_alert.scss +57 -0
  27. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_badge.scss +29 -0
  28. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_breadcrumb.scss +28 -0
  29. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_button-group.scss +139 -0
  30. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_buttons.scss +111 -0
  31. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_card.scss +216 -0
  32. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_carousel.scss +229 -0
  33. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_close.scss +40 -0
  34. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_containers.scss +41 -0
  35. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_dropdown.scss +240 -0
  36. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_forms.scss +9 -0
  37. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_functions.scss +302 -0
  38. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_grid.scss +33 -0
  39. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_helpers.scss +9 -0
  40. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_images.scss +42 -0
  41. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_list-group.scss +174 -0
  42. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_mixins.scss +43 -0
  43. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_modal.scss +209 -0
  44. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_nav.scss +139 -0
  45. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_navbar.scss +335 -0
  46. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_offcanvas.scss +83 -0
  47. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_pagination.scss +64 -0
  48. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_placeholders.scss +51 -0
  49. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_popover.scss +158 -0
  50. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_progress.scss +48 -0
  51. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_reboot.scss +625 -0
  52. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_root.scss +54 -0
  53. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_spinners.scss +69 -0
  54. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_tables.scss +155 -0
  55. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_toasts.scss +51 -0
  56. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_tooltip.scss +115 -0
  57. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_transitions.scss +27 -0
  58. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_type.scss +104 -0
  59. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_utilities.scss +630 -0
  60. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_variables.scss +1641 -0
  61. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/bootstrap-grid.scss +67 -0
  62. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/bootstrap-reboot.scss +13 -0
  63. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/bootstrap-utilities.scss +18 -0
  64. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/bootstrap.scss +53 -0
  65. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/forms/_floating-labels.scss +63 -0
  66. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/forms/_form-check.scss +152 -0
  67. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/forms/_form-control.scss +219 -0
  68. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/forms/_form-range.scss +91 -0
  69. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/forms/_form-select.scss +72 -0
  70. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/forms/_form-text.scss +11 -0
  71. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/forms/_input-group.scss +121 -0
  72. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/forms/_labels.scss +36 -0
  73. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/forms/_validation.scss +12 -0
  74. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/helpers/_clearfix.scss +3 -0
  75. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/helpers/_colored-links.scss +12 -0
  76. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/helpers/_position.scss +30 -0
  77. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/helpers/_ratio.scss +26 -0
  78. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/helpers/_stacks.scss +15 -0
  79. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/helpers/_stretched-link.scss +15 -0
  80. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/helpers/_text-truncation.scss +7 -0
  81. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/helpers/_visually-hidden.scss +8 -0
  82. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/helpers/_vr.scss +8 -0
  83. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_alert.scss +11 -0
  84. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_backdrop.scss +14 -0
  85. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_border-radius.scss +78 -0
  86. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_box-shadow.scss +18 -0
  87. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_breakpoints.scss +127 -0
  88. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_buttons.scss +133 -0
  89. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_caret.scss +64 -0
  90. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_clearfix.scss +9 -0
  91. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_color-scheme.scss +7 -0
  92. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_container.scss +9 -0
  93. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_deprecate.scss +10 -0
  94. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_forms.scss +144 -0
  95. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_gradients.scss +47 -0
  96. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_grid.scss +151 -0
  97. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_image.scss +16 -0
  98. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_list-group.scss +24 -0
  99. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_lists.scss +7 -0
  100. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_pagination.scss +31 -0
  101. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_reset-text.scss +17 -0
  102. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_resize.scss +6 -0
  103. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_table-variants.scss +21 -0
  104. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_text-truncate.scss +8 -0
  105. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_transition.scss +26 -0
  106. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_utilities.scss +89 -0
  107. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/mixins/_visually-hidden.scss +29 -0
  108. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/utilities/_api.scss +47 -0
  109. data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/vendor/_rfs.scss +354 -0
  110. data/app/assets/stylesheets/headmin/vendor/flatpickr.css +903 -0
  111. data/app/assets/stylesheets/headmin/vendor/tom-select-bootstrap.css +537 -0
  112. data/app/assets/stylesheets/headmin.css +13454 -0
  113. data/app/assets/stylesheets/headmin.scss +65 -0
  114. data/app/helpers/headmin/admin_helper.rb +1 -0
  115. data/app/helpers/headmin/bootstrap_helper.rb +25 -3
  116. data/app/helpers/headmin/documentation_helper.rb +35 -0
  117. data/app/helpers/headmin/form_helper.rb +4 -0
  118. data/app/helpers/headmin/request_helper.rb +3 -8
  119. data/app/models/headmin/documentation_renderer.rb +32 -0
  120. data/app/models/headmin/form/base.rb +79 -0
  121. data/app/models/headmin/form/text.rb +53 -0
  122. data/app/services/block_service.rb +1 -1
  123. data/app/views/examples/admin.html.erb +1 -1
  124. data/app/views/headmin/_blocks.html.erb +2 -2
  125. data/app/views/headmin/_breadcrumbs.html.erb +1 -1
  126. data/app/views/headmin/_card.html.erb +8 -6
  127. data/app/views/headmin/_dropdown.html.erb +1 -1
  128. data/app/views/headmin/_filters.html.erb +20 -8
  129. data/app/views/headmin/_form.html.erb +14 -14
  130. data/app/views/headmin/_heading.html.erb +1 -1
  131. data/app/views/headmin/_notifications.html.erb +1 -1
  132. data/app/views/headmin/_pagination.html.erb +1 -1
  133. data/app/views/headmin/_popup.html.erb +10 -4
  134. data/app/views/headmin/_table.html.erb +2 -2
  135. data/app/views/headmin/_thumbnail.html.erb +47 -0
  136. data/app/views/headmin/dropdown/_devise.html.erb +2 -2
  137. data/app/views/headmin/dropdown/_list.html.erb +3 -6
  138. data/app/views/headmin/filters/_date.html.erb +4 -10
  139. data/app/views/headmin/filters/_flatpickr.html.erb +5 -5
  140. data/app/views/headmin/filters/_search.html.erb +5 -5
  141. data/app/views/headmin/filters/_select.html.erb +6 -6
  142. data/app/views/headmin/filters/filter/_button.html.erb +7 -7
  143. data/app/views/headmin/filters/filter/_template.html.erb +1 -1
  144. data/app/views/headmin/forms/_actions.html.erb +1 -1
  145. data/app/views/headmin/forms/_base.html.erb +98 -45
  146. data/app/views/headmin/forms/_blocks.html.erb +4 -4
  147. data/app/views/headmin/forms/_checkbox.html.erb +3 -3
  148. data/app/views/headmin/forms/_date.html.erb +29 -45
  149. data/app/views/headmin/forms/_date_range.html.erb +24 -66
  150. data/app/views/headmin/forms/_email.html.erb +35 -26
  151. data/app/views/headmin/forms/_file.html.erb +186 -34
  152. data/app/views/headmin/forms/_flatpickr.html.erb +18 -39
  153. data/app/views/headmin/forms/_flatpickr_range.html.erb +34 -45
  154. data/app/views/headmin/forms/_hidden.html.erb +13 -12
  155. data/app/views/headmin/forms/_image.html.erb +11 -45
  156. data/app/views/headmin/forms/_label.html.erb +18 -14
  157. data/app/views/headmin/forms/_number.html.erb +40 -37
  158. data/app/views/headmin/forms/_password.html.erb +37 -58
  159. data/app/views/headmin/forms/_redactorx.html.erb +8 -7
  160. data/app/views/headmin/forms/_repeater.html.erb +6 -6
  161. data/app/views/headmin/forms/_select.html.erb +43 -48
  162. data/app/views/headmin/forms/_text.html.erb +95 -58
  163. data/app/views/headmin/forms/_textarea.html.erb +37 -26
  164. data/app/views/headmin/forms/_url.html.erb +35 -26
  165. data/app/views/headmin/forms/_validation.html.erb +3 -3
  166. data/app/views/headmin/forms/_video.html.erb +21 -0
  167. data/app/views/headmin/forms/fields/_base.html.erb +3 -3
  168. data/app/views/headmin/forms/fields/_file.html.erb +2 -2
  169. data/app/views/headmin/forms/fields/_group.html.erb +3 -3
  170. data/app/views/headmin/forms/fields/_image.html.erb +2 -2
  171. data/app/views/headmin/forms/fields/_list.html.erb +3 -3
  172. data/app/views/headmin/forms/fields/_text.html.erb +2 -2
  173. data/app/views/headmin/forms/repeater/_row.html.erb +1 -1
  174. data/app/views/headmin/heading/_title.html.erb +1 -1
  175. data/app/views/headmin/layout/_body.html.erb +1 -1
  176. data/app/views/headmin/layout/_content.html.erb +1 -1
  177. data/app/views/headmin/layout/_footer.html.erb +1 -1
  178. data/app/views/headmin/layout/_header.html.erb +1 -1
  179. data/app/views/headmin/layout/_main.html.erb +1 -1
  180. data/app/views/headmin/layout/_sidebar.html.erb +3 -3
  181. data/app/views/headmin/layout/sidebar/_bottom.html.erb +1 -1
  182. data/app/views/headmin/layout/sidebar/_nav.html.erb +1 -1
  183. data/app/views/headmin/nav/_dropdown.html.erb +34 -0
  184. data/app/views/headmin/nav/_item.html.erb +22 -13
  185. data/app/views/headmin/table/_actions.html.erb +1 -1
  186. data/app/views/headmin/table/_body.html.erb +1 -1
  187. data/app/views/headmin/table/_foot.html.erb +1 -1
  188. data/app/views/headmin/table/_footer.html.erb +1 -1
  189. data/app/views/headmin/table/_head.html.erb +1 -1
  190. data/app/views/headmin/table/_header.html.erb +1 -1
  191. data/app/views/headmin/table/actions/_action.html.erb +4 -4
  192. data/app/views/headmin/table/actions/_delete.html.erb +1 -1
  193. data/app/views/headmin/table/actions/_export.html.erb +1 -1
  194. data/app/views/headmin/table/body/_row.html.erb +2 -2
  195. data/config/importmap.rb +2 -0
  196. data/config/locales/en.yml +0 -3
  197. data/config/locales/headmin/forms/en.yml +5 -0
  198. data/config/locales/headmin/forms/nl.yml +5 -0
  199. data/config/locales/headmin/popup/en.yml +4 -0
  200. data/config/locales/headmin/popup/nl.yml +4 -0
  201. data/config/locales/headmin/thumbnail/en.yml +4 -0
  202. data/config/locales/headmin/thumbnail/nl.yml +4 -0
  203. data/config/locales/nl.yml +0 -3
  204. data/esbuild-css.js +25 -0
  205. data/esbuild-js.js +11 -0
  206. data/headmin.gemspec +4 -1
  207. data/lib/headmin/engine.rb +15 -0
  208. data/lib/headmin/version.rb +1 -1
  209. data/lib/headmin.rb +1 -1
  210. data/package.json +18 -34
  211. data/src/js/headmin.js +1 -1
  212. data/src/scss/headmin.scss +1 -61
  213. data/yarn.lock +393 -5177
  214. metadata +183 -33
  215. data/.nvmrc +0 -1
  216. data/app/controllers/concerns/headmin/ckeditor.rb +0 -27
  217. data/app/views/headmin/forms/_ckeditor.html.erb +0 -42
  218. data/dist/css/headmin.css +0 -12357
  219. data/dist/js/headmin.js +0 -1115
  220. data/src/js/headmin/headmin.js +0 -158
  221. data/src/scss/headmin/utilities.scss +0 -19
  222. data/webpack.config.js +0 -30
  223. /data/{src/js → app/assets/javascripts}/headmin/controllers/filters_controller.js +0 -0
  224. /data/{src/js → app/assets/javascripts}/headmin/controllers/repeater_controller.js +0 -0
  225. /data/{src/js → app/assets/javascripts}/headmin/controllers/table_actions_controller.js +0 -0
  226. /data/{src/scss → app/assets/stylesheets}/headmin/filter.scss +0 -0
  227. /data/{src/scss → app/assets/stylesheets}/headmin/filters.scss +0 -0
  228. /data/{src/scss → app/assets/stylesheets}/headmin/general.scss +0 -0
  229. /data/{src/scss → app/assets/stylesheets}/headmin/layout/body.scss +0 -0
  230. /data/{src/scss → app/assets/stylesheets}/headmin/layout/sidebar.scss +0 -0
  231. /data/{src/scss → app/assets/stylesheets}/headmin/layout.scss +0 -0
  232. /data/{src/scss → app/assets/stylesheets}/headmin/login.scss +0 -0
  233. /data/{src/scss/vendor/bootstrap/variables.scss → app/assets/stylesheets/headmin/overrides/bootstrap.scss} +0 -0
  234. /data/{src/scss/vendor/redactorx/override.css → app/assets/stylesheets/headmin/overrides/redactorx.css} +0 -0
  235. /data/{src/scss → app/assets/stylesheets}/headmin/popup.scss +0 -0
  236. /data/{src/scss → app/assets/stylesheets}/headmin/table.scss +0 -0
  237. /data/{src/scss/vendor/redactorx → app/assets/stylesheets/headmin/vendor}/redactorx.css +0 -0
@@ -0,0 +1,28 @@
1
+ .breadcrumb {
2
+ display: flex;
3
+ flex-wrap: wrap;
4
+ padding: $breadcrumb-padding-y $breadcrumb-padding-x;
5
+ margin-bottom: $breadcrumb-margin-bottom;
6
+ @include font-size($breadcrumb-font-size);
7
+ list-style: none;
8
+ background-color: $breadcrumb-bg;
9
+ @include border-radius($breadcrumb-border-radius);
10
+ }
11
+
12
+ .breadcrumb-item {
13
+ // The separator between breadcrumbs (by default, a forward-slash: "/")
14
+ + .breadcrumb-item {
15
+ padding-left: $breadcrumb-item-padding-x;
16
+
17
+ &::before {
18
+ float: left; // Suppress inline spacings and underlining of the separator
19
+ padding-right: $breadcrumb-item-padding-x;
20
+ color: $breadcrumb-divider-color;
21
+ content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
22
+ }
23
+ }
24
+
25
+ &.active {
26
+ color: $breadcrumb-active-color;
27
+ }
28
+ }
@@ -0,0 +1,139 @@
1
+ // Make the div behave like a button
2
+ .btn-group,
3
+ .btn-group-vertical {
4
+ position: relative;
5
+ display: inline-flex;
6
+ vertical-align: middle; // match .btn alignment given font-size hack above
7
+
8
+ > .btn {
9
+ position: relative;
10
+ flex: 1 1 auto;
11
+ }
12
+
13
+ // Bring the hover, focused, and "active" buttons to the front to overlay
14
+ // the borders properly
15
+ > .btn-check:checked + .btn,
16
+ > .btn-check:focus + .btn,
17
+ > .btn:hover,
18
+ > .btn:focus,
19
+ > .btn:active,
20
+ > .btn.active {
21
+ z-index: 1;
22
+ }
23
+ }
24
+
25
+ // Optional: Group multiple button groups together for a toolbar
26
+ .btn-toolbar {
27
+ display: flex;
28
+ flex-wrap: wrap;
29
+ justify-content: flex-start;
30
+
31
+ .input-group {
32
+ width: auto;
33
+ }
34
+ }
35
+
36
+ .btn-group {
37
+ // Prevent double borders when buttons are next to each other
38
+ > .btn:not(:first-child),
39
+ > .btn-group:not(:first-child) {
40
+ margin-left: -$btn-border-width;
41
+ }
42
+
43
+ // Reset rounded corners
44
+ > .btn:not(:last-child):not(.dropdown-toggle),
45
+ > .btn-group:not(:last-child) > .btn {
46
+ @include border-end-radius(0);
47
+ }
48
+
49
+ // The left radius should be 0 if the button is:
50
+ // - the "third or more" child
51
+ // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
52
+ // - part of a btn-group which isn't the first child
53
+ > .btn:nth-child(n + 3),
54
+ > :not(.btn-check) + .btn,
55
+ > .btn-group:not(:first-child) > .btn {
56
+ @include border-start-radius(0);
57
+ }
58
+ }
59
+
60
+ // Sizing
61
+ //
62
+ // Remix the default button sizing classes into new ones for easier manipulation.
63
+
64
+ .btn-group-sm > .btn { @extend .btn-sm; }
65
+ .btn-group-lg > .btn { @extend .btn-lg; }
66
+
67
+
68
+ //
69
+ // Split button dropdowns
70
+ //
71
+
72
+ .dropdown-toggle-split {
73
+ padding-right: $btn-padding-x * .75;
74
+ padding-left: $btn-padding-x * .75;
75
+
76
+ &::after,
77
+ .dropup &::after,
78
+ .dropend &::after {
79
+ margin-left: 0;
80
+ }
81
+
82
+ .dropstart &::before {
83
+ margin-right: 0;
84
+ }
85
+ }
86
+
87
+ .btn-sm + .dropdown-toggle-split {
88
+ padding-right: $btn-padding-x-sm * .75;
89
+ padding-left: $btn-padding-x-sm * .75;
90
+ }
91
+
92
+ .btn-lg + .dropdown-toggle-split {
93
+ padding-right: $btn-padding-x-lg * .75;
94
+ padding-left: $btn-padding-x-lg * .75;
95
+ }
96
+
97
+
98
+ // The clickable button for toggling the menu
99
+ // Set the same inset shadow as the :active state
100
+ .btn-group.show .dropdown-toggle {
101
+ @include box-shadow($btn-active-box-shadow);
102
+
103
+ // Show no shadow for `.btn-link` since it has no other button styles.
104
+ &.btn-link {
105
+ @include box-shadow(none);
106
+ }
107
+ }
108
+
109
+
110
+ //
111
+ // Vertical button groups
112
+ //
113
+
114
+ .btn-group-vertical {
115
+ flex-direction: column;
116
+ align-items: flex-start;
117
+ justify-content: center;
118
+
119
+ > .btn,
120
+ > .btn-group {
121
+ width: 100%;
122
+ }
123
+
124
+ > .btn:not(:first-child),
125
+ > .btn-group:not(:first-child) {
126
+ margin-top: -$btn-border-width;
127
+ }
128
+
129
+ // Reset rounded corners
130
+ > .btn:not(:last-child):not(.dropdown-toggle),
131
+ > .btn-group:not(:last-child) > .btn {
132
+ @include border-bottom-radius(0);
133
+ }
134
+
135
+ > .btn ~ .btn,
136
+ > .btn-group:not(:first-child) > .btn {
137
+ @include border-top-radius(0);
138
+ }
139
+ }
@@ -0,0 +1,111 @@
1
+ //
2
+ // Base styles
3
+ //
4
+
5
+ .btn {
6
+ display: inline-block;
7
+ font-family: $btn-font-family;
8
+ font-weight: $btn-font-weight;
9
+ line-height: $btn-line-height;
10
+ color: $body-color;
11
+ text-align: center;
12
+ text-decoration: if($link-decoration == none, null, none);
13
+ white-space: $btn-white-space;
14
+ vertical-align: middle;
15
+ cursor: if($enable-button-pointers, pointer, null);
16
+ user-select: none;
17
+ background-color: transparent;
18
+ border: $btn-border-width solid transparent;
19
+ @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
20
+ @include transition($btn-transition);
21
+
22
+ &:hover {
23
+ color: $body-color;
24
+ text-decoration: if($link-hover-decoration == underline, none, null);
25
+ }
26
+
27
+ .btn-check:focus + &,
28
+ &:focus {
29
+ outline: 0;
30
+ box-shadow: $btn-focus-box-shadow;
31
+ }
32
+
33
+ .btn-check:checked + &,
34
+ .btn-check:active + &,
35
+ &:active,
36
+ &.active {
37
+ @include box-shadow($btn-active-box-shadow);
38
+
39
+ &:focus {
40
+ @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
41
+ }
42
+ }
43
+
44
+ &:disabled,
45
+ &.disabled,
46
+ fieldset:disabled & {
47
+ pointer-events: none;
48
+ opacity: $btn-disabled-opacity;
49
+ @include box-shadow(none);
50
+ }
51
+ }
52
+
53
+
54
+ //
55
+ // Alternate buttons
56
+ //
57
+
58
+ // scss-docs-start btn-variant-loops
59
+ @each $color, $value in $theme-colors {
60
+ .btn-#{$color} {
61
+ @include button-variant($value, $value);
62
+ }
63
+ }
64
+
65
+ @each $color, $value in $theme-colors {
66
+ .btn-outline-#{$color} {
67
+ @include button-outline-variant($value);
68
+ }
69
+ }
70
+ // scss-docs-end btn-variant-loops
71
+
72
+
73
+ //
74
+ // Link buttons
75
+ //
76
+
77
+ // Make a button look and behave like a link
78
+ .btn-link {
79
+ font-weight: $font-weight-normal;
80
+ color: $btn-link-color;
81
+ text-decoration: $link-decoration;
82
+
83
+ &:hover {
84
+ color: $btn-link-hover-color;
85
+ text-decoration: $link-hover-decoration;
86
+ }
87
+
88
+ &:focus {
89
+ text-decoration: $link-hover-decoration;
90
+ }
91
+
92
+ &:disabled,
93
+ &.disabled {
94
+ color: $btn-link-disabled-color;
95
+ }
96
+
97
+ // No need for an active state here
98
+ }
99
+
100
+
101
+ //
102
+ // Button Sizes
103
+ //
104
+
105
+ .btn-lg {
106
+ @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
107
+ }
108
+
109
+ .btn-sm {
110
+ @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
111
+ }
@@ -0,0 +1,216 @@
1
+ //
2
+ // Base styles
3
+ //
4
+
5
+ .card {
6
+ position: relative;
7
+ display: flex;
8
+ flex-direction: column;
9
+ min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
10
+ height: $card-height;
11
+ word-wrap: break-word;
12
+ background-color: $card-bg;
13
+ background-clip: border-box;
14
+ border: $card-border-width solid $card-border-color;
15
+ @include border-radius($card-border-radius);
16
+ @include box-shadow($card-box-shadow);
17
+
18
+ > hr {
19
+ margin-right: 0;
20
+ margin-left: 0;
21
+ }
22
+
23
+ > .list-group {
24
+ border-top: inherit;
25
+ border-bottom: inherit;
26
+
27
+ &:first-child {
28
+ border-top-width: 0;
29
+ @include border-top-radius($card-inner-border-radius);
30
+ }
31
+
32
+ &:last-child {
33
+ border-bottom-width: 0;
34
+ @include border-bottom-radius($card-inner-border-radius);
35
+ }
36
+ }
37
+
38
+ // Due to specificity of the above selector (`.card > .list-group`), we must
39
+ // use a child selector here to prevent double borders.
40
+ > .card-header + .list-group,
41
+ > .list-group + .card-footer {
42
+ border-top: 0;
43
+ }
44
+ }
45
+
46
+ .card-body {
47
+ // Enable `flex-grow: 1` for decks and groups so that card blocks take up
48
+ // as much space as possible, ensuring footers are aligned to the bottom.
49
+ flex: 1 1 auto;
50
+ padding: $card-spacer-y $card-spacer-x;
51
+ color: $card-color;
52
+ }
53
+
54
+ .card-title {
55
+ margin-bottom: $card-title-spacer-y;
56
+ }
57
+
58
+ .card-subtitle {
59
+ margin-top: -$card-title-spacer-y * .5;
60
+ margin-bottom: 0;
61
+ }
62
+
63
+ .card-text:last-child {
64
+ margin-bottom: 0;
65
+ }
66
+
67
+ .card-link {
68
+ &:hover {
69
+ text-decoration: if($link-hover-decoration == underline, none, null);
70
+ }
71
+
72
+ + .card-link {
73
+ margin-left: $card-spacer-x;
74
+ }
75
+ }
76
+
77
+ //
78
+ // Optional textual caps
79
+ //
80
+
81
+ .card-header {
82
+ padding: $card-cap-padding-y $card-cap-padding-x;
83
+ margin-bottom: 0; // Removes the default margin-bottom of <hN>
84
+ color: $card-cap-color;
85
+ background-color: $card-cap-bg;
86
+ border-bottom: $card-border-width solid $card-border-color;
87
+
88
+ &:first-child {
89
+ @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
90
+ }
91
+ }
92
+
93
+ .card-footer {
94
+ padding: $card-cap-padding-y $card-cap-padding-x;
95
+ color: $card-cap-color;
96
+ background-color: $card-cap-bg;
97
+ border-top: $card-border-width solid $card-border-color;
98
+
99
+ &:last-child {
100
+ @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
101
+ }
102
+ }
103
+
104
+
105
+ //
106
+ // Header navs
107
+ //
108
+
109
+ .card-header-tabs {
110
+ margin-right: -$card-cap-padding-x * .5;
111
+ margin-bottom: -$card-cap-padding-y;
112
+ margin-left: -$card-cap-padding-x * .5;
113
+ border-bottom: 0;
114
+
115
+ @if $nav-tabs-link-active-bg != $card-bg {
116
+ .nav-link.active {
117
+ background-color: $card-bg;
118
+ border-bottom-color: $card-bg;
119
+ }
120
+ }
121
+ }
122
+
123
+ .card-header-pills {
124
+ margin-right: -$card-cap-padding-x * .5;
125
+ margin-left: -$card-cap-padding-x * .5;
126
+ }
127
+
128
+ // Card image
129
+ .card-img-overlay {
130
+ position: absolute;
131
+ top: 0;
132
+ right: 0;
133
+ bottom: 0;
134
+ left: 0;
135
+ padding: $card-img-overlay-padding;
136
+ @include border-radius($card-inner-border-radius);
137
+ }
138
+
139
+ .card-img,
140
+ .card-img-top,
141
+ .card-img-bottom {
142
+ width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
143
+ }
144
+
145
+ .card-img,
146
+ .card-img-top {
147
+ @include border-top-radius($card-inner-border-radius);
148
+ }
149
+
150
+ .card-img,
151
+ .card-img-bottom {
152
+ @include border-bottom-radius($card-inner-border-radius);
153
+ }
154
+
155
+
156
+ //
157
+ // Card groups
158
+ //
159
+
160
+ .card-group {
161
+ // The child selector allows nested `.card` within `.card-group`
162
+ // to display properly.
163
+ > .card {
164
+ margin-bottom: $card-group-margin;
165
+ }
166
+
167
+ @include media-breakpoint-up(sm) {
168
+ display: flex;
169
+ flex-flow: row wrap;
170
+ // The child selector allows nested `.card` within `.card-group`
171
+ // to display properly.
172
+ > .card {
173
+ // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
174
+ flex: 1 0 0%;
175
+ margin-bottom: 0;
176
+
177
+ + .card {
178
+ margin-left: 0;
179
+ border-left: 0;
180
+ }
181
+
182
+ // Handle rounded corners
183
+ @if $enable-rounded {
184
+ &:not(:last-child) {
185
+ @include border-end-radius(0);
186
+
187
+ .card-img-top,
188
+ .card-header {
189
+ // stylelint-disable-next-line property-disallowed-list
190
+ border-top-right-radius: 0;
191
+ }
192
+ .card-img-bottom,
193
+ .card-footer {
194
+ // stylelint-disable-next-line property-disallowed-list
195
+ border-bottom-right-radius: 0;
196
+ }
197
+ }
198
+
199
+ &:not(:first-child) {
200
+ @include border-start-radius(0);
201
+
202
+ .card-img-top,
203
+ .card-header {
204
+ // stylelint-disable-next-line property-disallowed-list
205
+ border-top-left-radius: 0;
206
+ }
207
+ .card-img-bottom,
208
+ .card-footer {
209
+ // stylelint-disable-next-line property-disallowed-list
210
+ border-bottom-left-radius: 0;
211
+ }
212
+ }
213
+ }
214
+ }
215
+ }
216
+ }
@@ -0,0 +1,229 @@
1
+ // Notes on the classes:
2
+ //
3
+ // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
4
+ // even when their scroll action started on a carousel, but for compatibility (with Firefox)
5
+ // we're preventing all actions instead
6
+ // 2. The .carousel-item-start and .carousel-item-end is used to indicate where
7
+ // the active slide is heading.
8
+ // 3. .active.carousel-item is the current slide.
9
+ // 4. .active.carousel-item-start and .active.carousel-item-end is the current
10
+ // slide in its in-transition state. Only one of these occurs at a time.
11
+ // 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
12
+ // is the upcoming slide in transition.
13
+
14
+ .carousel {
15
+ position: relative;
16
+ }
17
+
18
+ .carousel.pointer-event {
19
+ touch-action: pan-y;
20
+ }
21
+
22
+ .carousel-inner {
23
+ position: relative;
24
+ width: 100%;
25
+ overflow: hidden;
26
+ @include clearfix();
27
+ }
28
+
29
+ .carousel-item {
30
+ position: relative;
31
+ display: none;
32
+ float: left;
33
+ width: 100%;
34
+ margin-right: -100%;
35
+ backface-visibility: hidden;
36
+ @include transition($carousel-transition);
37
+ }
38
+
39
+ .carousel-item.active,
40
+ .carousel-item-next,
41
+ .carousel-item-prev {
42
+ display: block;
43
+ }
44
+
45
+ /* rtl:begin:ignore */
46
+ .carousel-item-next:not(.carousel-item-start),
47
+ .active.carousel-item-end {
48
+ transform: translateX(100%);
49
+ }
50
+
51
+ .carousel-item-prev:not(.carousel-item-end),
52
+ .active.carousel-item-start {
53
+ transform: translateX(-100%);
54
+ }
55
+
56
+ /* rtl:end:ignore */
57
+
58
+
59
+ //
60
+ // Alternate transitions
61
+ //
62
+
63
+ .carousel-fade {
64
+ .carousel-item {
65
+ opacity: 0;
66
+ transition-property: opacity;
67
+ transform: none;
68
+ }
69
+
70
+ .carousel-item.active,
71
+ .carousel-item-next.carousel-item-start,
72
+ .carousel-item-prev.carousel-item-end {
73
+ z-index: 1;
74
+ opacity: 1;
75
+ }
76
+
77
+ .active.carousel-item-start,
78
+ .active.carousel-item-end {
79
+ z-index: 0;
80
+ opacity: 0;
81
+ @include transition(opacity 0s $carousel-transition-duration);
82
+ }
83
+ }
84
+
85
+
86
+ //
87
+ // Left/right controls for nav
88
+ //
89
+
90
+ .carousel-control-prev,
91
+ .carousel-control-next {
92
+ position: absolute;
93
+ top: 0;
94
+ bottom: 0;
95
+ z-index: 1;
96
+ // Use flex for alignment (1-3)
97
+ display: flex; // 1. allow flex styles
98
+ align-items: center; // 2. vertically center contents
99
+ justify-content: center; // 3. horizontally center contents
100
+ width: $carousel-control-width;
101
+ padding: 0;
102
+ color: $carousel-control-color;
103
+ text-align: center;
104
+ background: none;
105
+ border: 0;
106
+ opacity: $carousel-control-opacity;
107
+ @include transition($carousel-control-transition);
108
+
109
+ // Hover/focus state
110
+ &:hover,
111
+ &:focus {
112
+ color: $carousel-control-color;
113
+ text-decoration: none;
114
+ outline: 0;
115
+ opacity: $carousel-control-hover-opacity;
116
+ }
117
+ }
118
+ .carousel-control-prev {
119
+ left: 0;
120
+ background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
121
+ }
122
+ .carousel-control-next {
123
+ right: 0;
124
+ background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
125
+ }
126
+
127
+ // Icons for within
128
+ .carousel-control-prev-icon,
129
+ .carousel-control-next-icon {
130
+ display: inline-block;
131
+ width: $carousel-control-icon-width;
132
+ height: $carousel-control-icon-width;
133
+ background-repeat: no-repeat;
134
+ background-position: 50%;
135
+ background-size: 100% 100%;
136
+ }
137
+
138
+ /* rtl:options: {
139
+ "autoRename": true,
140
+ "stringMap":[ {
141
+ "name" : "prev-next",
142
+ "search" : "prev",
143
+ "replace" : "next"
144
+ } ]
145
+ } */
146
+ .carousel-control-prev-icon {
147
+ background-image: escape-svg($carousel-control-prev-icon-bg);
148
+ }
149
+ .carousel-control-next-icon {
150
+ background-image: escape-svg($carousel-control-next-icon-bg);
151
+ }
152
+
153
+ // Optional indicator pips/controls
154
+ //
155
+ // Add a container (such as a list) with the following class and add an item (ideally a focusable control,
156
+ // like a button) with data-bs-target for each slide your carousel holds.
157
+
158
+ .carousel-indicators {
159
+ position: absolute;
160
+ right: 0;
161
+ bottom: 0;
162
+ left: 0;
163
+ z-index: 2;
164
+ display: flex;
165
+ justify-content: center;
166
+ padding: 0;
167
+ // Use the .carousel-control's width as margin so we don't overlay those
168
+ margin-right: $carousel-control-width;
169
+ margin-bottom: 1rem;
170
+ margin-left: $carousel-control-width;
171
+ list-style: none;
172
+
173
+ [data-bs-target] {
174
+ box-sizing: content-box;
175
+ flex: 0 1 auto;
176
+ width: $carousel-indicator-width;
177
+ height: $carousel-indicator-height;
178
+ padding: 0;
179
+ margin-right: $carousel-indicator-spacer;
180
+ margin-left: $carousel-indicator-spacer;
181
+ text-indent: -999px;
182
+ cursor: pointer;
183
+ background-color: $carousel-indicator-active-bg;
184
+ background-clip: padding-box;
185
+ border: 0;
186
+ // Use transparent borders to increase the hit area by 10px on top and bottom.
187
+ border-top: $carousel-indicator-hit-area-height solid transparent;
188
+ border-bottom: $carousel-indicator-hit-area-height solid transparent;
189
+ opacity: $carousel-indicator-opacity;
190
+ @include transition($carousel-indicator-transition);
191
+ }
192
+
193
+ .active {
194
+ opacity: $carousel-indicator-active-opacity;
195
+ }
196
+ }
197
+
198
+
199
+ // Optional captions
200
+ //
201
+ //
202
+
203
+ .carousel-caption {
204
+ position: absolute;
205
+ right: (100% - $carousel-caption-width) * .5;
206
+ bottom: $carousel-caption-spacer;
207
+ left: (100% - $carousel-caption-width) * .5;
208
+ padding-top: $carousel-caption-padding-y;
209
+ padding-bottom: $carousel-caption-padding-y;
210
+ color: $carousel-caption-color;
211
+ text-align: center;
212
+ }
213
+
214
+ // Dark mode carousel
215
+
216
+ .carousel-dark {
217
+ .carousel-control-prev-icon,
218
+ .carousel-control-next-icon {
219
+ filter: $carousel-dark-control-icon-filter;
220
+ }
221
+
222
+ .carousel-indicators [data-bs-target] {
223
+ background-color: $carousel-dark-indicator-active-bg;
224
+ }
225
+
226
+ .carousel-caption {
227
+ color: $carousel-dark-caption-color;
228
+ }
229
+ }