Created the LinkDialog style
This commit is contained in:
85
admin/src/pages/Home/components/LinkDialog/styles.sass
Normal file
85
admin/src/pages/Home/components/LinkDialog/styles.sass
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
@import "@/common/styles/colors"
|
||||||
|
|
||||||
|
.dialog-area
|
||||||
|
position: fixed
|
||||||
|
top: 0
|
||||||
|
bottom: 0
|
||||||
|
left: 0
|
||||||
|
right: 0
|
||||||
|
background-color: rgba(0, 0, 0, 0.6)
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
|
z-index: 5
|
||||||
|
backdrop-filter: blur(2px)
|
||||||
|
|
||||||
|
.dialog
|
||||||
|
width: 600px
|
||||||
|
background-color: $white
|
||||||
|
border-radius: 15px
|
||||||
|
transition: all 0.3s
|
||||||
|
animation: fadeIn 0.3s
|
||||||
|
padding: 15px
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
gap: 1rem
|
||||||
|
z-index: 100
|
||||||
|
|
||||||
|
.dialog-hidden
|
||||||
|
visibility: hidden
|
||||||
|
opacity: 0
|
||||||
|
animation: fadeOut 0.3s
|
||||||
|
|
||||||
|
|
||||||
|
// Main Area
|
||||||
|
|
||||||
|
.dialog-main
|
||||||
|
height: 21rem
|
||||||
|
overflow-y: scroll
|
||||||
|
|
||||||
|
.dialog-group h2
|
||||||
|
margin: 0.5rem 0 0
|
||||||
|
font-size: 20pt
|
||||||
|
color: $gray
|
||||||
|
|
||||||
|
.dialog-main .dialog-group
|
||||||
|
margin-left: 2rem
|
||||||
|
margin-right: 2rem
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
gap: 1em
|
||||||
|
|
||||||
|
|
||||||
|
// Action Area
|
||||||
|
.dialog-action .error
|
||||||
|
color: $red
|
||||||
|
font-size: 16pt
|
||||||
|
margin: 0
|
||||||
|
|
||||||
|
.dialog-action
|
||||||
|
display: flex
|
||||||
|
justify-content: space-between
|
||||||
|
align-items: center
|
||||||
|
|
||||||
|
.dialog-action .btn
|
||||||
|
font-size: 16pt
|
||||||
|
padding: 10px 15px
|
||||||
|
border-radius: 12px
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes fadeIn
|
||||||
|
0%
|
||||||
|
opacity: 0
|
||||||
|
transform: scale(0.4)
|
||||||
|
filter: blur(10px)
|
||||||
|
100%
|
||||||
|
opacity: 1
|
||||||
|
|
||||||
|
@keyframes fadeOut
|
||||||
|
0%
|
||||||
|
opacity: 1
|
||||||
|
100%
|
||||||
|
opacity: 0
|
||||||
|
transform: scale(0.4)
|
||||||
|
filter: blur(10px)
|
Reference in New Issue
Block a user