Switch to CSS vars for variables

This commit is contained in:
Michał Gdula 2023-03-25 16:22:32 +00:00
parent 5dab4fb53d
commit b862c74bbe
22 changed files with 263 additions and 181 deletions

View file

@ -0,0 +1,33 @@
.label
padding: 0.4rem 0.7rem
display: block
position: absolute
font-size: 0.9rem
font-weight: 600
background-color: RGB($bg-dim)
color: RGB($fg-white)
border-radius: $rad-inner
opacity: 0
transition: opacity 0.2s cubic-bezier(.76,0,.17,1), left 0.2s cubic-bezier(.76,0,.17,1)
pointer-events: none
z-index: 999
svg
margin: 0
font-size: 1rem
width: 0.75rem
height: 0.75rem
display: block
position: absolute
top: 50%
left: -0.45rem
transform: translateY(-50%)
color: RGB($bg-dim)

View file

@ -1,8 +1,8 @@
@mixin notification($color)
color: $color
color: RGB($color)
.sniffle__notification-time
background-color: $color
background-color: RGB($color)
.notifications
margin: 0
@ -33,9 +33,9 @@
position: relative
background-color: $black
background-color: RGB($bg-100)
border-radius: $rad-inner
color: $white
color: RGB($fg-white)
opacity: 0
transform: scale(0.8)
@ -55,7 +55,7 @@
justify-content: center
align-items: center
background-color: $black2
background-color: RGB($bg-200)
svg
width: 1.25rem
@ -89,7 +89,7 @@
bottom: 0px
left: 0px
background-color: $white
background-color: RGB($fg-white)
animation: notificationTimeout 5.1s linear
@ -123,4 +123,4 @@
.sniffle__notification--hide
opacity: 0
transform: translateY(-5rem)
transform: translateY(-5rem)

View file

@ -7,7 +7,7 @@
display: none
background-color: rgba($black, 0.8)
background-color: $bg-transparent
opacity: 0
z-index: 101
@ -38,7 +38,7 @@
display: flex
flex-direction: column
background-color: $black
background-color: RGB($bg-100)
border-radius: $rad
overflow: hidden
@ -73,7 +73,7 @@
font-weight: 800
text-align: center
color: $white
color: RGB($fg-white)
p
margin: 0
@ -84,7 +84,7 @@
font-weight: 500
text-align: center
color: $white
color: RGB($fg-white)
svg
width: 1rem
@ -99,7 +99,7 @@
text-align: center
line-height: 1
color: $primary
color: RGB($primary)
cursor: pointer
text-decoration: none
@ -133,7 +133,7 @@
.pop-up-controlls
margin: 0
padding: 0.5rem
padding: 0.25rem
width: 100%
height: auto
@ -141,9 +141,9 @@
display: flex
flex-direction: row
justify-content: flex-end
gap: 0.5rem
gap: 0.25rem
background-color: $black2
background-color: RGB($bg-200)
&.active
opacity: 1

View file

@ -13,8 +13,8 @@
text-decoration: none
border-radius: $rad-inner
background-color: $primary
color: $black
background-color: RGB($primary)
color: RGB($bg-100)
border: none
cursor: pointer

View file

@ -8,7 +8,7 @@
width: calc(100% - 3.5rem)
height: 100vh
background-color: rgba($black, 0)
background-color: transparent
overflow: hidden
z-index: 68
@ -21,7 +21,7 @@
font-size: 1.75rem
font-weight: 700
color: $primary
color: RGB($primary)
p
margin: 0
@ -30,7 +30,7 @@
font-size: 1rem
font-weight: 500
color: $white
color: RGB($fg-white)
form
margin: 0
@ -71,7 +71,7 @@
flex-direction: column
gap: 1rem
background-color: $black
background-color: RGB($bg-200)
opacity: 0
z-index: +2
@ -98,7 +98,7 @@
align-items: center
gap: 0.5rem
background-color: $black2
background-color: RGB($bg-200)
border-radius: $rad
overflow: hidden
@ -121,7 +121,7 @@
width: 100%
height: 100%
background-image: linear-gradient(to right, rgba($black, 0.8), rgba($black, 0))
background-image: linear-gradient(to right, RGB($bg-100), transparent)
.job__status
margin: 0
@ -134,7 +134,7 @@
font-size: 1rem
font-weight: 600
color: $white
color: RGB($fg-white)
z-index: +3
@ -148,7 +148,7 @@
bottom: 0
left: -100%
background-color: $primary
background-color: RGB($primary)
animation: uploadingLoop 1s cubic-bezier(0.76, 0, 0.17, 1) infinite
@ -157,23 +157,23 @@
&.critical
.job__status, .progress
color: $critical
color: RGB($critical)
&.success
.job__status
color: $success
color: RGB($success)
.progress
height: 0
animation: none
&.warning
.job__status, .progress
color: $warning
color: RGB($warning)
&.critical, &.success, &.warning
.progress
height: 0
&.open
background-color: rgba($black, 0.5)
background-color: $bg-transparent
.container
left: 0
@ -199,4 +199,4 @@
&.open
.container
left: 0
bottom: 0
bottom: 0