113 lines
2.2 KiB
Sass
113 lines
2.2 KiB
Sass
@use '/src/styles/variables.sass' as vars
|
|
@use 'sass:color'
|
|
|
|
.fullscreen
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
width: 100vw
|
|
height: 100vh
|
|
object-fit: cover
|
|
z-index: -1
|
|
opacity: 1
|
|
|
|
.tabs
|
|
width: 100%
|
|
|
|
&[data-orientation="vertical"]
|
|
display: flex
|
|
|
|
&__list
|
|
position: relative
|
|
display: flex
|
|
gap: 5rem
|
|
|
|
&__list[data-orientation="horizontal"]
|
|
align-items: center
|
|
|
|
&__list[data-orientation="vertical"]
|
|
flex-direction: column
|
|
align-items: stretch
|
|
|
|
&__indicator
|
|
position: absolute
|
|
background-color: color.adjust(vars.$background, $lightness: 20%)
|
|
transition: all 250ms
|
|
|
|
&__indicator[data-orientation="horizontal"]
|
|
bottom: -1px
|
|
height: 3px
|
|
|
|
&__indicator[data-orientation="vertical"]
|
|
right: -1px
|
|
width: 2px
|
|
|
|
&__trigger
|
|
// display: inline-block
|
|
// padding: 8px 16px
|
|
// outline: none
|
|
// cursor: pointer
|
|
background-color: transparent
|
|
border: none
|
|
border-radius: 6px 6px 0 0
|
|
color: vars.$textColor
|
|
padding: 0.75rem 1.75rem
|
|
width: 10rem
|
|
text-align: center
|
|
text-decoration: none
|
|
display: inline-block
|
|
font-size: 1rem
|
|
font-weight: 500
|
|
cursor: pointer
|
|
// transition: all 0.2s ease-out
|
|
|
|
&__trigger:hover
|
|
background-color: color.adjust(vars.$background, $lightness: 20%)
|
|
// color: hsl(240 5% 34%)
|
|
|
|
&__trigger:focus-visible
|
|
// background-color: hsl(240 5% 96%)
|
|
|
|
.tabs__trigger[data-disabled],
|
|
.tabs__trigger[data-disabled]:hover
|
|
opacity: 0.5
|
|
background-color: transparent
|
|
|
|
.tabs__content
|
|
padding: 16px
|
|
|
|
.table
|
|
width: 80%
|
|
border-collapse: collapse
|
|
margin: 1rem
|
|
box-shadow: inset 0 1px 2px #16212C, 0 2px 4px #2a3f5332, 0 4px 8px #344c654e
|
|
|
|
th, td
|
|
padding: 0.75rem
|
|
text-align: left
|
|
font-size: 1rem
|
|
|
|
th
|
|
background-color: vars.$tableHeaderBackground
|
|
color: vars.$textColor
|
|
padding: 1rem
|
|
|
|
th:nth-child(1)
|
|
text-align: center
|
|
border-radius: 1rem 0 0 0
|
|
|
|
th:nth-child(3)
|
|
border-radius: 0 1rem 0 0
|
|
|
|
td
|
|
background-color: rgba(color.adjust(vars.$background, $blackness: 5%), 0.8)
|
|
|
|
td:nth-child(1)
|
|
width: 10rem
|
|
text-align: center
|
|
|
|
td:nth-child(3)
|
|
width: 8.75rem
|
|
|
|
tbody tr:nth-child(even)
|
|
background-color: rgba(color.adjust(vars.$background, $lightness: 10%), 0.8)
|