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

package/assets/styles/ui/_lists.scss

@@ -0,0 +1,127 @@
+.list-group {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.list-group-header {
+    background: $list-group-header-bg;
+    padding: .5rem $list-group-item-padding-x;
+    font-size: $h5-font-size;
+    font-weight: var(--#{$prefix}font-weight-medium);
+    line-height: 1;
+    text-transform: uppercase;
+    color: $list-group-header-color;
+    border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+
+    .list-group-flush > & {
+        &:last-child {
+            border-bottom-width: 0;
+        }
+    }
+}
+
+.list-group-item {
+    background-color: inherit;
+}
+
+.list-group-item.active {
+    background-color: $dropdown-link-hover-bg;
+    border-left-color: $component-active-bg;
+    border-left-width: $border-width-wide;
+}
+
+.list-group-item {
+    &:active,
+    &:focus,
+    &:hover {
+        background-color: $dropdown-link-hover-bg;
+    }
+}
+
+.list-group-item {
+    &.disabled,
+    &:disabled {
+        color: $gray-500;
+        background-color: $dropdown-link-hover-bg;
+    }
+}
+
+.list-bordered {
+    .list-item {
+        border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+        margin-top: -1px;
+
+        &:first-child {
+            border-top: none;
+        }
+    }
+}
+
+.list-group-hoverable {
+    .list-group-item-actions {
+        opacity: 0;
+        @include transition(opacity $transition-time);
+    }
+
+    .list-group-item:hover .list-group-item-actions,
+    .list-group-item-actions.show {
+        opacity: 1;
+    }
+}
+
+
+.list-group-transparent {
+    --#{$prefix}list-group-border-radius: 0;
+    margin: 0 (- $list-group-item-padding-x);
+
+    .list-group-item {
+        background: none;
+        border: 0;
+
+        .icon {
+            color: var(--#{$prefix}secondary);
+        }
+
+        &.active {
+            font-weight: var(--#{$prefix}font-weight-bold);
+            color: inherit;
+            background: $list-group-active-bg;
+
+            .icon {
+                color: inherit;
+            }
+        }
+    }
+}
+
+
+.list-separated-item {
+    padding: 1rem 0;
+
+    &:first-child {
+        padding-top: 0;
+    }
+
+    &:last-child {
+        padding-bottom: 0;
+    }
+
+    & + & {
+        border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+    }
+}
+
+/**
+Inline list
+ */
+.list-inline-item:not(:last-child) {
+    margin-right: auto;
+    margin-inline-end: $list-inline-padding;
+}
+
+.list-inline-dots {
+    .list-inline-item + .list-inline-item:before {
+        content: ' · ';
+        margin-inline-end: $list-inline-padding;
+    }
+}

package/assets/styles/ui/_loaders.scss

@@ -0,0 +1,72 @@
+.loader {
+    position: relative;
+    display: block;
+    width: $loader-size;
+    height: $loader-size;
+    color: $blue;
+    vertical-align: middle;
+
+    &:after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        content: "";
+        border: 1px var(--#{$prefix}border-style);
+        border-color: transparent;
+        border-top-color: currentColor;
+        border-left-color: currentColor;
+
+        border-radius: $border-radius-pill;
+        animation: rotate-360 .6s linear;
+        animation-iteration-count: infinite;
+    }
+}
+
+/**
+Dimmer
+*/
+.dimmer {
+    position: relative;
+
+    .loader {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        left: 0;
+        display: none;
+        margin: 0 auto;
+        transform: translateY(-50%);
+    }
+
+    &.active {
+        .loader {
+            display: block;
+        }
+
+        .dimmer-content {
+            pointer-events: none;
+            opacity: .1;
+        }
+    }
+}
+
+
+@keyframes animated-dots {
+    0% {
+        transform: translateX(-100%);
+    }
+}
+
+.animated-dots {
+    display: inline-block;
+    overflow: hidden;
+    vertical-align: bottom;
+
+    &:after {
+        display: inline-block;
+        content: "...";
+        animation: animated-dots 1.2s steps(4, jump-none) infinite;
+    }
+}

package/assets/styles/ui/_login.scss

@@ -0,0 +1,3 @@
+//.col-login {
+//  max-width: 24rem;
+//}

package/assets/styles/ui/_markdown.scss

@@ -0,0 +1,42 @@
+/**
+Markdown
+ */
+.markdown {
+    line-height: $line-height-lg;
+
+    > :first-child {
+        margin-top: 0;
+    }
+
+    > :last-child,
+    > :last-child .highlight {
+        margin-bottom: 0;
+    }
+
+    > hr {
+        @include media-breakpoint-up(md) {
+            margin-top: 3em;
+            margin-bottom: 3em;
+        }
+    }
+
+    > {
+        h1, h2, h3, h4, h5, h6 {
+            font-weight: var(--#{$prefix}font-weight-bold);
+        }
+    }
+
+    > table {
+        @extend .table, .table-bordered;
+    }
+
+    > blockquote {
+        font-size: $h3-font-size;
+        margin: 1.5rem 0;
+        padding: .5rem 1.5rem;
+    }
+
+    > img {
+        border-radius: var(--#{$prefix}border-radius);
+    }
+}

package/assets/styles/ui/_modals.scss

@@ -0,0 +1,67 @@
+.modal-content {
+    .btn-close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: $modal-header-height;
+        height: $modal-header-height;
+        margin: 0;
+        padding: 0;
+        z-index: 10;
+    }
+}
+
+.modal-body {
+    @include scrollbar;
+
+    .modal-title {
+        margin-bottom: 1rem;
+    }
+
+    & + & {
+        border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+    }
+}
+
+.modal-status {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: $modal-status-size;
+    background: var(--#{$prefix}secondary);
+    border-radius: $modal-content-border-radius $modal-content-border-radius 0 0;
+}
+
+.modal-header {
+    align-items: center;
+    min-height: $modal-header-height;
+    background: $modal-header-bg;
+    padding: 0 $modal-header-height 0 $modal-inner-padding;
+}
+
+.modal-title {
+    font-size: $h3-font-size;
+    font-weight: $headings-font-weight;
+    color: $headings-color;
+    line-height: $line-height-base;
+}
+
+.modal-footer {
+    @if $modal-footer-border-width == 0 {
+        padding-top: 0;
+    } @else {
+        padding-top: .75rem;
+    }
+
+    padding-bottom: .75rem;
+}
+
+.modal-blur {
+    backdrop-filter: blur($modal-backdrop-blur);
+}
+
+.modal-full-width {
+    max-width: none;
+    margin: 0 $modal-dialog-margin;
+}

package/assets/styles/ui/_nav.scss

@@ -0,0 +1,92 @@
+.nav-vertical {
+    &,
+    .nav {
+        flex-direction: column;
+        flex-wrap: nowrap;
+    }
+
+    .nav {
+        margin-left: 1.25rem;
+        border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+        padding-left: .5rem;
+    }
+
+    .nav-link.active,
+    .nav-item.show .nav-link {
+        font-weight: var(--#{$prefix}font-weight-bold);
+    }
+
+    &.nav-pills {
+        margin: 0 (-$nav-link-padding-x);
+    }
+}
+
+//
+// Nav bordered
+//
+.nav-bordered {
+    border-bottom: $nav-bordered-border-width var(--#{$prefix}border-style) $nav-bordered-border-color;
+
+    .nav-item {
+        + .nav-item {
+            margin-left: $nav-bordered-margin-x;
+        }
+    }
+
+    .nav-link {
+        padding-left: 0;
+        padding-right: 0;
+        margin: 0 0 (- $nav-bordered-border-width);
+        border: 0;
+        border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
+        color: var(--#{$prefix}secondary);
+    }
+
+    .nav-link.active,
+    .nav-item.show .nav-link {
+        color: $nav-bordered-link-active-color;
+        border-color: $nav-bordered-link-active-border-color;
+    }
+
+}
+
+.nav-link {
+    display: flex;
+    @include transition(color $transition-time);
+    align-items: center;
+}
+
+.nav-link-toggle {
+    margin-left: auto;
+    padding: 0 .25rem;
+    @include transition(transform $transition-time);
+    @include caret();
+
+    &:after {
+        margin: 0;
+    }
+
+    @at-root .nav-link[aria-expanded="true"] & {
+        transform: rotate(180deg);
+    }
+}
+
+.nav-link-icon {
+    width: $nav-link-icon-size;
+    height: $nav-link-icon-size;
+    margin-right: .5rem;
+    color: $nav-link-icon-color;
+
+    svg {
+        display: block;
+        height: 100%;
+    }
+}
+
+.nav-fill {
+    .nav-item {
+        .nav-link {
+            justify-content: center;
+        }
+    }
+}

package/assets/styles/ui/_offcanvas.scss

@@ -0,0 +1,17 @@
+.offcanvas-header {
+    border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent;
+}
+
+.offcanvas-footer {
+    padding: $offcanvas-padding-y $offcanvas-padding-x;
+}
+
+.offcanvas-title {
+    font-size: $h3-font-size;
+    font-weight: var(--#{$prefix}font-weight-medium);
+    line-height: 1.5rem;
+}
+
+.offcanvas-narrow {
+    width: 20rem;
+}

package/assets/styles/ui/_pagination.scss

@@ -0,0 +1,56 @@
+.pagination {
+    user-select: none;
+}
+
+.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: ('2checkout', 'alipay', 'amazon', 'americanexpress', 'applepay', 'bancontact', 'bitcoin', 'bitpay', 'blik', 'cirrus', 'clickandbuy', 'coinkite', 'dinersclub', 'directdebit', 'discover', 'dotpay', 'dwolla', 'ebay', 'epayco', 'eway', 'giropay', 'googlewallet', 'ingenico', 'jcb', 'klarna', 'laser', 'maestro', 'mastercard', 'mir', 'monero', 'neteller', 'ogone', 'okpay', 'paybox', 'paymill', 'payone', 'payoneer', 'paypal', 'paysafecard', 'payu', 'payza', 'przelewy24', 'ripple', 'sage', 'sepa', 'shopify', 'skrill', 'solo', 'square', 'stripe', 'switch', 'tpay', 'ukash', 'unionpay', 'verifone', 'verisign', 'visa', 'webmoney', 'westernunion', 'worldpay');
+
+.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;
+}