mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-13 22:41:32 -05:00
7782c48383
- Uses Node Bourbon https://www.npmjs.org/package/node-bourbon - Produces source maps - Removed all ruby dependencie History: - Remove bourbon from package and cleanup grunt tasks - Un-bourbon keyframe animations - Un-bourbon transitions - Un-bourbon box-sizing - Un-bourbon font-feature-settings - Import bourbon clearfix mixin - Un-bourbon linear gradients - Un-bourbon input types - Un-bourbon positions - Un-bourbon transforms - Un-bourbon notification animations - Un-bourbon uploader box-sizing - Un-bourbon border-radius - Un-bourbon splitbutton transitions - Add triangle mixin - Un-bourbon default container positioning - Un-bourbon flexbox properties - Fix triangle mixin - It now has the same output as the Bourbon mixin - Add autoprefixer - Correct global default font size - Remove unwanted prefixes - Because, y'know, autoprefixer - Output from node sass migration - Includes all the files we usually have, plus source maps
135 lines
No EOL
2.6 KiB
SCSS
135 lines
No EOL
2.6 KiB
SCSS
//
|
|
// Notifications
|
|
// --------------------------------------------------
|
|
|
|
// Wrapper
|
|
.notifications {
|
|
|
|
@media (min-width: 401px) {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 980;
|
|
width: 300px;
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 9999;
|
|
}
|
|
}
|
|
|
|
// TODO: What is this? Docs plz.
|
|
.js-bb-notification {
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
//
|
|
// Base Notification
|
|
// --------------------------------------------------
|
|
|
|
.notification {
|
|
@include icon($i-notification) {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 44px;
|
|
padding: 14px 15px;
|
|
text-align: center;
|
|
color: rgba(255,255,255,0.8);
|
|
background: rgba(0,0,0,0.1);
|
|
};
|
|
width: 100%;
|
|
min-height: 40px;
|
|
max-height: 253px;
|
|
margin: 0 0 15px 0;
|
|
color: rgba(255,255,255,0.9);
|
|
background: $blue;
|
|
position: relative;
|
|
box-shadow: $shadow;
|
|
transform: translateZ(0);
|
|
|
|
@media (max-width: 400px) {
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.notification-message {
|
|
display: block;
|
|
padding: 10px 43px 10px 57px;
|
|
max-height: 253px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 34px;
|
|
@include icon-after($i-close) {
|
|
padding: 10px;
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 1px;
|
|
};
|
|
color: rgba(255,255,255,0.6);
|
|
&:hover {
|
|
color: #fff;
|
|
}
|
|
} // .close
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Individual Notifications
|
|
// --------------------------------------------------
|
|
|
|
.notification-success {
|
|
@extend .notification;
|
|
@include icon($i-success);
|
|
background: $green;
|
|
|
|
&.notification-passive {
|
|
animation: fade-out 1s linear;
|
|
animation-delay: 3s;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
&.notification-passive:hover {
|
|
animation: fade-in-snap 0.2s linear;
|
|
}
|
|
}
|
|
|
|
.notification-error {
|
|
@extend .notification;
|
|
@include icon($i-error);
|
|
background: $red;
|
|
}
|
|
|
|
|
|
.notification-warn {
|
|
@extend .notification;
|
|
@include icon($i-info);
|
|
background: $orange;
|
|
}
|
|
|
|
.notification-info {
|
|
@extend .notification;
|
|
@include icon($i-info);
|
|
background: $blue;
|
|
}
|
|
|
|
// Hide extra space taken up by update notification
|
|
.update-available main {
|
|
bottom: 56px;
|
|
} |