src/scss/modules/custom.scss
.soft-popup, .soft-progress, .soft-notif {
box-sizing: border-box;
}
/*************** SOFT POPUPS ***************/
.soft-popupmask {
width: 100vw;
height: 100vh;
z-index: 6;
background-color: #444;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
}
.soft-popup {
z-index: 7;
position: fixed;
width: 80%;
max-width: 800px;
height: 50%;
max-height: 400px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
background-color: #efefef;
color: $black-color;
box-shadow: 0 4px 16px 0 #252525;
vertical-align: middle;
overflow: hidden;
}
.soft-popup div {
width: 100%;
height: calc(100% - 5 * #{$font-size-default});
display: table;
}
.soft-popup p {
display: table-cell;
vertical-align: middle;
line-height: normal;
}
.soft-popup span:nth-child(1) {
font-weight: bold;
font-size: $font-size-big;
line-height: 2;
width: 100%;
display: block;
color: #fff;
box-shadow: 0 -2px 16px 2px #121212;
background-color: $grey-color;
border-bottom: 0.25em solid darken($grey-color, 12%);
}
.soft-popup button {
position: relative;
padding: 0.5em 2em;
bottom: 2em;
}
.soft-popup.success span:nth-child(1) {
background-color: darken($green-color, 12%);
border-color: $green-color;
}
.soft-popup.info span:nth-child(1) {
background-color: darken($blue-color, 12%);
border-color: $blue-color;
}
.soft-popup.warning span:nth-child(1) {
background-color: darken($orange-color, 12%);
border-color: $orange-color;
}
.soft-popup.danger span:nth-child(1) {
background-color: darken($red-color, 12%);
border-color: $red-color;
}
/*************** SOFT PROGRESS BARS ***************/
.soft-progress {
width: 100%;
display: block;
margin: 0 !important;
padding: 0 !important;
border: none !important;
height: 0.5em;
}
.soft-progress div {
height: 100%;
text-align: center;
border: inherit inherit inherit !important;
margin: 0 !important;
padding: 0 !important;
background-color: $primary-color;
}
/*************** SOFT TOOLTIPS ***************/
.soft-tooltip {
position: relative;
}
.tooltip {
position: absolute;
display: block;
visibility: hidden;
border-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.tooltip div {
padding: 0.6em;
font-size: 14px;
font-weight: normal;
margin: 10px !important;
border: 0 !important;
color: #fff;
background-color: #222;
background-color: rgba(0,0,0,0.75);
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: auto;
text-align: center;
z-index: 2;
animation: plop 0.2s 0s ease-in-out;
animation-fill-mode: both;
}
.tooltip div::before,
.tooltip div::after {
width: 0;
height: 0;
content: '';
display: block;
animation: plop 0.2s 0s ease-in-out;
animation-fill-mode: both;
}
.tooltip.top div::after {
border: 12px solid;
border-color: #222 transparent transparent transparent;
border-color: rgba(0,0,0,0.75) transparent transparent transparent;
position: absolute;
left: calc(50% - 12px);
bottom: -24px;
}
.tooltip.right div::after {
border: 12px solid;
border-color: transparent #222 transparent transparent;
border-color: transparent rgba(0,0,0,0.75) transparent transparent;
position: absolute;
top: calc(50% - 12px);
left: -24px;
}
.tooltip.bottom div::before {
border: 12px solid;
border-color: transparent transparent #222 transparent;
border-color: transparent transparent rgba(0,0,0,0.75) transparent;
position: absolute;
left: calc(50% - 12px);
top: -24px;
}
.tooltip.left div::before {
border: 12px solid;
border-color: transparent transparent transparent #222;
border-color: transparent transparent transparent rgba(0,0,0,0.75);
position: absolute;
top: calc(50% - 12px);
right: -24px;
}
/*************** NOTIFICATIONS *****************/
.notif-container {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
position: fixed;
right: 0;
bottom: 0;
}
.notification {
display: block;
margin: 0.5em;
display: block;
border: 1px solid $grey-medium;
@if $night-theme {
background-color: $grey-darkest;
} @else {
background-color: $grey-lightest;
}
box-shadow: 3px 6px 18px 0 $shadow-normal;
font-size: 18px;
text-align: center;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
max-width: 400px;
min-width: 120px;
z-index: 5;
padding: 1em !important;
animation: plop 0.2s 0s ease-in-out;
}
.notification.info {
border-color: transparentize($info-color, 0.7);
border-right: 8px solid $info-color;
}
.notification.success {
border-color: transparentize($success-color, 0.7);
border-right: 8px solid $success-color;
}
.notification.warning {
border-color: transparentize($warning-color, 0.7);
border-right: 8px solid $warning-color;
}
.notification.danger {
border-color: transparentize($danger-color, 0.7);
border-right: 8px solid $danger-color;
}
/***************** BANNER **********************/
.banner-top,
.banner-bot {
display: -webkit-flex;
display: flex;
width: 100%;
position: fixed;
background-color: $black-color;
color: #ecf0f1;
z-index: 100;
padding: 0.5em;
left: 0;
box-sizing: border-box;
}
.banner-top {
top: 0;
}
.banner-bot {
bottom: 0;
}
.banner-top .content,
.banner-bot .content {
flex: 1 0;
padding: 4px;
}
.banner-top .close,
.banner-bot .close {
flex: 0 0;
margin: auto 8px;
border-radius: 4px;
padding: 4px;
background-color: $primary-color;
color: #ecf0f1;
font-size: $font-size-default;
line-height: 2em;
height: 2em;
box-sizing: content-box;
}
.banner-top .close:hover,
.banner-bot .close:hover {
cursor: pointer;
background-color: darken($primary-color, 12%);
}
/**************************************
*** MOBILE
**************************************/
@media screen and (max-width: 600px) {
.soft-notif {
width: 90%;
max-width: 90%;
right: 5%;
}
}