Applied updated design for notifications
This commit is contained in:
Maxim Voloshin
yanas
parent
e1c5ea11bc
commit
abb1482456
113
css/_mixins.scss
113
css/_mixins.scss
|
|
@ -19,11 +19,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin flex() {
|
@mixin flex() {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -moz-box;
|
display: -moz-box;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -45,53 +45,92 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin circle($diameter) {
|
@mixin circle($diameter) {
|
||||||
width: $diameter;
|
width: $diameter;
|
||||||
height: $diameter;
|
height: $diameter;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin absoluteAligning($sizeX, $sizeY) {
|
@mixin absoluteAligning($sizeX, $sizeY) {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@include transform(translate(-#{$sizeX / 2}, -#{$sizeY / 2}))
|
@include transform(translate(-#{$sizeX / 2}, -#{$sizeY / 2}))
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin transform($func) {
|
@mixin transform($func) {
|
||||||
-moz-transform: $func;
|
-moz-transform: $func;
|
||||||
-ms-transform: $func;
|
-ms-transform: $func;
|
||||||
-webkit-transform: $func;
|
-webkit-transform: $func;
|
||||||
-o-transform: $func;
|
-o-transform: $func;
|
||||||
transform: $func;
|
transform: $func;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin transition($transition...) {
|
@mixin transition($transition...) {
|
||||||
-moz-transition: $transition;
|
-moz-transition: $transition;
|
||||||
-o-transition: $transition;
|
-o-transition: $transition;
|
||||||
-webkit-transition: $transition;
|
-webkit-transition: $transition;
|
||||||
transition: $transition;
|
transition: $transition;
|
||||||
}
|
|
||||||
|
|
||||||
@mixin box-shadow($type, $h, $y, $blur, $color) {
|
|
||||||
-webkit-box-shadow: $type $h $y $blur $color;
|
|
||||||
-moz-box-shadow: $type $h $y $blur $color;
|
|
||||||
box-shadow: $type $h $y $blur $color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Mixin styling placeholder
|
* Mixin styling placeholder
|
||||||
**/
|
**/
|
||||||
@mixin placeholder() {
|
@mixin placeholder() {
|
||||||
$selectors: (
|
$selectors: (
|
||||||
"::-webkit-input-placeholder",
|
"::-webkit-input-placeholder",
|
||||||
"::-moz-placeholder",
|
"::-moz-placeholder",
|
||||||
":-moz-placeholder",
|
":-moz-placeholder",
|
||||||
":-ms-input-placeholder"
|
":-ms-input-placeholder"
|
||||||
);
|
);
|
||||||
|
|
||||||
@each $selector in $selectors {
|
@each $selector in $selectors {
|
||||||
#{$selector} {
|
#{$selector} {
|
||||||
@content;
|
@content;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin box-shadow($h, $y, $blur, $color, $inset: false) {
|
||||||
|
@if $inset {
|
||||||
|
-webkit-box-shadow: inset $h $y $blur $color;
|
||||||
|
-moz-box-shadow: inset $h $y $blur $color;
|
||||||
|
box-shadow: inset $h $y $blur $color;
|
||||||
|
} @else {
|
||||||
|
-webkit-box-shadow: $h $y $blur $color;
|
||||||
|
-moz-box-shadow: $h $y $blur $color;
|
||||||
|
box-shadow: $h $y $blur $color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin no-box-shadow {
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
-moz-box-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin box-sizing($box-model) {
|
||||||
|
-webkit-box-sizing: $box-model; // Safari <= 5
|
||||||
|
-moz-box-sizing: $box-model; // Firefox <= 19
|
||||||
|
box-sizing: $box-model;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin border-radius($radius) {
|
||||||
|
-webkit-border-radius: $radius;
|
||||||
|
border-radius: $radius;
|
||||||
|
/* stops bg color from leaking outside the border: */
|
||||||
|
background-clip: padding-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin opacity($opacity) {
|
||||||
|
opacity: $opacity;
|
||||||
|
$opacity-ie: $opacity * 100;
|
||||||
|
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie);
|
||||||
|
filter: alpha(opacity=$opacity-ie); //IE8
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin text-truncate {
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
240
css/_toastr.scss
240
css/_toastr.scss
|
|
@ -7,206 +7,100 @@
|
||||||
*
|
*
|
||||||
* Author: John Papa and Hans Fjällemark
|
* Author: John Papa and Hans Fjällemark
|
||||||
* Project: https://github.com/CodeSeven/toastr
|
* Project: https://github.com/CodeSeven/toastr
|
||||||
|
*
|
||||||
|
* Last updated: October 13, 2016
|
||||||
*/
|
*/
|
||||||
.toast-title {
|
|
||||||
|
.toast-title,
|
||||||
|
.toast-message .nickname {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
margin: 0 0 3px;
|
||||||
|
@include text-truncate;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast-message {
|
.toast-message {
|
||||||
-ms-word-wrap: break-word;
|
-ms-word-wrap: break-word;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast-message a,
|
.toast-message a,
|
||||||
.toast-message label {
|
.toast-message label,
|
||||||
color: #ffffff;
|
.toast-message .connected,
|
||||||
}
|
.toast-message .disconnected {
|
||||||
|
color: $notificationLinkColor;
|
||||||
.toast-message .nickname {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast-message a:hover {
|
|
||||||
color: #cccccc;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toast-message a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-message br {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// close button
|
||||||
.toast-close-button {
|
.toast-close-button {
|
||||||
position: relative;
|
color: $notificationColor;
|
||||||
right: -0.3em;
|
background: transparent;
|
||||||
top: -0.3em;
|
|
||||||
float: right;
|
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
height: 15px;
|
line-height: 1.2;
|
||||||
width: 15px;
|
|
||||||
font-weight: bold;
|
height: 20px;
|
||||||
color: #ffffff;
|
width: 20px;
|
||||||
background: transparent !important;
|
padding: 0;
|
||||||
-webkit-text-shadow: 0 1px 0 #ffffff;
|
border: 0;
|
||||||
text-shadow: 0 1px 0 #ffffff;
|
margin: -6px -10px 0 0;
|
||||||
opacity: 0.8;
|
float: right;
|
||||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
|
||||||
filter: alpha(opacity=80);
|
cursor: pointer;
|
||||||
|
@include opacity(0.4);
|
||||||
|
/* Additional properties for button version
|
||||||
|
iOS requires the button element instead of an anchor tag.
|
||||||
|
If you want the anchor version, it requires `href="#"`. */
|
||||||
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast-close-button:hover,
|
.toast-close-button:hover,
|
||||||
.toast-close-button:focus {
|
.toast-close-button:focus {
|
||||||
color: #ffffff;
|
@include opacity(1);
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: 1;
|
|
||||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
|
||||||
filter: alpha(opacity=100);
|
|
||||||
}
|
}
|
||||||
/*Additional properties for button version
|
|
||||||
iOS requires the button element instead of an anchor tag.
|
|
||||||
If you want the anchor version, it requires `href="#"`.*/
|
.toast {
|
||||||
button.toast-close-button {
|
color: $notificationColor;
|
||||||
padding: 0;
|
background-color: $notificationBackground;
|
||||||
cursor: pointer;
|
|
||||||
background: transparent;
|
font-size: $notificationFontSize;
|
||||||
border: 0;
|
|
||||||
-webkit-appearance: none;
|
padding: $notificationPadding;
|
||||||
|
border: 1px solid lighten($notificationBackground, 10%);
|
||||||
|
|
||||||
|
@include border-radius($notificationBorderRadius);
|
||||||
|
@include box-shadow(1px, 1px, 2px, rgba(0,0,0,0.3));
|
||||||
|
@include opacity(0.9);
|
||||||
}
|
}
|
||||||
.toast-top-full-width {
|
|
||||||
top: 0;
|
.toast:hover {
|
||||||
right: 0;
|
@include opacity(1);
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.toast-bottom-full-width {
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.toast-top-left {
|
|
||||||
top: 12px;
|
|
||||||
left: 12px;
|
|
||||||
}
|
|
||||||
.toast-top-right {
|
|
||||||
top: 12px;
|
|
||||||
right: 12px;
|
|
||||||
}
|
|
||||||
.toast-bottom-right {
|
|
||||||
right: 12px;
|
|
||||||
bottom: 12px;
|
|
||||||
}
|
|
||||||
.toast-bottom-left {
|
|
||||||
bottom: 12px;
|
|
||||||
left: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#toast-container {
|
#toast-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 1012;
|
z-index: $notificationZ;
|
||||||
/*overrides*/
|
|
||||||
|
|
||||||
}
|
|
||||||
#toast-container * {
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
#toast-container > div {
|
|
||||||
margin: 0 0 6px;
|
|
||||||
padding: 15px 15px 15px 15px;
|
|
||||||
width: 300px;
|
|
||||||
-moz-border-radius: 3px 3px 3px 3px;
|
|
||||||
-webkit-border-radius: 3px 3px 3px 3px;
|
|
||||||
border-radius: 3px 3px 3px 3px;
|
|
||||||
background-position: 15px center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
-moz-box-shadow: 0 0 12px #999999;
|
|
||||||
-webkit-box-shadow: 0 0 12px #999999;
|
|
||||||
box-shadow: 0 0 12px #999999;
|
|
||||||
color: #ffffff;
|
|
||||||
opacity: 0.8;
|
|
||||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
|
||||||
filter: alpha(opacity=80);
|
|
||||||
}
|
|
||||||
#toast-container > :hover {
|
|
||||||
-moz-box-shadow: 0 0 12px #000000;
|
|
||||||
-webkit-box-shadow: 0 0 12px #000000;
|
|
||||||
box-shadow: 0 0 12px #000000;
|
|
||||||
opacity: 1;
|
|
||||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
|
||||||
filter: alpha(opacity=100);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
#toast-container .toast-info,
|
|
||||||
#toast-container .toast-success,
|
|
||||||
#toast-container .toast-error,
|
|
||||||
#toast-container .toast-warning
|
|
||||||
{
|
|
||||||
padding: 10px 10px 10px 10px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#toast-container.toast-top-full-width > div,
|
|
||||||
#toast-container.toast-bottom-full-width > div {
|
|
||||||
width: 100%;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
.toast {
|
|
||||||
background-color: #030303;
|
|
||||||
}
|
|
||||||
.toast-success {
|
|
||||||
background-color: #51a351;
|
|
||||||
}
|
|
||||||
.toast-error {
|
|
||||||
background-color: #bd362f;
|
|
||||||
}
|
|
||||||
.toast-info {
|
|
||||||
background-color: #2f96b4;
|
|
||||||
}
|
|
||||||
.toast-warning {
|
|
||||||
background-color: #f89406;
|
|
||||||
}
|
|
||||||
/*Responsive Design*/
|
|
||||||
@media all and (max-width: 240px) {
|
|
||||||
#toast-container > div {
|
|
||||||
padding: 8px 8px 8px 8px;
|
|
||||||
width: 11em;
|
|
||||||
}
|
|
||||||
#toast-container .toast-close-button {
|
|
||||||
right: -0.2em;
|
|
||||||
top: -0.2em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media all and (min-width: 241px) and (max-width: 480px) {
|
|
||||||
#toast-container > div {
|
|
||||||
padding: 8px 8px 8px 8px;
|
|
||||||
width: 18em;
|
|
||||||
}
|
|
||||||
#toast-container .toast-close-button {
|
|
||||||
right: -0.2em;
|
|
||||||
top: -0.2em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media all and (min-width: 481px) and (max-width: 768px) {
|
|
||||||
#toast-container > div {
|
|
||||||
padding: 15px 15px 15px 15px;
|
|
||||||
width: 25em;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#toast-container.notification-bottom-right {
|
#toast-container.notification-bottom-right {
|
||||||
bottom: 140px;
|
bottom: 135px;
|
||||||
right: 5px;
|
right: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#toast-container.notification-bottom-right-center {
|
#toast-container * {
|
||||||
right: 205px;
|
@include box-sizing(border-box);
|
||||||
}
|
}
|
||||||
|
|
||||||
#toast-container .toast-info {
|
#toast-container .toast {
|
||||||
-webkit-box-shadow: none;
|
width: 200px;
|
||||||
box-shadow: none;
|
margin: 0 0 8px;
|
||||||
}
|
|
||||||
|
|
||||||
.toast-close-button {
|
|
||||||
right: -7px;
|
|
||||||
top: -19px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#toast-container .toast-info {
|
|
||||||
background-color: black;
|
|
||||||
border: 1px solid #3a3a3a;
|
|
||||||
width: 220px;
|
|
||||||
padding: 10px 10px 10px 50px;
|
|
||||||
}
|
}
|
||||||
|
|
@ -66,6 +66,16 @@ $rateStarActivity: #165ecc;
|
||||||
$rateStarSize: 34px;
|
$rateStarSize: 34px;
|
||||||
$feedbackCancelFontColor: #333;
|
$feedbackCancelFontColor: #333;
|
||||||
|
|
||||||
|
// Notifications
|
||||||
|
$notificationFontSize: 13px;
|
||||||
|
$notificationColor: #FFFFFF;
|
||||||
|
$notificationBackground: $tooltipBg;
|
||||||
|
$notificationTitleColor: $notificationColor;
|
||||||
|
$notificationMessageColor: $notificationColor;
|
||||||
|
$notificationPadding: 15px 20px;
|
||||||
|
$notificationBorderRadius: 4px;
|
||||||
|
$notificationLinkColor: $notificationColor;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Misc.
|
* Misc.
|
||||||
*/
|
*/
|
||||||
|
|
@ -79,6 +89,7 @@ $sidebarWidth: 200px;
|
||||||
$tooltipsZ: 901;
|
$tooltipsZ: 901;
|
||||||
$toolbarZ: 900;
|
$toolbarZ: 900;
|
||||||
$overlayZ: 800;
|
$overlayZ: 800;
|
||||||
|
$notificationZ: 1012;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Font Colors TODO: Change colors when general dialogs are implemented.
|
* Font Colors TODO: Change colors when general dialogs are implemented.
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
@include box-shadow(inset, 0, 0, 1px, $buttonShadowColor);
|
@include box-shadow(0, 0, 1px, $buttonShadowColor, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
&_light {
|
&_light {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue