diff --git a/src/CheckTreePicker/styles/index.less b/src/CheckTreePicker/styles/index.less index 4c2c50b55..8c0f5c5f0 100644 --- a/src/CheckTreePicker/styles/index.less +++ b/src/CheckTreePicker/styles/index.less @@ -1,6 +1,7 @@ @import '../../styles/common'; -@import '../../Picker/styles/mixin'; +@import '../../Picker/styles/index'; @import '../../TreePicker/styles/mixin'; +@import '../../Checkbox/styles/index'; // **Check Tree Picker // **---------------------- @@ -23,31 +24,9 @@ } } } -} - -.rs-check-tree-node { - position: relative; - font-size: @picker-tree-node-font-size; - line-height: @picker-tree-node-line-height; - - &-label { - .rs-check-item { - display: inline-block; - - .rs-picker-menu & { - display: block; - } - } - &:focus .rs-check-item .rs-checkbox-checker > label { - .picker-item-hover(); - } - - .rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label { - .picker-item-active(); - } - - .rs-check-item .rs-checkbox-checker > label { + .rs-check-item .rs-checkbox-checker { + > label { text-align: left; position: relative; margin: 0; @@ -67,37 +46,59 @@ top: 0; margin-left: -58px; // 10px + 36px + 12px } + } - .rs-checkbox-wrapper { - left: (@checkbox-sense-width + 10px); - } + .rs-checkbox-wrapper { + left: (@checkbox-sense-width + 10px); + } + } +} - // Only has the first level - .rs-check-tree-without-children & { - padding-left: 34px; //text gap + checkbox space +// Only has the first level +.rs-check-tree-without-children .rs-check-item .rs-checkbox-checker { + > label { + padding-left: 34px; //text gap + checkbox space - &::before { - width: 28px; - margin-left: -36px; - } + &::before { + width: 28px; + margin-left: -36px; + } + } - .rs-checkbox-wrapper { - left: 0; - } - } + .rs-checkbox-wrapper { + left: 0; + } +} + +.rs-check-tree-node { + position: relative; + font-size: @picker-tree-node-font-size; + line-height: @picker-tree-node-line-height; + + .rs-check-item { + display: inline-block; + + .rs-picker-menu & { + display: block; } } + &:focus .rs-check-item .rs-checkbox-checker > label { + .picker-item-hover(); + } + + .rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label { + .picker-item-active(); + } + // Uncheckable state - &-all-uncheckable > .rs-check-tree-node-label { - .rs-check-item .rs-checkbox-checker > label { - padding-left: 22px; // 10px + 12px + &-all-uncheckable > .rs-check-item .rs-checkbox-checker > label { + padding-left: 22px; // 10px + 12px - &::before { - width: 14px; - margin-left: 0; - left: 0; - } + &::before { + width: 14px; + margin-left: 0; + left: 0; } } } diff --git a/src/Picker/styles/mixin.less b/src/Picker/styles/mixin.less index 0ed4ecea1..231b06731 100644 --- a/src/Picker/styles/mixin.less +++ b/src/Picker/styles/mixin.less @@ -265,7 +265,8 @@ line-height: @line-height; } - .rs-picker-input.rs-picker-tag & ~ .rs-picker-tag-wrapper { + // FIXME Bad design. Should not set search input styles in a mixin that is used in picker buttons. + .rs-picker-tag & ~ .rs-picker-tag-wrapper { padding-bottom: @padding-vertical - 3px; .rs-tag { @@ -278,7 +279,7 @@ font-size: @font-size; } - .rs-picker-search-input input { + input { height: @line-height * @font-size - 2px; } } diff --git a/src/Sidenav/styles/index.less b/src/Sidenav/styles/index.less index 8066cc28e..ff4d79cc1 100644 --- a/src/Sidenav/styles/index.less +++ b/src/Sidenav/styles/index.less @@ -37,34 +37,59 @@ margin: 0 !important; } - .high-contrast-mode({ - .rs-dropdown-toggle, - .rs-dropdown-menu { - border: none; - } - }); + // within + > .rs-dropdown { + // Submenu toggle + .rs-dropdown-item-toggle { + display: block; + width: 100%; + text-align: start; + background: none; + padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width); + position: relative; - .rs-dropdown-item-toggle { - display: block; - width: 100%; - text-align: start; - background: none; + .rs-sidenav-collapse-in & { + padding-left: @sidenav-level2-retract; + } - &:focus { - outline: 0; - } + &:focus { + outline: 0; + } - &:focus-visible { - .focus-ring(inset); + &:focus-visible { + .focus-ring(inset); - .high-contrast-mode({ - .focus-ring(slim-inset); - }); + .high-contrast-mode({ + .focus-ring(slim-inset); + }); - z-index: 1; + z-index: 1; + } + + // Submenu toggle icon + &-icon { + position: absolute; + right: @sidenav-padding-horizontal; + top: @sidenav-children-padding-vertical; + width: auto; + height: @sidenav-dropdown-toggle-caret-width; + transform: rotate(90deg); + } + } + + // Expanded submenu toggle icon + .rs-dropdown-item-expand .rs-dropdown-item-toggle-icon { + transform: rotate(270deg); } } + .high-contrast-mode({ + .rs-dropdown-toggle, + .rs-dropdown-menu { + border: none; + } + }); + .rs-sidenav-item:focus-visible { .focus-ring(inset); @@ -225,32 +250,17 @@ transform: rotate(180deg); } - .rs-dropdown-item.rs-dropdown-item-expand - > .rs-dropdown-item-toggle - > .rs-dropdown-item-toggle-icon { - transform: rotate(270deg); - } - // Dropdown menu - > .rs-dropdown-menu { + .rs-dropdown-menu { .reset-sidenav-dropdown-menu(); + } - // Submenu - .rs-dropdown-item-submenu { - padding: 0; - - > .rs-dropdown-menu-toggle { - display: block; - padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width); - } - - > .rs-dropdown-menu { - .reset-sidenav-dropdown-menu(); - } + // Submenu + .rs-dropdown-item-submenu { + padding: 0; - &:hover { - background-color: transparent; - } + &:hover { + background-color: transparent; } } } @@ -283,21 +293,6 @@ // @warn Here we can only use absolute positioning because of the limitations of using component. .rs-dropdown-item-submenu { - > .rs-dropdown-item-toggle { - padding-left: @sidenav-level2-retract; - padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width); - position: relative; - - > .rs-dropdown-item-toggle-icon { - position: absolute; - right: @sidenav-padding-horizontal; - top: @sidenav-children-padding-vertical; - width: auto; - height: @sidenav-dropdown-toggle-caret-width; - transform: rotate(90deg); - } - } - > .rs-dropdown-item-menu-icon { padding-top: @sidenav-children-padding-vertical; padding-bottom: @sidenav-children-padding-vertical; diff --git a/src/TreePicker/styles/index.less b/src/TreePicker/styles/index.less index 0fdbb0a98..ca27653ca 100644 --- a/src/TreePicker/styles/index.less +++ b/src/TreePicker/styles/index.less @@ -34,7 +34,7 @@ text-align: left; margin: 0 0 4px 0; - > .rs-tree-node-label { + &-label { position: relative; margin: 0; //text gap @@ -44,7 +44,7 @@ font-size: @picker-tree-node-font-size; line-height: @picker-tree-node-line-height; - > .rs-tree-node-label-content { + &-content { padding: @custom-picker-tree-node-padding-vertical @picker-tree-node-padding-horizontal @custom-picker-tree-node-padding-vertical @picker-tree-arrow-down-gap; display: inline-block; @@ -59,7 +59,7 @@ } } - &&-active > .rs-tree-node-label > .rs-tree-node-label-content { + &-active &-label-content { .picker-item-active(); color: var(--rs-text-link); diff --git a/stylelint.config.js b/stylelint.config.js index ab97ef662..b18a15abc 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -43,7 +43,7 @@ module.exports = { 'value-no-vendor-prefix': true, // Limit the number of composite selectors in a selector. // TODO consider narrowing this limit - 'selector-max-compound-selectors': 6, + 'selector-max-compound-selectors': 4, // Limit the number of ID selectors in a selector. 'selector-max-id': 1, // Limit the number of universal selectors in a selector.