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

package/assets/styles/layout/_navbar.scss

@@ -0,0 +1,392 @@
+@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: 0.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;
+
+                &.disabled {
+                    color: var(--#{$prefix}disabled-color);
+                    pointer-events: none;
+                    background-color: transparent;
+                }
+
+                &.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-border-color: #{$navbar-border-color};
+    --#{$prefix}navbar-hover-color: #{$navbar-hover-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: 2.5rem;
+            min-height: 2.5rem;
+            justify-content: center;
+            border-radius: var(--#{$prefix}border-radius);
+
+            .badge {
+                position: absolute;
+                top: 0.375rem;
+                right: 0.375rem;
+                transform: translate(50%, -50%);
+            }
+        }
+    }
+}
+
+.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;
+
+                    .nav-link {
+                        color: var(--#{$prefix}navbar-active-color);
+                    }
+
+                    &:after {
+                        content: "";
+                        position: absolute;
+                        left: 0;
+                        right: 0;
+                        bottom: -0.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: -0.45em;
+    }
+
+    &:after {
+        bottom: -0.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 {
+    --#{$prefix}nav-link-hover-bg: #{color-transparent(var(--#{$prefix}nav-link-color), 0.04)};
+    margin: 0;
+    padding: 0;
+    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) * 0.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: 0.5rem;
+                                padding-bottom: 0.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;
+    }
+}

package/assets/styles/layout/_page.scss

@@ -0,0 +1,170 @@
+.page {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    min-height: 100%;
+}
+
+.page-center {
+    justify-content: center;
+}
+
+.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);
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+.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;
+    max-width: 100%;
+
+    .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,64 @@
+:root,
+:host {
+    font-size: 16px;
+    height: 100%;
+
+    @include media-breakpoint-up(lg) {
+        margin-left: calc(100vw - 100%);
+        margin-right: 0;
+    }
+}
+
+:root,
+:host,
+[data-bs-theme="light"] {
+    color-scheme: light;
+    --#{$prefix}spacer: var(--#{$prefix}spacer-2);
+
+    --#{$prefix}bg-surface: var(--#{$prefix}bg-surface-primary);
+    --#{$prefix}bg-surface-primary: var(--#{$prefix}white);
+    --#{$prefix}bg-surface-secondary: var(--#{$prefix}gray-50);
+    --#{$prefix}bg-surface-tertiary: var(--#{$prefix}gray-50);
+    --#{$prefix}bg-surface-dark: var(--#{$prefix}gray-900);
+    --#{$prefix}bg-surface-inverted: var(--#{$prefix}gray-900);
+    --#{$prefix}bg-forms: var(--#{$prefix}bg-surface);
+
+    --#{$prefix}text-inverted: var(--#{$prefix}gray-100);
+
+    --#{$prefix}body-color: var(--#{$prefix}gray-700);
+    --#{$prefix}body-bg: var(--#{$prefix}bg-surface-secondary);
+
+    --#{$prefix}link-color: var(--#{$prefix}primary);
+    --#{$prefix}link-hover-color: color-mix(in srgb, var(--#{$prefix}primary), #000 20%);
+
+    --#{$prefix}secondary: var(--#{$prefix}gray-500);
+    --#{$prefix}tertiary: var(--#{$prefix}gray-400);
+
+    --#{$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-active-color: #{$border-active-color-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};
+    }
+}

package/assets/styles/marketing/_browser.scss

@@ -0,0 +1,67 @@
+//
+// Browser
+//
+.browser {
+    border-radius: var(--#{$prefix}border-radius-lg);
+    box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
+    background: var(--#{$prefix}bg-surface-secondary);
+    overflow: hidden;
+}
+
+.browser-header {
+    padding: .25rem 1rem;
+    background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .03));
+    border-bottom: 1px solid var(--#{$prefix}border-color);
+    border-radius: calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0;
+}
+
+.browser-dots {
+    margin-right: 3rem;
+    display: flex;
+}
+
+.browser-dots-colored {
+    .browser-dot {
+        &:nth-child(1) {
+            background: #fb6058;
+        }
+
+        &:nth-child(2) {
+            background: #fcbe3b;
+        }
+
+        &:nth-child(3) {
+            background: #2ccb4c;
+        }
+    }
+}
+
+.browser-dot {
+    margin-right: .5rem;
+    width: .75rem;
+    min-width: .75rem;
+    height: .75rem;
+    background: var(--#{$prefix}border-color);
+    border-radius: 50%;
+    border: 1px solid var(--#{$prefix}border-color-dark);
+}
+
+.browser-input {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    padding: .25rem;
+    color: var(--#{$prefix}secondary);
+    font-size: var(--#{$prefix}font-size-h5);
+    border-radius: var(--#{$prefix}border-radius);
+    line-height: 1;
+    cursor: pointer;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
+
+    &:hover {
+        text-decoration: none;
+    }
+}

package/assets/styles/marketing/_core.scss

@@ -0,0 +1,8 @@
+.body-marketing {
+    --#{$prefix}body-font-size: 1rem;
+    --#{$prefix}body-line-height: 1.75;
+}
+
+.body-gradient {
+    background: var(--#{$prefix}bg-surface) linear-gradient(to bottom, var(--#{$prefix}bg-surface-secondary) 12%, var(--#{$prefix}bg-surface) 99%) repeat-x top center/100% 100vh;
+}