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

package/assets/styles/fonts/_webfonts.scss

@@ -0,0 +1,15 @@
+@if $font-google {
+    $google-font-url: "https://fonts.googleapis.com/css2?family=" + str-replace($font-google, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
+    @import url($google-font-url);
+}
+
+@if $font-google-monospaced {
+    $google-font-monospaced-url: "https://fonts.googleapis.com/css2?family=" + str-replace($font-google-monospaced, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
+    @import url($google-font-monospaced-url);
+}
+
+@if $font-icons {
+    @each $icon-font in $font-icons {
+        @import url($icon-font);
+    }
+}

package/assets/styles/layout/_animations.scss

@@ -0,0 +1,62 @@
+@keyframes pulse {
+    from {
+        opacity: 1;
+        transform: scale3d(.8, .8, .8)
+    }
+
+    50% {
+        transform: scale3d(1, 1, 1);
+        opacity: 1
+    }
+
+    to {
+        opacity: 1;
+        transform: scale3d(.8, .8, .8)
+    }
+}
+
+@keyframes tada {
+    0% {
+        transform: scale3d(1, 1, 1)
+    }
+
+    10%, 5% {
+        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg)
+    }
+
+    15%, 25%, 35%, 45% {
+        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg)
+    }
+
+    20%, 30%, 40% {
+        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg)
+    }
+
+    50% {
+        transform: scale3d(1, 1, 1)
+    }
+}
+
+@keyframes rotate-360 {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes blink {
+    from {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}

package/assets/styles/layout/_core.scss

@@ -0,0 +1,61 @@
+// stylelint-disable property-no-vendor-prefix
+body {
+    letter-spacing: $body-letter-spacing;
+    touch-action: manipulation;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "liga" 0;
+    position: relative;
+    min-height: 100%;
+    height: 100%;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    @media print {
+        background: transparent;
+    }
+}
+
+@include scrollbar;
+
+//
+// Fluid container
+//
+.layout-fluid {
+    .container,
+    [class^="container-"],
+    [class*=" container-"] {
+        max-width: 100%;
+    }
+}
+
+//
+// Boxed container
+//
+.layout-boxed {
+    --#{$prefix}theme-boxed-border-radius: 0;
+    --#{$prefix}theme-boxed-width: #{map-get($container-max-widths, xxl)};
+
+    @include media-breakpoint-up(md) {
+        background: $dark linear-gradient(to right, rgba(#fff, .1), transparent) fixed;
+        padding: 1rem;
+        --#{$prefix}theme-boxed-border-radius: #{$border-radius};
+    }
+
+    .page {
+        margin: 0 auto;
+        max-width: var(--#{$prefix}theme-boxed-width);
+        border-radius: var(--#{$prefix}theme-boxed-border-radius);
+        color: var(--#{$prefix}body-color);
+
+        @include media-breakpoint-up(md) {
+            border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+            background: var(--#{$prefix}body-bg);
+        }
+
+        > .navbar:first-child {
+            border-top-left-radius: var(--#{$prefix}theme-boxed-border-radius);
+            border-top-right-radius: var(--#{$prefix}theme-boxed-border-radius);
+        }
+    }
+}

package/assets/styles/layout/_dark.scss

@@ -0,0 +1,72 @@
+// stylelint-disable declaration-no-important
+
+body {
+    &:not(.theme-dark):not([data-bs-theme=dark]) {
+        .hide-theme-light {
+            display: none !important;
+        }
+    }
+
+    &.theme-dark,
+    &[data-bs-theme=dark] {
+        .hide-theme-dark {
+            display: none !important;
+        }
+    }
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark, true) {
+        --#{$prefix}body-color: #{$body-color-dark};
+        --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+        --#{$prefix}muted: #{$text-secondary-dark};
+
+        --#{$prefix}body-bg: #{$darken-dark};
+        --#{$prefix}body-bg-rgb: #{to-rgb($darken-dark)};
+        --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
+        --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+
+        --#{$prefix}bg-forms: #{$darken-dark};
+        --#{$prefix}bg-surface: #{$dark};
+        --#{$prefix}bg-surface-dark: #{$darken-dark};
+        --#{$prefix}bg-surface-secondary: #{$lighten-dark};
+        --#{$prefix}bg-surface-tertiary: #{$darken-dark};
+
+        --#{$prefix}link-color: #{lighten($primary, 8%)};
+        --#{$prefix}link-hover-color: #ffdd00; // #{$primary};
+
+        --#{$prefix}active-bg: #{$lighten-dark};
+        --#{$prefix}disabled-color: var(--#{$prefix}gray-700);
+
+        --#{$prefix}border-color: var(--#{$prefix}dark-mode-border-color);
+        --#{$prefix}border-color-translucent: var(
+                --#{$prefix}dark-mode-border-color-translucent
+        );
+        --#{$prefix}border-dark-color: var(--#{$prefix}dark-mode-border-dark-color);
+        --#{$prefix}border-color-active: var(
+                --#{$prefix}dark-mode-border-color-active
+        );
+
+        --#{$prefix}btn-color: #{$darken-dark};
+
+        --#{$prefix}code-color: var(--#{$prefix}body-color);
+        --#{$prefix}code-bg: #{$border-dark-color-dark};
+
+        @each $color, $value in $theme-colors {
+            --#{$prefix}#{$color}-lt: #{theme-color-lighter($value, $dark)};
+            --#{$prefix}#{$color}-lt-rgb: #{to-rgb(
+          theme-color-lighter($value, $dark)
+        )};
+        }
+
+        .navbar-brand-autodark {
+            .navbar-brand-image {
+                @include autodark-image;
+            }
+        }
+    }
+
+    body[data-bs-theme=dark] [data-bs-theme=light] {
+        @extend [data-bs-theme=dark];
+    }
+}

package/assets/styles/layout/_footer.scss

@@ -0,0 +1,12 @@
+.footer {
+    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $footer-border-color;
+    background-color: $footer-bg;
+    padding: $footer-padding-y 0;
+    color: $footer-color;
+    margin-top: auto;
+}
+
+.footer-transparent {
+    background-color: transparent;
+    border-top: 0;
+}

package/assets/styles/layout/_navbar.scss

@@ -0,0 +1,380 @@
+@mixin navbar-vertical-nav {
+    .navbar-collapse {
+        flex-direction: column;
+
+        [class^="container"] {
+            flex-direction: column;
+            align-items: stretch;
+            padding: 0;
+        }
+
+        .navbar-nav {
+            margin-left: 0;
+            margin-right: 0;
+
+            .nav-link {
+                padding: .5rem calc(#{$container-padding-x} / 2);
+                justify-content: flex-start;
+            }
+        }
+
+        .dropdown-menu-columns {
+            flex-direction: column;
+        }
+
+        .dropdown-menu {
+            padding: 0;
+            background: transparent;
+            position: static;
+            color: inherit;
+            box-shadow: none;
+            border: none;
+            min-width: 0;
+            margin: 0;
+
+            .dropdown-item {
+                min-width: 0;
+                display: flex;
+                width: auto;
+                padding-left: add(calc(#{$container-padding-x} / 2), 1.75rem);
+                color: inherit;
+
+                &.active,
+                &:active {
+                    background: var(--#{$prefix}navbar-active-bg);
+                }
+            }
+
+            .dropdown-menu .dropdown-item {
+                padding-left: add(calc(#{$container-padding-x} / 2), 3.25rem);
+            }
+
+            .dropdown-menu .dropdown-menu .dropdown-item {
+                padding-left: add(calc(#{$container-padding-x} / 2), 4.75rem);
+            }
+        }
+
+        .dropdown-toggle:after {
+            margin-left: auto;
+        }
+
+        .nav-item.active:after {
+            border-bottom-width: 0;
+            border-left-width: 3px;
+            right: auto;
+            top: 0;
+            bottom: 0;
+        }
+    }
+}
+
+/**
+Navbar
+ */
+.navbar {
+    --#{$prefix}navbar-bg: var(--#{$prefix}bg-surface);
+    --#{$prefix}navbar-border-width: #{$navbar-border-width};
+    --#{$prefix}navbar-active-border-color: #{$navbar-active-border-color};
+    --#{$prefix}navbar-active-bg: #{$navbar-light-active-bg};
+    --#{$prefix}navbar-color: var(--#{$prefix}body-color);
+    --#{$prefix}navbar-border-color: #{$navbar-border-color};
+    align-items: stretch;
+    min-height: $navbar-height;
+    box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 var(--#{$prefix}navbar-border-color);
+    background: var(--#{$prefix}navbar-bg);
+    color: var(--#{$prefix}navbar-color);
+
+    .navbar-collapse & {
+        flex-grow: 1;
+    }
+
+    &.collapsing {
+        min-height: 0;
+    }
+
+    .dropdown-menu {
+        position: absolute;
+        z-index: $zindex-fixed;
+    }
+
+    .navbar-nav {
+        min-height: subtract($navbar-height, 2 * $navbar-padding-y);
+
+        .nav-link {
+            position: relative;
+            min-width: 2rem;
+            min-height: 2rem;
+            justify-content: center;
+            border-radius: var(--#{$prefix}border-radius);
+
+            .badge {
+                position: absolute;
+                top: .375rem;
+                right: .375rem;
+                transform: translate(50%, -50%);
+            }
+        }
+    }
+}
+
+.navbar-nav {
+    margin: 0;
+    padding: 0;
+}
+
+.navbar-expand {
+    @each $breakpoint in map-keys($grid-breakpoints) {
+        $next: breakpoint-next($breakpoint, $grid-breakpoints);
+        $infix: breakpoint-infix($next, $grid-breakpoints);
+
+        &#{$infix} {
+            @include media-breakpoint-down(breakpoint-next($breakpoint)) {
+                @include navbar-vertical-nav;
+            }
+
+            @include media-breakpoint-up($next) {
+                .navbar-collapse {
+                    width: auto;
+                    flex: 1 1 auto;
+                }
+
+                .nav-item.active {
+                    position: relative;
+
+                    &:after {
+                        content: "";
+                        position: absolute;
+                        left: 0;
+                        right: 0;
+                        bottom: -.25rem;
+                        border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
+                        border-bottom-width: 2px;
+                    }
+                }
+
+                &.navbar-vertical {
+                    box-shadow: inset calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
+
+                    &.navbar-right {
+                        box-shadow: inset calc(1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
+                    }
+                }
+
+                &.navbar-vertical {
+                    ~ .navbar,
+                    ~ .page-wrapper {
+                        margin-left: $sidebar-width;
+                    }
+                }
+
+                &.navbar-vertical.navbar-right {
+                    ~ .navbar,
+                    ~ .page-wrapper {
+                        margin-left: 0;
+                        margin-right: $sidebar-width;
+                    }
+                }
+            }
+        }
+    }
+}
+
+/**
+Navbar brand
+ */
+.navbar-brand {
+    display: inline-flex;
+    align-items: center;
+    font-weight: $navbar-brand-font-weight;
+    margin: 0;
+    line-height: 1;
+    gap: $spacer-2;
+}
+
+.navbar-brand-image {
+    height: $navbar-brand-image-height;
+    width: auto;
+}
+
+/**
+Navbar toggler
+ */
+.navbar-toggler {
+    border: 0;
+    width: $navbar-brand-image-height;
+    height: $navbar-brand-image-height;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.navbar-toggler-icon {
+    height: 2px;
+    width: 1.25em;
+    background: currentColor;
+    border-radius: 10px;
+    @include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);
+    position: relative;
+
+    &:before,
+    &:after {
+        content: "";
+        display: block;
+        height: inherit;
+        width: inherit;
+        border-radius: inherit;
+        background: inherit;
+        position: absolute;
+        left: 0;
+        @include transition(inherit);
+    }
+
+    &:before {
+        top: -.45em;
+    }
+
+    &:after {
+        bottom: -.45em;
+    }
+
+    .navbar-toggler[aria-expanded="true"] & {
+        transform: rotate(45deg);
+        @include transition(top $transition-time, bottom $transition-time, transform $transition-time $transition-time, opacity 0s $transition-time);
+
+        &:before {
+            top: 0;
+            transform: rotate(-90deg);
+        }
+
+        &:after {
+            bottom: 0;
+            opacity: 0;
+        }
+    }
+}
+
+/**
+Navbar transparent
+ */
+.navbar-transparent {
+    --#{$prefix}navbar-border-color: transparent !important;
+    background: transparent !important;
+}
+
+/**
+Navbar nav
+ */
+.navbar-nav {
+    align-items: stretch;
+
+    .nav-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+}
+
+/**
+Navbar side
+ */
+.navbar-side {
+    margin: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+}
+
+/**
+Navbar vertical
+ */
+@if $enable-navbar-vertical {
+    .navbar-vertical {
+        &.navbar-expand {
+            @each $breakpoint in map-keys($grid-breakpoints) {
+                $next: breakpoint-next($breakpoint, $grid-breakpoints);
+                $infix: breakpoint-infix($next, $grid-breakpoints);
+
+                &#{$infix} {
+                    @include media-breakpoint-up($next) {
+                        width: $sidebar-width;
+                        position: fixed;
+                        top: 0;
+                        left: 0;
+                        bottom: 0;
+                        z-index: $zindex-fixed;
+                        align-items: flex-start;
+                        @include transition(transform $transition-time);
+                        overflow-y: scroll;
+                        padding: 0;
+
+                        &.navbar-right {
+                            left: auto;
+                            right: 0;
+                        }
+
+                        .navbar-brand {
+                            padding: (($navbar-height - $navbar-brand-image-height) * .5) 0;
+                            justify-content: center;
+                        }
+
+                        .navbar-collapse {
+                            align-items: stretch;
+                        }
+
+                        .navbar-nav {
+                            flex-direction: column;
+                            flex-grow: 1;
+                            min-height: auto;
+
+                            .nav-link {
+                                padding-top: .5rem;
+                                padding-bottom: .5rem;
+                            }
+                        }
+
+                        > [class^="container"] {
+                            flex-direction: column;
+                            align-items: stretch;
+                            min-height: 100%;
+                            justify-content: flex-start;
+                            padding: 0;
+                        }
+
+                        ~ .page {
+                            padding-left: $sidebar-width;
+
+                            [class^="container"] {
+                                padding-left: 1.5rem;
+                                padding-right: 1.5rem;
+                            }
+                        }
+
+                        &.navbar-right ~ .page {
+                            padding-left: 0;
+                            padding-right: $sidebar-width;
+                        }
+
+                        @include navbar-vertical-nav;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+.navbar-overlap {
+    &:after {
+        content: "";
+        height: $navbar-overlap-height;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: inherit;
+        z-index: -1;
+        box-shadow: inherit;
+    }
+}