diff --git a/blocks/header/header.css b/blocks/header/header.css index beb0010eb0..e2de659fce 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -682,7 +682,7 @@ header nav .nav-sections .default-content-wrapper > ul > li > ul::before { } .header-wrapper .nav-wrapper nav[aria-expanded="true"] .nav-sections { - display: block; + display: none; position: absolute; top: 100%; overflow-y: auto; @@ -966,7 +966,7 @@ header nav .nav-sections .default-content-wrapper > ul > li > ul::before { .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(2) span, .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(3) span, .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(4) span{ - /* color: #212529; */ + color: #212529; font-size: 14px; line-height: 20px; padding-left: 8px; @@ -996,7 +996,7 @@ header nav .nav-sections .default-content-wrapper > ul > li > ul::before { .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(4)::after{ position: absolute; content: ''; - border: solid black; + border: 1px solid black; border-width: 0 2px 2px 0; display: inline-block; padding: 3.5px; @@ -1004,8 +1004,30 @@ header nav .nav-sections .default-content-wrapper > ul > li > ul::before { transform: rotate(45deg); right: 3px; top: 24px; + transition: transform .3s linear; + display: inline; +} + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(1).active::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(2).active::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(3).active::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) li:nth-child(4).active::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(4) li:nth-child(3).active::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(3) li:nth-child(1).active::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(3) li:nth-child(2).active::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(3) li:nth-child(3).active::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(3) li:nth-child(4).active::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(1).active::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(2).active::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(3).active::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) li:nth-child(4).active::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(1).active::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(2).active::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(3).active::after, + .section.mobile-view-header .code-wrapper .code div div ul:nth-child(1) li:nth-child(4).active::after{ + /* transform: rotate(225deg); + border: 1px solid #f26841; + border-width: 0 2px 2px 0; */ } - .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) > li:nth-child(1) > ul, .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) > li:nth-child(2) > ul, .section.mobile-view-header .code-wrapper .code div div ul:nth-child(6) > li:nth-child(3) > ul, @@ -1021,9 +1043,6 @@ header nav .nav-sections .default-content-wrapper > ul > li > ul::before { display: none; padding-left: 19px; } -/* .section.mobile-view-header .code-wrapper .code div div ul:nth-child(2) > li:nth-child(1) > ul > li:nth-child(1){ - margin-bottom: 1pc; -} */ .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(6) > li:nth-child(1) > ul li, .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(6) > li:nth-child(2) > ul li, .section.mobile-view-header .code-wrapper .code div > div > ul:nth-child(6) > li:nth-child(3) > ul li, diff --git a/blocks/tab-link/tab-link.js b/blocks/tab-link/tab-link.js index a95e95d0c5..8f29884432 100644 --- a/blocks/tab-link/tab-link.js +++ b/blocks/tab-link/tab-link.js @@ -1,11 +1,11 @@ -import { createButton, createCarousle, getProps } from "../../scripts/scripts.js"; +import { createButton, createCarousle, getProps,targetObject } from "../../scripts/scripts.js"; export default function decorate(block) { console.log("tab link block"); const [, classes, prev, next] = getProps(block, { picture: true }) - if (classes === "carousel") { + if (classes === "carousel" && !targetObject.isMobile) { block.children[3].remove(); block.children[2].remove(); block.children[1].remove(); @@ -46,9 +46,11 @@ export default function decorate(block) { if (model.classList.contains("model-mob-hide")) { model.classList.remove("model-mob-hide"); document.body.classList.remove("overlay-active"); + document.body.style.overflow="auto"; } else { model.classList.add("model-mob-hide"); document.querySelector("body").classList.add("overlay-active"); + document.body.style.overflow="hidden"; } }) @@ -60,5 +62,6 @@ export default function decorate(block) { overlay.addEventListener('click', function () { model.classList.remove("model-mob-hide"); document.body.classList.remove("overlay-active"); + document.body.style.overflow="auto"; }); } \ No newline at end of file diff --git a/component-models.json b/component-models.json index 0a28a62ff8..b3af5263e3 100644 --- a/component-models.json +++ b/component-models.json @@ -686,6 +686,42 @@ "label": "Tab Id", "description": "Sets the id of the tab.", "multi": true + }, + { + "component": "text", + "valueType": "string", + "name": "tab-name-child-1", + "value": "", + "label": "Tab Name Child 1", + "description": "Sets the name of the tab child 1.", + "multi": true + }, + { + "component": "text", + "valueType": "string", + "name": "tab-name-child-1-id", + "value": "", + "label": "Tab Name Child 1 Id", + "description": "Sets the id of the tab child 1.", + "multi": true + }, + { + "component": "text", + "valueType": "string", + "name": "tab-name-child-2", + "value": "", + "label": "Tab Name Child 2", + "description": "Sets the name of the tab child 2.", + "multi": true + }, + { + "component": "text", + "valueType": "string", + "name": "tab-name-child-2-id", + "value": "", + "label": "Tab Name Child 2 Id", + "description": "Sets the id of the tab child 2.", + "multi": true } ] }, diff --git a/scripts/scripts.js b/scripts/scripts.js index ed8b599535..633b160119 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -23,6 +23,7 @@ export function moveAttributes(from, to, attributes) { /* helper script start */ export let targetObject = { model: null, + isMobile:window.matchMedia("(max-width: 1024px)").matches }; export function renderHelper(data, template, callBack) {