open-vault/ui/app/styles/core/notification.scss
Matthew Irish 9f77077877
UI - build optimize (#5784)
* remove ember-cli-favicon

* link to png favicon in public folder

* skip some things in the build depending on the env

* update to ember-cli 3.5.0 for broccoli 2, and ember-fetch because it was incompatible with broccoli 2

* update some things the new sass module wasn't happy about

* turn off more things in dev to make the build faster

* bump to the latest ember-cli and move back to node-sass

* remove sass since we're using node-sass

* include polyfill in test as well
2018-11-26 12:47:56 -06:00

58 lines
1.2 KiB
SCSS

.notification {
padding: $spacing-m $spacing-m $spacing-m $spacing-s;
.title {
font-weight: $weight-bold;
}
&.has-border {
border: 1px solid currentColor;
border-left-width: 10px;
}
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
$color-lightning: max((100% - lightness($color)) - 2%, 0%);
$color-luminance: colorLuminance($color);
$darken-percentage: $color-luminance * 70%;
$desaturate-percentage: $color-luminance * 30%;
&.is-#{$name} {
background-color: lighten($color, $color-lightning);
border-color: $color;
color: desaturate(darken($color, $darken-percentage), $desaturate-percentage);
.delete {
color: $color;
}
.title {
color: $color-invert;
margin-bottom: 0.5rem;
}
}
}
&.is-warning {
.title,
.delete {
color: $yellow-darkest;
}
border-color: $orange;
color: $yellow-darkest;
}
& > .delete {
&:before,
&:after {
content: none;
}
position: absolute;
background-color: transparent;
border: none;
color: currentColor;
right: 0.5rem;
top: 0.5rem;
height: 1.5rem;
width: 1.5rem;
}
}