kyle hoell
172 lines
3.4 KiB
SCSS
172 lines
3.4 KiB
SCSS
.popup-window {
|
|
width: 61%;
|
|
height: 70%;
|
|
background: white;
|
|
position: fixed;
|
|
margin: 0 auto;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%);
|
|
-webkit-transform: translate(-50%, -50%);
|
|
z-index: 5;
|
|
-webkit-box-shadow: 0 11px 8px 0 rgba(0,0,0,0.2);
|
|
box-shadow: 0 11px 8px 0 rgba(0,0,0,0.2);
|
|
border: 2px solid #dadce0;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
@media (max-width: $desktop-breakpoint) {
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 5;
|
|
}
|
|
|
|
}
|
|
|
|
.popup-window--gone {
|
|
|
|
display: none;
|
|
}
|
|
|
|
.popup-window__title {
|
|
color: black;
|
|
font-weight: 300;
|
|
margin-top: 10px;
|
|
/* width: 100px; */
|
|
max-width: 72%;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.popup-window__subtitle {
|
|
color: black;
|
|
font-weight: 300;
|
|
font-size: 11px;
|
|
margin-top: -11px;
|
|
}
|
|
|
|
.popup-window__image__wrapper__subwrapper {
|
|
background: red;
|
|
}
|
|
|
|
.popup-window__image {
|
|
width: 120px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.popup-window__image--loaded {
|
|
|
|
width: 100%;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
object-fit: contain;
|
|
opacity: 1;
|
|
border-radius: 6px;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
|
|
@media (max-width: $desktop-breakpoint) {
|
|
width: 90vw;
|
|
max-height: 70vh;
|
|
max-width: 90vw;
|
|
object-fit: contain;
|
|
opacity: 1;
|
|
border-radius: 6px;
|
|
height: 70vh;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.popup-window__button {
|
|
// width: unset;
|
|
// margin-bottom: 12px;
|
|
font-size: unset;
|
|
padding: 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #3c85ee;
|
|
text-decoration: none;
|
|
border-radius: 5px;
|
|
margin-bottom: 6px;
|
|
|
|
&:hover{
|
|
background-color: darken($color: #3c85ee, $amount: 20);
|
|
}
|
|
|
|
@media (max-width: $desktop-breakpoint) {
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
|
|
.popup-window__image__wrapper {
|
|
// width: inherit;
|
|
flex-direction: column-reverse;
|
|
align-items: center;
|
|
display: flex;
|
|
margin-bottom: 50px;
|
|
height: 50%;
|
|
width: 80%;
|
|
max-width: 80%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
justify-content: center;
|
|
max-height: 50%;
|
|
|
|
@media (max-width: $desktop-breakpoint) {
|
|
// flex-direction: column-reverse;
|
|
// align-items: center;
|
|
// display: flex;
|
|
// margin-bottom: 50px;
|
|
// overflow: visible;
|
|
// // height: 65%;
|
|
// // width: 99%;
|
|
// max-width: 100%;
|
|
// overflow: hidden;
|
|
// position: relative;
|
|
// justify-content: center;
|
|
// // max-height: 50%;
|
|
// height: 70%;
|
|
// width: 100%;
|
|
// max-height: 70%;
|
|
|
|
flex-direction: column-reverse;
|
|
align-items: center;
|
|
display: flex;
|
|
margin-bottom: 50px;
|
|
overflow: visible;
|
|
/* max-width: 100%; */
|
|
//overflow: hidden;
|
|
position: relative;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
|
|
}
|
|
|
|
.popup-window__spinner__wrapper {
|
|
margin-left: -25px;
|
|
}
|
|
|
|
.popup-window__close-button {
|
|
width: 29px;
|
|
position: absolute;
|
|
left: 8px;
|
|
top: 10px;
|
|
opacity: 0.7;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.popup-window__video {
|
|
max-height: 70%;
|
|
max-width: 95%;
|
|
border-radius: 3px;
|
|
|
|
|
|
} |