@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/segmented.scss

@@ -1,271 +0,0 @@
-// Name:            Segmented
-// Description:     Component to create a multiple options with only one selectable
-//
-// Component:       `uk-segmented`
-//
-// Modifiers:       `uk-segmented-small`
-//                  `uk-segmented-large`
-//
-// States:          `uk-active`
-//                  `uk-first-column`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Segmented
- ========================================================================== */
-
-.uk-segmented {
-    background-color: var(--segmented-background);
-    border-radius: var(--segmented-border-radius);
-    box-sizing: border-box;
-    display: inline-block;
-    padding: var(--segmented-padding-vertical) var(--segmented-padding-horizontal);
-    @if meta.mixin-exists('hook-segmented') {
-        @include hook-segmented;
-    }
-}
-
-.uk-segmented-group {
-    align-items: stretch;
-    border-radius: inherit;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    gap: var(--segmented-group-gutter);
-    justify-content: flex-start;
-    position: relative;
-    width: 100%;
-    @if meta.mixin-exists('hook-segmented-group') {
-        @include hook-segmented-group;
-    }
-}
-
-
-/* Items
- ========================================================================== */
-
-.uk-segmented-item {
-    border-radius: calc(var(--segmented-border-radius) * 0.677);
-    box-sizing: border-box;
-    color: var(--segmented-item-color);
-    cursor: pointer;
-    line-height: calc(var(--segmented-item-height) - var(--segmented-padding-vertical) * 2);
-    min-height: calc(var(--segmented-item-height) - var(--segmented-padding-vertical) * 2);
-    position: relative;
-    text-align: center;
-    transform: translateZ(0);
-    transition: color var(--transition-medium-fast-duration) var(--ease-in-out);
-    @if meta.mixin-exists('hook-segmented-item') {
-        @include hook-segmented-item;
-    }
-}
-
-.uk-segmented-item::after {
-    border-radius: inherit;
-    content: '';
-    height: 100%;
-    inset-inline-start: 0;
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    transition: opacity var(--transition-medium-fast-duration);
-    width: 100%;
-    z-index: -1;
-}
-
-/* Hover state */
-.uk-segmented-item:not(.uk-segmented-item-selected, .uk-segmented-item-disabled):hover {
-    color: var(--segmented-item-hover-color);
-
-    &::after {
-        background-color: var(--segmented-item-hover-background);
-        opacity: 1;
-    }
-
-    @if meta.mixin-exists('hook-segmented-item-hover') {
-        @include hook-segmented-item-hover;
-    }
-}
-
-/* Active (onclick) state */
-.uk-segmented-item:not(.uk-segmented-item-selected, .uk-segmented-item-disabled):active {
-    color: var(--segmented-item-onclick-color);
-
-    &::after {
-        background-color: var(--segmented-item-onclick-background);
-        opacity: 1;
-    }
-
-    @if meta.mixin-exists('hook-segmented-item-onclick') {
-        @include hook-segmented-item-onclick;
-    }
-}
-
-/* Selected state (non-disabled) */
-.uk-segmented-item-selected:not(.uk-segmented-item-disabled) {
-    background-color: var(--segmented-item-selected-background);
-    color: var(--segmented-item-selected-color);
-
-    @if meta.mixin-exists('hook-segmented-item-selected') {
-        @include hook-segmented-item-selected;
-    }
-}
-
-/* Selected state (non-disabled) */
-.uk-segmented-item:not(.uk-segmented-item-disabled) [aria-checked="true"] {
-    color: var(--segmented-item-selected-color);
-    transition: color var(--transition-fast-duration) var(--ease-out) var(--transition-medium-fast-duration);
-}
-
-/* Selected state (disabled) */
-.uk-segmented-item-selected:where(.uk-segmented-item-disabled) {
-    background-color: var(--segmented-item-disabled-background);
-}
-
-/* Disabled state */
-.uk-segmented-item-disabled,
-.uk-segmented-item-disabled:hover,
-.uk-segmented-item-disabled:focus {
-    color: var(--segmented-item-disabled-color);
-    cursor: not-allowed;
-    @if meta.mixin-exists('hook-segmented-item-disabled') {
-        @include hook-segmented-item-disabled;
-    }
-}
-
-.uk-segmented-item-label {
-    box-sizing: border-box;
-    line-height: inherit;
-    min-height: inherit;
-    overflow: hidden;
-    padding: 0 var(--segmented-item-padding-horizontal);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    @if meta.mixin-exists('hook-segmented-item-label') {
-        @include hook-segmented-item-label;
-    }
-}
-
-.uk-segmented-item-input {
-    height: 0;
-    inset: 0;
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
-    width: 0;
-}
-
-
-/* Thumb
- ========================================================================== */
-
-.uk-segmented-thumb {
-    background-color: var(--segmented-item-selected-background);
-    border-radius: calc(var(--segmented-border-radius) * 0.677);
-    box-sizing: border-box;
-    height: 100%;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    position: absolute;
-    transition: transform var(--transition-duration) var(--ease-in-out),
-        width var(--transition-duration) var(--ease-in-out);
-    width: 0;
-    @if meta.mixin-exists('hook-segmented-thumb') {
-        @include hook-segmented-thumb;
-    }
-}
-
-.uk-segmented-thumb ~ .uk-segmented-item:not(.uk-segmented-item-selected, .uk-segmented-item-disabled)::after {
-    background-color: transparent;
-}
-
-.uk-segmented-thumb-motion-appear-active,
-.uk-segmented-thumb-motion-enter-active {
-    transition: transform var(--transition-duration) var(--ease-in-out),
-        width var(--transition-duration) var(--ease-in-out);
-    will-change: transform, width;
-}
-
-
-/* Size modifier
- ========================================================================== */
-
-.uk-segmented-small .uk-segmented-item {
-    line-height: calc(var(--segmented-item-small-height) - var(--segmented-padding-vertical) * 2);
-    min-height: calc(var(--segmented-item-small-height) - var(--segmented-padding-vertical) * 2);
-}
-
-.uk-segmented-medium .uk-segmented-item {
-    line-height: calc(var(--segmented-item-medium-height) - var(--segmented-padding-vertical) * 2);
-    min-height: calc(var(--segmented-item-medium-height) - var(--segmented-padding-vertical) * 2);
-}
-
-.uk-segmented-large .uk-segmented-item {
-    line-height: calc(var(--segmented-item-large-height) - var(--segmented-padding-vertical) * 2);
-    min-height: calc(var(--segmented-item-large-height) - var(--segmented-padding-vertical) * 2);
-}
-
-
-/* Vertical modifier
- ========================================================================== */
-
-.uk-segmented-vertical .uk-segmented-group {
-    flex-direction: column;
-}
-
-.uk-segmented-vertical .uk-segmented-item {
-    text-align: left;
-    width: 100%;
-}
-
-.uk-segmented-vertical .uk-segmented-thumb {
-    height: 0;
-    transition: transform var(--transition-duration) var(--ease-in-out),
-        height var(--transition-duration) var(--ease-in-out);
-    width: 100%;
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-segmented-misc') {
-    @include hook-segmented-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --segmented-background: var(--global-default-background);
-    --segmented-padding-horizontal: var(--global-xsmall-gutter);
-    --segmented-padding-vertical: var(--global-xsmall-gutter);
-    --segmented-border-radius: var(--global-border-radius);
-    --segmented-group-gutter: var(--global-xsmall-gutter);
-    --segmented-item-height: var(--global-control-height);
-    --segmented-item-padding-horizontal: var(--global-small-gutter);
-    --segmented-item-padding-vertical: var(--global-xsmall-gutter);
-    --segmented-item-small-height: var(--global-control-small-height);
-    --segmented-item-medium-height: var(--global-control-medium-height);
-    --segmented-item-large-height: var(--global-control-large-height);
-    --segmented-item-color: var(--global-color);
-    --segmented-item-hover-background: var(--global-muted-background);
-    --segmented-item-hover-color: var(--global-color);
-    --segmented-item-onclick-background: var(--global-default-background);
-    --segmented-item-onclick-color: var(--global-color);
-    --segmented-item-selected-background: var(--global-primary-background);
-    --segmented-item-selected-color: var(--global-inverse-color);
-    --segmented-item-disabled-background: var(--global-muted-background);
-    --segmented-item-disabled-color: var(--global-muted-color);
-}