challenge-vtex-io-carlos-wi.../styles/css/vtex.flex-layout.css

115 lines
2.9 KiB
CSS

@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
:global(.vtex-breadcrumb-1-x-container) {
padding: 0 40px;
}
:global(.vtex-breadcrumb-1-x-container) :nth-child(n) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
:global(.vtex-breadcrumb-1-x-container) :global(.vtex-breadcrumb-1-x-term) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
:global(.vtex-telemarketing-2-x-wrapper) :global(.vtex-store-components-3-x-container) {
margin: auto;
}
:global(.vtex-store-components-3-x-container) {
padding-left: 0px;
padding-right: 0px;
}
@media (min-width: 2560px) {
:global(.vtex-store-components-3-x-container) {
max-width: 100%;
margin: 0 320px;
}
}
:global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
padding-right: 0 !important;
overflow: hidden;
}
:global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px 40px;
gap: 32px;
margin-top: 16px;
margin-bottom: 16px;
}
@media (max-width: 1024px) {
:global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) {
flex-direction: column;
}
}
:global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) :global(.vtex-flex-layout-0-x-flexRow) :global(.vtex-flex-layout-0-x-flexRowContent) {
display: block;
padding: 0;
margin-top: 0;
margin-bottom: 0;
}
.addButton {
width: 100%;
}
.flexRow--buyButton {
width: 100%;
}
.flexRow--buyButton .flexRowContent--buyButton {
margin: 0;
}
.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-button) {
background-color: black;
height: 49px;
border: none;
border-radius: unset;
}
.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-add-to-cart-button-0-x-buttonText) {
font-size: 0;
}
.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-add-to-cart-button-0-x-buttonText)::after {
content: "ADICIONAR À SACOLA";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #ffffff;
}
@media screen and (max-width: 1024px) {
:global(.vtex-flex-layout-0-x-flexRowContent) {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.flexColChild {
width: 100%;
}
}
@media screen and (max-width: 376px) {
:global(.vtex-add-to-cart-button-0-x-buttonText) {
max-width: 168px;
}
.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-button) {
height: 74px !important;
}
}