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.
@@ -1,152 +1,152 @@
1
- // This mixin uses an `if()` technique to be compatible with Dart Sass
2
- // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
3
-
4
- // scss-docs-start form-validation-mixins
5
- @mixin form-validation-state-selector($state) {
6
- @if ($state == "valid" or $state == "invalid") {
7
- .was-validated #{if(&, "&", "")}:#{$state},
8
- #{if(&, "&", "")}.is-#{$state} {
9
- @content;
10
- }
11
- } @else {
12
- #{if(&, "&", "")}.is-#{$state} {
13
- @content;
14
- }
15
- }
16
- }
17
-
18
- @mixin form-validation-state(
19
- $state,
20
- $color,
21
- $icon,
22
- $tooltip-color: color-contrast($color),
23
- $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
24
- $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
25
- ) {
26
- .#{$state}-feedback {
27
- display: none;
28
- width: 100%;
29
- margin-top: $form-feedback-margin-top;
30
- @include font-size($form-feedback-font-size);
31
- font-style: $form-feedback-font-style;
32
- color: $color;
33
- }
34
-
35
- .#{$state}-tooltip {
36
- position: absolute;
37
- top: 100%;
38
- z-index: 5;
39
- display: none;
40
- max-width: 100%; // Contain to parent when possible
41
- padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
42
- margin-top: .1rem;
43
- @include font-size($form-feedback-tooltip-font-size);
44
- line-height: $form-feedback-tooltip-line-height;
45
- color: $tooltip-color;
46
- background-color: $tooltip-bg-color;
47
- @include border-radius($form-feedback-tooltip-border-radius);
48
- }
49
-
50
- @include form-validation-state-selector($state) {
51
- ~ .#{$state}-feedback,
52
- ~ .#{$state}-tooltip {
53
- display: block;
54
- }
55
- }
56
-
57
- .form-control {
58
- @include form-validation-state-selector($state) {
59
- border-color: $color;
60
-
61
- @if $enable-validation-icons {
62
- padding-right: $input-height-inner;
63
- background-image: escape-svg($icon);
64
- background-repeat: no-repeat;
65
- background-position: right $input-height-inner-quarter center;
66
- background-size: $input-height-inner-half $input-height-inner-half;
67
- }
68
-
69
- &:focus {
70
- border-color: $color;
71
- box-shadow: $focus-box-shadow;
72
- }
73
- }
74
- }
75
-
76
- // stylelint-disable-next-line selector-no-qualifying-type
77
- textarea.form-control {
78
- @include form-validation-state-selector($state) {
79
- @if $enable-validation-icons {
80
- padding-right: $input-height-inner;
81
- background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
82
- }
83
- }
84
- }
85
-
86
- .form-select {
87
- @include form-validation-state-selector($state) {
88
- border-color: $color;
89
-
90
- @if $enable-validation-icons {
91
- &:not([multiple]):not([size]),
92
- &:not([multiple])[size="1"] {
93
- padding-right: $form-select-feedback-icon-padding-end;
94
- background-image: escape-svg($form-select-indicator), escape-svg($icon);
95
- background-position: $form-select-bg-position, $form-select-feedback-icon-position;
96
- background-size: $form-select-bg-size, $form-select-feedback-icon-size;
97
- }
98
- }
99
-
100
- &:focus {
101
- border-color: $color;
102
- box-shadow: $focus-box-shadow;
103
- }
104
- }
105
- }
106
-
107
- .form-control-color {
108
- @include form-validation-state-selector($state) {
109
- @if $enable-validation-icons {
110
- width: add($form-color-width, $input-height-inner);
111
- }
112
- }
113
- }
114
-
115
- .form-check-input {
116
- @include form-validation-state-selector($state) {
117
- border-color: $color;
118
-
119
- &:checked {
120
- background-color: $color;
121
- }
122
-
123
- &:focus {
124
- box-shadow: $focus-box-shadow;
125
- }
126
-
127
- ~ .form-check-label {
128
- color: $color;
129
- }
130
- }
131
- }
132
- .form-check-inline .form-check-input {
133
- ~ .#{$state}-feedback {
134
- margin-left: .5em;
135
- }
136
- }
137
-
138
- .input-group {
139
- > .form-control:not(:focus),
140
- > .form-select:not(:focus),
141
- > .form-floating:not(:focus-within) {
142
- @include form-validation-state-selector($state) {
143
- @if $state == "valid" {
144
- z-index: 3;
145
- } @else if $state == "invalid" {
146
- z-index: 4;
147
- }
148
- }
149
- }
150
- }
151
- }
152
- // scss-docs-end form-validation-mixins
1
+ // This mixin uses an `if()` technique to be compatible with Dart Sass
2
+ // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
3
+
4
+ // scss-docs-start form-validation-mixins
5
+ @mixin form-validation-state-selector($state) {
6
+ @if ($state == "valid" or $state == "invalid") {
7
+ .was-validated #{if(&, "&", "")}:#{$state},
8
+ #{if(&, "&", "")}.is-#{$state} {
9
+ @content;
10
+ }
11
+ } @else {
12
+ #{if(&, "&", "")}.is-#{$state} {
13
+ @content;
14
+ }
15
+ }
16
+ }
17
+
18
+ @mixin form-validation-state(
19
+ $state,
20
+ $color,
21
+ $icon,
22
+ $tooltip-color: color-contrast($color),
23
+ $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
24
+ $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
25
+ ) {
26
+ .#{$state}-feedback {
27
+ display: none;
28
+ width: 100%;
29
+ margin-top: $form-feedback-margin-top;
30
+ @include font-size($form-feedback-font-size);
31
+ font-style: $form-feedback-font-style;
32
+ color: $color;
33
+ }
34
+
35
+ .#{$state}-tooltip {
36
+ position: absolute;
37
+ top: 100%;
38
+ z-index: 5;
39
+ display: none;
40
+ max-width: 100%; // Contain to parent when possible
41
+ padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
42
+ margin-top: .1rem;
43
+ @include font-size($form-feedback-tooltip-font-size);
44
+ line-height: $form-feedback-tooltip-line-height;
45
+ color: $tooltip-color;
46
+ background-color: $tooltip-bg-color;
47
+ @include border-radius($form-feedback-tooltip-border-radius);
48
+ }
49
+
50
+ @include form-validation-state-selector($state) {
51
+ ~ .#{$state}-feedback,
52
+ ~ .#{$state}-tooltip {
53
+ display: block;
54
+ }
55
+ }
56
+
57
+ .form-control {
58
+ @include form-validation-state-selector($state) {
59
+ border-color: $color;
60
+
61
+ @if $enable-validation-icons {
62
+ padding-right: $input-height-inner;
63
+ background-image: escape-svg($icon);
64
+ background-repeat: no-repeat;
65
+ background-position: right $input-height-inner-quarter center;
66
+ background-size: $input-height-inner-half $input-height-inner-half;
67
+ }
68
+
69
+ &:focus {
70
+ border-color: $color;
71
+ box-shadow: $focus-box-shadow;
72
+ }
73
+ }
74
+ }
75
+
76
+ // stylelint-disable-next-line selector-no-qualifying-type
77
+ textarea.form-control {
78
+ @include form-validation-state-selector($state) {
79
+ @if $enable-validation-icons {
80
+ padding-right: $input-height-inner;
81
+ background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
82
+ }
83
+ }
84
+ }
85
+
86
+ .form-select {
87
+ @include form-validation-state-selector($state) {
88
+ border-color: $color;
89
+
90
+ @if $enable-validation-icons {
91
+ &:not([multiple]):not([size]),
92
+ &:not([multiple])[size="1"] {
93
+ padding-right: $form-select-feedback-icon-padding-end;
94
+ background-image: escape-svg($form-select-indicator), escape-svg($icon);
95
+ background-position: $form-select-bg-position, $form-select-feedback-icon-position;
96
+ background-size: $form-select-bg-size, $form-select-feedback-icon-size;
97
+ }
98
+ }
99
+
100
+ &:focus {
101
+ border-color: $color;
102
+ box-shadow: $focus-box-shadow;
103
+ }
104
+ }
105
+ }
106
+
107
+ .form-control-color {
108
+ @include form-validation-state-selector($state) {
109
+ @if $enable-validation-icons {
110
+ width: add($form-color-width, $input-height-inner);
111
+ }
112
+ }
113
+ }
114
+
115
+ .form-check-input {
116
+ @include form-validation-state-selector($state) {
117
+ border-color: $color;
118
+
119
+ &:checked {
120
+ background-color: $color;
121
+ }
122
+
123
+ &:focus {
124
+ box-shadow: $focus-box-shadow;
125
+ }
126
+
127
+ ~ .form-check-label {
128
+ color: $color;
129
+ }
130
+ }
131
+ }
132
+ .form-check-inline .form-check-input {
133
+ ~ .#{$state}-feedback {
134
+ margin-left: .5em;
135
+ }
136
+ }
137
+
138
+ .input-group {
139
+ > .form-control:not(:focus),
140
+ > .form-select:not(:focus),
141
+ > .form-floating:not(:focus-within) {
142
+ @include form-validation-state-selector($state) {
143
+ @if $state == "valid" {
144
+ z-index: 3;
145
+ } @else if $state == "invalid" {
146
+ z-index: 4;
147
+ }
148
+ }
149
+ }
150
+ }
151
+ }
152
+ // scss-docs-end form-validation-mixins
@@ -5,11 +5,11 @@
5
5
  $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
6
6
  $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
7
7
  $active-bg: mix($color, $background, percentage($table-active-bg-factor));
8
- $border-color: mix($color, $background, percentage($table-border-factor));
8
+ $table-border-color: mix($color, $background, percentage($table-border-factor));
9
9
 
10
10
  --#{$prefix}table-color: #{$color};
11
11
  --#{$prefix}table-bg: #{$background};
12
- --#{$prefix}table-border-color: #{$border-color};
12
+ --#{$prefix}table-border-color: #{$table-border-color};
13
13
  --#{$prefix}table-striped-bg: #{$striped-bg};
14
14
  --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
15
15
  --#{$prefix}table-active-bg: #{$active-bg};
@@ -1,97 +1,97 @@
1
- // Utility generator
2
- // Used to generate utilities & print utilities
3
- @mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
4
- $values: map-get($utility, values);
5
-
6
- // If the values are a list or string, convert it into a map
7
- @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
8
- $values: zip($values, $values);
9
- }
10
-
11
- @each $key, $value in $values {
12
- $properties: map-get($utility, property);
13
-
14
- // Multiple properties are possible, for example with vertical or horizontal margins or paddings
15
- @if type-of($properties) == "string" {
16
- $properties: append((), $properties);
17
- }
18
-
19
- // Use custom class if present
20
- $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
21
- $property-class: if($property-class == null, "", $property-class);
22
-
23
- // Use custom CSS variable name if present, otherwise default to `class`
24
- $css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
25
-
26
- // State params to generate pseudo-classes
27
- $state: if(map-has-key($utility, state), map-get($utility, state), ());
28
-
29
- $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
30
-
31
- // Don't prefix if value key is null (e.g. with shadow class)
32
- $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
33
-
34
- @if map-get($utility, rfs) {
35
- // Inside the media query
36
- @if $is-rfs-media-query {
37
- $val: rfs-value($value);
38
-
39
- // Do not render anything if fluid and non fluid values are the same
40
- $value: if($val == rfs-fluid-value($value), null, $val);
41
- }
42
- @else {
43
- $value: rfs-fluid-value($value);
44
- }
45
- }
46
-
47
- $is-css-var: map-get($utility, css-var);
48
- $is-local-vars: map-get($utility, local-vars);
49
- $is-rtl: map-get($utility, rtl);
50
-
51
- @if $value != null {
52
- @if $is-rtl == false {
53
- /* rtl:begin:remove */
54
- }
55
-
56
- @if $is-css-var {
57
- .#{$property-class + $infix + $property-class-modifier} {
58
- --#{$prefix}#{$css-variable-name}: #{$value};
59
- }
60
-
61
- @each $pseudo in $state {
62
- .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
63
- --#{$prefix}#{$css-variable-name}: #{$value};
64
- }
65
- }
66
- } @else {
67
- .#{$property-class + $infix + $property-class-modifier} {
68
- @each $property in $properties {
69
- @if $is-local-vars {
70
- @each $local-var, $variable in $is-local-vars {
71
- --#{$prefix}#{$local-var}: #{$variable};
72
- }
73
- }
74
- #{$property}: $value if($enable-important-utilities, !important, null);
75
- }
76
- }
77
-
78
- @each $pseudo in $state {
79
- .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
80
- @each $property in $properties {
81
- @if $is-local-vars {
82
- @each $local-var, $variable in $is-local-vars {
83
- --#{$prefix}#{$local-var}: #{$variable};
84
- }
85
- }
86
- #{$property}: $value if($enable-important-utilities, !important, null);
87
- }
88
- }
89
- }
90
- }
91
-
92
- @if $is-rtl == false {
93
- /* rtl:end:remove */
94
- }
95
- }
96
- }
97
- }
1
+ // Utility generator
2
+ // Used to generate utilities & print utilities
3
+ @mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
4
+ $values: map-get($utility, values);
5
+
6
+ // If the values are a list or string, convert it into a map
7
+ @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
8
+ $values: zip($values, $values);
9
+ }
10
+
11
+ @each $key, $value in $values {
12
+ $properties: map-get($utility, property);
13
+
14
+ // Multiple properties are possible, for example with vertical or horizontal margins or paddings
15
+ @if type-of($properties) == "string" {
16
+ $properties: append((), $properties);
17
+ }
18
+
19
+ // Use custom class if present
20
+ $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
21
+ $property-class: if($property-class == null, "", $property-class);
22
+
23
+ // Use custom CSS variable name if present, otherwise default to `class`
24
+ $css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
25
+
26
+ // State params to generate pseudo-classes
27
+ $state: if(map-has-key($utility, state), map-get($utility, state), ());
28
+
29
+ $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
30
+
31
+ // Don't prefix if value key is null (e.g. with shadow class)
32
+ $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
33
+
34
+ @if map-get($utility, rfs) {
35
+ // Inside the media query
36
+ @if $is-rfs-media-query {
37
+ $val: rfs-value($value);
38
+
39
+ // Do not render anything if fluid and non fluid values are the same
40
+ $value: if($val == rfs-fluid-value($value), null, $val);
41
+ }
42
+ @else {
43
+ $value: rfs-fluid-value($value);
44
+ }
45
+ }
46
+
47
+ $is-css-var: map-get($utility, css-var);
48
+ $is-local-vars: map-get($utility, local-vars);
49
+ $is-rtl: map-get($utility, rtl);
50
+
51
+ @if $value != null {
52
+ @if $is-rtl == false {
53
+ /* rtl:begin:remove */
54
+ }
55
+
56
+ @if $is-css-var {
57
+ .#{$property-class + $infix + $property-class-modifier} {
58
+ --#{$prefix}#{$css-variable-name}: #{$value};
59
+ }
60
+
61
+ @each $pseudo in $state {
62
+ .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
63
+ --#{$prefix}#{$css-variable-name}: #{$value};
64
+ }
65
+ }
66
+ } @else {
67
+ .#{$property-class + $infix + $property-class-modifier} {
68
+ @each $property in $properties {
69
+ @if $is-local-vars {
70
+ @each $local-var, $variable in $is-local-vars {
71
+ --#{$prefix}#{$local-var}: #{$variable};
72
+ }
73
+ }
74
+ #{$property}: $value if($enable-important-utilities, !important, null);
75
+ }
76
+ }
77
+
78
+ @each $pseudo in $state {
79
+ .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
80
+ @each $property in $properties {
81
+ @if $is-local-vars {
82
+ @each $local-var, $variable in $is-local-vars {
83
+ --#{$prefix}#{$local-var}: #{$variable};
84
+ }
85
+ }
86
+ #{$property}: $value if($enable-important-utilities, !important, null);
87
+ }
88
+ }
89
+ }
90
+ }
91
+
92
+ @if $is-rtl == false {
93
+ /* rtl:end:remove */
94
+ }
95
+ }
96
+ }
97
+ }
package/package.json CHANGED
@@ -1,26 +1,26 @@
1
- {
2
- "name": "bootstrap-scss",
3
- "version": "5.2.1",
4
- "description": "Bootstrap's SCSS files (only)",
5
- "main": "bootstrap.scss",
6
- "repository": {
7
- "type": "git",
8
- "url": "https://github.com/crissdev/bootstrap-scss.git"
9
- },
10
- "bugs": {
11
- "url": "https://github.com/crissdev/bootstrap-scss/issues"
12
- },
13
- "keywords": [
14
- "bootstrap",
15
- "bootstrap-scss",
16
- "responsive",
17
- "scss"
18
- ],
19
- "author": {
20
- "name": "Cristian Trifan",
21
- "url": "https://crissdev.com",
22
- "email": "criss.trifan@gmail.com"
23
- },
24
- "license": "MIT",
25
- "homepage": "https://github.com/crissdev/bootstrap-scss"
26
- }
1
+ {
2
+ "name": "bootstrap-scss",
3
+ "version": "5.2.3",
4
+ "description": "Bootstrap's SCSS files (only)",
5
+ "main": "bootstrap.scss",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://github.com/crissdev/bootstrap-scss.git"
9
+ },
10
+ "bugs": {
11
+ "url": "https://github.com/crissdev/bootstrap-scss/issues"
12
+ },
13
+ "keywords": [
14
+ "bootstrap",
15
+ "bootstrap-scss",
16
+ "responsive",
17
+ "scss"
18
+ ],
19
+ "author": {
20
+ "name": "Cristian Trifan",
21
+ "url": "https://crissdev.com",
22
+ "email": "criss.trifan@gmail.com"
23
+ },
24
+ "license": "MIT",
25
+ "homepage": "https://github.com/crissdev/bootstrap-scss"
26
+ }