@coderundebug/ui-web/ui-menu-separator.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import{UiTools as e}from"./ui-tools.js";export class UiMenuSeparator extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiMenuSeparator.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiMenuSeparator.uiCssStyleSheet],this.i=this.shadowRoot.getElementById("base")}connectedCallback(){this.o()}o(){const e=this.closest("ui-popup-menu, ui-side-menu, ui-content-menu, ui-header-menu");this.i.classList.remove("inside-popup-menu"),this.i.classList.remove("inside-side-menu"),this.i.classList.remove("inside-content-menu"),this.i.classList.remove("inside-header-menu"),e&&("UI-POPUP-MENU"===e.tagName&&this.i.classList.add("inside-popup-menu"),"UI-SIDE-MENU"===e.tagName&&this.i.classList.add("inside-side-menu"),"UI-CONTENT-MENU"===e.tagName&&this.i.classList.add("inside-content-menu"),"UI-HEADER-MENU"===e.tagName&&this.i.classList.add("inside-header-menu"))}}UiMenuSeparator.uiCss=" #base{padding:4px 0;background-color:var(--ui-background, hsl(0 0% 97% / 1));}.bar{border-block-end-style:solid;border-block-end-color:var(--ui-midground, hsl(0 0% 90% / 1));border-block-end-width:2px;}#base.inside-side-menu .bar{border-block-end-width:var(--ui-menu-separator-side-bar-width, 2px);border-block-end-color:var(--ui-menu-separator-side-bar-color, var(--ui-midground, hsl(0 0% 90% / 1)));}#base.inside-side-menu{background-color:var(--ui-menu-side-background, var(--ui-background, hsl(0 0% 97% / 1)));padding:var(--ui-menu-separator-side-padding, 4px 0);border-inline-start-style:solid;border-inline-start-width:var(--ui-menu-side-bar-width, 4px);border-inline-start-color:var(--ui-menu-side-bar-color, transparent);}#base.inside-content-menu .bar{border-block-end-width:var(--ui-menu-separator-content-bar-width, 2px);border-block-end-color:var(--ui-menu-separator-content-bar-color, var(--ui-midground, hsl(0 0% 90% / 1)));}#base.inside-content-menu{background-color:var(--ui-menu-content-background, var(--ui-background, hsl(0 0% 97% / 1)));padding:var(--ui-menu-separator-content-padding, 4px 0);border-inline-start-style:solid;border-inline-start-width:var(--ui-menu-content-bar-width, 2px);border-inline-start-color:var(--ui-menu-content-bar-color, var(--ui-midground, hsl(0 0% 90% / 1)));}#base.inside-popup-menu .bar{border-block-end-width:var(--ui-menu-separator-popup-bar-width, 1px);border-block-end-color:var(--ui-menu-separator-popup-bar-color, var(--ui-module-foreground, hsl(0 0% 18% / 1)));}#base.inside-popup-menu{background-color:var(--ui-menu-popup-background, var(--ui-module-background, hsl(0 0% 97% / 1)));padding:var(--ui-menu-separator-popup-padding, 4px 0);border-inline-start-style:solid;border-inline-start-width:var(--ui-menu-popup-bar-width, 0);border-inline-start-color:var(--ui-menu-popup-bar-color, transparent);}#base.inside-header-menu .bar{border:none;border-inline-end-style:solid;border-inline-end-width:var(--ui-menu-separator-header-bar-width, 2px);border-inline-end-color:var(--ui-menu-separator-header-bar-color, var(--ui-module-foreground, hsl(0 0% 18% / 1)));height:100%;}#base.inside-header-menu{background-color:var(--ui-menu-header-background, var(--ui-module-background, hsl(0 0% 97% / 1)));box-sizing:border-box;height:100%;padding:var(--ui-menu-separator-header-padding, 0);}",UiMenuSeparator.uiHtml='<div id="base"><div class="bar"></div></div>',e.createUi(UiMenuSeparator,"ui-menu-separator",import.meta.url);