96 lines
2.0 KiB
SCSS
96 lines
2.0 KiB
SCSS
// Copyright 2025 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
@use '../../mixins';
|
|
@use '../../variables';
|
|
@use './FunConstants.scss';
|
|
|
|
.FunTabs__Tabs {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-rows: min-content 1fr;
|
|
z-index: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.FunTabs__TabList {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding-inline: 10px;
|
|
height: FunConstants.$Fun__TabsListHeight;
|
|
}
|
|
|
|
.FunTabs__Tab {
|
|
position: relative;
|
|
flex: 1;
|
|
padding-block: 12px;
|
|
padding-inline: 2px;
|
|
cursor: pointer !important;
|
|
|
|
&[data-selected='true'] {
|
|
// Note: This is needed to keep the hover state from later items from
|
|
// covering the indicator during the animation.
|
|
z-index: 1;
|
|
}
|
|
|
|
&:focus {
|
|
// Handled by .FunTabs__TabButton
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.FunTabs__TabButton {
|
|
// Note: This must not have z-index for the animation
|
|
position: relative;
|
|
padding-block: 5px;
|
|
padding-inline: 12px;
|
|
border-radius: 9999px;
|
|
text-align: center;
|
|
@include mixins.font-body-1;
|
|
color: light-dark(variables.$color-gray-90, variables.$color-gray-05);
|
|
|
|
.FunTabs__Tab:hover &,
|
|
.FunTabs__Tab:focus & {
|
|
background: light-dark(variables.$color-gray-02, variables.$color-gray-78);
|
|
}
|
|
}
|
|
|
|
.FunTabs__TabButtonIndicator {
|
|
position: absolute;
|
|
z-index: 1;
|
|
border-radius: 9999px;
|
|
top: 0;
|
|
inset-inline-start: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
pointer-events: none;
|
|
background: light-dark(variables.$color-gray-05, variables.$color-gray-60);
|
|
|
|
.FunTabs__Tab[data-focused='true'] & {
|
|
outline: none;
|
|
@include mixins.keyboard-mode {
|
|
outline: 2px solid variables.$color-ultramarine;
|
|
}
|
|
}
|
|
}
|
|
|
|
.FunTabs__TabButtonText {
|
|
position: relative;
|
|
z-index: 2; // Just above the TabButtonIndicator
|
|
}
|
|
|
|
.FunTabs__TabPanel {
|
|
position: relative;
|
|
display: flex;
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
min-height: 0;
|
|
}
|
|
|
|
.FunTabs__TabPanelInner {
|
|
background: FunConstants.$Fun__BgColor; // Needed for smooth fade-between animation
|
|
}
|