mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 01:01:30 -05:00
add visual message notifications
This commit is contained in:
parent
290e7fdac8
commit
755b56e3f9
3 changed files with 107 additions and 2 deletions
|
@ -17,8 +17,8 @@ $color-primary: #78dbbe;
|
||||||
$color-success: #b6dd75;
|
$color-success: #b6dd75;
|
||||||
$color-complete : #a599c6;
|
$color-complete : #a599c6;
|
||||||
$color-warning: #e6a16f;
|
$color-warning: #e6a16f;
|
||||||
$color-danger: #cf6d5d;
|
$color-danger: #de4762;
|
||||||
$color-info: #6b9ecc;
|
$color-info: #59b9e2;
|
||||||
|
|
||||||
// Mixing Color varriable for creating both light and dark colors
|
// Mixing Color varriable for creating both light and dark colors
|
||||||
$mix-percentage-dark: 81%;
|
$mix-percentage-dark: 81%;
|
||||||
|
|
|
@ -842,3 +842,97 @@ input[type=range]:focus::-ms-fill-upper {
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Messages
|
||||||
|
.message {
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
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;
|
||||||
|
min-height: 100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: $medium $big;
|
||||||
|
position: relative;
|
||||||
|
width: 600px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: $fs18;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
|
@ -15,6 +15,16 @@
|
||||||
[uxbox.ui.dashboard.colors :as colors]))
|
[uxbox.ui.dashboard.colors :as colors]))
|
||||||
|
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
;; Messages
|
||||||
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
(defn messages-render
|
||||||
|
[]
|
||||||
|
(html
|
||||||
|
[:div.message.error
|
||||||
|
[:div.message-body
|
||||||
|
[:span.close i/close]
|
||||||
|
[:span "Something wrong has happened"]]]))
|
||||||
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
;; Page: projects
|
;; Page: projects
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
|
||||||
|
@ -22,6 +32,7 @@
|
||||||
[own]
|
[own]
|
||||||
(html
|
(html
|
||||||
[:main.dashboard-main
|
[:main.dashboard-main
|
||||||
|
(messages-render)
|
||||||
(header)
|
(header)
|
||||||
[:section.dashboard-content
|
[:section.dashboard-content
|
||||||
(projects/menu)
|
(projects/menu)
|
||||||
|
|
Loading…
Add table
Reference in a new issue