ocbo-esign/src/pages/MainPage/Main.sass

118 lines
1.9 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
&__list[data-orientation="horizontal"]
align-items: center
&__list[data-orientation="vertical"]
flex-direction: column
align-items: stretch
&__indicator
position: absolute
background-color: hsl(200 98% 39%)
transition: all 250ms
&__indicator[data-orientation="horizontal"]
bottom: -1px
height: 2px
&__indicator[data-orientation="vertical"]
right: -1px
width: 2px
&__trigger
display: inline-block
padding: 8px 16px
outline: none
cursor: pointer
&__trigger:hover
background-color: hsl(0 0% 98%)
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: 100%
border-collapse: collapse
margin: 2rem
th, td
border: 1px solid vars.$tableBorderColor
padding: 0.75rem
text-align: left
font-size: 1.1rem
td:nth-child(1)
width: 12rem
td:nth-child(3)
width: 9rem
th
background-color: vars.$tableHeaderBackground
color: white
.modal
font-weight: 500
&__application-number
font-size: 1.75rem
font-weight: 700
display: flex
flex-direction: column
flex-wrap: wrap
align-items: center
&__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: 2rem 0 0 0
&__label
font-size: 0.75rem
&__detail
font-size: 1rem