cm-admin 1.1.9 → 1.2.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (150) 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 +36 -225
  6. data/app/assets/stylesheets/cm_admin/base/navbar.scss +2 -2
  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 +24 -46
  10. data/app/assets/stylesheets/cm_admin/components/_buttons.scss +15 -13
  11. data/app/assets/stylesheets/cm_admin/components/_input.scss +0 -24
  12. data/app/assets/stylesheets/cm_admin/components/_modal.scss +7 -30
  13. data/app/assets/stylesheets/cm_admin/components/_status-tag.scss +37 -9
  14. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_accordion.scss +158 -0
  15. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_alert.scss +68 -0
  16. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_badge.scss +38 -0
  17. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_breadcrumb.scss +40 -0
  18. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_button-group.scss +142 -0
  19. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_buttons.scss +207 -0
  20. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_card.scss +239 -0
  21. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_carousel.scss +244 -0
  22. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_close.scss +63 -0
  23. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_containers.scss +41 -0
  24. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_dropdown.scss +250 -0
  25. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_forms.scss +9 -0
  26. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_functions.scss +302 -0
  27. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_grid.scss +39 -0
  28. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_helpers.scss +12 -0
  29. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_images.scss +42 -0
  30. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_list-group.scss +197 -0
  31. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_maps.scss +174 -0
  32. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_mixins.scss +42 -0
  33. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_modal.scss +237 -0
  34. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_nav.scss +197 -0
  35. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_navbar.scss +289 -0
  36. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_offcanvas.scss +146 -0
  37. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_pagination.scss +109 -0
  38. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_placeholders.scss +51 -0
  39. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_popover.scss +196 -0
  40. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_progress.scss +68 -0
  41. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_reboot.scss +610 -0
  42. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_root.scss +184 -0
  43. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_spinners.scss +85 -0
  44. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_tables.scss +171 -0
  45. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_toasts.scss +73 -0
  46. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_tooltip.scss +119 -0
  47. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_transitions.scss +27 -0
  48. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_type.scss +106 -0
  49. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_utilities.scss +806 -0
  50. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_variables-dark.scss +85 -0
  51. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/_variables.scss +1745 -0
  52. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/bootstrap-grid.scss +62 -0
  53. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/bootstrap-reboot.scss +10 -0
  54. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/bootstrap-utilities.scss +19 -0
  55. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/bootstrap.scss +52 -0
  56. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/forms/_floating-labels.scss +95 -0
  57. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/forms/_form-check.scss +188 -0
  58. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/forms/_form-control.scss +214 -0
  59. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/forms/_form-range.scss +91 -0
  60. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/forms/_form-select.scss +80 -0
  61. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/forms/_form-text.scss +11 -0
  62. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/forms/_input-group.scss +132 -0
  63. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/forms/_labels.scss +36 -0
  64. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/forms/_validation.scss +12 -0
  65. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_clearfix.scss +3 -0
  66. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_color-bg.scss +7 -0
  67. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_colored-links.scss +30 -0
  68. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_focus-ring.scss +5 -0
  69. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_icon-link.scss +25 -0
  70. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_position.scss +36 -0
  71. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_ratio.scss +26 -0
  72. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_stacks.scss +15 -0
  73. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_stretched-link.scss +15 -0
  74. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_text-truncation.scss +7 -0
  75. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_visually-hidden.scss +8 -0
  76. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/helpers/_vr.scss +8 -0
  77. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_alert.scss +18 -0
  78. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_backdrop.scss +14 -0
  79. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_banner.scss +7 -0
  80. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_border-radius.scss +78 -0
  81. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_box-shadow.scss +18 -0
  82. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_breakpoints.scss +127 -0
  83. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_buttons.scss +70 -0
  84. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_caret.scss +69 -0
  85. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_clearfix.scss +9 -0
  86. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_color-mode.scss +21 -0
  87. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_color-scheme.scss +7 -0
  88. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_container.scss +11 -0
  89. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_deprecate.scss +10 -0
  90. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_forms.scss +153 -0
  91. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_gradients.scss +47 -0
  92. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_grid.scss +151 -0
  93. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_image.scss +16 -0
  94. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_list-group.scss +26 -0
  95. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_lists.scss +7 -0
  96. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_pagination.scss +10 -0
  97. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_reset-text.scss +17 -0
  98. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_resize.scss +6 -0
  99. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_table-variants.scss +24 -0
  100. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_text-truncate.scss +8 -0
  101. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_transition.scss +26 -0
  102. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_utilities.scss +97 -0
  103. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/mixins/_visually-hidden.scss +33 -0
  104. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/tests/jasmine.js +16 -0
  105. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/tests/mixins/_color-modes.test.scss +69 -0
  106. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/tests/mixins/_media-query-color-mode-full.test.scss +8 -0
  107. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/tests/mixins/_utilities.test.scss +393 -0
  108. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/tests/sass-true/register.js +14 -0
  109. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/tests/sass-true/runner.js +17 -0
  110. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/tests/utilities/_api.test.scss +75 -0
  111. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/utilities/_api.scss +47 -0
  112. data/app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/vendor/_rfs.scss +348 -0
  113. data/app/controllers/cm_admin/resource_controller.rb +22 -5
  114. data/app/helpers/cm_admin/application_helper.rb +4 -4
  115. data/app/views/cm_admin/main/_actions_dropdown.html.slim +2 -2
  116. data/app/views/cm_admin/main/_cm_pagy_nav.html.slim +7 -7
  117. data/app/views/cm_admin/main/_custom_action_modal_form.html.slim +6 -0
  118. data/app/views/cm_admin/main/_nested_fields.html.slim +7 -27
  119. data/app/views/cm_admin/main/_nested_table_form.html.slim +17 -8
  120. data/app/views/cm_admin/main/_nested_table_section.html.slim +17 -0
  121. data/app/views/cm_admin/main/_show_section.html.slim +10 -0
  122. data/app/views/cm_admin/main/_table.html.slim +3 -4
  123. data/app/views/cm_admin/main/_tabs.html.slim +1 -1
  124. data/app/views/cm_admin/main/_top_navbar.html.slim +11 -4
  125. data/app/views/cm_admin/main/associated_show.html.slim +5 -4
  126. data/app/views/cm_admin/main/edit.html.slim +18 -18
  127. data/app/views/cm_admin/main/history.html.slim +3 -3
  128. data/app/views/cm_admin/main/import_form.html.slim +1 -1
  129. data/app/views/cm_admin/main/new.html.slim +17 -17
  130. data/app/views/cm_admin/main/show.html.slim +10 -10
  131. data/app/views/layouts/_custom_action_modal.html.slim +11 -0
  132. data/app/views/layouts/_custom_action_modals.html.slim +13 -9
  133. data/app/views/layouts/_destroy_action_modal.html.slim +16 -0
  134. data/app/views/layouts/cm_admin.html.slim +5 -5
  135. data/config/routes.rb +1 -3
  136. data/lib/cm_admin/model.rb +1 -0
  137. data/lib/cm_admin/models/custom_action.rb +6 -0
  138. data/lib/cm_admin/models/dsl_method.rb +9 -4
  139. data/lib/cm_admin/models/field.rb +2 -1
  140. data/lib/cm_admin/models/form_field.rb +2 -1
  141. data/lib/cm_admin/models/row.rb +40 -0
  142. data/lib/cm_admin/models/section.rb +20 -3
  143. data/lib/cm_admin/version.rb +1 -1
  144. data/lib/cm_admin/view_helpers/field_display_helper.rb +3 -3
  145. data/lib/cm_admin/view_helpers/filter_helper.rb +9 -11
  146. data/lib/cm_admin/view_helpers/form_field_helper.rb +42 -14
  147. data/lib/cm_admin/view_helpers/form_helper.rb +63 -22
  148. data/lib/cm_admin/view_helpers/page_info_helper.rb +4 -23
  149. data/lib/cm_admin/view_helpers.rb +1 -1
  150. metadata +107 -2
@@ -0,0 +1,142 @@
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
+ @include border-radius($btn-border-radius);
38
+
39
+ // Prevent double borders when buttons are next to each other
40
+ > :not(.btn-check:first-child) + .btn,
41
+ > .btn-group:not(:first-child) {
42
+ margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
43
+ }
44
+
45
+ // Reset rounded corners
46
+ > .btn:not(:last-child):not(.dropdown-toggle),
47
+ > .btn.dropdown-toggle-split:first-child,
48
+ > .btn-group:not(:last-child) > .btn {
49
+ @include border-end-radius(0);
50
+ }
51
+
52
+ // The left radius should be 0 if the button is:
53
+ // - the "third or more" child
54
+ // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
55
+ // - part of a btn-group which isn't the first child
56
+ > .btn:nth-child(n + 3),
57
+ > :not(.btn-check) + .btn,
58
+ > .btn-group:not(:first-child) > .btn {
59
+ @include border-start-radius(0);
60
+ }
61
+ }
62
+
63
+ // Sizing
64
+ //
65
+ // Remix the default button sizing classes into new ones for easier manipulation.
66
+
67
+ .btn-group-sm > .btn { @extend .btn-sm; }
68
+ .btn-group-lg > .btn { @extend .btn-lg; }
69
+
70
+
71
+ //
72
+ // Split button dropdowns
73
+ //
74
+
75
+ .dropdown-toggle-split {
76
+ padding-right: $btn-padding-x * .75;
77
+ padding-left: $btn-padding-x * .75;
78
+
79
+ &::after,
80
+ .dropup &::after,
81
+ .dropend &::after {
82
+ margin-left: 0;
83
+ }
84
+
85
+ .dropstart &::before {
86
+ margin-right: 0;
87
+ }
88
+ }
89
+
90
+ .btn-sm + .dropdown-toggle-split {
91
+ padding-right: $btn-padding-x-sm * .75;
92
+ padding-left: $btn-padding-x-sm * .75;
93
+ }
94
+
95
+ .btn-lg + .dropdown-toggle-split {
96
+ padding-right: $btn-padding-x-lg * .75;
97
+ padding-left: $btn-padding-x-lg * .75;
98
+ }
99
+
100
+
101
+ // The clickable button for toggling the menu
102
+ // Set the same inset shadow as the :active state
103
+ .btn-group.show .dropdown-toggle {
104
+ @include box-shadow($btn-active-box-shadow);
105
+
106
+ // Show no shadow for `.btn-link` since it has no other button styles.
107
+ &.btn-link {
108
+ @include box-shadow(none);
109
+ }
110
+ }
111
+
112
+
113
+ //
114
+ // Vertical button groups
115
+ //
116
+
117
+ .btn-group-vertical {
118
+ flex-direction: column;
119
+ align-items: flex-start;
120
+ justify-content: center;
121
+
122
+ > .btn,
123
+ > .btn-group {
124
+ width: 100%;
125
+ }
126
+
127
+ > .btn:not(:first-child),
128
+ > .btn-group:not(:first-child) {
129
+ margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
130
+ }
131
+
132
+ // Reset rounded corners
133
+ > .btn:not(:last-child):not(.dropdown-toggle),
134
+ > .btn-group:not(:last-child) > .btn {
135
+ @include border-bottom-radius(0);
136
+ }
137
+
138
+ > .btn ~ .btn,
139
+ > .btn-group:not(:first-child) > .btn {
140
+ @include border-top-radius(0);
141
+ }
142
+ }
@@ -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
+ }