mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-31 09:05:47 +02:00
Helpers & utilities split (#28445)
This commit is contained in:
Martijn Cuppens
GitHub
@@ -1,17 +1,443 @@
|
||||
@import "utilities/align";
|
||||
@import "utilities/background";
|
||||
@import "utilities/borders";
|
||||
@import "utilities/clearfix";
|
||||
@import "utilities/display";
|
||||
@import "utilities/embed";
|
||||
@import "utilities/flex";
|
||||
@import "utilities/float";
|
||||
@import "utilities/overflow";
|
||||
@import "utilities/position";
|
||||
@import "utilities/screenreaders";
|
||||
@import "utilities/shadows";
|
||||
@import "utilities/sizing";
|
||||
@import "utilities/stretched-link";
|
||||
@import "utilities/spacing";
|
||||
@import "utilities/text";
|
||||
@import "utilities/visibility";
|
||||
// Utilities
|
||||
|
||||
$utilities: () !default;
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$utilities: map-merge(
|
||||
(
|
||||
"align": (
|
||||
property: vertical-align,
|
||||
class: align,
|
||||
values: baseline top middle bottom text-bottom text-top
|
||||
),
|
||||
"float": (
|
||||
responsive: true,
|
||||
property: float,
|
||||
values: left right none
|
||||
),
|
||||
"overflow": (
|
||||
property: overflow,
|
||||
values: auto hidden,
|
||||
),
|
||||
"display": (
|
||||
responsive: true,
|
||||
print: true,
|
||||
property: display,
|
||||
class: d,
|
||||
values: none inline inline-block block table table-row table-cell flex inline-flex
|
||||
),
|
||||
"shadow": (
|
||||
property: box-shadow,
|
||||
class: shadow,
|
||||
values: (
|
||||
sm: $box-shadow-sm,
|
||||
null: $box-shadow,
|
||||
lg: $box-shadow-lg,
|
||||
none: none,
|
||||
)
|
||||
),
|
||||
"position": (
|
||||
property: position,
|
||||
values: static relative absolute fixed sticky
|
||||
),
|
||||
"border": (
|
||||
property: border,
|
||||
values: (
|
||||
null: $border-width solid $border-color,
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"border-top": (
|
||||
property: border-top,
|
||||
values: (
|
||||
null: $border-width solid $border-color,
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"border-right": (
|
||||
property: border-right,
|
||||
values: (
|
||||
null: $border-width solid $border-color,
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"border-bottom": (
|
||||
property: border-bottom,
|
||||
values: (
|
||||
null: $border-width solid $border-color,
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"border-left": (
|
||||
property: border-left,
|
||||
values: (
|
||||
null: $border-width solid $border-color,
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"border-color": (
|
||||
property: border-color,
|
||||
class: border,
|
||||
values: map-merge($theme-colors, (white: $white))
|
||||
),
|
||||
// Sizing utilities
|
||||
"width": (
|
||||
property: width,
|
||||
class: w,
|
||||
values: (
|
||||
25: 25%,
|
||||
50: 50%,
|
||||
75: 75%,
|
||||
100: 100%,
|
||||
auto: auto
|
||||
)
|
||||
),
|
||||
"height": (
|
||||
property: height,
|
||||
class: h,
|
||||
values: (
|
||||
25: 25%,
|
||||
50: 50%,
|
||||
75: 75%,
|
||||
100: 100%,
|
||||
auto: auto
|
||||
)
|
||||
),
|
||||
// Flex utilities
|
||||
"flex": (
|
||||
responsive: true,
|
||||
property: flex,
|
||||
values: (fill: 1 1 auto)
|
||||
),
|
||||
"flex-direction": (
|
||||
responsive: true,
|
||||
property: flex-direction,
|
||||
class: flex,
|
||||
values: row column row-reverse column-reverse
|
||||
),
|
||||
"flex-grow": (
|
||||
responsive: true,
|
||||
property: flex-grow,
|
||||
class: flex,
|
||||
values: (
|
||||
grow-0: 0,
|
||||
grow-1: 1,
|
||||
)
|
||||
),
|
||||
"flex-shrink": (
|
||||
responsive: true,
|
||||
property: flex-shrink,
|
||||
class: flex,
|
||||
values: (
|
||||
shrink-0: 0,
|
||||
shrink-1: 1,
|
||||
)
|
||||
),
|
||||
"flex-wrap": (
|
||||
responsive: true,
|
||||
property: flex-wrap,
|
||||
class: flex,
|
||||
values: wrap nowrap wrap-reverse
|
||||
),
|
||||
"justify-content": (
|
||||
responsive: true,
|
||||
property: justify-content,
|
||||
values: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
between: space-between,
|
||||
around: space-around,
|
||||
)
|
||||
),
|
||||
"align-items": (
|
||||
responsive: true,
|
||||
property: align-items,
|
||||
values: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
baseline: baseline,
|
||||
stretch: stretch,
|
||||
)
|
||||
),
|
||||
"align-content": (
|
||||
responsive: true,
|
||||
property: align-content,
|
||||
values: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
between: space-between,
|
||||
around: space-around,
|
||||
stretch: stretch,
|
||||
)
|
||||
),
|
||||
"align-self": (
|
||||
responsive: true,
|
||||
property: align-self,
|
||||
values: (
|
||||
auto: auto,
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
baseline: baseline,
|
||||
stretch: stretch,
|
||||
)
|
||||
),
|
||||
"order": (
|
||||
responsive: true,
|
||||
property: order,
|
||||
values: (
|
||||
first: -1,
|
||||
0: 0,
|
||||
1: 1,
|
||||
2: 2,
|
||||
3: 3,
|
||||
4: 4,
|
||||
5: 5,
|
||||
6: 6,
|
||||
7: 7,
|
||||
8: 8,
|
||||
9: 9,
|
||||
10: 10,
|
||||
11: 11,
|
||||
12: 12,
|
||||
last: 13,
|
||||
),
|
||||
),
|
||||
// Margin utilities
|
||||
"margin": (
|
||||
responsive: true,
|
||||
property: margin,
|
||||
class: m,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
),
|
||||
"margin-x": (
|
||||
responsive: true,
|
||||
property: margin-right margin-left,
|
||||
class: mx,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
),
|
||||
"margin-y": (
|
||||
responsive: true,
|
||||
property: margin-top margin-bottom,
|
||||
class: my,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
),
|
||||
"margin-top": (
|
||||
responsive: true,
|
||||
property: margin-top,
|
||||
class: mt,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
),
|
||||
"margin-right": (
|
||||
responsive: true,
|
||||
property: margin-right,
|
||||
class: mr,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
),
|
||||
"margin-bottom": (
|
||||
responsive: true,
|
||||
property: margin-bottom,
|
||||
class: mb,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
),
|
||||
"margin-left": (
|
||||
responsive: true,
|
||||
property: margin-left,
|
||||
class: ml,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
),
|
||||
// Negative margin utilities
|
||||
"negative-margin": (
|
||||
responsive: true,
|
||||
property: margin,
|
||||
class: m,
|
||||
values: $negative-spacers
|
||||
),
|
||||
"negative-margin-x": (
|
||||
responsive: true,
|
||||
property: margin-right margin-left,
|
||||
class: mx,
|
||||
values: $negative-spacers
|
||||
),
|
||||
"negative-margin-y": (
|
||||
responsive: true,
|
||||
property: margin-top margin-bottom,
|
||||
class: my,
|
||||
values: $negative-spacers
|
||||
),
|
||||
"negative-margin-top": (
|
||||
responsive: true,
|
||||
property: margin-top,
|
||||
class: mt,
|
||||
values: $negative-spacers
|
||||
),
|
||||
"negative-margin-right": (
|
||||
responsive: true,
|
||||
property: margin-right,
|
||||
class: mr,
|
||||
values: $negative-spacers
|
||||
),
|
||||
"negative-margin-bottom": (
|
||||
responsive: true,
|
||||
property: margin-bottom,
|
||||
class: mb,
|
||||
values: $negative-spacers
|
||||
),
|
||||
"negative-margin-left": (
|
||||
responsive: true,
|
||||
property: margin-left,
|
||||
class: ml,
|
||||
values: $negative-spacers
|
||||
),
|
||||
// Padding utilities
|
||||
"padding": (
|
||||
responsive: true,
|
||||
property: padding,
|
||||
class: p,
|
||||
values: $spacers
|
||||
),
|
||||
"padding-x": (
|
||||
responsive: true,
|
||||
property: padding-right padding-left,
|
||||
class: px,
|
||||
values: $spacers
|
||||
),
|
||||
"padding-y": (
|
||||
responsive: true,
|
||||
property: padding-top padding-bottom,
|
||||
class: py,
|
||||
values: $spacers
|
||||
),
|
||||
"padding-top": (
|
||||
responsive: true,
|
||||
property: padding-top,
|
||||
class: pt,
|
||||
values: $spacers
|
||||
),
|
||||
"padding-right": (
|
||||
responsive: true,
|
||||
property: padding-right,
|
||||
class: pr,
|
||||
values: $spacers
|
||||
),
|
||||
"padding-bottom": (
|
||||
responsive: true,
|
||||
property: padding-bottom,
|
||||
class: pb,
|
||||
values: $spacers
|
||||
),
|
||||
"padding-left": (
|
||||
responsive: true,
|
||||
property: padding-left,
|
||||
class: pl,
|
||||
values: $spacers
|
||||
),
|
||||
// Text
|
||||
"font-weight": (
|
||||
property: font-weight,
|
||||
values: (
|
||||
light: $font-weight-light,
|
||||
lighter: $font-weight-lighter,
|
||||
normal: $font-weight-normal,
|
||||
bold: $font-weight-bold,
|
||||
bolder: $font-weight-bolder
|
||||
)
|
||||
),
|
||||
"text-transform": (
|
||||
property: text-transform,
|
||||
class: text,
|
||||
values: lowercase uppercase capitalize
|
||||
),
|
||||
"text-align": (
|
||||
responsive: true,
|
||||
property: text-align,
|
||||
class: text,
|
||||
values: left right center justify
|
||||
),
|
||||
"color": (
|
||||
property: color,
|
||||
class: text,
|
||||
values: (
|
||||
white: $white,
|
||||
body: $body-color,
|
||||
muted: $text-muted,
|
||||
black-50: rgba($black, .5),
|
||||
white-50: rgba($white, .5),
|
||||
reset: inherit,
|
||||
)
|
||||
),
|
||||
"background-color": (
|
||||
property: background-color,
|
||||
class: bg,
|
||||
values: map-merge(
|
||||
$theme-colors,
|
||||
(
|
||||
white: $white,
|
||||
transparent: transparent
|
||||
)
|
||||
)
|
||||
),
|
||||
"white-space": (
|
||||
property: white-space,
|
||||
class: text,
|
||||
values: (
|
||||
wrap: normal,
|
||||
nowrap: nowrap,
|
||||
)
|
||||
),
|
||||
"text-decoration": (
|
||||
property: text-decoration,
|
||||
values: none
|
||||
),
|
||||
"font-style": (
|
||||
property: font-style,
|
||||
class: font,
|
||||
values: italic
|
||||
),
|
||||
"overflow-wrap": (
|
||||
property: overflow-wrap word-break, // word-break for IE & < Edge 18
|
||||
class: text,
|
||||
values: (break: break-word)
|
||||
),
|
||||
"font-family": (
|
||||
property: font-family,
|
||||
class: text,
|
||||
values: (monospace: $font-family-monospace)
|
||||
),
|
||||
"rounded": (
|
||||
property: border-radius,
|
||||
class: rounded,
|
||||
values: (
|
||||
null: $border-radius,
|
||||
sm: $border-radius-sm,
|
||||
lg: $border-radius-lg,
|
||||
circle: 50%,
|
||||
pill: $rounded-pill,
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"rounded-top": (
|
||||
property: border-top-left-radius border-top-right-radius,
|
||||
class: rounded-top,
|
||||
values: (null: $border-radius)
|
||||
),
|
||||
"rounded-right": (
|
||||
property: border-top-right-radius border-bottom-right-radius,
|
||||
class: rounded-right,
|
||||
values: (null: $border-radius)
|
||||
),
|
||||
"rounded-bottom": (
|
||||
property: border-bottom-right-radius border-bottom-left-radius,
|
||||
class: rounded-bottom,
|
||||
values: (null: $border-radius)
|
||||
),
|
||||
"rounded-left": (
|
||||
property: border-bottom-left-radius border-top-left-radius,
|
||||
class: rounded-left,
|
||||
values: (null: $border-radius)
|
||||
),
|
||||
),
|
||||
$utilities
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user