bootstrap 5.0.0.alpha2 → 5.0.0

data/assets/stylesheets/bootstrap/_toasts.scss

@@ -1,29 +1,31 @@
 .toast {
-  max-width: $toast-max-width;
+  width: $toast-max-width;
+  max-width: 100%;
   @include font-size($toast-font-size);
   color: $toast-color;
+  pointer-events: auto;
   background-color: $toast-background-color;
   background-clip: padding-box;
   border: $toast-border-width solid $toast-border-color;
   box-shadow: $toast-box-shadow;
-  opacity: 0;
   @include border-radius($toast-border-radius);
 
-  &:not(:last-child) {
-    margin-bottom: $toast-padding-x;
+  &:not(.showing):not(.show) {
+    opacity: 0;
   }
 
-  &.showing {
-    opacity: 1;
+  &.hide {
+    display: none;
   }
+}
 
-  &.show {
-    display: block;
-    opacity: 1;
-  }
+.toast-container {
+  width: max-content;
+  max-width: 100%;
+  pointer-events: none;
 
-  &.hide {
-    display: none;
+  > :not(:last-child) {
+    margin-bottom: $toast-spacing;
   }
 }
 
@@ -45,4 +47,5 @@
 
 .toast-body {
   padding: $toast-padding-x; // apply to both vertical and horizontal
+  word-wrap: break-word;
 }

data/assets/stylesheets/bootstrap/_tooltip.scss

@@ -36,14 +36,14 @@
     bottom: 0;
 
     &::before {
-      top: 0;
+      top: -1px;
       border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
       border-top-color: $tooltip-arrow-color;
     }
   }
 }
 
-.bs-tooltip-right {
+.bs-tooltip-end {
   padding: 0 $tooltip-arrow-height;
 
   .tooltip-arrow {
@@ -52,7 +52,7 @@
     height: $tooltip-arrow-width;
 
     &::before {
-      right: 0;
+      right: -1px;
       border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
       border-right-color: $tooltip-arrow-color;
     }
@@ -66,14 +66,14 @@
     top: 0;
 
     &::before {
-      bottom: 0;
+      bottom: -1px;
       border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
       border-bottom-color: $tooltip-arrow-color;
     }
   }
 }
 
-.bs-tooltip-left {
+.bs-tooltip-start {
   padding: 0 $tooltip-arrow-height;
 
   .tooltip-arrow {
@@ -82,7 +82,7 @@
     height: $tooltip-arrow-width;
 
     &::before {
-      left: 0;
+      left: -1px;
       border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
       border-left-color: $tooltip-arrow-color;
     }
@@ -90,17 +90,17 @@
 }
 
 .bs-tooltip-auto {
-  &[x-placement^="top"] {
+  &[data-popper-placement^="top"] {
     @extend .bs-tooltip-top;
   }
-  &[x-placement^="right"] {
-    @extend .bs-tooltip-right;
+  &[data-popper-placement^="right"] {
+    @extend .bs-tooltip-end;
   }
-  &[x-placement^="bottom"] {
+  &[data-popper-placement^="bottom"] {
     @extend .bs-tooltip-bottom;
   }
-  &[x-placement^="left"] {
-    @extend .bs-tooltip-left;
+  &[data-popper-placement^="left"] {
+    @extend .bs-tooltip-start;
   }
 }
 

data/assets/stylesheets/bootstrap/_transitions.scss

@@ -6,6 +6,7 @@
   }
 }
 
+// scss-docs-start collapse-classes
 .collapse {
   &:not(.show) {
     display: none;
@@ -17,3 +18,4 @@
   overflow: hidden;
   @include transition($transition-collapse);
 }
+// scss-docs-end collapse-classes

data/assets/stylesheets/bootstrap/_utilities.scss

@@ -1,30 +1,45 @@
+// stylelint-disable indentation
+
 // Utilities
 
 $utilities: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $utilities: map-merge(
   (
+    // scss-docs-start utils-vertical-align
     "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
     "float": (
       responsive: true,
       property: float,
-      values: left right none
+      values: (
+        start: left,
+        end: right,
+        none: none,
+      )
     ),
+    // scss-docs-end utils-float
+    // scss-docs-start utils-overflow
     "overflow": (
       property: overflow,
-      values: auto hidden,
+      values: auto hidden visible scroll,
     ),
+    // scss-docs-end utils-overflow
+    // scss-docs-start utils-display
     "display": (
       responsive: true,
       print: true,
       property: display,
       class: d,
-      values: inline inline-block block table table-row table-cell flex inline-flex none
+      values: inline inline-block block grid table table-row table-cell flex inline-flex none
     ),
+    // scss-docs-end utils-display
+    // scss-docs-start utils-shadow
     "shadow": (
       property: box-shadow,
       class: shadow,
@@ -35,6 +50,8 @@ $utilities: map-merge(
         none: none,
       )
     ),
+    // scss-docs-end utils-shadow
+    // scss-docs-start utils-position
     "position": (
       property: position,
       values: static relative absolute fixed sticky
@@ -47,21 +64,27 @@ $utilities: map-merge(
       property: bottom,
       values: $position-values
     ),
-    "left": (
+    "start": (
       property: left,
+      class: start,
       values: $position-values
     ),
-    "right": (
+    "end": (
       property: right,
+      class: end,
       values: $position-values
     ),
     "translate-middle": (
       property: transform,
       class: translate-middle,
       values: (
-        null: (translateX(-50%) translateY(-50%))
+        null: translate(-50%, -50%),
+        x: translateX(-50%),
+        y: translateY(-50%),
       )
     ),
+    // scss-docs-end utils-position
+    // scss-docs-start utils-borders
     "border": (
       property: border,
       values: (
@@ -76,8 +99,9 @@ $utilities: map-merge(
         0: 0,
       )
     ),
-    "border-right": (
+    "border-end": (
       property: border-right,
+      class: border-end,
       values: (
         null: $border-width solid $border-color,
         0: 0,
@@ -90,8 +114,9 @@ $utilities: map-merge(
         0: 0,
       )
     ),
-    "border-left": (
+    "border-start": (
       property: border-left,
+      class: border-start,
       values: (
         null: $border-width solid $border-color,
         0: 0,
@@ -107,7 +132,9 @@ $utilities: map-merge(
       class: border,
       values: $border-widths
     ),
+    // scss-docs-end utils-borders
     // Sizing utilities
+    // scss-docs-start utils-sizing
     "width": (
       property: width,
       class: w,
@@ -160,7 +187,9 @@ $utilities: map-merge(
       class: min-vh,
       values: (100: 100vh)
     ),
+    // scss-docs-end utils-sizing
     // Flex utilities
+    // scss-docs-start utils-flex
     "flex": (
       responsive: true,
       property: flex,
@@ -196,6 +225,12 @@ $utilities: map-merge(
       class: flex,
       values: wrap nowrap wrap-reverse
     ),
+    "gap": (
+      responsive: true,
+      property: gap,
+      class: gap,
+      values: $spacers
+    ),
     "justify-content": (
       responsive: true,
       property: justify-content,
@@ -257,7 +292,9 @@ $utilities: map-merge(
         last: 6,
       ),
     ),
+    // scss-docs-end utils-flex
     // Margin utilities
+    // scss-docs-start utils-spacing
     "margin": (
       responsive: true,
       property: margin,
@@ -282,10 +319,10 @@ $utilities: map-merge(
       class: mt,
       values: map-merge($spacers, (auto: auto))
     ),
-    "margin-right": (
+    "margin-end": (
       responsive: true,
       property: margin-right,
-      class: mr,
+      class: me,
       values: map-merge($spacers, (auto: auto))
     ),
     "margin-bottom": (
@@ -294,10 +331,10 @@ $utilities: map-merge(
       class: mb,
       values: map-merge($spacers, (auto: auto))
     ),
-    "margin-left": (
+    "margin-start": (
       responsive: true,
       property: margin-left,
-      class: ml,
+      class: ms,
       values: map-merge($spacers, (auto: auto))
     ),
     // Negative margin utilities
@@ -325,10 +362,10 @@ $utilities: map-merge(
       class: mt,
       values: $negative-spacers
     ),
-    "negative-margin-right": (
+    "negative-margin-end": (
       responsive: true,
       property: margin-right,
-      class: mr,
+      class: me,
       values: $negative-spacers
     ),
     "negative-margin-bottom": (
@@ -337,10 +374,10 @@ $utilities: map-merge(
       class: mb,
       values: $negative-spacers
     ),
-    "negative-margin-left": (
+    "negative-margin-start": (
       responsive: true,
       property: margin-left,
-      class: ml,
+      class: ms,
       values: $negative-spacers
     ),
     // Padding utilities
@@ -368,10 +405,10 @@ $utilities: map-merge(
       class: pt,
       values: $spacers
     ),
-    "padding-right": (
+    "padding-end": (
       responsive: true,
       property: padding-right,
-      class: pr,
+      class: pe,
       values: $spacers
     ),
     "padding-bottom": (
@@ -380,15 +417,34 @@ $utilities: map-merge(
       class: pb,
       values: $spacers
     ),
-    "padding-left": (
+    "padding-start": (
       responsive: true,
       property: padding-left,
-      class: pl,
+      class: ps,
       values: $spacers
     ),
+    // scss-docs-end utils-spacing
     // Text
+    // scss-docs-start utils-text
+    "font-family": (
+      property: font-family,
+      class: font,
+      values: (monospace: var(--#{$variable-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
+    ),
     "font-weight": (
       property: font-weight,
+      class: fw,
       values: (
         light: $font-weight-light,
         lighter: $font-weight-lighter,
@@ -397,17 +453,51 @@ $utilities: map-merge(
         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,
+      )
+    ),
+    "text-align": (
+      responsive: true,
+      property: text-align,
+      class: text,
+      values: (
+        start: left,
+        end: right,
+        center: center,
+      )
+    ),
+    "text-decoration": (
+      property: text-decoration,
+      values: none underline line-through
+    ),
     "text-transform": (
       property: text-transform,
       class: text,
       values: lowercase uppercase capitalize
     ),
-    "text-align": (
-      responsive: true,
-      property: text-align,
+    "white-space": (
+      property: white-space,
       class: text,
-      values: left right center
+      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
     "color": (
       property: color,
       class: text,
@@ -423,16 +513,8 @@ $utilities: map-merge(
         )
       )
     ),
-    "line-height": (
-      property: line-height,
-      class: lh,
-      values: (
-        1: 1,
-        sm: $line-height-sm,
-        base: $line-height-base,
-        lg: $line-height-lg,
-      )
-    ),
+    // scss-docs-end utils-color
+    // scss-docs-start utils-bg-color
     "background-color": (
       property: background-color,
       class: bg,
@@ -445,38 +527,13 @@ $utilities: map-merge(
         )
       )
     ),
+    // scss-docs-end utils-bg-color
     "gradient": (
       property: background-image,
       class: bg,
-      values: (gradient: var(--bs-gradient))
-    ),
-    "white-space": (
-      property: white-space,
-      class: text,
-      values: (
-        wrap: normal,
-        nowrap: nowrap,
-      )
-    ),
-    "text-decoration": (
-      property: text-decoration,
-      values: none underline line-through
-    ),
-    "font-style": (
-      property: font-style,
-      class: font,
-      values: italic normal
-    ),
-    "word-wrap": (
-      property: word-wrap word-break,
-      class: text,
-      values: (break: break-word)
-    ),
-    "font-family": (
-      property: font-family,
-      class: font,
-      values: (monospace: var(--bs-font-monospace))
+      values: (gradient: var(--#{$variable-prefix}gradient))
     ),
+    // scss-docs-start utils-interaction
     "user-select": (
       property: user-select,
       values: all auto none
@@ -486,16 +543,19 @@ $utilities: map-merge(
       class: pe,
       values: none auto,
     ),
+    // scss-docs-end utils-interaction
+    // scss-docs-start utils-border-radius
     "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,
+        1: $border-radius-sm,
+        2: $border-radius,
+        3: $border-radius-lg,
+        circle: 50%,
+        pill: $border-radius-pill
       )
     ),
     "rounded-top": (
@@ -503,9 +563,9 @@ $utilities: map-merge(
       class: rounded-top,
       values: (null: $border-radius)
     ),
-    "rounded-right": (
+    "rounded-end": (
       property: border-top-right-radius border-bottom-right-radius,
-      class: rounded-right,
+      class: rounded-end,
       values: (null: $border-radius)
     ),
     "rounded-bottom": (
@@ -513,11 +573,13 @@ $utilities: map-merge(
       class: rounded-bottom,
       values: (null: $border-radius)
     ),
-    "rounded-left": (
+    "rounded-start": (
       property: border-bottom-left-radius border-top-left-radius,
-      class: rounded-left,
+      class: rounded-start,
       values: (null: $border-radius)
     ),
+    // scss-docs-end utils-border-radius
+    // scss-docs-start utils-visibility
     "visibility": (
       property: visibility,
       class: null,
@@ -526,6 +588,7 @@ $utilities: map-merge(
         invisible: hidden,
       )
     )
+    // scss-docs-end utils-visibility
   ),
   $utilities
 );