3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-02 09:08:27 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Refactor messages component.

Browse source
This commit is contained in:
Andrey Antukh 2020-04-08 16:39:54 +02:00
parent a0b70b7bbd
commit 02170a156e
24 changed files with 298 additions and 374 deletions
Download patch file Download diff file Expand all files Collapse all files

106
frontend/resources/styles/common/framework.scss
View file

@ -956,112 +956,6 @@ input[type=range]:focus::-ms-fill-upper {
}
// Messages
.message {
position: fixed;
top: 0;
left: 0px;
width: 100%;
z-index: 12;
@include animation(0, 1s, fadeInDown);
.message-body {
align-items: center;
border-radius: $br-small;
border-bottom: 3px solid transparent;
color: $color-white;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
padding: $medium $big;
position: relative;
width: 100%;
span {
font-size: $fs18;
max-width: 60%;
text-align: center;
width: 100%;
}
.close {
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
opacity: .3;
width: 18px;
svg {
fill: $color-black;
height: 18px;
width: 18px;
transform: rotate(45deg);
}
&:hover {
opacity: .8;
}
}
.message-action {
align-items: center;
display: flex;
justify-content: space-around;
margin-top: $medium;
max-width: 60%;
width: 100%;
}
}
&.error {
.message-body {
background-color: $color-danger;
border-color: $color-danger-dark;
}
}
&.success {
.message-body {
background-color: $color-success;
border-color: $color-success-dark;
}
}
&.info {
.message-body {
background-color: $color-info;
border-color: $color-info-dark;
}
}
&.quick {
.message-body {
.close {
display: none;
}
}
}
&.hide-message {
@include animation(0, .6s, fadeOutUp);
}
}
.message-version {
align-items: center;
background-color: rgba(27, 170, 214, .6);