web-apps/apps/common/main/resources/less/combo-dataview.less
2021-10-19 18:24:19 +03:00

349 lines
8.4 KiB
Plaintext

.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: @scaled-one-px-value-ie solid @border-regular-control-ie;
border: @scaled-one-px-value solid @border-regular-control;
background-color: @background-normal-ie;
background-color: @background-normal;
.dataview {
padding: 1px;
}
}
.button {
display: inline-block;
float: right;
button {
border-radius:0 @border-radius-small @border-radius-small 0;
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
border: @scaled-one-px-value solid @border-regular-control;
background-color: @background-normal-ie;
background-color: @background-normal;
&.dropdown-toggle {
.inner-box-caret {
padding: 0 1px 0 0;
}
.caret {
// width: 7px;
// height: 7px;
// border: 0;
// background-position: @arrow-small-offset-x @arrow-small-offset-y;
margin-left: 1px;
.ie & {
margin-left: 0;
}
}
}
&.active, &:active {
.caret {
border-color: @icon-normal;
}
}
}
}
.dropdown-menu {
border-color: @border-regular-control-ie;
border-color: @border-regular-control;
border-top-right-radius: 0;
border-top-left-radius: 2px;
margin: 0;
padding: 1px;
overflow: hidden;
}
&.disabled {
opacity: @component-disabled-opacity;
.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 {
@minus-px: calc(-1px / @pixel-ratio-factor);
height: 46px;
padding: 0;
margin: -1 0 0 -1;
margin: @minus-px 0 0 @minus-px;
}
}
&:not(.shapes) .item {
padding: 2px;
padding: @scaled-two-px-value;
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
border: @scaled-one-px-value solid @border-regular-control;
.box-shadow(none);
@minus-px-ie: -1px;
@minus-px: calc(-1px / @pixel-ratio-factor);
margin: 0 @minus-px-ie @minus-px-ie 0;
margin: 0 @minus-px @minus-px 0;
height: @combo-dataview-height;
background-color: @background-normal-ie;
background-color: @background-normal;
display: flex;
&:hover {
.box-inner-shadow(0 0 0 2px @border-preview-hover-ie);
.box-inner-shadow(0 0 0 @scaled-two-px-value @border-preview-hover);
}
&.selected {
.box-inner-shadow(0 0 0 2px @border-preview-select-ie);
.box-inner-shadow(0 0 0 @scaled-two-px-value @border-preview-select);
}
}
&.disabled:not(.shapes) {
.item {
&:hover:not(.selected) {
.box-shadow(none);
.style > div {
background-color: transparent;
}
}
}
}
&:not(.shapes) .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 @scaled-one-px-value-ie @background-normal-ie);
//.box-shadow(0 0 0 @scaled-one-px-value @background-normal);
background-color: @canvas-content-background;
> div {
background-repeat: no-repeat;
background-size: cover;
}
}
.button {
width: @combo-dataview-button-width;
height: @combo-dataview-height;
.btn-group, button {
width: 100%;
height: 100%;
}
button {
&.dropdown-toggle {
padding: 0;
.caret {
//width: 27px;
//height: 27px;
//background-position: @arrow-big-offset-x @arrow-big-offset-y;
width: 8px;
height: 8px;
background-color: transparent;
border: solid 1px @icon-normal-ie;
border: solid 1px @icon-normal;
border-bottom: none;
border-right: none;
background-image: none;
transition: transform 0.2s ease;
transform: rotate(-135deg) translate(2px,2px);
}
&.active {
.caret {
transform: rotate(45deg);
}
}
}
}
}
.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 @scaled-one-px-value-ie @border-regular-control-ie);
.box-shadow(0 0 0 @scaled-one-px-value @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 @scaled-one-px-value-ie @border-preview-hover-ie);
.box-shadow(0 0 0 @scaled-one-px-value @border-preview-hover);
}
}
.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 @scaled-one-px-value-ie @border-regular-control-ie);
.box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
}
&.disabled {
.item {
&:hover:not(.selected) {
.box-shadow(0 0 0 @scaled-one-px-value-ie @border-regular-control-ie);
.box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
}
}
}
.combo-wrap-item.options__icon {
background-position-x: 0;
background-position-x: @button-huge-normal-icon-offset-x;
}
}
.combo-pivot-template {
.combo-template(60px);
top: -7px;
padding-right: 24px;
position: absolute;
.view .dataview, .dropdown-menu {
padding: 1px;
}
}
.combo-slicer-style {
.combo-textart(60px, 4px);
}