forked from M3-Academy/challenge-vtex-io
Merge pull request 'feature/breadcrumb' (#1) from feature/breadcrumb into develop
Reviewed-on: #1
This commit is contained in:
commit
7cd953a61d
@ -16,7 +16,7 @@
|
|||||||
"testId": "breadcrumbs",
|
"testId": "breadcrumbs",
|
||||||
"blockClass": "pdp-breadcrumb"
|
"blockClass": "pdp-breadcrumb"
|
||||||
},
|
},
|
||||||
"children": ["breadcrumb"]
|
"children": ["breadcrumb#pdp-breadcrumb"]
|
||||||
},
|
},
|
||||||
"flex-layout.row#specifications-title": {
|
"flex-layout.row#specifications-title": {
|
||||||
"children": ["rich-text#specifications"]
|
"children": ["rich-text#specifications"]
|
||||||
@ -181,5 +181,12 @@
|
|||||||
"Pinterest": true
|
"Pinterest": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"breadcrumb#pdp-breadcrumb": {
|
||||||
|
"props": {
|
||||||
|
"homeIconSize": 0,
|
||||||
|
"showOnMobile": true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -7,10 +7,19 @@
|
|||||||
*/
|
*/
|
||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
.html {
|
|
||||||
background-color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.html--pdp-breadcrumb {
|
.html--pdp-breadcrumb {
|
||||||
background-color: green;
|
width: 100%;
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1025px) {
|
||||||
|
.html--pdp-breadcrumb {
|
||||||
|
width: 94.4444444444%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1921px) {
|
||||||
|
.html--pdp-breadcrumb {
|
||||||
|
width: 68.75%;
|
||||||
|
}
|
||||||
}
|
}
|
47
styles/css/vtex.breadcrumb.css
Normal file
47
styles/css/vtex.breadcrumb.css
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
/*
|
||||||
|
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 */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-basis: 100%;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.termArrow {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.termArrow .caretIcon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.term {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.homeLink::before {
|
||||||
|
content: "Home";
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20.12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow--1 .link {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
.arrow--1 .link::before {
|
||||||
|
content: "Sapatos";
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20.12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow--2 .link {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20.12px;
|
||||||
|
}
|
@ -1,8 +1,14 @@
|
|||||||
.html {
|
|
||||||
background-color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.html--pdp-breadcrumb {
|
.html--pdp-breadcrumb {
|
||||||
background-color: green;
|
width: 100%;
|
||||||
}
|
padding: 0 40px;
|
||||||
|
|
||||||
|
@media screen and (min-width: 1025px) {
|
||||||
|
width: 94.44444444444444%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1921px) {
|
||||||
|
width: 68.75%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
47
styles/sass/pages/product/vtex.breadcrumb.scss
Normal file
47
styles/sass/pages/product/vtex.breadcrumb.scss
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-basis: 100%;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.termArrow {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.caretIcon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.term {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// manipulation fonts with before
|
||||||
|
.homeLink {
|
||||||
|
&::before {
|
||||||
|
content: "Home";
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20.12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow--1 {
|
||||||
|
.link {
|
||||||
|
font-size: 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "Sapatos";
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20.12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow--2 {
|
||||||
|
.link {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20.12px;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user