@natachah/vanilla-frontend 0.0.2

package/scss/_form.scss

@@ -0,0 +1,197 @@
+////
+/// ------------------------------------------------------------------
+/// Form
+/// ------------------------------------------------------------------
+/// Create the form components
+///
+/// @example <input>, <textarea> and <select>
+///
+/// @require {mixin} as-item
+/// @group components
+/// @author Natacha Herth
+/// @since 1.0.0
+///
+////
+
+label,
+fieldset legend {
+    display: block;
+}
+
+input,
+textarea,
+select {
+
+    // Customization 
+    width: 100%;
+    vertical-align: middle;
+
+    // Define as an item
+    @include as-item('form', ('focus', 'disabled'));
+
+}
+
+textarea {
+    resize: vertical;
+    white-space: break-spaces;
+}
+
+[type=number] {
+    // Hide the default buttons
+    appearance: textfield;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+}
+
+[type=date],
+[type=datetime-local],
+[type=time],
+[type=file],
+select {
+    background-repeat: no-repeat;
+    background-size: 1rem;
+    background-position: calc(100% - var(--form-padding-inline, var(--padding-inline))) center;
+}
+
+[type=date],
+[type=datetime-local] {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16"><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg>');
+}
+
+[type=time] {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/></svg>');
+}
+
+@-moz-document url-prefix() {
+
+    // For Firefox re-align icons (can't override the default)
+    [type=date],
+    [type=datetime-local],
+    [type=time] {
+        padding-right: .425rem;
+    }
+
+    // For Firefox don't add background-image (can't override the default)
+    [type=date],
+    [type=datetime-local] {
+        background-image: none;
+    }
+
+}
+
+[type=file] {
+
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/></svg>');
+
+    // Hide the default button, and make it look like a default input
+    &::file-selector-button {
+        visibility: hidden;
+        width: 0;
+        padding: 0;
+        margin: 0;
+    }
+
+}
+
+select {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
+}
+
+[type=color] {
+    height: calc((var(--font-size) * var(--line-height)) + (var(--form-padding-block, var(--padding-block)) * 2) + (var(--form-border-size, var(--border-size)) * 2));
+}
+
+[type=range] {
+
+    $size: var(--range-size, 1rem);
+
+    @mixin as-range-button() {
+        background-color: var(--range-color, currentColor);
+        height: $size;
+        width: $size;
+        border: none;
+        border-radius: $size;
+        box-shadow: calc(-400px - $size / 2) 0 0 400px color-mix(in srgb, var(--range-color, currentColor), transparent 75%);
+    }
+
+    padding: calc($size / 2) 0;
+    overflow: hidden;
+    height: $size;
+    border-radius: $size;
+
+    &::-moz-range-thumb {
+        @include as-range-button()
+    }
+
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        @include as-range-button()
+    }
+
+}
+
+[type=radio],
+[type=checkbox],
+[type=checkbox][role=switch] {
+
+    padding: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    &:checked {
+        background-color: var(--form-active-background, currentColor);
+    }
+
+    &:disabled:not(:checked) {
+        background-color: var(--form-background, rgba(black, 25%));
+    }
+
+    & ~ label {
+
+        display: inline-block;
+        vertical-align: middle;
+
+        &:not(:last-of-type) {
+            margin-inline-end: var(--form-padding-inline, var(--padding-inline));
+        }
+    }
+
+}
+
+[type=radio] {
+
+    border-radius: 100%;
+
+    &:checked {
+        background-size: 50%;
+        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><circle cx="8" cy="8" r="8"/></svg>');
+    }
+
+}
+
+[type=checkbox]:not([role=switch]):checked {
+    background-size: 100%;
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/></svg>');
+}
+
+
+[type=checkbox][role=switch] {
+
+    width: 2.25rem;
+    border-radius: 1rem;
+    background-position: .125em center;
+    background-size: auto calc(100% - .25em);
+    background-color: var(--form-background, rgba(black, 25%));
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><circle cx="8" cy="8" r="8"/></svg>');
+
+    &:checked {
+        background-position: calc(100% - .125em) center;
+    }
+
+}

package/scss/_grid.scss

@@ -0,0 +1,40 @@
+////
+/// ------------------------------------------------------------------
+/// Grid
+/// ------------------------------------------------------------------
+/// Create the grid component
+///
+/// @example <div class="grid">...</div> or <div class="flex-grid">...</div>
+///
+/// @group components
+/// @author Natacha Herth
+/// @since 1.0.0
+///
+////
+
+.grid,
+.flex-grid {
+
+    gap: var(--grid-gap-block, 1rem) var(--grid-gap-inline, 1rem);
+    justify-content: var(--grid-justify, start);
+    align-items: var(--grid-align, initial);
+
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-columns, 12), minmax(0%, 1fr));
+}
+
+.flex-grid {
+
+    display: flex;
+    flex-wrap: wrap;
+
+    > * {
+        $column: var(--grid-columns, 12);
+        flex-basis: calc((1 / $column * 100%) - (var(--grid-gap-inline, 1rem) * ($column - 1) / $column));
+        flex-grow: var(--grid-grow, 0);
+    }
+
+}

package/scss/_group.scss

@@ -0,0 +1,57 @@
+////
+/// ------------------------------------------------------------------
+/// Group
+/// ------------------------------------------------------------------
+/// Create the group component
+///
+/// @example <div class="group">...</div>
+///
+/// @group components
+/// @author Natacha Herth
+/// @since 1.0.0
+///
+////
+
+.group {
+
+    display: flex;
+
+    > * {
+
+        &:is(label) {
+            @include as-item('form');
+        }
+
+        // Remove extra border
+        & + *,
+        & + :is(.dropdown) > [aria-controls] {
+            border-left: none !important;
+        }
+
+        // Remove extra radius
+        &:not(:first-child, :last-child),
+        &:not(:first-child, :last-child):is(.dropdown) > [aria-controls] {
+            border-radius: 0;
+        }
+
+        &:not(:only-child) {
+
+            // Remove radius right on first child
+            &:first-child,
+            &:first-child:is(.dropdown) > [aria-controls] {
+                border-start-end-radius: 0;
+                border-end-end-radius: 0;
+            }
+
+            // Remove radius left on last child
+            &:last-child,
+            &:last-child:is(.dropdown) > [aria-controls] {
+                border-start-start-radius: 0;
+                border-end-start-radius: 0;
+            }
+
+        }
+
+    }
+
+}

package/scss/_list.scss

@@ -0,0 +1,18 @@
+////
+/// ------------------------------------------------------------------
+/// List
+/// ------------------------------------------------------------------
+/// Create the list component
+///
+/// @example <ul class="list">...</ul>, <ol class="list">...</ol> or <div class="list">...</div>
+///
+/// @require {mixin} as-item
+/// @group components
+/// @author Natacha Herth
+/// @since 1.0.0
+///
+////
+
+.list {
+    @include as-list('list', ('focus', 'hover', 'active', 'disabled'), $properties)
+}

package/scss/_loading.scss

@@ -0,0 +1,49 @@
+////
+/// ------------------------------------------------------------------
+/// Loading
+/// ------------------------------------------------------------------
+/// Create the loading component
+///
+/// @example <div aria-busy="true">Busy</div>, <a href="#" aria-busy="true">Busy</a> or <button aria-busy="true">Busy</button>,
+///
+/// @group components
+/// @author Natacha Herth
+/// @since 1.0.0
+///
+////
+
+[aria-busy=true] {
+
+    white-space: nowrap;
+    pointer-events: none;
+
+    &::before {
+        content: "";
+        display: inline-block;
+        width: 1em;
+        height: 1em;
+        vertical-align: -.125em;
+        border: 2px solid currentColor;
+        border-radius: 1em;
+        border-right-color: transparent;
+
+        @media screen and (prefers-reduced-motion: no-preference) {
+            animation: busy-spinner 1s linear infinite;
+        }
+    }
+
+    &:not(:empty)::before {
+        margin-inline-end: .5rem;
+    }
+
+    &:empty {
+        text-align: center;
+    }
+
+    @keyframes busy-spinner {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+}

package/scss/_media.scss

@@ -0,0 +1,37 @@
+////
+/// ------------------------------------------------------------------
+/// Media
+/// ------------------------------------------------------------------
+/// Create the media component
+///
+/// @example <img>, <picture>, <figure>, <video> and <audio>
+///
+/// @group components
+/// @author Natacha Herth
+/// @since 1.0.0
+///
+////
+
+img {
+    width: var(--image-width, auto);
+    height: var(--image-height, auto);
+    object-fit: var(--image-fit, cover);
+    aspect-ratio: var(--image-ratio, auto);
+}
+
+video {
+    width: var(--video-width, 100%);
+    height: var(--video-height, auto);
+    object-fit: var(--video-fit, cover);
+    aspect-ratio: var(--video-ratio, 16/9);
+}
+
+audio {
+    width: var(--audio-width, 100%);
+}
+
+figcaption {
+    color: var(--caption-color, currentColor);
+    font-size: var(--caption-font-size, var(--font-size-small));
+    margin: var(--caption-margin-block, .5rem) var(--caption-margin-inline, 0);
+}

package/scss/_nav.scss

@@ -0,0 +1,72 @@
+////
+/// ------------------------------------------------------------------
+/// Nav
+/// ------------------------------------------------------------------
+/// Create the navigation component
+///
+/// @example <nav><ul>...</ul></nav> or <nav><ol>...</ol></nav>
+///
+/// @group components
+/// @author Natacha Herth
+/// @since 1.0.0
+///
+////
+
+nav {
+
+    // Reset the list style
+    ul,
+    ol {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    ul {
+
+        // Design the nav list as inline by default
+        display: flex;
+        flex-direction: var(--nav-direction, row);
+        justify-content: var(--nav-justify, start);
+        align-items: var(--nav-align, center);
+        gap: var(--nav-gap, 1rem);
+
+        // Reset the anchor CSS properties
+        a {
+            --anchor-decoration: var(--nav-decoration, currentColor);
+            --anchor-color: var(--nav-color, currentColor);
+            --anchor-hover-color: var(--nav-hover-color, var(--nav-color, currentColor));
+            --anchor-active-color: var(--nav-active-color, var(--nav-hover-color, var(--nav-color, currentColor)));
+            --anchor-disabled-opacity: var(--nav-disabled-opacity, var(--disabled-opacity));
+        }
+
+    }
+
+    ol {
+
+        // Design the breadcrumb list as inline by default
+        display: flex;
+        flex-direction: row;
+        justify-content: start;
+        align-items: center;
+        gap: 0;
+
+        // Add a divider between links
+        li:not(:last-child)::after {
+            content: var(--breadcrumb-divider, '/');
+            color: var(--breadcrumb-divider-color, currentColor);
+            margin-inline: var(--breadcrumb-gap, .5rem);
+        }
+
+        // Reset the anchor CSS properties
+        a {
+            --anchor-decoration: var(--breadcrumb-decoration, currentColor);
+            --anchor-color: var(--breadcrumb-color, currentColor);
+            --anchor-hover-color: var(--breadcrumb-hover-color, var(--breadcrumb-color, currentColor));
+            --anchor-active-color: var(--breadcrumb-active-color, var(--breadcrumb-hover-color, var(--breadcrumb-color, currentColor)));
+            --anchor-disabled-opacity: var(--breadcrumb-disabled-opacity, var(--disabled-opacity));
+        }
+
+    }
+
+}

package/scss/_progress.scss

@@ -0,0 +1,40 @@
+////
+/// ------------------------------------------------------------------
+/// Progress
+/// ------------------------------------------------------------------
+/// Create the progress bar component
+///
+/// @example <progress value="75" max="100"></progress>
+///
+/// @group components
+/// @author Natacha Herth
+/// @since 1.0.0
+///
+////
+
+progress {
+
+    display: inline-block;
+    vertical-align: middle;
+    width: var(--progress-width, 100%);
+    height: var(--progress-height, 1rem);
+    background-color: var(--progress-background, color-mix(in srgb, var(--progress-color, currentColor), transparent 75%));
+    border-radius: var(--progress-border-radius, 1rem);
+    overflow: hidden;
+
+    // Remove default background on Safari and Chrome
+    &::-webkit-progress-bar {
+        background: none;
+    }
+
+    // Set the value bar background color on Safari & Chrome
+    &::-webkit-progress-value {
+        background-color: var(--progress-color, currentColor);
+    }
+
+    // Set the value bar background color on Firefox
+    &::-moz-progress-bar {
+        background-color: var(--progress-color, currentColor);
+    }
+
+}

package/scss/_slider.scss

@@ -0,0 +1,35 @@
+////
+/// ------------------------------------------------------------------
+/// Slider
+/// ------------------------------------------------------------------
+/// Create the slider component
+///
+/// @example <div class="slider">...</div>
+///
+/// @group components
+/// @author Natacha Herth
+/// @since 1.0.0
+///
+////
+
+.slider {
+
+    position: relative; // Important for the offsetLeft
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: calc((100% / var(--slider-columns, 1)) - var(--slider-gap, 0rem));
+    gap: var(--slider-gap, 0);
+    overscroll-behavior-inline: contain;
+    overflow-x: auto;
+    scroll-snap-type: inline mandatory;
+
+    // Remove Scrollbar 
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    > * {
+        scroll-snap-align: start;
+        scroll-padding-inline: 0;
+    }
+
+}

package/scss/_table.scss

@@ -0,0 +1,36 @@
+////
+/// ------------------------------------------------------------------
+/// Table
+/// ------------------------------------------------------------------
+/// Create the table component
+///
+/// @example <table></table>
+///
+/// @group components
+/// @author Natacha Herth
+/// @since 1.0.0
+///
+////
+
+table {
+
+    // Design the cells
+    th,
+    td {
+        padding: var(--table-padding-block, var(--padding-block)) var(--table-padding-inline, var(--padding-inline));
+        text-align: var(--table-align-inline, left);
+        vertical-align: var(--table-align-block, middle);
+    }
+
+    // Add the borders
+    tr:not(:first-child) {
+        border-top: var(--table-border-size, var(--border-size)) var(--table-border-style, var(--border-style)) var(--table-border-color, transparent);
+    }
+
+    // Change border between header & footer
+    thead + tbody > tr:first-child,
+    tfoot > tr:first-child {
+        border-top: var(--table-divider-size, var(--table-border-size, var(--border-size))) var(--table-divider-style, var(--table-border-style, var(--border-style))) var(--table-divider-color, var(--table-border-color, transparent));
+    }
+
+}