UNPKG

smart-webcomponents-angular

Version:

[![Price](https://img.shields.io/badge/price-COMMERCIAL-0098f7.svg)](https://jqwidgets.com/license/)

1,179 lines (1,167 loc) 57 kB
/* smart-menu */ smart-menu { width: var(--smart-menu-default-width); height: var(--smart-menu-default-height); visibility: hidden; } smart-menu:focus { outline: none; border-color: var(--smart-outline); } smart-menu > .smart-container { display: flex; position: relative; } smart-menu smart-menu-item[level="1"][separator], smart-menu smart-menu-item[separator][level]:last-child, smart-menu smart-menu-items-group[level="1"][separator], smart-menu smart-menu-items-group[separator][level]:last-child { border-bottom: none; } smart-menu.smart-element { visibility: inherit; overflow: visible; } smart-menu .smart-ripple { background: var(--smart-primary); } smart-menu[aria-orientation=horizontal] { background: var(--smart-surface); color: var(--smart-surface-color); border-color: var(--smart-border); } smart-menu[mode=vertical], smart-menu[mode=dropDown], smart-menu[mode=tree] { width: var(--smart-menu-vertical-default-width); height: var(--smart-menu-vertical-default-height); } smart-menu[mode=tree]:focus { outline: none; border-color: var(--smart-outline); } smart-menu[mode=vertical] smart-menu-item[level="1"][separator], smart-menu[mode=vertical] smart-menu-items-group[level="1"][separator], smart-menu[mode=dropDown] smart-menu-item[level="1"][separator], smart-menu[mode=dropDown] smart-menu-items-group[level="1"][separator], smart-menu[mode=tree] smart-menu-item[level="1"][separator], smart-menu[mode=tree] smart-menu-items-group[level="1"][separator], smart-menu[minimized] smart-menu-item[level="1"][separator], smart-menu[minimized] smart-menu-items-group[level="1"][separator] { border-bottom: 1px solid var(--smart-border); } smart-menu[minimized][drop-down-position$=left] .smart-menu-minimized-items-container .smart-menu-item-label-container { flex-direction: row; } smart-menu[mode=tree] { background: var(--smart-background); border-color: var(--smart-border); color: var(--smart-background-color); } smart-menu[mode=dropDown] { position: absolute; background: var(--smart-background); color: var(--smart-background-color); box-shadow: var(--smart-elevation-8); border-radius: var(--smart-border-radius); left: 0; top: 0; z-index: var(--smart-editor-drop-down-z-index); } smart-menu-item, smart-menu-items-group { visibility: hidden; cursor: pointer; height: auto; display: flex; justify-content: space-between; align-items: center; white-space: nowrap; } smart-menu-item.smart-element, smart-menu-items-group.smart-element { visibility: inherit; overflow: visible; background: inherit; color: inherit; border-color: inherit; } smart-menu-item[hover], smart-menu-items-group[hover] { background-color: var(--smart-ui-state-hover); border-color: var(--smart-ui-state-border-hover); color: var(--smart-ui-state-color-hover); } smart-menu-item[focus], smart-menu-items-group[focus] { background-color: var(--smart-ui-state-focus); border-color: var(--smart-ui-state-border-focus); color: var(--smart-ui-state-color-focus); } smart-menu-item[separator], smart-menu-items-group[separator] { border-bottom: 1px solid var(--smart-border); } smart-menu-item .smart-menu-item-shortcut { margin-left: 100px; opacity: 0.5; } smart-menu-item[template-applied] { cursor: default; } smart-menu-item[disabled] { opacity: 0.5; } smart-menu-items-group { position: relative; } .smart-menu a { color: inherit; } .smart-menu smart-menu-item[level="1"], .smart-menu smart-menu-items-group[level="1"] { height: 100%; } .smart-menu smart-menu-item[level="1"] > .smart-menu-item-label-container, .smart-menu smart-menu-items-group[level="1"] > .smart-menu-item-label-container { height: 100%; } .smart-menu .smart-menu-drop-down { position: absolute; background: var(--smart-background); color: var(--smart-background-color); box-shadow: var(--smart-elevation-8); border-radius: var(--smart-border-radius); left: 100%; top: 0; z-index: var(--smart-editor-drop-down-z-index); } .smart-menu .smart-menu-drop-down .smart-menu-drop-down { border: none; } .smart-menu .smart-menu-drop-down .smart-menu-drop-down.smart-visibility-hidden { border: none; } .smart-menu .smart-menu-drop-down.smart-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none; } .smart-menu .smart-menu-drop-down[level="2"] { top: 100%; left: 0; } .smart-menu .smart-menu-main-container { display: flex; position: relative; align-items: center; width: 100%; height: 100%; cursor: default; } .smart-menu .smart-menu-main-container > smart-menu-item[level="1"] .smart-menu-item-shortcut { display: none; } .smart-menu .smart-menu-main-container.scroll-buttons-shown { width: calc(100% - 2 * var(--smart-menu-scroll-button-size)); overflow: hidden; } .smart-menu .smart-menu-main-container.scroll-buttons-shown.one-button-shown { width: calc(100% - var(--smart-menu-scroll-button-size)); } .smart-menu .smart-menu-item-label-element { display: flex; align-items: center; overflow: hidden; } .smart-menu .smart-menu-item-label-element > span { display: flex; align-items: center; } .smart-menu .smart-element[level="2"]:first-child { margin-top: var(--smart-border-radius); } .smart-menu .smart-element[level="2"]:last-child { margin-bottom: var(--smart-border-radius); } .smart-menu .smart-element[level="3"]:first-child { margin-top: var(--smart-border-radius); } .smart-menu .smart-element[level="3"]:last-child { margin-bottom: var(--smart-border-radius); } .smart-menu .smart-header { background: var(--smart-surface); color: var(--smart-surface-color); box-shadow: var(--smart-elevation-4); border: var(--smart-border-width) solid var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); z-index: 3; padding: 0px 16px; display: flex; align-items: center; justify-content: center; position: relative; width: 100%; } .smart-menu .smart-hamburger-icon { width: 40px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; float: none; cursor: pointer; } .smart-menu .smart-hamburger-icon .smart-hamburger-icon-custom-container { height: 100%; display: flex; align-items: center; } .smart-menu .smart-hamburger-icon.smart-close-button > .smart-hamburger-icon-line-top { width: 29px; transform: translateX(4px) rotate(45deg); } .smart-menu .smart-hamburger-icon.smart-close-button > .smart-hamburger-icon-line-center { visibility: hidden; } .smart-menu .smart-hamburger-icon.smart-close-button > .smart-hamburger-icon-line-bottom { width: 29px; transform: translateX(4px) rotate(-45deg); } .smart-menu .smart-hamburger-icon .smart-hamburger-icon-custom-container { height: 100%; display: flex; align-items: center; } .smart-menu .smart-hamburger-icon-line { margin-bottom: 5px; border-radius: 10px; width: 30px; height: 5px; transform-origin: left; background-color: #757575; } .smart-menu .smart-hamburger-icon-line-bottom { margin-bottom: 0; } .smart-menu .smart-menu-minimized-items-container .smart-menu-items-group-opened > .smart-menu-item-label-container { padding-bottom: 0; } .smart-menu .smart-menu-minimized-items-container .smart-menu-drop-down.smart-visibility-hidden { margin-top: 0; height: 0; transform: scaleY(0); } .smart-menu .smart-menu-minimized-items-container.smart-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none; } .smart-menu .smart-menu-item-label-container { position: relative; width: 100%; padding: 10px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; overflow: hidden; } .smart-menu .smart-menu-scroll-button { display: block; background-color: var(--smart-scroll-bar-button-background); color: var(--smart-scroll-bar-button-color); border-color: var(--smart-scroll-bar-button-border); min-height: 0; width: var(--smart-menu-scroll-button-size); height: 100%; } .smart-menu .smart-menu-scroll-button[hover] { background-color: var(--smart-scroll-bar-button-background-hover); color: var(--smart-scroll-bar-button-color-hover); border-color: var(--smart-scroll-bar-button-border-hover); } .smart-menu .smart-menu-scroll-button[active] { background-color: var(--smart-scroll-bar-button-background-active); color: var(--smart-scroll-bar-button-color-active); border-color: var(--smart-scroll-bar-button-border-active); } .smart-menu .smart-menu-scroll-button > button { border: none; } .smart-menu .smart-hidden { display: none !important; } .smart-menu.smart-container { display: flex; position: relative; } .smart-menu:not([animation=none]) .smart-menu-drop-down, .smart-menu:not([animation=none]) .smart-menu-minimized-items-container { opacity: 1; transform: scaleY(1); -webkit-transform-origin: top; transform-origin: top; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms, visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .smart-menu:not([animation=none]) .smart-menu-drop-down.smart-visibility-hidden, .smart-menu:not([animation=none]) .smart-menu-minimized-items-container.smart-visibility-hidden { opacity: 0.2; transform: scaleY(0); } .smart-menu:not([animation=none]) .smart-menu-minimized-items-container .smart-menu-drop-down { -webkit-transform-origin: top; transform-origin: top; transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .smart-menu:not([animation=none]) .smart-menu-minimized-items-container .smart-menu-item-label-container > .smart-menu-items-group-arrow { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .smart-menu:not([animation=none]) .smart-hamburger-icon-line { transition: visibility 0.02s cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .smart-menu[animation=none] .smart-menu-drop-down.smart-visibility-hidden, .smart-menu[animation=none] .smart-menu-minimized-items-container.smart-visibility-hidden { transform: scale(0); } .smart-menu[drop-down-append-to]:not([drop-down-append-to=null]) .smart-menu-main-container { overflow: hidden; } .smart-menu[overflow=hidden] .smart-menu-main-container { width: 100%; } .smart-menu[overflow=hidden][mode]:not([mode=horizontal]) .smart-menu-main-container { height: 100%; } .smart-menu[aria-orientation=horizontal] .smart-element[level="1"]:first-child { margin-left: var(--smart-border-radius); } .smart-menu[aria-orientation=horizontal] .smart-element[level="1"]:last-child { margin-right: var(--smart-border-radius); } .smart-menu:not([aria-orientation=horizontal]) .smart-element[level="1"]:first-child { margin-top: var(--smart-border-radius); } .smart-menu:not([aria-orientation=horizontal]) .smart-element[level="1"]:last-child { margin-bottom: var(--smart-border-radius); } .smart-menu[disabled] smart-menu-item, .smart-menu[disabled] smart-menu-items-group, .smart-menu[disabled] .smart-hamburger-icon { cursor: default; } .smart-menu[disabled] .smart-hamburger-icon { cursor: default; } .smart-menu[disabled][mode=dropDown]:not([animation=none]) { opacity: 0.55; } .smart-menu[minimized] .smart-minimized-header { border: var(--smart-border-width) solid var(--smart-border); background: var(--smart-surface); justify-content: flex-end; } .smart-menu[minimized][drop-down-position$=left] > .smart-container { flex-direction: row-reverse; } .smart-menu[minimized][drop-down-position$=left] .smart-menu-minimized-items-container .smart-menu-item-label-container { flex-direction: row-reverse; } .smart-menu[minimized][drop-down-position$=left] .smart-menu-minimized-items-container .smart-menu-items-group-arrow { margin: 0; } .smart-menu[minimized][drop-down-position$=left] .smart-menu-minimized-items-container .smart-menu-drop-down { padding-left: 0; padding-right: 20px; } .smart-menu[minimized][checkboxes][checkable][drop-down-position$=left] .smart-menu-minimized-items-container > smart-menu-item > .smart-menu-item-label-container, .smart-menu[minimized][checkboxes][checkable][drop-down-position$=left] .smart-menu-minimized-items-container > smart-menu-items-group > .smart-menu-item-label-container { padding-left: 10px; padding-right: 35px; } .smart-menu[minimized][checkboxes][checkable][drop-down-position$=left] .smart-menu-minimized-items-container > smart-menu-item > .smart-menu-item-label-container:after, .smart-menu[minimized][checkboxes][checkable][drop-down-position$=left] .smart-menu-minimized-items-container > smart-menu-items-group > .smart-menu-item-label-container:after { left: initial; right: 10px; } .smart-menu[minimize-icon-template] .smart-hamburger-icon { width: auto; float: left; } .smart-menu[minimize-icon-template=null] .smart-hamburger-icon { width: 40px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; float: none; cursor: pointer; } .smart-menu:not([mode=tree])[drop-down-position$=left] smart-menu-item:not([level="1"]) > .smart-menu-item-label-container { flex-direction: row-reverse; } .smart-menu:not([mode=tree])[checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable] > smart-menu-item > .smart-menu-item-label-container, .smart-menu:not([mode=tree])[checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable] > smart-menu-items-group > .smart-menu-item-label-container { padding-left: 10px; padding-right: 35px; } .smart-menu:not([mode=tree])[checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable] > smart-menu-item > .smart-menu-item-label-container:after, .smart-menu:not([mode=tree])[checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable] > smart-menu-items-group > .smart-menu-item-label-container:after { left: initial; right: 10px; } .smart-menu[mode]:not([mode=horizontal]) smart-menu-item[level="1"] > .smart-menu-item-label-container, .smart-menu[mode]:not([mode=horizontal]) smart-menu-items-group[level="1"] > .smart-menu-item-label-container { height: initial; } .smart-menu[mode]:not([mode=horizontal]):not([mode=tree])[drop-down-position$=left] smart-menu-item > .smart-menu-item-label-container { flex-direction: row-reverse; } .smart-menu[mode]:not([mode=horizontal])[drop-down-position$=left] .smart-menu-main-container smart-menu-items-group > .smart-menu-item-label-container { flex-direction: row-reverse; } .smart-menu[mode]:not([mode=horizontal])[drop-down-position$=left] .smart-menu-main-container smart-menu-items-group > .smart-menu-item-label-container > .smart-menu-items-group-arrow { margin-left: 0; margin-right: 50px; transform: rotate(180deg); } .smart-menu[mode]:not([mode=horizontal])[drop-down-position$=left] .smart-menu-main-container smart-menu-item > .smart-menu-item-label-container > .smart-menu-item-shortcut { margin-left: 0; margin-right: 100px; } .smart-menu[mode]:not([mode=horizontal]):not([minimized]) > .smart-container, .smart-menu[mode]:not([mode=horizontal]):not([minimized]).smart-container { display: block; } .smart-menu[mode=vertical] .smart-menu-main-container, .smart-menu[mode=dropDown] .smart-menu-main-container { flex-direction: column; } .smart-menu[mode=vertical] .smart-menu-main-container.scroll-buttons-shown, .smart-menu[mode=dropDown] .smart-menu-main-container.scroll-buttons-shown { width: 100%; height: calc(100% - 2 * var(--smart-menu-scroll-button-size)); } .smart-menu[mode=vertical] .smart-menu-main-container.scroll-buttons-shown.one-button-shown, .smart-menu[mode=dropDown] .smart-menu-main-container.scroll-buttons-shown.one-button-shown { width: 100%; height: calc(100% - var(--smart-menu-scroll-button-size)); } .smart-menu[mode=vertical] .smart-menu-drop-down[level="2"], .smart-menu[mode=dropDown] .smart-menu-drop-down[level="2"] { top: 0; left: 100%; } .smart-menu[mode=vertical] smart-menu-item[level="1"], .smart-menu[mode=vertical] smart-menu-items-group[level="1"], .smart-menu[mode=dropDown] smart-menu-item[level="1"], .smart-menu[mode=dropDown] smart-menu-items-group[level="1"] { width: 100%; height: auto; } .smart-menu[mode=vertical] smart-menu-item[level="1"] > .smart-menu-item-label-element, .smart-menu[mode=vertical] smart-menu-items-group[level="1"] > .smart-menu-item-label-element, .smart-menu[mode=dropDown] smart-menu-item[level="1"] > .smart-menu-item-label-element, .smart-menu[mode=dropDown] smart-menu-items-group[level="1"] > .smart-menu-item-label-element { max-width: calc(100% - 10px); } .smart-menu[mode=vertical] .smart-menu-scroll-button, .smart-menu[mode=dropDown] .smart-menu-scroll-button { width: 100%; height: var(--smart-menu-scroll-button-size); } .smart-menu[mode=vertical][drop-down-position$=left] .smart-menu-drop-down[level="2"], .smart-menu[mode=dropDown][drop-down-position$=left] .smart-menu-drop-down[level="2"] { left: initial; right: 100%; } .smart-menu[mode=vertical][drop-down-position|=top] .smart-menu-drop-down, .smart-menu[mode=dropDown][drop-down-position|=top] .smart-menu-drop-down { box-shadow: var(--smart-elevation-8); } .smart-menu[mode=vertical][drop-down-position|=top] .smart-menu-drop-down[level="2"], .smart-menu[mode=dropDown][drop-down-position|=top] .smart-menu-drop-down[level="2"] { top: 100%; } .smart-menu[mode=vertical][drop-down-position=overlay-right] .smart-menu-drop-down[level="2"], .smart-menu[mode=dropDown][drop-down-position=overlay-right] .smart-menu-drop-down[level="2"] { left: 0; } .smart-menu[mode=vertical][drop-down-position=overlay-left] .smart-menu-drop-down[level="2"], .smart-menu[mode=dropDown][drop-down-position=overlay-left] .smart-menu-drop-down[level="2"] { right: 0; } .smart-menu[mode=vertical][checkboxes][checkable][drop-down-position$=left] smart-menu-item[level="1"] > .smart-menu-item-label-container, .smart-menu[mode=vertical][checkboxes][checkable][drop-down-position$=left] smart-menu-items-group[level="1"] > .smart-menu-item-label-container, .smart-menu[mode=dropDown][checkboxes][checkable][drop-down-position$=left] smart-menu-item[level="1"] > .smart-menu-item-label-container, .smart-menu[mode=dropDown][checkboxes][checkable][drop-down-position$=left] smart-menu-items-group[level="1"] > .smart-menu-item-label-container { padding-left: 10px; padding-right: 35px; } .smart-menu[mode=vertical][checkboxes][checkable][drop-down-position$=left] smart-menu-item[level="1"] > .smart-menu-item-label-container:after, .smart-menu[mode=vertical][checkboxes][checkable][drop-down-position$=left] smart-menu-items-group[level="1"] > .smart-menu-item-label-container:after, .smart-menu[mode=dropDown][checkboxes][checkable][drop-down-position$=left] smart-menu-item[level="1"] > .smart-menu-item-label-container:after, .smart-menu[mode=dropDown][checkboxes][checkable][drop-down-position$=left] smart-menu-items-group[level="1"] > .smart-menu-item-label-container:after { left: initial; right: 10px; } .smart-menu[mode=vertical] .smart-menu-drop-down:not(.smart-menu-minimized-items-container) { margin: 0 calc(var(--smart-editor-drop-down-vertical-offset) + 3px); } .smart-menu[mode=vertical] .smart-menu-drop-down:not(.smart-menu-minimized-items-container) .smart-menu-drop-down { margin: 0; } .smart-menu[mode=vertical] .smart-menu-main-container > smart-menu-item[level="1"] .smart-menu-item-shortcut { display: none; } .smart-menu[mode=dropDown][drop-down-position$=left] .smart-menu-main-container smart-menu-item[level="1"] > .smart-menu-item-label-container > .smart-menu-item-shortcut { margin-right: initial; } .smart-menu[mode=dropDown] smart-menu-item[level="1"] .smart-menu-item-shortcut { display: block; margin-left: 0; } .smart-menu[mode=dropDown]:not([animation=none]) { transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms, visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; opacity: 1; transform: scale(1); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .smart-menu[mode=dropDown]:not([animation=none]).smart-visibility-hidden { opacity: 0.2; transform: scale(0); } .smart-menu[mode=tree] smart-menu-item[level="1"] .smart-menu-item-shortcut { display: block; } .smart-menu[mode=tree] .smart-menu-scroll-button { width: 100%; height: var(--smart-menu-scroll-button-size); } .smart-menu[mode=tree] .smart-menu-minimized-items-container.scroll-buttons-shown { width: 100%; height: calc(100% - 2 * var(--smart-menu-scroll-button-size)); } .smart-menu[mode=tree] .smart-menu-minimized-items-container.scroll-buttons-shown.one-button-shown { width: 100%; height: calc(100% - var(--smart-menu-scroll-button-size)); } .smart-menu[mode=tree]:not([minimized]) .smart-menu-minimized-items-container { position: relative; width: 100%; height: 100%; box-shadow: none; overflow: hidden; transform: none; left: 0; top: 0; } .smart-menu[mode=tree]:not([minimized])[drop-down-position$=left] smart-menu-items-group:not([level="1"]) > .smart-menu-item-label-container { flex-direction: row; } .smart-menu[mode=tree][minimized][checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable] > smart-menu-item > .smart-menu-item-label-container, .smart-menu[mode=tree][minimized][checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable] > smart-menu-items-group > .smart-menu-item-label-container { padding-left: 10px; padding-right: 35px; } .smart-menu[mode=tree][minimized][checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable] > smart-menu-item > .smart-menu-item-label-container:after, .smart-menu[mode=tree][minimized][checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable] > smart-menu-items-group > .smart-menu-item-label-container:after { left: initial; right: 10px; } .smart-menu[drop-down-position] .smart-menu-minimized-items-container .smart-menu-drop-down { position: static; width: 100%; height: auto; padding-left: 20px; box-shadow: none; transform: none; } .smart-menu[drop-down-position*=overlay] .smart-menu-drop-down, .smart-menu[drop-down-position*=overlay] .smart-menu-drop-down[level="2"] { margin: unset; } .smart-menu[drop-down-position|=overlay] .smart-menu-drop-down { top: 50%; left: 0; transform: translateY(-50%); box-shadow: var(--smart-elevation-8); } .smart-menu[drop-down-position|=overlay] .smart-menu-drop-down[level="2"] { top: initial; transform: initial; } .smart-menu[drop-down-position|=overlay]:not([animation=none]) .smart-menu-drop-down { transform: translateY(-50%) scaleY(1); -webkit-transform-origin: center; transform-origin: center; } .smart-menu[drop-down-position|=overlay]:not([animation=none]) .smart-menu-drop-down.smart-visibility-hidden { transform: translateY(-50%) scaleY(0); } .smart-menu[drop-down-position|=overlay]:not([animation=none]) .smart-menu-drop-down[level="2"] { transform: scaleY(1); } .smart-menu[drop-down-position|=overlay]:not([animation=none]) .smart-menu-drop-down[level="2"].smart-visibility-hidden { transform: scaleY(0); } .smart-menu[drop-down-position*=top] .smart-menu-drop-down, .smart-menu[drop-down-position*=top] .smart-menu-drop-down[level="2"] { margin: calc(-1 * (var(--smart-editor-drop-down-vertical-offset) + 3px)) 0px; } .smart-menu[drop-down-position|=top] .smart-menu-drop-down { top: 100%; transform: translateY(-100%); box-shadow: var(--smart-elevation-8); } .smart-menu[drop-down-position|=top] .smart-menu-drop-down[level="2"] { top: 0; } .smart-menu[drop-down-position|=top] .smart-menu-minimized-items-container { top: calc(-1 * var(--smart-border-width)); transform: translateY(-100%); box-shadow: var(--smart-elevation-4); } .smart-menu[drop-down-position|=top]:not([animation=none]) .smart-menu-drop-down { transform: translateY(-100%) scaleY(1); -webkit-transform-origin: bottom; transform-origin: bottom; } .smart-menu[drop-down-position|=top]:not([animation=none]) .smart-menu-drop-down.smart-visibility-hidden, .smart-menu[drop-down-position|=top]:not([animation=none]) .smart-menu-minimized-items-container.smart-visibility-hidden { transform: translateY(-100%) scaleY(0); } .smart-menu[drop-down-position|=top]:not([animation=none]):not([mode=tree]) .smart-menu-minimized-items-container { transform: translateY(-100%) scaleY(1); -webkit-transform-origin: bottom; transform-origin: bottom; } .smart-menu[drop-down-position|=top][mode=vertical]:not([animation=none]) .smart-menu-minimized-items-container .smart-menu-drop-down, .smart-menu[drop-down-position|=top][mode=dropDown]:not([animation=none]) .smart-menu-minimized-items-container .smart-menu-drop-down { -webkit-transform-origin: top; transform-origin: top; } .smart-menu[drop-down-position$=left] .smart-menu-drop-down { left: initial; right: 100%; } .smart-menu[drop-down-position$=left] .smart-menu-drop-down[level="2"] { left: initial; right: 0; } .smart-menu[drop-down-position$=left] .smart-menu-main-container smart-menu-items-group:not([level="1"]) > .smart-menu-item-label-container > .smart-menu-items-group-arrow { margin-left: 0; margin-right: 50px; transform: rotate(180deg); } .smart-menu[drop-down-position$=left] .smart-menu-main-container smart-menu-item:not([level="1"]) > .smart-menu-item-label-container > .smart-menu-item-shortcut { margin-left: 0; margin-right: 100px; } .smart-menu[drop-down-position$=left] smart-menu-items-group:not([level="1"]) > .smart-menu-item-label-container { flex-direction: row-reverse; } .smart-menu[drop-down-position$=left] .smart-menu-minimized-items-container { left: initial; right: calc(-1 * var(--smart-border-width)); } .smart-menu[drop-down-position=overlay-left] .smart-menu-main-container .smart-menu-drop-down:not([level="2"]) { left: initial; right: 0; } .smart-menu[checkboxes] .smart-menu-item-container[checkable] > smart-menu-item > .smart-menu-item-label-container, .smart-menu[checkboxes] .smart-menu-item-container[checkable] > smart-menu-items-group > .smart-menu-item-label-container { padding-left: 35px; } .smart-menu[checkboxes] .smart-menu-item-container[checkable] > smart-menu-item[checked] > .smart-menu-item-label-container:after, .smart-menu[checkboxes] .smart-menu-item-container[checkable] > smart-menu-items-group[checked] > .smart-menu-item-label-container:after { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); content: var(--smart-icon-check); font-family: "smart-icons"; } .smart-menu[checkboxes] .smart-menu-item-container[checkable][check-mode=radioButton] > smart-menu-item[checked] > .smart-menu-item-label-container:after, .smart-menu[checkboxes] .smart-menu-item-container[checkable][check-mode=radioButton] > smart-menu-items-group[checked] > .smart-menu-item-label-container:after, .smart-menu[checkboxes] .smart-menu-item-container[checkable] > smart-menu-item[checked][check-type=radioButton] > .smart-menu-item-label-container:after, .smart-menu[checkboxes] .smart-menu-item-container[checkable] > smart-menu-items-group[checked][check-type=radioButton] > .smart-menu-item-label-container:after { content: var(--smart-icon-radio); } .smart-menu[checkboxes][checkable] smart-menu-item[level="1"] > .smart-menu-item-label-container, .smart-menu[checkboxes][checkable] smart-menu-items-group[level="1"] > .smart-menu-item-label-container { padding-left: 35px; } .smart-menu[checkboxes][checkable] smart-menu-item[level="1"][checked] > .smart-menu-item-label-container:after, .smart-menu[checkboxes][checkable] smart-menu-items-group[level="1"][checked] > .smart-menu-item-label-container:after { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); content: var(--smart-icon-check); font-family: "smart-icons"; } .smart-menu[checkboxes][checkable] smart-menu-item[level="1"][checked][check-type=radioButton] > .smart-menu-item-label-container:after, .smart-menu[checkboxes][checkable] smart-menu-items-group[level="1"][checked][check-type=radioButton] > .smart-menu-item-label-container:after { content: var(--smart-icon-radio); } .smart-menu[checkboxes][checkable][check-mode=radioButton] smart-menu-item[level="1"][checked] > .smart-menu-item-label-container:after, .smart-menu[checkboxes][checkable][check-mode=radioButton] smart-menu-items-group[level="1"][checked] > .smart-menu-item-label-container:after { content: var(--smart-icon-radio); } .smart-menu[checkboxes][mode=tree] .smart-menu-minimized-items-container smart-menu-items-group.smart-menu-items-group-opened > .smart-menu-item-label-container:after { top: calc(50% + 5px); } .smart-menu-items-group .smart-menu-items-group-arrow { margin-left: 50px; font-size: calc(var(--smart-font-size) - 3px); font-family: var(--smart-family-icon); transform: rotate(0deg); } .smart-menu-items-group[level="1"] > .smart-menu-item-label-container > .smart-menu-items-group-arrow { margin-left: 10px; } .smart-menu-item[template-applied] { cursor: default; } .smart-menu-item[template-applied] .smart-menu-item-label-container { overflow: visible; } .smart-menu-item[template-applied] .smart-menu-item-label-element { width: 100%; overflow: visible; display: block; white-space: normal; } .smart-menu-drop-down { cursor: default; background: var(--smart-background); color: var(--smart-background-color); } .smart-menu-drop-down .smart-menu-drop-down { margin: 0; } .smart-menu-drop-down[level="2"]:not(.smart-menu-minimized-items-container) { margin: calc(var(--smart-editor-drop-down-vertical-offset) + 3px) 0px; } .smart-menu-drop-down[level="2"][mode=vertical]:not(.smart-menu-minimized-items-container), .smart-menu-drop-down[level="2"][mode=dropDown]:not(.smart-menu-minimized-items-container) { margin: 0; } .smart-menu-drop-down[drop-down-position*=overlay] { margin: unset; } .smart-menu-drop-down.drop-down-height-set .smart-menu-scroll-button { display: block; background-color: var(--smart-scroll-bar-button-background); color: var(--smart-scroll-bar-button-color); border-color: var(--smart-scroll-bar-button-border); min-height: 0; width: 100%; height: var(--smart-menu-scroll-button-size); } .smart-menu-drop-down.drop-down-height-set .smart-menu-scroll-button[hover] { background-color: var(--smart-scroll-bar-button-background-hover); color: var(--smart-scroll-bar-button-color-hover); border-color: var(--smart-scroll-bar-button-border-hover); } .smart-menu-drop-down.drop-down-height-set .smart-menu-scroll-button[active] { background-color: var(--smart-scroll-bar-button-background-active); color: var(--smart-scroll-bar-button-color-active); border-color: var(--smart-scroll-bar-button-border-active); } .smart-menu-drop-down.drop-down-height-set .smart-menu-scroll-button > button { border: none; } .smart-menu-drop-down.drop-down-height-set .smart-menu-main-container.scroll-buttons-shown { width: calc(100% - 2 * var(--smart-menu-scroll-button-size)); overflow: hidden; } .smart-menu-drop-down.drop-down-height-set[mode=vertical] .smart-menu-scroll-button, .smart-menu-drop-down.drop-down-height-set[mode=dropDown] .smart-menu-scroll-button, .smart-menu-drop-down.drop-down-height-set[mode=tree] .smart-menu-scroll-button { width: 100%; height: var(--smart-menu-scroll-button-size); } .smart-menu-drop-down.drop-down-height-set > .smart-menu-item-container { height: 100%; overflow: hidden; } .smart-menu-drop-down.drop-down-height-set > .smart-menu-item-container.scroll-buttons-shown { height: calc(100% - 2 * var(--smart-menu-scroll-button-size)); } .smart-menu-drop-down.drop-down-height-set > .smart-menu-item-container.scroll-buttons-shown.one-button-shown { width: 100%; height: calc(100% - var(--smart-menu-scroll-button-size)); } .smart-menu-drop-down.drop-down-height-set > .smart-menu-item-container > smart-menu-items-group { position: static; } .smart-menu-drop-down.smart-drop-down-repositioned { position: absolute; background: var(--smart-background); color: var(--smart-background-color); box-shadow: var(--smart-elevation-8); border-radius: var(--smart-border-radius); left: 100%; top: 0; z-index: var(--smart-editor-drop-down-z-index); box-sizing: border-box; font-size: var(--smart-font-size); font-family: var(--smart-font-family); } .smart-menu-drop-down.smart-drop-down-repositioned a { color: inherit; } .smart-menu-drop-down.smart-drop-down-repositioned * { box-sizing: border-box; } .smart-menu-drop-down.smart-drop-down-repositioned .smart-ripple { background: var(--smart-primary); } .smart-menu-drop-down.smart-drop-down-repositioned .smart-menu-drop-down { border: none; } .smart-menu-drop-down.smart-drop-down-repositioned .smart-menu-item-label-container { position: relative; width: 100%; padding: 10px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; overflow: hidden; } .smart-menu-drop-down.smart-drop-down-repositioned smart-menu-item[separator][level]:last-child, .smart-menu-drop-down.smart-drop-down-repositioned smart-menu-items-group[separator][level]:last-child { border-bottom: none; } .smart-menu-drop-down.smart-drop-down-repositioned.smart-drop-down-container[drop-down-position*=top] { margin: calc(-1 * (var(--smart-editor-drop-down-vertical-offset) + 3px)) 0px; } .smart-menu-drop-down.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable] > smart-menu-item > .smart-menu-item-label-container, .smart-menu-drop-down.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable] > smart-menu-items-group > .smart-menu-item-label-container { padding-left: 35px; } .smart-menu-drop-down.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable] > smart-menu-item[checked] > .smart-menu-item-label-container:after, .smart-menu-drop-down.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable] > smart-menu-items-group[checked] > .smart-menu-item-label-container:after { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); content: var(--smart-icon-check); font-family: "smart-icons"; } .smart-menu-drop-down.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable][check-mode=radioButton] > smart-menu-item[checked] > .smart-menu-item-label-container:after, .smart-menu-drop-down.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable][check-mode=radioButton] > smart-menu-items-group[checked] > .smart-menu-item-label-container:after, .smart-menu-drop-down.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable] > smart-menu-item[checked][check-type=radioButton] > .smart-menu-item-label-container:after, .smart-menu-drop-down.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable] > smart-menu-items-group[checked][check-type=radioButton] > .smart-menu-item-label-container:after { content: var(--smart-icon-radio); } .smart-menu-drop-down.smart-drop-down-repositioned[level="2"] { top: 100%; left: 0; } .smart-menu-drop-down.smart-drop-down-repositioned[mode=vertical][level="2"], .smart-menu-drop-down.smart-drop-down-repositioned[mode=dropDown][level="2"] { top: 0; left: 100%; } .smart-menu-drop-down.smart-drop-down-repositioned[mode=vertical][drop-down-position|=top], .smart-menu-drop-down.smart-drop-down-repositioned[mode=dropDown][drop-down-position|=top] { box-shadow: var(--smart-elevation-8); transform: translateY(-100%); } .smart-menu-drop-down.smart-drop-down-repositioned[mode=vertical][drop-down-position|=top][level="2"], .smart-menu-drop-down.smart-drop-down-repositioned[mode=dropDown][drop-down-position|=top][level="2"] { top: 100%; transform: none; } .smart-menu-drop-down.smart-drop-down-repositioned[mode=vertical][drop-down-position=overlay-right][level="2"], .smart-menu-drop-down.smart-drop-down-repositioned[mode=dropDown][drop-down-position=overlay-right][level="2"] { left: 0; } .smart-menu-drop-down.smart-drop-down-repositioned[mode=vertical][drop-down-position=overlay-left][level="2"], .smart-menu-drop-down.smart-drop-down-repositioned[mode=dropDown][drop-down-position=overlay-left][level="2"] { right: 0; } .smart-menu-drop-down.smart-drop-down-repositioned[mode=dropDown][drop-down-position$=left][level="2"] { left: initial; right: 100%; } .smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position$=left] { left: initial; right: 100%; } .smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position$=left][level="2"] { left: initial; right: 0; } .smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position=overlay-left]:not([level="2"]) { left: initial; right: 0; } .smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position*=overlay] { margin: unset; } .smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position|=overlay] { top: 50%; left: 0; transform: translateY(-50%); box-shadow: var(--smart-elevation-8); } .smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position*=top] { margin: calc(-1 * (var(--smart-editor-drop-down-vertical-offset) + 3px)) 0px; } .smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position|=top] { top: 100%; transform: translateY(-100%); box-shadow: var(--smart-elevation-8); } .smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position|=top][level="2"] { top: 0; transform: none; } .smart-menu-drop-down.smart-drop-down-repositioned[animation=none].smart-visibility-hidden { transform: scale(0); } .smart-menu-drop-down.smart-drop-down-repositioned.smart-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none; } .smart-menu-drop-down.smart-drop-down-repositioned .smart-hidden { display: none !important; } .smart-menu-drop-down:not([animation=none]).smart-drop-down-repositioned { opacity: 1; transform: scaleY(1); -webkit-transform-origin: top; transform-origin: top; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms, visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .smart-menu-drop-down:not([animation=none]).smart-drop-down-repositioned.smart-visibility-hidden { opacity: 0.2; transform: scaleY(0); } .smart-menu-drop-down:not([animation=none]).smart-drop-down-repositioned[drop-down-position|=top] { transform: translateY(-100%) scaleY(1); -webkit-transform-origin: bottom; transform-origin: bottom; } .smart-menu-drop-down:not([animation=none]).smart-drop-down-repositioned[drop-down-position|=top].smart-visibility-hidden { transform: translateY(-100%) scaleY(0); } .smart-menu-drop-down:not([animation=none]).smart-drop-down-repositioned[drop-down-position|=top][level="2"] { transform: scaleY(1); } .smart-menu-drop-down:not([animation=none]).smart-drop-down-repositioned[drop-down-position|=top][level="2"].smart-visibility-hidden { transform: scaleY(0); } .smart-menu-drop-down:not([animation=none]).smart-drop-down-repositioned[drop-down-position|=overlay] { transform: translateY(-50%) scaleY(1); -webkit-transform-origin: center; transform-origin: center; } .smart-menu-drop-down:not([animation=none]).smart-drop-down-repositioned[drop-down-position|=overlay].smart-visibility-hidden { transform: translateY(-50%) scaleY(0); } .smart-menu-drop-down:not(.smart-list-menu-view-minimized).smart-drop-down-repositioned[checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable] > smart-menu-item > .smart-menu-item-label-container, .smart-menu-drop-down:not(.smart-list-menu-view-minimized).smart-drop-down-repositioned[checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable] > smart-menu-items-group > .smart-menu-item-label-container { padding-left: 10px; padding-right: 35px; } .smart-menu-drop-down:not(.smart-list-menu-view-minimized).smart-drop-down-repositioned[checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable] > smart-menu-item > .smart-menu-item-label-container:after, .smart-menu-drop-down:not(.smart-list-menu-view-minimized).smart-drop-down-repositioned[checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable] > smart-menu-items-group > .smart-menu-item-label-container:after { left: initial; right: 10px; } .smart-menu-minimized-items-container { position: absolute; background: var(--smart-background); color: var(--smart-background-color); box-shadow: var(--smart-elevation-8); border-radius: var(--smart-border-radius); z-index: var(--smart-editor-drop-down-z-index); left: calc(-1 * var(--smart-border-width)); top: calc(100% + var(--smart-border-width)); } .smart-menu-minimized-items-container smart-menu-items-group { display: flex; flex-direction: column; overflow: hidden; } .smart-menu-minimized-items-container smart-menu-items-group .smart-menu-items-group-arrow { margin-left: 0; } .smart-menu-minimized-items-container smart-menu-item[level], .smart-menu-minimized-items-container smart-menu-items-group[level] { margin: 0; height: auto; } .smart-menu-minimized-items-container .smart-menu-drop-down { margin: 0; border: none; position: static; width: 100%; height: auto; padding-left: 20px; box-shadow: none; transform: none; } .smart-menu-minimized-items-container .smart-menu-drop-down.smart-visibility-hidden { border: none; } .smart-menu-minimized-items-container .smart-menu-drop-down:not(.smart-menu-minimized-items-container) { margin: 0; } .smart-menu-minimized-items-container .smart-menu-drop-down.drop-down-height-set > .smart-menu-item-container { overflow: initial; } .smart-menu-minimized-items-container.smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position$=left] .smart-menu-drop-down .smart-menu-item-label-container > .smart-menu-item-shortcut { margin-right: 0; } .smart-menu-minimized-items-container.smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position|=overlay] { transform: none; } .smart-menu-minimized-items-container.smart-menu-drop-down:not([animation=none]).smart-drop-down-repositioned[drop-down-position|=overlay] { transform: scaleY(1); -webkit-transform-origin: top; transform-origin: top; } .smart-menu-minimized-items-container.smart-menu-drop-down:not([animation=none]).smart-visibility-hidden.smart-drop-down-repositioned[drop-down-position|=overlay] { transform: scaleY(0); } .smart-menu-minimized-items-container .smart-menu-item-shortcut { margin-left: 0; } .smart-menu-minimized-items-container .smart-menu-item-label-container { position: relative; width: 100%; padding: 10px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; overflow: hidden; } .smart-menu-minimized-items-container .smart-menu-items-group-opened > .smart-menu-drop-down { margin-top: 10px; } .smart-menu-minimized-items-container .smart-menu-items-group-opened > .smart-menu-item-label-container > .smart-menu-items-group-arrow { transform: rotate(180deg); } .smart-menu-minimized-items-container .smart-menu-item-label-element { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .smart-menu-minimized-items-container.smart-drop-down-repositioned { z-index: var(--smart-editor-drop-down-z-index); } .smart-menu-minimized-items-container.smart-drop-down-repositioned .smart-menu-drop-down { position: absolute; background: var(--smart-background); color: var(--smart-background-color); box-shadow: var(--smart-elevation-8); border-radius: var(--smart-border-radius); left: 100%; top: 0; z-index: var(--smart-editor-drop-down-z-index); } .smart-menu-minimized-items-container.smart-drop-down-repositioned .smart-menu-drop-down.smart-visibility-hidden { border: none; margin-top: 0; height: 0; transform: scaleY(0); } .smart-menu-minimized-items-container.smart-drop-down-repositioned .smart-menu-items-group-opened > .smart-menu-item-label-container { padding-bottom: 0; } .smart-menu-minimized-items-container.smart-drop-down-repositioned[drop-down-position$=left] { left: initial; right: calc(-1 * var(--smart-border-width)); } .smart-menu-minimized-items-container.smart-drop-down-repositioned[drop-down-position$=left] .smart-menu-items-group-arrow { margin: 0; } .smart-menu-minimized-items-container.smart-drop-down-repositioned[checkboxes] smart-menu-items-group.smart-menu-items-group-opened > .smart-menu-item-label-container:after { top: calc(50% + 5px); } .smart-menu-minimized-items-container:not([animation=none]) { opacity: 1; transform: scaleY(1); -webkit-transform-origin: top; transform-origin: top; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms, visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .smart-menu-minimized-items-container:not([animation=none]) .smart-menu-drop-down { -webkit-transform-origin: top; transform-origin: top; transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .smart-menu-minimized-items-container:not([animation=none]) .smart-menu-item-label-container > .smart-menu-items-group-arrow { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .smart-menu-minimized-items-container:not([animation=none]).smart-visibility-hidden { opacity: 0.2; transform: scaleY(0); } .smart-menu-minimized-items-container[drop-down] { margin: calc(var(--smart-editor-drop-down-vertical-offset) + 3px) 0px; } .smart-menu-minimized-items-container[drop-down-position] .smart-menu-drop-down { position: static; width: 100%; height: auto; padding-left: 20px; box-shadow: none; transform: none; } .smart-menu-minimized-items-container[drop-down-position|=top] { top: calc(-1 * var(--smart-border-width)); transform: translateY(-100%); box-shadow: var(--smart-elevation-4); } .smart-menu-minimized-items-container[drop-down-position|=top]:not([animation=none]) { transform: translateY(-100%) scaleY(1); -webkit-transform-origin: bottom; transform-origin: bottom; } .smart-menu-minimized-items-container[drop-down-position|=top]:not([animation=none]).smart-visibility-hidden { transform: translateY(-100%) scaleY(0); } .smart-menu-minimized-items-container[drop-down-position|=top][mode=vertical]:not([animation=none]) .smart-menu-drop-down, .smart-menu-minimized-items-container[drop-down-position|=top][mode=dropDown]:not([animation=none]) .smart-menu-drop-down { -webkit-transform-origin: top; transform-origin: top; } .smart-menu-minimized-items-container[drop-down-position$=left] .smart-menu-drop-down { padding-left: 0; padding-right: 20px; } .smart-menu-minimized-items-container[checkboxes][checkable] > smart-menu-item > .smart-menu-item-label-container, .smart-menu-minimized-items-container[checkboxes][checkable] > smart-menu-items-group > .smart-menu-item-label-container { padding-left: 35px; } .smart-menu-minimized-items-container[checkboxes][checkable] > smart-menu-item[checked] > .smart-menu-item-label-container:after, .smart-menu-minimized-items-container[checkboxes][checkable] > smart-menu-items-group[checked] > .smart-menu-item-label-container:after { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); content: var(--smart-icon-check); font-family: "smart-icons"; } .smart-menu-minimized-items-container[checkboxes][checkable] > smart-menu-item[checked][check-type=radioButton] > .smart-menu-item-label-container:after, .smart-menu-minimized-items-container[checkboxes][checkable] > smart-menu-item[checked][check-type=radioButton] > .smart-menu-item-label-container:after, .smart-menu-minimized-items-container[checkboxes][checkable] > smart-menu-items-group[checked][check-type=radioButton] > .smart-menu-item-label-container:after, .smart-menu-minimized-items-container[checkboxes][checkable] > smart-menu-items-group[checked][check-type=radioButton] > .smart-menu-item-label-container:after { content: var(--smart-icon-radio); } .smart-menu-minimized-items-container[checkboxes][checkable][drop-down-position$=left] > smart-menu-item > .smart-menu-item-label-container, .smart-menu-minimized-items-container[checkboxes][checkable][drop-down-position$=left] > smart-menu-items-group > .smart-menu-item-label-container { padding-left: 10px; padding-right: 35px; } .smart-menu-minimized-items-container[checkboxes][checkable][drop-down-position$=left] > smart-menu-item > .smart-menu-item-label-container:after, .smart-menu-minimized-items-container[checkboxes][checkable][drop-down-position$=left] > smart-menu-items-group > .smart-menu-item-label-container:after { left: initial; right: 10px; } .smart-menu-minimized-items-container[checkboxes][checkable][check-mode=radioButton] > smart-menu-item[checked] > .smart-menu-item-label-container:after, .smart-menu-minimized-items-container[checkboxes][checkable][check-mode=radioButton] > smart-menu-items-group[checked] > .smart-menu-item-label-container:after { content: var(--smart-icon-radio); } .smart-drop-down.smart-menu-minimized-items-container { margin: calc(var(--smart-editor-drop-down-vertical-offset) + 3px) 0px; } .smart-date-time-picker .smart-date-time-drop-down.smart-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none; } .minus:after { content: var(--smart-icon-minus); font-family: var(--smart-font-family-icon); } /* --- Right-To-Left --- */ .smart-menu[right-to-left] .smart-menu-main-container { direction: rtl; } .smart-menu[right-to-left] .smart-menu-minimized-items-container { left: initial; r