@dynamic-framework/ui-react 1.16.2 → 1.17.0
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.
- package/dist/css/dynamic-ui-non-root.css +3466 -1149
- package/dist/css/dynamic-ui-non-root.min.css +2 -2
- package/dist/css/dynamic-ui-root.css +20 -14
- package/dist/css/dynamic-ui-root.min.css +2 -2
- package/dist/css/dynamic-ui.css +3485 -1162
- package/dist/css/dynamic-ui.min.css +2 -2
- package/dist/index.esm.js +88 -78
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +88 -77
- package/dist/index.js.map +1 -1
- package/dist/types/components/DTabs/DTabs.d.ts +3 -2
- package/dist/types/hooks/index.d.ts +1 -0
- package/dist/types/hooks/useDisableInputWheel.d.ts +4 -0
- package/dist/types/hooks/useInputCurrency.d.ts +1 -2
- package/package.json +3 -3
- package/src/style/abstracts/_utilities.scss +12 -3
- package/src/style/abstracts/variables/_+import.scss +6 -81
- package/src/style/abstracts/variables/_accordion.scss +3 -23
- package/src/style/abstracts/variables/_alerts.scss +7 -13
- package/src/style/abstracts/variables/_badges.scss +2 -2
- package/src/style/abstracts/variables/_body.scss +1 -21
- package/src/style/abstracts/variables/_border.scss +5 -17
- package/src/style/abstracts/variables/_box-file.scss +3 -3
- package/src/style/abstracts/variables/_buttons.scss +8 -27
- package/src/style/abstracts/variables/_cards.scss +0 -16
- package/src/style/abstracts/variables/_carousel.scss +0 -25
- package/src/style/abstracts/variables/_chips.scss +1 -1
- package/src/style/abstracts/variables/_close.scss +0 -6
- package/src/style/abstracts/variables/_code.scss +0 -10
- package/src/style/abstracts/variables/_collapse-icon-text.scss +1 -1
- package/src/style/abstracts/variables/_dropdowns.scss +3 -27
- package/src/style/abstracts/variables/_forms.scss +20 -160
- package/src/style/abstracts/variables/_list-group.scss +6 -12
- package/src/style/abstracts/variables/_modals.scss +11 -31
- package/src/style/abstracts/variables/_navbar.scss +0 -28
- package/src/style/abstracts/variables/_navs.scss +11 -20
- package/src/style/abstracts/variables/_offcanvas.scss +6 -13
- package/src/style/abstracts/variables/_pagination.scss +20 -25
- package/src/style/abstracts/variables/_progress.scss +0 -3
- package/src/style/abstracts/variables/_quick-action-button.scss +3 -3
- package/src/style/abstracts/variables/_quick-action-check.scss +2 -2
- package/src/style/abstracts/variables/_quick-action-select.scss +1 -1
- package/src/style/abstracts/variables/_quick-action-switch.scss +1 -1
- package/src/style/abstracts/variables/_spacers.scss +20 -8
- package/src/style/abstracts/variables/_tables.scss +0 -18
- package/src/style/abstracts/variables/_typography.scss +3 -33
- package/src/style/base/_+import.scss +5 -0
- package/src/style/base/_body.scss +3 -0
- package/src/style/base/_collapse.scss +5 -5
- package/src/style/base/_form-control.scss +10 -0
- package/src/style/base/_form-text.scss +12 -0
- package/src/style/base/_input-group.scss +114 -0
- package/src/style/base/_label.scss +15 -0
- package/src/style/base/_pagination.scss +12 -82
- package/src/style/base/_tables.scss +1 -1
- package/src/style/components/_+import.scss +0 -2
- package/src/style/components/_d-card-account.scss +2 -2
- package/src/style/components/_d-carousel.scss +2 -2
- package/src/style/components/_d-datepicker.scss +9 -9
- package/src/style/components/_d-icon.scss +1 -1
- package/src/style/components/_d-input-pin.scss +14 -63
- package/src/style/components/_d-modal.scss +1 -1
- package/src/style/components/_d-monthpicker.scss +3 -3
- package/src/style/components/_d-offcanvas.scss +1 -1
- package/src/style/components/_d-select.scss +59 -111
- package/src/style/components/_d-stepper-desktop.scss +12 -8
- package/src/style/components/_d-stepper-mobile.scss +1 -1
- package/src/style/components/_d-tabs.scss +22 -29
- package/src/style/helpers/_+import.scss +2 -0
- package/src/style/helpers/_overlay.scss +17 -0
- package/src/style/abstracts/variables/_breadcrumb.scss +0 -15
- package/src/style/abstracts/variables/_figures.scss +0 -6
- package/src/style/abstracts/variables/_grid.scss +0 -41
- package/src/style/abstracts/variables/_popovers.scss +0 -31
- package/src/style/abstracts/variables/_spinners.scss +0 -13
- package/src/style/abstracts/variables/_thumbnails.scss +0 -10
- package/src/style/abstracts/variables/_toasts.scss +0 -19
- package/src/style/abstracts/variables/_tooltips.scss +0 -29
- package/src/style/abstracts/variables/_z-index.scss +0 -28
- package/src/style/components/_d-input-select.scss +0 -27
- package/src/style/components/_d-input.scss +0 -178
|
@@ -6,14 +6,15 @@ export type DTabOption = {
|
|
|
6
6
|
tab: string;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
};
|
|
9
|
+
export type TabVariant = 'tabs' | 'pills' | 'underline';
|
|
9
10
|
type Props = BaseProps & PropsWithChildren<{
|
|
10
11
|
onChange: (option: DTabOption) => void;
|
|
11
12
|
options: Array<DTabOption>;
|
|
12
13
|
defaultSelected: string;
|
|
13
14
|
vertical?: boolean;
|
|
14
|
-
|
|
15
|
+
variant?: TabVariant;
|
|
15
16
|
}>;
|
|
16
|
-
declare function DTabs({ children, defaultSelected, onChange, options, className, style, vertical,
|
|
17
|
+
declare function DTabs({ children, defaultSelected, onChange, options, className, style, vertical, variant, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
17
18
|
declare const _default: typeof DTabs & {
|
|
18
19
|
Tab: typeof DTabContent;
|
|
19
20
|
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { default as useFormatCurrency } from './useFormatCurrency';
|
|
2
2
|
export { default as useInputCurrency } from './useInputCurrency';
|
|
3
|
+
export { default as useDisableInputWheel } from './useDisableInputWheel';
|
|
3
4
|
export { default as useProvidedRefOrCreate } from './useProvidedRefOrCreate';
|
|
4
5
|
export { default as useStackState } from './useStackState';
|
|
5
6
|
export { default as useDisableBodyScrollEffect } from './useDisableBodyScrollEffect';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { RefObject, ForwardedRef, FocusEvent
|
|
1
|
+
import type { RefObject, ForwardedRef, FocusEvent } from 'react';
|
|
2
2
|
import type { Options } from 'currency.js';
|
|
3
3
|
import type { CustomStyles } from '../components/interface';
|
|
4
4
|
export default function useInputCurrency(currencyOptions: Options, value?: number, onFocus?: (event: FocusEvent<HTMLInputElement>) => void, onChange?: (value?: number) => void, onBlur?: (event: FocusEvent<HTMLInputElement>) => void, ref?: ForwardedRef<HTMLInputElement>): {
|
|
@@ -8,7 +8,6 @@ export default function useInputCurrency(currencyOptions: Options, value?: numbe
|
|
|
8
8
|
handleOnFocus: (event: FocusEvent<HTMLInputElement>) => void;
|
|
9
9
|
handleOnChange: (newValue?: string) => void;
|
|
10
10
|
handleOnBlur: (event: FocusEvent<HTMLInputElement>) => void;
|
|
11
|
-
handleOnWheel: (event: WheelEvent<HTMLInputElement>) => void;
|
|
12
11
|
generateStyleVariables: CustomStyles;
|
|
13
12
|
generateSymbolStyleVariables: {
|
|
14
13
|
color: string;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"sideEffects": [
|
|
4
4
|
"*.css"
|
|
5
5
|
],
|
|
6
|
-
"version": "1.
|
|
6
|
+
"version": "1.17.0",
|
|
7
7
|
"description": "React Dynamic Framework",
|
|
8
8
|
"license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
|
|
9
9
|
"repository": {
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"react-content-loader": "^6.2.1",
|
|
82
82
|
"react-datepicker": "^4.21.0",
|
|
83
83
|
"react-dropzone": "^14.2.3",
|
|
84
|
-
"react-responsive-pagination": "^2.
|
|
84
|
+
"react-responsive-pagination": "^2.4.1",
|
|
85
85
|
"react-select": "^5.8.0",
|
|
86
86
|
"react-toastify": "^9.1.3"
|
|
87
87
|
},
|
|
@@ -149,5 +149,5 @@
|
|
|
149
149
|
"react-dom": "^18.2.0",
|
|
150
150
|
"react-i18next": "^13.3.1"
|
|
151
151
|
},
|
|
152
|
-
"gitHead": "
|
|
152
|
+
"gitHead": "260d49f5eadf47639dd830517d98b5882c54fe23"
|
|
153
153
|
}
|
|
@@ -20,7 +20,6 @@ $utilities: map-merge(
|
|
|
20
20
|
(
|
|
21
21
|
values: map-merge(
|
|
22
22
|
map-get(map-get($utilities, "color"), "values"),
|
|
23
|
-
// TODO: try to move the map-loop to $utilities-text map libraries/dynamic-ui/node_modules/bootstrap/scss/_maps.scss
|
|
24
23
|
map-loop(map-merge-multiple($theme-colors-palletes, $palette-grays), rgba-css-var, "$key", "text"),
|
|
25
24
|
)
|
|
26
25
|
)
|
|
@@ -30,7 +29,6 @@ $utilities: map-merge(
|
|
|
30
29
|
(
|
|
31
30
|
values: map-merge(
|
|
32
31
|
map-get(map-get($utilities, "background-color"), "values"),
|
|
33
|
-
// TODO: try to move the map-loop to $utilities-bg map libraries/dynamic-ui/node_modules/bootstrap/scss/_maps.scss
|
|
34
32
|
map-loop(map-merge-multiple($theme-colors-palletes, $palette-grays, $bg-soft-colors), rgba-css-var, "$key", "bg"),
|
|
35
33
|
)
|
|
36
34
|
)
|
|
@@ -62,11 +60,22 @@ $utilities: map-merge(
|
|
|
62
60
|
(
|
|
63
61
|
values: map-merge(
|
|
64
62
|
map-get(map-get($utilities, "border-color"), "values"),
|
|
65
|
-
// TODO: try to move the map-loop to $utilities-border map libraries/dynamic-ui/node_modules/bootstrap/scss/_maps.scss
|
|
66
63
|
map-loop($palette-grays, rgba-css-var, "$key", "border"),
|
|
67
64
|
)
|
|
68
65
|
)
|
|
69
66
|
),
|
|
67
|
+
"overlay": (
|
|
68
|
+
property: opacity,
|
|
69
|
+
class: "overlay",
|
|
70
|
+
css-var: true,
|
|
71
|
+
values: (
|
|
72
|
+
0: 0,
|
|
73
|
+
25: .25,
|
|
74
|
+
50: .5,
|
|
75
|
+
75: .75,
|
|
76
|
+
100: 1
|
|
77
|
+
)
|
|
78
|
+
),
|
|
70
79
|
"cursor": (
|
|
71
80
|
property: cursor,
|
|
72
81
|
values: $cursors,
|
|
@@ -9,80 +9,24 @@ $variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix
|
|
|
9
9
|
$prefix: $variable-prefix !default;
|
|
10
10
|
|
|
11
11
|
@import "colors";
|
|
12
|
-
|
|
13
|
-
// Characters which are escaped by the escape-svg function
|
|
14
|
-
$escaped-characters: (
|
|
15
|
-
("<", "%3c"),
|
|
16
|
-
(">", "%3e"),
|
|
17
|
-
("#", "%23"),
|
|
18
|
-
("(", "%28"),
|
|
19
|
-
(")", "%29"),
|
|
20
|
-
) !default;
|
|
21
|
-
|
|
22
12
|
@import "options";
|
|
23
|
-
|
|
24
|
-
// Gradient
|
|
25
|
-
//
|
|
26
|
-
// The gradient which is added to components if `$enable-gradients` is `true`
|
|
27
|
-
// This gradient is also added to elements with `.bg-gradient`
|
|
28
|
-
// scss-docs-start variable-gradient
|
|
29
|
-
$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
|
|
30
|
-
// scss-docs-end variable-gradient
|
|
31
|
-
|
|
32
13
|
@import "spacers";
|
|
33
|
-
|
|
34
|
-
// Position
|
|
35
|
-
//
|
|
36
|
-
// Define the edge positioning anchors of the position utilities.
|
|
37
|
-
|
|
38
|
-
// scss-docs-start position-map
|
|
39
|
-
$position-values: (
|
|
40
|
-
0: 0,
|
|
41
|
-
50: 50%,
|
|
42
|
-
100: 100%
|
|
43
|
-
) !default;
|
|
44
|
-
// scss-docs-end position-map
|
|
45
|
-
|
|
46
14
|
@import "body";
|
|
47
|
-
@import "grid";
|
|
48
15
|
@import "border";
|
|
49
16
|
@import "box-shadow";
|
|
50
17
|
|
|
51
18
|
// scss-docs-start focus-ring-variables
|
|
52
|
-
$focus-ring-width: .25rem !default;
|
|
53
19
|
$focus-ring-opacity: 1 !default;
|
|
54
20
|
// custom
|
|
55
21
|
$focus-ring-color-mapping: "secondary-rgb" !default;
|
|
56
22
|
$focus-ring-color: var(--#{$prefix}focus-ring-color) !default;
|
|
57
23
|
// end custom
|
|
58
|
-
$focus-ring-blur: 0 !default;
|
|
59
|
-
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
|
|
60
24
|
// scss-docs-end focus-ring-variables
|
|
61
25
|
|
|
62
26
|
$component-active-color: var(--#{$prefix}white) !default;
|
|
63
27
|
$component-active-bg: $focus-ring-color !default;
|
|
64
28
|
|
|
65
|
-
// scss-docs-start caret-variables
|
|
66
|
-
$caret-width: .3em !default;
|
|
67
|
-
$caret-vertical-align: $caret-width * .85 !default;
|
|
68
|
-
$caret-spacing: $caret-width * .85 !default;
|
|
69
|
-
// scss-docs-end caret-variables
|
|
70
|
-
|
|
71
|
-
$transition-base: all .2s ease-in-out !default;
|
|
72
29
|
$transition-fade: opacity .3s linear !default;
|
|
73
|
-
// scss-docs-start collapse-transition
|
|
74
|
-
$transition-collapse: height .35s ease !default;
|
|
75
|
-
$transition-collapse-width: width .35s ease !default;
|
|
76
|
-
// scss-docs-end collapse-transition
|
|
77
|
-
|
|
78
|
-
// scss-docs-start aspect-ratios
|
|
79
|
-
$aspect-ratios: (
|
|
80
|
-
"1x1": 100%,
|
|
81
|
-
"4x3": calc(3 / 4 * 100%),
|
|
82
|
-
"16x9": calc(9 / 16 * 100%),
|
|
83
|
-
"21x9": calc(9 / 21 * 100%)
|
|
84
|
-
) !default;
|
|
85
|
-
// scss-docs-end aspect-ratios
|
|
86
30
|
|
|
87
31
|
@import "typography";
|
|
88
32
|
@import "tables";
|
|
@@ -92,59 +36,40 @@ $aspect-ratios: (
|
|
|
92
36
|
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
|
|
93
37
|
|
|
94
38
|
// scss-docs-start input-btn-variables
|
|
95
|
-
$input-btn-padding-y:
|
|
39
|
+
$input-btn-padding-y: $spacer-3 !default;
|
|
96
40
|
$input-btn-padding-x: $spacer-4 !default;
|
|
97
|
-
$input-btn-font-family: null !default;
|
|
98
|
-
$input-btn-font-size: $font-size-base !default;
|
|
99
|
-
$input-btn-line-height: $line-height-base !default;
|
|
100
41
|
|
|
101
42
|
$input-btn-focus-width: 0 !default;
|
|
102
43
|
$input-btn-focus-color-opacity: 1 !default;
|
|
103
44
|
$input-btn-focus-color: rgba(var(--#{$prefix}secondary-rgb), $input-btn-focus-color-opacity) !default;
|
|
104
45
|
$input-btn-focus-blur: 0 !default;
|
|
105
|
-
$input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
|
|
106
46
|
|
|
107
47
|
$input-btn-padding-y-sm: $spacer-2 !default;
|
|
108
|
-
$input-btn-padding-x-sm: $spacer-
|
|
48
|
+
$input-btn-padding-x-sm: var(--#{$prefix}ref-spacer-4) !default;
|
|
109
49
|
$input-btn-font-size-sm: $small-font-size !default;
|
|
110
50
|
|
|
111
|
-
$input-btn-padding-y-lg:
|
|
112
|
-
$input-btn-padding-x-lg: $spacer-
|
|
113
|
-
$input-btn-font-size-lg:
|
|
51
|
+
$input-btn-padding-y-lg: $spacer-4 !default;
|
|
52
|
+
$input-btn-padding-x-lg: var(--#{$prefix}ref-spacer-6) !default;
|
|
53
|
+
$input-btn-font-size-lg: var(--#{$prefix}ref-spacer-4) !default;
|
|
114
54
|
|
|
115
|
-
$input-btn-border-width: $border-width !default;
|
|
55
|
+
$input-btn-border-width: var(--#{$prefix}border-width) !default;
|
|
116
56
|
// scss-docs-end input-btn-variables
|
|
117
57
|
|
|
118
58
|
@import "buttons";
|
|
119
59
|
@import "forms";
|
|
120
|
-
@import "z-index";
|
|
121
60
|
@import "navs";
|
|
122
61
|
@import "navbar";
|
|
123
62
|
@import "dropdowns";
|
|
124
63
|
@import "pagination";
|
|
125
64
|
|
|
126
|
-
// Placeholders
|
|
127
|
-
|
|
128
|
-
// scss-docs-start placeholders
|
|
129
|
-
$placeholder-opacity-max: .5 !default;
|
|
130
|
-
$placeholder-opacity-min: .2 !default;
|
|
131
|
-
// scss-docs-end placeholders
|
|
132
|
-
|
|
133
65
|
@import "cards";
|
|
134
66
|
@import "accordion";
|
|
135
|
-
@import "tooltips";
|
|
136
|
-
@import "popovers";
|
|
137
|
-
@import "toasts";
|
|
138
67
|
@import "badges";
|
|
139
68
|
@import "modals";
|
|
140
69
|
@import "alerts";
|
|
141
70
|
@import "progress";
|
|
142
71
|
@import "list-group";
|
|
143
|
-
@import "thumbnails";
|
|
144
|
-
@import "figures";
|
|
145
|
-
@import "breadcrumb";
|
|
146
72
|
@import "carousel";
|
|
147
|
-
@import "spinners";
|
|
148
73
|
@import "close";
|
|
149
74
|
@import "offcanvas";
|
|
150
75
|
@import "code";
|
|
@@ -1,43 +1,23 @@
|
|
|
1
1
|
// Accordion
|
|
2
2
|
|
|
3
3
|
// scss-docs-start accordion-variables
|
|
4
|
-
$accordion-padding-y: var(--#{$prefix}ref-spacer-
|
|
5
|
-
$accordion-padding-x: var(--#{$prefix}ref-spacer-
|
|
4
|
+
$accordion-padding-y: var(--#{$prefix}ref-spacer-6) !default;
|
|
5
|
+
$accordion-padding-x: var(--#{$prefix}ref-spacer-4) !default;
|
|
6
6
|
$accordion-color: var(--#{$prefix}gray-700) !default;
|
|
7
7
|
$accordion-bg: var(--#{$prefix}white) !default;
|
|
8
|
-
$accordion-border-width: var(--#{$prefix}border-width) !default;
|
|
9
|
-
$accordion-border-color: var(--#{$prefix}border-color) !default;
|
|
10
|
-
$accordion-border-radius: var(--#{$prefix}border-radius) !default;
|
|
11
|
-
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
|
|
12
8
|
|
|
13
|
-
$accordion-body-padding-y: $accordion-padding-y !default;
|
|
14
9
|
// custom
|
|
15
10
|
$accordion-body-padding-top: $accordion-padding-x !default;
|
|
16
|
-
// end custom
|
|
17
|
-
$accordion-body-padding-x: $accordion-padding-x !default;
|
|
18
|
-
|
|
19
|
-
$accordion-button-padding-y: $accordion-padding-y !default;
|
|
20
|
-
$accordion-button-padding-x: $accordion-padding-x !default;
|
|
21
|
-
$accordion-button-color: var(--#{$prefix}body-color) !default;
|
|
22
11
|
$accordion-button-border-color: var(--#{$prefix}gray-100) !default;
|
|
23
|
-
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
|
|
24
|
-
// custom
|
|
25
12
|
$accordion-button-font-weight: var(--#{$prefix}ref-fw-bold) !default;
|
|
26
13
|
$accordion-button-font-size: var(--#{$prefix}ref-fs-6) !default;
|
|
27
14
|
// end custom
|
|
28
|
-
|
|
15
|
+
|
|
29
16
|
$accordion-button-active-bg: var(--#{$prefix}secondary-soft) !default;
|
|
30
17
|
$accordion-button-active-color: var(--#{$prefix}body-color) !default;
|
|
31
18
|
|
|
32
|
-
$accordion-button-focus-border-color: $input-focus-border-color !default;
|
|
33
|
-
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
|
|
34
|
-
|
|
35
|
-
$accordion-icon-width: 1.25rem !default;
|
|
36
19
|
$accordion-icon-color: $body-color !default;
|
|
37
20
|
$accordion-icon-active-color: $primary-text-emphasis !default;
|
|
38
|
-
$accordion-icon-transition: transform .2s ease-in-out !default;
|
|
39
|
-
$accordion-icon-transform: rotate(-180deg) !default;
|
|
40
|
-
|
|
41
21
|
$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
|
42
22
|
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
|
43
23
|
// scss-docs-end accordion-variables
|
|
@@ -3,26 +3,20 @@
|
|
|
3
3
|
// Define alert colors, border radius, and padding.
|
|
4
4
|
|
|
5
5
|
// scss-docs-start alert-variables
|
|
6
|
-
$alert-padding-
|
|
7
|
-
$alert-padding-x: $spacer-4 !default;
|
|
8
|
-
$alert-margin-bottom: $spacer-3 !default;
|
|
6
|
+
$alert-padding-x: $spacer-6 !default;
|
|
9
7
|
$alert-border-radius: var(--#{$prefix}border-radius-sm) !default;
|
|
10
8
|
$alert-link-font-weight: var(--#{$prefix}ref-fw-bold) !default;
|
|
11
|
-
|
|
9
|
+
// scss-docs-end alert-variables
|
|
10
|
+
|
|
11
|
+
// fusv-disable
|
|
12
12
|
$alert-bg-scale: 100% !default;
|
|
13
13
|
$alert-border-scale: 100% !default;
|
|
14
14
|
$alert-color-scale: 100% !default;
|
|
15
|
-
|
|
15
|
+
// fusv-enable
|
|
16
16
|
|
|
17
17
|
// custom
|
|
18
|
-
$alert-gap: $spacer-
|
|
18
|
+
$alert-gap: var(--#{$prefix}ref-spacer-4) !default;
|
|
19
19
|
$alert-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
|
|
20
|
-
$alert-close-icon-size:
|
|
20
|
+
$alert-close-icon-size: var(--#{$prefix}ref-spacer-3) !default;
|
|
21
21
|
// end custom
|
|
22
22
|
// scss-docs-end alert-variables
|
|
23
|
-
|
|
24
|
-
// fusv-disable
|
|
25
|
-
$alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
|
|
26
|
-
$alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
|
|
27
|
-
$alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
|
|
28
|
-
// fusv-enable
|
|
@@ -6,10 +6,10 @@ $badge-font-weight: $font-weight-normal !default;
|
|
|
6
6
|
$badge-color: var(--#{$prefix}gray-900) !default;
|
|
7
7
|
$badge-padding-y: var(--#{$prefix}ref-spacer-1) !default;
|
|
8
8
|
$badge-padding-x: var(--#{$prefix}ref-spacer-2) !default;
|
|
9
|
-
$badge-border-radius: $border-radius-sm !default;
|
|
9
|
+
$badge-border-radius: var(--#{$prefix}border-radius-sm) !default;
|
|
10
10
|
|
|
11
11
|
// custom
|
|
12
12
|
$badge-bg: var(--#{$prefix}white) !default;
|
|
13
|
-
$badge-dot-height: var(--#{$prefix}ref-spacer-
|
|
13
|
+
$badge-dot-height: var(--#{$prefix}ref-spacer-4) !default;
|
|
14
14
|
// end custom
|
|
15
15
|
// scss-docs-end badge-variables
|
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
//
|
|
3
3
|
// Settings for the `<body>` element.
|
|
4
4
|
|
|
5
|
-
$body-text-align: null !default;
|
|
6
|
-
|
|
7
5
|
// custom
|
|
8
6
|
$body-color-mapping: "gray-900" !default;
|
|
9
7
|
$body-color: map-get($all-colors, $body-color-mapping) !default;
|
|
@@ -29,24 +27,6 @@ $link-hover-color-mapping: "primary-700" !default;
|
|
|
29
27
|
$link-color: map-get($all-colors, $link-color-mapping) !default;
|
|
30
28
|
$link-hover-color: map-get($all-colors, $link-hover-color-mapping) !default;
|
|
31
29
|
// end custom
|
|
30
|
+
|
|
32
31
|
$link-decoration: underline !default;
|
|
33
|
-
$link-shade-percentage: 20% !default; // unused
|
|
34
32
|
$link-hover-decoration: underline !default;
|
|
35
|
-
|
|
36
|
-
$stretched-link-pseudo-element: after !default;
|
|
37
|
-
$stretched-link-z-index: 1 !default;
|
|
38
|
-
|
|
39
|
-
// Icon links
|
|
40
|
-
// scss-docs-start icon-link-variables
|
|
41
|
-
$icon-link-gap: .375rem !default;
|
|
42
|
-
$icon-link-underline-offset: .25em !default;
|
|
43
|
-
$icon-link-icon-size: 1em !default;
|
|
44
|
-
$icon-link-icon-transition: .2s ease-in-out transform !default;
|
|
45
|
-
$icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
|
|
46
|
-
// scss-docs-end icon-link-variables
|
|
47
|
-
|
|
48
|
-
// Paragraphs
|
|
49
|
-
//
|
|
50
|
-
// Style p element.
|
|
51
|
-
|
|
52
|
-
$paragraph-margin-bottom: 0 !default;
|
|
@@ -3,27 +3,15 @@
|
|
|
3
3
|
// Define common padding and border radius sizes and more.
|
|
4
4
|
|
|
5
5
|
// scss-docs-start border-variables
|
|
6
|
-
$border-width: 1px !default;
|
|
7
|
-
$border-widths: (
|
|
8
|
-
1: 1px,
|
|
9
|
-
2: 2px,
|
|
10
|
-
3: 3px,
|
|
11
|
-
4: 4px,
|
|
12
|
-
5: 5px
|
|
13
|
-
) !default;
|
|
14
|
-
$border-style: solid !default;
|
|
15
6
|
$border-color: var(--#{$prefix}gray-200) !default;
|
|
16
7
|
$border-color-translucent: rgba(var(--#{$prefix}black-rgb), .175) !default;
|
|
17
8
|
// scss-docs-end border-variables
|
|
18
9
|
|
|
19
10
|
// scss-docs-start border-radius-variables
|
|
20
|
-
$border-radius:
|
|
21
|
-
$border-radius-sm:
|
|
22
|
-
$border-radius-lg:
|
|
23
|
-
$border-radius-xl:
|
|
24
|
-
$border-radius-xxl:
|
|
11
|
+
$border-radius: var(--#{$prefix}ref-spacer-4) !default;
|
|
12
|
+
$border-radius-sm: var(--#{$prefix}ref-spacer-2) !default;
|
|
13
|
+
$border-radius-lg: var(--#{$prefix}ref-spacer-6) !default;
|
|
14
|
+
$border-radius-xl: var(--#{$prefix}ref-spacer-8) !default;
|
|
15
|
+
$border-radius-xxl: var(--#{$prefix}ref-spacer-10) !default;
|
|
25
16
|
$border-radius-pill: 50rem !default;
|
|
26
17
|
// scss-docs-end border-radius-variables
|
|
27
|
-
// fusv-disable
|
|
28
|
-
$border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.3.0
|
|
29
|
-
// fusv-enable
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
$box-file-gap: var(--#{$prefix}ref-spacer-
|
|
1
|
+
$box-file-gap: var(--#{$prefix}ref-spacer-4) !default;
|
|
2
2
|
$box-file-background: unset !default;
|
|
3
3
|
$box-file-border: 1px dashed var(--#{$prefix}gray-700) !default;
|
|
4
4
|
$box-file-border-radius: var(--#{$prefix}border-radius) !default;
|
|
5
|
-
$box-file-padding: var(--#{$prefix}ref-spacer-
|
|
5
|
+
$box-file-padding: var(--#{$prefix}ref-spacer-8) !default;
|
|
6
6
|
$box-file-content-max-width: 220px !default;
|
|
7
|
-
$box-file-icon-size: var(--#{$prefix}ref-spacer-
|
|
7
|
+
$box-file-icon-size: var(--#{$prefix}ref-spacer-14) !default;
|
|
8
8
|
$box-file-icon-color: var(--#{$prefix}secondary-300) !default;
|
|
9
9
|
|
|
10
10
|
$box-file-hover-border: 1px dashed var(--#{$prefix}secondary-700) !default;
|
|
@@ -4,46 +4,27 @@
|
|
|
4
4
|
|
|
5
5
|
// scss-docs-start btn-variables
|
|
6
6
|
$btn-color: var(--#{$prefix}body-color) !default;
|
|
7
|
-
$btn-padding-y: $spacer-
|
|
8
|
-
$btn-padding-x: $spacer-
|
|
9
|
-
$btn-
|
|
10
|
-
$btn-font-size: $input-btn-font-size !default;
|
|
11
|
-
$btn-line-height: $line-height-base * 1rem !default;
|
|
12
|
-
$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
|
|
7
|
+
$btn-padding-y: $spacer-3 !default;
|
|
8
|
+
$btn-padding-x: $spacer-8 !default;
|
|
9
|
+
$btn-line-height: 1 !default;
|
|
13
10
|
|
|
14
|
-
$btn-padding-y-sm: $spacer-
|
|
15
|
-
$btn-padding-x-sm: $spacer-
|
|
11
|
+
$btn-padding-y-sm: $spacer-2 !default;
|
|
12
|
+
$btn-padding-x-sm: $spacer-4 !default;
|
|
16
13
|
$btn-font-size-sm: $small-font-size !default;
|
|
17
14
|
|
|
18
|
-
$btn-padding-y-lg:
|
|
19
|
-
$btn-padding-x-lg: $spacer-
|
|
15
|
+
$btn-padding-y-lg: $spacer-4 !default;
|
|
16
|
+
$btn-padding-x-lg: $spacer-8 !default;
|
|
20
17
|
$btn-font-size-lg: $h6-font-size !default;
|
|
21
18
|
|
|
22
|
-
$btn-border-width:
|
|
19
|
+
$btn-border-width: $input-btn-border-width !default;
|
|
23
20
|
|
|
24
|
-
$btn-font-weight: $font-weight-normal !default;
|
|
25
21
|
$btn-box-shadow: none !default;
|
|
26
22
|
$btn-focus-width: 0 !default;
|
|
27
23
|
$btn-focus-box-shadow: none !default;
|
|
28
24
|
$btn-disabled-opacity: 1 !default;
|
|
29
25
|
$btn-active-box-shadow: none !default;
|
|
30
26
|
|
|
31
|
-
$btn-link-color: var(--#{$prefix}link-color) !default;
|
|
32
|
-
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
|
|
33
|
-
$btn-link-disabled-color: $gray-600 !default;
|
|
34
|
-
|
|
35
27
|
$btn-border-radius: var(--#{$prefix}border-radius-sm) !default;
|
|
36
28
|
$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
|
|
37
29
|
$btn-border-radius-lg: var(--#{$prefix}border-radius) !default;
|
|
38
|
-
|
|
39
|
-
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
|
40
|
-
|
|
41
|
-
$btn-hover-bg-shade-amount: 15% !default;
|
|
42
|
-
$btn-hover-bg-tint-amount: 15% !default;
|
|
43
|
-
$btn-hover-border-shade-amount: 20% !default;
|
|
44
|
-
$btn-hover-border-tint-amount: 10% !default;
|
|
45
|
-
$btn-active-bg-shade-amount: 20% !default;
|
|
46
|
-
$btn-active-bg-tint-amount: 20% !default;
|
|
47
|
-
$btn-active-border-shade-amount: 25% !default;
|
|
48
|
-
$btn-active-border-tint-amount: 10% !default;
|
|
49
30
|
// scss-docs-end btn-variables
|
|
@@ -1,23 +1,7 @@
|
|
|
1
1
|
// Cards
|
|
2
2
|
|
|
3
3
|
// scss-docs-start card-variables
|
|
4
|
-
$card-spacer-y: $spacer !default;
|
|
5
|
-
$card-spacer-x: $spacer !default;
|
|
6
|
-
$card-title-spacer-y: $spacer * .5 !default;
|
|
7
|
-
$card-title-color: null !default;
|
|
8
|
-
$card-subtitle-color: null !default;
|
|
9
4
|
$card-border-width: 0px !default; // stylelint-disable-line length-zero-no-unit
|
|
10
|
-
$card-border-color: var(--#{$prefix}border-color-translucent) !default;
|
|
11
|
-
$card-border-radius: var(--#{$prefix}border-radius) !default;
|
|
12
5
|
$card-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
|
|
13
|
-
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
|
|
14
|
-
$card-cap-padding-y: $card-spacer-y * .5 !default;
|
|
15
|
-
$card-cap-padding-x: $card-spacer-x !default;
|
|
16
|
-
$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
|
|
17
|
-
$card-cap-color: null !default;
|
|
18
|
-
$card-height: null !default;
|
|
19
|
-
$card-color: null !default;
|
|
20
6
|
$card-bg: var(--#{$prefix}white) !default;
|
|
21
|
-
$card-img-overlay-padding: $spacer !default;
|
|
22
|
-
$card-group-margin: $grid-gutter-width * .5 !default;
|
|
23
7
|
// scss-docs-end card-variables
|
|
@@ -2,36 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
// scss-docs-start carousel-variables
|
|
4
4
|
$carousel-control-color: var(--#{$prefix}white) !default;
|
|
5
|
-
$carousel-control-width: 15% !default;
|
|
6
|
-
$carousel-control-opacity: .5 !default;
|
|
7
|
-
$carousel-control-hover-opacity: .9 !default;
|
|
8
|
-
$carousel-control-transition: opacity .15s ease !default;
|
|
9
|
-
|
|
10
|
-
$carousel-indicator-width: 30px !default;
|
|
11
|
-
$carousel-indicator-height: 3px !default;
|
|
12
|
-
$carousel-indicator-hit-area-height: 10px !default;
|
|
13
|
-
$carousel-indicator-spacer: 3px !default;
|
|
14
|
-
$carousel-indicator-opacity: .5 !default;
|
|
15
5
|
$carousel-indicator-active-bg: var(--#{$prefix}white) !default;
|
|
16
|
-
$carousel-indicator-active-opacity: 1 !default;
|
|
17
|
-
$carousel-indicator-transition: opacity .6s ease !default;
|
|
18
|
-
|
|
19
|
-
$carousel-caption-width: 70% !default;
|
|
20
6
|
$carousel-caption-color: var(--#{$prefix}white) !default;
|
|
21
|
-
$carousel-caption-padding-y: 1.25rem !default;
|
|
22
|
-
$carousel-caption-spacer: 1.25rem !default;
|
|
23
|
-
|
|
24
|
-
$carousel-control-icon-width: 2rem !default;
|
|
25
|
-
|
|
26
|
-
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
|
|
27
|
-
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
|
28
|
-
|
|
29
|
-
$carousel-transition-duration: .6s !default;
|
|
30
|
-
$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
|
|
31
7
|
// scss-docs-end carousel-variables
|
|
32
8
|
|
|
33
9
|
// scss-docs-start carousel-dark-variables
|
|
34
10
|
$carousel-dark-indicator-active-bg: var(--#{$prefix}black) !default;
|
|
35
11
|
$carousel-dark-caption-color: var(--#{$prefix}black) !default;
|
|
36
|
-
$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
|
|
37
12
|
// scss-docs-end carousel-dark-variables
|
|
@@ -9,5 +9,5 @@ $chip-padding-x: $spacer-2 !default;
|
|
|
9
9
|
$chip-padding-y: $spacer-1 !default;
|
|
10
10
|
$chip-font-size: $small-font-size !default;
|
|
11
11
|
$chip-font-weight: $font-weight-bold !default;
|
|
12
|
-
$chip-line-height: $line-height-base *
|
|
12
|
+
$chip-line-height: $line-height-base * $spacer-4 !default;
|
|
13
13
|
// scss-docs-end chip-variables
|
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
// Close
|
|
2
2
|
|
|
3
3
|
// scss-docs-start close-variables
|
|
4
|
-
$btn-close-width: 1em !default;
|
|
5
|
-
$btn-close-height: 1em !default;
|
|
6
4
|
$btn-close-padding-x: 0 !default;
|
|
7
5
|
$btn-close-padding-y: 0 !default;
|
|
8
6
|
$btn-close-color: var(--#{$prefix}black) !default;
|
|
9
|
-
$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
|
|
10
7
|
$btn-close-focus-shadow: none !default;
|
|
11
8
|
$btn-close-opacity: 1 !default;
|
|
12
9
|
$btn-close-hover-opacity: 1 !default;
|
|
13
|
-
$btn-close-focus-opacity: 1 !default;
|
|
14
|
-
$btn-close-disabled-opacity: .25 !default;
|
|
15
|
-
$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
|
|
16
10
|
// scss-docs-end close-variables
|
|
@@ -1,16 +1,6 @@
|
|
|
1
1
|
// Code
|
|
2
2
|
|
|
3
|
-
$code-font-size: $small-font-size !default;
|
|
4
3
|
// custom
|
|
5
4
|
$code-color-mapping: "primary" !default;
|
|
6
5
|
$code-color: map-get($all-colors, $code-color-mapping) !default;
|
|
7
6
|
// end custom
|
|
8
|
-
|
|
9
|
-
$kbd-padding-y: .1875rem !default;
|
|
10
|
-
$kbd-padding-x: .375rem !default;
|
|
11
|
-
$kbd-font-size: $code-font-size !default;
|
|
12
|
-
$kbd-color: var(--#{$prefix}body-bg) !default;
|
|
13
|
-
$kbd-bg: var(--#{$prefix}body-color) !default;
|
|
14
|
-
$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
|
|
15
|
-
|
|
16
|
-
$pre-color: null !default;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
$collapse-icon-text-header-gap: var(--#{$prefix}ref-spacer-
|
|
1
|
+
$collapse-icon-text-header-gap: var(--#{$prefix}ref-spacer-4) !default;
|
|
2
2
|
$collapse-icon-text-header-font-size: var(--#{$prefix}ref-fs-6) !default;
|
|
3
3
|
$collapse-icon-text-header-font-weight: var(--#{$prefix}ref-fw-bold) !default;
|