83 lines
1.3 KiB
Sass
83 lines
1.3 KiB
Sass
@import "@/common/styles/colors"
|
|
|
|
.qr-code
|
|
width: 100%
|
|
border: 2px solid $dark-gray
|
|
border-radius: 1.5rem
|
|
padding: 1.5rem 2rem
|
|
|
|
.qr-code .tabs
|
|
display: flex
|
|
gap: 1rem
|
|
overflow-x: scroll
|
|
|
|
.qr-code .tab
|
|
font-size: 28pt
|
|
color: $darker-white
|
|
margin: 0
|
|
cursor: pointer
|
|
user-select: none
|
|
|
|
&:hover
|
|
color: $primary
|
|
|
|
.qr-code .tab-selected
|
|
border-bottom: 3px solid $primary
|
|
border-radius: 2px
|
|
color: $white
|
|
|
|
.qr-editor
|
|
display: flex
|
|
padding-top: 2rem
|
|
justify-content: space-between
|
|
overflow: hidden
|
|
gap: 3rem
|
|
|
|
.qr-input
|
|
width: 100%
|
|
|
|
.qr-area
|
|
background-color: $background
|
|
color: $darker-white
|
|
border-radius: 1rem
|
|
padding: 1rem
|
|
resize: none
|
|
width: 100%
|
|
height: 100%
|
|
box-sizing: border-box
|
|
font-size: 16pt
|
|
|
|
.qr-group
|
|
display: flex
|
|
gap: 1rem
|
|
align-items: center
|
|
justify-content: space-between
|
|
flex-wrap: wrap
|
|
margin-bottom: 1rem
|
|
|
|
h2
|
|
color: $white
|
|
margin: 0
|
|
|
|
.qr-input-field
|
|
background-color: $background
|
|
color: $darker-white
|
|
border: 2px solid $dark-gray
|
|
border-radius: 1rem
|
|
padding: 1rem
|
|
box-sizing: border-box
|
|
font-size: 16pt
|
|
|
|
.qr-result
|
|
border: 0.5rem solid $white
|
|
border-radius: 1rem
|
|
|
|
@media screen and (max-width: 1024px)
|
|
.qr-code .tab
|
|
font-size: 20pt
|
|
.qr-editor
|
|
flex-direction: column
|
|
gap: 1rem
|
|
align-items: center
|
|
.qr-input-field
|
|
width: 100% |