src/styles/ample-alerts.less
@import '../../node_modules/effortless-css/less/all.less';
@light-alert-color: #ddd;
@light-text-color: #000;
@light-border-color: #aaa;
@light-shadow-color: #000;
@light-shadow-color-focused: #000;
@light-close-button-color: #777;
@light-close-button-color-hovered: #000;
@light-button-color: #bbb;
@light-button-color-hovered: #aaa;
@light-button-text-color: #000;
@light-button-border-color: #777;
@light-button-border-color-focused: #000;
@dark-alert-color: #444;
@dark-text-color: #fff;
@dark-border-color: #333;
@dark-shadow-color: #000;
@dark-shadow-color-focused: #000;
@dark-close-button-color: #999;
@dark-close-button-color-hovered: #fff;
@dark-button-color: #555;
@dark-button-color-hovered: #666;
@dark-button-text-color: #fff;
@dark-button-border-color: #999;
@dark-button-border-color-focused: #fff;
@font-face {
font-family: OpenSans;
src: url('../fonts/OpenSans-Regular.ttf');
}
@font-face {
font-family: OpenSans;
font-weight: bold;
src: url('../fonts/OpenSans-Bold.ttf');
}
body {
.clear-fix {
clear: both;
}
#ample-alerts-backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#ample-alerts-container {
.box-sizing(border-box);
position: fixed;
top: 0;
right: 0;
width: 300px;
margin: 5px;
z-index: 1000;
.ample-alert {
.box-sizing(border-box);
float: left;
width: 100%;
min-height: 50px;
font-family: OpenSans;
padding: 5px;
margin-bottom: 5px;
margin-left: 100%;
.round-borders(5px);
.opacity(0);
.transition(0.5s);
&.visible {
.opacity(0.95);
margin-left: 0;
}
&:hover {
.opacity(1);
}
&.leaving {
.opacity(0);
margin-top: -100%;
}
.ample-alert-header {
font-weight: bold;
cursor: default;
.ample-alert-header-text {
display: inline-block;
margin-bottom: 10px;
}
.ample-alert-close {
float: right;
margin: 3px;
font-weight: normal;
cursor: pointer;
line-height: 12px;
}
}
.ample-alert-body {
cursor: default;
}
.ample-alert-input {
padding-top: 10px;
.ample-alert-input-value {
.box-sizing(border-box);
width: 100%;
padding: 5px;
border: none;
.round-borders(3px);
&:focus {
outline: none;
}
}
}
.ample-alert-controls {
margin-top: 10px;
.ample-alert-control {
cursor: pointer;
display: inline-block;
float: left;
margin: 5px 5px 0 0;
padding: 5px;
text-align: center;
min-width: 50px;
.round-borders(3px);
}
}
}
}
&.ample-alerts-modal-mode {
#ample-alerts-backdrop {
display: block;
}
}
// Light mode
#ample-alerts-container {
.ample-alert {
background-color: @light-alert-color;
color: @light-text-color;
border: 2px solid @light-border-color;
box-shadow: 0 0 5px @light-shadow-color;
&:hover {
box-shadow: 0 0 20px @light-shadow-color-focused;
}
.ample-alert-header {
.ample-alert-close {
color: @light-close-button-color;
&:hover {
color: @light-close-button-color-hovered;
}
}
}
.ample-alert-controls {
.ample-alert-control {
background-color: @light-button-color;
border: 1px solid @light-button-border-color;
color: @light-button-text-color;
&:hover {
background-color: @light-button-color-hovered;
border-color: @light-button-border-color-focused;
}
}
}
}
}
&.ample-alerts-dark {
#ample-alerts-container {
.ample-alert {
background-color: @dark-alert-color;
color: @dark-text-color;
border: 2px solid @dark-border-color;
box-shadow: 0 0 5px @dark-shadow-color;
&:hover {
box-shadow: 0 0 20px @dark-shadow-color-focused;
}
.ample-alert-header {
.ample-alert-close {
color: @dark-close-button-color;
&:hover {
color: @dark-close-button-color-hovered;
}
}
}
.ample-alert-controls {
.ample-alert-control {
background-color: @dark-button-color;
border: 1px solid @dark-button-border-color;
color: @dark-button-text-color;
&:hover {
background-color: @dark-button-color-hovered;
border-color: @dark-button-border-color-focused;
}
}
}
}
}
}
&.ample-alerts-modal-mode.ample-alerts-nudge {
.ample-alert {
.transform(scale(1.1));
}
}
@media (max-width: 640px) {
#ample-alerts-container {
width: 90%;
margin: 5%;
.ample-alert {
.ample-alert-header {
.ample-alert-header-text {
}
.ample-alert-close {
}
.ample-alert-body {
}
.ample-alert-controls {
.ample-alert-control {
}
}
}
}
}
}
}