diff --git a/core/client/app/styles/components/notifications.css b/core/client/app/styles/components/notifications.css index 8f07a7224c..c9c8782fbd 100644 --- a/core/client/app/styles/components/notifications.css +++ b/core/client/app/styles/components/notifications.css @@ -1,2 +1,49 @@ /* Notifications /* ---------------------------------------------------------- */ + +.gh-notification { + position: fixed; + bottom: 20px; + left: 20px; + display: flex; + padding: 4px; + width: 220px; + border: #e1e1e1 1px solid; + background: rgba(255,255,255,0.93); + border-radius: 4px; + box-shadow: rgba(0,0,0,0.06) 0 1px 7px; + color: #828282; + font-size: 1.2rem; + line-height: 1.4em; +} + +.gh-notification-content { + flex-grow: 1; + padding: 10px 15px; + border-radius: 3px; + transition: background 0.2s ease; +} + +.gh-notification:hover { + cursor: pointer; +} + +.gh-notification:hover .gh-notification-content { + background: color(var(--blue) lightness(+34%)); +} + +.gh-notification-close { + position: absolute; + top: 0; + right: 0; + padding: 6px 6px 5px 5px; + background: #fff; + border-radius: 0 4px 0 4px; + font-size: 7px; + line-height: 5px; +} + +.gh-notification-close:hover { + background: #fff; + color: var(--red); +} diff --git a/core/client/app/templates/components/gh-notification.hbs b/core/client/app/templates/components/gh-notification.hbs index 55e12823e8..1d52cf25a3 100644 --- a/core/client/app/templates/components/gh-notification.hbs +++ b/core/client/app/templates/components/gh-notification.hbs @@ -1,6 +1,6 @@ -
- +
+
{{message.message}} - - -
+ + +