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

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,19 @@
+.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};
+    }
+}
+
+.img-bg {
+    background: no-repeat center/cover;
+}

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);
+}

package/assets/styles/ui/_lists.scss

@@ -0,0 +1,123 @@
+.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;
+            }
+        }
+    }
+}
+
+/**
+Seprated list
+*/
+.list-separated {
+    display: flex;
+    flex-direction: column;
+    gap: $spacer;
+}
+
+/**
+Inline list
+ */
+.list-inline {
+    margin: 0;
+}
+
+.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,53 @@
+/**
+Markdown
+ */
+.markdown {
+    line-height: $line-height-xl;
+
+    > :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);
+        }
+
+        h2, h3, h4, h5, h6 {
+            margin-top: 2.5rem;
+        }
+    }
+
+    > table {
+        font-size: var(--#{$prefix}body-font-size);
+        @extend .table, .table-bordered, .table-sm;
+    }
+
+    > blockquote {
+        font-size: $h3-font-size;
+        margin: 1.5rem 0;
+        padding: .5rem 1.5rem;
+    }
+
+    > img,
+    > p > img {
+        border-radius: var(--#{$prefix}border-radius);
+        border: 1px solid var(--#{$prefix}border-color);
+    }
+
+    > pre {
+        max-height: 20rem;
+    }
+}

package/assets/styles/ui/_modals.scss

@@ -0,0 +1,67 @@
+.modal-content, .modal-header {
+    > .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,106 @@
+.nav {
+    --#{$prefix}nav-link-hover-bg: #{color-transparent(var(--#{$prefix}nav-link-color), 0.04)};
+}
+
+.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);
+        color: var(--#{$prefix}nav-link-active-color);
+    }
+
+    &.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 calc(-1 * #{$nav-bordered-border-width});
+        border: 0;
+        border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
+    }
+
+    .nav-link.active,
+    .nav-item.show .nav-link {
+        color: $nav-bordered-link-active-color;
+        border-color: $nav-bordered-link-active-border-color;
+    }
+}
+
+.nav-underline {
+    .nav-link {
+        border-radius: 0;
+    }
+}
+
+.nav-link {
+    display: flex;
+    @include transition(color $transition-time, background-color $transition-time);
+    align-items: center;
+
+    &:hover,
+    &:focus {
+        background-color: var(--#{$prefix}nav-link-hover-bg);
+    }
+}
+
+.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) var(--#{$prefix}border-color);
+}
+
+.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;
+}