145 lines
2.2 KiB
SCSS
145 lines
2.2 KiB
SCSS
@import 'cdb-variables/colors';
|
|
@import 'cdb-variables/sizes';
|
|
|
|
.Notifier {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
margin: 0 -25px 0 -24px;
|
|
overflow: hidden;
|
|
border-top: 1px solid $cSecondaryLine;
|
|
word-wrap: break-word;
|
|
hyphens: auto;
|
|
overflow-wrap: break-word;
|
|
|
|
&.is-dark {
|
|
border-color: #3A484E;
|
|
background: $cMainBg;
|
|
}
|
|
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
|
|
.CDB-Loader {
|
|
height: 1px;
|
|
}
|
|
}
|
|
|
|
.Notifier-inner {
|
|
position: relative;
|
|
|
|
.is-dark & {
|
|
border-color: #3A484E;
|
|
}
|
|
|
|
&:first-child {
|
|
border-top: 0;
|
|
}
|
|
}
|
|
|
|
.Notifier.is-dark {
|
|
.Notifier-item {
|
|
&::before {
|
|
background: #3A484E;
|
|
}
|
|
|
|
&.Notifier-item--success::before {
|
|
background: #9DE0AD;
|
|
}
|
|
|
|
&.Notifier-item--error::before {
|
|
background: #F15743;
|
|
}
|
|
|
|
&.Notifier-item--warning::before {
|
|
background: #F5A623;
|
|
}
|
|
}
|
|
}
|
|
|
|
.Notifier-item {
|
|
display: flex;
|
|
position: relative;
|
|
margin: 0 $baseSize * 3;
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
color: $cSecondaryText;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -1px;
|
|
right: 0;
|
|
left: 0;
|
|
height: 1px;
|
|
background: $cSecondaryLine;
|
|
}
|
|
|
|
&.Notifier-item--success::before {
|
|
background: #9DE0AD;
|
|
}
|
|
|
|
&.Notifier-item--error::before {
|
|
background: #F15743;
|
|
}
|
|
|
|
&.Notifier-item--warning::before {
|
|
background: #F5A623;
|
|
}
|
|
}
|
|
|
|
.Notifier-item--success {
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
padding: 20px $baseSize * 3;
|
|
background: rgba(#9DE0AD, 0.12);
|
|
}
|
|
|
|
.Notifier-item--error {
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
padding: 20px $baseSize * 3;
|
|
background: rgba(#F15743, 0.12);
|
|
}
|
|
|
|
.Notifier-item--warning {
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
padding: 20px $baseSize * 3;
|
|
background: #FEFEDD;
|
|
}
|
|
|
|
.Notifier.is-dark {
|
|
.Notifier-item--success,
|
|
.Notifier-item--error,
|
|
.Notifier-item--warning {
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
.Notifier .CDB-Loader {
|
|
display: none;
|
|
}
|
|
|
|
.Notifier .CDB-Loader.is-visible {
|
|
display: block;
|
|
}
|
|
|
|
.Notifier-info {
|
|
flex: 1;
|
|
min-width: 0; // To prevent firefox screw up
|
|
padding-right: $baseSize * 2;
|
|
}
|
|
|
|
.Notifier-actions {
|
|
margin-left: $baseSize * 3;
|
|
|
|
&:first-of-type {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.Notifier-icon {
|
|
margin-top: 1px;
|
|
}
|