zmp-core/components/treeview/treeview-rtl.css

Full featured mobile HTML framework for building iOS & Android apps

:root{--zmp-treeview-item-height:34px;--zmp-treeview-item-padding-left:16px;--zmp-treeview-item-padding-right:16px;--zmp-treeview-toggle-size:24px;--zmp-treeview-children-offset:29px;--zmp-treeview-label-font-weight:400;--zmp-treeview-label-text-color:inherit;--zmp-treeview-icon-size:24px;--zmp-treeview-toggle-color:rgba(0, 0, 0, 0.5);--zmp-treeview-toggle-hover-bg-color:rgba(0, 0, 0, 0.1);--zmp-treeview-toggle-pressed-bg-color:rgba(0, 0, 0, 0.15);--zmp-treeview-icon-color:rgba(0, 0, 0, 0.5);--zmp-treeview-selectable-hover-bg-color:rgba(0, 0, 0, 0.1);--zmp-treeview-link-hover-bg-color:rgba(0, 0, 0, 0.1);--zmp-treeview-link-pressed-bg-color:rgba(0, 0, 0, 0.15)}:root .theme-dark,:root.theme-dark{--zmp-treeview-toggle-color:rgba(255, 255, 255, 0.5);--zmp-treeview-toggle-hover-bg-color:rgba(255, 255, 255, 0.03);--zmp-treeview-toggle-pressed-bg-color:rgba(255, 255, 255, 0.1);--zmp-treeview-icon-color:rgba(255, 255, 255, 0.75);--zmp-treeview-selectable-hover-bg-color:rgba(255, 255, 255, 0.03);--zmp-treeview-link-hover-bg-color:rgba(255, 255, 255, 0.03);--zmp-treeview-link-pressed-bg-color:rgba(255, 255, 255, 0.11)}.ios{--zmp-treeview-label-font-size:17px}.md{--zmp-treeview-label-font-size:16px}.aurora{--zmp-treeview-label-font-size:16px}.treeview-item-root{padding-right:var(--zmp-treeview-item-padding-left);padding-left:var(--zmp-treeview-item-padding-right);min-height:var(--zmp-treeview-item-height);display:flex;align-items:center;justify-content:flex-start}.treeview-item-content{display:flex;justify-content:flex-start;align-items:center}.treeview-item-content>.material-icons,.treeview-item-content>.zmp-icons,.treeview-item-content>i{font-size:var(--zmp-treeview-icon-size);color:var(--zmp-treeview-icon-color)}.treeview-item-content:first-child{margin-right:calc(var(--zmp-treeview-toggle-size) + 5px)}.treeview-item-content>*+*{margin-right:5px}.treeview-item-label{font-size:var(--zmp-treeview-label-font-size);font-weight:var(--zmp-treeview-label-font-weight);color:var(--zmp-treeview-label-text-color)}.treeview-toggle{width:var(--zmp-treeview-toggle-size);height:var(--zmp-treeview-toggle-size);cursor:pointer;border-radius:4px;background-color:rgba(0,0,0,0);transition-duration:.2s;position:relative;margin-left:5px}.treeview-toggle.active-state{background-color:var(--zmp-treeview-toggle-pressed-bg-color)}.treeview-toggle:after{transition-duration:.2s;content:'';position:absolute;left:50%;top:50%;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;transform:translate(-50%,-50%);border-right:6px solid var(--zmp-treeview-toggle-color)}.treeview-toggle-hidden{opacity:0;pointer-events:none;visibility:hidden}.treeview-preloader{--zmp-preloader-size:var(--zmp-treeview-toggle-size);margin-left:calc(-1 * var(--zmp-treeview-toggle-size))}.treeview-item-children{display:none}.treeview-item-opened>.treeview-item-children{display:block}.treeview-item-opened>.treeview-item-root .treeview-toggle:after{transform:translate(-50%,-50%) rotate(-90deg)}a.treeview-item-root{color:var(--zmp-treeview-label-text-color)}.treeview-item-selectable.treeview-item-root,.treeview-item-selectable>.treeview-item-root{cursor:pointer;transition-duration:150ms}a.treeview-item-root{transition-duration:150ms}a.treeview-item-root.active-state{background:var(--zmp-treeview-link-pressed-bg-color)}.treeview-item-toggle.treeview-item-root,.treeview-item-toggle>.treeview-item-root{cursor:pointer}.treeview-item-selected.treeview-item-root,.treeview-item-selected>.treeview-item-root{background:var(--zmp-treeview-selectable-selected-bg-color,rgba(var(--zmp-theme-color-rgb),.2))}.treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--zmp-treeview-item-padding-left) + var(--zmp-treeview-children-offset) * 1)}.treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--zmp-treeview-item-padding-left) + var(--zmp-treeview-children-offset) * 2)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--zmp-treeview-item-padding-left) + var(--zmp-treeview-children-offset) * 3)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--zmp-treeview-item-padding-left) + var(--zmp-treeview-children-offset) * 4)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--zmp-treeview-item-padding-left) + var(--zmp-treeview-children-offset) * 5)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--zmp-treeview-item-padding-left) + var(--zmp-treeview-children-offset) * 6)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--zmp-treeview-item-padding-left) + var(--zmp-treeview-children-offset) * 7)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--zmp-treeview-item-padding-left) + var(--zmp-treeview-children-offset) * 8)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--zmp-treeview-item-padding-left) + var(--zmp-treeview-children-offset) * 9)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--zmp-treeview-item-padding-left) + var(--zmp-treeview-children-offset) * 10)}.aurora .treeview-toggle:hover{background-color:var(--zmp-treeview-toggle-hover-bg-color)}.aurora .treeview-toggle.active-state{background-color:var(--zmp-treeview-toggle-pressed-bg-color)}.aurora .treeview-item-selectable.treeview-item-root:hover,.aurora .treeview-item-selectable>.treeview-item-root:hover{background:var(--zmp-treeview-selectable-hover-bg-color)}.aurora a.treeview-item-root:hover{background:var(--zmp-treeview-link-hover-bg-color)}.aurora a.treeview-item-root.active-state{background:var(--zmp-treeview-link-pressed-bg-color)}.aurora .treeview-item-selected.treeview-item-root:hover,.aurora .treeview-item-selected>.treeview-item-root:hover{background:var(--zmp-treeview-selectable-selected-bg-color,rgba(var(--zmp-theme-color-rgb),.2))}