From 6c929d5f20df24ed7b67ee2af4c687fd007b991c Mon Sep 17 00:00:00 2001 From: maxin Date: Thu, 10 Feb 2022 11:30:09 +0800 Subject: [PATCH] fix(list, list-picker, select, cascader): add deps style --- src/cascader/style/index.less | 32 +++++++++++++-------------- src/list-picker/style/index.less | 18 +++++++-------- src/list-picker/style/index.ts | 5 +++++ src/list/List.tsx | 1 - src/list/style/index.less | 38 +++++++++----------------------- src/list/style/index.ts | 5 +++++ src/select/Select.tsx | 1 - src/select/style/index.less | 12 ++++------ src/select/style/index.ts | 8 ++++--- 9 files changed, 55 insertions(+), 65 deletions(-) diff --git a/src/cascader/style/index.less b/src/cascader/style/index.less index 2186b12f48..12b52cac1c 100644 --- a/src/cascader/style/index.less +++ b/src/cascader/style/index.less @@ -1,21 +1,21 @@ -@import '../../stylesheet/variables/index.less'; -@import '~@gio-design/utils/lib/less/mixins.less'; +@import (reference) '../../stylesheet/variables/index.less'; + @cascader-prefix-cls: ~'@{component-prefix}-cascader'; -@list-item-prefix-cls: ~'@{component-prefix}-list--item'; -.@{cascader-prefix-cls} { - &--content { - z-index: 100; - } +.cascader-list-style() { + box-sizing: border-box; + min-width: 120px; + height: auto; + max-height: 520px; + background: @gray-0; + + .border(4, @gray-2); + .elevation(2); + .scrollbar(@x: hidden, @y: overlay); +} + +.@{cascader-prefix-cls} { &--list { - box-sizing: border-box; - min-width: 120px; - height: auto; - max-height: 520px; - background: @gray-0; - border: 1px solid #dfe4ee; - border-radius: 8px; - box-shadow: 0 8px 24px rgba(36, 46, 89, 0.1); - .scrollbar(@x: hidden, @y: overlay); + .cascader-list-style(); } } diff --git a/src/list-picker/style/index.less b/src/list-picker/style/index.less index 01ca377fe6..016a3ed2be 100644 --- a/src/list-picker/style/index.less +++ b/src/list-picker/style/index.less @@ -1,11 +1,11 @@ -@import '../../stylesheet/variables/index.less'; -@import '~@gio-design/utils/lib/less/mixins.less'; +@import (reference) '../../stylesheet/variables/index.less'; +@import (reference) '../../tabs/style/index.less'; +@import (reference) '../../cascader/style/index.less'; +@import (reference) '../../list/style/index.less'; + @list-picker-prefix-cls: ~'@{component-prefix}-list-picker'; -@selection-prefix-cls: ~'@{component-prefix}-list--selection'; -@tab-panel-cls: ~'@{component-prefix}-tabs-tabpanel'; -@cascader-prefix-cls: ~'@{component-prefix}-cascader'; +@list-picker-selection-prefix-cls: ~'@{component-prefix}-list--selection'; -@list-prefix-cls: ~'@{component-prefix}-list'; .@{list-picker-prefix-cls} { box-sizing: border-box; min-width: 120px; @@ -33,7 +33,7 @@ & .@{cascader-prefix-cls}--list { padding: 8px; } - & .@{selection-prefix-cls} { + & .@{list-picker-selection-prefix-cls} { height: auto; max-height: 360px; padding: 0; @@ -45,13 +45,13 @@ } } - & .@{tab-panel-cls} { + & .@{tabs-prefix-cls}-tabpanel { & > .@{list-prefix-cls} { height: auto; max-height: 360px; padding-top: 8px; } - .@{selection-prefix-cls} { + .@{list-picker-selection-prefix-cls} { height: auto; max-height: 360px; padding-top: 8px; diff --git a/src/list-picker/style/index.ts b/src/list-picker/style/index.ts index d74e52ee9f..4ddf7dd266 100644 --- a/src/list-picker/style/index.ts +++ b/src/list-picker/style/index.ts @@ -1 +1,6 @@ +import '../../popover/style'; +import '../../button/style'; +import '../../list/style'; +import '../../input/style'; + import './index.less'; diff --git a/src/list/List.tsx b/src/list/List.tsx index 12f88ea8ef..f06bd933df 100644 --- a/src/list/List.tsx +++ b/src/list/List.tsx @@ -7,7 +7,6 @@ import { PREFIX } from './constants'; import Item from './Item'; import { convertChildrenToData, convertOptions, getResultValue } from './util'; import WithRef from '../utils/withRef'; -import './style'; import { ListContext } from './context'; import useValue from './hooks/useValue'; import useCacheOptions from './hooks/useCacheOptions'; diff --git a/src/list/style/index.less b/src/list/style/index.less index 0f1ccc573e..2524a1398d 100644 --- a/src/list/style/index.less +++ b/src/list/style/index.less @@ -1,9 +1,8 @@ -@import '../../stylesheet/variables/index.less'; -@import '~@gio-design/utils/lib/less/mixins.less'; +@import (reference) '../../stylesheet/variables/index.less'; +@import (reference) '../../cascader/style/index.less'; +@import (reference) '../../popover/style/index.less'; + @list-prefix-cls: ~'@{component-prefix}-list'; -@cascader-prefix-cls: ~'@{component-prefix}-cascader'; -@cascader-content-prefix-cls: ~'@{cascader-prefix-cls}--cascader--content'; -@popover__popcorn-prefix-cls: ~'@{component-prefix}-popover__popcorn'; .@{list-prefix-cls} { display: flex; @@ -11,6 +10,8 @@ margin: 0; padding: 8px; row-gap: 4px; + + // 下面这个样式是不是没有用了？ &--preview { &--overlay { &[data-popper-placement^='right'] { @@ -18,18 +19,10 @@ } } } - .@{cascader-prefix-cls} { - box-sizing: border-box; - min-width: 120px; - height: auto; - max-height: 520px; - background: @gray-0; - border: 1px solid #dfe4ee; - border-radius: 8px; - box-shadow: 0 8px 24px rgba(36, 46, 89, 0.1); - .scrollbar(@x: hidden, @y: overlay); + &.@{cascader-prefix-cls} { + .cascader-list-style(); &--item { - .@{popover__popcorn-prefix-cls} { + .@{popover-prefix-cls}__popcorn { display: inherit; } } @@ -44,10 +37,7 @@ margin-bottom: 4px; padding-left: 12px; color: @gray-4; - font-weight: 500; - font-size: 12px; - font-style: normal; - line-height: 20px; + .text-h5(); } &--item { & > .@{list-prefix-cls} { @@ -79,10 +69,7 @@ justify-content: space-between; padding: 7px 12px; color: @gray-5; - font-weight: normal; - font-size: 14px; - font-style: normal; - line-height: 22px; + .text-body1(); vertical-align: middle; border-radius: 4px; cursor: pointer; @@ -152,9 +139,6 @@ &--text { flex-grow: 1; } - > span > .gio-text--black { - color: inherit; - } &--checkbox { font-size: 0; diff --git a/src/list/style/index.ts b/src/list/style/index.ts index d74e52ee9f..fcc112d2f5 100644 --- a/src/list/style/index.ts +++ b/src/list/style/index.ts @@ -1 +1,6 @@ +import '../../tooltip/style'; +import '../../popover/style'; +import '../../checkbox/style'; +import '../../page/style'; + import './index.less'; diff --git a/src/select/Select.tsx b/src/select/Select.tsx index fa820ac608..bea6d89604 100644 --- a/src/select/Select.tsx +++ b/src/select/Select.tsx @@ -7,7 +7,6 @@ import Popover from '../popover'; import Trigger from '../list-picker/Trigger'; import List, { OptionProps } from '../list'; import useControlledState from '../utils/hooks/useControlledState'; -import './style/index'; import { ListContext } from '../list/context'; import { convertChildrenToData, convertOptions } from '../list/util'; import useCacheOptions from '../list/hooks/useCacheOptions'; diff --git a/src/select/style/index.less b/src/select/style/index.less index 4495dbf2ef..6ad88b7b4f 100644 --- a/src/select/style/index.less +++ b/src/select/style/index.less @@ -1,11 +1,8 @@ -@import '../../stylesheet/variables/index.less'; -@import '~@gio-design/utils/lib/less/mixins.less'; +@import (reference) '../../stylesheet/variables/index.less'; + @select-prefix-cls: ~'@{component-prefix}-select'; .@{select-prefix-cls} { - &--content { - z-index: 100; - } &--list { box-sizing: border-box; min-width: 120px; @@ -14,8 +11,7 @@ padding: 8px; .scrollbar(); background: @gray-0; - border: 1px solid #dfe4ee; - border-radius: 8px; - box-shadow: 0 8px 24px rgba(36, 46, 89, 0.1); + .border(4, @gray-2); + .elevation(2); } } diff --git a/src/select/style/index.ts b/src/select/style/index.ts index 5f8c13257e..509db2b2ac 100644 --- a/src/select/style/index.ts +++ b/src/select/style/index.ts @@ -1,4 +1,6 @@ +import '../../popover/style'; +import '../../list/style'; +import '../../list-picker/style'; +import '../../input/style'; + import './index.less'; -import '../../popover/style' -import '../../list/style' -import '../../input/style' \ No newline at end of file