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

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,117 @@
+.dropdown-menu {
+    user-select: none;
+
+    &.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;
+}
+
+.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;
+
+    > .card {
+        margin: 0;
+        border: 0;
+        box-shadow: none;
+    }
+}
+

package/assets/styles/ui/_empty.scss

@@ -0,0 +1,65 @@
+.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;
+
+    img {
+        height: 8rem;
+        width: auto;
+    }
+}
+
+.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', 'ams', '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', '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-sk', '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,224 @@
+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: var(--#{$prefix}secondary);
+}
+
+/**
+Form hint
+ */
+.form-hint {
+    display: block;
+    color: var(--#{$prefix}secondary);
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    & + .form-control {
+        margin-top: .25rem;
+    }
+
+    .form-label + & {
+        margin-top: -.25rem;
+    }
+
+    .input-group + &,
+    .form-control + &,
+    .form-select + & {
+        margin-top: .5rem;
+    }
+}
+
+/**
+Form single
+ */
+.form-select {
+    &:-moz-focusring {
+        color: var(--#{$prefix}body-color);
+    }
+}
+
+/**
+Form control
+ */
+.form-control {
+    &:-webkit-autofill {
+        box-shadow: 0 0 0 1000px var(--#{$prefix}body-bg) inset;
+        color: var(--#{$prefix}body-color);
+        -webkit-text-fill-color: var(--#{$prefix}body-color);
+    }
+
+    &:disabled,
+    &.disabled {
+        color: var(--#{$prefix}secondary);
+        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}body-bg);
+    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+    border-radius: var(--#{$prefix}border-radius);
+}
+
+/**
+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: var(--#{$prefix}secondary);
+    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;
+}

package/assets/styles/ui/_grid.scss

@@ -0,0 +1,115 @@
+.row > * {
+    min-width: 0;
+}
+
+.col-separator {
+    border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+}
+
+.container {
+    @each $variation, $size in $container-variations {
+        &-#{$variation} {
+            @include make-container();
+            max-width: $size;
+        }
+    }
+}
+
+@each $name, $value in (0: 0, sm: .375rem, md: 1.5rem, lg: 3rem) {
+    .row-#{$name} {
+        margin-right: (-$value);
+        margin-left: -($value);
+
+        > .col,
+        > [class*="col-"] {
+            padding-right: $value;
+            padding-left: $value;
+        }
+
+        .card {
+            margin-bottom: 2 * $value;
+        }
+    }
+}
+
+.row-deck {
+    > .col,
+    > [class*="col-"] {
+        display: flex;
+        align-items: stretch;
+
+        .card {
+            flex: 1 1 auto;
+        }
+    }
+}
+
+.row-cards {
+    --#{$prefix}gutter-x: #{$cards-grid-gap};
+    --#{$prefix}gutter-y: #{$cards-grid-gap};
+    min-width: 0;
+
+    .row-cards {
+        flex: 1;
+    }
+}
+
+@each $name, $size in map-merge((null: $spacer), $spacers) {
+    $name-prefixed: if($name == null, null, '-#{$name}');
+
+    .space-y#{$name-prefixed} {
+        display: flex;
+        flex-direction: column;
+        gap: $size;
+    }
+
+    .space-x#{$name-prefixed} {
+        display: flex;
+        gap: $size;
+    }
+}
+
+@each $name, $size in map-merge((null: $spacer), $spacers) {
+    $name-prefixed: if($name == null, null, '-#{$name}');
+
+    .divide-y#{$name-prefixed} {
+        > :not(template) ~ :not(template) {
+            border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent) !important;
+        }
+
+        > :not(template):not(:first-child) {
+            padding-top: $size !important;
+        }
+
+        > :not(template):not(:last-child) {
+            padding-bottom: $size !important;
+        }
+    }
+
+    .divide-x#{$name-prefixed} {
+        > :not(template) ~ :not(template) {
+            border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent) !important;
+        }
+
+        > :not(template):not(:first-child) {
+            padding-left: $size !important;
+        }
+
+        > :not(template):not(:last-child) {
+            padding-right: $size !important;
+        }
+    }
+}
+
+.divide-y-fill {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    > :not(template) {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+    }
+}

package/assets/styles/ui/_icons.scss

@@ -0,0 +1,72 @@
+//
+// Icon component
+//
+.icon {
+    --#{$prefix}icon-size: #{$font-size-base * $line-height-base};
+    width: var(--#{$prefix}icon-size);
+    height: var(--#{$prefix}icon-size);
+    font-size: var(--#{$prefix}icon-size);
+    vertical-align: bottom;
+
+    @if $icon-stroke-width {
+        stroke-width: $icon-stroke-width;
+    }
+
+    &:hover {
+        text-decoration: none;
+    }
+}
+
+//
+// Inline icon
+//
+.icon-inline {
+    --#{$prefix}icon-size: 1rem;
+    vertical-align: -.2rem;
+}
+
+//
+// Filled icon
+//
+.icon-filled {
+    fill: currentColor;
+}
+
+//
+// Icon size
+//
+.icon-sm {
+    --#{$prefix}icon-size: 1rem;
+    stroke-width: 1;
+}
+
+.icon-md {
+    --#{$prefix}icon-size: 2.5rem;
+    stroke-width: 1;
+}
+
+.icon-lg {
+    --#{$prefix}icon-size: 3.5rem;
+    stroke-width: 1;
+}
+
+//
+// Icons animation
+//
+.icon-pulse {
+    transition: all .15s ease 0s;
+    animation: pulse 2s ease infinite;
+    animation-fill-mode: both
+}
+
+.icon-tada {
+    transition: all .15s ease 0s;
+    animation: tada 3s ease infinite;
+    animation-fill-mode: both
+}
+
+.icon-rotate {
+    transition: all .15s ease 0s;
+    animation: rotate-360 3s linear infinite;
+    animation-fill-mode: both
+}

package/assets/styles/ui/_images.scss

@@ -0,0 +1,15 @@
+.img-responsive {
+    --#{$prefix}img-responsive-ratio: #{percentage(.75)};
+    background: no-repeat center/cover;
+    padding-top: var(--#{$prefix}img-responsive-ratio);
+}
+
+.img-responsive-grid {
+    padding-top: calc(var(--#{$prefix}img-responsive-ratio) - calc(var(--#{$prefix}gutter-y) / 2));
+}
+
+@each $key, $ratio in $aspect-ratios {
+    .img-responsive-#{$key} {
+        --#{$prefix}img-responsive-ratio: #{$ratio};
+    }
+}

package/assets/styles/ui/_legend.scss

@@ -0,0 +1,12 @@
+/**
+Legend
+ */
+.legend {
+    --#{$prefix}legend-size: #{$legend-size};
+    display: inline-block;
+    background: $legend-bg;
+    width: var(--#{$prefix}legend-size);
+    height: var(--#{$prefix}legend-size);
+    border-radius: $legend-border-radius;
+    border: 1px solid var(--#{$prefix}border-color-translucent);
+}