@ardium-ui/ui 1.0.0

package/themes/default/segment.scss

@@ -0,0 +1,339 @@
+@use './mixins' as defaultMixins;
+@use './coloring' as coloringMixins;
+@import '../variables';
+
+.ard-segment-container {
+    @include coloringMixins.typeColors();
+    --ard-_segment-padding: 0.15rem;
+    padding: var(--ard-_segment-padding);
+    font-family: 'Roboto', sans-serif;
+    margin: 2px;
+    border: 1px solid transparent;
+    font-weight: 500;
+    width: max-content;
+    height: max-content;
+    gap: var(--ard-_segment-padding);
+    overflow: hidden; //hide click indicator overflowing rounded corners on touchscreens
+
+    @include defaultMixins.formAppearances();
+    @include defaultMixins.formVariants();
+
+    //! button focus inficator
+    .ard-focus-overlay {
+        @include defaultMixins.focus-overlay;
+        background-color: var(--ard-cmpcl--content);
+    }
+
+    //! row & option styling
+    .ard-segment-row {
+        gap: var(--ard-_segment-padding);
+        --ard-_font-size: 0.85em;
+        height: calc(2.42em + 1px);
+        font-size: var(--ard-_font-size);
+
+        .ard-segment-option {
+            margin: 0;
+            padding: 0 1em;
+            height: 100%;
+            font-size: 1em;
+            min-width: 2.42em;
+            border: 1px solid transparent;
+            background: transparent;
+            position: relative;
+            cursor: pointer;
+            transition:
+                color 0.1s $timing-fn,
+                border-color 0.1s $timing-fn,
+                background-color 0.1s $timing-fn;
+            outline: none;
+            display: flex;
+            align-items: center;
+
+            &.ard-option-selected {
+                position: relative;
+                z-index: 2;
+            }
+
+            &.ard-option-disabled {
+                opacity: 60%;
+                pointer-events: none;
+            }
+
+            .ard-button-content {
+                position: relative;
+                z-index: 1;
+                width: max-content;
+
+                .ard-option-label {
+                    display: flex;
+                    align-items: center;
+                }
+            }
+        }
+    }
+    //! highlighted/selected styling
+    .ard-segment-option {
+        &.ard-option-highlighted {
+            .ard-focus-overlay {
+                opacity: 4%;
+            }
+        }
+        &:active {
+            .ard-focus-overlay {
+                opacity: 12%;
+            }
+        }
+        &.ard-option-selected {
+            .ard-focus-overlay {
+                opacity: 16%;
+            }
+        }
+    }
+    &.ard-using-keyboard {
+        .ard-segment-option {
+            &.ard-option-highlighted {
+                .ard-focus-overlay {
+                    opacity: 28%;
+                }
+            }
+            &:active {
+                .ard-focus-overlay {
+                    opacity: 34%;
+                }
+            }
+        }
+    }
+
+    //! appearances
+    &.ard-appearance-transparent {
+        background: transparent;
+
+        .ard-segment-row {
+            .ard-segment-option {
+                .ard-focus-overlay {
+                    background-color: var(--ard-cmpcl--content);
+                }
+
+                &.ard-option-selected {
+                    color: var(--ard-cmpcl--content);
+                }
+            }
+        }
+    }
+    &.ard-appearance-outlined,
+    &.ard-appearance-outlined-strong {
+        background: $bg;
+        padding: 0;
+
+        .ard-segment-option {
+            border: 1px solid $border-light;
+
+            &.ard-option-selected {
+                border-color: var(--ard-cmpcl--border);
+                color: var(--ard-cmpcl--content);
+            }
+        }
+        &.ard-variant-rounded-connected,
+        &.ard-variant-sharp-connected {
+            gap: 0;
+
+            .ard-segment-row {
+                gap: 0;
+
+                &:not(:first-child) {
+                    margin-top: -1px;
+                }
+
+                .ard-segment-option:not(:first-child) {
+                    margin-left: -1px;
+                }
+            }
+        }
+        &.ard-variant-rounded-connected {
+            .ard-segment-row {
+                .ard-segment-option {
+                    border-radius: 0 !important;
+                }
+                &:first-child {
+                    .ard-segment-option {
+                        &:first-child {
+                            border-top-left-radius: var(--ard-variant-border-radius) !important;
+                        }
+                        &:last-child {
+                            border-top-right-radius: var(--ard-variant-border-radius) !important;
+                        }
+                        &:first-child:last-child {
+                            border-top-right-radius: var(--ard-variant-border-radius) !important;
+                            border-top-left-radius: var(--ard-variant-border-radius) !important;
+                        }
+                    }
+                }
+                &:last-child {
+                    .ard-segment-option {
+                        &:first-child {
+                            border-bottom-left-radius: var(--ard-variant-border-radius) !important;
+                        }
+                        &:last-child {
+                            border-bottom-right-radius: var(--ard-variant-border-radius) !important;
+                        }
+                        &:first-child:last-child {
+                            border-bottom-right-radius: var(--ard-variant-border-radius) !important;
+                            border-bottom-left-radius: var(--ard-variant-border-radius) !important;
+                        }
+                    }
+                }
+                &:first-child:last-child {
+                    .ard-segment-option {
+                        &:first-child {
+                            border-top-left-radius: var(--ard-variant-border-radius) !important;
+                            border-bottom-left-radius: var(--ard-variant-border-radius) !important;
+                        }
+                        &:last-child {
+                            border-top-right-radius: var(--ard-variant-border-radius) !important;
+                            border-bottom-right-radius: var(--ard-variant-border-radius) !important;
+                        }
+                        &:first-child:last-child {
+                            border-radius: var(--ard-variant-border-radius) !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    &.ard-appearance-outlined-strong {
+        .ard-segment-option.ard-option-selected {
+            background-color: var(--ard-cmpcl--bg);
+            color: var(--ard-cmpcl--on-bg);
+        }
+    }
+    &.ard-appearance-filled {
+        position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            border-radius: inherit;
+            background: var(--ard-cmpcl--bg);
+            opacity: 15%;
+        }
+
+        .ard-segment-option {
+            &.ard-option-highlighted {
+                .ard-focus-overlay {
+                    opacity: 8%;
+                }
+            }
+            &.ard-option-selected {
+                .ard-focus-overlay {
+                    opacity: 20%;
+                }
+            }
+        }
+    }
+    &.ard-appearance-filled-strong {
+        background: var(--ard-cmpcl--bg);
+        border-radius: var(--ard-variant-border-radius);
+
+        .ard-segment-row {
+            .ard-segment-option {
+                color: var(--ard-cmpcl--on-bg);
+
+                .ard-focus-overlay {
+                    background-color: var(--ard-cmpcl--on-bg);
+                }
+                &.ard-option-highlighted {
+                    .ard-focus-overlay {
+                        opacity: 16%;
+                    }
+                }
+                &.ard-option-selected {
+                    color: var(--ard-cmpcl--content);
+                    background: var(--ard-cmpcl--on-bg);
+
+                    .ard-focus-overlay {
+                        opacity: 0;
+                    }
+                }
+            }
+        }
+    }
+
+    //! variants
+    &.ard-variant-pill {
+        border-radius: 16px;
+
+        .ard-segment-row {
+            .ard-segment-option {
+                border-radius: var(--ard-variant-border-radius);
+            }
+        }
+    }
+    &.ard-variant-rounded,
+    &.ard-variant-rounded-connected {
+        --ard-variant-border-radius: 8px;
+        border-radius: var(--ard-variant-border-radius);
+
+        .ard-segment-row {
+            .ard-segment-option {
+                border-radius: max(1px, calc(var(--ard-variant-border-radius) - var(--ard-_segment-padding)));
+            }
+        }
+    }
+    &.ard-variant-sharp,
+    &.ard-variant-sharp-connected {
+        border-radius: var(--ard-variant-border-radius);
+
+        .ard-segment-row {
+            .ard-segment-option {
+                border-radius: calc(var(--ard-variant-border-radius));
+            }
+        }
+    }
+
+    //! compact
+    &.ard-compact {
+        .ard-segment-row {
+            --ard-_font-size: 0.85em;
+            height: calc(1.85em + 1px);
+
+            .ard-segment-option {
+                padding: 0 0.5em;
+                min-width: 1.85em;
+            }
+        }
+    }
+
+    &.ard-icon-based {
+        .ard-segment-row .ard-segment-option {
+            padding: 0;
+            min-width: unset;
+            aspect-ratio: 1;
+            justify-content: center;
+        }
+    }
+
+    //! disabled styling
+    &.ard-disabled {
+        pointer-events: none;
+        opacity: 50%;
+
+        .ard-focus-overlay {
+            opacity: 10%;
+        }
+
+        //edge case for no coloring
+        &.ard-color-none {
+            .ard-button-icon,
+            .ard-button-content {
+                opacity: 60%;
+            }
+            .ard-focus-overlay {
+                background: var(--ard-cmpcl--overlay);
+            }
+        }
+    }
+}

package/themes/default/select.scss

@@ -0,0 +1,253 @@
+@use './clear-button' as CB;
+@use './mixins' as defaultMixins;
+@import '../variables';
+
+.ard-select {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 100%;
+    display: grid;
+    align-items: center;
+    grid-template-columns: 1fr max-content;
+    gap: 0.625em;
+    padding: 0 1em 0 0.375em;
+    font-family: 'Roboto', sans-serif;
+    font-size: 1rem;
+
+    @include CB.clearButton();
+
+    //! variants
+    &.ard-variant-pill {
+        padding-left: 0.8125em;
+    }
+
+    //! value container
+    .ard-select-value-container {
+        position: relative;
+        height: 2em;
+        display: flex;
+        align-items: center;
+        font-size: 1em;
+        text-size-adjust: 100%;
+        flex-grow: 1;
+        overflow: hidden;
+
+        .ard-placeholder {
+            font: inherit;
+            position: absolute;
+            color: $text3;
+            width: max-content;
+            pointer-events: none;
+        }
+
+        .ard-search-input {
+            width: 100%;
+            max-width: 100%;
+
+            input {
+                border: none;
+                background: transparent;
+                outline: none;
+                font: inherit;
+                padding-left: 1px;
+                display: block;
+                width: 100%;
+                max-width: 100%;
+            }
+        }
+    }
+    .ard-select-controls {
+        display: flex;
+        align-items: center;
+        gap: 0.625em;
+        width: max-content;
+    }
+    //! single/multiselect
+    &.ard-singleselect {
+        .ard-value {
+            width: max-content;
+            white-space: nowrap;
+        }
+    }
+    &:not(.ard-searchable),
+    &.ard-singleselect {
+        .ard-search-input {
+            position: absolute;
+            top: 50%;
+            left: 0;
+            transform: translateY(-50%) translateX(-1px);
+            width: max-content;
+
+            input {
+                width: max-content;
+            }
+        }
+    }
+    &:not(.ard-searchable) .ard-search-input {
+        pointer-events: none;
+    }
+    &.ard-multiselect {
+        height: max-content;
+
+        .ard-select-value-container {
+            height: max-content;
+            min-height: 1.5625em;
+            padding: 0.25em 0;
+            box-sizing: border-box;
+            flex-wrap: wrap;
+            gap: 0.375em;
+            justify-content: stretch;
+
+            .ard-chip-wrapper {
+                margin: 0;
+            }
+        }
+        .ard-search-input {
+            flex-grow: 1;
+            width: unset !important;
+            min-width: 10ch;
+
+            input {
+                width: 10ch !important;
+            }
+        }
+        .ard-chip-wrapper {
+            margin: 0;
+        }
+    }
+    //! dropdown arrow
+    .ard-dropdown-arrow-wrapper {
+        display: flex;
+        align-items: center;
+        height: max-content;
+        width: max-content;
+
+        .ard-dropdown-arrow {
+            border: calc($dropdown-button-size / 2) solid transparent;
+            position: relative;
+            cursor: pointer;
+            border-bottom-color: $detail;
+            border-right-color: $detail;
+            transform: rotate(45deg) translate(-17.67771%, -17.67771%);
+        }
+    }
+    &.ard-dropdown-open .ard-dropdown-arrow {
+        transform: rotate(45deg) translate(17.67771%, 17.67771%) scaleX(-1) scaleY(-1);
+    }
+
+    //! compact
+    &.ard-compact {
+        font-size: 0.85rem;
+        height: 1.5625rem;
+        padding-right: 0.625em;
+
+        .ard-dropdown-arrow-wrapper .ard-dropdown-arrow {
+            border-width: calc($dropdown-button-size / 2.4);
+        }
+    }
+}
+
+//! optgroups & options, divider
+.ard-select-dropdown-panel {
+    right: 0;
+    width: max-content;
+    max-width: max(25em, 100%);
+    min-width: 100%;
+    font-size: 1rem;
+
+    .ard-dropdown-panel-content {
+        padding: 0.375em 0;
+        max-height: 15em;
+        overflow: hidden auto;
+    }
+    .ard-optgroup {
+        display: flex;
+        flex-direction: column;
+        cursor: pointer;
+    }
+    .ard-optgroup-children {
+        cursor: unset;
+    }
+
+    .ard-optgroup-label {
+        font-size: 0.875em;
+        font-weight: 600;
+        letter-spacing: 0.25px;
+        padding: 0.375em 0.625em 0.0625em 0.625em;
+    }
+
+    .ard-option {
+        padding: 0.375em 0.625em;
+        color: $text2;
+        cursor: pointer;
+
+        &.ard-option-highlighted {
+            background: $darken-overlay-light;
+        }
+
+        &.ard-option-selected {
+            font-weight: 500;
+            background: $darken-overlay-medium;
+        }
+
+        &.ard-option-disabled {
+            pointer-events: none;
+            opacity: 50%;
+        }
+    }
+    //divider
+    hr.ard-divider {
+        width: calc(100% - 1.25em);
+        margin: 0.375em 0.625em;
+        border: none;
+        border-bottom: 1px solid $darken-overlay-strong;
+    }
+
+    .ard-optgroup:first-child > hr.ard-divider {
+        display: none;
+    }
+    //! custom option
+    .ard-add-custom {
+        display: flex;
+        align-items: flex-end;
+        gap: 0.375rem;
+
+        .ard-add-custom-label {
+            font-size: 85%;
+        }
+    }
+
+    //! compact
+    > .ard-compact {
+        font-size: 0.85rem;
+    }
+}
+
+//! spinner
+.ard-simple-spinner {
+    border-radius: 999px;
+    border: 0.5em solid var(--ard-spinner-color);
+    border-top-color: transparent;
+    animation: spinner-anim 1s linear infinite;
+    position: relative;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: 999px;
+        border: 0.35em solid var(--ard-bg);
+    }
+}
+
+@keyframes spinner-anim {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}