Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-10 17:00:36 -05:00
Code Issues 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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/resources/images/icons/msg-error.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="40" height="40">
<path d="M0 0v40h40V0H0zm2.928 2.932h34.144v34.136H2.928V2.932zM9.726 8.36v3.631h-3.63v3.492h3.63v3.631h3.492v-3.63h3.631V11.99h-3.63v-3.63H9.725zm17.6 0v3.631h-3.63v3.492h3.63v3.631h3.492v-3.63h3.631V11.99h-3.63v-3.63h-3.493zm2.87 18.031H9.843v2.88h-2.72v3.012h5.434v-2.88h14.886v2.88h5.434v-3.012h-2.68v-2.88z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 353 B

3
frontend/resources/images/icons/msg-info.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="40" height="40">
<path d="M0 0v40h40V0H0zm2.928 2.932h34.144v34.136H2.928V2.932zm15.36 4.131v3.626h3.424V7.063h-3.424zm0 6.4v19.474h3.424V13.463h-3.424z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 177 B

3
frontend/resources/images/icons/msg-success.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="40" height="40">
<path d="M0 0v40h40V0H0zm2.928 2.932h34.144v34.136H2.928V2.932zm27.762 7.553L16.273 24.902 9.31 17.939l-2.306 2.306 9.27 9.27 16.722-16.723-2.306-2.307z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 194 B

3
frontend/resources/images/icons/msg-warning.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="40" height="40">
<path d="M0 0v40h40V0H0zm2.928 2.932h34.144v34.136H2.928V2.932zm15.36 4.131v19.474h3.424V7.063h-3.424zm0 22.248v3.626h3.424V29.31h-3.424z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 179 B

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;

177
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);
}
}

7
frontend/src/uxbox/main/ui/auth.cljs
View file

@ -39,6 +39,13 @@
locale (mf/deref i18n/locale)]
[:*
[:& messages]
[:div.msg-banner.error
[:div.msg-content
[:div.icon i/msg-error]
[:span "Lorem ipsum dolor sit amet"]
[:div.close-button i/close]]]
[:div.auth
[:section.auth-sidebar
[:a.logo {:href "/#/"} i/logo]

13
frontend/src/uxbox/main/ui/auth/register.cljs
View file

@ -28,13 +28,14 @@
(mf/defc demo-warning
[_]
[:div.featured-note.warning
[:span
[:strong "WARNING: "]
"This is a " [:strong "demo"] " service, "
[:strong "DO NOT USE"] " for real work, "
" the projects will be periodicaly wiped."]])
[:div.msg-inline.warning.quick
[:div.icon i/msg-warning]
[:span.msg-text
"WARNING: This is a service, DO NOT USE for real work, the projects will be periodicaly wiped."]
[:div.close-button i/close]])
(s/def ::fullname ::fm/not-empty-string)
(s/def ::password ::fm/not-empty-string)

4
frontend/src/uxbox/main/ui/icons.cljs
View file

@ -67,6 +67,10 @@
(def mail (icon-xref :mail))
(def minus (icon-xref :minus))
(def move (icon-xref :move))
(def msg-error (icon-xref :msg-error))
(def msg-success (icon-xref :msg-success))
(def msg-warning (icon-xref :msg-warning))
(def msg-info (icon-xref :msg-info))
(def navigate (icon-xref :navigate))
(def options (icon-xref :options))
(def organize (icon-xref :organize))