cm-admin 1.1.9 → 1.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (145) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +1 -1
  3. data/app/assets/javascripts/cm_admin/scaffolds.js +6 -0
  4. data/app/assets/javascripts/cm_admin/shared_scaffolds.js +97 -81
  5. data/app/assets/stylesheets/cm_admin/base/form.scss +31 -225
  6. data/app/assets/stylesheets/cm_admin/base/navbar.scss +1 -1
  7. data/app/assets/stylesheets/cm_admin/base/scaffold.scss +8 -5
  8. data/app/assets/stylesheets/cm_admin/base/show.scss +15 -22
  9. data/app/assets/stylesheets/cm_admin/base/table.scss +6 -0
  10. data/app/assets/stylesheets/cm_admin/components/_buttons.scss +1 -1
  11. data/app/assets/stylesheets/cm_admin/components/_modal.scss +7 -30
  12. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_accordion.scss +158 -0
  13. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_alert.scss +68 -0
  14. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_badge.scss +38 -0
  15. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_breadcrumb.scss +40 -0
  16. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_button-group.scss +142 -0
  17. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_buttons.scss +207 -0
  18. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_card.scss +239 -0
  19. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_carousel.scss +244 -0
  20. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_close.scss +63 -0
  21. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_containers.scss +41 -0
  22. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_dropdown.scss +250 -0
  23. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_forms.scss +9 -0
  24. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_functions.scss +302 -0
  25. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_grid.scss +39 -0
  26. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_helpers.scss +12 -0
  27. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_images.scss +42 -0
  28. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_list-group.scss +197 -0
  29. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_maps.scss +174 -0
  30. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_mixins.scss +42 -0
  31. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_modal.scss +237 -0
  32. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_nav.scss +197 -0
  33. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_navbar.scss +289 -0
  34. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_offcanvas.scss +146 -0
  35. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_pagination.scss +109 -0
  36. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_placeholders.scss +51 -0
  37. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_popover.scss +196 -0
  38. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_progress.scss +68 -0
  39. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_reboot.scss +610 -0
  40. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_root.scss +184 -0
  41. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_spinners.scss +85 -0
  42. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_tables.scss +171 -0
  43. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_toasts.scss +73 -0
  44. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_tooltip.scss +119 -0
  45. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_transitions.scss +27 -0
  46. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_type.scss +106 -0
  47. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_utilities.scss +806 -0
  48. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_variables-dark.scss +85 -0
  49. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_variables.scss +1745 -0
  50. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/bootstrap-grid.scss +62 -0
  51. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/bootstrap-reboot.scss +10 -0
  52. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/bootstrap-utilities.scss +19 -0
  53. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/bootstrap.scss +52 -0
  54. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/forms/_floating-labels.scss +95 -0
  55. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/forms/_form-check.scss +188 -0
  56. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/forms/_form-control.scss +214 -0
  57. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/forms/_form-range.scss +91 -0
  58. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/forms/_form-select.scss +80 -0
  59. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/forms/_form-text.scss +11 -0
  60. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/forms/_input-group.scss +132 -0
  61. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/forms/_labels.scss +36 -0
  62. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/forms/_validation.scss +12 -0
  63. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_clearfix.scss +3 -0
  64. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_color-bg.scss +7 -0
  65. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_colored-links.scss +30 -0
  66. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_focus-ring.scss +5 -0
  67. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_icon-link.scss +25 -0
  68. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_position.scss +36 -0
  69. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_ratio.scss +26 -0
  70. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_stacks.scss +15 -0
  71. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_stretched-link.scss +15 -0
  72. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_text-truncation.scss +7 -0
  73. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_visually-hidden.scss +8 -0
  74. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_vr.scss +8 -0
  75. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_alert.scss +18 -0
  76. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_backdrop.scss +14 -0
  77. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_banner.scss +7 -0
  78. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_border-radius.scss +78 -0
  79. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_box-shadow.scss +18 -0
  80. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_breakpoints.scss +127 -0
  81. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_buttons.scss +70 -0
  82. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_caret.scss +69 -0
  83. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_clearfix.scss +9 -0
  84. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_color-mode.scss +21 -0
  85. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_color-scheme.scss +7 -0
  86. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_container.scss +11 -0
  87. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_deprecate.scss +10 -0
  88. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_forms.scss +153 -0
  89. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_gradients.scss +47 -0
  90. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_grid.scss +151 -0
  91. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_image.scss +16 -0
  92. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_list-group.scss +26 -0
  93. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_lists.scss +7 -0
  94. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_pagination.scss +10 -0
  95. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_reset-text.scss +17 -0
  96. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_resize.scss +6 -0
  97. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_table-variants.scss +24 -0
  98. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_text-truncate.scss +8 -0
  99. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_transition.scss +26 -0
  100. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_utilities.scss +97 -0
  101. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_visually-hidden.scss +33 -0
  102. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/tests/jasmine.js +16 -0
  103. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/tests/mixins/_color-modes.test.scss +69 -0
  104. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/tests/mixins/_media-query-color-mode-full.test.scss +8 -0
  105. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/tests/mixins/_utilities.test.scss +393 -0
  106. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/tests/sass-true/register.js +14 -0
  107. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/tests/sass-true/runner.js +17 -0
  108. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/tests/utilities/_api.test.scss +75 -0
  109. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/utilities/_api.scss +47 -0
  110. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/vendor/_rfs.scss +348 -0
  111. data/app/controllers/cm_admin/resource_controller.rb +22 -5
  112. data/app/helpers/cm_admin/application_helper.rb +4 -4
  113. data/app/views/cm_admin/main/_actions_dropdown.html.slim +2 -2
  114. data/app/views/cm_admin/main/_custom_action_modal_form.html.slim +6 -0
  115. data/app/views/cm_admin/main/_nested_fields.html.slim +36 -17
  116. data/app/views/cm_admin/main/_nested_table_form.html.slim +17 -8
  117. data/app/views/cm_admin/main/_nested_table_section.html.slim +17 -0
  118. data/app/views/cm_admin/main/_show_section.html.slim +10 -0
  119. data/app/views/cm_admin/main/_tabs.html.slim +1 -1
  120. data/app/views/cm_admin/main/_top_navbar.html.slim +9 -3
  121. data/app/views/cm_admin/main/associated_show.html.slim +5 -4
  122. data/app/views/cm_admin/main/edit.html.slim +18 -18
  123. data/app/views/cm_admin/main/history.html.slim +3 -3
  124. data/app/views/cm_admin/main/import_form.html.slim +1 -1
  125. data/app/views/cm_admin/main/new.html.slim +17 -17
  126. data/app/views/cm_admin/main/show.html.slim +10 -10
  127. data/app/views/layouts/_custom_action_modal.html.slim +11 -0
  128. data/app/views/layouts/_custom_action_modals.html.slim +13 -9
  129. data/app/views/layouts/_destroy_action_modal.html.slim +16 -0
  130. data/app/views/layouts/cm_admin.html.slim +5 -5
  131. data/config/routes.rb +1 -3
  132. data/lib/cm_admin/model.rb +1 -0
  133. data/lib/cm_admin/models/custom_action.rb +6 -0
  134. data/lib/cm_admin/models/dsl_method.rb +9 -4
  135. data/lib/cm_admin/models/field.rb +2 -1
  136. data/lib/cm_admin/models/form_field.rb +2 -1
  137. data/lib/cm_admin/models/row.rb +40 -0
  138. data/lib/cm_admin/models/section.rb +20 -3
  139. data/lib/cm_admin/version.rb +1 -1
  140. data/lib/cm_admin/view_helpers/field_display_helper.rb +3 -3
  141. data/lib/cm_admin/view_helpers/form_field_helper.rb +40 -14
  142. data/lib/cm_admin/view_helpers/form_helper.rb +59 -22
  143. data/lib/cm_admin/view_helpers/page_info_helper.rb +4 -4
  144. data/lib/cm_admin/view_helpers.rb +1 -1
  145. metadata +107 -2
@@ -0,0 +1,207 @@
1
+ //
2
+ // Base styles
3
+ //
4
+
5
+ .btn {
6
+ // scss-docs-start btn-css-vars
7
+ --#{$prefix}btn-padding-x: #{$btn-padding-x};
8
+ --#{$prefix}btn-padding-y: #{$btn-padding-y};
9
+ --#{$prefix}btn-font-family: #{$btn-font-family};
10
+ @include rfs($btn-font-size, --#{$prefix}btn-font-size);
11
+ --#{$prefix}btn-font-weight: #{$btn-font-weight};
12
+ --#{$prefix}btn-line-height: #{$btn-line-height};
13
+ --#{$prefix}btn-color: #{$btn-color};
14
+ --#{$prefix}btn-bg: transparent;
15
+ --#{$prefix}btn-border-width: #{$btn-border-width};
16
+ --#{$prefix}btn-border-color: transparent;
17
+ --#{$prefix}btn-border-radius: #{$btn-border-radius};
18
+ --#{$prefix}btn-hover-border-color: transparent;
19
+ --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
20
+ --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
21
+ --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
22
+ // scss-docs-end btn-css-vars
23
+
24
+ display: inline-block;
25
+ padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
26
+ font-family: var(--#{$prefix}btn-font-family);
27
+ @include font-size(var(--#{$prefix}btn-font-size));
28
+ font-weight: var(--#{$prefix}btn-font-weight);
29
+ line-height: var(--#{$prefix}btn-line-height);
30
+ color: var(--#{$prefix}btn-color);
31
+ text-align: center;
32
+ text-decoration: if($link-decoration == none, null, none);
33
+ white-space: $btn-white-space;
34
+ vertical-align: middle;
35
+ cursor: if($enable-button-pointers, pointer, null);
36
+ user-select: none;
37
+ border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
38
+ @include border-radius(var(--#{$prefix}btn-border-radius));
39
+ @include gradient-bg(var(--#{$prefix}btn-bg));
40
+ @include box-shadow(var(--#{$prefix}btn-box-shadow));
41
+ @include transition($btn-transition);
42
+
43
+ &:hover {
44
+ color: var(--#{$prefix}btn-hover-color);
45
+ text-decoration: if($link-hover-decoration == underline, none, null);
46
+ background-color: var(--#{$prefix}btn-hover-bg);
47
+ border-color: var(--#{$prefix}btn-hover-border-color);
48
+ }
49
+
50
+ .btn-check + &:hover {
51
+ // override for the checkbox/radio buttons
52
+ color: var(--#{$prefix}btn-color);
53
+ background-color: var(--#{$prefix}btn-bg);
54
+ border-color: var(--#{$prefix}btn-border-color);
55
+ }
56
+
57
+ &:focus-visible {
58
+ color: var(--#{$prefix}btn-hover-color);
59
+ @include gradient-bg(var(--#{$prefix}btn-hover-bg));
60
+ border-color: var(--#{$prefix}btn-hover-border-color);
61
+ outline: 0;
62
+ // Avoid using mixin so we can pass custom focus shadow properly
63
+ @if $enable-shadows {
64
+ box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
65
+ } @else {
66
+ box-shadow: var(--#{$prefix}btn-focus-box-shadow);
67
+ }
68
+ }
69
+
70
+ .btn-check:focus-visible + & {
71
+ border-color: var(--#{$prefix}btn-hover-border-color);
72
+ outline: 0;
73
+ // Avoid using mixin so we can pass custom focus shadow properly
74
+ @if $enable-shadows {
75
+ box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
76
+ } @else {
77
+ box-shadow: var(--#{$prefix}btn-focus-box-shadow);
78
+ }
79
+ }
80
+
81
+ .btn-check:checked + &,
82
+ :not(.btn-check) + &:active,
83
+ &:first-child:active,
84
+ &.active,
85
+ &.show {
86
+ color: var(--#{$prefix}btn-active-color);
87
+ background-color: var(--#{$prefix}btn-active-bg);
88
+ // Remove CSS gradients if they're enabled
89
+ background-image: if($enable-gradients, none, null);
90
+ border-color: var(--#{$prefix}btn-active-border-color);
91
+ @include box-shadow(var(--#{$prefix}btn-active-shadow));
92
+
93
+ &:focus-visible {
94
+ // Avoid using mixin so we can pass custom focus shadow properly
95
+ @if $enable-shadows {
96
+ box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
97
+ } @else {
98
+ box-shadow: var(--#{$prefix}btn-focus-box-shadow);
99
+ }
100
+ }
101
+ }
102
+
103
+ &:disabled,
104
+ &.disabled,
105
+ fieldset:disabled & {
106
+ color: var(--#{$prefix}btn-disabled-color);
107
+ pointer-events: none;
108
+ background-color: var(--#{$prefix}btn-disabled-bg);
109
+ background-image: if($enable-gradients, none, null);
110
+ border-color: var(--#{$prefix}btn-disabled-border-color);
111
+ opacity: var(--#{$prefix}btn-disabled-opacity);
112
+ @include box-shadow(none);
113
+ }
114
+ }
115
+
116
+
117
+ //
118
+ // Alternate buttons
119
+ //
120
+
121
+ // scss-docs-start btn-variant-loops
122
+ @each $color, $value in $theme-colors {
123
+ .btn-#{$color} {
124
+ @if $color == "light" {
125
+ @include button-variant(
126
+ $value,
127
+ $value,
128
+ $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
129
+ $hover-border: shade-color($value, $btn-hover-border-shade-amount),
130
+ $active-background: shade-color($value, $btn-active-bg-shade-amount),
131
+ $active-border: shade-color($value, $btn-active-border-shade-amount)
132
+ );
133
+ } @else if $color == "dark" {
134
+ @include button-variant(
135
+ $value,
136
+ $value,
137
+ $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
138
+ $hover-border: tint-color($value, $btn-hover-border-tint-amount),
139
+ $active-background: tint-color($value, $btn-active-bg-tint-amount),
140
+ $active-border: tint-color($value, $btn-active-border-tint-amount)
141
+ );
142
+ } @else {
143
+ @include button-variant($value, $value);
144
+ }
145
+ }
146
+ }
147
+
148
+ @each $color, $value in $theme-colors {
149
+ .btn-outline-#{$color} {
150
+ @include button-outline-variant($value);
151
+ }
152
+ }
153
+ // scss-docs-end btn-variant-loops
154
+
155
+
156
+ //
157
+ // Link buttons
158
+ //
159
+
160
+ // Make a button look and behave like a link
161
+ .btn-link {
162
+ --#{$prefix}btn-font-weight: #{$font-weight-normal};
163
+ --#{$prefix}btn-color: #{$btn-link-color};
164
+ --#{$prefix}btn-bg: transparent;
165
+ --#{$prefix}btn-border-color: transparent;
166
+ --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
167
+ --#{$prefix}btn-hover-border-color: transparent;
168
+ --#{$prefix}btn-active-color: #{$btn-link-hover-color};
169
+ --#{$prefix}btn-active-border-color: transparent;
170
+ --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
171
+ --#{$prefix}btn-disabled-border-color: transparent;
172
+ --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
173
+ --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($link-color), $link-color, 15%))};
174
+
175
+ text-decoration: $link-decoration;
176
+ @if $enable-gradients {
177
+ background-image: none;
178
+ }
179
+
180
+ &:hover,
181
+ &:focus-visible {
182
+ text-decoration: $link-hover-decoration;
183
+ }
184
+
185
+ &:focus-visible {
186
+ color: var(--#{$prefix}btn-color);
187
+ }
188
+
189
+ &:hover {
190
+ color: var(--#{$prefix}btn-hover-color);
191
+ }
192
+
193
+ // No need for an active state here
194
+ }
195
+
196
+
197
+ //
198
+ // Button Sizes
199
+ //
200
+
201
+ .btn-lg {
202
+ @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
203
+ }
204
+
205
+ .btn-sm {
206
+ @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
207
+ }
@@ -0,0 +1,239 @@
1
+ //
2
+ // Base styles
3
+ //
4
+
5
+ .card {
6
+ // scss-docs-start card-css-vars
7
+ --#{$prefix}card-spacer-y: #{$card-spacer-y};
8
+ --#{$prefix}card-spacer-x: #{$card-spacer-x};
9
+ --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
10
+ --#{$prefix}card-title-color: #{$card-title-color};
11
+ --#{$prefix}card-subtitle-color: #{$card-subtitle-color};
12
+ --#{$prefix}card-border-width: #{$card-border-width};
13
+ --#{$prefix}card-border-color: #{$card-border-color};
14
+ --#{$prefix}card-border-radius: #{$card-border-radius};
15
+ --#{$prefix}card-box-shadow: #{$card-box-shadow};
16
+ --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
17
+ --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
18
+ --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
19
+ --#{$prefix}card-cap-bg: #{$card-cap-bg};
20
+ --#{$prefix}card-cap-color: #{$card-cap-color};
21
+ --#{$prefix}card-height: #{$card-height};
22
+ --#{$prefix}card-color: #{$card-color};
23
+ --#{$prefix}card-bg: #{$card-bg};
24
+ --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
25
+ --#{$prefix}card-group-margin: #{$card-group-margin};
26
+ // scss-docs-end card-css-vars
27
+
28
+ position: relative;
29
+ display: flex;
30
+ flex-direction: column;
31
+ min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
32
+ height: var(--#{$prefix}card-height);
33
+ color: var(--#{$prefix}body-color);
34
+ word-wrap: break-word;
35
+ background-color: var(--#{$prefix}card-bg);
36
+ background-clip: border-box;
37
+ border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
38
+ @include border-radius(var(--#{$prefix}card-border-radius));
39
+ @include box-shadow(var(--#{$prefix}card-box-shadow));
40
+
41
+ > hr {
42
+ margin-right: 0;
43
+ margin-left: 0;
44
+ }
45
+
46
+ > .list-group {
47
+ border-top: inherit;
48
+ border-bottom: inherit;
49
+
50
+ &:first-child {
51
+ border-top-width: 0;
52
+ @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
53
+ }
54
+
55
+ &:last-child {
56
+ border-bottom-width: 0;
57
+ @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
58
+ }
59
+ }
60
+
61
+ // Due to specificity of the above selector (`.card > .list-group`), we must
62
+ // use a child selector here to prevent double borders.
63
+ > .card-header + .list-group,
64
+ > .list-group + .card-footer {
65
+ border-top: 0;
66
+ }
67
+ }
68
+
69
+ .card-body {
70
+ // Enable `flex-grow: 1` for decks and groups so that card blocks take up
71
+ // as much space as possible, ensuring footers are aligned to the bottom.
72
+ flex: 1 1 auto;
73
+ padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
74
+ color: var(--#{$prefix}card-color);
75
+ }
76
+
77
+ .card-title {
78
+ margin-bottom: var(--#{$prefix}card-title-spacer-y);
79
+ color: var(--#{$prefix}card-title-color);
80
+ }
81
+
82
+ .card-subtitle {
83
+ margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
84
+ margin-bottom: 0;
85
+ color: var(--#{$prefix}card-subtitle-color);
86
+ }
87
+
88
+ .card-text:last-child {
89
+ margin-bottom: 0;
90
+ }
91
+
92
+ .card-link {
93
+ &:hover {
94
+ text-decoration: if($link-hover-decoration == underline, none, null);
95
+ }
96
+
97
+ + .card-link {
98
+ margin-left: var(--#{$prefix}card-spacer-x);
99
+ }
100
+ }
101
+
102
+ //
103
+ // Optional textual caps
104
+ //
105
+
106
+ .card-header {
107
+ padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
108
+ margin-bottom: 0; // Removes the default margin-bottom of <hN>
109
+ color: var(--#{$prefix}card-cap-color);
110
+ background-color: var(--#{$prefix}card-cap-bg);
111
+ border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
112
+
113
+ &:first-child {
114
+ @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
115
+ }
116
+ }
117
+
118
+ .card-footer {
119
+ padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
120
+ color: var(--#{$prefix}card-cap-color);
121
+ background-color: var(--#{$prefix}card-cap-bg);
122
+ border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
123
+
124
+ &:last-child {
125
+ @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
126
+ }
127
+ }
128
+
129
+
130
+ //
131
+ // Header navs
132
+ //
133
+
134
+ .card-header-tabs {
135
+ margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
136
+ margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
137
+ margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
138
+ border-bottom: 0;
139
+
140
+ .nav-link.active {
141
+ background-color: var(--#{$prefix}card-bg);
142
+ border-bottom-color: var(--#{$prefix}card-bg);
143
+ }
144
+ }
145
+
146
+ .card-header-pills {
147
+ margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
148
+ margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
149
+ }
150
+
151
+ // Card image
152
+ .card-img-overlay {
153
+ position: absolute;
154
+ top: 0;
155
+ right: 0;
156
+ bottom: 0;
157
+ left: 0;
158
+ padding: var(--#{$prefix}card-img-overlay-padding);
159
+ @include border-radius(var(--#{$prefix}card-inner-border-radius));
160
+ }
161
+
162
+ .card-img,
163
+ .card-img-top,
164
+ .card-img-bottom {
165
+ width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
166
+ }
167
+
168
+ .card-img,
169
+ .card-img-top {
170
+ @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
171
+ }
172
+
173
+ .card-img,
174
+ .card-img-bottom {
175
+ @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
176
+ }
177
+
178
+
179
+ //
180
+ // Card groups
181
+ //
182
+
183
+ .card-group {
184
+ // The child selector allows nested `.card` within `.card-group`
185
+ // to display properly.
186
+ > .card {
187
+ margin-bottom: var(--#{$prefix}card-group-margin);
188
+ }
189
+
190
+ @include media-breakpoint-up(sm) {
191
+ display: flex;
192
+ flex-flow: row wrap;
193
+ // The child selector allows nested `.card` within `.card-group`
194
+ // to display properly.
195
+ > .card {
196
+ // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
197
+ flex: 1 0 0%;
198
+ margin-bottom: 0;
199
+
200
+ + .card {
201
+ margin-left: 0;
202
+ border-left: 0;
203
+ }
204
+
205
+ // Handle rounded corners
206
+ @if $enable-rounded {
207
+ &:not(:last-child) {
208
+ @include border-end-radius(0);
209
+
210
+ .card-img-top,
211
+ .card-header {
212
+ // stylelint-disable-next-line property-disallowed-list
213
+ border-top-right-radius: 0;
214
+ }
215
+ .card-img-bottom,
216
+ .card-footer {
217
+ // stylelint-disable-next-line property-disallowed-list
218
+ border-bottom-right-radius: 0;
219
+ }
220
+ }
221
+
222
+ &:not(:first-child) {
223
+ @include border-start-radius(0);
224
+
225
+ .card-img-top,
226
+ .card-header {
227
+ // stylelint-disable-next-line property-disallowed-list
228
+ border-top-left-radius: 0;
229
+ }
230
+ .card-img-bottom,
231
+ .card-footer {
232
+ // stylelint-disable-next-line property-disallowed-list
233
+ border-bottom-left-radius: 0;
234
+ }
235
+ }
236
+ }
237
+ }
238
+ }
239
+ }
@@ -0,0 +1,244 @@
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
+ .carousel-item-next:not(.carousel-item-start),
46
+ .active.carousel-item-end {
47
+ transform: translateX(100%);
48
+ }
49
+
50
+ .carousel-item-prev:not(.carousel-item-end),
51
+ .active.carousel-item-start {
52
+ transform: translateX(-100%);
53
+ }
54
+
55
+
56
+ //
57
+ // Alternate transitions
58
+ //
59
+
60
+ .carousel-fade {
61
+ .carousel-item {
62
+ opacity: 0;
63
+ transition-property: opacity;
64
+ transform: none;
65
+ }
66
+
67
+ .carousel-item.active,
68
+ .carousel-item-next.carousel-item-start,
69
+ .carousel-item-prev.carousel-item-end {
70
+ z-index: 1;
71
+ opacity: 1;
72
+ }
73
+
74
+ .active.carousel-item-start,
75
+ .active.carousel-item-end {
76
+ z-index: 0;
77
+ opacity: 0;
78
+ @include transition(opacity 0s $carousel-transition-duration);
79
+ }
80
+ }
81
+
82
+
83
+ //
84
+ // Left/right controls for nav
85
+ //
86
+
87
+ .carousel-control-prev,
88
+ .carousel-control-next {
89
+ position: absolute;
90
+ top: 0;
91
+ bottom: 0;
92
+ z-index: 1;
93
+ // Use flex for alignment (1-3)
94
+ display: flex; // 1. allow flex styles
95
+ align-items: center; // 2. vertically center contents
96
+ justify-content: center; // 3. horizontally center contents
97
+ width: $carousel-control-width;
98
+ padding: 0;
99
+ color: $carousel-control-color;
100
+ text-align: center;
101
+ background: none;
102
+ border: 0;
103
+ opacity: $carousel-control-opacity;
104
+ @include transition($carousel-control-transition);
105
+
106
+ // Hover/focus state
107
+ &:hover,
108
+ &:focus {
109
+ color: $carousel-control-color;
110
+ text-decoration: none;
111
+ outline: 0;
112
+ opacity: $carousel-control-hover-opacity;
113
+ }
114
+ }
115
+ .carousel-control-prev {
116
+ left: 0;
117
+ background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
118
+ }
119
+ .carousel-control-next {
120
+ right: 0;
121
+ background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
122
+ }
123
+
124
+ // Icons for within
125
+ .carousel-control-prev-icon,
126
+ .carousel-control-next-icon {
127
+ display: inline-block;
128
+ width: $carousel-control-icon-width;
129
+ height: $carousel-control-icon-width;
130
+ background-repeat: no-repeat;
131
+ background-position: 50%;
132
+ background-size: 100% 100%;
133
+ }
134
+
135
+ /* rtl:options: {
136
+ "autoRename": true,
137
+ "stringMap":[ {
138
+ "name" : "prev-next",
139
+ "search" : "prev",
140
+ "replace" : "next"
141
+ } ]
142
+ } */
143
+ .carousel-control-prev-icon {
144
+ background-image: escape-svg($carousel-control-prev-icon-bg);
145
+ }
146
+ .carousel-control-next-icon {
147
+ background-image: escape-svg($carousel-control-next-icon-bg);
148
+ }
149
+
150
+ // Optional indicator pips/controls
151
+ //
152
+ // Add a container (such as a list) with the following class and add an item (ideally a focusable control,
153
+ // like a button) with data-bs-target for each slide your carousel holds.
154
+
155
+ .carousel-indicators {
156
+ position: absolute;
157
+ right: 0;
158
+ bottom: 0;
159
+ left: 0;
160
+ z-index: 2;
161
+ display: flex;
162
+ justify-content: center;
163
+ padding: 0;
164
+ // Use the .carousel-control's width as margin so we don't overlay those
165
+ margin-right: $carousel-control-width;
166
+ margin-bottom: 1rem;
167
+ margin-left: $carousel-control-width;
168
+
169
+ [data-bs-target] {
170
+ box-sizing: content-box;
171
+ flex: 0 1 auto;
172
+ width: $carousel-indicator-width;
173
+ height: $carousel-indicator-height;
174
+ padding: 0;
175
+ margin-right: $carousel-indicator-spacer;
176
+ margin-left: $carousel-indicator-spacer;
177
+ text-indent: -999px;
178
+ cursor: pointer;
179
+ background-color: $carousel-indicator-active-bg;
180
+ background-clip: padding-box;
181
+ border: 0;
182
+ // Use transparent borders to increase the hit area by 10px on top and bottom.
183
+ border-top: $carousel-indicator-hit-area-height solid transparent;
184
+ border-bottom: $carousel-indicator-hit-area-height solid transparent;
185
+ opacity: $carousel-indicator-opacity;
186
+ @include transition($carousel-indicator-transition);
187
+ }
188
+
189
+ .active {
190
+ opacity: $carousel-indicator-active-opacity;
191
+ }
192
+ }
193
+
194
+
195
+ // Optional captions
196
+ //
197
+ //
198
+
199
+ .carousel-caption {
200
+ position: absolute;
201
+ right: (100% - $carousel-caption-width) * .5;
202
+ bottom: $carousel-caption-spacer;
203
+ left: (100% - $carousel-caption-width) * .5;
204
+ padding-top: $carousel-caption-padding-y;
205
+ padding-bottom: $carousel-caption-padding-y;
206
+ color: $carousel-caption-color;
207
+ text-align: center;
208
+ }
209
+
210
+ // Dark mode carousel
211
+
212
+ @mixin carousel-dark() {
213
+ .carousel-control-prev-icon,
214
+ .carousel-control-next-icon {
215
+ filter: $carousel-dark-control-icon-filter;
216
+ }
217
+
218
+ .carousel-indicators [data-bs-target] {
219
+ background-color: $carousel-dark-indicator-active-bg;
220
+ }
221
+
222
+ .carousel-caption {
223
+ color: $carousel-dark-caption-color;
224
+ }
225
+ }
226
+
227
+ .carousel-dark {
228
+ @include carousel-dark();
229
+ }
230
+
231
+ @if $enable-dark-mode {
232
+ @include color-mode(dark) {
233
+ @if $color-mode-type == "media-query" {
234
+ .carousel {
235
+ @include carousel-dark();
236
+ }
237
+ } @else {
238
+ .carousel,
239
+ &.carousel {
240
+ @include carousel-dark();
241
+ }
242
+ }
243
+ }
244
+ }