Browse Source

improve dropdown/cascader/select customization

pull/20171/head
Theo Satloff 5 years ago
committed by 偏右
parent
commit
721d8cb4a0
  1. 9
      components/cascader/style/index.less
  2. 14
      components/dropdown/style/index.less
  3. 14
      components/select/style/index.less
  4. 12
      components/style/themes/default.less

9
components/cascader/style/index.less

@ -125,7 +125,7 @@
&-menus {
position: absolute;
z-index: @zindex-dropdown;
font-size: @font-size-base;
font-size: @cascader-dropdown-font-size;
white-space: nowrap;
background: @component-background;
border-radius: @border-radius-base;
@ -134,7 +134,6 @@
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
@ -165,7 +164,7 @@
min-width: 111px;
height: 180px;
margin: 0;
padding: 0;
padding: @cascader-dropdown-edge-child-vertical-padding 0;
overflow: auto;
vertical-align: top;
list-style: none;
@ -185,8 +184,8 @@
}
}
&-menu-item {
padding: 5px @control-padding-horizontal;
line-height: 22px;
padding: @cascader-dropdown-vertical-padding @control-padding-horizontal;
line-height: @cascader-dropdown-line-height;
white-space: nowrap;
cursor: pointer;
transition: all 0.3s;

14
components/dropdown/style/index.less

@ -49,7 +49,7 @@
&-menu {
position: relative;
margin: 0;
padding: 4px 0;
padding: @dropdown-edge-child-vertical-padding 0;
text-align: left;
list-style-type: none;
background-color: @component-background;
@ -113,6 +113,18 @@
transition: all 0.3s;
}
&:first-child {
& when (@dropdown-edge-child-vertical-padding = 0) {
border-radius: @border-radius-base @border-radius-base 0 0;
}
}
&:last-child {
& when (@dropdown-edge-child-vertical-padding = 0) {
border-radius: 0 0 @border-radius-base @border-radius-base;
}
}
&-selected,
&-selected > a {
color: @dropdown-selected-color;

14
components/select/style/index.less

@ -469,6 +469,7 @@
&-menu {
max-height: 250px;
margin-bottom: 0;
padding: @select-dropdown-edge-child-vertical-padding 0; //Change
padding-left: 0; // Override default ul/ol
overflow: auto;
list-style: none;
@ -499,11 +500,12 @@
&-item {
position: relative;
display: block;
padding: 5px @control-padding-horizontal;
padding: @select-dropdown-vertical-padding @control-padding-horizontal;
overflow: hidden;
color: @text-color;
font-weight: normal;
line-height: 22px;
font-size: @select-dropdown-font-size;
line-height: @select-dropdown-line-height;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
@ -514,11 +516,15 @@
}
&:first-child {
border-radius: @border-radius-base @border-radius-base 0 0;
& when (@select-dropdown-edge-child-vertical-padding = 0) {
border-radius: @border-radius-base @border-radius-base 0 0;
}
}
&:last-child {
border-radius: 0 0 @border-radius-base @border-radius-base;
& when (@select-dropdown-edge-child-vertical-padding = 0) {
border-radius: 0 0 @border-radius-base @border-radius-base;
}
}
&-selected {

12
components/style/themes/default.less

@ -290,6 +290,7 @@
//Dropdown
@dropdown-vertical-padding: 5px;
@dropdown-edge-child-vertical-padding: 4px;
@dropdown-font-size: @font-size-base;
@dropdown-line-height: 22px;
@ -337,10 +338,21 @@
@select-border-color: @border-color-base;
@select-item-selected-font-weight: 600;
@select-dropdown-bg: @component-background;
@select-dropdown-vertical-padding: @dropdown-vertical-padding;
@select-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding;
@select-dropdown-font-size: @dropdown-font-size;
@select-dropdown-line-height: @dropdown-line-height;
@select-item-selected-bg: @background-color-light;
@select-item-active-bg: @item-active-bg;
@select-background: @component-background;
// Cascader
// ----
@cascader-dropdown-vertical-padding: @dropdown-vertical-padding;
@cascader-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding;
@cascader-dropdown-font-size: @dropdown-font-size;
@cascader-dropdown-line-height: @dropdown-line-height;
// Anchor
// ---
@anchor-border-color: @border-color-split;

Loading…
Cancel
Save