blue-web 1.21.1 → 1.21.2

package/dist/styles/_buttons.scss

@@ -1,120 +1,120 @@
-// Inspired by Bootstrap's button system but extended with more variants
-
-// Soft buttons
-
-// scss-docs-start btn-variant-loops
-@each $color, $value in $theme-colors {
-    $bg: tint-color($value, 80%);
-    $text-color: shade-color($value, 60%);
-
-    .blue-btn-soft-#{$color} {
-        @if $color == "light" {
-            $text-color: color-contrast($value);
-        }
-
-        @include button-variant(
-            $bg,
-            $bg,
-            $text-color,
-            $hover-background: shade-color($bg, $btn-hover-bg-shade-amount),
-            $hover-border: shade-color($bg, $btn-hover-border-shade-amount),
-            $active-background: shade-color($bg, $btn-active-bg-shade-amount),
-            $active-border: shade-color($bg, $btn-active-border-shade-amount)
-        );
-    }
-}
-
-@include color-mode(dark) {
-    @each $color, $value in $theme-colors {
-        $bg: shade-color($value, 80%);
-        $text-color: tint-color($value, 60%);
-
-        .blue-btn-soft-#{$color} {
-            @if $color == "dark" {
-                $text-color: color-contrast($value);
-            }
-
-            @include button-variant(
-                $bg,
-                $bg,
-                $text-color,
-                $hover-background: tint-color($bg, $btn-hover-bg-tint-amount),
-                $hover-border: tint-color($bg, $btn-hover-border-tint-amount),
-                $active-background: tint-color($bg, $btn-active-bg-tint-amount),
-                $active-border: tint-color($bg, $btn-active-border-tint-amount)
-            );
-        }
-    }
-}
-
-// Plain buttons
-
-// scss-docs-start btn-variant-loops
-@each $color, $value in $theme-colors {
-    $bg: tint-color($value, 80%);
-    $text-color: $value;
-
-    $active-background: if(
-        $color == $color-contrast-light,
-        shade-color($value, $btn-active-bg-shade-amount),
-        tint-color($value, $btn-active-bg-tint-amount)
-    );
-
-    .blue-btn-plain-#{$color} {
-        &:not(:hover) {
-            box-shadow: none;
-            background-image: none;
-        }
-
-        @if $color == "light" {
-            $text-color: color-contrast($value);
-        }
-
-        // More contrast for secondary plain button
-        @if $color == "secondary" {
-            $text-color: shade-color($value, 60%);
-        }
-
-        @include button-variant(
-            transparent,
-            transparent,
-            $text-color,
-            $hover-background: tint-color($value, 80%),
-            $hover-border: tint-color($value, 80%),
-            $hover-color: if($color == "light", color-contrast($value), shade-color($value, 60%)),
-            $active-background: shade-color($bg, $btn-hover-bg-shade-amount),
-            $active-border: shade-color($bg, $btn-hover-border-shade-amount),
-            $disabled-background: transparent,
-            $disabled-border: transparent,
-            $disabled-color: $text-color
-        );
-    }
-}
-
-@include color-mode(dark) {
-    @each $color, $value in $theme-colors {
-        $bg: shade-color($value, 80%);
-        $text-color: tint-color($value, 40%);
-
-        .blue-btn-plain-#{$color} {
-            @if $color == "dark" {
-                $text-color: color-contrast($value);
-            }
-
-            // More contrast for secondary plain button
-            @if $color == "secondary" {
-                $text-color: tint-color($value, 60%);
-            }
-
-            @include button-variant(
-                transparent,
-                transparent,
-                $text-color,
-                $hover-background: tint-color($bg, $btn-hover-bg-tint-amount),
-                $hover-border: tint-color($bg, $btn-hover-border-tint-amount),
-                $active-background: tint-color($bg, $btn-active-bg-tint-amount),
-                $active-border: tint-color($bg, $btn-active-border-tint-amount)
-            );
-        }
-    }
-}
+// Inspired by Bootstrap's button system but extended with more variants
+
+// Soft buttons
+
+// scss-docs-start btn-variant-loops
+@each $color, $value in $theme-colors {
+    $bg: tint-color($value, 80%);
+    $text-color: shade-color($value, 60%);
+
+    .blue-btn-soft-#{$color} {
+        @if $color == "light" {
+            $text-color: color-contrast($value);
+        }
+
+        @include button-variant(
+            $bg,
+            $bg,
+            $text-color,
+            $hover-background: shade-color($bg, $btn-hover-bg-shade-amount),
+            $hover-border: shade-color($bg, $btn-hover-border-shade-amount),
+            $active-background: shade-color($bg, $btn-active-bg-shade-amount),
+            $active-border: shade-color($bg, $btn-active-border-shade-amount)
+        );
+    }
+}
+
+@include color-mode(dark) {
+    @each $color, $value in $theme-colors {
+        $bg: shade-color($value, 80%);
+        $text-color: tint-color($value, 60%);
+
+        .blue-btn-soft-#{$color} {
+            @if $color == "dark" {
+                $text-color: color-contrast($value);
+            }
+
+            @include button-variant(
+                $bg,
+                $bg,
+                $text-color,
+                $hover-background: tint-color($bg, $btn-hover-bg-tint-amount),
+                $hover-border: tint-color($bg, $btn-hover-border-tint-amount),
+                $active-background: tint-color($bg, $btn-active-bg-tint-amount),
+                $active-border: tint-color($bg, $btn-active-border-tint-amount)
+            );
+        }
+    }
+}
+
+// Plain buttons
+
+// scss-docs-start btn-variant-loops
+@each $color, $value in $theme-colors {
+    $bg: tint-color($value, 80%);
+    $text-color: $value;
+
+    $active-background: if(
+        $color == $color-contrast-light,
+        shade-color($value, $btn-active-bg-shade-amount),
+        tint-color($value, $btn-active-bg-tint-amount)
+    );
+
+    .blue-btn-plain-#{$color} {
+        &:not(:hover) {
+            box-shadow: none;
+            background-image: none;
+        }
+
+        @if $color == "light" {
+            $text-color: color-contrast($value);
+        }
+
+        // More contrast for secondary plain button
+        @if $color == "secondary" {
+            $text-color: shade-color($value, 60%);
+        }
+
+        @include button-variant(
+            transparent,
+            transparent,
+            $text-color,
+            $hover-background: tint-color($value, 80%),
+            $hover-border: tint-color($value, 80%),
+            $hover-color: if($color == "light", color-contrast($value), shade-color($value, 60%)),
+            $active-background: shade-color($bg, $btn-hover-bg-shade-amount),
+            $active-border: shade-color($bg, $btn-hover-border-shade-amount),
+            $disabled-background: transparent,
+            $disabled-border: transparent,
+            $disabled-color: $text-color
+        );
+    }
+}
+
+@include color-mode(dark) {
+    @each $color, $value in $theme-colors {
+        $bg: shade-color($value, 80%);
+        $text-color: tint-color($value, 40%);
+
+        .blue-btn-plain-#{$color} {
+            @if $color == "dark" {
+                $text-color: color-contrast($value);
+            }
+
+            // More contrast for secondary plain button
+            @if $color == "secondary" {
+                $text-color: tint-color($value, 60%);
+            }
+
+            @include button-variant(
+                transparent,
+                transparent,
+                $text-color,
+                $hover-background: tint-color($bg, $btn-hover-bg-tint-amount),
+                $hover-border: tint-color($bg, $btn-hover-border-tint-amount),
+                $active-background: tint-color($bg, $btn-active-bg-tint-amount),
+                $active-border: tint-color($bg, $btn-active-border-tint-amount)
+            );
+        }
+    }
+}

package/dist/styles/_collapse.scss

@@ -1,72 +1,72 @@
-// Collapse with details and animated
-.blue-collapse {
-    interpolate-size: allow-keywords;
-
-    summary {
-        list-style: none;
-    }
-
-    summary::-webkit-details-marker {
-        display: none;
-    }
-
-    .blue-collapse-chevron {
-        transition: transform 0.2s;
-    }
-
-    &[open] > summary .blue-collapse-chevron {
-        --blue-collapse-chevron-rotate: 90deg;
-        transform: rotate(var(--blue-collapse-chevron-rotate));
-    }
-
-    &::details-content {
-        block-size: 0;
-        opacity: 0;
-        translate: 0 -4rem;
-        transition:
-            block-size 0.2s,
-            content-visibility 0.2s,
-            opacity 0.2s,
-            translate 0.2s;
-        transition-behavior: allow-discrete;
-    }
-
-    &[open]::details-content {
-        block-size: auto;
-        opacity: 1;
-        translate: 0;
-    }
-}
-
-@media (prefers-reduced-motion) {
-    .blue-collapse .blue-collapse-chevron,
-    .blue-collapse::details-content {
-        transition: none;
-    }
-}
-
-.blue-collapse-indent {
-    // 0.5em is half of icon width
-    --margin-inline-start: calc(#{$input-btn-padding-x} + 0.5em + #{$input-btn-border-width});
-    margin-inline-start: var(--margin-inline-start);
-}
-
-// Let's you group a collapse together with another UI element like a button that should come before the collapse summary.
-.blue-collapse-group {
-    display: grid;
-    grid-template-rows: auto;
-    grid-template-columns: minmax(0, 1fr);
-    max-width: 100%;
-
-    & > details {
-        display: contents;
-
-        & > summary {
-            grid-column: 2;
-
-            & + * {
-                width: calc(100% + var(--margin-inline-start) - 3px);
-            }
-        }
-    }
-}
+// Collapse with details and animated
+.blue-collapse {
+    interpolate-size: allow-keywords;
+
+    summary {
+        list-style: none;
+    }
+
+    summary::-webkit-details-marker {
+        display: none;
+    }
+
+    .blue-collapse-chevron {
+        transition: transform 0.2s;
+    }
+
+    &[open] > summary .blue-collapse-chevron {
+        --blue-collapse-chevron-rotate: 90deg;
+        transform: rotate(var(--blue-collapse-chevron-rotate));
+    }
+
+    &::details-content {
+        block-size: 0;
+        opacity: 0;
+        translate: 0 -4rem;
+        transition:
+            block-size 0.2s,
+            content-visibility 0.2s,
+            opacity 0.2s,
+            translate 0.2s;
+        transition-behavior: allow-discrete;
+    }
+
+    &[open]::details-content {
+        block-size: auto;
+        opacity: 1;
+        translate: 0;
+    }
+}
+
+@media (prefers-reduced-motion) {
+    .blue-collapse .blue-collapse-chevron,
+    .blue-collapse::details-content {
+        transition: none;
+    }
+}
+
+.blue-collapse-indent {
+    // 0.5em is half of icon width
+    --margin-inline-start: calc(#{$input-btn-padding-x} + 0.5em + #{$input-btn-border-width});
+    margin-inline-start: var(--margin-inline-start);
+}
+
+// Let's you group a collapse together with another UI element like a button that should come before the collapse summary.
+.blue-collapse-group {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: minmax(0, 1fr);
+    max-width: 100%;
+
+    & > details {
+        display: contents;
+
+        & > summary {
+            grid-column: 2;
+
+            & + * {
+                width: calc(100% + var(--margin-inline-start) - 3px);
+            }
+        }
+    }
+}

package/dist/styles/_container-grid.scss

@@ -1,52 +1,52 @@
-@import "node_modules/bootstrap/scss/functions";
-
-@import "node_modules/bootstrap/scss/variables";
-@import "node_modules/bootstrap/scss/variables-dark";
-
-@import "node_modules/bootstrap/scss/maps";
-@import "node_modules/bootstrap/scss/mixins";
-
-@mixin make-grid-columns-cq($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
-    .col {
-        flex: initial;
-        max-width: initial;
-        width: 100%;
-    }
-
-    @each $breakpoint in map-keys($breakpoints) {
-        $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-        @for $i from 1 through $columns {
-            .col#{$infix}-#{$i} {
-                @extend .col;
-            }
-        }
-    }
-
-    @each $breakpoint in map-keys($breakpoints) {
-        $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-        // @for $i from 1 through $columns {
-        //     .col#{$infix}-#{$i} {
-        //         flex: initial;
-        //         max-width: initial;
-        //         width: 100%;
-        //     }
-        // }
-
-        @if breakpoint-min($breakpoint, $breakpoints) {
-            @container (min-width: #{breakpoint-min($breakpoint, $breakpoints)}) {
-                @for $i from 1 through $columns {
-                    .col#{$infix}-#{$i} {
-                        @include make-col($i, $columns);
-                    }
-                }
-            }
-        }
-    }
-}
-
-.blue-container-grid {
-    container-type: inline-size;
-    @include make-grid-columns-cq();
-}
+@import "node_modules/bootstrap/scss/functions";
+
+@import "node_modules/bootstrap/scss/variables";
+@import "node_modules/bootstrap/scss/variables-dark";
+
+@import "node_modules/bootstrap/scss/maps";
+@import "node_modules/bootstrap/scss/mixins";
+
+@mixin make-grid-columns-cq($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+    .col {
+        flex: initial;
+        max-width: initial;
+        width: 100%;
+    }
+
+    @each $breakpoint in map-keys($breakpoints) {
+        $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+        @for $i from 1 through $columns {
+            .col#{$infix}-#{$i} {
+                @extend .col;
+            }
+        }
+    }
+
+    @each $breakpoint in map-keys($breakpoints) {
+        $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+        // @for $i from 1 through $columns {
+        //     .col#{$infix}-#{$i} {
+        //         flex: initial;
+        //         max-width: initial;
+        //         width: 100%;
+        //     }
+        // }
+
+        @if breakpoint-min($breakpoint, $breakpoints) {
+            @container (min-width: #{breakpoint-min($breakpoint, $breakpoints)}) {
+                @for $i from 1 through $columns {
+                    .col#{$infix}-#{$i} {
+                        @include make-col($i, $columns);
+                    }
+                }
+            }
+        }
+    }
+}
+
+.blue-container-grid {
+    container-type: inline-size;
+    @include make-grid-columns-cq();
+}