app/styles/ember-notification-notifications.scss
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
$light-blue: #03a9f4;
$red: #F44336;
$green: #4CAF50;
div.ember-notification-notifications {
box-sizing: border-box;
.ember-notification-collapsible {
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}
.ember-notification-icon {
width: 21px;
float: left;
display: inline-block;
}
.ember-notification-collapsible {
width: 100%
}
.ember-notification-red-text {
color: $red
}
.ember-notification-left {
float: left !important;
}
.ember-notification-right {
float: right !important;
}
font-family: Arial, Helvetica, sans-serif;
.ultra-small {
font-size: 0.8rem;
margin: 0;
float: right;
padding: 0;
}
.ultra-small.fail {
color: $red;
}
.ultra-small.pending {
color: $green;
}
.ultra-small.success {
color: $green;
}
.ember-notification-light-blue {
background-color: $light-blue !important;
}
.ember-notification-red {
background-color: $red !important;
}
.ember-notification-green {
background-color: $green !important;
}
.ember-notification-secondary-content {
float: right;
color: #26a69a;
}
}
div.ember-notification-handle {
.ember-notification-tiny-spinner {
width: 20px !important;
height: 20px !important;
margin-right: 5px;
}
.ember-notification-handle-container {
margin-right: 5px;
}
.ember-notification-truncate {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ember-notification-counter {
display: inline-block;
margin-top: 3px
}
.ember-notification-white-text {
color: white
}
.ember-notification-indicator {
margin-top: 2px;
color: white
}
.ember-notification-notification-text {
margin-top: 3px;
}
.ember-notification-notification-open {
margin-top: 1px;
}
width: 100%;
height: 28px;
transition: background-color 500ms;
.ember-notification-notification-title {
@media (max-width: 400px) {
max-width: 60%;
}
@media (min-width: 401px) and (max-width: 1000px) {
max-width: 70%;
}
@media (min-width: 1000px) {
max-width: 80%;
}
display: inline-block;
margin-top: 2px;
}
.ember-notification-indicator {
margin-right: 3px;
}
span {
float: left;
font-weight: bold;
margin: auto;
width: calc(100vw - 250px);
line-height: 16px;
margin-bottom: 5px;
}
.ember-notification-tiny {
font-size: 1.1rem;
}
}
.ember-notification-anim-inactive-pull-up {
z-index: 10;
position: fixed;
-webkit-transition: bottom 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: bottom 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
.ember-notification-collection {
height: 0px;
}
}
.ember-notification-anim-inactive-pull-down {
z-index: 10;
position: fixed;
-webkit-transition: top 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: top 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
.ember-notification-collection {
height: 0px;
}
}
.ember-notification-anim-active-pull-up {
-webkit-transition: bottom 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: bottom 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.ember-notification-anim-active-pull-down {
-webkit-transition: top 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: top 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.ember-notification-notifications-active {
position: fixed;
background-color: #fff;
border-color: #fff !important;
z-index: 9;
overflow: hidden;
.ember-notification-collection {
height: unset;
}
div.ember-notification-pullout {
padding: 0;
margin: 0;
height: 175px;
overflow: scroll;
ul {
padding: 0;
margin: 0;
}
ul li i.mdi-av-loop {
-webkit-animation: spin 2s linear infinite;
}
ul li {
padding: 8px 10px;
border-top: 1px solid #ccc;
transition: background 1s ease;
}
ul li:first-child {
border-top: none;
}
ul li:hover {
background-color: rgb(245, 245, 245);
}
ul li span.timestamp {
float: right;
}
ul li span.dismiss {
width: 15px;
float: right;
margin-left: 10px;
}
}
}
@keyframes pending-glow {
5% { background-color: darken(rgb(245, 245, 245), 5%); box-shadow: 0 0 3px darken(rgb(245, 245, 245), 5%); }
10% { background-color: darken(rgb(245, 245, 245), 7%); box-shadow: 0 0 3px darken(rgb(245, 245, 245), 7%); }
20% { background-color: darken(rgb(245, 245, 245), 12%); box-shadow: 0 0 3px darken(rgb(245, 245, 245), 12%); }
30% { background-color: darken(rgb(245, 245, 245), 18%); box-shadow: 0 0 40px darken(rgb(245, 245, 245), 18%); }
40% { background-color: darken(rgb(245, 245, 245), 20%); box-shadow: 0 0 3px darken(rgb(245, 245, 245), 20%); }
}
.glow-pending {
animation: pending-glow 1000ms infinite;
-webkit-animation: pending-glow 1000ms infinite;
-moz-animation: pending-glow 1000ms infinite;
-o-animation: pending-glow 1000ms infinite;
}
.notifications.is-pullout-visible {
margin-bottom: 175px;
.progress {
display: none;
transition: display 1s ease-in-out;
}
}