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

package/assets/styles/ui/_carousel.scss

@@ -0,0 +1,68 @@
+.carousel {
+
+}
+
+.carousel-indicators-vertical {
+    left: auto;
+    top: 0;
+    margin: 0 1rem 0 0;
+    flex-direction: column;
+
+    [data-bs-target] {
+        margin: $carousel-indicator-spacer 0 $carousel-indicator-spacer;
+        width: $carousel-indicator-height;
+        height: $carousel-indicator-width;
+        border: 0;
+        border-left: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
+        border-right: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
+    }
+}
+
+.carousel-indicators-dot {
+    [data-bs-target] {
+        width: $carousel-indicator-dot-width;
+        height: $carousel-indicator-dot-width;
+        border-radius: $border-radius-pill;
+        border: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
+        margin: 0;
+    }
+}
+
+.carousel-indicators-thumb {
+    [data-bs-target] {
+        width: $carousel-indicator-thumb-width * .5;
+        height: auto;
+        background: no-repeat center/cover;
+        border: 0;
+        border-radius: var(--#{$prefix}border-radius);
+        box-shadow: $box-shadow;
+        margin: 0 $carousel-indicator-spacer;
+        opacity: $carousel-indicator-thumb-opacity;
+
+        @include media-breakpoint-up(lg) {
+            width: $carousel-indicator-thumb-width;
+        }
+
+        &:before {
+            content: "";
+            padding-top: var(--#{$prefix}aspect-ratio, 100%);
+            display: block;
+        }
+    }
+
+    &.carousel-indicators-vertical {
+        [data-bs-target] {
+            margin: $carousel-indicator-spacer 0;
+        }
+    }
+}
+
+.carousel-caption-background {
+    background: red;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 90%;
+    background: linear-gradient(0deg, rgba($dark, .9), rgba($dark, 0));
+}

package/assets/styles/ui/_charts.scss

@@ -0,0 +1,61 @@
+.chart {
+    display: block;
+    min-height: 10rem;
+
+    text {
+        font-family: inherit;
+    }
+}
+
+.chart-sm {
+    height: 2.5rem;
+}
+
+.chart-lg {
+    height: 15rem;
+}
+
+.chart-square {
+    height: 5.75rem;
+}
+
+/**
+Chart sparkline
+ */
+.chart-sparkline {
+    position: relative;
+    width: 4rem;
+    height: 2.5rem;
+    line-height: 1;
+    min-height: 0 !important;
+}
+
+.chart-sparkline-sm {
+    height: 1.5rem;
+}
+
+.chart-sparkline-square {
+    width: 2.5rem;
+}
+
+.chart-sparkline-wide {
+    width: 6rem;
+}
+
+.chart-sparkline-label {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: $h6-font-size;
+
+    .icon {
+        width: 1rem;
+        height: 1rem;
+        font-size: 1rem;
+    }
+}

package/assets/styles/ui/_chat.scss

@@ -0,0 +1,38 @@
+.chat {
+}
+
+.chat-bubbles {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.chat-bubble {
+    background: var(--#{$prefix}bg-surface-secondary);
+    border-radius: var(--#{$prefix}border-radius-lg);
+    padding: 1rem;
+    position: relative;
+}
+
+.chat-bubble-me {
+    background-color: var(--#{$prefix}primary-lt);
+    box-shadow: none;
+}
+
+.chat-bubble-title {
+    margin-bottom: 0.25rem;
+}
+
+.chat-bubble-author {
+    font-weight: 600;
+}
+
+.chat-bubble-date {
+    color: var(--#{$prefix}secondary);
+}
+
+.chat-bubble-body {
+    > *:last-child {
+        margin-bottom: 0;
+    }
+}

package/assets/styles/ui/_close.scss

@@ -0,0 +1,60 @@
+.btn-close {
+    --#{$prefix}btn-close-color: currentColor;
+    --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
+    --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
+    --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
+    --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
+    --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
+    --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
+    --#{$prefix}btn-close-size: #{$btn-close-width};
+
+    width: var(--#{$prefix}btn-close-size);
+    height: var(--#{$prefix}btn-close-size);
+    padding: $btn-close-padding-y $btn-close-padding-x;
+    color: var(--#{$prefix}btn-close-color);
+    mask: var(--#{$prefix}btn-close-bg) no-repeat center/calc(var(--#{$prefix}btn-close-size) * .75);
+    background-color: var(--#{$prefix}btn-close-color);
+    border: 0;
+    border-radius: var(--tblr-border-radius);
+    opacity: var(--#{$prefix}btn-close-opacity);
+    cursor: pointer;
+    display: block;
+
+    &:hover {
+        color: var(--#{$prefix}btn-close-color);
+        text-decoration: none;
+        opacity: var(--#{$prefix}btn-close-hover-opacity);
+    }
+
+    &:focus {
+        outline: 0;
+        box-shadow: var(--#{$prefix}btn-close-focus-shadow);
+        opacity: var(--#{$prefix}btn-close-focus-opacity);
+    }
+
+    &:disabled,
+    &.disabled {
+        pointer-events: none;
+        user-select: none;
+        opacity: var(--#{$prefix}btn-close-disabled-opacity);
+    }
+}
+
+// @mixin btn-close-white() {
+//   --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
+// }
+
+// .btn-close-white {
+//   @include btn-close-white();
+// }
+
+// :root,
+// [data-bs-theme="light"] {
+//   --#{$prefix}btn-close-filter: #{$btn-close-filter};
+// }
+
+// @if $enable-dark-mode {
+//   @include color-mode(dark, true) {
+//     @include btn-close-white();
+//   }
+// }

package/assets/styles/ui/_datagrid.scss

@@ -0,0 +1,17 @@
+//
+// Base styles
+//
+
+.datagrid {
+    --#{$prefix}datagrid-padding: #{$datagrid-padding};
+    --#{$prefix}datagrid-item-width: #{$datagrid-item-width};
+
+    display: grid;
+    grid-gap: var(--#{$prefix}datagrid-padding);
+    grid-template-columns: repeat(auto-fit, minmax(var(--#{$prefix}datagrid-item-width), 1fr));
+}
+
+.datagrid-title {
+    @include subheader;
+    margin-bottom: .25rem;
+}

package/assets/styles/ui/_dropdowns.scss

@@ -0,0 +1,120 @@
+.dropdown-menu {
+    user-select: none;
+    background-clip: border-box;
+
+    &.card {
+        padding: 0;
+        min-width: $dropdown-max-width;
+        display: none;
+
+        &.show {
+            display: flex;
+        }
+    }
+}
+
+.dropdown-item {
+    min-width: $dropdown-min-width;
+    display: flex;
+    align-items: center;
+    margin: 0;
+    line-height: $line-height-base;
+    gap: .5rem;
+}
+
+.dropdown-item-icon {
+    width: $icon-size !important;
+    height: $icon-size !important;
+    margin-right: .5rem;
+    color: var(--#{$prefix}secondary);
+    opacity: $text-secondary-opacity;
+    text-align: center;
+}
+
+.dropdown-item-indicator {
+    margin-right: .5rem;
+    margin-left: -.25rem;
+    height: 1.25rem;
+    display: inline-flex;
+    line-height: 1;
+    vertical-align: bottom;
+    align-items: center;
+}
+
+.dropdown-header {
+    @include subheader;
+    padding-bottom: .25rem;
+    pointer-events: none;
+}
+
+.dropdown-menu-scrollable {
+    height: auto;
+    max-height: $dropdown-scrollable-height;
+    overflow-x: hidden;
+}
+
+.dropdown-menu-column {
+    min-width: $dropdown-min-width;
+
+    .dropdown-item {
+        min-width: 0;
+    }
+}
+
+.dropdown-menu-columns {
+    display: flex;
+    flex: 0 .25rem;
+}
+
+.dropdown-menu-arrow {
+
+    &:before {
+        content: "";
+        position: absolute;
+        top: -.25rem;
+        left: .75rem;
+        display: block;
+        background: inherit;
+        width: 14px;
+        height: 14px;
+        /*rtl:ignore*/
+        transform: rotate(45deg);
+        transform-origin: center;
+        border: 1px solid;
+        border-color: inherit;
+        z-index: -1;
+        clip: rect(0px, 9px, 9px, 0px);
+    }
+
+    &.dropdown-menu-end {
+        &:before {
+            right: .75rem;
+            left: auto;
+        }
+    }
+}
+
+.dropend {
+    > .dropdown-menu {
+        margin-top: subtract(-$dropdown-padding-y, 1px);
+        margin-left: -.25rem;
+    }
+
+    .dropdown-toggle {
+        &:after {
+            margin-left: auto;
+        }
+    }
+}
+
+.dropdown-menu-card {
+    padding: 0;
+    min-width: 20rem;
+
+    > .card {
+        margin: 0;
+        border: 0;
+        box-shadow: none;
+    }
+}
+

package/assets/styles/ui/_empty.scss

@@ -0,0 +1,60 @@
+.empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+    text-align: center;
+
+    @include media-breakpoint-up(md) {
+        padding: 3rem;
+    }
+}
+
+.empty-icon {
+    margin: 0 0 1rem;
+    width: 3rem;
+    height: 3rem;
+    line-height: 1;
+    color: var(--#{$prefix}secondary);
+
+    svg {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.empty-img {
+    margin: 0 0 2rem;
+    line-height: 1;
+}
+
+.empty-header {
+    margin: 0 0 1rem;
+    font-size: 4rem;
+    font-weight: var(--#{$prefix}font-weight-light);
+    line-height: 1;
+    color: var(--#{$prefix}secondary);
+}
+
+.empty-title {
+    font-size: $h2-font-size;
+    line-height: $h2-line-height;
+    font-weight: $headings-font-weight;
+}
+
+.empty-title,
+.empty-subtitle {
+    margin: 0 0 .5rem;
+}
+
+.empty-action {
+    margin-top: 1.5rem;
+}
+
+
+.empty-bordered {
+    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+    border-radius: var(--#{$prefix}border-radius);
+}

package/assets/styles/ui/_flags.scss

@@ -0,0 +1,31 @@
+$countries: (
+        'ad', 'af', 'ae', 'afrun', 'ag', 'ai', 'al', 'am', 'ao', 'aq', 'ar', 'as', 'at', 'au', 'aw', 'ax', 'az', 'ba', 'bb', 'bd', 'be', 'bf', 'bg', 'bh', 'bi', 'bj', 'bl', 'bm', 'bn', 'bo', 'bq-bo', 'bq-sa', 'bq-se', 'br', 'bs', 'bt', 'bv', 'bw', 'by', 'bz', 'ca', 'cc', 'cd', 'cf', 'cg', 'ch', 'ci', 'ck', 'cl', 'cm', 'cn', 'co', 'cr', 'cu', 'cv', 'cw', 'cx', 'cy', 'cz', 'de', 'dj', 'dk', 'dm', 'do', 'dz', 'ec', 'ee', 'eg', 'eh', 'er', 'es', 'et', 'eu', 'fi', 'fj', 'fk', 'fm', 'fo', 'fr', 'ga', 'gb-eng', 'gb-sct', 'gb', 'gb-wls', 'gb-nir', 'gd', 'ge', 'gf', 'gg', 'gh', 'gi', 'gl', 'gm', 'gn', 'gp', 'gq', 'gr', 'gs', 'gt', 'gu', 'gw', 'gy', 'hk', 'hm', 'hn', 'hr', 'ht', 'hu', 'id', 'ie', 'il', 'im', 'in', 'io', 'iq', 'ir', 'is', 'it', 'je', 'jm', 'jo', 'jp', 'ke', 'kg', 'kh', 'ki', 'km', 'kn', 'kp', 'kr', 'kw', 'ky', 'kz', 'la', 'lb', 'lc', 'li', 'lk', 'lr', 'ls', 'lt', 'lu', 'lv', 'ly', 'ma', 'mc', 'md', 'me', 'mf', 'mg', 'mh', 'mk', 'ml', 'mm', 'mn', 'mo', 'mp', 'mq', 'mr', 'ms', 'mt', 'mu', 'mv', 'mw', 'mx', 'my', 'mz', 'na', 'nc', 'ne', 'nf', 'ng', 'ni', 'nl', 'no', 'np', 'nr', 'nu', 'nz', 'om', 'pa', 'pe', 'pf', 'pg', 'ph', 'pk', 'pl', 'pm', 'pn', 'pr', 'ps', 'pt', 'pw', 'py', 'qa', 'rainbow', 're', 'ro', 'rs', 'ru', 'rw', 'sa', 'sb', 'sc', 'sd', 'se', 'sg', 'sh', 'si', 'sj', 'sk', 'sl', 'sm', 'sn', 'so', 'sr', 'ss', 'st', 'sv', 'sx', 'sy', 'sz', 'tc', 'td', 'tf', 'tg', 'th', 'tj', 'tk', 'tl', 'tm', 'tn', 'to', 'tr', 'tt', 'tv', 'tw', 'tz', 'ua', 'ug', 'um', 'unasur', 'us', 'uy', 'uz', 'va', 'vc', 've', 'vg', 'vi', 'vn', 'vu', 'wf', 'ws', 'ye', 'za', 'zm', 'zw'
+);
+
+.flag {
+    position: relative;
+    display: inline-block;
+    height: $avatar-size;
+    aspect-ratio: 1.33333;
+    background: no-repeat center/cover;
+    box-shadow: $flag-box-shadow;
+    border-radius: $flag-border-radius;
+    vertical-align: bottom;
+
+    &.flag-country-np {
+        box-shadow: none;
+        border-radius: 0;
+    }
+}
+
+@each $country in $countries {
+    .flag-country-#{$country} {
+        background-image: url("#{$assets-base}/img/flags/#{$country}.svg");
+    }
+}
+
+@each $flag-size, $size in $flag-sizes {
+    .flag-#{$flag-size} {
+        height: map-get($size, size);
+    }
+}

package/assets/styles/ui/_forms.scss

@@ -0,0 +1,250 @@
+textarea {
+    &[cols] {
+        height: auto;
+    }
+}
+
+/**
+Form label
+ */
+.col-form-label,
+.form-label {
+    display: block;
+    font-weight: var(--#{$prefix}font-weight-medium);
+
+    &.required {
+        &:after {
+            content: "*";
+            margin-left: .25rem;
+            color: $red;
+        }
+    }
+}
+
+.form-label-description {
+    float: right;
+    font-weight: var(--#{$prefix}font-weight-normal);
+    color: $form-secondary-color;
+}
+
+/**
+Form hint
+ */
+.form-hint {
+    display: block;
+    color: $form-secondary-color;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    & + .form-control {
+        margin-top: .25rem;
+    }
+
+    .form-label + & {
+        margin-top: -.25rem;
+    }
+
+    .input-group + &,
+    .form-control + &,
+    .form-select + & {
+        margin-top: .5rem;
+        color: $form-secondary-color;
+    }
+}
+
+/**
+Form select
+ */
+.form-select {
+    &:-moz-focusring {
+        color: var(--#{$prefix}body-color);
+    }
+}
+
+/**
+Form control
+ */
+.form-control {
+    &:-webkit-autofill {
+        box-shadow: 0 0 0 1000px var(--#{$prefix}bg-surface-secondary) inset;
+        color: var(--#{$prefix}body-color);
+        -webkit-text-fill-color: var(--#{$prefix}body-color);
+    }
+
+    &:disabled,
+    &.disabled {
+        color: $form-secondary-color;
+        user-select: none;
+    }
+
+    &[size] {
+        width: auto;
+    }
+}
+
+.form-control-light {
+    background-color: var(--#{$prefix}gray-100);
+    border-color: transparent;
+}
+
+.form-control-dark {
+    background-color: rgba($black, .1);
+    color: $white;
+    border-color: transparent;
+
+    &:focus {
+        background-color: rgba($black, .1);
+        box-shadow: none;
+        border-color: rgba($white, .24);
+    }
+
+    &::placeholder {
+        color: rgba($white, .6);
+    }
+}
+
+.form-control-rounded {
+    border-radius: 10rem;
+}
+
+.form-control-flush {
+    padding: 0;
+    background: none !important;
+    border-color: transparent !important;
+    resize: none;
+    box-shadow: none !important;
+    line-height: inherit;
+}
+
+.form-footer {
+    margin-top: 2rem;
+}
+
+.form-fieldset {
+    padding: 1rem;
+    margin-bottom: 1rem;
+    background: var(--#{$prefix}bg-surface-secondary);
+    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+    border-radius: var(--#{$prefix}border-radius);
+}
+
+fieldset:empty {
+    display: none;
+}
+
+/**
+Form help
+ */
+.form-help {
+    display: inline-flex;
+    font-weight: var(--#{$prefix}font-weight-bold);
+    align-items: center;
+    justify-content: center;
+    width: 1.125rem;
+    height: 1.125rem;
+    font-size: .75rem;
+    color: $form-secondary-color;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    background: var(--#{$prefix}gray-100);
+    border-radius: $border-radius-pill;
+    @include transition(background-color $transition-time, color $transition-time);
+
+    &:hover,
+    &[aria-describedby] {
+        color: $white;
+        background: var(--#{$prefix}primary);
+    }
+}
+
+
+/**
+Input group
+ */
+.input-group {
+    box-shadow: $input-box-shadow;
+    border-radius: $input-border-radius;
+
+    .form-control,
+    .btn {
+        box-shadow: none;
+    }
+}
+
+.input-group-link {
+    font-size: $h5-font-size;
+}
+
+.input-group-flat {
+    &:focus-within {
+        box-shadow: $input-focus-box-shadow;
+        border-radius: $input-border-radius;
+
+        .form-control,
+        .input-group-text {
+            border-color: $input-focus-border-color !important;
+        }
+    }
+
+    .form-control {
+        &:focus {
+            border-color: $input-border-color;
+            box-shadow: none;
+        }
+
+        &:not(:last-child) {
+            border-right: 0;
+        }
+
+        &:not(:first-child) {
+            border-left: 0;
+        }
+    }
+
+    .input-group-text {
+        background: $form-check-input-bg;
+        @include transition($input-transition);
+
+        &:first-child {
+            padding-right: 0;
+        }
+
+        &:last-child {
+            padding-left: 0;
+        }
+    }
+}
+
+
+/**
+Upload files
+ */
+.form-file-button {
+    margin-left: 0;
+    border-left: 0;
+}
+
+/**
+Floating inputs
+ */
+// Fix for the bug in twbs/bootstrap v5.3.3. Issue #39080. Should be fixed in v5.3.4
+label[for="floating-input"] {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/**
+Forms on mobile devices 
+  */
+.form-control,
+.form-select {
+    @include media-breakpoint-down(sm) {
+        font-size: 1rem;
+    }
+}