149 lines
3.6 KiB
SCSS
149 lines
3.6 KiB
SCSS
/***** Notifications *****/
|
|
.notification {
|
|
border: 1px solid;
|
|
display: table;
|
|
font-family: sans-serif;
|
|
font-size: 12px;
|
|
padding: 13px 15px;
|
|
transition: height .2s;
|
|
width: 100%;
|
|
color: #555;
|
|
}
|
|
|
|
.notification a {
|
|
color: #158ec2;
|
|
}
|
|
|
|
.notification-inner {
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
max-width: 980px;
|
|
}
|
|
|
|
.notification-icon, .notification-text, .notification-dismiss {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.notification-text {
|
|
padding: 0 15px;
|
|
width: 100%;
|
|
}
|
|
|
|
.notification + .notification {
|
|
margin-bottom: -1px;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
/* Error */
|
|
|
|
.notification-error {
|
|
background: #ffeded;
|
|
border-color: #f7cbcb;
|
|
}
|
|
|
|
.notification-error .notification-icon::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23555555'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* Notice */
|
|
|
|
.notification-notice {
|
|
background: #dbf3ff;
|
|
border-color: #b5e0f5;
|
|
}
|
|
|
|
.notification-notice .notification-icon::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* Alert / Lock */
|
|
|
|
.notification-alert {
|
|
color: #ad5e18;
|
|
background: #fff8ed;
|
|
border-color: #fcdba9;
|
|
}
|
|
|
|
.notification-alert .notification-icon::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ad5e18' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 00-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23ad5e18'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.notification-icon::before {
|
|
background-size: cover;
|
|
content: "";
|
|
display: inline-block;
|
|
height: 14px;
|
|
width: 14px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Dismiss button */
|
|
|
|
.notification-dismiss, a.notification-dismiss {
|
|
color: #555;
|
|
cursor: pointer;
|
|
opacity: .6;
|
|
transition: opacity 100ms ease;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.notification-dismiss:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Inline notifications */
|
|
|
|
.notification-inline {
|
|
border-radius: 4px;
|
|
line-height: 14px;
|
|
margin-top: 5px;
|
|
padding: 5px;
|
|
position: relative;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
|
|
[dir="rtl"] & {
|
|
text-align: right;
|
|
}
|
|
|
|
&[aria-hidden="true"] {
|
|
display: none;
|
|
}
|
|
|
|
&.notification-error::before {
|
|
@extend .notification-icon;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E");
|
|
margin: -2px 5px 0 0;
|
|
|
|
[dir="rtl"] & {
|
|
margin: 0 0 0 5px;
|
|
}
|
|
}
|
|
|
|
&.notification-error {
|
|
background-color: #fff0f1;
|
|
border: 1px solid #e35b66;
|
|
color: #cc3340;
|
|
}
|
|
|
|
&.notification-large {
|
|
padding: 13px 15px;
|
|
margin-bottom: 25px;
|
|
}
|
|
}
|
|
|
|
.notification-left-aligned {
|
|
text-align: left;
|
|
padding-left: 0;
|
|
}
|
|
|
|
html[dir="rtl"] {
|
|
.notification-left-aligned {
|
|
text-align: right;
|
|
padding-left: auto;
|
|
padding-right: 0;
|
|
}
|
|
}
|