170 lines
No EOL
3.3 KiB
Sass
170 lines
No EOL
3.3 KiB
Sass
@use '/src/styles/variables.sass' as vars
|
|
@use 'sass:color'
|
|
|
|
.padding
|
|
margin: 11rem
|
|
border: 1px solid red
|
|
|
|
h1
|
|
font-size: 3.25rem
|
|
color: vars.$textColor
|
|
|
|
.div
|
|
width: 8rem
|
|
|
|
.name
|
|
font-size: 1.25rem
|
|
|
|
.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: vars.$background
|
|
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: 90%
|
|
border-collapse: collapse
|
|
margin: 2rem
|
|
box-shadow: inset 0 1px 2px #16212C, 0 2px 4px #2a3f5332, 0 4px 8px #344c654e
|
|
|
|
th, td
|
|
// border: 1px solid vars.$tableBorderColor
|
|
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)
|
|
|
|
.modal
|
|
font-weight: 500
|
|
|
|
&__application-number
|
|
padding: 1rem 0
|
|
border-radius: 8px
|
|
font-size: 1.75rem
|
|
font-weight: 800
|
|
display: flex
|
|
flex-direction: column
|
|
flex-wrap: wrap
|
|
align-items: center
|
|
background: #16212C
|
|
box-shadow: 8px 8px 28px #0d141b, -8px -8px 28px #1f2e3d
|
|
|
|
&__name
|
|
padding: 1rem 0 0 0
|
|
font-size: 1rem
|
|
|
|
&__row
|
|
display: flex
|
|
flex-direction: column
|
|
flex-wrap: wrap
|
|
justify-content: flex-start
|
|
align-items: flex-start
|
|
gap: 0.5rem
|
|
padding: 1.25rem 1rem
|
|
// box-shadow: 5px 5px 10px #10171f, -5px -5px 10px #1c2b39
|
|
// border: 1px solid white
|
|
// border-radius: 8px
|
|
// margin: 0.5rem
|
|
|
|
&__label
|
|
font-size: 0.75rem
|
|
|
|
&__detail
|
|
font-size: 1rem
|
|
|
|
&__price
|
|
font-size: 1.75rem
|
|
font-weight: 700
|
|
|
|
&__cancel
|
|
font-size: 0.75rem
|
|
padding: 0.5rem 0 0 0
|
|
font-weight: 400
|
|
|
|
.approval
|
|
font-size: 1.75rem
|
|
font-weight: 700
|
|
padding: 0.5rem 1rem |