Zelda64Recomp/assets/scss/styles/components/Tabs.scss

64 lines
1.2 KiB
SCSS
Raw Permalink Normal View History

2024-01-07 22:33:22 +01:00
/*
Example:
<tab class="tab">
<div>Graphics</div>
<div class="tab__indicator"></div>
</tab>
*/
2024-01-07 01:04:28 +01:00
.tabs tabs {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.tab {
@extend %nav-all;
2024-01-22 17:43:21 +01:00
@extend %header-3;
2024-01-07 01:04:28 +01:00
display: block;
2024-01-07 22:33:22 +01:00
position: relative;
2024-01-07 01:04:28 +01:00
margin: 0;
padding: space(20) space(24);
2024-01-07 01:04:28 +01:00
transition: color $transition-quick;
opacity: 0.9;
background-color: rgba(0,0,0,0);
color: $color-text-inactive;
2024-01-07 01:04:28 +01:00
&:selected {
color: $color-text;
2024-01-07 22:33:22 +01:00
.tab__indicator {
background-color: $color-border-solid;
}
2024-01-07 01:04:28 +01:00
&:hover {
cursor: default;
}
}
2024-04-10 16:24:25 +02:00
.rmlui-window:not([mouse-active]) &:focus {
transition: none;
2024-04-10 16:24:25 +02:00
animation: $focus-anim-border;
&:selected .tab__indicator {
animation: $focus-anim-bg;
}
}
&:focus, &:hover {
opacity: 1;
color: $color-text;
cursor: pointer;
2024-01-07 01:04:28 +01:00
}
}
2024-01-07 22:33:22 +01:00
.tab__indicator {
position: absolute;
right: 0;
bottom: 2dp;
left: 0;
height: 2dp;
background-color: rgba(0, 0, 0, 0);
2024-01-07 22:33:22 +01:00
}