diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 677a74f..924e35d 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -12,6 +12,7 @@ align-items: center; flex-wrap: wrap; margin-left: 40px; + margin-right: 40px; padding: 0 0 16px; } @media (max-width: 2561px) and (min-width: 1920px) { @@ -21,8 +22,7 @@ } } .container .homeLink { - padding-right: 6px; - padding-left: 0; + padding: 0 12px 0 0; } .container .homeLink::before { content: "Home"; @@ -36,13 +36,37 @@ display: none; } .container .arrow { - padding: 0 6px; + align-items: center; + display: flex; + padding: 0 12px 0 0; +} +.container .arrow .caretIcon { + display: none; +} +.container .arrow ::before { + content: ">"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + margin-right: 13px; } .container .arrow .link { - padding: 0 6px; + padding: 0; +} +.container .termArrow { + display: none; } .container .term { - padding: 0 6px; + padding: 0; +} +.container .term::before { + content: ">"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + margin-right: 15px; } .container .link, .container .term { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index f124b56..bea9431 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -18,21 +18,17 @@ display: flex; justify-content: space-between; align-items: center; + padding: 32px 40px; } @media (max-width: 2561px) and (min-width: 1920px) { .flexRow--main-header .flexRowContent--main-header { + width: 71.858%; margin: 0 auto; - padding-left: 360px; - padding-right: 360px; + padding: 32px 0; } } .flexRow--main-header .flexRowContent--main-header :global(.vtex-minicart-2-x-minicartWrapperContainer) :global(.vtex-minicart-2-x-minicartContainer) :global(.vtex-minicart-2-x-openIconContainer) { - padding-right: 40px; -} -@media (max-width: 2561px) and (min-width: 1920px) { - .flexRow--main-header .flexRowContent--main-header :global(.vtex-minicart-2-x-minicartWrapperContainer) :global(.vtex-minicart-2-x-minicartContainer) :global(.vtex-minicart-2-x-openIconContainer) { - padding-right: 0; - } + padding-right: 0; } .flexRow--main-header .flexRowContent--main-header :global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label) { visibility: hidden; @@ -92,9 +88,6 @@ position: absolute; } -.flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) { - margin-left: 148.08px; -} @media (max-width: 2561px) and (min-width: 1920px) { .flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) { margin-left: 308.08px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 2edce6d..a15ef33 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,12 +9,7 @@ /* Media Query M3 */ /* Grid breakpoints */ .logoContainer { - padding-left: 40px; -} -@media (max-width: 2561px) and (min-width: 1920px) { - .logoContainer { - padding-left: 0; - } + padding-left: 0; } .autoCompleteOuterContainer:first-child :global(.vtex-input) :global(.vtex-input-prefix__group) { diff --git a/styles/sass/pages/product/vtexBreadcrumb/vtex.breadcrumb.scss b/styles/sass/pages/product/vtexBreadcrumb/vtex.breadcrumb.scss index 429c4e5..ee6ff10 100644 --- a/styles/sass/pages/product/vtexBreadcrumb/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtexBreadcrumb/vtex.breadcrumb.scss @@ -3,14 +3,14 @@ align-items: center; flex-wrap: wrap; margin-left: 40px; + margin-right: 40px; padding: 0 0 16px; @media (max-width: 2561px) and (min-width: 1920px) { margin: 0 auto; width: 71.858%; } .homeLink { - padding-right: 6px; - padding-left: 0; + padding: 0 12px 0 0; } .homeLink::before { @@ -27,14 +27,40 @@ } .arrow { - padding: 0 6px; + align-items: center; + display: flex; + padding: 0 12px 0 0; + .caretIcon { + display: none; + } + ::before { + content: ">"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray; + margin-right: 13px; + } .link { - padding: 0 6px; + padding: 0; } } - .term { - padding: 0 6px; + .termArrow { + display: none; + } + + .term{ + padding: 0; + } + + .term::before { + content: ">"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray; + margin-right: 15px; } .link, diff --git a/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss index f4955c7..0e8f3c9 100644 --- a/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"); //Header @@ -10,18 +10,16 @@ display: flex; justify-content: space-between; align-items: center; + padding: 32px 40px; @media (max-width: 2561px) and (min-width: 1920px) { + width: 71.858%; margin: 0 auto; - padding-left: 360px; - padding-right: 360px; + padding: 32px 0; } :global(.vtex-minicart-2-x-minicartWrapperContainer) { :global(.vtex-minicart-2-x-minicartContainer) { :global(.vtex-minicart-2-x-openIconContainer) { - padding-right: 40px; - @media (max-width: 2561px) and (min-width: 1920px) { - padding-right: 0; - } + padding-right: 0; } } } @@ -98,7 +96,6 @@ .flexColChild { :global(.vtex-menu-2-x-menuContainerNav) { :global(.vtex-menu-2-x-menuContainer) { - margin-left: 148.08px; @media (max-width: 2561px) and (min-width: 1920px) { margin-left: 308.08px; } diff --git a/styles/sass/pages/product/vtexStore/vtex.store-components.scss b/styles/sass/pages/product/vtexStore/vtex.store-components.scss index bc7b19c..cf8ae10 100644 --- a/styles/sass/pages/product/vtexStore/vtex.store-components.scss +++ b/styles/sass/pages/product/vtexStore/vtex.store-components.scss @@ -1,10 +1,7 @@ //Logo Header .logoContainer { - padding-left: 40px; - @media (max-width: 2561px) and (min-width: 1920px) { - padding-left: 0; - } + padding-left: 0; } //Input Header