jiti-meet/css/_toastr.scss

108 lines
2.2 KiB
SCSS

/*
* Toastr
* Copyright 2012-2014 John Papa and Hans Fjällemark.
* All Rights Reserved.
* Use, reproduction, distribution, and modification of this code is subject to the terms and
* conditions of the MIT license, available at http://www.opensource.org/licenses/mit-license.php
*
* Author: John Papa and Hans Fjällemark
* Project: https://github.com/CodeSeven/toastr
*
* Last updated: October 13, 2016
*/
.toast-title,
.toast-message .title {
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,
.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 {
color: $notificationColor;
background: transparent;
font-size: 15px;
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 {
@include opacity(1);
}
.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($notificationOpacity);
}
.toast:hover {
@include opacity(1);
}
#toast-container {
position: fixed;
z-index: $notificationZ;
}
#toast-container.notification-bottom-right {
$videoOffset: 2 * ($thumbnailVideoMargin + $thumbnailsBorder) + $thumbnailVideoBorder;
bottom: 135px;
right: $filmstripToggleButtonWidth + $videoOffset;
}
#toast-container * {
@include box-sizing(border-box);
}
#toast-container .toast {
width: $notificationWidth;
margin: 0 0 8px;
}