bootstrap-scss 5.2.1 → 5.2.3

Sign up to get free protection for your applications and to get access to all the features.
@@ -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
+