bootstrap-scss 5.2.1 → 5.2.3

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.
@@ -8,6 +8,9 @@
8
8
  @import "mixins";
9
9
  @import "utilities";
10
10
 
11
+ // Layout & components
12
+ @import "root";
13
+
11
14
  // Helpers
12
15
  @import "helpers";
13
16
 
@@ -1,75 +1,75 @@
1
- .form-floating {
2
- position: relative;
3
-
4
- > .form-control,
5
- > .form-control-plaintext,
6
- > .form-select {
7
- height: $form-floating-height;
8
- line-height: $form-floating-line-height;
9
- }
10
-
11
- > label {
12
- position: absolute;
13
- top: 0;
14
- left: 0;
15
- width: 100%;
16
- height: 100%; // allow textareas
17
- padding: $form-floating-padding-y $form-floating-padding-x;
18
- overflow: hidden;
19
- text-align: start;
20
- text-overflow: ellipsis;
21
- white-space: nowrap;
22
- pointer-events: none;
23
- border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
24
- transform-origin: 0 0;
25
- @include transition($form-floating-transition);
26
- }
27
-
28
- > .form-control,
29
- > .form-control-plaintext {
30
- padding: $form-floating-padding-y $form-floating-padding-x;
31
-
32
- &::placeholder {
33
- color: transparent;
34
- }
35
-
36
- &:focus,
37
- &:not(:placeholder-shown) {
38
- padding-top: $form-floating-input-padding-t;
39
- padding-bottom: $form-floating-input-padding-b;
40
- }
41
- // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
42
- &:-webkit-autofill {
43
- padding-top: $form-floating-input-padding-t;
44
- padding-bottom: $form-floating-input-padding-b;
45
- }
46
- }
47
-
48
- > .form-select {
49
- padding-top: $form-floating-input-padding-t;
50
- padding-bottom: $form-floating-input-padding-b;
51
- }
52
-
53
- > .form-control:focus,
54
- > .form-control:not(:placeholder-shown),
55
- > .form-control-plaintext,
56
- > .form-select {
57
- ~ label {
58
- opacity: $form-floating-label-opacity;
59
- transform: $form-floating-label-transform;
60
- }
61
- }
62
- // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
63
- > .form-control:-webkit-autofill {
64
- ~ label {
65
- opacity: $form-floating-label-opacity;
66
- transform: $form-floating-label-transform;
67
- }
68
- }
69
-
70
- > .form-control-plaintext {
71
- ~ label {
72
- border-width: $input-border-width 0; // Required to properly position label text - as explained above
73
- }
74
- }
75
- }
1
+ .form-floating {
2
+ position: relative;
3
+
4
+ > .form-control,
5
+ > .form-control-plaintext,
6
+ > .form-select {
7
+ height: $form-floating-height;
8
+ line-height: $form-floating-line-height;
9
+ }
10
+
11
+ > label {
12
+ position: absolute;
13
+ top: 0;
14
+ left: 0;
15
+ width: 100%;
16
+ height: 100%; // allow textareas
17
+ padding: $form-floating-padding-y $form-floating-padding-x;
18
+ overflow: hidden;
19
+ text-align: start;
20
+ text-overflow: ellipsis;
21
+ white-space: nowrap;
22
+ pointer-events: none;
23
+ border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
24
+ transform-origin: 0 0;
25
+ @include transition($form-floating-transition);
26
+ }
27
+
28
+ > .form-control,
29
+ > .form-control-plaintext {
30
+ padding: $form-floating-padding-y $form-floating-padding-x;
31
+
32
+ &::placeholder {
33
+ color: transparent;
34
+ }
35
+
36
+ &:focus,
37
+ &:not(:placeholder-shown) {
38
+ padding-top: $form-floating-input-padding-t;
39
+ padding-bottom: $form-floating-input-padding-b;
40
+ }
41
+ // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
42
+ &:-webkit-autofill {
43
+ padding-top: $form-floating-input-padding-t;
44
+ padding-bottom: $form-floating-input-padding-b;
45
+ }
46
+ }
47
+
48
+ > .form-select {
49
+ padding-top: $form-floating-input-padding-t;
50
+ padding-bottom: $form-floating-input-padding-b;
51
+ }
52
+
53
+ > .form-control:focus,
54
+ > .form-control:not(:placeholder-shown),
55
+ > .form-control-plaintext,
56
+ > .form-select {
57
+ ~ label {
58
+ opacity: $form-floating-label-opacity;
59
+ transform: $form-floating-label-transform;
60
+ }
61
+ }
62
+ // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
63
+ > .form-control:-webkit-autofill {
64
+ ~ label {
65
+ opacity: $form-floating-label-opacity;
66
+ transform: $form-floating-label-transform;
67
+ }
68
+ }
69
+
70
+ > .form-control-plaintext {
71
+ ~ label {
72
+ border-width: $input-border-width 0; // Required to properly position label text - as explained above
73
+ }
74
+ }
75
+ }
@@ -1,132 +1,132 @@
1
- //
2
- // Base styles
3
- //
4
-
5
- .input-group {
6
- position: relative;
7
- display: flex;
8
- flex-wrap: wrap; // For form validation feedback
9
- align-items: stretch;
10
- width: 100%;
11
-
12
- > .form-control,
13
- > .form-select,
14
- > .form-floating {
15
- position: relative; // For focus state's z-index
16
- flex: 1 1 auto;
17
- width: 1%;
18
- min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
19
- }
20
-
21
- // Bring the "active" form control to the top of surrounding elements
22
- > .form-control:focus,
23
- > .form-select:focus,
24
- > .form-floating:focus-within {
25
- z-index: 5;
26
- }
27
-
28
- // Ensure buttons are always above inputs for more visually pleasing borders.
29
- // This isn't needed for `.input-group-text` since it shares the same border-color
30
- // as our inputs.
31
- .btn {
32
- position: relative;
33
- z-index: 2;
34
-
35
- &:focus {
36
- z-index: 5;
37
- }
38
- }
39
- }
40
-
41
-
42
- // Textual addons
43
- //
44
- // Serves as a catch-all element for any text or radio/checkbox input you wish
45
- // to prepend or append to an input.
46
-
47
- .input-group-text {
48
- display: flex;
49
- align-items: center;
50
- padding: $input-group-addon-padding-y $input-group-addon-padding-x;
51
- @include font-size($input-font-size); // Match inputs
52
- font-weight: $input-group-addon-font-weight;
53
- line-height: $input-line-height;
54
- color: $input-group-addon-color;
55
- text-align: center;
56
- white-space: nowrap;
57
- background-color: $input-group-addon-bg;
58
- border: $input-border-width solid $input-group-addon-border-color;
59
- @include border-radius($input-border-radius);
60
- }
61
-
62
-
63
- // Sizing
64
- //
65
- // Remix the default form control sizing classes into new ones for easier
66
- // manipulation.
67
-
68
- .input-group-lg > .form-control,
69
- .input-group-lg > .form-select,
70
- .input-group-lg > .input-group-text,
71
- .input-group-lg > .btn {
72
- padding: $input-padding-y-lg $input-padding-x-lg;
73
- @include font-size($input-font-size-lg);
74
- @include border-radius($input-border-radius-lg);
75
- }
76
-
77
- .input-group-sm > .form-control,
78
- .input-group-sm > .form-select,
79
- .input-group-sm > .input-group-text,
80
- .input-group-sm > .btn {
81
- padding: $input-padding-y-sm $input-padding-x-sm;
82
- @include font-size($input-font-size-sm);
83
- @include border-radius($input-border-radius-sm);
84
- }
85
-
86
- .input-group-lg > .form-select,
87
- .input-group-sm > .form-select {
88
- padding-right: $form-select-padding-x + $form-select-indicator-padding;
89
- }
90
-
91
-
92
- // Rounded corners
93
- //
94
- // These rulesets must come after the sizing ones to properly override sm and lg
95
- // border-radius values when extending. They're more specific than we'd like
96
- // with the `.input-group >` part, but without it, we cannot override the sizing.
97
-
98
- // stylelint-disable-next-line no-duplicate-selectors
99
- .input-group {
100
- &:not(.has-validation) {
101
- > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
102
- > .dropdown-toggle:nth-last-child(n + 3),
103
- > .form-floating:not(:last-child) > .form-control,
104
- > .form-floating:not(:last-child) > .form-select {
105
- @include border-end-radius(0);
106
- }
107
- }
108
-
109
- &.has-validation {
110
- > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
111
- > .dropdown-toggle:nth-last-child(n + 4),
112
- > .form-floating:nth-last-child(n + 3) > .form-control,
113
- > .form-floating:nth-last-child(n + 3) > .form-select {
114
- @include border-end-radius(0);
115
- }
116
- }
117
-
118
- $validation-messages: "";
119
- @each $state in map-keys($form-validation-states) {
120
- $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
121
- }
122
-
123
- > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
124
- margin-left: -$input-border-width;
125
- @include border-start-radius(0);
126
- }
127
-
128
- > .form-floating:not(:first-child) > .form-control,
129
- > .form-floating:not(:first-child) > .form-select {
130
- @include border-start-radius(0);
131
- }
132
- }
1
+ //
2
+ // Base styles
3
+ //
4
+
5
+ .input-group {
6
+ position: relative;
7
+ display: flex;
8
+ flex-wrap: wrap; // For form validation feedback
9
+ align-items: stretch;
10
+ width: 100%;
11
+
12
+ > .form-control,
13
+ > .form-select,
14
+ > .form-floating {
15
+ position: relative; // For focus state's z-index
16
+ flex: 1 1 auto;
17
+ width: 1%;
18
+ min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
19
+ }
20
+
21
+ // Bring the "active" form control to the top of surrounding elements
22
+ > .form-control:focus,
23
+ > .form-select:focus,
24
+ > .form-floating:focus-within {
25
+ z-index: 5;
26
+ }
27
+
28
+ // Ensure buttons are always above inputs for more visually pleasing borders.
29
+ // This isn't needed for `.input-group-text` since it shares the same border-color
30
+ // as our inputs.
31
+ .btn {
32
+ position: relative;
33
+ z-index: 2;
34
+
35
+ &:focus {
36
+ z-index: 5;
37
+ }
38
+ }
39
+ }
40
+
41
+
42
+ // Textual addons
43
+ //
44
+ // Serves as a catch-all element for any text or radio/checkbox input you wish
45
+ // to prepend or append to an input.
46
+
47
+ .input-group-text {
48
+ display: flex;
49
+ align-items: center;
50
+ padding: $input-group-addon-padding-y $input-group-addon-padding-x;
51
+ @include font-size($input-font-size); // Match inputs
52
+ font-weight: $input-group-addon-font-weight;
53
+ line-height: $input-line-height;
54
+ color: $input-group-addon-color;
55
+ text-align: center;
56
+ white-space: nowrap;
57
+ background-color: $input-group-addon-bg;
58
+ border: $input-border-width solid $input-group-addon-border-color;
59
+ @include border-radius($input-border-radius);
60
+ }
61
+
62
+
63
+ // Sizing
64
+ //
65
+ // Remix the default form control sizing classes into new ones for easier
66
+ // manipulation.
67
+
68
+ .input-group-lg > .form-control,
69
+ .input-group-lg > .form-select,
70
+ .input-group-lg > .input-group-text,
71
+ .input-group-lg > .btn {
72
+ padding: $input-padding-y-lg $input-padding-x-lg;
73
+ @include font-size($input-font-size-lg);
74
+ @include border-radius($input-border-radius-lg);
75
+ }
76
+
77
+ .input-group-sm > .form-control,
78
+ .input-group-sm > .form-select,
79
+ .input-group-sm > .input-group-text,
80
+ .input-group-sm > .btn {
81
+ padding: $input-padding-y-sm $input-padding-x-sm;
82
+ @include font-size($input-font-size-sm);
83
+ @include border-radius($input-border-radius-sm);
84
+ }
85
+
86
+ .input-group-lg > .form-select,
87
+ .input-group-sm > .form-select {
88
+ padding-right: $form-select-padding-x + $form-select-indicator-padding;
89
+ }
90
+
91
+
92
+ // Rounded corners
93
+ //
94
+ // These rulesets must come after the sizing ones to properly override sm and lg
95
+ // border-radius values when extending. They're more specific than we'd like
96
+ // with the `.input-group >` part, but without it, we cannot override the sizing.
97
+
98
+ // stylelint-disable-next-line no-duplicate-selectors
99
+ .input-group {
100
+ &:not(.has-validation) {
101
+ > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
102
+ > .dropdown-toggle:nth-last-child(n + 3),
103
+ > .form-floating:not(:last-child) > .form-control,
104
+ > .form-floating:not(:last-child) > .form-select {
105
+ @include border-end-radius(0);
106
+ }
107
+ }
108
+
109
+ &.has-validation {
110
+ > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
111
+ > .dropdown-toggle:nth-last-child(n + 4),
112
+ > .form-floating:nth-last-child(n + 3) > .form-control,
113
+ > .form-floating:nth-last-child(n + 3) > .form-select {
114
+ @include border-end-radius(0);
115
+ }
116
+ }
117
+
118
+ $validation-messages: "";
119
+ @each $state in map-keys($form-validation-states) {
120
+ $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
121
+ }
122
+
123
+ > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
124
+ margin-left: -$input-border-width;
125
+ @include border-start-radius(0);
126
+ }
127
+
128
+ > .form-floating:not(:first-child) > .form-control,
129
+ > .form-floating:not(:first-child) > .form-select {
130
+ @include border-start-radius(0);
131
+ }
132
+ }
@@ -1,9 +1,9 @@
1
- @mixin bsBanner($file) {
2
- /*!
3
- * Bootstrap #{$file} v5.2.1 (https://getbootstrap.com/)
4
- * Copyright 2011-2022 The Bootstrap Authors
5
- * Copyright 2011-2022 Twitter, Inc.
6
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
7
- */
8
- }
9
-
1
+ @mixin bsBanner($file) {
2
+ /*!
3
+ * Bootstrap #{$file} v5.2.3 (https://getbootstrap.com/)
4
+ * Copyright 2011-2022 The Bootstrap Authors
5
+ * Copyright 2011-2022 Twitter, Inc.
6
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
7
+ */
8
+ }
9
+