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

🎉 Add new styles for banners.

Browse source
This commit is contained in:
Juan de la Cruz 2020-05-26 11:42:34 +02:00 • committed by Andrey Antukh
parent 288e8e061c
commit b331489741
11 changed files with 206 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/resources/styles/common/dependencies/colors.scss
View file

@ -14,7 +14,7 @@ $color-canvas: #E8E9EA;
$color-primary: #31EFB8;
// Secondary colors
$color-success: #49D793;
$color-success: #58C35C;
$color-complete : #a599c6;
$color-warning: #FC8802;
$color-danger: #E65244;

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

@ -994,11 +994,186 @@ input[type=range]:focus::-ms-fill-upper {
white-space: normal;
width: 100%;
}
}
}
}
// Messages
// Banner top
.msg-banner {
top: 0;
left: 0px;
width: 100%;
height: 40px;
z-index: 13;
display: flex;
justify-content: center;
align-items: center;
.close-button {
position: absolute;
right: 0px;
top: 0px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
opacity: .35;
svg {
fill: $color-black;
height: 18px;
width: 18px;
transform: rotate(45deg);
}
&:hover {
opacity: .8;
}
}
.msg-content {
align-items: center;
color: $color-white;
display: flex;
justify-content: center;
max-width: 60%;
.icon {
display: flex;
margin-right: $medium;
svg {
fill: $color-white;
height: 20px;
width: 20px;
}
}
span {
font-size: $fs15;
}
}
&.fixed {
position: fixed;
}
&.error {
background-color: $color-danger;
}
&.success {
background-color: $color-success;
}
&.warning {
background-color: $color-warning;
}
&.info {
background-color: $color-info;
}
&.quick {
.close-button {
display: none;
}
}
&.hide-message {
@include animation(0, .6s, fadeOutUp);
}
}
.msg-inline {
display: flex;
margin-bottom: $big;
min-height: 40px;
width: 100%;
.icon {
display: flex;
flex-shrink: 0;
justify-content: center;
margin-right: $small;
padding: $small;
width: 40px;
svg {
fill: $color-white;
height: 20px;
width: 20px;
}
}
.msg-text {
display: flex;
font-size: $fs14;
color: $color-black;
padding: $small;
}
&.error {
background-color: lighten($color-danger,30%);
.icon {
background-color: $color-danger;
}
}
&.success {
background-color: lighten($color-success,30%);
.icon {
background-color: $color-success;
}
}
&.warning {
background-color: lighten($color-warning,30%);
.icon {
background-color: $color-warning;
}
}
&.info {
background-color: lighten($color-info,30%);
.icon {
background-color: $color-info;
}
}
.close-button {
width: 40px;
height: 40px;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
opacity: .35;
svg {
fill: $color-black;
height: 18px;
width: 18px;
transform: rotate(45deg);
}
&:hover {
opacity: .8;
}
}
&.quick {
.close-button {
display: none;
}
}
}
.message-version {

1
frontend/resources/styles/main-default.scss
View file

@ -42,7 +42,6 @@
//#################################################
@import "main/partials/login";
@import "main/partials/messages";
@import "main/partials/texts";
@import "main/partials/viewer";
@import "main/partials/viewer-header";

74
frontend/resources/styles/main/partials/messages.scss
View file

@ -1,74 +0,0 @@
// Messages
.message {
position: fixed;
top: 0;
left: 0px;
width: 100%;
height: 40px;
z-index: 13;
display: flex;
justify-content: center;
align-items: center;
.close-button {
position: absolute;
right: 0px;
top: 0px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
svg {
fill: $color-black;
height: 18px;
width: 18px;
transform: rotate(45deg);
}
&:hover {
opacity: .8;
}
}
.message-content {
color: $color-white;
span {
font-size: $fs18;
max-width: 60%;
}
}
&.error {
background-color: $color-danger;
border-color: $color-danger-dark;
}
&.success {
background-color: $color-success;
border-color: $color-success-dark;
}
&.info {
background-color: $color-info;
border-color: $color-info-dark;
}
&.quick {
.close-button {
display: none;
}
}
&.hide-message {
@include animation(0, .6s, fadeOutUp);
}
}