@updevs/components 1.0.0-alpha.1 → 1.0.0-alpha.100

package/assets/styles/ui/_pagination.scss

@@ -0,0 +1,58 @@
+.pagination {
+    --#{$prefix}pagination-gap: .25rem;
+    user-select: none;
+    gap: var(--#{$prefix}pagination-gap);
+}
+
+.page-link {
+    min-width: 1.75rem;
+    border-radius: var(--#{$prefix}border-radius);
+}
+
+.page-item {
+    text-align: center;
+
+    &:not(.active) {
+        .page-link {
+            &:hover {
+                background: transparent;
+            }
+        }
+    }
+
+    &.page-prev,
+    &.page-next {
+        flex: 0 0 50%;
+        text-align: left;
+    }
+
+    &.page-next {
+        margin-left: auto;
+        text-align: right;
+    }
+}
+
+.page-item-subtitle {
+    margin-bottom: 2px;
+    font-size: 12px;
+    color: var(--#{$prefix}secondary);
+    text-transform: uppercase;
+
+    .page-item.disabled & {
+        color: $pagination-disabled-color;
+    }
+}
+
+.page-item-title {
+    font-size: $h3-font-size;
+    font-weight: var(--#{$prefix}font-weight-normal);
+    color: var(--#{$prefix}body-color);
+
+    .page-link:hover & {
+        color: $link-color;
+    }
+
+    .page-item.disabled & {
+        color: $pagination-disabled-color;
+    }
+}

package/assets/styles/ui/_payments.scss

@@ -0,0 +1,28 @@
+$payment-icons: ("2c2p", "2checkout", "adyen", "affirm", "alipay-plus", "alipay", "allegro-pay", "amazon-pay", "amazon", "americanexpress", "applepay", "authorize", "autopay", "bancontact", "binance-usd", "bitcoin", "bitpay", "bkash", "blik", "braintree", "cash-app", "chime", "cirrus", "clickandbuy", "coinkite", "dinersclub", "directdebit", "discover", "dotpay", "dwolla", "easypaisa", "ebay", "elo", "epayco", "esewa", "ethereum", "eway", "fonepay", "giropay", "google-pay", "googlewallet", "hubspot", "ingenico", "ideal", "imepay", "jcb", "khalti", "klarna", "laser", "litecoin", "maestro", "mastercard", "mercado-pago", "metamask", "mir", "monero", "moneygram", "neteller", "ogone", "okpay", "opensea", "paybox", "payconiq", "payka", "payline", "paymill", "payone", "payoneer", "paypal", "paypo", "paysafe", "paysafecard", "payu", "payza", "poli", "przelewy24", "revolut-pay", "ripple", "sage", "samsung-pay", "sepa", "shop-pay", "shopify", "skrill", "solana", "solo", "spingo", "square", "stax", "stripe", "switch", "tether", "tpay", "troy", "true-usd", "ukash", "unionpay", "venmo", "verifone", "verisign", "visa", "we-chat-pay", "webmoney", "westernunion", "wise", "worldpay", "zelle");
+
+.payment {
+    height: $avatar-size;
+    aspect-ratio: 1.66666;
+    display: inline-block;
+    background: no-repeat center/100% 100%;
+    vertical-align: bottom;
+    font-style: normal;
+    box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
+    border-radius: 2px;
+}
+
+@each $payment in $payment-icons {
+    .payment-provider-#{$payment} {
+        background-image: url("#{$assets-base}/img/payments/#{$payment}.svg");
+    }
+
+    .payment-provider-#{$payment}-dark {
+        background-image: url("#{$assets-base}/img/payments/#{$payment}-dark.svg");
+    }
+}
+
+@each $payment-size, $size in $payment-sizes {
+    .payment-#{$payment-size} {
+        height: map-get($size, size);
+    }
+}

package/assets/styles/ui/_placeholder.scss

@@ -0,0 +1,9 @@
+.placeholder {
+    &:not(.btn):not([class*="bg-"]) {
+        background-color: currentColor !important;
+    }
+
+    &:not(.avatar):not([class*="card-img-"]), {
+        border-radius: var(--#{$prefix}border-radius);
+    }
+}

package/assets/styles/ui/_popovers.scss

@@ -0,0 +1,2 @@
+.popover {
+}

package/assets/styles/ui/_progress.scss

@@ -0,0 +1,107 @@
+@keyframes progress-indeterminate {
+    0% {
+        right: 100%;
+        left: -35%;
+    }
+
+    100%,
+    60% {
+        right: -90%;
+        left: 100%;
+    }
+}
+
+/**
+Progress
+ */
+.progress {
+    position: relative;
+    width: 100%;
+    line-height: $progress-height;
+    appearance: none;
+
+    &::-webkit-progress-bar {
+        background: var(--#{$prefix}progress-bg);
+    }
+
+    &::-webkit-progress-value {
+        background-color: var(--#{$prefix}primary);
+    }
+
+    &::-moz-progress-bar {
+        background-color: var(--#{$prefix}primary);
+    }
+
+    &::-ms-fill {
+        background-color: var(--#{$prefix}primary);
+        border: none;
+    }
+}
+
+.progress-sm {
+    height: .25rem;
+}
+
+/**
+Progress bar
+ */
+.progress-bar {
+    height: 100%;
+}
+
+.progress-bar-indeterminate {
+    &:after,
+    &:before {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        content: "";
+        background-color: inherit;
+        will-change: left, right;
+    }
+
+    &:before {
+        animation: progress-indeterminate 1.5s cubic-bezier(.65, .815, .735, .395) infinite;
+    }
+}
+
+.progress-separated {
+    .progress-bar {
+        box-shadow: 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+    }
+}
+
+
+/**
+Progressbg
+ */
+.progressbg {
+    position: relative;
+    padding: .25rem .5rem;
+    display: flex;
+}
+
+.progressbg-text {
+    position: relative;
+    z-index: 1;
+    @include text-truncate;
+}
+
+.progressbg-progress {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 0;
+    height: 100%;
+    background: transparent;
+    pointer-events: none;
+}
+
+.progressbg-value {
+    font-weight: var(--#{$prefix}font-weight-medium);
+    margin-left: auto;
+    padding-left: 2rem;
+}

package/assets/styles/ui/_ribbons.scss

@@ -0,0 +1,157 @@
+// stylelint-disable declaration-no-important
+
+.ribbon {
+    --#{$prefix}ribbon-margin: #{$card-ribbon-margin};
+    --#{$prefix}ribbon-border-radius: #{$card-ribbon-border-radius};
+    position: absolute;
+    top: .75rem;
+    right: calc(-1 * var(--#{$prefix}ribbon-margin));
+    z-index: 1;
+    padding: .25rem .75rem;
+    font-size: $card-ribbon-font-size;
+    font-weight: var(--#{$prefix}font-weight-bold);
+    line-height: 1;
+    color: $white;
+    text-align: center;
+    text-transform: uppercase;
+    background: var(--#{$prefix}primary);
+    border-color: var(--#{$prefix}primary);
+    border-radius: var(--#{$prefix}ribbon-border-radius) 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 2rem;
+    min-width: 2rem;
+
+    &:before {
+        position: absolute;
+        right: 0;
+        bottom: 100%;
+        width: 0;
+        height: 0;
+        content: "";
+        filter: brightness(70%);
+        border: calc(var(--#{$prefix}ribbon-margin) * .5) var(--#{$prefix}border-style);
+        border-color: inherit;
+        border-top-color: transparent;
+        border-right-color: transparent;
+    }
+
+    @if $enable-extra-colors {
+        @each $color, $value in $extra-colors {
+            &.bg-#{$color} {
+                border-color: var(--#{$prefix}#{$color});
+            }
+
+            &.bg-#{$color}-lt {
+                border-color: rgba(var(--#{$prefix}#{$color}-rgb), .1) !important;
+            }
+        }
+    }
+
+    .icon {
+        width: 1.25rem;
+        height: 1.25rem;
+        font-size: 1.25rem;
+    }
+}
+
+.ribbon-top {
+    top: calc(-1 * var(--#{$prefix}ribbon-margin));
+    right: .75rem;
+    width: 2rem;
+    padding: .5rem 0;
+    border-radius: 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius);
+
+    &:before {
+        top: 0;
+        right: 100%;
+        bottom: auto;
+        border-color: inherit;
+        border-top-color: transparent;
+        border-left-color: transparent;
+    }
+
+    &.ribbon-start {
+        right: auto;
+        left: .75rem;
+
+        &:before {
+            top: 0;
+            right: 100%;
+            left: auto;
+        }
+    }
+}
+
+.ribbon-start {
+    right: auto;
+    left: calc(-1 * var(--#{$prefix}ribbon-margin));
+    border-radius: 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius);
+
+    &:before {
+        top: auto;
+        bottom: 100%;
+        left: 0;
+        border-color: inherit;
+        border-top-color: transparent;
+        border-left-color: transparent;
+    }
+}
+
+.ribbon-bottom {
+    top: auto;
+    bottom: .75rem;
+}
+
+.ribbon-bookmark {
+    padding-left: .25rem;
+    border-radius: 0 0 var(--#{$prefix}ribbon-border-radius) 0;
+
+    &:after {
+        position: absolute;
+        top: 0;
+        right: 100%;
+        display: block;
+        width: 0;
+        height: 0;
+        content: "";
+        border: 1rem var(--#{$prefix}border-style);
+        border-color: inherit;
+        border-right-width: 0;
+        border-left-color: transparent;
+        border-left-width: .5rem;
+    }
+
+    &.ribbon-left {
+        padding-right: .5rem;
+
+        &:after {
+            right: auto;
+            left: 100%;
+            border-right-color: transparent;
+
+            border-right-width: .5rem;
+            border-left-width: 0;
+        }
+    }
+
+    &.ribbon-top {
+        padding-right: 0;
+        padding-bottom: .25rem;
+        padding-left: 0;
+        border-radius: 0 var(--#{$prefix}ribbon-border-radius) 0 0;
+
+        &:after {
+            top: 100%;
+            right: 0;
+            left: 0;
+            border-color: inherit;
+            border-width: 1rem;
+            border-top-width: 0;
+            border-bottom-color: transparent;
+            border-bottom-width: .5rem;
+        }
+    }
+}
+

package/assets/styles/ui/_segmented.scss

@@ -0,0 +1,101 @@
+.nav-segmented {
+    --#{$prefix}nav-bg: var(--#{$prefix}bg-surface-tertiary);
+    --#{$prefix}nav-padding: 2px;
+    --#{$prefix}nav-height: 2.5rem;
+    --#{$prefix}nav-gap: .25rem;
+    --#{$prefix}nav-active-bg: var(--#{$prefix}bg-surface);
+    --#{$prefix}nav-font-size: inherit;
+    --#{$prefix}nav-radius: 6px;
+
+
+    --#{$prefix}nav-link-disabled-color: var(--#{$prefix}disabled-color);
+    --#{$prefix}nav-link-gap: .25rem;
+    --#{$prefix}nav-link-padding-x: .75rem;
+    --#{$prefix}nav-link-icon-size: 1.25rem;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--#{$prefix}nav-gap);
+    padding: var(--#{$prefix}nav-padding);
+    list-style: none;
+    background: var(--#{$prefix}nav-bg);
+    border-radius: calc(var(--#{$prefix}nav-radius) + var(--#{$prefix}nav-padding));
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
+
+    .nav-link {
+        display: inline-flex;
+        gap: calc(.25rem + var(--#{$prefix}nav-link-gap));
+        align-items: center;
+        margin: 0;
+        font-size: var(--#{$prefix}nav-font-size);
+        min-width: calc(var(--#{$prefix}nav-height) - 2 * var(--#{$prefix}nav-padding));
+        height: calc(var(--#{$prefix}nav-height) - 2 * var(--#{$prefix}nav-padding));
+        padding: 0 calc(var(--#{$prefix}nav-link-padding-x) - 2px);
+        border: 1px solid transparent;
+        background: transparent;
+        color: var(--#{$prefix}secondary);
+        text-align: center;
+        text-decoration: none;
+        white-space: nowrap;
+        cursor: pointer;
+        transition: background-color $transition-time, color $transition-time;
+        border-radius: var(--#{$prefix}nav-radius);
+        flex-grow: 1;
+        justify-content: center;
+
+        &:hover,
+        &.hover {
+            background: rgba(0, 0, 0, .04);
+            color: var(--#{$prefix}body-color);
+        }
+
+        &.disabled,
+        &:disabled {
+            color: var(--#{$prefix}nav-link-disabled-color);
+            cursor: not-allowed;
+        }
+    }
+
+    .nav-link-input:checked + .nav-link,
+    .nav-link.active {
+        color: var(--#{$prefix}body-color);
+        background: var(--#{$prefix}nav-active-bg);
+        border-color: var(--#{$prefix}border-color);
+    }
+
+    .nav-link-input {
+        display: none;
+    }
+
+    .nav-link-icon {
+        width: var(--#{$prefix}nav-link-icon-size);
+        height: var(--#{$prefix}nav-link-icon-size);
+        margin: 0 -.25rem;
+        color: inherit;
+    }
+}
+
+.nav-segmented-vertical {
+    flex-direction: column;
+
+    .nav-link {
+        justify-content: flex-start;
+    }
+}
+
+.nav-sm {
+    --#{$prefix}nav-height: 2rem;
+    --#{$prefix}nav-font-size: var(--tblr-font-size-h5);
+    --#{$prefix}nav-radius: 4px;
+    --#{$prefix}nav-link-padding-x: .5rem;
+    --#{$prefix}nav-link-gap: .25rem;
+    --#{$prefix}nav-link-icon-size: 1rem;
+}
+
+.nav-lg {
+    --#{$prefix}nav-height: 3rem;
+    --#{$prefix}nav-font-size: var(--tblr-font-size-h3);
+    --#{$prefix}nav-radius: 8px;
+    --#{$prefix}nav-link-padding-x: 1rem;
+    --#{$prefix}nav-link-gap: .5rem;
+    --#{$prefix}nav-link-icon-size: 1.5rem;
+}

package/assets/styles/ui/_signature.scss

@@ -0,0 +1,15 @@
+.signature {
+    --#{$prefix}signature-padding: var(--#{$prefix}spacer-1);
+    --#{$prefix}signature-border-radius: var(--#{$prefix}border-radius);
+    border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+    padding: var(--#{$prefix}signature-padding);
+    border-radius: var(--#{$prefix}border-radius);
+}
+
+.signature-canvas {
+    border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
+    border-radius: calc(var(--#{$prefix}signature-border-radius) - var(--#{$prefix}signature-padding));
+    display: block;
+    cursor: crosshair;
+    width: 100%;
+}

package/assets/styles/ui/_social.scss

@@ -0,0 +1,52 @@
+$apps: (
+        "apple",
+        "discord",
+        "dribbble",
+        "facebook",
+        "figma",
+        "github",
+        "google",
+        "instagram",
+        "linkedin",
+        "medium",
+        "meta",
+        "metamask",
+        "pinterest",
+        "reddit",
+        "signal",
+        "skype",
+        "snapchat",
+        "spotify",
+        "telegram",
+        "tiktok",
+        "tumblr",
+        "twitch",
+        "vk",
+        "x",
+        "youtube"
+);
+
+.social {
+    position: relative;
+    display: inline-block;
+    height: $avatar-size;
+    aspect-ratio: 1;
+    background: no-repeat center/cover;
+    vertical-align: bottom;
+}
+
+@each $app in $apps {
+    .social-app-#{$app} {
+        background-image: url("#{$assets-base}/img/social/#{$app}.svg");
+
+        &.social-gray {
+            background-image: url("#{$assets-base}/img/social/#{$app}-gray.svg");
+        }
+    }
+}
+
+@each $flag-size, $size in $flag-sizes {
+    .social-#{$flag-size} {
+        height: map-get($size, size);
+    }
+}

package/assets/styles/ui/_stars.scss

@@ -0,0 +1,13 @@
+.stars {
+    display: inline-flex;
+    color: $gray-400;
+    font-size: $h5-font-size;
+
+    .star:not(:first-child) {
+        margin-left: .25rem;
+    }
+}
+
+.star {
+
+}