@finqu/cool 1.3.0 → 2.0.2

package/scss/_grid.scss

@@ -0,0 +1,215 @@
+@use "variables" as *;
+@use "sass:map";
+@use "sass:math";
+/* Grid ========================================================================== */
+@layer layout {
+    .container {
+        width: 100%;
+        padding-right: var(--cool-grid-gutter-x);
+        padding-left: var(--cool-grid-gutter-x);
+        margin-right: auto;
+        margin-left: auto;
+
+        @each $breakpoint, $container-max-width in $container-max-widths {
+            @include media-breakpoint-up($breakpoint) {
+                max-width: $container-max-width;
+            }
+        }
+    }
+
+    .container-fluid {
+        width: 100%;
+        padding-right: var(--cool-grid-gutter-x);
+        padding-left: var(--cool-grid-gutter-x);
+        margin-right: auto;
+        margin-left: auto;
+        max-width: 100%;
+    }
+
+    .container-content {
+        position: relative;
+        width: 100%;
+        max-width: var(--cool-container-content-max-width);
+        padding-right: var(--cool-grid-gutter-x);
+        padding-left: var(--cool-grid-gutter-x);
+        margin-right: auto;
+        margin-left: auto;
+    }
+
+    .row {
+        display: flex;
+        flex-wrap: wrap;
+        margin-right: calc(var(--cool-grid-gutter-x) * -0.5);
+        margin-left: calc(var(--cool-grid-gutter-x) * -0.5);
+    }
+
+    .no-gutters {
+        margin-right: 0;
+        margin-left: 0;
+
+        > .col,
+        > [class*="col-"] {
+            padding-right: 0;
+            padding-left: 0;
+        }
+    }
+
+    .col,
+    [class*="col-"] {
+        position: relative;
+        width: 100%;
+        padding-right: calc(var(--cool-grid-gutter-x) * 0.5);
+        padding-left: calc(var(--cool-grid-gutter-x) * 0.5);
+    }
+
+    .col {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 100%;
+    }
+
+    .col-auto {
+        flex: 0 0 auto;
+        width: auto;
+        max-width: 100%;
+    }
+
+    @for $i from 1 through $grid-columns {
+        .col-#{$i} {
+            flex: 0 0 math.percentage(math.div($i, $grid-columns));
+            max-width: math.percentage(math.div($i, $grid-columns));
+        }
+    }
+
+    .order-first {
+        order: -1;
+    }
+
+    .order-last {
+        order: $grid-columns + 1;
+    }
+
+    @for $i from 0 through $grid-columns {
+        .order-#{$i} {
+            order: $i;
+        }
+    }
+
+    @for $i from 1 through ($grid-columns - 1) {
+        .offset-#{$i} {
+            margin-left: math.percentage(math.div($i, $grid-columns));
+        }
+    }
+
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        @if $breakpoint !=xs {
+            @include media-breakpoint-up($breakpoint) {
+                .col#{$infix} {
+                    flex-basis: 0;
+                    flex-grow: 1;
+                    max-width: 100%;
+                }
+
+                .col#{$infix}-auto {
+                    flex: 0 0 auto;
+                    width: auto;
+                    max-width: 100%;
+                }
+
+                @for $i from 1 through $grid-columns {
+                    .col#{$infix}-#{$i} {
+                        flex: 0 0 math.percentage(math.div($i, $grid-columns));
+                        max-width: math.percentage(math.div($i, $grid-columns));
+                    }
+                }
+
+                .order#{$infix}-first {
+                    order: -1;
+                }
+
+                .order#{$infix}-last {
+                    order: $grid-columns + 1;
+                }
+
+                @for $i from 0 through $grid-columns {
+                    .order#{$infix}-#{$i} {
+                        order: $i;
+                    }
+                }
+
+                @for $i from 0 through ($grid-columns - 1) {
+                    @if not($infix == "" and $i == 0) {
+                        .offset#{$infix}-#{$i} {
+                            @if $i == 0 {
+                                margin-left: 0;
+                            } @else {
+                                margin-left: math.percentage(math.div($i, $grid-columns));
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    @for $i from 1 through 6 {
+        .row-cols-#{$i} {
+            > * {
+                flex: 0 0 math.percentage(math.div(1, $i));
+                max-width: math.percentage(math.div(1, $i));
+            }
+        }
+    }
+
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        @if $breakpoint !=xs {
+            @include media-breakpoint-up($breakpoint) {
+                @for $i from 1 through 6 {
+                    .row-cols#{$infix}-#{$i} {
+                        > * {
+                            flex: 0 0 math.percentage(math.div(1, $i));
+                            max-width: math.percentage(math.div(1, $i));
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+            @for $i from 0 through 6 {
+                .g#{$infix}-#{$i},
+                .gx#{$infix}-#{$i} {
+                    --cool-grid-gutter-x: #{calc(var(--cool-spacer) * $i)};
+                }
+
+                .g#{$infix}-#{$i},
+                .gy#{$infix}-#{$i} {
+                    --cool-grid-gutter-y: #{calc(var(--cool-spacer) * $i)};
+                }
+            }
+        }
+    }
+
+    @for $i from 0 through 6 {
+        .g-#{$i} {
+            --cool-grid-gutter-x: #{calc(var(--cool-spacer) * $i)};
+            --cool-grid-gutter-y: #{calc(var(--cool-spacer) * $i)};
+        }
+
+        .gx-#{$i} {
+            --cool-grid-gutter-x: #{calc(var(--cool-spacer) * $i)};
+        }
+
+        .gy-#{$i} {
+            --cool-grid-gutter-y: #{calc(var(--cool-spacer) * $i)};
+        }
+    }
+}

package/scss/_input-group.scss

@@ -0,0 +1,326 @@
+@use "variables" as *;
+/* Input Group ========================================================================== */
+
+@mixin cool-input-group {
+    .input-group {
+        position: relative;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: stretch;
+        width: 100%;
+        gap: var(--cool-input-group-gap);
+        border-color: var(--cool-input-group-border-color);
+        border-width: var(--cool-input-group-border-width);
+        border-radius: var(--cool-input-group-border-radius);
+        background-color: var(--cool-input-group-bg);
+        color: var(--cool-input-group-color);
+        margin-bottom: 1px;
+
+        > .form-control {
+            position: relative;
+            flex: 1 1 auto;
+            width: 1%;
+            margin-bottom: 0;
+
+            + .form-control {
+                margin-left: calc((var(--cool-input-border-width) + 0.2px) * -1);
+            }
+        }
+
+        > .form-control {
+            &:not(:last-child) {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+                border-right: 0;
+            }
+
+            &:not(:first-child) {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+                border-left: 0;
+            }
+        }
+
+        &.input-group-sm {
+            border-radius: var(--cool-input-border-radius-sm);
+        }
+
+        &.input-group-lg {
+            border-radius: var(--cool-input-border-radius-lg);
+        }
+    }
+
+    .input-group-prepend,
+    .input-group-append {
+        display: flex;
+        border-color: var(--cool-input-group-border-color);
+
+        .btn {
+            position: relative;
+            z-index: 2;
+            margin: 0;
+
+            > .icon {
+                margin-right: 0;
+
+                & + * {
+                    margin-left: var(--cool-icon-spacer);
+                }
+            }
+
+            &:focus {
+                z-index: 3;
+            }
+        }
+
+        .btn + .btn,
+        .btn + .input-group-text,
+        .btn + .input-group-dropdown,
+        .input-group-text + .btn,
+        .input-group-text + .input-group-text,
+        .input-group-text + .input-group-dropdown,
+        .input-group-dropdown + .btn,
+        .input-group-dropdown + .input-group-text,
+        .input-group-dropdown + .input-group-dropdown {
+            margin-left: calc((var(--cool-input-border-width) + 0.2px) * -1);
+        }
+    }
+
+    .input-group-prepend {
+        margin-right: calc(var(--cool-input-border-width) * -1);
+
+        .input-group-text > span {
+            margin-right: var(--cool-input-border-width);
+        }
+    }
+
+    .input-group-append {
+        margin-left: calc(var(--cool-input-border-width) * -1);
+
+        .input-group-text > span {
+            margin-left: var(--cool-input-border-width);
+        }
+    }
+
+    .input-group-text {
+        display: flex;
+        align-items: center;
+        padding: var(--cool-input-padding-y) var(--cool-input-padding-x);
+        margin-bottom: 0;
+        font-size: var(--cool-input-font-size);
+        font-weight: var(--cool-font-weight-normal);
+        line-height: var(--cool-input-line-height);
+        color: var(--cool-input-group-color);
+        text-align: center;
+        white-space: nowrap;
+        background-color: var(--cool-input-bg);
+        border: var(--cool-input-border-width) solid var(--cool-input-group-border-color);
+        border-radius: var(--cool-input-border-radius);
+        transition: box-shadow var(--cool-animation-duration) ease-in-out;
+
+        input[type="radio"],
+        input[type="checkbox"] {
+            margin-top: 0;
+        }
+    }
+
+    .input-group-dropdown {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0;
+        font-size: var(--cool-input-font-size);
+        font-weight: var(--cool-font-weight-normal);
+        line-height: var(--cool-input-line-height);
+        color: var(--cool-input-group-color);
+        text-align: center;
+        white-space: nowrap;
+        background-color: var(--cool-input-group-bg);
+        border-radius: var(--cool-input-border-radius);
+        border: var(--cool-input-border-width) solid var(--cool-input-group-border-color);
+        transition: box-shadow var(--cool-animation-duration) ease-in-out;
+
+        .dropdown {
+            height: 100%;
+        }
+
+        .btn {
+            padding: calc(var(--cool-btn-padding-y) - 2 * var(--cool-input-border-width)) var(--cool-btn-padding-x);
+            font-size: var(--cool-btn-font-size);
+            line-height: var(--cool-btn-line-height);
+            border-radius: calc(var(--cool-btn-border-radius) - 2px);
+            --cool-btn-bg: var(--cool-input-group-bg);
+            --cool-btn-color: var(--cool-input-group-color);
+            --cool-btn-border-color: transparent;
+            --cool-btn-hover-bg: var(--cool-input-group-bg);
+            --cool-btn-hover-color: var(--cool-input-group-color);
+            --cool-btn-hover-border-color: transparent;
+            --cool-btn-active-bg: var(--cool-input-group-bg);
+            --cool-btn-active-color: var(--cool-input-group-color);
+            --cool-btn-active-border-color: transparent;
+            --cool-btn-disabled-bg: var(--cool-input-group-bg);
+            --cool-btn-disabled-color: var(--cool-input-group-color);
+            --cool-btn-disabled-border-color: transparent;
+
+            &.btn-xs {
+                --cool-btn-padding-y: calc(var(--cool-btn-padding-y-xs) - 2 * var(--cool-input-border-width));
+                --cool-btn-padding-x: var(--cool-btn-padding-x-xs);
+                --cool-btn-font-size: var(--cool-btn-font-size-xs);
+                --cool-btn-line-height: var(--cool-btn-line-height-xs);
+                --cool-btn-border-radius: calc(var(--cool-btn-border-radius-xs) - 1px);
+            }
+
+            &.btn-sm {
+                --cool-btn-padding-y: calc(var(--cool-btn-padding-y-sm) - 2 * var(--cool-input-border-width));
+                --cool-btn-padding-x: var(--cool-btn-padding-x-sm);
+                --cool-btn-font-size: var(--cool-btn-font-size-sm);
+                --cool-btn-line-height: var(--cool-btn-line-height-sm);
+                --cool-btn-border-radius: calc(var(--cool-btn-border-radius-sm) - 2px);
+            }
+
+            &.btn-lg {
+                --cool-btn-padding-y: calc(var(--cool-btn-padding-y-lg) - 2 * var(--cool-input-border-width));
+                --cool-btn-padding-x: var(--cool-btn-padding-x-lg);
+                --cool-btn-font-size: var(--cool-btn-font-size-lg);
+                --cool-btn-line-height: var(--cool-btn-line-height-lg);
+                --cool-btn-border-radius: calc(var(--cool-btn-border-radius-lg) - 2px);
+            }
+        }
+    }
+
+    @supports selector(:has(*)) {
+        .input-group:has(input:focus),
+        .input-group:has(textarea:focus) {
+            .form-control,
+            .input-group-text,
+            .input-group-dropdown,
+            .input-group-append > .btn,
+            .input-group-prepend > .btn {
+                outline: none;
+                --cool-btn-border-color: var(--cool-input-focus-border-color);
+                --cool-input-group-border-color: var(--cool-input-focus-border-color);
+
+                &:focus {
+                    outline: none;
+                }
+            }
+        }
+
+        .input-group:has(.form-control[readonly]),
+        .input-group:has(.form-control:disabled) {
+            .input-group-text,
+            .input-group-dropdown,
+            .input-group-append > .btn,
+            .input-group-prepend > .btn {
+                background-color: var(--cool-input-disabled-bg);
+                opacity: 1;
+                color: var(--cool-input-disabled-color);
+            }
+        }
+    }
+
+    .input-group-lg > .form-control:not(textarea) {
+        height: var(--cool-input-height-lg);
+    }
+
+    .input-group-lg > .form-control,
+    .input-group-lg > .input-group-text,
+    .input-group-lg > .input-group-dropdown,
+    .input-group-lg > .input-group-prepend > .input-group-text,
+    .input-group-lg > .input-group-append > .input-group-text,
+    .input-group-lg > .input-group-prepend > .input-group-dropdown,
+    .input-group-lg > .input-group-append > .input-group-dropdown {
+        padding: var(--cool-input-padding-y-lg) var(--cool-input-padding-x-lg);
+        font-size: var(--cool-input-font-size-lg);
+        line-height: var(--cool-input-line-height-lg);
+        border-radius: var(--cool-input-border-radius-lg);
+    }
+
+    .input-group-lg > .input-group-prepend > .btn,
+    .input-group-lg > .input-group-append > .btn {
+        padding: var(--cool-input-padding-y-lg) var(--cool-input-padding-x-lg);
+        font-size: var(--cool-input-font-size-lg);
+        border-radius: var(--cool-input-border-radius-lg);
+        height: var(--cool-input-height-lg);
+    }
+
+    .input-group-lg .input-group-dropdown .dropdown {
+        margin: calc(var(--cool-input-padding-y-lg) * -1) calc(var(--cool-input-padding-x-lg) * -1);
+    }
+
+    .input-group-sm > .form-control:not(textarea) {
+        height: var(--cool-input-height-sm);
+    }
+
+    .input-group-sm > .form-control,
+    .input-group-sm > .input-group-text,
+    .input-group-sm > .input-group-dropdown,
+    .input-group-sm > .input-group-prepend > .input-group-text,
+    .input-group-sm > .input-group-append > .input-group-text,
+    .input-group-sm > .input-group-prepend > .input-group-dropdown,
+    .input-group-sm > .input-group-append > .input-group-dropdown {
+        padding: var(--cool-input-padding-y-sm) var(--cool-input-padding-x-sm);
+        font-size: var(--cool-input-font-size-sm);
+        line-height: var(--cool-input-line-height-sm);
+        border-radius: var(--cool-input-border-radius-sm);
+    }
+
+    .input-group-sm > .input-group-prepend > .btn,
+    .input-group-sm > .input-group-append > .btn {
+        padding: var(--cool-input-padding-y-sm) var(--cool-input-padding-x-sm);
+        font-size: var(--cool-input-font-size-sm);
+        border-radius: var(--cool-input-border-radius-sm);
+        height: var(--cool-input-height-sm);
+    }
+
+    .input-group-sm .input-group-dropdown .dropdown {
+        margin: calc(var(--cool-input-padding-y-sm) * -1) calc(var(--cool-input-padding-x-sm) * -1);
+    }
+
+    // Prepend and append rounded corners
+    // These rulesets must come after the sizing ones to properly override sm and lg
+    // border-radius values when extending. They're more specific than we'd like
+    // with the `.input-group >` part, but without it, we cannot override the sizing.
+    .input-group > .input-group-prepend > .btn,
+    .input-group > .input-group-prepend > .input-group-text,
+    .input-group > .input-group-prepend > .input-group-dropdown,
+    .input-group > .input-group-append:not(:last-child) > .btn,
+    .input-group > .input-group-append:not(:last-child) > .input-group-text,
+    .input-group > .input-group-append:not(:last-child) > .input-group-dropdown,
+    .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+    .input-group > .input-group-append:last-child > .input-group-text:not(:last-child),
+    .input-group > .input-group-append:last-child > .input-group-dropdown:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .input-group > .input-group-prepend > .input-group-text:not([class*="bg-"]),
+    .input-group > .input-group-append:last-child > .input-group-text:not([class*="bg-"]):not(:last-child) {
+        padding-right: 0;
+    }
+
+    .input-group > .input-group-append > .btn,
+    .input-group > .input-group-append > .input-group-text,
+    .input-group > .input-group-append > .input-group-dropdown,
+    .input-group > .input-group-prepend:not(:first-child) > .btn,
+    .input-group > .input-group-prepend:not(:first-child) > .input-group-text,
+    .input-group > .input-group-prepend:not(:first-child) > .input-group-dropdown,
+    .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
+    .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child),
+    .input-group > .input-group-prepend:first-child > .input-group-dropdown:not(:first-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .input-group > .input-group-append > .input-group-text:not([class*="bg-"]),
+    .input-group > .input-group-prepend:first-child > .input-group-text:not([class*="bg-"]):not(:first-child) {
+        padding-left: 0;
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-input-group;
+    }
+} @else {
+    @include cool-input-group;
+}

package/scss/_list-group.scss

@@ -0,0 +1,127 @@
+@use "variables" as *;
+/* List Group ========================================================================== */
+
+@mixin cool-list-group {
+    .list-group {
+        display: flex;
+        flex-direction: column;
+        padding-left: 0;
+        margin-bottom: 0;
+        margin-top: 0;
+    }
+
+    .list-group-item {
+        position: relative;
+        display: flex;
+        padding: var(--cool-list-group-item-padding-y) var(--cool-list-group-item-padding-x);
+        line-height: var(--cool-list-group-line-height);
+        color: var(--cool-list-group-color);
+        align-items: center;
+        flex: 1 0 auto;
+        appearance: none;
+        border: none;
+        background-color: var(--cool-list-group-bg);
+        text-align: left;
+        font-weight: var(--cool-font-weight-base);
+
+        &.active {
+            .list-group-icon.image > .icon {
+                color: var(--cool-list-group-active-color);
+            }
+        }
+
+        &.disabled {
+            color: var(--cool-list-group-disabled-color);
+        }
+
+        > a {
+            display: flex;
+            color: inherit;
+            align-items: center;
+            width: 100%;
+            flex: 1 1;
+        }
+
+        .list-group-icon {
+            margin-right: var(--cool-list-group-icon-spacing);
+
+            &:not(.image) {
+                line-height: var(--cool-list-group-line-height);
+            }
+        }
+    }
+
+    .list-group-bordered:not(ul) {
+        > .list-group-item {
+            border-bottom: var(--cool-border-width) solid var(--cool-list-group-border-color);
+
+            &:last-child {
+                border-bottom: 0;
+            }
+        }
+    }
+
+    .list-group-hover:not(ul) {
+        > .list-group-item {
+            &:hover:not(.disabled) {
+                background-color: var(--cool-list-group-hover-bg);
+            }
+        }
+    }
+
+    ul.list-group {
+        li {
+            list-style: none;
+        }
+    }
+
+    ul.list-group-bordered {
+        > .list-group-item {
+            border-bottom: var(--cool-border-width) solid var(--cool-list-group-border-color);
+        }
+
+        > li:last-child {
+            border-bottom: 0;
+
+            .list-group-item {
+                border-bottom: 0;
+            }
+        }
+    }
+
+    ul.list-group-hover {
+        > .list-group-item {
+            &:hover:not(.disabled) {
+                background-color: var(--cool-list-group-hover-bg);
+            }
+        }
+    }
+
+    .list-group-inner-spacing {
+        > .list-group-item {
+            padding: var(--cool-list-group-inner-padding);
+        }
+    }
+
+    .list-group.list-group-distinctive {
+        display: grid;
+        gap: var(--cool-list-group-distinctive-gap);
+
+        > .list-group-item {
+            line-height: initial;
+            border: var(--cool-border-width) solid var(--cool-list-group-border-color);
+            padding: var(--cool-list-group-distinctive-padding);
+            background: var(--cool-list-group-distinctive-bg);
+            border-radius: var(--cool-border-radius);
+            display: block;
+        }
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-list-group;
+    }
+} @else {
+    @include cool-list-group;
+}