92 lines
3.2 KiB
CSS
92 lines
3.2 KiB
CSS
.segmented-control {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
height: calc(42px * var(--segmented-control-scale, 1));
|
|
padding: calc(4px * var(--segmented-control-scale, 1));
|
|
border: 1px solid var(--segmented-control-border, var(--d-border, #d9e1ec));
|
|
border-radius: var(--segmented-control-radius, calc(14px * var(--segmented-control-scale, 1)));
|
|
background: var(--segmented-control-bg, var(--d-segment-bg, #eef3f9));
|
|
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
|
|
}
|
|
|
|
.segmented-control__slider {
|
|
position: absolute;
|
|
top: calc(4px * var(--segmented-control-scale, 1));
|
|
left: calc(4px * var(--segmented-control-scale, 1));
|
|
z-index: 1;
|
|
width: calc((100% - (8px * var(--segmented-control-scale, 1))) / var(--segmented-control-items, 2));
|
|
height: calc(100% - (8px * var(--segmented-control-scale, 1)));
|
|
border-radius: var(--segmented-control-slider-radius, calc(10px * var(--segmented-control-scale, 1)));
|
|
background: var(--segmented-control-slider-bg, var(--d-segment-slider, #ffffff));
|
|
box-shadow: var(--segmented-control-slider-shadow, var(--d-segment-shadow, 0 2px 8px rgba(15, 23, 42, 0.12)));
|
|
transform: translateX(calc(var(--segmented-control-index, 0) * 100%));
|
|
transition:
|
|
transform 0.46s cubic-bezier(0.34, 1.56, 0.64, 1),
|
|
background 0.22s ease,
|
|
box-shadow 0.22s ease;
|
|
}
|
|
|
|
.segmented-control__button {
|
|
position: relative;
|
|
z-index: 2;
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
height: 100%;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--segmented-control-button-gap, calc(2px * var(--segmented-control-scale, 1)));
|
|
border: 0;
|
|
border-radius: var(--segmented-control-button-radius, calc(10px * var(--segmented-control-scale, 1)));
|
|
background: none;
|
|
color: var(--segmented-control-color, var(--d-lang-btn, #4a5568));
|
|
font: inherit;
|
|
font-size: var(--segmented-control-font-size, calc(10px * var(--segmented-control-scale, 1)));
|
|
font-weight: var(--segmented-control-font-weight, 800);
|
|
letter-spacing: var(--segmented-control-letter-spacing, 0.04em);
|
|
cursor: pointer;
|
|
transition: color 0.18s ease, transform 0.18s ease;
|
|
}
|
|
|
|
.segmented-control__button:hover {
|
|
color: var(--segmented-control-hover, var(--d-nav-hover, #0d4f9f));
|
|
}
|
|
|
|
.segmented-control__button:active .segmented-control__icon {
|
|
transform: scale(0.86);
|
|
}
|
|
|
|
.segmented-control__button--active {
|
|
color: var(--segmented-control-active, var(--d-nav-active, #0b5fc1));
|
|
}
|
|
|
|
.segmented-control__icon {
|
|
width: var(--segmented-control-icon-size, calc(15px * var(--segmented-control-scale, 1)));
|
|
height: var(--segmented-control-icon-size, calc(15px * var(--segmented-control-scale, 1)));
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.segmented-control__icon svg {
|
|
width: var(--segmented-control-icon-size, calc(15px * var(--segmented-control-scale, 1)));
|
|
height: var(--segmented-control-icon-size, calc(15px * var(--segmented-control-scale, 1)));
|
|
stroke-width: 2.1;
|
|
}
|
|
|
|
.segmented-control__button--active .segmented-control__icon svg {
|
|
stroke-width: 2.45;
|
|
}
|
|
|
|
.segmented-control__label {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|