radh-ui
Version:
Stencil Component Starter
16 lines (12 loc) • 2.94 kB
JavaScript
import { r as registerInstance, h } from './index-a9700b09.js';
const radhNavCss = ".navbar{background:#fff;margin-bottom:30px}.navbar ul{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;height:60px;border-bottom:3px solid #02648e}.navbar li{position:relative;-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.navbar a{position:relative;display:block;color:#02648e;text-decoration:none;text-align:center;font-size:20px}.navbar li.active:after{content:\"\";position:absolute;bottom:-3px;left:10%;height:3px;width:80%;background:#009cde}.navbar li:hover .subnavbar,.subnavbar li:hover .third-level{display:block}.subnavbar{display:none;position:absolute;left:10px;top:61px;width:calc( 100% - 10px);background:#8ca3ad}.subnavbar ul{-ms-flex-flow:column;flex-flow:column;height:auto}.subnavbar a{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;width:90%;height:40px;padding-right:10px;border-bottom:1px dashed #fff;font-size:16px;color:#fff}.subnavbar li:last-child a{border-bottom:0}.subnavbar li:hover>a{font-weight:700}.subnavbar li.active:after{display:none}.third-level{display:none;position:absolute;left:100%;top:0;width:90%;background:#e4eaec}.third-level:after{content:\"\";position:absolute;left:-10px;top:10px;background:#8ca3ad;width:20px;height:20px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.third-level a{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;height:40px;width:100%;padding-left:20px;border-bottom:1px solid #009cde;font-size:16px;color:#009cde;text-align:left}.third-level a:last-child{border-bottom:none}.third-level a:hover{font-weight:700}.third-level .active:after{display:none}.menu{display:none;position:absolute;right:10px;top:10px;z-index:3;width:50px;height:40px;border:5px solid #fff;background:#fff url(/assets/imgs/menu.jpg) no-repeat center center;background-size:30px}@media screen and (max-width:768px){.menu{display:block}.navbar li:hover .subnavbar,.subnavbar li:hover .third-level{display:none}.navbar .down{display:none;height:auto;background:#009cde}.navbar ul{height:auto}.navbar li{display:block}.navbar li.active:after{display:none}.navbar a{color:#fff;line-height:40px}.down.sel,.sel .subnavbar,.sel .third-level{display:block}.subnavbar,.third-level{position:relative;left:auto;top:auto;width:100%}.subnavbar ul,.third-level ul{display:block;padding-left:30px}.third-level a{color:#009cde}}";
class RadhNav {
constructor(hostRef) {
registerInstance(this, hostRef);
}
render() {
return (h("nav", { title: "Menu principal", role: "navigation", class: "navbar" }, h("span", { class: "menu" }), h("slot", null)));
}
}
RadhNav.style = radhNavCss;
export { RadhNav as radh_nav };