fox-send/app/templates/popup/popup.css

80 lines
1.3 KiB
CSS
Raw Normal View History

.popup {
2018-07-31 18:09:18 +00:00
display: block;
width: 100%;
height: 70px;
background-color: var(--errorColor);
2018-02-16 20:56:53 +00:00
color: var(--textColor);
2018-07-31 18:09:18 +00:00
padding: 0;
box-sizing: border-box;
text-align: center;
2018-07-31 18:09:18 +00:00
border-radius: 4px;
transition: opacity 0.5s;
outline: 0;
2018-07-31 18:09:18 +00:00
opacity: 0;
visibility: hidden;
}
.popup::after {
content: '';
position: absolute;
2018-07-31 18:09:18 +00:00
top: 100%;
left: 50%;
width: 0;
height: 0;
border: 8px solid;
border-color: var(--errorColor) transparent transparent;
margin-left: -8px;
pointer-events: none;
}
.popup__message {
height: 40px;
2018-07-31 18:09:18 +00:00
padding: 10px;
box-sizing: border-box;
text-align: center;
color: var(--primaryControlFGColor);
font-size: 15px;
2018-07-31 18:09:18 +00:00
font-style: italic;
white-space: nowrap;
}
.popup__action {
display: flex;
flex-direction: row;
2018-07-31 18:09:18 +00:00
text-transform: uppercase;
}
.popup__action > div {
flex: auto;
}
.popup__no {
2018-07-31 18:09:18 +00:00
color: var(--primaryControlFGColor);
padding: 5px;
font-weight: bold;
cursor: pointer;
white-space: nowrap;
}
.popup__no:hover {
2018-07-31 18:09:18 +00:00
text-decoration: underline;
}
.popup__yes {
2018-02-16 20:56:53 +00:00
color: var(--primaryControlFGColor);
2018-07-31 18:09:18 +00:00
padding: 5px;
font-weight: normal;
cursor: pointer;
white-space: nowrap;
}
.popup__yes:hover {
2018-07-31 18:09:18 +00:00
text-decoration: underline;
}
.popup--show {
visibility: visible;
opacity: 1;
2018-07-31 18:09:18 +00:00
pointer-events: auto;
}