jobdone-shared-files 0.0.1-beta.7 → 0.0.1-beta.71

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 (113) hide show
  1. package/ProjectManagement/projectNavbar.vue +183 -71
  2. package/README.md +76 -6
  3. package/common/directives/popovers.js +11 -0
  4. package/common/directives/tooltip.js +11 -0
  5. package/common/format.js +16 -2
  6. package/lightboxWithOverview.vue +132 -0
  7. package/package.json +4 -3
  8. package/style/scss/Common/Animation.scss +6 -0
  9. package/style/scss/Common/SelectableTable.scss +31 -0
  10. package/style/scss/Common/filepond.scss +28 -0
  11. package/style/scss/Common/thumbnail-group.scss +14 -0
  12. package/style/scss/Layout/LayoutBase.scss +90 -14
  13. package/style/scss/Layout/LayoutMobile.scss +203 -0
  14. package/style/scss/Layout/LayoutProject.scss +3 -5
  15. package/style/scss/Layout/LayoutTwoColumn.scss +3 -3
  16. package/style/scss/Settings/_Mixins.scss +1 -0
  17. package/style/scss/Settings/_MobileVariables.scss +12 -0
  18. package/style/scss/Settings/_basic-import.scss +3 -2
  19. package/style/scss/Settings/_bs-variables.scss +114 -74
  20. package/style/scss/Settings/_custom-variables.scss +5 -1
  21. package/tree.vue +17 -10
  22. package/treeItem.vue +1 -1
  23. package/vueLoadingOverlay.vue +13 -19
  24. package/style/scss/Bootstrap/_accordion.scss +0 -158
  25. package/style/scss/Bootstrap/_alert.scss +0 -68
  26. package/style/scss/Bootstrap/_badge.scss +0 -38
  27. package/style/scss/Bootstrap/_breadcrumb.scss +0 -40
  28. package/style/scss/Bootstrap/_button-group.scss +0 -142
  29. package/style/scss/Bootstrap/_buttons.scss +0 -207
  30. package/style/scss/Bootstrap/_card.scss +0 -238
  31. package/style/scss/Bootstrap/_carousel.scss +0 -238
  32. package/style/scss/Bootstrap/_close.scss +0 -61
  33. package/style/scss/Bootstrap/_containers.scss +0 -41
  34. package/style/scss/Bootstrap/_dropdown.scss +0 -250
  35. package/style/scss/Bootstrap/_forms.scss +0 -9
  36. package/style/scss/Bootstrap/_functions.scss +0 -302
  37. package/style/scss/Bootstrap/_grid.scss +0 -33
  38. package/style/scss/Bootstrap/_helpers.scss +0 -10
  39. package/style/scss/Bootstrap/_images.scss +0 -42
  40. package/style/scss/Bootstrap/_list-group.scss +0 -204
  41. package/style/scss/Bootstrap/_maps.scss +0 -121
  42. package/style/scss/Bootstrap/_mixins.scss +0 -42
  43. package/style/scss/Bootstrap/_modal.scss +0 -237
  44. package/style/scss/Bootstrap/_nav.scss +0 -172
  45. package/style/scss/Bootstrap/_navbar.scss +0 -286
  46. package/style/scss/Bootstrap/_offcanvas.scss +0 -146
  47. package/style/scss/Bootstrap/_pagination.scss +0 -109
  48. package/style/scss/Bootstrap/_placeholders.scss +0 -51
  49. package/style/scss/Bootstrap/_popover.scss +0 -196
  50. package/style/scss/Bootstrap/_progress.scss +0 -68
  51. package/style/scss/Bootstrap/_reboot.scss +0 -610
  52. package/style/scss/Bootstrap/_root.scss +0 -195
  53. package/style/scss/Bootstrap/_spinners.scss +0 -85
  54. package/style/scss/Bootstrap/_tables.scss +0 -164
  55. package/style/scss/Bootstrap/_toasts.scss +0 -73
  56. package/style/scss/Bootstrap/_tooltip.scss +0 -120
  57. package/style/scss/Bootstrap/_transitions.scss +0 -27
  58. package/style/scss/Bootstrap/_type.scss +0 -106
  59. package/style/scss/Bootstrap/_utilities.scss +0 -748
  60. package/style/scss/Bootstrap/_variables-dark.scss +0 -70
  61. package/style/scss/Bootstrap/_variables.scss +0 -1703
  62. package/style/scss/Bootstrap/bootstrap-grid.scss +0 -66
  63. package/style/scss/Bootstrap/bootstrap-reboot.scss +0 -10
  64. package/style/scss/Bootstrap/bootstrap-utilities.scss +0 -19
  65. package/style/scss/Bootstrap/bootstrap.scss +0 -52
  66. package/style/scss/Bootstrap/forms/_floating-labels.scss +0 -90
  67. package/style/scss/Bootstrap/forms/_form-check.scss +0 -188
  68. package/style/scss/Bootstrap/forms/_form-control.scss +0 -201
  69. package/style/scss/Bootstrap/forms/_form-range.scss +0 -91
  70. package/style/scss/Bootstrap/forms/_form-select.scss +0 -81
  71. package/style/scss/Bootstrap/forms/_form-text.scss +0 -11
  72. package/style/scss/Bootstrap/forms/_input-group.scss +0 -132
  73. package/style/scss/Bootstrap/forms/_labels.scss +0 -36
  74. package/style/scss/Bootstrap/forms/_validation.scss +0 -12
  75. package/style/scss/Bootstrap/helpers/_clearfix.scss +0 -3
  76. package/style/scss/Bootstrap/helpers/_color-bg.scss +0 -10
  77. package/style/scss/Bootstrap/helpers/_colored-links.scss +0 -12
  78. package/style/scss/Bootstrap/helpers/_position.scss +0 -36
  79. package/style/scss/Bootstrap/helpers/_ratio.scss +0 -26
  80. package/style/scss/Bootstrap/helpers/_stacks.scss +0 -15
  81. package/style/scss/Bootstrap/helpers/_stretched-link.scss +0 -15
  82. package/style/scss/Bootstrap/helpers/_text-truncation.scss +0 -7
  83. package/style/scss/Bootstrap/helpers/_visually-hidden.scss +0 -8
  84. package/style/scss/Bootstrap/helpers/_vr.scss +0 -8
  85. package/style/scss/Bootstrap/mixins/_alert.scss +0 -18
  86. package/style/scss/Bootstrap/mixins/_backdrop.scss +0 -14
  87. package/style/scss/Bootstrap/mixins/_banner.scss +0 -7
  88. package/style/scss/Bootstrap/mixins/_border-radius.scss +0 -78
  89. package/style/scss/Bootstrap/mixins/_box-shadow.scss +0 -18
  90. package/style/scss/Bootstrap/mixins/_breakpoints.scss +0 -127
  91. package/style/scss/Bootstrap/mixins/_buttons.scss +0 -70
  92. package/style/scss/Bootstrap/mixins/_caret.scss +0 -69
  93. package/style/scss/Bootstrap/mixins/_clearfix.scss +0 -9
  94. package/style/scss/Bootstrap/mixins/_color-mode.scss +0 -21
  95. package/style/scss/Bootstrap/mixins/_color-scheme.scss +0 -7
  96. package/style/scss/Bootstrap/mixins/_container.scss +0 -11
  97. package/style/scss/Bootstrap/mixins/_deprecate.scss +0 -10
  98. package/style/scss/Bootstrap/mixins/_forms.scss +0 -153
  99. package/style/scss/Bootstrap/mixins/_gradients.scss +0 -47
  100. package/style/scss/Bootstrap/mixins/_grid.scss +0 -151
  101. package/style/scss/Bootstrap/mixins/_image.scss +0 -16
  102. package/style/scss/Bootstrap/mixins/_list-group.scss +0 -27
  103. package/style/scss/Bootstrap/mixins/_lists.scss +0 -7
  104. package/style/scss/Bootstrap/mixins/_pagination.scss +0 -10
  105. package/style/scss/Bootstrap/mixins/_reset-text.scss +0 -17
  106. package/style/scss/Bootstrap/mixins/_resize.scss +0 -6
  107. package/style/scss/Bootstrap/mixins/_table-variants.scss +0 -24
  108. package/style/scss/Bootstrap/mixins/_text-truncate.scss +0 -8
  109. package/style/scss/Bootstrap/mixins/_transition.scss +0 -26
  110. package/style/scss/Bootstrap/mixins/_utilities.scss +0 -97
  111. package/style/scss/Bootstrap/mixins/_visually-hidden.scss +0 -29
  112. package/style/scss/Bootstrap/utilities/_api.scss +0 -47
  113. package/style/scss/Bootstrap/vendor/_rfs.scss +0 -354
@@ -1,204 +0,0 @@
1
- // Base class
2
- //
3
- // Easily usable on <ul>, <ol>, or <div>.
4
-
5
- .list-group {
6
- // scss-docs-start list-group-css-vars
7
- --#{$prefix}list-group-color: #{$list-group-color};
8
- --#{$prefix}list-group-bg: #{$list-group-bg};
9
- --#{$prefix}list-group-border-color: #{$list-group-border-color};
10
- --#{$prefix}list-group-border-width: #{$list-group-border-width};
11
- --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
12
- --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
13
- --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
14
- --#{$prefix}list-group-action-color: #{$list-group-action-color};
15
- --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
16
- --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
17
- --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
18
- --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
19
- --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
20
- --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
21
- --#{$prefix}list-group-active-color: #{$list-group-active-color};
22
- --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
23
- --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
24
- // scss-docs-end list-group-css-vars
25
-
26
- display: flex;
27
- flex-direction: column;
28
-
29
- // No need to set list-style: none; since .list-group-item is block level
30
- padding-left: 0; // reset padding because ul and ol
31
- margin-bottom: 0;
32
- @include border-radius(var(--#{$prefix}list-group-border-radius));
33
- }
34
-
35
- .list-group-numbered {
36
- list-style-type: none;
37
- counter-reset: section;
38
-
39
- > .list-group-item::before {
40
- // Increments only this instance of the section counter
41
- content: counters(section, ".") ". ";
42
- counter-increment: section;
43
- }
44
- }
45
-
46
- // Interactive list items
47
- //
48
- // Use anchor or button elements instead of `li`s or `div`s to create interactive
49
- // list items. Includes an extra `.active` modifier class for selected items.
50
-
51
- .list-group-item-action {
52
- width: 100%; // For `<button>`s (anchors become 100% by default though)
53
- color: var(--#{$prefix}list-group-action-color);
54
- text-align: inherit; // For `<button>`s (anchors inherit)
55
-
56
- // Hover state
57
- &:hover,
58
- &:focus {
59
- z-index: 1; // Place hover/focus items above their siblings for proper border styling
60
- color: var(--#{$prefix}list-group-action-hover-color);
61
- text-decoration: none;
62
- background-color: var(--#{$prefix}list-group-action-hover-bg);
63
- }
64
-
65
- &:active {
66
- color: var(--#{$prefix}list-group-action-active-color);
67
- background-color: var(--#{$prefix}list-group-action-active-bg);
68
- }
69
- }
70
-
71
- // Individual list items
72
- //
73
- // Use on `li`s or `div`s within the `.list-group` parent.
74
-
75
- .list-group-item {
76
- position: relative;
77
- display: block;
78
- padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
79
- color: var(--#{$prefix}list-group-color);
80
- text-decoration: if($link-decoration == none, null, none);
81
- background-color: var(--#{$prefix}list-group-bg);
82
- border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
83
-
84
- &:first-child {
85
- @include border-top-radius(inherit);
86
- }
87
-
88
- &:last-child {
89
- @include border-bottom-radius(inherit);
90
- }
91
-
92
- &.disabled,
93
- &:disabled {
94
- color: var(--#{$prefix}list-group-disabled-color);
95
- pointer-events: none;
96
- background-color: var(--#{$prefix}list-group-disabled-bg);
97
- }
98
-
99
- // Include both here for `<a>`s and `<button>`s
100
- &.active {
101
- z-index: 2; // Place active items above their siblings for proper border styling
102
- color: var(--#{$prefix}list-group-active-color);
103
- background-color: var(--#{$prefix}list-group-active-bg);
104
- border-color: var(--#{$prefix}list-group-active-border-color);
105
- }
106
-
107
- // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
108
- & + .list-group-item {
109
- border-top-width: 0;
110
-
111
- &.active {
112
- margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
113
- border-top-width: var(--#{$prefix}list-group-border-width);
114
- }
115
- }
116
- }
117
-
118
- // Horizontal
119
- //
120
- // Change the layout of list group items from vertical (default) to horizontal.
121
-
122
- @each $breakpoint in map-keys($grid-breakpoints) {
123
- @include media-breakpoint-up($breakpoint) {
124
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
125
-
126
- .list-group-horizontal#{$infix} {
127
- flex-direction: row;
128
-
129
- > .list-group-item {
130
- &:first-child:not(:last-child) {
131
- @include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius));
132
- @include border-top-end-radius(0);
133
- }
134
-
135
- &:last-child:not(:first-child) {
136
- @include border-top-end-radius(var(--#{$prefix}list-group-border-radius));
137
- @include border-bottom-start-radius(0);
138
- }
139
-
140
- &.active {
141
- margin-top: 0;
142
- }
143
-
144
- + .list-group-item {
145
- border-top-width: var(--#{$prefix}list-group-border-width);
146
- border-left-width: 0;
147
-
148
- &.active {
149
- margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
150
- border-left-width: var(--#{$prefix}list-group-border-width);
151
- }
152
- }
153
- }
154
- }
155
- }
156
- }
157
-
158
-
159
- // Flush list items
160
- //
161
- // Remove borders and border-radius to keep list group items edge-to-edge. Most
162
- // useful within other components (e.g., cards).
163
-
164
- .list-group-flush {
165
- @include border-radius(0);
166
-
167
- > .list-group-item {
168
- border-width: 0 0 var(--#{$prefix}list-group-border-width);
169
-
170
- &:last-child {
171
- border-bottom-width: 0;
172
- }
173
- }
174
- }
175
-
176
-
177
- // scss-docs-start list-group-modifiers
178
- // List group contextual variants
179
- //
180
- // Add modifier classes to change text and background color on individual items.
181
- // Organizationally, this must come after the `:hover` states.
182
-
183
- @each $state in map-keys($theme-colors) {
184
- .list-group-item-#{$state} {
185
- --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text);
186
- --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
187
- --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
188
-
189
- &.list-group-item-action {
190
- &:hover,
191
- &:focus {
192
- --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
193
- --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
194
- }
195
-
196
- &:active {
197
- --#{$prefix}list-group-active-color: var(--#{$prefix}emphasis-color);
198
- --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text);
199
- --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text);
200
- }
201
- }
202
- }
203
- }
204
- // scss-docs-end list-group-modifiers
@@ -1,121 +0,0 @@
1
- // Re-assigned maps
2
- //
3
- // Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
4
-
5
- // scss-docs-start theme-colors-rgb
6
- $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
7
- // scss-docs-end theme-colors-rgb
8
-
9
- $theme-colors-text: (
10
- "primary": $primary-text,
11
- "secondary": $secondary-text,
12
- "success": $success-text,
13
- "info": $info-text,
14
- "warning": $warning-text,
15
- "danger": $danger-text,
16
- "light": $light-text,
17
- "dark": $dark-text,
18
- ) !default;
19
-
20
- $theme-colors-bg-subtle: (
21
- "primary": $primary-bg-subtle,
22
- "secondary": $secondary-bg-subtle,
23
- "success": $success-bg-subtle,
24
- "info": $info-bg-subtle,
25
- "warning": $warning-bg-subtle,
26
- "danger": $danger-bg-subtle,
27
- "light": $light-bg-subtle,
28
- "dark": $dark-bg-subtle,
29
- ) !default;
30
-
31
- $theme-colors-border-subtle: (
32
- "primary": $primary-border-subtle,
33
- "secondary": $secondary-border-subtle,
34
- "success": $success-border-subtle,
35
- "info": $info-border-subtle,
36
- "warning": $warning-border-subtle,
37
- "danger": $danger-border-subtle,
38
- "light": $light-border-subtle,
39
- "dark": $dark-border-subtle,
40
- ) !default;
41
-
42
- // Utilities maps
43
- //
44
- // Extends the default `$theme-colors` maps to help create our utilities.
45
-
46
- // Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
47
- // scss-docs-start utilities-colors
48
- $utilities-colors: $theme-colors-rgb !default;
49
- // scss-docs-end utilities-colors
50
-
51
- // scss-docs-start utilities-text-colors
52
- $utilities-text: map-merge(
53
- $utilities-colors,
54
- (
55
- "black": to-rgb($black),
56
- "white": to-rgb($white),
57
- "body": to-rgb($body-color)
58
- )
59
- ) !default;
60
- $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
61
-
62
- $utilities-text-emphasis-colors: (
63
- "primary-emphasis": var(--#{$prefix}primary-text),
64
- "secondary-emphasis": var(--#{$prefix}secondary-text),
65
- "success-emphasis": var(--#{$prefix}success-text),
66
- "info-emphasis": var(--#{$prefix}info-text),
67
- "warning-emphasis": var(--#{$prefix}warning-text),
68
- "danger-emphasis": var(--#{$prefix}danger-text),
69
- "light-emphasis": var(--#{$prefix}light-text),
70
- "dark-emphasis": var(--#{$prefix}dark-text)
71
- ) !default;
72
- // scss-docs-end utilities-text-colors
73
-
74
- // scss-docs-start utilities-bg-colors
75
- $utilities-bg: map-merge(
76
- $utilities-colors,
77
- (
78
- "black": to-rgb($black),
79
- "white": to-rgb($white),
80
- "body": to-rgb($body-bg)
81
- )
82
- ) !default;
83
- $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
84
-
85
- $utilities-bg-subtle: (
86
- "primary-subtle": var(--#{$prefix}primary-bg-subtle),
87
- "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
88
- "success-subtle": var(--#{$prefix}success-bg-subtle),
89
- "info-subtle": var(--#{$prefix}info-bg-subtle),
90
- "warning-subtle": var(--#{$prefix}warning-bg-subtle),
91
- "danger-subtle": var(--#{$prefix}danger-bg-subtle),
92
- "light-subtle": var(--#{$prefix}light-bg-subtle),
93
- "dark-subtle": var(--#{$prefix}dark-bg-subtle)
94
- ) !default;
95
- // $utilities-bg-subtle-colors: map-loop($utilities-bg-subtle, rgba-css-var, "$key", "bg") !default;
96
- // scss-docs-end utilities-bg-colors
97
-
98
- // scss-docs-start utilities-border-colors
99
- $utilities-border: map-merge(
100
- $utilities-colors,
101
- (
102
- "white": to-rgb($white)
103
- )
104
- ) !default;
105
- $utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
106
-
107
- $utilities-border-subtle: (
108
- "primary-subtle": var(--#{$prefix}primary-border-subtle),
109
- "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
110
- "success-subtle": var(--#{$prefix}success-border-subtle),
111
- "info-subtle": var(--#{$prefix}info-border-subtle),
112
- "warning-subtle": var(--#{$prefix}warning-border-subtle),
113
- "danger-subtle": var(--#{$prefix}danger-border-subtle),
114
- "light-subtle": var(--#{$prefix}light-border-subtle),
115
- "dark-subtle": var(--#{$prefix}dark-border-subtle)
116
- ) !default;
117
- // scss-docs-end utilities-border-colors
118
-
119
- $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
120
-
121
- $gutters: $spacers !default;
@@ -1,42 +0,0 @@
1
- // Toggles
2
- //
3
- // Used in conjunction with global variables to enable certain theme features.
4
-
5
- // Vendor
6
- @import "vendor/rfs";
7
-
8
- // Deprecate
9
- @import "mixins/deprecate";
10
-
11
- // Helpers
12
- @import "mixins/breakpoints";
13
- @import "mixins/color-mode";
14
- @import "mixins/color-scheme";
15
- @import "mixins/image";
16
- @import "mixins/resize";
17
- @import "mixins/visually-hidden";
18
- @import "mixins/reset-text";
19
- @import "mixins/text-truncate";
20
-
21
- // Utilities
22
- @import "mixins/utilities";
23
-
24
- // Components
25
- @import "mixins/backdrop";
26
- @import "mixins/buttons";
27
- @import "mixins/caret";
28
- @import "mixins/pagination";
29
- @import "mixins/lists";
30
- @import "mixins/forms";
31
- @import "mixins/table-variants";
32
-
33
- // Skins
34
- @import "mixins/border-radius";
35
- @import "mixins/box-shadow";
36
- @import "mixins/gradients";
37
- @import "mixins/transition";
38
-
39
- // Layout
40
- @import "mixins/clearfix";
41
- @import "mixins/container";
42
- @import "mixins/grid";
@@ -1,237 +0,0 @@
1
- // stylelint-disable function-disallowed-list
2
-
3
- // .modal-open - body class for killing the scroll
4
- // .modal - container to scroll within
5
- // .modal-dialog - positioning shell for the actual modal
6
- // .modal-content - actual modal w/ bg and corners and stuff
7
-
8
-
9
- // Container that the modal scrolls within
10
- .modal {
11
- // scss-docs-start modal-css-vars
12
- --#{$prefix}modal-zindex: #{$zindex-modal};
13
- --#{$prefix}modal-width: #{$modal-md};
14
- --#{$prefix}modal-padding: #{$modal-inner-padding};
15
- --#{$prefix}modal-margin: #{$modal-dialog-margin};
16
- --#{$prefix}modal-color: #{$modal-content-color};
17
- --#{$prefix}modal-bg: #{$modal-content-bg};
18
- --#{$prefix}modal-border-color: #{$modal-content-border-color};
19
- --#{$prefix}modal-border-width: #{$modal-content-border-width};
20
- --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
21
- --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
22
- --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
23
- --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
24
- --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
25
- --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
26
- --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
27
- --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
28
- --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
29
- --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
30
- --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
31
- --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
32
- --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
33
- // scss-docs-end modal-css-vars
34
-
35
- position: fixed;
36
- top: 0;
37
- left: 0;
38
- z-index: var(--#{$prefix}modal-zindex);
39
- display: none;
40
- width: 100%;
41
- height: 100%;
42
- overflow-x: hidden;
43
- overflow-y: auto;
44
- // Prevent Chrome on Windows from adding a focus outline. For details, see
45
- // https://github.com/twbs/bootstrap/pull/10951.
46
- outline: 0;
47
- // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
48
- // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
49
- // See also https://github.com/twbs/bootstrap/issues/17695
50
- }
51
-
52
- // Shell div to position the modal with bottom padding
53
- .modal-dialog {
54
- position: relative;
55
- width: auto;
56
- margin: var(--#{$prefix}modal-margin);
57
- // allow clicks to pass through for custom click handling to close modal
58
- pointer-events: none;
59
-
60
- // When fading in the modal, animate it to slide down
61
- .modal.fade & {
62
- @include transition($modal-transition);
63
- transform: $modal-fade-transform;
64
- }
65
- .modal.show & {
66
- transform: $modal-show-transform;
67
- }
68
-
69
- // When trying to close, animate focus to scale
70
- .modal.modal-static & {
71
- transform: $modal-scale-transform;
72
- }
73
- }
74
-
75
- .modal-dialog-scrollable {
76
- height: calc(100% - var(--#{$prefix}modal-margin) * 2);
77
-
78
- .modal-content {
79
- max-height: 100%;
80
- overflow: hidden;
81
- }
82
-
83
- .modal-body {
84
- overflow-y: auto;
85
- }
86
- }
87
-
88
- .modal-dialog-centered {
89
- display: flex;
90
- align-items: center;
91
- min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);
92
- }
93
-
94
- // Actual modal
95
- .modal-content {
96
- position: relative;
97
- display: flex;
98
- flex-direction: column;
99
- width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
100
- // counteract the pointer-events: none; in the .modal-dialog
101
- color: var(--#{$prefix}modal-color);
102
- pointer-events: auto;
103
- background-color: var(--#{$prefix}modal-bg);
104
- background-clip: padding-box;
105
- border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);
106
- @include border-radius(var(--#{$prefix}modal-border-radius));
107
- @include box-shadow(var(--#{$prefix}modal-box-shadow));
108
- // Remove focus outline from opened modal
109
- outline: 0;
110
- }
111
-
112
- // Modal background
113
- .modal-backdrop {
114
- // scss-docs-start modal-backdrop-css-vars
115
- --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
116
- --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
117
- --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};
118
- // scss-docs-end modal-backdrop-css-vars
119
-
120
- @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
121
- }
122
-
123
- // Modal header
124
- // Top section of the modal w/ title and dismiss
125
- .modal-header {
126
- display: flex;
127
- flex-shrink: 0;
128
- align-items: center;
129
- justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
130
- padding: var(--#{$prefix}modal-header-padding);
131
- border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
132
- @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
133
-
134
- .btn-close {
135
- padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
136
- margin: calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto;
137
- }
138
- }
139
-
140
- // Title text within header
141
- .modal-title {
142
- margin-bottom: 0;
143
- line-height: var(--#{$prefix}modal-title-line-height);
144
- }
145
-
146
- // Modal body
147
- // Where all modal content resides (sibling of .modal-header and .modal-footer)
148
- .modal-body {
149
- position: relative;
150
- // Enable `flex-grow: 1` so that the body take up as much space as possible
151
- // when there should be a fixed height on `.modal-dialog`.
152
- flex: 1 1 auto;
153
- padding: var(--#{$prefix}modal-padding);
154
- }
155
-
156
- // Footer (for actions)
157
- .modal-footer {
158
- display: flex;
159
- flex-shrink: 0;
160
- flex-wrap: wrap;
161
- align-items: center; // vertically center
162
- justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
163
- padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);
164
- background-color: var(--#{$prefix}modal-footer-bg);
165
- border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
166
- @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
167
-
168
- // Place margin between footer elements
169
- // This solution is far from ideal because of the universal selector usage,
170
- // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
171
- > * {
172
- margin: calc(var(--#{$prefix}modal-footer-gap) * .5); // Todo in v6: replace with gap on parent class
173
- }
174
- }
175
-
176
- // Scale up the modal
177
- @include media-breakpoint-up(sm) {
178
- .modal {
179
- --#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up};
180
- --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up};
181
- }
182
-
183
- // Automatically set modal's width for larger viewports
184
- .modal-dialog {
185
- max-width: var(--#{$prefix}modal-width);
186
- margin-right: auto;
187
- margin-left: auto;
188
- }
189
-
190
- .modal-sm {
191
- --#{$prefix}modal-width: #{$modal-sm};
192
- }
193
- }
194
-
195
- @include media-breakpoint-up(lg) {
196
- .modal-lg,
197
- .modal-xl {
198
- --#{$prefix}modal-width: #{$modal-lg};
199
- }
200
- }
201
-
202
- @include media-breakpoint-up(xl) {
203
- .modal-xl {
204
- --#{$prefix}modal-width: #{$modal-xl};
205
- }
206
- }
207
-
208
- // scss-docs-start modal-fullscreen-loop
209
- @each $breakpoint in map-keys($grid-breakpoints) {
210
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
211
- $postfix: if($infix != "", $infix + "-down", "");
212
-
213
- @include media-breakpoint-down($breakpoint) {
214
- .modal-fullscreen#{$postfix} {
215
- width: 100vw;
216
- max-width: none;
217
- height: 100%;
218
- margin: 0;
219
-
220
- .modal-content {
221
- height: 100%;
222
- border: 0;
223
- @include border-radius(0);
224
- }
225
-
226
- .modal-header,
227
- .modal-footer {
228
- @include border-radius(0);
229
- }
230
-
231
- .modal-body {
232
- overflow-y: auto;
233
- }
234
- }
235
- }
236
- }
237
- // scss-docs-end modal-fullscreen-loop