mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-04-15 03:01:37 -05:00
Introduce new notification and alerts components
This commit is contained in:
John O'Nolan
Hannah Wolfe
parent
cf517c71d6
commit
4b39f88e99
6 changed files with 215 additions and 19 deletions
|
|
@ -1,15 +1,25 @@
|
|||
/* Notifications
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-notification {
|
||||
/* Base notification style */
|
||||
.gh-notifications {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Base notification style */
|
||||
.gh-notification {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
padding: 4px;
|
||||
width: 220px;
|
||||
border: #e1e1e1 1px solid;
|
||||
background: rgba(255,255,255,0.93);
|
||||
background: rgba(255,255,255,0.9);
|
||||
border-radius: 4px;
|
||||
box-shadow: rgba(0,0,0,0.06) 0 1px 7px;
|
||||
color: #828282;
|
||||
|
|
@ -17,6 +27,10 @@
|
|||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.gh-notification:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gh-notification-content {
|
||||
flex-grow: 1;
|
||||
padding: 10px 15px;
|
||||
|
|
@ -24,8 +38,9 @@
|
|||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.gh-notification:hover {
|
||||
cursor: pointer;
|
||||
.gh-notification em {
|
||||
color: var(--blue);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.gh-notification:hover .gh-notification-content {
|
||||
|
|
@ -47,3 +62,147 @@
|
|||
background: #fff;
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
/* Red notification
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-notification-red {
|
||||
border: color(var(--red) lightness(+28%)) 1px solid;
|
||||
}
|
||||
|
||||
.gh-notification-red em {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.gh-notification-red:hover .gh-notification-content {
|
||||
background: color(var(--red) lightness(+40%));
|
||||
}
|
||||
|
||||
/* Green notification
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-notification-green {
|
||||
border: color(var(--green) lightness(+28%)) 1px solid;
|
||||
}
|
||||
|
||||
.gh-notification-green em {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.gh-notification-green:hover .gh-notification-content {
|
||||
background: color(var(--green) lightness(+40%));
|
||||
}
|
||||
|
||||
/* Alerts
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
/* Alert wrapper, top of screen */
|
||||
.gh-alerts {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Base alert style */
|
||||
.gh-alert {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px 15px;
|
||||
border-bottom: #e1e1e1 1px solid;
|
||||
}
|
||||
|
||||
.gh-alert-content {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.3em;
|
||||
font-weight: 200;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
.gh-alert a {
|
||||
text-decoration: underline;
|
||||
font-weight: 400;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
.gh-alert-close {
|
||||
flex-shrink: 0;
|
||||
margin-left: 20px;
|
||||
padding: 5px;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
.gh-alert-close:hover {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
|
||||
/* Blue alert
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-alert-blue {
|
||||
border-bottom: color(var(--blue) lightness(-10%)) 1px solid;
|
||||
background: var(--blue);
|
||||
color: #fff;
|
||||
}
|
||||
.gh-alert-blue a {
|
||||
color: #fff;
|
||||
}
|
||||
.gh-alert-blue .gh-alert-close:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Red alert
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-alert-red {
|
||||
border-bottom: color(var(--red) lightness(-10%)) 1px solid;
|
||||
background: var(--red);
|
||||
color: #fff;
|
||||
}
|
||||
.gh-alert-red a {
|
||||
color: #fff;
|
||||
}
|
||||
.gh-alert-red .gh-alert-close:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Green alert
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-alert-green {
|
||||
border-bottom: color(var(--green) lightness(-7%)) 1px solid;
|
||||
background: var(--green);
|
||||
color: #fff;
|
||||
}
|
||||
.gh-alert-green a {
|
||||
color: #fff;
|
||||
}
|
||||
.gh-alert-green .gh-alert-close:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Black alert
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-alert-black {
|
||||
border-bottom: color(var(--darkgrey) lightness(-10%)) 1px solid;
|
||||
background: var(--darkgrey);
|
||||
color: #fff;
|
||||
}
|
||||
.gh-alert-black a {
|
||||
color: #fff;
|
||||
}
|
||||
.gh-alert-black .gh-alert-close:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Yellow alert
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-alert-yellow {
|
||||
border-bottom: #e9ebb6 1px solid;
|
||||
background: #fdffb6;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -177,6 +177,7 @@
|
|||
"font-stretch",
|
||||
"text-rendering",
|
||||
"font-feature-settings",
|
||||
"user-select",
|
||||
"src",
|
||||
"opacity",
|
||||
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
|
||||
|
|
|
|||
|
|
@ -3,10 +3,16 @@
|
|||
|
||||
.gh-viewport {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.gh-viewport-container {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.gh-nav {
|
||||
flex: 0 0 220px;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -112,10 +112,10 @@ select {
|
|||
color: var(--darkgrey);
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
user-select: text;
|
||||
transition: border-color 0.15s linear;
|
||||
|
||||
-webkit-appearance: none;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.gh-input.error,
|
||||
|
|
@ -138,9 +138,8 @@ textarea {
|
|||
width: 100%;
|
||||
height: auto;
|
||||
line-height: 1.5;
|
||||
resize: vertical;
|
||||
|
||||
user-select: text;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@
|
|||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,50 @@
|
|||
<div class="gh-viewport">
|
||||
<a class="sr-only sr-only-focusable" href="#gh-main">Skip to main content</a>
|
||||
<div class="gh-viewport">
|
||||
|
||||
{{#unless signedOut}}
|
||||
{{partial "nav-menu"}}
|
||||
{{/unless}}
|
||||
<!-- TODO: Rename gh-alerts, remove location attr -->
|
||||
{{gh-notifications location="top" notify="topNotificationChange"}}
|
||||
<!-- TODO: SHOULD RENDER LIKE
|
||||
<aside id="ember754" class="gh-alerts">
|
||||
<article class="gh-alert gh-alert-blue">
|
||||
<div class="gh-alert-content">
|
||||
<a href="https://ghost.org/download">Ghost 0.6.4</a> is available! Hot Damn. Please <a href="http://support.ghost.org/how-to-upgrade/" target="_blank">upgrade</a> now.
|
||||
</div>
|
||||
<button class="gh-alert-close icon-x" data-ember-action="779"><span class="hidden">Close</span></button>
|
||||
</article>
|
||||
</aside>
|
||||
-->
|
||||
|
||||
{{gh-notifications location="top" notify="topNotificationChange"}}
|
||||
<div class="gh-viewport-container">
|
||||
|
||||
<main id="gh-main" class="gh-main" role="main" data-notification-count={{topNotificationCount}}>
|
||||
{{outlet}}
|
||||
{{gh-notifications location="bottom"}}
|
||||
</main>
|
||||
{{#unless signedOut}}
|
||||
{{partial "nav-menu"}}
|
||||
{{/unless}}
|
||||
|
||||
{{outlet "modal"}}
|
||||
{{outlet "settings-menu"}}
|
||||
<main id="gh-main" class="gh-main" role="main" data-notification-count={{topNotificationCount}}>
|
||||
{{outlet}}
|
||||
|
||||
<!-- TODO: Remove location attr -->
|
||||
{{gh-notifications location="bottom"}}
|
||||
<!-- TODO: SHOULD RENDER LIKE
|
||||
<aside id="ember721" class="ember-view gh-notifications">
|
||||
<article class="gh-notification gh-notification-green">
|
||||
<div class="gh-notification-content">
|
||||
<strong>Hannah Wolfe</strong> just updated the post <em>12 Reasons Why You're Not Selling Anything</em>.
|
||||
</div>
|
||||
<button class="gh-notification-close icon-x" data-ember-action="1077"><span class="hidden">Close</span></button>
|
||||
</article>
|
||||
<article class="gh-notification">
|
||||
<div class="gh-notification-content">
|
||||
<strong>Hannah Wolfe</strong> just updated the post <em>20 Reasons Why You're Not Selling Anything</em>.
|
||||
</div>
|
||||
<button class="gh-notification-close icon-x" data-ember-action="1077"><span class="hidden">Close</span></button>
|
||||
</article>
|
||||
</aside>
|
||||
-->
|
||||
</main>
|
||||
|
||||
{{outlet "modal"}}
|
||||
{{outlet "settings-menu"}}
|
||||
|
||||
</div>{{!gh-viewport-container}}
|
||||
</div>{{!gh-viewport}}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue