@sd-angular/core 19.0.0-beta.83 → 19.0.0-beta.85
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/README.md +716 -716
- package/assets/fonts/fonts.scss +115 -115
- package/assets/scss/bootstrap-4.6.2/_alert.scss +52 -52
- package/assets/scss/bootstrap-4.6.2/_badge.scss +54 -54
- package/assets/scss/bootstrap-4.6.2/_breadcrumb.scss +42 -42
- package/assets/scss/bootstrap-4.6.2/_button-group.scss +163 -163
- package/assets/scss/bootstrap-4.6.2/_buttons.scss +142 -142
- package/assets/scss/bootstrap-4.6.2/_card.scss +286 -286
- package/assets/scss/bootstrap-4.6.2/_carousel.scss +200 -200
- package/assets/scss/bootstrap-4.6.2/_close.scss +40 -40
- package/assets/scss/bootstrap-4.6.2/_code.scss +48 -48
- package/assets/scss/bootstrap-4.6.2/_custom-forms.scss +526 -526
- package/assets/scss/bootstrap-4.6.2/_dropdown.scss +192 -192
- package/assets/scss/bootstrap-4.6.2/_forms.scss +347 -347
- package/assets/scss/bootstrap-4.6.2/_functions.scss +190 -190
- package/assets/scss/bootstrap-4.6.2/_grid.scss +73 -73
- package/assets/scss/bootstrap-4.6.2/_images.scss +42 -42
- package/assets/scss/bootstrap-4.6.2/_input-group.scss +211 -211
- package/assets/scss/bootstrap-4.6.2/_jumbotron.scss +17 -17
- package/assets/scss/bootstrap-4.6.2/_list-group.scss +154 -154
- package/assets/scss/bootstrap-4.6.2/_media.scss +8 -8
- package/assets/scss/bootstrap-4.6.2/_mixins.scss +47 -47
- package/assets/scss/bootstrap-4.6.2/_modal.scss +240 -240
- package/assets/scss/bootstrap-4.6.2/_nav.scss +125 -125
- package/assets/scss/bootstrap-4.6.2/_navbar.scss +332 -332
- package/assets/scss/bootstrap-4.6.2/_pagination.scss +74 -74
- package/assets/scss/bootstrap-4.6.2/_popover.scss +170 -170
- package/assets/scss/bootstrap-4.6.2/_print.scss +132 -132
- package/assets/scss/bootstrap-4.6.2/_progress.scss +47 -47
- package/assets/scss/bootstrap-4.6.2/_reboot.scss +484 -484
- package/assets/scss/bootstrap-4.6.2/_root.scss +19 -19
- package/assets/scss/bootstrap-4.6.2/_spinners.scss +65 -65
- package/assets/scss/bootstrap-4.6.2/_tables.scss +185 -185
- package/assets/scss/bootstrap-4.6.2/_toasts.scss +46 -46
- package/assets/scss/bootstrap-4.6.2/_tooltip.scss +115 -115
- package/assets/scss/bootstrap-4.6.2/_transitions.scss +26 -26
- package/assets/scss/bootstrap-4.6.2/_type.scss +125 -125
- package/assets/scss/bootstrap-4.6.2/_utilities.scss +18 -18
- package/assets/scss/bootstrap-4.6.2/_variables.scss +1150 -1150
- package/assets/scss/bootstrap-4.6.2/bootstrap-grid.scss +30 -30
- package/assets/scss/bootstrap-4.6.2/bootstrap-reboot.scss +12 -12
- package/assets/scss/bootstrap-4.6.2/bootstrap.scss +44 -44
- package/assets/scss/bootstrap-4.6.2/mixins/_alert.scss +13 -13
- package/assets/scss/bootstrap-4.6.2/mixins/_background-variant.scss +23 -23
- package/assets/scss/bootstrap-4.6.2/mixins/_badge.scss +17 -17
- package/assets/scss/bootstrap-4.6.2/mixins/_border-radius.scss +76 -76
- package/assets/scss/bootstrap-4.6.2/mixins/_box-shadow.scss +20 -20
- package/assets/scss/bootstrap-4.6.2/mixins/_breakpoints.scss +123 -123
- package/assets/scss/bootstrap-4.6.2/mixins/_buttons.scss +110 -110
- package/assets/scss/bootstrap-4.6.2/mixins/_caret.scss +62 -62
- package/assets/scss/bootstrap-4.6.2/mixins/_clearfix.scss +7 -7
- package/assets/scss/bootstrap-4.6.2/mixins/_deprecate.scss +10 -10
- package/assets/scss/bootstrap-4.6.2/mixins/_float.scss +14 -14
- package/assets/scss/bootstrap-4.6.2/mixins/_forms.scss +195 -195
- package/assets/scss/bootstrap-4.6.2/mixins/_gradients.scss +45 -45
- package/assets/scss/bootstrap-4.6.2/mixins/_grid-framework.scss +80 -80
- package/assets/scss/bootstrap-4.6.2/mixins/_grid.scss +69 -69
- package/assets/scss/bootstrap-4.6.2/mixins/_hover.scss +37 -37
- package/assets/scss/bootstrap-4.6.2/mixins/_image.scss +36 -36
- package/assets/scss/bootstrap-4.6.2/mixins/_list-group.scss +21 -21
- package/assets/scss/bootstrap-4.6.2/mixins/_lists.scss +7 -7
- package/assets/scss/bootstrap-4.6.2/mixins/_nav-divider.scss +11 -11
- package/assets/scss/bootstrap-4.6.2/mixins/_pagination.scss +22 -22
- package/assets/scss/bootstrap-4.6.2/mixins/_reset-text.scss +17 -17
- package/assets/scss/bootstrap-4.6.2/mixins/_resize.scss +6 -6
- package/assets/scss/bootstrap-4.6.2/mixins/_screen-reader.scss +34 -34
- package/assets/scss/bootstrap-4.6.2/mixins/_size.scss +7 -7
- package/assets/scss/bootstrap-4.6.2/mixins/_table-row.scss +39 -39
- package/assets/scss/bootstrap-4.6.2/mixins/_text-emphasis.scss +17 -17
- package/assets/scss/bootstrap-4.6.2/mixins/_text-hide.scss +11 -11
- package/assets/scss/bootstrap-4.6.2/mixins/_text-truncate.scss +8 -8
- package/assets/scss/bootstrap-4.6.2/mixins/_transition.scss +26 -26
- package/assets/scss/bootstrap-4.6.2/mixins/_visibility.scss +8 -8
- package/assets/scss/bootstrap-4.6.2/utilities/_align.scss +8 -8
- package/assets/scss/bootstrap-4.6.2/utilities/_background.scss +19 -19
- package/assets/scss/bootstrap-4.6.2/utilities/_borders.scss +75 -75
- package/assets/scss/bootstrap-4.6.2/utilities/_clearfix.scss +3 -3
- package/assets/scss/bootstrap-4.6.2/utilities/_display.scss +26 -26
- package/assets/scss/bootstrap-4.6.2/utilities/_embed.scss +39 -39
- package/assets/scss/bootstrap-4.6.2/utilities/_flex.scss +51 -51
- package/assets/scss/bootstrap-4.6.2/utilities/_float.scss +11 -11
- package/assets/scss/bootstrap-4.6.2/utilities/_interactions.scss +5 -5
- package/assets/scss/bootstrap-4.6.2/utilities/_overflow.scss +5 -5
- package/assets/scss/bootstrap-4.6.2/utilities/_position.scss +32 -32
- package/assets/scss/bootstrap-4.6.2/utilities/_screenreaders.scss +11 -11
- package/assets/scss/bootstrap-4.6.2/utilities/_shadows.scss +6 -6
- package/assets/scss/bootstrap-4.6.2/utilities/_sizing.scss +20 -20
- package/assets/scss/bootstrap-4.6.2/utilities/_spacing.scss +73 -73
- package/assets/scss/bootstrap-4.6.2/utilities/_stretched-link.scss +19 -19
- package/assets/scss/bootstrap-4.6.2/utilities/_text.scss +72 -72
- package/assets/scss/bootstrap-4.6.2/utilities/_visibility.scss +13 -13
- package/assets/scss/bootstrap-4.6.2/vendor/_rfs.scss +228 -228
- package/assets/scss/core/print.scss +47 -47
- package/assets/scss/core/scrollbar.scss +30 -30
- package/assets/scss/core/typography.scss +121 -121
- package/fesm2022/sd-angular-core-components-anchor-v2.mjs +11 -11
- package/fesm2022/sd-angular-core-components-anchor-v2.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-anchor.mjs +12 -12
- package/fesm2022/sd-angular-core-components-avatar.mjs +4 -4
- package/fesm2022/sd-angular-core-components-avatar.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-badge.mjs +3 -3
- package/fesm2022/sd-angular-core-components-base.mjs +3 -3
- package/fesm2022/sd-angular-core-components-button.mjs +3 -3
- package/fesm2022/sd-angular-core-components-chart.mjs +48 -48
- package/fesm2022/sd-angular-core-components-chart.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-code-editor.mjs +3 -3
- package/fesm2022/sd-angular-core-components-document-builder.mjs +6 -6
- package/fesm2022/sd-angular-core-components-editor.mjs +3 -3
- package/fesm2022/sd-angular-core-components-history.mjs +7 -7
- package/fesm2022/sd-angular-core-components-import-excel.mjs +10 -10
- package/fesm2022/sd-angular-core-components-mini-editor.mjs +3 -3
- package/fesm2022/sd-angular-core-components-modal.mjs +3 -3
- package/fesm2022/sd-angular-core-components-preview.mjs +3 -3
- package/fesm2022/sd-angular-core-components-query-builder.mjs +3 -3
- package/fesm2022/sd-angular-core-components-quick-action.mjs +3 -3
- package/fesm2022/sd-angular-core-components-quick-action.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-section.mjs +6 -6
- package/fesm2022/sd-angular-core-components-side-drawer.mjs +3 -3
- package/fesm2022/sd-angular-core-components-tab-router.mjs +20 -20
- package/fesm2022/sd-angular-core-components-tab-router.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-table.mjs +112 -108
- package/fesm2022/sd-angular-core-components-table.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-upload-file.mjs +17 -17
- package/fesm2022/sd-angular-core-components-upload-file.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-view.mjs +3 -3
- package/fesm2022/sd-angular-core-components-workflow.mjs +198 -198
- package/fesm2022/sd-angular-core-directives.mjs +21 -21
- package/fesm2022/sd-angular-core-directives.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-autocomplete.mjs +3 -3
- package/fesm2022/sd-angular-core-forms-checkbox.mjs +3 -3
- package/fesm2022/sd-angular-core-forms-chip-calendar.mjs +6 -6
- package/fesm2022/sd-angular-core-forms-chip.mjs +6 -6
- package/fesm2022/sd-angular-core-forms-date-range.mjs +3 -3
- package/fesm2022/sd-angular-core-forms-date.mjs +3 -3
- package/fesm2022/sd-angular-core-forms-datetime.mjs +3 -3
- package/fesm2022/sd-angular-core-forms-directives.mjs +12 -12
- package/fesm2022/sd-angular-core-forms-directives.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-input-number.mjs +3 -3
- package/fesm2022/sd-angular-core-forms-input.mjs +3 -3
- package/fesm2022/sd-angular-core-forms-label.mjs +3 -3
- package/fesm2022/sd-angular-core-forms-models.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-radio.mjs +3 -3
- package/fesm2022/sd-angular-core-forms-select.mjs +4 -4
- package/fesm2022/sd-angular-core-forms-select.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-switch.mjs +3 -3
- package/fesm2022/sd-angular-core-forms-textarea.mjs +3 -3
- package/fesm2022/sd-angular-core-forms.mjs +4 -4
- package/fesm2022/sd-angular-core-forms.mjs.map +1 -1
- package/fesm2022/sd-angular-core-handlers.mjs +3 -3
- package/fesm2022/sd-angular-core-interceptors.mjs +3 -3
- package/fesm2022/sd-angular-core-modules-auth.mjs +9 -9
- package/fesm2022/sd-angular-core-modules-authom.mjs +7 -7
- package/fesm2022/sd-angular-core-modules-authom.mjs.map +1 -1
- package/fesm2022/sd-angular-core-modules-keycloak.mjs +7 -7
- package/fesm2022/sd-angular-core-modules-layout.mjs +74 -74
- package/fesm2022/sd-angular-core-modules-layout.mjs.map +1 -1
- package/fesm2022/sd-angular-core-modules-permission.mjs +9 -9
- package/fesm2022/sd-angular-core-pipes.mjs +14 -14
- package/fesm2022/sd-angular-core-pipes.mjs.map +1 -1
- package/fesm2022/sd-angular-core-services-api.mjs +10 -10
- package/fesm2022/sd-angular-core-services-api.mjs.map +1 -1
- package/fesm2022/sd-angular-core-services-cache.mjs +3 -3
- package/fesm2022/sd-angular-core-services-cache.mjs.map +1 -1
- package/fesm2022/sd-angular-core-services-confirm.mjs +6 -6
- package/fesm2022/sd-angular-core-services-confirm.mjs.map +1 -1
- package/fesm2022/sd-angular-core-services-docx.mjs +3 -3
- package/fesm2022/sd-angular-core-services-excel.mjs +3 -3
- package/fesm2022/sd-angular-core-services-firebase.mjs +3 -3
- package/fesm2022/sd-angular-core-services-firebase.mjs.map +1 -1
- package/fesm2022/sd-angular-core-services-license.mjs +3 -3
- package/fesm2022/sd-angular-core-services-license.mjs.map +1 -1
- package/fesm2022/sd-angular-core-services-loading.mjs +3 -3
- package/fesm2022/sd-angular-core-services-notify.mjs +9 -9
- package/fesm2022/sd-angular-core-services-storage.mjs +3 -3
- package/fesm2022/sd-angular-core-services-storage.mjs.map +1 -1
- package/fesm2022/sd-angular-core-utilities-extensions.mjs.map +1 -1
- package/fesm2022/sd-angular-core-utilities-models.mjs.map +1 -1
- package/fesm2022/sd-angular-core.mjs.map +1 -1
- package/package.json +70 -70
- package/sd-angular-core-19.0.0-beta.85.tgz +0 -0
- package/sd-angular-core-19.0.0-beta.83.tgz +0 -0
|
@@ -1,195 +1,195 @@
|
|
|
1
|
-
// Form control focus state
|
|
2
|
-
//
|
|
3
|
-
// Generate a customized focus state and for any input with the specified color,
|
|
4
|
-
// which defaults to the `$input-focus-border-color` variable.
|
|
5
|
-
//
|
|
6
|
-
// We highly encourage you to not customize the default value, but instead use
|
|
7
|
-
// this to tweak colors on an as-needed basis. This aesthetic change is based on
|
|
8
|
-
// WebKit's default styles, but applicable to a wider range of browsers. Its
|
|
9
|
-
// usability and accessibility should be taken into account with any change.
|
|
10
|
-
//
|
|
11
|
-
// Example usage: change the default blue border and shadow to white for better
|
|
12
|
-
// contrast against a dark gray background.
|
|
13
|
-
@mixin form-control-focus($ignore-warning: false) {
|
|
14
|
-
&:focus {
|
|
15
|
-
color: $input-focus-color;
|
|
16
|
-
background-color: $input-focus-bg;
|
|
17
|
-
border-color: $input-focus-border-color;
|
|
18
|
-
outline: 0;
|
|
19
|
-
@if $enable-shadows {
|
|
20
|
-
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
|
|
21
|
-
} @else {
|
|
22
|
-
// Avoid using mixin so we can pass custom focus shadow properly
|
|
23
|
-
box-shadow: $input-focus-box-shadow;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
@include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
// This mixin uses an `if()` technique to be compatible with Dart Sass
|
|
30
|
-
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
|
|
31
|
-
@mixin form-validation-state-selector($state) {
|
|
32
|
-
@if ($state == "valid" or $state == "invalid") {
|
|
33
|
-
.was-validated #{if(&, "&", "")}:#{$state},
|
|
34
|
-
#{if(&, "&", "")}.is-#{$state} {
|
|
35
|
-
@content;
|
|
36
|
-
}
|
|
37
|
-
} @else {
|
|
38
|
-
#{if(&, "&", "")}.is-#{$state} {
|
|
39
|
-
@content;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
@mixin form-validation-state($state, $color, $icon) {
|
|
45
|
-
.#{$state}-feedback {
|
|
46
|
-
display: none;
|
|
47
|
-
width: 100%;
|
|
48
|
-
margin-top: $form-feedback-margin-top;
|
|
49
|
-
@include font-size($form-feedback-font-size);
|
|
50
|
-
color: $color;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.#{$state}-tooltip {
|
|
54
|
-
position: absolute;
|
|
55
|
-
top: 100%;
|
|
56
|
-
left: 0;
|
|
57
|
-
z-index: 5;
|
|
58
|
-
display: none;
|
|
59
|
-
max-width: 100%; // Contain to parent when possible
|
|
60
|
-
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
|
|
61
|
-
margin-top: .1rem;
|
|
62
|
-
@include font-size($form-feedback-tooltip-font-size);
|
|
63
|
-
line-height: $form-feedback-tooltip-line-height;
|
|
64
|
-
color: color-yiq($color);
|
|
65
|
-
background-color: rgba($color, $form-feedback-tooltip-opacity);
|
|
66
|
-
@include border-radius($form-feedback-tooltip-border-radius);
|
|
67
|
-
|
|
68
|
-
// See https://github.com/twbs/bootstrap/pull/31557
|
|
69
|
-
// Align tooltip to form elements
|
|
70
|
-
.form-row > .col > &,
|
|
71
|
-
.form-row > [class*="col-"] > & {
|
|
72
|
-
left: $form-grid-gutter-width * .5;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
@include form-validation-state-selector($state) {
|
|
77
|
-
~ .#{$state}-feedback,
|
|
78
|
-
~ .#{$state}-tooltip {
|
|
79
|
-
display: block;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.form-control {
|
|
84
|
-
@include form-validation-state-selector($state) {
|
|
85
|
-
border-color: $color;
|
|
86
|
-
|
|
87
|
-
@if $enable-validation-icons {
|
|
88
|
-
padding-right: $input-height-inner !important; // stylelint-disable-line declaration-no-important
|
|
89
|
-
background-image: escape-svg($icon);
|
|
90
|
-
background-repeat: no-repeat;
|
|
91
|
-
background-position: right $input-height-inner-quarter center;
|
|
92
|
-
background-size: $input-height-inner-half $input-height-inner-half;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
&:focus {
|
|
96
|
-
border-color: $color;
|
|
97
|
-
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
// stylelint-disable-next-line selector-no-qualifying-type
|
|
103
|
-
select.form-control {
|
|
104
|
-
@include form-validation-state-selector($state) {
|
|
105
|
-
@if $enable-validation-icons {
|
|
106
|
-
padding-right: $input-padding-x * 4 !important; // stylelint-disable-line declaration-no-important
|
|
107
|
-
background-position: right $input-padding-x * 2 center;
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
// stylelint-disable-next-line selector-no-qualifying-type
|
|
113
|
-
textarea.form-control {
|
|
114
|
-
@include form-validation-state-selector($state) {
|
|
115
|
-
@if $enable-validation-icons {
|
|
116
|
-
padding-right: $input-height-inner;
|
|
117
|
-
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.custom-select {
|
|
123
|
-
@include form-validation-state-selector($state) {
|
|
124
|
-
border-color: $color;
|
|
125
|
-
|
|
126
|
-
@if $enable-validation-icons {
|
|
127
|
-
padding-right: $custom-select-feedback-icon-padding-right !important; // stylelint-disable-line declaration-no-important
|
|
128
|
-
background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
&:focus {
|
|
132
|
-
border-color: $color;
|
|
133
|
-
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.form-check-input {
|
|
139
|
-
@include form-validation-state-selector($state) {
|
|
140
|
-
~ .form-check-label {
|
|
141
|
-
color: $color;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
~ .#{$state}-feedback,
|
|
145
|
-
~ .#{$state}-tooltip {
|
|
146
|
-
display: block;
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
.custom-control-input {
|
|
152
|
-
@include form-validation-state-selector($state) {
|
|
153
|
-
~ .custom-control-label {
|
|
154
|
-
color: $color;
|
|
155
|
-
|
|
156
|
-
&::before {
|
|
157
|
-
border-color: $color;
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
&:checked {
|
|
162
|
-
~ .custom-control-label::before {
|
|
163
|
-
border-color: lighten($color, 10%);
|
|
164
|
-
@include gradient-bg(lighten($color, 10%));
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
&:focus {
|
|
169
|
-
~ .custom-control-label::before {
|
|
170
|
-
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
&:not(:checked) ~ .custom-control-label::before {
|
|
174
|
-
border-color: $color;
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
// custom file
|
|
181
|
-
.custom-file-input {
|
|
182
|
-
@include form-validation-state-selector($state) {
|
|
183
|
-
~ .custom-file-label {
|
|
184
|
-
border-color: $color;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
&:focus {
|
|
188
|
-
~ .custom-file-label {
|
|
189
|
-
border-color: $color;
|
|
190
|
-
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
}
|
|
1
|
+
// Form control focus state
|
|
2
|
+
//
|
|
3
|
+
// Generate a customized focus state and for any input with the specified color,
|
|
4
|
+
// which defaults to the `$input-focus-border-color` variable.
|
|
5
|
+
//
|
|
6
|
+
// We highly encourage you to not customize the default value, but instead use
|
|
7
|
+
// this to tweak colors on an as-needed basis. This aesthetic change is based on
|
|
8
|
+
// WebKit's default styles, but applicable to a wider range of browsers. Its
|
|
9
|
+
// usability and accessibility should be taken into account with any change.
|
|
10
|
+
//
|
|
11
|
+
// Example usage: change the default blue border and shadow to white for better
|
|
12
|
+
// contrast against a dark gray background.
|
|
13
|
+
@mixin form-control-focus($ignore-warning: false) {
|
|
14
|
+
&:focus {
|
|
15
|
+
color: $input-focus-color;
|
|
16
|
+
background-color: $input-focus-bg;
|
|
17
|
+
border-color: $input-focus-border-color;
|
|
18
|
+
outline: 0;
|
|
19
|
+
@if $enable-shadows {
|
|
20
|
+
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
|
|
21
|
+
} @else {
|
|
22
|
+
// Avoid using mixin so we can pass custom focus shadow properly
|
|
23
|
+
box-shadow: $input-focus-box-shadow;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
@include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
// This mixin uses an `if()` technique to be compatible with Dart Sass
|
|
30
|
+
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
|
|
31
|
+
@mixin form-validation-state-selector($state) {
|
|
32
|
+
@if ($state == "valid" or $state == "invalid") {
|
|
33
|
+
.was-validated #{if(&, "&", "")}:#{$state},
|
|
34
|
+
#{if(&, "&", "")}.is-#{$state} {
|
|
35
|
+
@content;
|
|
36
|
+
}
|
|
37
|
+
} @else {
|
|
38
|
+
#{if(&, "&", "")}.is-#{$state} {
|
|
39
|
+
@content;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@mixin form-validation-state($state, $color, $icon) {
|
|
45
|
+
.#{$state}-feedback {
|
|
46
|
+
display: none;
|
|
47
|
+
width: 100%;
|
|
48
|
+
margin-top: $form-feedback-margin-top;
|
|
49
|
+
@include font-size($form-feedback-font-size);
|
|
50
|
+
color: $color;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.#{$state}-tooltip {
|
|
54
|
+
position: absolute;
|
|
55
|
+
top: 100%;
|
|
56
|
+
left: 0;
|
|
57
|
+
z-index: 5;
|
|
58
|
+
display: none;
|
|
59
|
+
max-width: 100%; // Contain to parent when possible
|
|
60
|
+
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
|
|
61
|
+
margin-top: .1rem;
|
|
62
|
+
@include font-size($form-feedback-tooltip-font-size);
|
|
63
|
+
line-height: $form-feedback-tooltip-line-height;
|
|
64
|
+
color: color-yiq($color);
|
|
65
|
+
background-color: rgba($color, $form-feedback-tooltip-opacity);
|
|
66
|
+
@include border-radius($form-feedback-tooltip-border-radius);
|
|
67
|
+
|
|
68
|
+
// See https://github.com/twbs/bootstrap/pull/31557
|
|
69
|
+
// Align tooltip to form elements
|
|
70
|
+
.form-row > .col > &,
|
|
71
|
+
.form-row > [class*="col-"] > & {
|
|
72
|
+
left: $form-grid-gutter-width * .5;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
@include form-validation-state-selector($state) {
|
|
77
|
+
~ .#{$state}-feedback,
|
|
78
|
+
~ .#{$state}-tooltip {
|
|
79
|
+
display: block;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.form-control {
|
|
84
|
+
@include form-validation-state-selector($state) {
|
|
85
|
+
border-color: $color;
|
|
86
|
+
|
|
87
|
+
@if $enable-validation-icons {
|
|
88
|
+
padding-right: $input-height-inner !important; // stylelint-disable-line declaration-no-important
|
|
89
|
+
background-image: escape-svg($icon);
|
|
90
|
+
background-repeat: no-repeat;
|
|
91
|
+
background-position: right $input-height-inner-quarter center;
|
|
92
|
+
background-size: $input-height-inner-half $input-height-inner-half;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&:focus {
|
|
96
|
+
border-color: $color;
|
|
97
|
+
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// stylelint-disable-next-line selector-no-qualifying-type
|
|
103
|
+
select.form-control {
|
|
104
|
+
@include form-validation-state-selector($state) {
|
|
105
|
+
@if $enable-validation-icons {
|
|
106
|
+
padding-right: $input-padding-x * 4 !important; // stylelint-disable-line declaration-no-important
|
|
107
|
+
background-position: right $input-padding-x * 2 center;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
// stylelint-disable-next-line selector-no-qualifying-type
|
|
113
|
+
textarea.form-control {
|
|
114
|
+
@include form-validation-state-selector($state) {
|
|
115
|
+
@if $enable-validation-icons {
|
|
116
|
+
padding-right: $input-height-inner;
|
|
117
|
+
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.custom-select {
|
|
123
|
+
@include form-validation-state-selector($state) {
|
|
124
|
+
border-color: $color;
|
|
125
|
+
|
|
126
|
+
@if $enable-validation-icons {
|
|
127
|
+
padding-right: $custom-select-feedback-icon-padding-right !important; // stylelint-disable-line declaration-no-important
|
|
128
|
+
background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
&:focus {
|
|
132
|
+
border-color: $color;
|
|
133
|
+
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.form-check-input {
|
|
139
|
+
@include form-validation-state-selector($state) {
|
|
140
|
+
~ .form-check-label {
|
|
141
|
+
color: $color;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
~ .#{$state}-feedback,
|
|
145
|
+
~ .#{$state}-tooltip {
|
|
146
|
+
display: block;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.custom-control-input {
|
|
152
|
+
@include form-validation-state-selector($state) {
|
|
153
|
+
~ .custom-control-label {
|
|
154
|
+
color: $color;
|
|
155
|
+
|
|
156
|
+
&::before {
|
|
157
|
+
border-color: $color;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
&:checked {
|
|
162
|
+
~ .custom-control-label::before {
|
|
163
|
+
border-color: lighten($color, 10%);
|
|
164
|
+
@include gradient-bg(lighten($color, 10%));
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
&:focus {
|
|
169
|
+
~ .custom-control-label::before {
|
|
170
|
+
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
&:not(:checked) ~ .custom-control-label::before {
|
|
174
|
+
border-color: $color;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
// custom file
|
|
181
|
+
.custom-file-input {
|
|
182
|
+
@include form-validation-state-selector($state) {
|
|
183
|
+
~ .custom-file-label {
|
|
184
|
+
border-color: $color;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
&:focus {
|
|
188
|
+
~ .custom-file-label {
|
|
189
|
+
border-color: $color;
|
|
190
|
+
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
}
|
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
// Gradients
|
|
2
|
-
|
|
3
|
-
@mixin gradient-bg($color) {
|
|
4
|
-
@if $enable-gradients {
|
|
5
|
-
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
|
|
6
|
-
} @else {
|
|
7
|
-
background-color: $color;
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
// Horizontal gradient, from left to right
|
|
12
|
-
//
|
|
13
|
-
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
|
14
|
-
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
|
|
15
|
-
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
|
|
16
|
-
background-repeat: repeat-x;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
// Vertical gradient, from top to bottom
|
|
20
|
-
//
|
|
21
|
-
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
|
22
|
-
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
|
|
23
|
-
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
|
|
24
|
-
background-repeat: repeat-x;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
|
|
28
|
-
background-image: linear-gradient($deg, $start-color, $end-color);
|
|
29
|
-
background-repeat: repeat-x;
|
|
30
|
-
}
|
|
31
|
-
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
|
|
32
|
-
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
|
|
33
|
-
background-repeat: no-repeat;
|
|
34
|
-
}
|
|
35
|
-
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
|
|
36
|
-
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
|
|
37
|
-
background-repeat: no-repeat;
|
|
38
|
-
}
|
|
39
|
-
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
|
|
40
|
-
background-image: radial-gradient(circle, $inner-color, $outer-color);
|
|
41
|
-
background-repeat: no-repeat;
|
|
42
|
-
}
|
|
43
|
-
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
|
|
44
|
-
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
|
|
45
|
-
}
|
|
1
|
+
// Gradients
|
|
2
|
+
|
|
3
|
+
@mixin gradient-bg($color) {
|
|
4
|
+
@if $enable-gradients {
|
|
5
|
+
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
|
|
6
|
+
} @else {
|
|
7
|
+
background-color: $color;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// Horizontal gradient, from left to right
|
|
12
|
+
//
|
|
13
|
+
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
|
14
|
+
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
|
|
15
|
+
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
|
|
16
|
+
background-repeat: repeat-x;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// Vertical gradient, from top to bottom
|
|
20
|
+
//
|
|
21
|
+
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
|
22
|
+
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
|
|
23
|
+
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
|
|
24
|
+
background-repeat: repeat-x;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
|
|
28
|
+
background-image: linear-gradient($deg, $start-color, $end-color);
|
|
29
|
+
background-repeat: repeat-x;
|
|
30
|
+
}
|
|
31
|
+
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
|
|
32
|
+
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
|
|
33
|
+
background-repeat: no-repeat;
|
|
34
|
+
}
|
|
35
|
+
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
|
|
36
|
+
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
|
|
37
|
+
background-repeat: no-repeat;
|
|
38
|
+
}
|
|
39
|
+
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
|
|
40
|
+
background-image: radial-gradient(circle, $inner-color, $outer-color);
|
|
41
|
+
background-repeat: no-repeat;
|
|
42
|
+
}
|
|
43
|
+
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
|
|
44
|
+
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
|
|
45
|
+
}
|
|
@@ -1,80 +1,80 @@
|
|
|
1
|
-
// Framework grid generation
|
|
2
|
-
//
|
|
3
|
-
// Used only by Bootstrap to generate the correct number of grid classes given
|
|
4
|
-
// any value of `$grid-columns`.
|
|
5
|
-
|
|
6
|
-
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
|
|
7
|
-
// Common properties for all breakpoints
|
|
8
|
-
%grid-column {
|
|
9
|
-
position: relative;
|
|
10
|
-
width: 100%;
|
|
11
|
-
padding-right: $gutter * .5;
|
|
12
|
-
padding-left: $gutter * .5;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
@each $breakpoint in map-keys($breakpoints) {
|
|
16
|
-
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
17
|
-
|
|
18
|
-
@if $columns > 0 {
|
|
19
|
-
// Allow columns to stretch full width below their breakpoints
|
|
20
|
-
@for $i from 1 through $columns {
|
|
21
|
-
.col#{$infix}-#{$i} {
|
|
22
|
-
@extend %grid-column;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.col#{$infix},
|
|
28
|
-
.col#{$infix}-auto {
|
|
29
|
-
@extend %grid-column;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
|
33
|
-
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
|
|
34
|
-
.col#{$infix} {
|
|
35
|
-
flex-basis: 0;
|
|
36
|
-
flex-grow: 1;
|
|
37
|
-
max-width: 100%;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
@if $grid-row-columns > 0 {
|
|
41
|
-
@for $i from 1 through $grid-row-columns {
|
|
42
|
-
.row-cols#{$infix}-#{$i} {
|
|
43
|
-
@include row-cols($i);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.col#{$infix}-auto {
|
|
49
|
-
@include make-col-auto();
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@if $columns > 0 {
|
|
53
|
-
@for $i from 1 through $columns {
|
|
54
|
-
.col#{$infix}-#{$i} {
|
|
55
|
-
@include make-col($i, $columns);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.order#{$infix}-first { order: -1; }
|
|
61
|
-
|
|
62
|
-
.order#{$infix}-last { order: $columns + 1; }
|
|
63
|
-
|
|
64
|
-
@for $i from 0 through $columns {
|
|
65
|
-
.order#{$infix}-#{$i} { order: $i; }
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
@if $columns > 0 {
|
|
69
|
-
// `$columns - 1` because offsetting by the width of an entire row isn't possible
|
|
70
|
-
@for $i from 0 through ($columns - 1) {
|
|
71
|
-
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
|
|
72
|
-
.offset#{$infix}-#{$i} {
|
|
73
|
-
@include make-col-offset($i, $columns);
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
}
|
|
1
|
+
// Framework grid generation
|
|
2
|
+
//
|
|
3
|
+
// Used only by Bootstrap to generate the correct number of grid classes given
|
|
4
|
+
// any value of `$grid-columns`.
|
|
5
|
+
|
|
6
|
+
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
|
|
7
|
+
// Common properties for all breakpoints
|
|
8
|
+
%grid-column {
|
|
9
|
+
position: relative;
|
|
10
|
+
width: 100%;
|
|
11
|
+
padding-right: $gutter * .5;
|
|
12
|
+
padding-left: $gutter * .5;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@each $breakpoint in map-keys($breakpoints) {
|
|
16
|
+
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
17
|
+
|
|
18
|
+
@if $columns > 0 {
|
|
19
|
+
// Allow columns to stretch full width below their breakpoints
|
|
20
|
+
@for $i from 1 through $columns {
|
|
21
|
+
.col#{$infix}-#{$i} {
|
|
22
|
+
@extend %grid-column;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.col#{$infix},
|
|
28
|
+
.col#{$infix}-auto {
|
|
29
|
+
@extend %grid-column;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
|
33
|
+
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
|
|
34
|
+
.col#{$infix} {
|
|
35
|
+
flex-basis: 0;
|
|
36
|
+
flex-grow: 1;
|
|
37
|
+
max-width: 100%;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@if $grid-row-columns > 0 {
|
|
41
|
+
@for $i from 1 through $grid-row-columns {
|
|
42
|
+
.row-cols#{$infix}-#{$i} {
|
|
43
|
+
@include row-cols($i);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.col#{$infix}-auto {
|
|
49
|
+
@include make-col-auto();
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@if $columns > 0 {
|
|
53
|
+
@for $i from 1 through $columns {
|
|
54
|
+
.col#{$infix}-#{$i} {
|
|
55
|
+
@include make-col($i, $columns);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.order#{$infix}-first { order: -1; }
|
|
61
|
+
|
|
62
|
+
.order#{$infix}-last { order: $columns + 1; }
|
|
63
|
+
|
|
64
|
+
@for $i from 0 through $columns {
|
|
65
|
+
.order#{$infix}-#{$i} { order: $i; }
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@if $columns > 0 {
|
|
69
|
+
// `$columns - 1` because offsetting by the width of an entire row isn't possible
|
|
70
|
+
@for $i from 0 through ($columns - 1) {
|
|
71
|
+
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
|
|
72
|
+
.offset#{$infix}-#{$i} {
|
|
73
|
+
@include make-col-offset($i, $columns);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|