From 57b60aabf485b81277dbe18c1df7977329d8d44b Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Thu, 14 May 2020 15:33:01 +0300 Subject: [PATCH 1/2] dxTabPanel - extra borders on the tabs element in Rich editor (#13029) --- styles/widgets/generic/tabPanel.generic.less | 43 ++++++++++++++------ 1 file changed, 30 insertions(+), 13 deletions(-) diff --git a/styles/widgets/generic/tabPanel.generic.less b/styles/widgets/generic/tabPanel.generic.less index 743e8ebc32b2..5332f034aa2b 100644 --- a/styles/widgets/generic/tabPanel.generic.less +++ b/styles/widgets/generic/tabPanel.generic.less @@ -1,33 +1,40 @@ @import (once) "./multiView.generic.less"; @import (once) "./tabs.generic.less"; -@GENERIC_TABPANEL_INSET_SHADOW_LEFT: inset @GENERIC_TABS_BORDER_WIDTH 0 @tabs-border-color; -@GENERIC_TABPANEL_INSET_SHADOW_TOP: inset 0 @GENERIC_TABS_BORDER_WIDTH @tabs-border-color; -@GENERIC_TABPANEL_INSET_SHADOW_RIGHT: inset (-@GENERIC_TABS_BORDER_WIDTH) 0 @tabs-border-color; -@GENERIC_TABPANEL_INSET_SHADOW_BOTTOM: inset 0 (-@GENERIC_TABS_BORDER_WIDTH) @tabs-border-color; +@GENERIC_TABPANEL_INSET_SHADOW_LEFT: inset @GENERIC_TABS_BORDER_WIDTH 0; +@GENERIC_TABPANEL_INSET_SHADOW_TOP: inset 0 @GENERIC_TABS_BORDER_WIDTH; +@GENERIC_TABPANEL_INSET_SHADOW_RIGHT: inset (-@GENERIC_TABS_BORDER_WIDTH) 0; +@GENERIC_TABPANEL_INSET_SHADOW_BOTTOM: inset 0 (-@GENERIC_TABS_BORDER_WIDTH); .tabpanel-shadow-mixin(@accent-color) { & > .dx-tabpanel-tabs { .dx-tabs { - box-shadow: inset 0 (-@GENERIC_TABS_BORDER_WIDTH) @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_TOP, @GENERIC_TABPANEL_INSET_SHADOW_RIGHT, @GENERIC_TABPANEL_INSET_SHADOW_LEFT; + box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_TOP, @GENERIC_TABPANEL_INSET_SHADOW_RIGHT, @GENERIC_TABPANEL_INSET_SHADOW_LEFT; } .dx-tab { - box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_TOP, inset 0 (-@GENERIC_TABS_BORDER_WIDTH) @accent-color; + box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_TOP, @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color; &.dx-tab-selected { - box-shadow: inset 0 @GENERIC_TABS_BORDER_WIDTH @accent-color, inset (-@GENERIC_TABS_BORDER_WIDTH) 0 @accent-color, inset @GENERIC_TABS_BORDER_WIDTH 0 @accent-color; + box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_TOP @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_RIGHT @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_LEFT @accent-color; + } + + &.dx-tab-selected, + &.dx-tab-active { + .dx-tab-content { + color: @tabs-tab-selected-color; + } } } .dx-tabs-expanded { .dx-tab:not(.dx-tab-selected) { &:first-of-type { - box-shadow: inset 0 (-@GENERIC_TABS_BORDER_WIDTH) @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_LEFT, @GENERIC_TABPANEL_INSET_SHADOW_TOP; + box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_LEFT, @GENERIC_TABPANEL_INSET_SHADOW_TOP; .dx-rtl&, .dx-rtl & { - box-shadow: inset 0 (-@GENERIC_TABS_BORDER_WIDTH) @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_RIGHT, @GENERIC_TABPANEL_INSET_SHADOW_TOP; + box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_RIGHT, @GENERIC_TABPANEL_INSET_SHADOW_TOP; } } } @@ -36,22 +43,22 @@ .dx-tabs-stretched { .dx-tab:not(.dx-tab-selected) { &:last-of-type { - box-shadow: inset 0 (-@GENERIC_TABS_BORDER_WIDTH) @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_RIGHT, @GENERIC_TABPANEL_INSET_SHADOW_TOP; + box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_RIGHT, @GENERIC_TABPANEL_INSET_SHADOW_TOP; .dx-rtl&, .dx-rtl & { - box-shadow: inset 0 (-@GENERIC_TABS_BORDER_WIDTH) @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_LEFT, @GENERIC_TABPANEL_INSET_SHADOW_TOP; + box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_LEFT, @GENERIC_TABPANEL_INSET_SHADOW_TOP; } } } } .dx-tabs-nav-button-left { - box-shadow: inset 0 (-@GENERIC_TABS_BORDER_WIDTH) @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_LEFT, @GENERIC_TABPANEL_INSET_SHADOW_TOP; + box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_LEFT, @GENERIC_TABPANEL_INSET_SHADOW_TOP; } .dx-tabs-nav-button-right { - box-shadow: inset 0 (-@GENERIC_TABS_BORDER_WIDTH) @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_TOP, @GENERIC_TABPANEL_INSET_SHADOW_RIGHT; + box-shadow: @GENERIC_TABPANEL_INSET_SHADOW_BOTTOM @accent-color, @GENERIC_TABPANEL_INSET_SHADOW_TOP, @GENERIC_TABPANEL_INSET_SHADOW_RIGHT; } } @@ -65,6 +72,11 @@ display: block; border: none; background-color: @tabs-tab-bg; + color: @tabs-border-color; + + .dx-tabs-nav-button { + color: @tabs-border-color; + } } .dx-tabs-scrollable { @@ -80,6 +92,11 @@ .dx-tab { width: 140px; + color: @tabs-border-color; + + .dx-tab-content { + color: @tabs-tab-color; + } &:after, &:before { From ac6b321c87d53ecdb6410d6f528b740333e99f4d Mon Sep 17 00:00:00 2001 From: eugeniykiyashko Date: Mon, 18 May 2020 10:41:40 +0300 Subject: [PATCH 2/2] dxTabPanel - extra borders on the tabs element in Rich editor [part 2] --- styles/widgets/generic/tabPanel.generic.less | 28 ++++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/styles/widgets/generic/tabPanel.generic.less b/styles/widgets/generic/tabPanel.generic.less index 5332f034aa2b..e7875f30e0e5 100644 --- a/styles/widgets/generic/tabPanel.generic.less +++ b/styles/widgets/generic/tabPanel.generic.less @@ -74,6 +74,20 @@ background-color: @tabs-tab-bg; color: @tabs-border-color; + .dx-tab { + width: 140px; + color: @tabs-border-color; + + .dx-tab-content { + color: @tabs-tab-color; + } + + &:after, + &:before { + content: none; + } + } + .dx-tabs-nav-button { color: @tabs-border-color; } @@ -90,20 +104,6 @@ } } - .dx-tab { - width: 140px; - color: @tabs-border-color; - - .dx-tab-content { - color: @tabs-tab-color; - } - - &:after, - &:before { - content: none; - } - } - &:not(.dx-empty-collection) { .dx-multiview-wrapper { border-top: none;