diff --git a/resources/styles/dependencies/colors.scss b/resources/styles/dependencies/colors.scss index 62f4ed6e7b..f9bbb6da05 100644 --- a/resources/styles/dependencies/colors.scss +++ b/resources/styles/dependencies/colors.scss @@ -17,8 +17,8 @@ $color-primary: #78dbbe; $color-success: #b6dd75; $color-complete : #a599c6; $color-warning: #e6a16f; -$color-danger: #cf6d5d; -$color-info: #6b9ecc; +$color-danger: #de4762; +$color-info: #59b9e2; // Mixing Color varriable for creating both light and dark colors $mix-percentage-dark: 81%; diff --git a/resources/styles/framework.scss b/resources/styles/framework.scss index 1e4f3695b7..c9527c35e0 100644 --- a/resources/styles/framework.scss +++ b/resources/styles/framework.scss @@ -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); + } + +} diff --git a/src/uxbox/ui/dashboard.cljs b/src/uxbox/ui/dashboard.cljs index eec1e09532..f5330caf83 100644 --- a/src/uxbox/ui/dashboard.cljs +++ b/src/uxbox/ui/dashboard.cljs @@ -15,6 +15,16 @@ [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 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -22,6 +32,7 @@ [own] (html [:main.dashboard-main + (messages-render) (header) [:section.dashboard-content (projects/menu)