0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-13 01:08:58 +01:00
Bootstrap/scss/_utilities.scss

807 lines
19 KiB
SCSS
Raw Normal View History

2019-05-23 11:56:03 +02:00
// Utilities
$utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-merge(
(
// scss-docs-start utils-vertical-align
2019-05-23 11:56:03 +02:00
"align": (
property: vertical-align,
class: align,
values: baseline top middle bottom text-bottom text-top
),
// scss-docs-end utils-vertical-align
// scss-docs-start utils-float
2019-05-23 11:56:03 +02:00
"float": (
responsive: true,
property: float,
values: (
start: left,
end: right,
none: none,
)
2019-05-23 11:56:03 +02:00
),
// scss-docs-end utils-float
Utilities for overflow and object fit (#36848) * Added "overflow-x" and "overflow-y" - Having the same properties as overflow but for just the x and y axises - Usecase being I want my y axis to be scrollable but not my x axis - E.g a card with a vertical list of items. * Added "object-fit" utilities - The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container. - A responsive alternative to using background-img for a resizable fill/fit image. * Updated documantation for the overflow utilities - Now includes docs for `overflow-x` and `overflow-y` utilities * Placeholder shortcode updated - Can now choose to render an img tag or svg - The image contains a base64 svg generated within the template - example shortcode updated to detect, replace and render preview of 'img' tags as well * New documentaion for Object Fit added - Documentation added for the 'object-fit' util * Updated spell checks issues * Update object-fit.md * Update overflow.md * Update object-fit.md * Updated markup to address HTML Validation Errors - error: Bad value for attribute "src" on element "img": Illegal character in scheme data: space is not allowed. - info warning: Self-closing tag syntax in text/html documents is widely discouraged; it's unnecessary and interacts badly with other HTML features (e.g., unquoted attribute values). If you're using a tool that injects self-closing tag syntax into all void elements, without any option to prevent it from doing so, then consider switching to a different tool. * Updated Fix - Added Legibility to the img markup (example.html) - Fixed issue with example not working properly (because image closing tag no longer has "/>" ) * update values by step of 0.25 in bundlewatch.config The following values in .bundlewatch.config.json have been updated: - ./dist/css/bootstrap-utilities.css - ./dist/css/bootstrap-utilities.min.css - ./dist/css/bootstrap.css - ./dist/css/bootstrap.min.css Co-authored-by: Daniel O <dobiekwe@byteworks.com.ng> Co-authored-by: Mark Otto <otto@github.com>
2022-10-06 22:14:11 +02:00
// 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": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
),
// scss-docs-end utils-opacity
// scss-docs-start utils-overflow
2019-05-23 11:56:03 +02:00
"overflow": (
property: overflow,
2020-07-21 10:24:38 +02:00
values: auto hidden visible scroll,
2019-05-23 11:56:03 +02:00
),
Utilities for overflow and object fit (#36848) * Added "overflow-x" and "overflow-y" - Having the same properties as overflow but for just the x and y axises - Usecase being I want my y axis to be scrollable but not my x axis - E.g a card with a vertical list of items. * Added "object-fit" utilities - The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container. - A responsive alternative to using background-img for a resizable fill/fit image. * Updated documantation for the overflow utilities - Now includes docs for `overflow-x` and `overflow-y` utilities * Placeholder shortcode updated - Can now choose to render an img tag or svg - The image contains a base64 svg generated within the template - example shortcode updated to detect, replace and render preview of 'img' tags as well * New documentaion for Object Fit added - Documentation added for the 'object-fit' util * Updated spell checks issues * Update object-fit.md * Update overflow.md * Update object-fit.md * Updated markup to address HTML Validation Errors - error: Bad value for attribute "src" on element "img": Illegal character in scheme data: space is not allowed. - info warning: Self-closing tag syntax in text/html documents is widely discouraged; it's unnecessary and interacts badly with other HTML features (e.g., unquoted attribute values). If you're using a tool that injects self-closing tag syntax into all void elements, without any option to prevent it from doing so, then consider switching to a different tool. * Updated Fix - Added Legibility to the img markup (example.html) - Fixed issue with example not working properly (because image closing tag no longer has "/>" ) * update values by step of 0.25 in bundlewatch.config The following values in .bundlewatch.config.json have been updated: - ./dist/css/bootstrap-utilities.css - ./dist/css/bootstrap-utilities.min.css - ./dist/css/bootstrap.css - ./dist/css/bootstrap.min.css Co-authored-by: Daniel O <dobiekwe@byteworks.com.ng> Co-authored-by: Mark Otto <otto@github.com>
2022-10-06 22:14:11 +02:00
"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
2019-05-23 11:56:03 +02:00
"display": (
responsive: true,
print: true,
property: display,
class: d,
2023-02-20 11:52:27 +01:00
values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
2019-05-23 11:56:03 +02:00
),
// scss-docs-end utils-display
// scss-docs-start utils-shadow
2019-05-23 11:56:03 +02:00
"shadow": (
property: box-shadow,
class: shadow,
values: (
null: $box-shadow,
2020-03-15 21:21:19 +01:00
sm: $box-shadow-sm,
2019-05-23 11:56:03 +02:00
lg: $box-shadow-lg,
none: none,
)
),
// scss-docs-end utils-shadow
// scss-docs-start utils-focus-ring
"focus-ring": (
css-var: true,
css-variable-name: focus-ring-color,
class: focus-ring,
values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
),
// scss-docs-end utils-focus-ring
// scss-docs-start utils-position
2019-05-23 11:56:03 +02:00
"position": (
property: position,
values: static relative absolute fixed sticky
),
"top": (
property: top,
values: $position-values
),
"bottom": (
property: bottom,
values: $position-values
),
"start": (
property: left,
class: start,
values: $position-values
),
"end": (
property: right,
class: end,
values: $position-values
),
"translate-middle": (
property: transform,
class: translate-middle,
values: (
null: translate(-50%, -50%),
x: translateX(-50%),
y: translateY(-50%),
)
),
// scss-docs-end utils-position
// scss-docs-start utils-borders
2019-05-23 11:56:03 +02:00
"border": (
property: border,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
2019-05-23 11:56:03 +02:00
0: 0,
)
),
"border-top": (
property: border-top,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
2019-05-23 11:56:03 +02:00
0: 0,
)
),
"border-end": (
2019-05-23 11:56:03 +02:00
property: border-right,
class: border-end,
2019-05-23 11:56:03 +02:00
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
2019-05-23 11:56:03 +02:00
0: 0,
)
),
"border-bottom": (
property: border-bottom,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
2019-05-23 11:56:03 +02:00
0: 0,
)
),
"border-start": (
2019-05-23 11:56:03 +02:00
property: border-left,
class: border-start,
2019-05-23 11:56:03 +02:00
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
2019-05-23 11:56:03 +02:00
0: 0,
)
),
"border-color": (
property: border-color,
2019-05-23 11:56:03 +02:00
class: border,
local-vars: (
"border-opacity": 1
),
values: $utilities-border-colors
2019-05-23 11:56:03 +02:00
),
Add dark mode support (#35857) * Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Apply suggestions from code review Co-authored-by: Julien Déramond <julien.deramond@orange.com> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-11-29 07:30:26 +01:00
"subtle-border-color": (
property: border-color,
class: border,
values: $utilities-border-subtle
),
"border-width": (
property: border-width,
class: border,
values: $border-widths
),
"border-opacity": (
css-var: true,
class: border-opacity,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),
// scss-docs-end utils-borders
2019-05-23 11:56:03 +02:00
// Sizing utilities
// scss-docs-start utils-sizing
2019-05-23 11:56:03 +02:00
"width": (
property: width,
class: w,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
)
),
"max-width": (
property: max-width,
class: mw,
values: (100: 100%)
),
"viewport-width": (
property: width,
class: vw,
values: (100: 100vw)
),
"min-viewport-width": (
property: min-width,
class: min-vw,
values: (100: 100vw)
),
2019-05-23 11:56:03 +02:00
"height": (
property: height,
class: h,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
)
),
"max-height": (
property: max-height,
class: mh,
values: (100: 100%)
),
"viewport-height": (
property: height,
class: vh,
values: (100: 100vh)
),
"min-viewport-height": (
property: min-height,
class: min-vh,
values: (100: 100vh)
),
// scss-docs-end utils-sizing
2019-05-23 11:56:03 +02:00
// Flex utilities
// scss-docs-start utils-flex
2019-05-23 11:56:03 +02:00
"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,
evenly: space-evenly,
2019-05-23 11:56:03 +02:00
)
),
"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,
last: 6,
2019-05-23 11:56:03 +02:00
),
),
// scss-docs-end utils-flex
2019-05-23 11:56:03 +02:00
// Margin utilities
// scss-docs-start utils-spacing
2019-05-23 11:56:03 +02:00
"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-end": (
2019-05-23 11:56:03 +02:00
responsive: true,
property: margin-right,
class: me,
2019-05-23 11:56:03 +02:00
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
2019-05-23 11:56:03 +02:00
responsive: true,
property: margin-left,
class: ms,
2019-05-23 11:56:03 +02:00
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-end": (
2019-05-23 11:56:03 +02:00
responsive: true,
property: margin-right,
class: me,
2019-05-23 11:56:03 +02:00
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
2019-05-23 11:56:03 +02:00
responsive: true,
property: margin-left,
class: ms,
2019-05-23 11:56:03 +02:00
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-end": (
2019-05-23 11:56:03 +02:00
responsive: true,
property: padding-right,
class: pe,
2019-05-23 11:56:03 +02:00
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
2019-05-23 11:56:03 +02:00
responsive: true,
property: padding-left,
class: ps,
2019-05-23 11:56:03 +02:00
values: $spacers
),
// Gap utility
"gap": (
responsive: true,
property: gap,
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
2019-05-23 11:56:03 +02:00
// Text
// scss-docs-start utils-text
"font-family": (
property: font-family,
class: font,
values: (monospace: var(--#{$prefix}font-monospace))
),
"font-size": (
rfs: true,
property: font-size,
class: fs,
values: $font-sizes
),
"font-style": (
property: font-style,
class: fst,
values: italic normal
),
2019-05-23 11:56:03 +02:00
"font-weight": (
property: font-weight,
class: fw,
2019-05-23 11:56:03 +02:00
values: (
lighter: $font-weight-lighter,
light: $font-weight-light,
2019-05-23 11:56:03 +02:00
normal: $font-weight-normal,
medium: $font-weight-medium,
semibold: $font-weight-semibold,
bold: $font-weight-bold,
2019-05-23 11:56:03 +02:00
bolder: $font-weight-bolder
)
),
"line-height": (
property: line-height,
class: lh,
values: (
1: 1,
sm: $line-height-sm,
base: $line-height-base,
lg: $line-height-lg,
)
2019-05-23 11:56:03 +02:00
),
"text-align": (
responsive: true,
property: text-align,
class: text,
values: (
start: left,
end: right,
center: center,
)
2019-05-23 11:56:03 +02:00
),
"text-decoration": (
property: text-decoration,
values: none underline line-through
),
"text-transform": (
property: text-transform,
class: text,
values: lowercase uppercase capitalize
),
"white-space": (
property: white-space,
class: text,
values: (
wrap: normal,
nowrap: nowrap,
)
),
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
// scss-docs-end utils-text
// scss-docs-start utils-color
2019-05-23 11:56:03 +02:00
"color": (
property: color,
class: text,
local-vars: (
"text-opacity": 1
),
values: map-merge(
$utilities-text-colors,
(
"muted": var(--#{$prefix}secondary-color), // deprecated
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
Add dark mode support (#35857) * Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Apply suggestions from code review Co-authored-by: Julien Déramond <julien.deramond@orange.com> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-11-29 07:30:26 +01:00
"body-secondary": var(--#{$prefix}secondary-color),
"body-tertiary": var(--#{$prefix}tertiary-color),
"body-emphasis": var(--#{$prefix}emphasis-color),
"reset": inherit,
)
2019-05-23 11:56:03 +02:00
)
),
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
Add dark mode support (#35857) * Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Apply suggestions from code review Co-authored-by: Julien Déramond <julien.deramond@orange.com> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-11-29 07:30:26 +01:00
"text-color": (
property: color,
class: text,
values: $utilities-text-emphasis-colors
),
// scss-docs-end utils-color
// scss-docs-start utils-links
"link-opacity": (
css-var: true,
class: link-opacity,
state: hover,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),
"link-offset": (
property: text-underline-offset,
class: link-offset,
state: hover,
values: (
1: .125em,
2: .25em,
3: .375em,
)
),
"link-underline": (
property: text-decoration-color,
class: link-underline,
local-vars: (
"link-underline-opacity": 1
),
values: map-merge(
$utilities-links-underline,
(
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
)
)
),
"link-underline-opacity": (
css-var: true,
class: link-underline-opacity,
state: hover,
values: (
0: 0,
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
),
),
// scss-docs-end utils-links
// scss-docs-start utils-bg-color
2019-05-23 11:56:03 +02:00
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
2019-05-23 11:56:03 +02:00
values: map-merge(
$utilities-bg-colors,
2019-05-23 11:56:03 +02:00
(
Add dark mode support (#35857) * Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Apply suggestions from code review Co-authored-by: Julien Déramond <julien.deramond@orange.com> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-11-29 07:30:26 +01:00
"transparent": transparent,
"body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
"body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
2019-05-23 11:56:03 +02:00
)
)
),
"bg-opacity": (
css-var: true,
class: bg-opacity,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),
Add dark mode support (#35857) * Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Apply suggestions from code review Co-authored-by: Julien Déramond <julien.deramond@orange.com> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-11-29 07:30:26 +01:00
"subtle-background-color": (
property: background-color,
class: bg,
values: $utilities-bg-subtle
),
// scss-docs-end utils-bg-color
"gradient": (
property: background-image,
class: bg,
values: (gradient: var(--#{$prefix}gradient))
),
// scss-docs-start utils-interaction
"user-select": (
property: user-select,
values: all auto none
),
2020-02-23 01:07:33 +01:00
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),
// scss-docs-end utils-interaction
// scss-docs-start utils-border-radius
2019-05-23 11:56:03 +02:00
"rounded": (
property: border-radius,
class: rounded,
values: (
null: var(--#{$prefix}border-radius),
2019-05-23 11:56:03 +02:00
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-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
2019-05-23 11:56:03 +02:00
)
),
"rounded-top": (
property: border-top-left-radius border-top-right-radius,
class: rounded-top,
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-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
2019-05-23 11:56:03 +02:00
),
"rounded-end": (
2019-05-23 11:56:03 +02:00
property: border-top-right-radius border-bottom-right-radius,
class: rounded-end,
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-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
2019-05-23 11:56:03 +02:00
),
"rounded-bottom": (
property: border-bottom-right-radius border-bottom-left-radius,
class: rounded-bottom,
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-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
2019-05-23 11:56:03 +02:00
),
"rounded-start": (
2019-05-23 11:56:03 +02:00
property: border-bottom-left-radius border-top-left-radius,
class: rounded-start,
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-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
2019-05-23 11:56:03 +02:00
),
// scss-docs-end utils-border-radius
// scss-docs-start utils-visibility
"visibility": (
property: visibility,
class: null,
values: (
visible: visible,
invisible: hidden,
)
),
// scss-docs-end utils-visibility
// scss-docs-start utils-zindex
"z-index": (
property: z-index,
class: z,
values: $zindex-levels,
)
// scss-docs-end utils-zindex
2019-05-23 11:56:03 +02:00
),
$utilities
);