challenge-vtex-io-01/styles/css/vtex.modal-layout.css

90 lines
1.6 KiB
CSS
Raw Normal View History

@media screen and (min-width: 40em) {
.paper--quickview {
height: 260px;
width: 580px;
}
.actionsContainer--quickview {
padding: 0 2rem 2rem 2rem;
}
}
@media screen and (min-width: 50em) {
.paper--quickview {
height: 450px;
width: 900px;
}
}
@media screen and (min-width: 75em) {
.paper--quickview {
width: calc(100% - 4rem);
height: auto;
}
}
@media screen and (min-width: 82em) {
.actionsContainer--quickview {
padding: 0 2.5rem 2.5rem 2.5rem;
}
}
.paper--quickview {
min-width: 320px;
max-width: 96rem;
}
.headerContainer--quickview {
border: none;
position: absolute;
right: 0;
}
.actionsContainer--quickview {
height: 100%;
width: 100%;
transition: box-shadow 150ms ease-in-out, border-top 150ms ease-in-out;
border-top-style: solid;
border-top-width: 1px;
border-top-color: transparent;
box-shadow: -4px 0px 27px -12px transparent;
}
.actionsContentWrapper {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #aaa;
padding-top: 1.5rem;
}
.contentContainer--quickviewContent {
padding: 2.5rem 0 2.5rem 2rem;
overflow-x: hidden;
}
.triggerContainer--quickview {
padding: .75rem;
}
.triggerContainer {
outline: none;
}
.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) {
border-top-color: rgb(238, 238, 238);
box-shadow: -4px 0px 27px -12px rgba(0,0,0,0.64);
}
.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) .actionsContentWrapper {
border-top-color: transparent;
}
.closeButton {
padding-right: 1rem;
}
.paper--product-gifts {
padding: 1.5rem;
}