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

package/assets/styles/marketing/_hero.scss

@@ -0,0 +1,70 @@
+//
+// Hero
+//
+.hero {
+    text-align: center;
+    padding: 6.5rem 0;
+}
+
+.hero-title {
+    font-size: 3rem;
+    font-weight: var(--#{$prefix}font-weight-black);
+    letter-spacing: $spacing-tight;
+    line-height: $headings-line-height;
+
+    @include media-breakpoint-down(md) {
+        font-size: 2rem;
+    }
+}
+
+.hero-description {
+    color: var(--#{$prefix}secondary);
+    font-size: var(--#{$prefix}font-size-h2);
+    line-height: 1.5;
+    margin: 0 auto;
+    max-width: 45rem;
+
+    @include media-breakpoint-down(sm) {
+        font-size: var(--#{$prefix}font-size-h3);
+    }
+}
+
+.hero-description-wide {
+    max-width: 61.875rem;
+}
+
+//
+// Hero subheader
+//
+.hero-subheader {
+    @include subheader;
+    margin-bottom: 0.5rem;
+}
+
+.hero-img {
+    margin: 4rem auto;
+    max-width: 65rem;
+    border-radius: $border-radius-lg;
+    position: relative;
+    z-index: 1;
+    //box-shadow: 0 10px 15px -3px rgba($color-text, 0.1),
+    //  0 4px 6px -2px rgba($color-text, 0.05);
+
+    img,
+    svg {
+        max-width: 100%;
+        height: auto;
+        display: block;
+        position: relative;
+    }
+}
+
+//
+//.hero-img-side {
+//  img,
+//  svg {
+//    max-width: 100%;
+//    height: auto;
+//    display: block;
+//  }
+//}

package/assets/styles/marketing/_pricing.scss

@@ -0,0 +1,111 @@
+$pricing-card-width: 22rem;
+
+.pricing {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    justify-content: center;
+
+    @include media-breakpoint-up(md) {
+        flex-direction: row;
+    }
+}
+
+.pricing-card {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: var(--#{$prefix}bg-surface);
+    border: 1px solid $border-color;
+    padding: 2rem;
+    margin: 0 0 1rem;
+    position: relative;
+    box-shadow: $box-shadow-card;
+    text-align: center;
+    border-radius: $border-radius-lg;
+
+    @include media-breakpoint-up(md) {
+        margin: 1rem -1px;
+        max-width: $pricing-card-width;
+
+        &:first-child {
+            border-radius: $border-radius-lg 0 0 $border-radius-lg;
+        }
+
+        &:last-child {
+            border-radius: 0 $border-radius-lg $border-radius-lg 0;
+        }
+    }
+
+    &.featured {
+        z-index: 1;
+        border: 2px solid var(--#{$prefix}primary);
+        order: -1;
+
+        @include media-breakpoint-up(md) {
+            order: unset;
+            margin-top: 0;
+            margin-bottom: 0;
+            box-shadow: $box-shadow-card;
+            border-radius: $border-radius-lg;
+        }
+    }
+}
+
+.pricing-title {
+    font-size: $h2-font-size;
+    line-height: $h2-line-height;
+}
+
+.pricing-label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translateY(-50%);
+    vertical-align: bottom;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.pricing-btn {
+    margin-top: auto;
+    padding-top: 2rem;
+}
+
+.pricing-price {
+    display: flex;
+    justify-content: center;
+    font-size: 2.5rem;
+    line-height: 1;
+    font-weight: $font-weight-black;
+    margin: 0.75rem 0;
+}
+
+.pricing-price-currency {
+    font-size: $h2-font-size;
+    line-height: 1.5;
+    margin-right: 0.25rem;
+    font-weight: $font-weight-bold;
+}
+
+.pricing-price-description {
+    font-size: $h4-font-size;
+    line-height: $h4-line-height;
+    font-weight: $font-weight-normal;
+    color: $text-secondary;
+    align-self: center;
+    margin-left: 0.5rem;
+}
+
+.pricing-features {
+    margin: 1rem 0 0;
+    padding: 0;
+    list-style: none;
+    text-align: left;
+
+    > li:not(:first-child) {
+        margin-top: 0.25rem;
+    }
+}

package/assets/styles/marketing/_sections.scss

@@ -0,0 +1,124 @@
+@keyframes move-forever1 {
+    0% {
+        transform: translate(85px, 0%);
+    }
+
+    100% {
+        transform: translate(-90px, 0%);
+    }
+}
+
+@keyframes move-forever2 {
+    0% {
+        transform: translate(-90px, 0%);
+    }
+
+    100% {
+        transform: translate(85px, 0%);
+    }
+}
+
+@keyframes move-forever3 {
+    0% {
+        transform: translate(-90px, 0%);
+    }
+
+    100% {
+        transform: translate(85px, 0%);
+    }
+}
+
+//
+// Sections
+//
+.section {
+    --section-bg: transparent;
+    background: var(--section-bg);
+    position: relative;
+    padding: 5rem 0;
+}
+
+.section-sm {
+    padding: 4rem 0;
+}
+
+.section-white {
+    --section-bg: var(--#{$prefix}bg-surface);
+}
+
+.section-light {
+    --section-bg: var(--#{$prefix}bg-surface-secondary);
+}
+
+.section-primary {
+    --section-bg: var(--#{$prefix}primary);
+    color: $white;
+}
+
+.section-dark {
+    --section-bg: var(--#{$prefix}dark);
+    color: $white;
+}
+
+.section-header {
+    text-align: center;
+    max-width: 45rem;
+    margin: 0 auto 5rem;
+
+    @at-root .section-sm & {
+        margin-bottom: 4rem;
+    }
+}
+
+.section-title {
+    font-size: var(--#{$prefix}font-size-h1);
+    font-weight: var(--#{$prefix}font-weight-bold);
+    line-height: 1.2;
+}
+
+.section-title-lg {
+    font-size: 2rem;
+}
+
+.section-description {
+    color: var(--#{$prefix}secondary);
+    font-size: var(--#{$prefix}font-size-h3);
+    line-height: var(--#{$prefix}line-height-h3);
+    margin-top: 1rem;
+}
+
+//
+// Section divider
+//
+.section-divider {
+    position: absolute;
+    bottom: 100%;
+    pointer-events: none;
+    height: 5rem;
+    width: 100%;
+
+    path {
+        fill: var(--section-bg);
+    }
+
+    .wave-1 {
+        animation: move-forever1 30s linear infinite;
+        animation-delay: -2s;
+    }
+
+    .wave-2 {
+        animation: move-forever2 24s linear infinite;
+        opacity: .5;
+        animation-delay: -2s;
+    }
+
+    .wave-3 {
+        animation: move-forever3 18s linear infinite;
+        opacity: .3;
+        animation-delay: -2s;
+    }
+}
+
+.section-divider-auto {
+    height: auto;
+}

package/assets/styles/marketing/_shape.scss

@@ -0,0 +1,31 @@
+.shape {
+    --#{$prefix}shape-size: #{$avatar-size};
+    --#{$prefix}shape-icon-size: #{$avatar-icon-size};
+    background-color: var(--#{$prefix}primary-lt);
+    color: var(--#{$prefix}primary);
+    border-radius: 35%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--#{$prefix}shape-size);
+    width: var(--#{$prefix}shape-size);
+
+    .icon {
+        width: var(--#{$prefix}shape-icon-size);
+        height: var(--#{$prefix}shape-icon-size);
+    }
+}
+
+@each $avatar-size, $size in $avatar-sizes {
+    .shape-#{$avatar-size} {
+        --#{$prefix}shape-size: #{map-get($size, size)};
+        --#{$prefix}shape-icon-size: #{map-get($size, icon-size)};
+    }
+}
+
+@each $name, $color in $colors {
+    .shape-#{$name} {
+        background: var(--#{$prefix}#{$name}-lt);
+        color: var(--#{$prefix}#{$name});
+    }
+}

package/assets/styles/mixins/_functions.scss

@@ -0,0 +1,96 @@
+@function theme-color-lighter($color, $background: #fff) {
+    @return mix($color, $background, 10%);
+}
+
+@function theme-color-darker($color) {
+    @return shade-color($color, 10%);
+}
+
+//
+// Replace all occurrences of a substring within a string.
+//
+@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);
+}
+
+//
+// Escape SVG strings.
+//
+@function escape-svg($string) {
+    @if str-index($string, "data:image/svg+xml") {
+        @each $char, $encoded in $escaped-characters {
+            // Do not escape the url brackets
+            @if str-index($string, "url(") == 1 {
+                $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+            } @else {
+                $string: str-replace($string, $char, $encoded);
+            }
+        }
+    }
+
+    @return $string;
+}
+
+/**
+ * Converts a given value to a percentage string.
+ *
+ * @param {Number} $value - The value to be converted to a percentage.
+ * @return {String} - The percentage representation of the value.
+ */
+@function to-percentage($value) {
+    @return if(unitless($value), percentage($value), $value);
+}
+
+/**
+ * Generates a transparent version of the given color.
+ *
+ * @param {Color} $color - The base color to be made transparent.
+ * @param {Number} $alpha - The level of transparency, ranging from 0 (fully transparent) to 1 (fully opaque). Default is 1.
+ * @return {Color} - The resulting color with the specified transparency.
+ */
+@function color-transparent($color, $alpha: 1, $background: transparent) {
+    @if $alpha == 1 {
+        @return $color;
+    } @else {
+        @return color-mix(in srgb, #{$color} #{to-percentage($alpha)}, $background);
+    }
+}
+
+@function url-svg($svg) {
+    $svg: str-replace($svg, '#', '%23');
+    $svg: str-replace($svg, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
+
+    @return url('data:image/svg+xml;charset=UTF-8,#{$svg}');
+}

package/assets/styles/mixins/_mixins.scss

@@ -0,0 +1,68 @@
+@mixin subheader($include-color: true, $include-line-height: true) {
+    font-size: $h5-font-size;
+    font-weight: var(--#{$prefix}font-weight-medium);
+    text-transform: uppercase;
+    letter-spacing: .04em;
+
+    @if $include-line-height {
+        line-height: $h5-line-height;
+    }
+
+    @if ($include-color) {
+        color: var(--#{$prefix}secondary);
+    }
+}
+
+@mixin scrollbar {
+    #{if(&, "&", "*")} {
+        scrollbar-color: color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), .20) 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 color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), .20);
+    }
+
+    #{if(&, "&", "*")}::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    #{if(&, "&", "*")}:hover::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), .40);
+    }
+
+    #{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: 0 0 $focus-ring-blur $focus-ring-width rgba(var(--#{$prefix}primary-rgb), 0.25);
+
+    @if ($show-border) {
+        border-color: rgba(var(--#{$prefix}primary-rgb), 0.25);
+    }
+}

package/assets/styles/ui/_accordion.scss

@@ -0,0 +1,178 @@
+.accordion {
+    --#{$prefix}accordion-color: var(--#{$prefix}body-color);
+    --#{$prefix}accordion-border-color: var(--#{$prefix}border-color);
+    --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
+    --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
+    --#{$prefix}accordion-padding-x: #{$accordion-body-padding-x};
+    --#{$prefix}accordion-gap: 0;
+    --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
+    --#{$prefix}accordion-btn-color: var(--#{$prefix}accordion-color);
+    --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
+    --#{$prefix}accordion-btn-toggle-width: 1.25rem;
+    --#{$prefix}accordion-btn-padding-x: var(--#{$prefix}accordion-padding-x);
+    --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
+    --#{$prefix}accordion-btn-font-weight: var(--#{$prefix}font-weight-medium);
+    --#{$prefix}accordion-body-padding-x: var(--#{$prefix}accordion-padding-x);
+    --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--#{$prefix}accordion-gap);
+}
+
+.accordion-button {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-padding-x);
+    color: inherit;
+    text-align: inherit;
+    background-color: transparent;
+    border: 0;
+    font-size: inherit;
+    font-weight: var(--#{$prefix}accordion-btn-font-weight);
+    gap: .75rem;
+
+    &:not(.collapsed) {
+        border-bottom-color: transparent;
+        box-shadow: none;
+        color: var(--#{$prefix}accordion-active-color);
+    }
+}
+
+.accordion-header {
+    margin: 0;
+    position: relative;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    width: 100%;
+    color: var(--#{$prefix}accordion-btn-color);
+    text-align: left;
+    background-color: transparent;
+    border: 0;
+    overflow-anchor: none;
+    transition: transform $transition-time;
+
+    &:hover {
+        z-index: 2;
+    }
+
+    &:focus {
+        z-index: 3;
+        outline: 0;
+        box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+
+        &:not(:focus-visible) {
+            outline: none;
+            box-shadow: none;
+        }
+    }
+}
+
+.accordion-button-icon {
+    color: var(--#{$prefix}secondary);
+}
+
+.accordion-button-toggle {
+    display: flex;
+    line-height: 1;
+    transition: $transition-time transform;
+    margin-left: auto;
+    margin-right: 0;
+    color: var(--#{$prefix}secondary);
+    width: var(--#{$prefix}accordion-btn-toggle-width);
+    height: var(--#{$prefix}accordion-btn-toggle-width);
+
+    .accordion-button:not(.collapsed) & {
+        transform: rotate(-180deg);
+        color: var(--#{$prefix}accordion-active-color);
+    }
+
+    path {
+        transition: $transition-time opacity;
+    }
+}
+
+.accordion-button-toggle-plus {
+    .accordion-button:not(.collapsed) & {
+        path:first-child {
+            opacity: 0;
+        }
+    }
+}
+
+.accordion-item {
+    color: var(--#{$prefix}accordion-color);
+    border: var(--#{$prefix}border-width) solid var(--#{$prefix}accordion-border-color);
+
+    &:first-of-type {
+        @include border-top-radius(var(--#{$prefix}accordion-border-radius));
+
+        > .accordion-header {
+            @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
+        }
+    }
+
+    &:not(:first-of-type) {
+        border-top: 0;
+    }
+
+    &:last-of-type {
+        @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+
+        > .accordion-header {
+            &.collapsed {
+                @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
+            }
+        }
+
+        > .accordion-collapse {
+            @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+        }
+    }
+}
+
+.accordion-body {
+    color: var(--#{$prefix}secondary);
+    padding: 0 var(--#{$prefix}accordion-body-padding-x) var(--#{$prefix}accordion-body-padding-y);
+}
+
+.accordion-flush {
+    > .accordion-item {
+        border-right: 0;
+        border-left: 0;
+        @include border-radius(0);
+
+        &:first-child {
+            border-top: 0;
+        }
+
+        &:last-child {
+            border-bottom: 0;
+        }
+
+        > .accordion-collapse,
+        > .accordion-header .accordion-button,
+        > .accordion-header .accordion-button.collapsed {
+            @include border-radius(0);
+        }
+    }
+}
+
+.accordion-tabs {
+    --#{$prefix}accordion-gap: 0.75rem;
+
+    > .accordion-item {
+        border: var(--#{$prefix}border-width) solid var(--#{$prefix}accordion-border-color);
+        border-radius: var(--#{$prefix}accordion-border-radius);
+    }
+}
+
+.accordion-inverted {
+    .accordion-button-toggle {
+        order: -1;
+        margin-left: 0;
+    }
+}