devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
326 lines (270 loc) • 7.76 kB
text/less
/**
* DevExtreme (widgets/base/treeList.less)
* Version: 20.1.4
* Build date: Tue Jun 02 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@treelist-border: @datagrid-border;
@treelist-drag-header-border-color: @datagrid-drag-header-border-color;
@treelist-row-error-bg: @datagrid-row-error-bg;
@treelist-base-color: @datagrid-base-color;
@treelist-base-background-color: @datagrid-base-background-color;
@treelist-border-color: @datagrid-border-color;
@treelist-focused-border-color: @datagrid-focused-border-color;
@treelist-text-stub-background-image-path: @datagrid-text-stub-background-image-path;
@treelist-row-error-color: @datagrid-row-error-color;
.dx-treelist-borders {
> .dx-treelist-headers,
> .dx-treelist-rowsview,
> .dx-treelist-total-footer {
border-left: @treelist-border;
border-right: @treelist-border;
}
> .dx-treelist-rowsview,
> .dx-treelist-total-footer {
border-bottom: @treelist-border;
}
> .dx-treelist-pager,
> .dx-treelist-headers,
> .dx-treelist-filter-panel {
border-top: @treelist-border;
}
> .dx-treelist-filter-panel {
border-top-width: 0;
border-left: @treelist-border;
border-right: @treelist-border;
border-bottom: @treelist-border;
}
}
.dx-sortable-dragging > div > .dx-gridbase-container > .dx-treelist-rowsview {
border-color: @treelist-drag-header-border-color;
}
.dx-treelist-error-message() {
background-color: @treelist-row-error-bg;
white-space: normal;
word-wrap: break-word;
}
.dx-treelist {
.dx-column-lines > td {
&:first-child {
border-left: none;
}
&:last-child {
border-right: none;
}
}
.dx-command-drag .dx-treelist-drag-icon {
.dx-icon(dragvertical);
}
}
.dx-treelist-container {
color: @treelist-base-color;
background-color: @treelist-base-background-color;
.dx-sort-up {
.dx-icon(sortup);
}
.dx-sort-down {
.dx-icon(sortdown);
}
.dx-sort-down,
.dx-sort-up {
font-family: inherit;
&:before {
font-family: 'DXIcons', sans-serif;
}
}
.dx-treelist-headers {
.dx-header-row > td,
.dx-header-filter {
outline: none;
}
&.dx-state-focused .dx-header-row {
td:focus,
td .dx-header-filter:focus {
outline: 2px solid @treelist-focused-border-color;
}
td:focus {
outline-offset: -2px;
}
td .dx-header-filter:focus {
outline-offset: 2px;
}
}
}
.dx-header-filter {
position: relative;
color: @HEADER_FILTER_COLOR;
.dx-icon(filter);
}
.dx-header-filter-empty {
color: @HEADER_FILTER_COLOR_EMPTY;
}
&.dx-filter-menu {
.dx-menu-item-content .dx-icon {
.dx-icon-sizing(14px);
}
}
.dx-treelist-content-fixed {
.dx-treelist-table {
.dx-col-fixed {
background-color: @treelist-base-background-color;
}
}
}
.dx-treelist-rowsview .dx-data-row,
.dx-treelist-rowsview .dx-freespace-row,
.dx-datagrid-rowsview .dx-virtual-row,
.dx-datagrid-rowsview .dx-header-row,
.dx-treelist-headers .dx-row {
td.dx-pointer-events-none {
border-left: 2px solid @treelist-border-color;
border-right: 2px solid @treelist-border-color;
&.dx-first-cell {
border-left: none;
}
&.dx-last-cell {
border-right: none;
}
}
}
.dx-treelist-rowsview.dx-state-focused .dx-data-row {
& > td.dx-command-edit > a.dx-link:focus {
outline: 2px solid @datagrid-focused-border-color;
outline-offset: 2px;
}
&.dx-row-focused > td.dx-command-edit > a.dx-link:focus {
outline-color: @base-focus-color;
outline-offset: 0;
}
}
.dx-treelist-rowsview {
.dx-treelist-edit-form {
background-color: @treelist-base-background-color;
}
.dx-virtual-row > td {
position: relative;
&:before {
display: block;
height: 100%;
content: '';
background-image: @treelist-text-stub-background-image-path;
background-repeat: no-repeat repeat;
}
&[style*="text-align: right"]:before {
.flip-horizontally();
}
}
}
.dx-treelist-filter-row .dx-filter-range-content {
color: @treelist-base-color;
}
.dx-error-row {
td {
color: @datagrid-row-error-color;
padding: 0;
}
.dx-error-message {
.dx-treelist-error-message();
}
}
}
.dx-treelist-filter-panel {
color: @treelist-base-color;
border-top: @treelist-border;
.dx-icon-filter,
.dx-treelist-filter-panel-text,
.dx-treelist-filter-panel-clear-filter {
outline: none;
}
&.dx-state-focused {
.dx-icon-filter:focus,
.dx-treelist-filter-panel-text:focus,
.dx-treelist-filter-panel-clear-filter:focus {
outline: 2px solid @treelist-focused-border-color;
}
}
}
.dx-treelist-form-buttons-container {
float: right;
.dx-button {
margin-left: 10px;
margin-top: 10px;
}
}
.dx-treelist-export-menu {
.dx-menu-item .dx-icon-exportxlsx {
.dx-icon-sizing(16px);
}
}
.dx-treelist-adaptive-more {
cursor: pointer;
.dx-icon(more);
.dx-icon-sizing(21px);
}
.dx-treelist-edit-popup .dx-error-message {
.dx-treelist-error-message();
color: @treelist-row-error-color;
margin-bottom: 20px;
}
.dx-rtl {
&.dx-treelist {
.dx-column-lines > td {
&:first-child {
border-right: none;
border-left: @treelist-border;
}
&:last-child {
border-left: none;
border-right: @treelist-border;
}
}
}
.dx-treelist-container {
.dx-treelist-rowsview .dx-data-row,
.dx-treelist-rowsview .dx-freespace-row,
.dx-datagrid-rowsview .dx-virtual-row,
.dx-datagrid-rowsview .dx-header-row,
.dx-treelist-headers .dx-row {
td.dx-pointer-events-none {
border-left: 2px solid @treelist-border-color;
border-right: 2px solid @treelist-border-color;
&.dx-first-cell {
border-right: none;
}
&.dx-last-cell {
border-left: none;
}
}
}
.dx-treelist-rowsview {
.dx-virtual-row > td {
&:before {
.flip-horizontally();
}
&[style*="text-align: left"]:before {
transform: scale(1);
}
}
}
}
.dx-treelist-form-buttons-container {
float: left;
.dx-button {
margin-left: 0;
margin-right: 10px;
}
}
}
.dx-treelist-cell-updated-animation {
animation: dx-treelist-highlight-change 1s;
}
@keyframes dx-treelist-highlight-change {
from {
background-color: fade(@treelist-base-color, 8%);
}
50% {
background-color: fade(@treelist-base-color, 8%);
}
}