| Current Path : /home/ereika83/www/wp-content/plugins/wpmudev-updates/assets/src/scss/widget-ui/ |
| Current File : /home/ereika83/www/wp-content/plugins/wpmudev-updates/assets/src/scss/widget-ui/_notifications.scss |
@include body-class(true, $widget-prefix) {
.wpmudui-notice,
.wpmudui-notice-top {
p {
&:first-of-type {
@include icon( before, info );
&:before {
position: absolute;
color: $notice-default-icon-color;
font-size: 16px;
}
}
}
// NOTICE info
&.wpmudui-notice-info {
border-left: 2px solid $info;
p:first-of-type {
&:before {
color: $notice-info-icon-color;
}
}
}
// NOTICE success
&.wpmudui-notice-success {
border-left: 2px solid $success;
p:first-of-type {
@include icon(before, check-tick, false);
&:before {
color: $notice-success-icon-color;
}
}
}
// NOTICE warning
&.wpmudui-notice-warning {
border-left: 2px solid $warning;
p:first-of-type {
@include icon(before, warning-alert, false);
&:before {
color: $notice-warning-icon-color;
}
}
}
// NOTICE error
&.wpmudui-notice-error {
border-left: 2px solid $error;
p:first-of-type {
@include icon(before, warning-alert, false);
&:before {
color: $notice-error-icon-color;
}
}
}
}
.wpmudui-notice {
position: relative;
display: block;
margin: 30px 0;
border: 1px solid #E6E6E6;
border-left: 2px solid #888;
border-radius: $border-radius;
padding: 15px 20px 15px 50px;
background-color: $notice-default-bg-color;
p {
margin: 30px/2 0;
font: 400 13px/22px $font;
letter-spacing: -0.25px;
&:first-child,
&:first-of-type {
margin-top: 0;
}
&:last-child,
&:last-of-type {
margin-bottom: 0;
}
&:first-of-type:before {
top: 18px;
left: 22px;
}
}
&, p {
color: palette( gray, dark );
strong {
font-weight: 500;
}
}
.wpmudui-notice-dismiss {
display: block;
margin: 6px 0 -5px;
a {
margin-left: -10px;
padding: 5px 10px;
color: palette( gray, light );
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
text-decoration: none;
&:hover, &:active {
color: palette( gray, dark );
}
}
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
&.wpmudui-notice-icon-tick {
p:first-of-type {
@include icon(before, check-tick, false);
}
}
.wpmudui-notice-buttons {
margin-top: 5px;
}
&.wpmudui-no-notice-icon {
padding: 15px 20px;
p:first-of-type:before {
content: none;
margin: 0;
padding: 0;
}
.wpmudui-notice-buttons {
margin-left: 0;
}
}
}
.wpmudui-notice-top {
width: 100%;
max-width: 600px;
display: block;
position: fixed;
z-index: 99999;
top: 17px;
left: 50%;
margin: 0;
margin-left: 80px;
border-radius: $border-radius;
border-left: 2px solid $notice-default-icon-color;
padding: 15px 20px 15px 50px;
background-color: $white;
box-shadow: rgba(0,0,0,0.15) 0 5px 25px 0;
transform: translateX(-50%);
.wpmudui-notice-content {
position: relative;
}
p {
position: relative;
margin: 30px/2 10px 30px/2 0;
color: palette( gray );
font: 400 13px/22px $font;
letter-spacing: -0.19px;
&:first-of-type:before {
top: 2px;
left: -28px;
}
strong {
color: palette( gray, dark );
font-weight: 500;
}
&:first-child,
&:first-of-type {
margin-top: 0;
}
&:last-child,
&:last-of-type {
margin-bottom: 0;
}
}
&.wpmudui-can-dismiss {
display: flex;
.wpmudui-notice-content {
flex: 1;
align-self: center;
}
.wpmudui-notice-dismiss {
display: flex;
flex-direction: column;
flex: 0 0 60px;
margin: -#{30px/2} -20px -#{30px/2} 0;
a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1 1 auto;
border-radius: 0 #{$border-radius} #{$border-radius} 0;
background-color: palette( silver, light );
color: palette( gray, light );
font: 500 11px/13px $font;
text-transform: uppercase;
text-align: center;
transition: 0.3s ease;
&:before {
color: palette( gray, light );
font-size: 13px;
}
&:hover, &:active {
background-color: palette( silver, soft );
}
}
}
}
@media (max-width: 782px) {
width: 90%;
top: 23px;
margin-left: 0;
}
}
.wpmudui-notice-floating {
@extend .wpmudui-notice-top;
width: auto;
display: flex;
padding: 11px 20px 12px 50px;
p {
margin: 15px 20px 15px 0;
}
.wpmudui-notice-content {
flex: 1;
align-self: center;
}
.wpmudui-notice-buttons {
display: flex;
flex-direction: column;
}
}
&.wp-admin.folded {
.wpmudui-notice-top {
margin-left: 18px;
@media (max-width: 782px) {
margin-left: 0;
}
}
}
}