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() {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -45,53 +45,92 @@
|
|||
}
|
||||
|
||||
@mixin circle($diameter) {
|
||||
width: $diameter;
|
||||
height: $diameter;
|
||||
border-radius: 50%;
|
||||
width: $diameter;
|
||||
height: $diameter;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@mixin absoluteAligning($sizeX, $sizeY) {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
@include transform(translate(-#{$sizeX / 2}, -#{$sizeY / 2}))
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
@include transform(translate(-#{$sizeX / 2}, -#{$sizeY / 2}))
|
||||
}
|
||||
|
||||
@mixin transform($func) {
|
||||
-moz-transform: $func;
|
||||
-ms-transform: $func;
|
||||
-webkit-transform: $func;
|
||||
-o-transform: $func;
|
||||
transform: $func;
|
||||
-moz-transform: $func;
|
||||
-ms-transform: $func;
|
||||
-webkit-transform: $func;
|
||||
-o-transform: $func;
|
||||
transform: $func;
|
||||
}
|
||||
|
||||
@mixin transition($transition...) {
|
||||
-moz-transition: $transition;
|
||||
-o-transition: $transition;
|
||||
-webkit-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;
|
||||
-moz-transition: $transition;
|
||||
-o-transition: $transition;
|
||||
-webkit-transition: $transition;
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
/**
|
||||
* Mixin styling placeholder
|
||||
**/
|
||||
@mixin placeholder() {
|
||||
$selectors: (
|
||||
"::-webkit-input-placeholder",
|
||||
"::-moz-placeholder",
|
||||
":-moz-placeholder",
|
||||
":-ms-input-placeholder"
|
||||
);
|
||||
$selectors: (
|
||||
"::-webkit-input-placeholder",
|
||||
"::-moz-placeholder",
|
||||
":-moz-placeholder",
|
||||
":-ms-input-placeholder"
|
||||
);
|
||||
|
||||
@each $selector in $selectors {
|
||||
#{$selector} {
|
||||
@content;
|
||||
}
|
||||
@each $selector in $selectors {
|
||||
#{$selector} {
|
||||
@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
|
||||
* Project: https://github.com/CodeSeven/toastr
|
||||
*
|
||||
* Last updated: October 13, 2016
|
||||
*/
|
||||
.toast-title {
|
||||
|
||||
.toast-title,
|
||||
.toast-message .nickname {
|
||||
font-weight: bold;
|
||||
margin: 0 0 3px;
|
||||
@include text-truncate;
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
-ms-word-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.toast-message a,
|
||||
.toast-message label {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.toast-message .nickname {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.toast-message a:hover {
|
||||
color: #cccccc;
|
||||
.toast-message label,
|
||||
.toast-message .connected,
|
||||
.toast-message .disconnected {
|
||||
color: $notificationLinkColor;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.toast-message a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.toast-message br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// close button
|
||||
.toast-close-button {
|
||||
position: relative;
|
||||
right: -0.3em;
|
||||
top: -0.3em;
|
||||
float: right;
|
||||
color: $notificationColor;
|
||||
background: transparent;
|
||||
|
||||
font-size: 15px;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
background: transparent !important;
|
||||
-webkit-text-shadow: 0 1px 0 #ffffff;
|
||||
text-shadow: 0 1px 0 #ffffff;
|
||||
opacity: 0.8;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
||||
filter: alpha(opacity=80);
|
||||
line-height: 1.2;
|
||||
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: -6px -10px 0 0;
|
||||
float: right;
|
||||
|
||||
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:focus {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
filter: alpha(opacity=100);
|
||||
@include opacity(1);
|
||||
}
|
||||
/*Additional properties for button version
|
||||
iOS requires the button element instead of an anchor tag.
|
||||
If you want the anchor version, it requires `href="#"`.*/
|
||||
button.toast-close-button {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
|
||||
|
||||
.toast {
|
||||
color: $notificationColor;
|
||||
background-color: $notificationBackground;
|
||||
|
||||
font-size: $notificationFontSize;
|
||||
|
||||
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;
|
||||
right: 0;
|
||||
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:hover {
|
||||
@include opacity(1);
|
||||
}
|
||||
|
||||
#toast-container {
|
||||
position: fixed;
|
||||
z-index: 1012;
|
||||
/*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;
|
||||
}
|
||||
z-index: $notificationZ;
|
||||
}
|
||||
|
||||
#toast-container.notification-bottom-right {
|
||||
bottom: 140px;
|
||||
right: 5px;
|
||||
bottom: 135px;
|
||||
right: 13px;
|
||||
}
|
||||
|
||||
#toast-container.notification-bottom-right-center {
|
||||
right: 205px;
|
||||
#toast-container * {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
#toast-container .toast-info {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
#toast-container .toast {
|
||||
width: 200px;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
|
@ -66,6 +66,16 @@ $rateStarActivity: #165ecc;
|
|||
$rateStarSize: 34px;
|
||||
$feedbackCancelFontColor: #333;
|
||||
|
||||
// Notifications
|
||||
$notificationFontSize: 13px;
|
||||
$notificationColor: #FFFFFF;
|
||||
$notificationBackground: $tooltipBg;
|
||||
$notificationTitleColor: $notificationColor;
|
||||
$notificationMessageColor: $notificationColor;
|
||||
$notificationPadding: 15px 20px;
|
||||
$notificationBorderRadius: 4px;
|
||||
$notificationLinkColor: $notificationColor;
|
||||
|
||||
/**
|
||||
* Misc.
|
||||
*/
|
||||
|
|
@ -79,6 +89,7 @@ $sidebarWidth: 200px;
|
|||
$tooltipsZ: 901;
|
||||
$toolbarZ: 900;
|
||||
$overlayZ: 800;
|
||||
$notificationZ: 1012;
|
||||
|
||||
/**
|
||||
* Font Colors TODO: Change colors when general dialogs are implemented.
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
|
||||
&:active {
|
||||
@include box-shadow(inset, 0, 0, 1px, $buttonShadowColor);
|
||||
@include box-shadow(0, 0, 1px, $buttonShadowColor, true);
|
||||
}
|
||||
|
||||
&_light {
|
||||
|
|
|
|||
Loading…
Reference in New Issue