195 lines
3.5 KiB
Sass
195 lines
3.5 KiB
Sass
// SPDX-FileCopyrightText: 2022-2024 Gregor Kleen <gregor.kleen@ifi.lmu.de>,David Mosbach <david.mosbach@uniworx.de>
|
|
//
|
|
// SPDX-License-Identifier: AGPL-3.0-or-later
|
|
// SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design
|
|
|
|
@use "../../common" as *
|
|
@use '../../icons'
|
|
|
|
.alerts
|
|
position: fixed
|
|
bottom: 0
|
|
right: 5%
|
|
z-index: 20
|
|
text-align: right
|
|
display: flex
|
|
flex-direction: column
|
|
|
|
.alerts__toggler
|
|
width: 40px
|
|
height: 40px
|
|
position: absolute
|
|
top: 400px
|
|
left: 50%
|
|
transform: translateX(-50%)
|
|
cursor: pointer
|
|
|
|
&::before
|
|
@extend .ico-nav-container-close
|
|
|
|
content: ""
|
|
position: absolute
|
|
left: 50%
|
|
top: 0
|
|
height: 30px
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
width: 30px
|
|
color: var(--color-grey)
|
|
font-size: 30px
|
|
transform: translateX(-50%)
|
|
|
|
&:hover::before
|
|
color: var(--color-grey-medium)
|
|
|
|
.alerts--elevated
|
|
z-index: 1000
|
|
|
|
.alerts__toggler--visible
|
|
top: -40px
|
|
opacity: 1
|
|
transition: top 0.5s cubic-bezier(0.73, 1.25, 0.61, 1), opacity 0.5s cubic-bezier(0.73, 1.25, 0.61, 1)
|
|
|
|
@media (max-width: 425px)
|
|
.alerts
|
|
left: 5%
|
|
|
|
.alert
|
|
position: relative
|
|
display: block
|
|
background-color: var(--color-lightblack)
|
|
font-size: 1rem
|
|
color: var(--color-lightwhite)
|
|
z-index: 0
|
|
padding: 0 50px
|
|
padding-right: 60px
|
|
animation: slide-in-alert .2s ease-out forwards
|
|
margin-bottom: 10px
|
|
transition: margin-bottom .2s ease-out
|
|
|
|
.alert a
|
|
color: var(--color-lightwhite)
|
|
|
|
&:hover
|
|
color: var(--color-grey)
|
|
|
|
@keyframes slide-in-alert
|
|
from
|
|
transform: translateY(120%)
|
|
|
|
to
|
|
transform: translateY(0)
|
|
|
|
@keyframes slide-out-alert
|
|
from
|
|
transform: translateY(0)
|
|
max-height: 200px
|
|
|
|
to
|
|
transform: translateY(250%)
|
|
opacity: 0
|
|
max-height: 0
|
|
overflow: hidden
|
|
|
|
@media (min-width: 425px)
|
|
.alert
|
|
max-width: 400px
|
|
|
|
.alert--invisible
|
|
animation: slide-out-alert .2s ease-out forwards
|
|
margin-bottom: 0
|
|
|
|
.alert__content
|
|
padding: 8px 0
|
|
min-height: 40px
|
|
position: relative
|
|
font-weight: 600
|
|
align-items: center
|
|
text-align: left
|
|
overflow: auto
|
|
|
|
.alert__icon
|
|
text-align: right
|
|
position: absolute
|
|
left: 8px
|
|
bottom: 0
|
|
width: 50px
|
|
height: 100%
|
|
max-height: 100vh
|
|
z-index: 40
|
|
|
|
&::before
|
|
position: absolute
|
|
font-size: 24px
|
|
top: 50%
|
|
left: 50%
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
transform: translate(-50%, -50%)
|
|
border-radius: 50%
|
|
width: 30px
|
|
height: 30px
|
|
|
|
.alert__closer
|
|
cursor: pointer
|
|
text-align: right
|
|
position: absolute
|
|
right: 0px
|
|
bottom: 0
|
|
width: 60px
|
|
height: 100%
|
|
max-height: 100vh
|
|
transition: all .3s ease
|
|
z-index: 40
|
|
|
|
&:hover
|
|
transform: scale(1.05, 1.05)
|
|
|
|
&::before
|
|
box-shadow: 0 0 4px white
|
|
background-color: rgba(255, 255, 255, 0.1)
|
|
color: white
|
|
|
|
&::before
|
|
@extend .ico-not-ok
|
|
|
|
content: ""
|
|
position: absolute
|
|
top: 50%
|
|
left: 50%
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
transform: translate(-50%, -50%)
|
|
border-radius: 50%
|
|
width: 30px
|
|
height: 30px
|
|
transition: all .15s ease
|
|
|
|
@media (max-width: 768px)
|
|
.alert__closer
|
|
width: 40px
|
|
|
|
.alert-success
|
|
background-color: var(--color-success)
|
|
|
|
// .alert__icon::before {
|
|
// --alert-icon-default: '\f058';
|
|
// }
|
|
|
|
.alert-warning
|
|
background-color: var(--color-warning)
|
|
|
|
// .alert__icon::before {
|
|
// --alert-icon-default: '\f06a';
|
|
// }
|
|
|
|
.alert-error
|
|
background-color: var(--color-error)
|
|
|
|
// .alert__icon::before {
|
|
// --alert-icon-default: '\f071';
|
|
// }
|