element/packages/theme-default/src/cascader.css

176 lines
3.7 KiB
CSS
Raw Normal View History

2016-11-02 04:24:05 +00:00
@charset "UTF-8";
@import "./input.css";
@import "./common/var.css";
2017-01-16 15:16:34 +00:00
@component-namespace el {
2016-11-02 04:24:05 +00:00
@b cascader {
display: inline-block;
position: relative;
2017-01-16 15:16:34 +00:00
.el-input,
.el-input__inner {
cursor: pointer;
}
.el-input__icon {
transition: none;
}
.el-icon-caret-bottom {
transition: transform .3s;
@when reverse {
transform: rotateZ(180deg);
}
}
.el-icon-circle-close {
z-index: calc(var(--index-normal) + 1);
}
2017-01-16 15:16:34 +00:00
@e label {
2016-11-02 04:24:05 +00:00
position: absolute;
2017-01-16 15:16:34 +00:00
left: 0;
top: 0;
2017-01-22 03:04:36 +00:00
height: 100%;
line-height: 36px;
padding: 0 25px 0 10px;
2017-01-16 15:16:34 +00:00
color: var(--input-color);
width: 100%;
2016-11-02 04:24:05 +00:00
white-space: nowrap;
2017-01-16 15:16:34 +00:00
text-overflow: ellipsis;
overflow: hidden;
box-sizing: border-box;
cursor: pointer;
font-size: 14px;
text-align: left;
span {
color: var(--color-light-silver);
}
2016-11-02 04:24:05 +00:00
}
2017-01-22 03:04:36 +00:00
@m large {
font-size: var(--input-large-font-size);
.el-cascader__label {
line-height: calc(var(--input-large-height) - 2);
}
}
@m small {
font-size: var(--input-small-font-size);
.el-cascader__label {
line-height: calc(var(--input-small-height) - 2);
}
}
@when disabled {
.el-cascader__label {
z-index: calc(var(--index-normal) + 1);
color: var(--disabled-color-base);
}
}
2017-01-16 15:16:34 +00:00
}
2016-11-02 04:24:05 +00:00
2017-01-16 15:16:34 +00:00
@b cascader-menus {
white-space: nowrap;
background: #fff;
position: absolute;
margin: 5px 0;
z-index: calc(var(--index-normal) + 1);
2017-01-16 15:16:34 +00:00
border: var(--select-dropdown-border);
border-radius: var(--border-radius-small);
box-shadow: var(--select-dropdown-shadow);
}
@b cascader-menu {
display: inline-block;
vertical-align: top;
height: 204px;
2017-01-16 15:16:34 +00:00
overflow: auto;
border-right: var(--select-dropdown-border);
background-color: var(--select-dropdown-background);
box-sizing: border-box;
margin: 0;
padding: 6px 0;
min-width: 160px;
2017-01-16 15:16:34 +00:00
&:last-child {
border-right: 0;
2016-11-02 04:24:05 +00:00
}
2017-01-16 15:16:34 +00:00
@e item {
font-size: var(--select-font-size);
padding: 8px 30px 8px 10px;
2016-11-02 04:24:05 +00:00
position: relative;
2017-01-16 15:16:34 +00:00
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--select-option-color);
height: var(--select-option-height);
line-height: 1.5;
box-sizing: border-box;
cursor: pointer;
@e keyword {
font-weight: bold;
2017-01-16 15:16:34 +00:00
}
@m extensible {
&:after {
font-family: 'element-icons';
content: "\e606";
2017-01-16 15:16:34 +00:00
font-size: 12px;
transform: scale(0.8);
color: rgb(191, 203, 217);
position: absolute;
right: 10px;
margin-top: 1px;
}
}
@when disabled {
color: var(--select-option-disabled-color);
2017-01-21 17:19:46 +00:00
background-color: var(--select-option-disabled-background);
2017-01-16 15:16:34 +00:00
cursor: not-allowed;
&:hover {
background-color: var(--color-white);
}
}
@when active {
color: var(--color-white);
background-color: var(--select-option-selected);
&:hover {
2017-01-16 15:16:34 +00:00
background-color: var(--select-option-selected-hover);
}
}
&:hover {
background-color: var(--select-option-hover-background);
}
&.selected {
color: var(--color-white);
background-color: var(--select-option-selected);
&.hover {
background-color: var(--select-option-selected-hover);
}
2016-11-02 04:24:05 +00:00
}
}
2017-02-04 02:41:13 +00:00
@m flexible {
height: auto;
max-height: 180px;
overflow: auto;
.el-cascader-menu__item {
overflow: visible;
}
}
2016-11-02 04:24:05 +00:00
}
}