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

package/assets/styles/layout/_page.scss

@@ -0,0 +1,169 @@
+.page {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    min-height: 100%;
+}
+
+.page-center {
+    .container {
+        margin-top: auto;
+        margin-bottom: auto;
+    }
+}
+
+.page-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    @media print {
+        margin: 0 !important;
+    }
+}
+
+.page-wrapper-full {
+    .page-body:first-child {
+        margin: 0;
+        border-top: 0;
+    }
+}
+
+// Content body
+.page-body {
+    margin-top: var(--#{$prefix}page-padding-y);
+    margin-bottom: var(--#{$prefix}page-padding-y);
+}
+
+.page-body-card {
+    background: var(--#{$prefix}bg-surface);
+    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $card-border-color;
+    padding: var(--#{$prefix}page-padding) 0;
+    margin-bottom: 0;
+    flex: 1;
+
+    .page-body ~ & {
+        margin-top: 0;
+    }
+}
+
+.page-cover {
+    background: no-repeat center/cover;
+    min-height: 9rem;
+
+    @include media-breakpoint-up(md) {
+        min-height: 12rem;
+    }
+
+    @include media-breakpoint-up(lg) {
+        min-height: 15rem;
+    }
+}
+
+.page-cover-overlay {
+    position: relative;
+
+    &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-image: $overlay-gradient;
+    }
+}
+
+
+.page-header {
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 2.25rem;
+    flex-direction: column;
+    justify-content: center;
+
+    .page-wrapper & {
+        margin: var(--#{$prefix}page-padding-y) 0 0;
+    }
+}
+
+.page-header-border {
+    border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+    padding: var(--#{$prefix}page-padding-y) 0;
+    margin: 0 !important;
+    background-color: var(--#{$prefix}bg-surface);
+}
+
+.page-pretitle {
+    @include subheader;
+}
+
+.page-title {
+    margin: 0;
+    font-size: $page-title-font-size;
+    line-height: $page-title-line-height;
+    font-weight: $page-title-font-weight;
+    color: inherit;
+    display: flex;
+    align-items: center;
+
+    svg {
+        width: 1.5rem;
+        height: 1.5rem;
+        margin-right: .25rem;
+    }
+}
+
+.page-title-lg {
+    font-size: $h1-font-size;
+    line-height: $h1-line-height;
+}
+
+.page-subtitle {
+    margin-top: .25rem;
+    color: var(--#{$prefix}secondary);
+}
+
+//
+// Page cover
+//
+.page-cover {
+    --#{$prefix}page-cover-blur: 20px;
+    --#{$prefix}page-cover-padding: 1rem;
+    min-height: 6rem;
+    padding: var(--#{$prefix}page-cover-padding) 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.page-cover-img {
+    position: absolute;
+    top: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+    left: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+    right: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+    bottom: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+    pointer-events: none;
+    filter: blur(var(--#{$prefix}page-cover-blur));
+    object-fit: cover;
+    background-size: cover;
+    background-position: center;
+    z-index: -1;
+}
+
+//
+// Page tabs
+//
+.page-tabs {
+    margin-top: .5rem;
+    position: relative;
+}
+
+.page-header-tabs {
+    .nav-bordered {
+        border: 0;
+    }
+
+    + .page-body-card {
+        margin-top: 0;
+    }
+}

package/assets/styles/layout/_root.scss

@@ -0,0 +1,72 @@
+:root,
+:host {
+    font-size: 16px;
+    height: 100%;
+}
+
+:root,
+:host,
+[data-bs-theme="light"] {
+    @each $name, $color in map-merge($theme-colors, $gray-colors) {
+        --#{$prefix}#{$name}: #{$color};
+        --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
+        --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
+        --#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
+        --#{$prefix}#{$name}-lt: #{theme-color-lighter($color)};
+        --#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
+    }
+
+    @each $name, $value in $spacers {
+        --#{$prefix}spacer-#{$name}: #{$value};
+    }
+    --#{$prefix}spacer: #{$spacer};
+
+    --#{$prefix}bg-surface: #{$bg-surface};
+    --#{$prefix}bg-surface-secondary: #{$bg-surface-secondary};
+    --#{$prefix}bg-surface-tertiary: #{$bg-surface-tertiary};
+    --#{$prefix}bg-surface-dark: #{$bg-surface-dark};
+    --#{$prefix}bg-forms: var(--#{$prefix}bg-surface);
+
+    --#{$prefix}border-color: #{$border-color};
+    --#{$prefix}border-color-translucent: #{$border-color-translucent};
+    --#{$prefix}border-dark-color: #{$border-dark-color};
+    --#{$prefix}border-dark-color-translucent: #{$border-dark-color-translucent};
+    --#{$prefix}border-active-color: #{$border-active-color};
+
+    --#{$prefix}icon-color: #{$icon-color};
+
+    --#{$prefix}active-bg: #{$active-bg};
+
+    --#{$prefix}disabled-bg: #{$disabled-bg};
+    --#{$prefix}disabled-color: #{$disabled-color};
+
+    --#{$prefix}code-color: #{$code-color};
+    --#{$prefix}code-bg: #{$code-bg};
+
+    --#{$prefix}dark-mode-border-color: #{$border-color-dark};
+    --#{$prefix}dark-mode-border-color-translucent: #{$border-color-translucent-dark};
+    --#{$prefix}dark-mode-border-color-active: #{$border-color-active-dark};
+    --#{$prefix}dark-mode-border-dark-color: #{$border-dark-color-dark};
+
+    --#{$prefix}page-padding: #{$page-padding};
+    --#{$prefix}page-padding-y: #{$page-padding-y};
+    @include media-breakpoint-down($cards-grid-breakpoint) {
+        --#{$prefix}page-padding: #{$page-padding-sm};
+    }
+
+    @each $name, $value in $font-weights {
+        --#{$prefix}font-weight-#{$name}: #{$value};
+    }
+
+    @each $name, $value in $font-sizes {
+        --#{$prefix}font-size-h#{$name}: #{$value};
+    }
+
+    @each $name, $value in $line-heights {
+        --#{$prefix}line-height-#{$name}: #{$value};
+    }
+
+    @each $name, $value in $box-shadows {
+        --#{$prefix}#{$name}: #{$value};
+    }
+}

package/assets/styles/mixins/_functions.scss

@@ -0,0 +1,43 @@
+@function theme-color-lighter($color, $background: #fff) {
+    @return mix($color, $background, 10%);
+}
+
+@function theme-color-darker($color) {
+    @return shade-color($color, 10%);
+}
+
+@function str-replace($string, $search, $replace: "") {
+    $index: str-index($string, $search);
+
+    @if $index {
+        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    }
+
+    @return $string;
+}
+
+@mixin media-breakpoint-down-than($name, $breakpoints: $grid-breakpoints) {
+    $prev: breakpoint-prev($name);
+
+    @if $prev == null {
+        @content;
+    } @else {
+        $max: breakpoint-max($prev, $breakpoints);
+
+        @if $max {
+            @media (max-width: $max) {
+                @content;
+            }
+        } @else {
+            @content;
+        }
+    }
+}
+
+@function breakpoint-prev($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+    $n: index($breakpoint-names, $name);
+    @if not $n {
+        @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
+    }
+    @return if($n > 1, nth($breakpoint-names, $n - 1), null);
+}

package/assets/styles/mixins/_mixins.scss

@@ -0,0 +1,68 @@
+@mixin subheader($include-color: true, $include-line-height: true) {
+    font-size: $h6-font-size;
+    font-weight: var(--#{$prefix}font-weight-bold);
+    text-transform: uppercase;
+    letter-spacing: .04em;
+
+    @if $include-line-height {
+        line-height: $h6-line-height;
+    }
+
+    @if ($include-color) {
+        color: var(--#{$prefix}secondary);
+    }
+}
+
+@mixin scrollbar($color: var(--#{$prefix}body-color-rgb)) {
+    #{if(&, "&", "*")} {
+        scrollbar-color: rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .16) transparent;
+    }
+
+    #{if(&, "&", "*")}::-webkit-scrollbar {
+        width: 1rem;
+        height: 1rem;
+        @include transition(background $transition-time);
+    }
+
+    #{if(&, "&", "*")}::-webkit-scrollbar-thumb {
+        border-radius: 1rem;
+        border: 5px solid transparent;
+        box-shadow: inset 0 0 0 1rem rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .16);
+    }
+
+    #{if(&, "&", "*")}::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    #{if(&, "&", "*")}:hover::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 0 1rem rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .32);
+    }
+
+    #{if(&, "&", "*")}::-webkit-scrollbar-corner {
+        background: transparent;
+    }
+}
+
+
+@mixin autodark-image {
+    filter: brightness(0) invert(1);
+}
+
+//
+// Elements list
+//
+@mixin elements-list($gap: .5rem) {
+    --#{$prefix}list-gap: #{$gap};
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--#{$prefix}list-gap);
+}
+
+@mixin focus-ring($show-border: false) {
+    outline: 0;
+    box-shadow: $focus-ring-box-shadow;
+
+    @if ($show-border) {
+        border-color: $focus-ring-border-color;
+    }
+}

package/assets/styles/ui/_accordion.scss

@@ -0,0 +1,24 @@
+.accordion {
+    --#{$prefix}accordion-color: #{$accordion-color};
+}
+
+.accordion-button {
+    &:focus:not(:focus-visible) {
+        outline: none;
+        box-shadow: none;
+    }
+
+    &:after {
+        opacity: $text-secondary-opacity;
+    }
+
+    &:not(.collapsed) {
+        font-weight: var(--#{$prefix}font-weight-bold);
+        border-bottom-color: transparent;
+        box-shadow: none;
+
+        &:after {
+            opacity: 1;
+        }
+    }
+}

package/assets/styles/ui/_alerts.scss

@@ -0,0 +1,59 @@
+.alert {
+    --#{$prefix}alert-color: #{var(--#{$prefix}secondary)};
+    --upd-alert-bg: #{var(--#{$prefix}surface)};
+    border: $alert-border-width var(--#{$prefix}border-style) $alert-border-color;
+    border-left: .25rem var(--#{$prefix}border-style) var(--#{$prefix}alert-color);
+    box-shadow: $alert-shadow;
+
+    > :last-child {
+        margin-bottom: 0;
+    }
+}
+
+.alert-important {
+    border-color: transparent;
+    background: var(--#{$prefix}alert-color);
+    color: #fff;
+
+    .alert-icon,
+    .alert-link,
+    .alert-title {
+        color: inherit;
+    }
+
+    .alert-link:hover {
+        color: inherit;
+    }
+
+    .btn-close {
+        filter: var(--#{$prefix}btn-close-white-filter);
+    }
+}
+
+.alert-link, {
+    &,
+    &:hover {
+        color: var(--#{$prefix}alert-color);
+    }
+}
+
+@each $name, $color in $theme-colors {
+    .alert-#{$name} {
+        --#{$prefix}alert-color: var(--#{$prefix}#{$name});
+    }
+}
+
+.alert-icon {
+    color: var(--#{$prefix}alert-color);
+    width: 1.5rem !important;
+    height: 1.5rem !important;
+    margin: -.125rem $alert-padding-x -.125rem 0;
+}
+
+.alert-title {
+    font-size: $h4-font-size;
+    line-height: $h4-line-height;
+    font-weight: var(--#{$prefix}font-weight-bold);
+    margin-bottom: .25rem;
+    color: var(--#{$prefix}alert-color);
+}

package/assets/styles/ui/_avatars.scss

@@ -0,0 +1,118 @@
+.avatar {
+    --#{$prefix}avatar-size: #{$avatar-size};
+    --#{$prefix}avatar-status-size: #{$avatar-status-size};
+    --#{$prefix}avatar-bg: #{$avatar-bg};
+    --#{$prefix}avatar-box-shadow: #{$avatar-box-shadow};
+    --#{$prefix}avatar-font-size: #{$avatar-font-size};
+    --#{$prefix}avatar-icon-size: #{$avatar-icon-size};
+    position: relative;
+    width: var(--#{$prefix}avatar-size);
+    height: var(--#{$prefix}avatar-size);
+    font-size: var(--#{$prefix}avatar-font-size);
+    font-weight: var(--#{$prefix}font-weight-medium);
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--#{$prefix}secondary);
+    text-align: center;
+    text-transform: uppercase;
+    vertical-align: bottom;
+    user-select: none;
+    background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
+    border-radius: $avatar-border-radius;
+    box-shadow: var(--#{$prefix}avatar-box-shadow);
+
+    .icon {
+        width: var(--#{$prefix}avatar-icon-size);
+        height: var(--#{$prefix}avatar-icon-size);
+    }
+
+    .badge {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        border-radius: $border-radius-pill;
+        box-shadow: 0 0 0 calc(var(--#{$prefix}avatar-status-size) / 4) $card-bg;
+    }
+
+    @at-root a#{&} {
+        cursor: pointer;
+    }
+}
+
+.avatar-rounded {
+    border-radius: $border-radius-pill;
+}
+
+@each $avatar-size, $size in $avatar-sizes {
+    .avatar-#{$avatar-size} {
+        --#{$prefix}avatar-size: #{map-get($size, size)};
+        --#{$prefix}avatar-status-size: #{map-get($size, status-size)};
+        --#{$prefix}avatar-font-size: #{map-get($size, font-size)};
+        --#{$prefix}avatar-icon-size: #{map-get($size, icon-size)};
+    }
+
+    .avatar-#{$avatar-size} .badge:empty {
+        width: map-get($size, status-size);
+        height: map-get($size, status-size);
+    }
+}
+
+//
+// Avatar list
+//
+.avatar-list {
+    @include elements-list;
+
+    a.avatar {
+        &:hover {
+            z-index: 1;
+        }
+    }
+}
+
+.avatar-list-stacked {
+    display: block;
+    --#{$prefix}list-gap: 0;
+
+    .avatar {
+        margin-right: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
+        box-shadow: var(--#{$prefix}avatar-box-shadow), 0 0 0 2px var(--#{$prefix}card-cap-bg, var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)));
+    }
+}
+
+//
+// Avatar upload
+//
+.avatar-upload {
+    width: 4rem;
+    height: 4rem;
+    border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
+    background: $form-check-input-bg;
+    flex-direction: column;
+    @include transition(color $transition-time, background-color $transition-time);
+
+    svg {
+        width: 1.5rem;
+        height: 1.5rem;
+        stroke-width: 1;
+    }
+
+    &:hover {
+        border-color: var(--#{$prefix}primary);
+        color: var(--#{$prefix}primary);
+        text-decoration: none;
+    }
+}
+
+.avatar-upload-text {
+    font-size: $h6-font-size;
+    line-height: 1;
+    margin-top: .25rem;
+}
+
+.avatar-cover {
+    margin-top: calc(-.5 * var(--#{$prefix}avatar-size));
+    box-shadow: 0 0 0 .25rem var(--#{$prefix}card-bg, var(--#{$prefix}body-bg));
+}

package/assets/styles/ui/_badges.scss

@@ -0,0 +1,79 @@
+.badge {
+    justify-content: center;
+    align-items: center;
+    background: $badge-bg-color;
+    overflow: hidden;
+    user-select: none;
+    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
+    min-width: ($badge-padding-y * 2 ) + (divide($badge-font-size, 100%) * 1em);
+    font-weight: $headings-font-weight;
+    letter-spacing: .04em;
+    vertical-align: bottom;
+
+    @at-root a#{&} {
+        color: $card-bg;
+    }
+
+    .avatar {
+        box-sizing: content-box;
+        width: 1.25rem;
+        height: 1.25rem;
+        margin: 0 .5rem 0 -.5rem;
+    }
+
+    .icon {
+        width: 1em;
+        height: 1em;
+        font-size: 1rem;
+        stroke-width: 2;
+    }
+}
+
+.badge:empty,
+.badge-empty {
+    display: inline-block;
+    width: $badge-empty-size;
+    height: $badge-empty-size;
+    min-width: 0;
+    min-height: auto;
+    padding: 0;
+    border-radius: $border-radius-pill;
+    vertical-align: baseline;
+}
+
+//
+// Outline badge
+//
+.badge-outline {
+    background-color: transparent;
+    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) currentColor;
+}
+
+//
+// Pill badge
+//
+.badge-pill {
+    border-radius: $border-radius-pill;
+}
+
+//
+// Badges list
+//
+.badges-list {
+    @include elements-list;
+}
+
+//
+// Notification badge
+//
+.badge-notification {
+    position: absolute !important;
+    top: 0 !important;
+    right: 0 !important;
+    transform: translate(50%, -50%);
+    z-index: 1;
+}
+
+.badge-blink {
+    animation: blink 2s infinite;
+}

package/assets/styles/ui/_breadcrumbs.scss

@@ -0,0 +1,50 @@
+.breadcrumb {
+    --#{$prefix}breadcrumb-item-active-font-weight: #{$breadcrumb-active-font-weight};
+    --#{$prefix}breadcrumb-item-disabled-color: #{$breadcrumb-disabled-color};
+    --#{$prefix}breadcrumb-link-color: #{$breadcrumb-link-color};
+    padding: 0;
+    margin: 0;
+    background: transparent;
+
+    a {
+        color: var(--#{$prefix}breadcrumb-link-color);
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+
+.breadcrumb-muted {
+    --#{$prefix}breadcrumb-link-color: var(--#{$prefix}secondary);
+}
+
+.breadcrumb-item {
+    &.active {
+        font-weight: var(--#{$prefix}breadcrumb-item-active-font-weight);
+
+        a {
+            color: inherit;
+            pointer-events: none;
+        }
+    }
+
+    &.disabled {
+        color: var(--#{$prefix}breadcrumb-item-disabled-color);
+
+        &:before {
+            color: inherit;
+        }
+
+        a {
+            color: inherit;
+            pointer-events: none;
+        }
+    }
+}
+
+@each $name, $symbol in $breadcrumb-variants {
+    .breadcrumb-#{$name} {
+        --#{$prefix}breadcrumb-divider: "#{quote($symbol)}";
+    }
+}

package/assets/styles/ui/_button-group.scss

@@ -0,0 +1,16 @@
+.btn-group,
+.btn-group-vertical {
+    box-shadow: $input-box-shadow;
+
+    > .btn-check:checked + .btn,
+    > .btn:active,
+    > .btn.active {
+        z-index: 5;
+    }
+
+    > .btn-check:focus + .btn,
+    > .btn:hover,
+    > .btn:focus {
+        z-index: 1;
+    }
+}