.combo-dataview { @combo-dataview-width: 100%; width: @combo-dataview-width; .view { display: inline-block; float: left; overflow: hidden; width: @combo-dataview-width; height: 100%; .border-radius(@border-radius-small); border: 1px solid @input-border; background-color: @input-bg; .dataview { padding: 1px; } } .button { display: inline-block; float: right; button { border-radius:0 @border-radius-small @border-radius-small 0; border: 1px solid @input-border; background-color: @input-bg; &.dropdown-toggle { .inner-box-caret { padding: 0 2px 0 0; } .caret { // width: 7px; // height: 7px; border: 0; background-position: @arrow-small-offset-x @arrow-small-offset-y; } } } } .dropdown-menu { border-color: var(--border-regular-control); border-top-right-radius: 0; border-top-left-radius: 2px; margin: 0; padding: 1px; overflow: hidden; } &.disabled { opacity: 0.65; .dataview.inner { > .item { cursor: default; } } } } .combo-styles { @combo-dataview-button-width: 30px; @combo-dataview-height: 46px; height: @combo-dataview-height; .view { margin-right: -@combo-dataview-button-width; padding-right: @combo-dataview-button-width; .border-left-radius(0); .dataview { height: 46px; padding: 0; margin: -1px 0 0 -1px; } } .item { padding: 3px; border: 1px solid var(--border-regular-control); .box-shadow(none); margin: 0 -1px -1px 0; &:hover { .box-inner-shadow(0 0 0 2px var(--border-regular-control)); } &.selected { .box-inner-shadow(0 0 0 2px var(--border-preview-select)); } } &.disabled { .item { &:hover:not(.selected) { .box-shadow(none); .style > div { background-color: transparent; } } } } .dropdown-menu { box-sizing: content-box; padding: 0; border-top-left-radius: 0; border-left: 0 none; .dataview { margin-top: -1px; } } .style { width: auto; position: relative; border: none; .box-shadow(0 0 0 1px @body-bg); > div { background-repeat: no-repeat; background-size: cover; } } .button { width: @combo-dataview-button-width; height: @combo-dataview-height; button { &.dropdown-toggle { padding: 0; .caret { width: 27px; height: 27px; background-position: @arrow-big-offset-x @arrow-big-offset-y; transition: transform .2s; } &.active { .caret { transform: rotate(180deg); } } } } } .ps-scrollbar-y-rail { margin-top: 2px; } } .combo-template(@combo-dataview-height: 64px) { @combo-dataview-button-width: 18px; height: @combo-dataview-height; .dropdown-menu { padding: 2px; } .view { margin-right: -@combo-dataview-button-width; padding-right: @combo-dataview-button-width; .dataview { padding: 2px; } } .button { width: @combo-dataview-button-width; height: @combo-dataview-height; } &.disabled { .item { &:hover:not(.selected) { .box-shadow(0 0 0 1px var(--border-regular-control)); } } } .ps-scrollbar-y-rail { margin-top: 3px; margin-bottom: 3px; right: 3px !important; } }; .combo-template { .combo-template(64px); } .combo-textart(@combo-dataview-height: 62px, @combo-dataview-item-margins: 4px) { @combo-dataview-button-width: 15px; height: @combo-dataview-height; .view { margin-right: -@combo-dataview-button-width; padding-right: @combo-dataview-button-width; } .button { width: @combo-dataview-button-width; height: @combo-dataview-height; } .item { margin: @combo-dataview-item-margins 0 @combo-dataview-item-margins @combo-dataview-item-margins; .box-shadow(none); } &.disabled { .item { &:hover:not(.selected) { .box-shadow(none); } } } }; .combo-pattern { .combo-textart(40px); .item { &:hover { .box-shadow(0 0 0 1px var(--border-regular-control)); } } .dropdown-menu { padding-right: 2px; } .ps-scrollbar-y-rail { margin-top: 4px; margin-bottom: 4px; } }; .combo-textart { .combo-textart(); } .combo-spark-style { .combo-textart(58px, 2px); } .combo-chart-style { .combo-textart(58px, 2px); .item { margin-left: 4px; .box-shadow(0 0 0 1px var(--border-regular-control)); } &.disabled { .item { &:hover:not(.selected) { .box-shadow(0 0 0 1px var(--border-regular-control)); } } } } .combo-pivot-template { .combo-template(60px); top: -7px; padding-right: 24px; position: absolute; .view .dataview, .dropdown-menu { padding: 1px; } } .combo-slicer-style { .combo-textart(61px, 4px); }