mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 16:50:00 +02:00
Code Issues Releases Wiki Activity

Merge branch 'main' into prepare-523

Browse Source
This commit is contained in:
XhmikosR
2022-11-22 09:51:29 +02:00
committed by GitHub
parent cb021439c6 abdd3fef1f
commit 8f6de23682
156 changed files with 2626 additions and 1974 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_button-group.scss
View File

@@ -39,7 +39,7 @@
// Prevent double borders when buttons are next to each other
> :not(.btn-check:first-child) + .btn,
> .btn-group:not(:first-child) {
margin-left: -$btn-border-width;
margin-left: calc($btn-border-width * -1); // stylelint-disable-line function-disallowed-list
}
// Reset rounded corners
@@ -126,7 +126,7 @@
> .btn:not(:first-child),
> .btn-group:not(:first-child) {
margin-top: -$btn-border-width;
margin-top: calc($btn-border-width * -1); // stylelint-disable-line function-disallowed-list
}
// Reset rounded corners

4
scss/_card.scss
View File

@@ -7,6 +7,8 @@
--#{$prefix}card-spacer-y: #{$card-spacer-y};
--#{$prefix}card-spacer-x: #{$card-spacer-x};
--#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
--#{$prefix}card-title-color: #{$card-title-color};
--#{$prefix}card-subtitle-color: #{$card-subtitle-color};
--#{$prefix}card-border-width: #{$card-border-width};
--#{$prefix}card-border-color: #{$card-border-color};
--#{$prefix}card-border-radius: #{$card-border-radius};
@@ -73,11 +75,13 @@
.card-title {
margin-bottom: var(--#{$prefix}card-title-spacer-y);
color: var(--#{$prefix}card-title-color);
}
.card-subtitle {
margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
margin-bottom: 0;
color: var(--#{$prefix}card-subtitle-color);
}
.card-text:last-child {

27
scss/_close.scss
View File

@@ -4,37 +4,46 @@
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
.btn-close {
--#{$prefix}btn-close-color: #{$btn-close-color};
--#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
--#{$prefix}btn-close-opacity: #{$btn-close-opacity};
--#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
--#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
--#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
--#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
--#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
box-sizing: content-box;
width: $btn-close-width;
height: $btn-close-height;
padding: $btn-close-padding-y $btn-close-padding-x;
color: $btn-close-color;
background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
color: var(--#{$prefix}btn-close-color);
background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
border: 0; // for button elements
@include border-radius();
opacity: $btn-close-opacity;
opacity: var(--#{$prefix}btn-close-opacity);
// Override <a>'s hover style
&:hover {
color: $btn-close-color;
color: var(--#{$prefix}btn-close-color);
text-decoration: none;
opacity: $btn-close-hover-opacity;
opacity: var(--#{$prefix}btn-close-hover-opacity);
}
&:focus {
outline: 0;
box-shadow: $btn-close-focus-shadow;
opacity: $btn-close-focus-opacity;
box-shadow: var(--#{$prefix}btn-close-focus-shadow);
opacity: var(--#{$prefix}btn-close-focus-opacity);
}
&:disabled,
&.disabled {
pointer-events: none;
user-select: none;
opacity: $btn-close-disabled-opacity;
opacity: var(--#{$prefix}btn-close-disabled-opacity);
}
}
.btn-close-white {
filter: $btn-close-white-filter;
filter: var(--#{$prefix}btn-close-white-filter);
}

6
scss/_offcanvas.scss
View File

@@ -12,6 +12,8 @@
--#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
--#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
--#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
--#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
--#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
// scss-docs-end offcanvas-css-vars
}
@@ -42,7 +44,7 @@
background-clip: padding-box;
outline: 0;
@include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
@include transition(transform $offcanvas-transition-duration ease-in-out);
@include transition(var(--#{$prefix}offcanvas-transition));
&.offcanvas-start {
top: 0;
@@ -134,7 +136,7 @@
.offcanvas-title {
margin-bottom: 0;
line-height: $offcanvas-title-line-height;
line-height: var(--#{$prefix}offcanvas-title-line-height);
}
.offcanvas-body {

6
scss/_root.scss
View File

@@ -39,7 +39,7 @@
@if $font-size-root != null {
--#{$prefix}root-font-size: #{$font-size-root};
}
--#{$prefix}body-font-family: #{$font-family-base};
--#{$prefix}body-font-family: #{inspect($font-family-base)};
@include rfs($font-size-base, --#{$prefix}body-font-size);
--#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base};
@@ -70,4 +70,8 @@
--#{$prefix}code-color: #{$code-color};
--#{$prefix}highlight-bg: #{$mark-bg};
@each $name, $value in $grid-breakpoints {
--#{$prefix}breakpoint-#{$name}: #{$value};
}
}

2
scss/_tables.scss
View File

@@ -42,7 +42,7 @@
}
.table-group-divider {
border-top: ($table-border-width * 2) solid $table-group-separator-color;
border-top: calc($table-border-width * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
}
//

94
scss/_utilities.scss
View File

@@ -22,6 +22,20 @@ $utilities: map-merge(
)
),
// scss-docs-end utils-float
// Object Fit utilities
// scss-docs-start utils-object-fit
"object-fit": (
responsive: true,
property: object-fit,
values: (
contain: contain,
cover: cover,
fill: fill,
scale: scale-down,
none: none,
)
),
// scss-docs-end utils-object-fit
// Opacity utilities
// scss-docs-start utils-opacity
"opacity": (
@@ -40,6 +54,14 @@ $utilities: map-merge(
property: overflow,
values: auto hidden visible scroll,
),
"overflow-x": (
property: overflow-x,
values: auto hidden visible scroll,
),
"overflow-y": (
property: overflow-y,
values: auto hidden visible scroll,
),
// scss-docs-end utils-overflow
// scss-docs-start utils-display
"display": (
@@ -450,6 +472,18 @@ $utilities: map-merge(
class: gap,
values: $spacers
),
"row-gap": (
responsive: true,
property: row-gap,
class: row-gap,
values: $spacers
),
"column-gap": (
responsive: true,
property: column-gap,
class: column-gap,
values: $spacers
),
// scss-docs-end utils-spacing
// Text
// scss-docs-start utils-text
@@ -473,11 +507,12 @@ $utilities: map-merge(
property: font-weight,
class: fw,
values: (
light: $font-weight-light,
lighter: $font-weight-lighter,
light: $font-weight-light,
normal: $font-weight-normal,
bold: $font-weight-bold,
medium: $font-weight-medium,
semibold: $font-weight-semibold,
bold: $font-weight-bold,
bolder: $font-weight-bolder
)
),
@@ -614,22 +649,62 @@ $utilities: map-merge(
"rounded-top": (
property: border-top-left-radius border-top-right-radius,
class: rounded-top,
values: (null: var(--#{$prefix}border-radius))
values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
),
"rounded-end": (
property: border-top-right-radius border-bottom-right-radius,
class: rounded-end,
values: (null: var(--#{$prefix}border-radius))
values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
),
"rounded-bottom": (
property: border-bottom-right-radius border-bottom-left-radius,
class: rounded-bottom,
values: (null: var(--#{$prefix}border-radius))
values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
),
"rounded-start": (
property: border-bottom-left-radius border-top-left-radius,
class: rounded-start,
values: (null: var(--#{$prefix}border-radius))
values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
),
// scss-docs-end utils-border-radius
// scss-docs-start utils-visibility
@@ -640,8 +715,13 @@ $utilities: map-merge(
visible: visible,
invisible: hidden,
)
)
),
// scss-docs-end utils-visibility
"z-index": (
property: z-index,
class: z,
values: $zindex-levels,
)
),
$utilities
);

63
scss/_variables.scss
View File

@@ -556,6 +556,7 @@ $font-size-lg: $font-size-base * 1.25 !default;
$font-weight-lighter: lighter !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;
$font-weight-bolder: bolder !default;
@@ -636,7 +637,7 @@ $hr-height: null !default; // Deprecated in v5.2.0
// fusv-enable
$hr-border-color: null !default; // Allows for inherited colors
$hr-border-width: $border-width !default;
$hr-border-width: var(--#{$prefix}border-width) !default;
$hr-opacity: .25 !default;
$legend-margin-bottom: .5rem !default;
@@ -683,7 +684,7 @@ $table-hover-bg-factor: .075 !default;
$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
$table-border-factor: .1 !default;
$table-border-width: $border-width !default;
$table-border-width: var(--#{$prefix}border-width) !default;
$table-border-color: var(--#{$prefix}border-color) !default;
$table-striped-order: odd !default;
@@ -735,7 +736,7 @@ $input-btn-padding-y-lg: .5rem !default;
$input-btn-padding-x-lg: 1rem !default;
$input-btn-font-size-lg: $font-size-lg !default;
$input-btn-border-width: $border-width !default;
$input-btn-border-width: var(--#{$prefix}border-width) !default;
// scss-docs-end input-btn-variables
@@ -847,7 +848,7 @@ $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$input-placeholder-color: $gray-600 !default;
$input-plaintext-color: $body-color !default;
$input-height-border: $input-border-width * 2 !default;
$input-height-border: calc($input-border-width * 2) !default; // stylelint-disable-line function-disallowed-list
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
@@ -995,15 +996,17 @@ $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default
// scss-docs-end form-file-variables
// scss-docs-start form-floating-variables
$form-floating-height: add(3.5rem, $input-height-border) !default;
$form-floating-line-height: 1.25 !default;
$form-floating-padding-x: $input-padding-x !default;
$form-floating-padding-y: 1rem !default;
$form-floating-input-padding-t: 1.625rem !default;
$form-floating-input-padding-b: .625rem !default;
$form-floating-label-opacity: .65 !default;
$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
$form-floating-height: add(3.5rem, $input-height-border) !default;
$form-floating-line-height: 1.25 !default;
$form-floating-padding-x: $input-padding-x !default;
$form-floating-padding-y: 1rem !default;
$form-floating-input-padding-t: 1.625rem !default;
$form-floating-input-padding-b: .625rem !default;
$form-floating-label-height: 1.875em !default;
$form-floating-label-opacity: .65 !default;
$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
$form-floating-label-disabled-color: $gray-600 !default;
$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
// scss-docs-end form-floating-variables
// Form validation
@@ -1052,6 +1055,16 @@ $zindex-tooltip: 1080 !default;
$zindex-toast: 1090 !default;
// scss-docs-end zindex-stack
// scss-docs-start zindex-levels-map
$zindex-levels: (
n1: -1,
0: 0,
1: 1,
2: 2,
3: 3
) !default;
// scss-docs-end zindex-levels-map
// Navs
@@ -1066,7 +1079,7 @@ $nav-link-transition: color .15s ease-in-out, background-color .15
$nav-link-disabled-color: $gray-600 !default;
$nav-tabs-border-color: $gray-300 !default;
$nav-tabs-border-width: $border-width !default;
$nav-tabs-border-width: var(--#{$prefix}border-width) !default;
$nav-tabs-border-radius: $border-radius !default;
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
$nav-tabs-link-active-color: $gray-700 !default;
@@ -1137,8 +1150,8 @@ $dropdown-color: $body-color !default;
$dropdown-bg: $white !default;
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
$dropdown-border-radius: $border-radius !default;
$dropdown-border-width: $border-width !default;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
$dropdown-border-width: var(--#{$prefix}border-width) !default;
$dropdown-inner-border-radius: calc($dropdown-border-radius - $dropdown-border-width) !default; // stylelint-disable-line function-disallowed-list
$dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-divider-margin-y: $spacer * .5 !default;
$dropdown-box-shadow: $box-shadow !default;
@@ -1235,7 +1248,9 @@ $placeholder-opacity-min: .2 !default;
$card-spacer-y: $spacer !default;
$card-spacer-x: $spacer !default;
$card-title-spacer-y: $spacer * .5 !default;
$card-border-width: $border-width !default;
$card-title-color: null !default;
$card-subtitle-color: null !default;
$card-border-width: var(--#{$prefix}border-width) !default;
$card-border-color: var(--#{$prefix}border-color-translucent) !default;
$card-border-radius: $border-radius !default;
$card-box-shadow: null !default;
@@ -1258,7 +1273,7 @@ $accordion-padding-y: 1rem !default;
$accordion-padding-x: 1.25rem !default;
$accordion-color: $body-color !default; // Sass variable because of $accordion-button-icon
$accordion-bg: $body-bg !default;
$accordion-border-width: $border-width !default;
$accordion-border-width: var(--#{$prefix}border-width) !default;
$accordion-border-color: var(--#{$prefix}border-color) !default;
$accordion-border-radius: $border-radius !default;
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
@@ -1324,7 +1339,7 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
$popover-font-size: $font-size-sm !default;
$popover-bg: $white !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-width: var(--#{$prefix}border-width) !default;
$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
$popover-border-radius: $border-radius-lg !default;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
@@ -1360,7 +1375,7 @@ $toast-padding-y: .5rem !default;
$toast-font-size: .875rem !default;
$toast-color: null !default;
$toast-background-color: rgba($white, .85) !default;
$toast-border-width: $border-width !default;
$toast-border-width: var(--#{$prefix}border-width) !default;
$toast-border-color: var(--#{$prefix}border-color-translucent) !default;
$toast-border-radius: $border-radius !default;
$toast-box-shadow: $box-shadow !default;
@@ -1399,7 +1414,7 @@ $modal-title-line-height: $line-height-base !default;
$modal-content-color: null !default;
$modal-content-bg: $white !default;
$modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
$modal-content-border-width: $border-width !default;
$modal-content-border-width: var(--#{$prefix}border-width) !default;
$modal-content-border-radius: $border-radius-lg !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs: $box-shadow-sm !default;
@@ -1440,7 +1455,7 @@ $alert-padding-x: $spacer !default;
$alert-margin-bottom: 1rem !default;
$alert-border-radius: $border-radius !default;
$alert-link-font-weight: $font-weight-bold !default;
$alert-border-width: $border-width !default;
$alert-border-width: var(--#{$prefix}border-width) !default;
$alert-bg-scale: -80% !default;
$alert-border-scale: -70% !default;
$alert-color-scale: 40% !default;
@@ -1469,7 +1484,7 @@ $progress-bar-transition: width .6s ease !default;
$list-group-color: $gray-900 !default;
$list-group-bg: $white !default;
$list-group-border-color: rgba($black, .125) !default;
$list-group-border-width: $border-width !default;
$list-group-border-width: var(--#{$prefix}border-width) !default;
$list-group-border-radius: $border-radius !default;
$list-group-item-padding-y: $spacer * .5 !default;
@@ -1498,7 +1513,7 @@ $list-group-action-active-bg: $gray-200 !default;
// scss-docs-start thumbnail-variables
$thumbnail-padding: .25rem !default;
$thumbnail-bg: $body-bg !default;
$thumbnail-border-width: $border-width !default;
$thumbnail-border-width: var(--#{$prefix}border-width) !default;
$thumbnail-border-color: var(--#{$prefix}border-color) !default;
$thumbnail-border-radius: $border-radius !default;
$thumbnail-box-shadow: $box-shadow-sm !default;

15
scss/forms/_floating-labels.scss
View File

@@ -1,6 +1,17 @@
.form-floating {
position: relative;
&::before:not(.form-control:disabled) {
position: absolute;
top: $input-border-width;
left: $input-border-width;
width: subtract(100%, add($input-height-inner-quarter, $input-height-inner-half));
height: $form-floating-label-height;
content: "";
background-color: $input-bg;
@include border-radius($input-border-radius);
}
> .form-control,
> .form-control-plaintext,
> .form-select {
@@ -72,4 +83,8 @@
border-width: $input-border-width 0; // Required to properly position label text - as explained above
}
}
> .form-control:disabled ~ label {
color: $form-floating-label-disabled-color;
}
}

7
scss/forms/_form-control.scss
View File

@@ -52,6 +52,13 @@
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
}
// Prevent excessive date input height in Webkit
// https://github.com/twbs/bootstrap/issues/34433
&::-webkit-datetime-edit {
display: block;
padding: 0;
}
// Placeholder
&::placeholder {
color: $input-placeholder-color;

2
scss/forms/_input-group.scss
View File

@@ -121,7 +121,7 @@
}
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
margin-left: -$input-border-width;
margin-left: calc($input-border-width * -1); // stylelint-disable-line function-disallowed-list
@include border-start-radius(0);
}

4
scss/helpers/_colored-links.scss
View File

@@ -1,11 +1,11 @@
@each $color, $value in $theme-colors {
.link-#{$color} {
color: $value !important; // stylelint-disable-line declaration-no-important
color: $value if($enable-important-utilities, !important, null);
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) !important; // stylelint-disable-line declaration-no-important
color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) if($enable-important-utilities, !important, null);
}
}
}

3
scss/mixins/_alert.scss
View File

@@ -3,13 +3,14 @@
--#{$prefix}alert-color: #{$color};
--#{$prefix}alert-bg: #{$background};
--#{$prefix}alert-border-color: #{$border};
--#{$prefix}alert-link-color: #{shade-color($color, 20%)};
@if $enable-gradients {
background-image: var(--#{$prefix}gradient);
}
.alert-link {
color: shade-color($color, 20%);
color: var(--#{$prefix}alert-link-color);
}
}
// scss-docs-end alert-variant-mixin

55
scss/mixins/_caret.scss
View File

@@ -1,44 +1,49 @@
// scss-docs-start caret-mixins
@mixin caret-down {
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
@mixin caret-down($width: $caret-width) {
border-top: $width solid;
border-right: $width solid transparent;
border-bottom: 0;
border-left: $caret-width solid transparent;
border-left: $width solid transparent;
}
@mixin caret-up {
@mixin caret-up($width: $caret-width) {
border-top: 0;
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid;
border-left: $caret-width solid transparent;
border-right: $width solid transparent;
border-bottom: $width solid;
border-left: $width solid transparent;
}
@mixin caret-end {
border-top: $caret-width solid transparent;
@mixin caret-end($width: $caret-width) {
border-top: $width solid transparent;
border-right: 0;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
border-bottom: $width solid transparent;
border-left: $width solid;
}
@mixin caret-start {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
@mixin caret-start($width: $caret-width) {
border-top: $width solid transparent;
border-right: $width solid;
border-bottom: $width solid transparent;
}
@mixin caret($direction: down) {
@mixin caret(
$direction: down,
$width: $caret-width,
$spacing: $caret-spacing,
$vertical-align: $caret-vertical-align
) {
@if $enable-caret {
&::after {
display: inline-block;
margin-left: $caret-spacing;
vertical-align: $caret-vertical-align;
margin-left: $spacing;
vertical-align: $vertical-align;
content: "";
@if $direction == down {
@include caret-down();
@include caret-down($width);
} @else if $direction == up {
@include caret-up();
@include caret-up($width);
} @else if $direction == end {
@include caret-end();
@include caret-end($width);
}
}
@@ -49,10 +54,10 @@
&::before {
display: inline-block;
margin-right: $caret-spacing;
vertical-align: $caret-vertical-align;
margin-right: $spacing;
vertical-align: $vertical-align;
content: "";
@include caret-start();
@include caret-start($width);
}
}