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

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/helpers/_index.scss

@@ -0,0 +1,143 @@
+//
+// Clearfix
+//
+.clearfix {
+    @include clearfix();
+}
+
+//
+// Text truncation
+//
+.text-truncate {
+    @include text-truncate();
+}
+
+//
+// Vertical rule
+//
+.vr {
+    display: inline-block;
+    align-self: stretch;
+    width: $vr-border-width;
+    min-height: 1em;
+    background-color: currentcolor;
+    opacity: $hr-opacity;
+}
+
+//
+// Stretched link
+//
+.stretched-link {
+    &::#{$stretched-link-pseudo-element} {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: $stretched-link-z-index;
+        content: "";
+    }
+}
+
+//
+// Visually hidden
+//
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+    @include visually-hidden();
+}
+
+//
+// Stacks
+//
+.hstack {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-self: stretch;
+}
+
+.vstack {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    align-self: stretch;
+}
+
+//
+// Position
+//
+// Shorthand
+
+.fixed-top {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: $zindex-fixed;
+}
+
+.fixed-bottom {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $zindex-fixed;
+}
+
+// Responsive sticky top and bottom
+@each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .sticky#{$infix}-top {
+            position: sticky;
+            top: 0;
+            z-index: $zindex-sticky;
+        }
+
+        .sticky#{$infix}-bottom {
+            position: sticky;
+            bottom: 0;
+            z-index: $zindex-sticky;
+        }
+    }
+}
+
+//
+// Aspect ratio
+//
+.ratio {
+    position: relative;
+    width: 100%;
+
+    &::before {
+        display: block;
+        padding-top: var(--#{$prefix}aspect-ratio);
+        content: "";
+    }
+
+    > * {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+@each $key, $ratio in $aspect-ratios {
+    .ratio-#{$key} {
+        --#{$prefix}aspect-ratio: #{$ratio};
+    }
+}
+
+//
+// Focus ring
+//
+.focus-ring:focus {
+    outline: 0;
+    // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
+    box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
+}
+

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,62 @@
+// stylelint-disable property-no-vendor-prefix
+body {
+    letter-spacing: $body-letter-spacing;
+    touch-action: manipulation;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "liga" 0, "cv03", "cv04", "cv11";
+    position: relative;
+    min-height: 100%;
+    height: 100%;
+    padding: 0;
+
+    -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,77 @@
+@use "sass:color";
+
+// stylelint-disable declaration-no-important
+
+@if $enable-dark-mode {
+    :root {
+        &:not(.theme-dark):not([data-bs-theme="dark"]) {
+            .hide-theme-light {
+                display: none !important;
+            }
+
+            .img-dark {
+                display: none !important;
+            }
+        }
+
+        &.theme-dark,
+        &[data-bs-theme="dark"] {
+            .hide-theme-dark {
+                display: none !important;
+            }
+
+            .img-light {
+                display: none !important;
+            }
+        }
+    }
+
+
+    @include color-mode(dark, true) {
+        color-scheme: dark;
+        --#{$prefix}body-color: var(--#{$prefix}gray-200);
+        --#{$prefix}secondary: var(--#{$prefix}gray-400);
+
+        --#{$prefix}body-bg: var(--#{$prefix}gray-900);
+        --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
+        --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+
+        --#{$prefix}bg-forms: var(--#{$prefix}gray-900);
+        --#{$prefix}bg-surface: var(--#{$prefix}gray-800);
+        --#{$prefix}bg-surface-inverted: var(--#{$prefix}gray-100);
+        --#{$prefix}bg-surface-secondary: var(--#{$prefix}gray-900);
+        --#{$prefix}bg-surface-tertiary: var(--#{$prefix}gray-800);
+
+        --#{$prefix}text-inverted: var(--#{$prefix}gray-800);
+
+        --#{$prefix}link-color: var(--#{$prefix}primary);
+        --#{$prefix}link-hover-color: color-mix(in srgb, var(--#{$prefix}primary), black 20%);
+
+        --#{$prefix}active-bg: #{$lighten-dark};
+        --#{$prefix}disabled-color: #{color-transparent(var(--#{$prefix}body-color), .4)};
+
+        --#{$prefix}border-color: var(--#{$prefix}gray-700);
+        --#{$prefix}border-color-translucent: var(
+                        --#{$prefix}dark-mode-border-color-translucent
+        );
+        --#{$prefix}border-dark-color: var(--#{$prefix}dark-mode-border-dark-color);
+        --#{$prefix}border-active-color: var(
+                        --#{$prefix}dark-mode-border-active-color
+        );
+
+        --#{$prefix}btn-color: #{$darken-dark};
+
+        --#{$prefix}code-color: var(--#{$prefix}body-color);
+        --#{$prefix}code-bg: #{$border-dark-color-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;
+}