@mdsfe/mds-ui 0.4.0-rc.7 → 0.4.0-rc.8

package/dist/style/card.css

@@ -1 +1,156 @@
-.mds-card{background:#fff;border-radius:4px;font-size:14px;position:relative;transition:all .3s}.mds-card-bordered{border:1px solid #f0f2f5;border-radius:4px}.mds-card-head{height:50px;line-height:50px;background:#fff;border-bottom:1px solid #f0f2f5;padding:0 24px;border-radius:2px 2px 0 0;zoom:1;margin-bottom:-1px;display:flex}.mds-card-head:after,.mds-card-head:before{content:" ";display:table}.mds-card-head:after{clear:both;visibility:hidden;font-size:0;height:0}.mds-card-head-title{font-size:16px;text-overflow:ellipsis;max-width:100%;overflow:hidden;white-space:nowrap;color:#354052;font-weight:400;display:inline-block;flex:1}.mds-card-wrap{background:#fff;border-bottom:1px solid #f0f2f5;padding:10px 24px;border-radius:2px 2px 0 0;zoom:1;margin-bottom:-1px;display:flex}.mds-card-wrap:after,.mds-card-wrap:before{content:" ";display:table}.mds-card-wrap:after{clear:both;visibility:hidden;font-size:0;height:0}.mds-card-wrap-title{font-size:16px;max-width:100%;color:#354052;font-weight:400;display:inline-block;flex:1}.mds-card-extra{float:right;text-align:right;margin-left:auto}.mds-card-body{padding:24px;zoom:1}.mds-card-body:after,.mds-card-body:before{content:" ";display:table}.mds-card-body:after{clear:both;visibility:hidden;font-size:0;height:0}.mds-card-contain-grid .mds-card-body{margin:-1px 0 0 -1px;padding:0}.mds-card-grid{border-radius:0;border:0;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;transition:all .3s}.mds-card-grid>div+div{margin-left:20px}.mds-card-wider-padding .mds-card-head{padding:0 32px}.mds-card-wider-padding .mds-card-body{padding:24px 32px}.mds-card-wider-padding .mds-card-extra{right:32px}.mds-card-padding-transition .mds-card-body,.mds-card-padding-transition .mds-card-head{transition:padding .3s}.mds-card-padding-transition .mds-card-extra{transition:right .3s}.mds-card-loading .mds-card-body{user-select:none;padding:0}.mds-card-loading-content{padding:24px}.mds-card-loading-block{display:inline-block;margin:5px 1% 0;height:14px;border-radius:2px;background:linear-gradient(90deg,rgba(207,216,220,.2),rgba(207,216,220,.4),rgba(207,216,220,.2));animation:card-loading 1.4s ease infinite;background-size:600% 600%}@keyframes card-loading{0%,to{background-position:0 50%}50%{background-position:100% 50%}}
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable declaration-bang-space-before */
+/* stylelint-disable declaration-bang-space-before */
+.mds-card {
+  background: #fff;
+  border-radius: 4px;
+  font-size: 14px;
+  position: relative;
+  transition: all .3s;
+}
+.mds-card-bordered {
+  border: 1px solid #F0F2F5;
+  border-radius: 4px;
+}
+.mds-card-head {
+  height: 50px;
+  line-height: 50px;
+  background: #fff;
+  border-bottom: 1px solid #F0F2F5;
+  padding: 0 24px;
+  border-radius: 2px 2px 0 0;
+  zoom: 1;
+  margin-bottom: -1px;
+  display: flex;
+}
+.mds-card-head:before,
+.mds-card-head:after {
+  content: " ";
+  display: table;
+}
+.mds-card-head:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.mds-card-head-title {
+  font-size: 16px;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  color: #354052;
+  font-weight: 400;
+  display: inline-block;
+  flex: 1;
+}
+.mds-card-wrap {
+  background: #fff;
+  border-bottom: 1px solid #F0F2F5;
+  padding: 10px 24px;
+  border-radius: 2px 2px 0 0;
+  zoom: 1;
+  margin-bottom: -1px;
+  display: flex;
+}
+.mds-card-wrap:before,
+.mds-card-wrap:after {
+  content: " ";
+  display: table;
+}
+.mds-card-wrap:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.mds-card-wrap-title {
+  font-size: 16px;
+  max-width: 100%;
+  color: #354052;
+  font-weight: 400;
+  display: inline-block;
+  flex: 1;
+}
+.mds-card-extra {
+  float: right;
+  text-align: right;
+  margin-left: auto;
+}
+.mds-card-body {
+  padding: 24px;
+  zoom: 1;
+}
+.mds-card-body:before,
+.mds-card-body:after {
+  content: " ";
+  display: table;
+}
+.mds-card-body:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+.mds-card-contain-grid .mds-card-body {
+  margin: -1px 0 0 -1px;
+  padding: 0;
+}
+.mds-card-grid {
+  border-radius: 0;
+  border: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  transition: all .3s;
+}
+.mds-card-grid > div + div {
+  margin-left: 20px;
+}
+.mds-card-wider-padding .mds-card-head {
+  padding: 0 32px;
+}
+.mds-card-wider-padding .mds-card-body {
+  padding: 24px 32px;
+}
+.mds-card-wider-padding .mds-card-extra {
+  right: 32px;
+}
+.mds-card-padding-transition .mds-card-head,
+.mds-card-padding-transition .mds-card-body {
+  transition: padding .3s;
+}
+.mds-card-padding-transition .mds-card-extra {
+  transition: right .3s;
+}
+.mds-card-loading .mds-card-body {
+  user-select: none;
+  padding: 0;
+}
+.mds-card-loading-content {
+  padding: 24px;
+}
+.mds-card-loading-block {
+  display: inline-block;
+  margin: 5px 1% 0;
+  height: 14px;
+  border-radius: 2px;
+  background: linear-gradient(90deg, rgba(207, 216, 220, 0.2), rgba(207, 216, 220, 0.4), rgba(207, 216, 220, 0.2));
+  animation: card-loading 1.4s ease infinite;
+  background-size: 600% 600%;
+}
+@keyframes card-loading {
+  0%,
+  100% {
+    background-position: 0 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable declaration-bang-space-before */
+/* stylelint-disable declaration-bang-space-before */

package/dist/style/carousel.css

@@ -1 +1,217 @@
-.mds-carousel{position:relative}.mds-carousel.mds-carousel-arrow__outside{box-sizing:content-box;padding:0 40px}.mds-carousel__container{position:relative;height:300px}.mds-carousel__item-container{overflow:hidden;position:relative}.mds-carousel__arrow{border:none;outline:none;padding:0;margin:0;height:32px;width:32px;cursor:pointer;transition:.3s;border-radius:50%;background:hsla(0,0%,100%,.25);color:rgba(0,0,0,.25);position:absolute;top:50%;z-index:10;transform:translateY(-50%);text-align:center;font-size:12px}.mds-carousel__arrow--left{left:16px}.mds-carousel__arrow-outside.mds-carousel__arrow--left{left:-40px}.mds-carousel__arrow--right{right:16px}.mds-carousel__arrow-outside.mds-carousel__arrow--right{right:-40px}.mds-carousel__arrow:hover{background:hsla(0,0%,100%,.85);color:rgba(0,0,0,.65)}.mds-carousel__arrow i{cursor:pointer}.mds-carousel__indicators{position:absolute;list-style:none;margin:0;padding:0;z-index:2}.mds-carousel__indicators--bottom{bottom:0;left:50%;transform:translateX(-50%)}.mds-carousel__indicators--right{bottom:0;right:24px}.mds-carousel__indicators--left{bottom:0;left:24px}.mds-carousel__indicators--top{top:0;left:50%;transform:translateX(-50%)}.mds-carousel__indicators--outside{bottom:26px;text-align:center;position:static;transform:none}.mds-carousel__indicators--outside .mds-carousel__indicator:hover button{opacity:.64}.mds-carousel__indicators--outside button{background-color:#d8dce6;opacity:.24}.mds-carousel__indicators--outside .mds-carousel__button{width:32px;height:3px;border-radius:2px}.mds-carousel__indicators--outside .is-active button{background-color:#0364ff}.mds-carousel__indicators--labels{left:0;right:0;transform:none;text-align:center}.mds-carousel__indicators--labels .mds-carousel__button{height:auto;width:auto;padding:2px 18px;font-size:12px}.mds-carousel__indicators--labels .mds-carousel__indicator{padding:6px 4px}.mds-carousel__indicator{background-color:transparent;cursor:pointer}.mds-carousel__indicator:hover button{opacity:.72}.mds-carousel__indicator--bottom,.mds-carousel__indicator--left,.mds-carousel__indicator--right,.mds-carousel__indicator--top{display:inline-block;padding:12px 4px}.mds-carousel__indicator--top .mds-carousel__button{width:8px;height:8px;border-radius:50%}.mds-carousel__indicator.is-active button{opacity:1}.mds-carousel__button{display:block;opacity:.48;width:8px;height:8px;border-radius:50%;background-color:#fff;border:none;outline:none;padding:0;margin:0;cursor:pointer;transition:.3s}.carousel-arrow-left-enter,.carousel-arrow-left-leave-active{transform:translateY(-50%) translateX(-10px);opacity:0}.carousel-arrow-right-enter,.carousel-arrow-right-leave-active{transform:translateY(-50%) translateX(10px);opacity:0}.mds-carousel__item{position:absolute;top:0;left:0;width:100%;height:100%;display:inline-block;overflow:hidden;z-index:0}.mds-carousel__item.is-active{z-index:2}.mds-carousel__item--card,.mds-carousel__item.is-animating{transition:transform .4s ease-in-out}.mds-carousel__item--card{width:50%}.mds-carousel__item--card.is-in-stage{cursor:pointer;z-index:1}.mds-carousel__item--card.is-in-stage.is-hover .mds-carousel__mask,.mds-carousel__item--card.is-in-stage:hover .mds-carousel__mask{opacity:.12}.mds-carousel__item--card.is-active{z-index:2}.mds-carousel__mask{position:absolute;width:100%;height:100%;top:0;left:0;background-color:#fff;opacity:.24;transition:.2s}
+.mds-carousel {
+  position: relative;
+}
+.mds-carousel.mds-carousel-arrow__outside {
+  box-sizing: content-box;
+  padding: 0 40px;
+}
+.mds-carousel__container {
+  position: relative;
+  height: 300px;
+}
+.mds-carousel__item-container {
+  overflow: hidden;
+  position: relative;
+}
+.mds-carousel__arrow {
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  height: 32px;
+  width: 32px;
+  cursor: pointer;
+  transition: .3s;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.25);
+  color: rgba(0, 0, 0, 0.25);
+  position: absolute;
+  top: 50%;
+  z-index: 10;
+  transform: translateY(-50%);
+  text-align: center;
+  font-size: 12px;
+}
+.mds-carousel__arrow--left {
+  left: 16px;
+}
+.mds-carousel__arrow-outside.mds-carousel__arrow--left {
+  left: -40px;
+}
+.mds-carousel__arrow--right {
+  right: 16px;
+}
+.mds-carousel__arrow-outside.mds-carousel__arrow--right {
+  right: -40px;
+}
+.mds-carousel__arrow:hover {
+  background: rgba(255, 255, 255, 0.85);
+  color: rgba(0, 0, 0, 0.65);
+}
+.mds-carousel__arrow i {
+  cursor: pointer;
+}
+.mds-carousel__indicators {
+  position: absolute;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  z-index: 2;
+}
+.mds-carousel__indicators--bottom {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.mds-carousel__indicators--right {
+  bottom: 0;
+  right: 24px;
+}
+.mds-carousel__indicators--left {
+  bottom: 0;
+  left: 24px;
+}
+.mds-carousel__indicators--top {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.mds-carousel__indicators--outside {
+  bottom: 26px;
+  text-align: center;
+  position: static;
+  transform: none;
+}
+.mds-carousel__indicators--outside .mds-carousel__indicator:hover button {
+  opacity: 0.64;
+}
+.mds-carousel__indicators--outside button {
+  background-color: #D8DCE6;
+  opacity: 0.24;
+}
+.mds-carousel__indicators--outside .mds-carousel__button {
+  width: 32px;
+  height: 3px;
+  border-radius: 2px;
+}
+.mds-carousel__indicators--outside .is-active button {
+  background-color: #0364FF;
+}
+.mds-carousel__indicators--labels {
+  left: 0;
+  right: 0;
+  transform: none;
+  text-align: center;
+}
+.mds-carousel__indicators--labels .mds-carousel__button {
+  height: auto;
+  width: auto;
+  padding: 2px 18px;
+  font-size: 12px;
+}
+.mds-carousel__indicators--labels .mds-carousel__indicator {
+  padding: 6px 4px;
+}
+.mds-carousel__indicator {
+  background-color: transparent;
+  cursor: pointer;
+}
+.mds-carousel__indicator:hover button {
+  opacity: 0.72;
+}
+.mds-carousel__indicator--bottom {
+  display: inline-block;
+  padding: 12px 4px;
+}
+.mds-carousel__indicator--left {
+  display: inline-block;
+  padding: 12px 4px;
+}
+.mds-carousel__indicator--right {
+  display: inline-block;
+  padding: 12px 4px;
+}
+.mds-carousel__indicator--bottom {
+  display: inline-block;
+  padding: 12px 4px;
+}
+.mds-carousel__indicator--top {
+  display: inline-block;
+  padding: 12px 4px;
+}
+.mds-carousel__indicator--top .mds-carousel__button {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+.mds-carousel__indicator.is-active button {
+  opacity: 1;
+}
+.mds-carousel__button {
+  display: block;
+  opacity: .48;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #fff;
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  transition: 0.3s;
+}
+.carousel-arrow-left-enter,
+.carousel-arrow-left-leave-active {
+  transform: translateY(-50%) translateX(-10px);
+  opacity: 0;
+}
+.carousel-arrow-right-enter,
+.carousel-arrow-right-leave-active {
+  transform: translateY(-50%) translateX(10px);
+  opacity: 0;
+}
+.mds-carousel__item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  overflow: hidden;
+  z-index: 0;
+}
+.mds-carousel__item.is-active {
+  z-index: 2;
+}
+.mds-carousel__item--card,
+.mds-carousel__item.is-animating {
+  transition: transform 0.4s ease-in-out;
+}
+.mds-carousel__item--card {
+  width: 50%;
+}
+.mds-carousel__item--card.is-in-stage {
+  cursor: pointer;
+  z-index: 1;
+}
+.mds-carousel__item--card.is-in-stage.is-hover .mds-carousel__mask,
+.mds-carousel__item--card.is-in-stage:hover .mds-carousel__mask {
+  opacity: 0.12;
+}
+.mds-carousel__item--card.is-active {
+  z-index: 2;
+}
+.mds-carousel__mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  opacity: .24;
+  transition: 0.2s;
+}
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable declaration-bang-space-before */
+/* stylelint-disable declaration-bang-space-before */

package/dist/style/cascader.css

@@ -1 +1,214 @@
-.mds-cascader-zoom-in-top-enter-active,.mds-cascader-zoom-in-top-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top}.mds-cascader-zoom-in-top-enter,.mds-cascader-zoom-in-top-leave-active{opacity:0;transform:scaleY(0)}.mds-cascader{background-color:#fff;position:relative}.mds-cascader .mds-input{cursor:pointer}.mds-cascader .mdsicon-line-close{color:#ccd2db;cursor:pointer}.mds-cascader .mdsicon-line-close:hover{color:rgba(0,0,0,.43)}.mds-cascader-multi-wrapper .mds-input-affix-wrapper .mds-input-suffix{transform:translate(0);top:12px}.mds-cascader-multi-wrapper .mds-cascader-multi-filter-wrapper{height:28px;position:relative;box-sizing:border-box}.mds-cascader-multi-wrapper .mds-cascader-multi-filter-wrapper .mds-cascader-multi-filter{box-sizing:inherit;display:inline-block;height:100%;width:100%;outline:none;background:transparent;appearance:none;border:none;padding-left:2px}.mds-cascader-multi-wrapper .mds-cascader-multi-filter-wrapper .mds-cascader-multi-filter-faker{box-sizing:inherit;position:absolute;top:0;left:0;visibility:hidden;white-space:pre}.mds-cascader-multi-wrapper:focus-visible{outline:none}.mds-cascader-multi-wrapper-hovering{border-color:#0364ff}.mds-cascader-large .mdsicon{font-size:14px}.mds-cascader-medium .mdsicon{font-size:12px}.mds-cascader-small .mdsicon{font-size:10px}.mds-cascader-mini .mdsicon{font-size:8px}.mds-cascader-dropdown{margin-top:8px;box-shadow:0 0 12px 0 #d8dce6}.mds-cascader-filter-panel{background-color:#fff;overflow-y:auto;overflow-x:hidden}.mds-cascader-filter-option{height:36px;line-height:36px;font-size:14px;padding:0 15px;user-select:none;cursor:pointer}.mds-cascader-filter-option:hover{background:#e6f4ff;color:#0364ff}.mds-cascader-filter-empty{color:#c0c4cc;text-align:center}.mds-cascader-filter-option-active{background:#e6f4ff;color:#0364ff}.mds-cascader-tags{z-index:1;margin-left:6px;position:absolute;top:50%;left:0;transform:translateY(-50%);display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;width:calc(100% - 30px)}.mds-cascader-tags .mds-tag{user-select:unset;cursor:unset;height:100%;max-width:100%;margin-left:6px;background-color:#fafafd;border:none;color:#7f8fa4;border-radius:2px;display:flex;justify-content:center;align-items:center;margin:2px}.mds-cascader-tags .mds-tag:hover{opacity:unset}.mds-cascader-tags .mds-tag .mds-tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mds-cascader-tags .mds-tag .mdsicon-line-close{margin-left:6px}.mds-cascader-tree-panel{background-color:#fff;border:1px solid #d0d3d6;border-radius:6px;max-height:240px;overflow:auto;padding:2px 2px 0}.mds-cascader-tree-panel .mds-tree-empty-wrapper{min-height:unset;padding:13px 11px;justify-content:flex-start}.mds-cascader-tree-panel .mds-tree-expand-content{transition:all .1s;width:16px;height:16px;display:inline-block;text-align:center;border-radius:3px}.mds-cascader-tree-panel .mds-tree-expand-content .mdsicon{height:16px;line-height:16px}.mds-cascader-tree-panel .mds-tree-expand-content:hover{background-color:rgba(3,100,255,.2)}.mds-cascader-tree-panel .mds-tree-content{padding:4px 12px;border-radius:4px}.mds-cascader-tree-panel .mds-tree-label-wrapper{flex-shrink:0}.mds-cascader-tree-panel .mds-tree-label-wrapper .mds-tree-label{height:22px;line-height:22px;display:inline-block}.mds-cascader-tree-panel .mds-tree-label-wrapper .mds-tree-label:hover{background-color:#ebf3ff}.tree .tree-tags{cursor:text}.tree .mds-tag{background-color:rgba(31,35,41,.1);color:#1f2329}.tree .mds-tag .mdsicon-line-close{color:inherit}.tree .mds-tag.mds-cascader-tags-disabled{color:rgba(0,0,0,.2)}.mds-cascader-disabled,.mds-cascader-disabled .mds-input,.tree .mds-tag.mds-cascader-tags-disabled .mdsicon-line-close{cursor:default}.mds-cascader-disabled .mds-input:hover{color:red}.mds-cascader-disabled .mds-input-suffix{color:#ccd2db}
+.mds-cascader-zoom-in-top-enter-active,
+.mds-cascader-zoom-in-top-leave-active {
+  opacity: 1;
+  transform: scaleY(1);
+  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+  transform-origin: center top;
+}
+.mds-cascader-zoom-in-top-enter,
+.mds-cascader-zoom-in-top-leave-active {
+  opacity: 0;
+  transform: scaleY(0);
+}
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable declaration-bang-space-before */
+/* stylelint-disable declaration-bang-space-before */
+.mds-cascader {
+  background-color: #fff;
+  position: relative;
+}
+.mds-cascader .mds-input {
+  cursor: pointer;
+}
+.mds-cascader .mdsicon-line-close {
+  color: #ccd2db;
+  cursor: pointer;
+}
+.mds-cascader .mdsicon-line-close:hover {
+  color: rgba(0, 0, 0, 0.43);
+}
+.mds-cascader-multi-wrapper .mds-input-affix-wrapper .mds-input-suffix {
+  transform: translate(0);
+  top: 12px;
+}
+.mds-cascader-multi-wrapper .mds-cascader-multi-filter-wrapper {
+  height: 28px;
+  position: relative;
+  box-sizing: border-box;
+}
+.mds-cascader-multi-wrapper .mds-cascader-multi-filter-wrapper .mds-cascader-multi-filter {
+  box-sizing: inherit;
+  display: inline-block;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  background: transparent;
+  appearance: none;
+  border: none;
+  padding-left: 2px;
+}
+.mds-cascader-multi-wrapper .mds-cascader-multi-filter-wrapper .mds-cascader-multi-filter-faker {
+  box-sizing: inherit;
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  white-space: pre;
+}
+.mds-cascader-multi-wrapper:focus-visible {
+  outline: none;
+}
+.mds-cascader-multi-wrapper-hovering {
+  border-color: #0364ff;
+}
+.mds-cascader-large .mdsicon {
+  font-size: 14px;
+}
+.mds-cascader-medium .mdsicon {
+  font-size: 12px;
+}
+.mds-cascader-small .mdsicon {
+  font-size: 10px;
+}
+.mds-cascader-mini .mdsicon {
+  font-size: 8px;
+}
+.mds-cascader-dropdown {
+  margin-top: 8px;
+  box-shadow: 0px 0px 12px 0px #d8dce6;
+}
+.mds-cascader-filter-panel {
+  background-color: #fff;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.mds-cascader-filter-option {
+  height: 36px;
+  line-height: 36px;
+  font-size: 14px;
+  padding: 0 15px;
+  user-select: none;
+  cursor: pointer;
+}
+.mds-cascader-filter-option:hover {
+  background: #e6f4ff;
+  color: #0364ff;
+}
+.mds-cascader-filter-empty {
+  color: #c0c4cc;
+  text-align: center;
+}
+.mds-cascader-filter-option-active {
+  background: #e6f4ff;
+  color: #0364ff;
+}
+.mds-cascader-tags {
+  z-index: 1;
+  margin-left: 6px;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+  width: calc(100% - 30px);
+}
+.mds-cascader-tags .mds-tag {
+  user-select: unset;
+  cursor: unset;
+  height: 100%;
+  max-width: 100%;
+  margin-left: 6px;
+  background-color: #fafafd;
+  border: none;
+  color: #7f8fa4;
+  border-radius: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 2px 2px;
+}
+.mds-cascader-tags .mds-tag:hover {
+  opacity: unset;
+}
+.mds-cascader-tags .mds-tag .mds-tag-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mds-cascader-tags .mds-tag .mdsicon-line-close {
+  margin-left: 6px;
+}
+.mds-cascader-tree-panel {
+  background-color: #fff;
+  border: 1px solid #d0d3d6;
+  border-radius: 6px;
+  max-height: 240px;
+  overflow: auto;
+  padding: 2px 2px 0;
+}
+.mds-cascader-tree-panel .mds-tree-empty-wrapper {
+  min-height: unset;
+  padding: 13px 11px;
+  justify-content: flex-start;
+}
+.mds-cascader-tree-panel .mds-tree-expand-content {
+  transition: all 0.1s;
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  text-align: center;
+  border-radius: 3px;
+}
+.mds-cascader-tree-panel .mds-tree-expand-content .mdsicon {
+  height: 16px;
+  line-height: 16px;
+}
+.mds-cascader-tree-panel .mds-tree-expand-content:hover {
+  background-color: rgba(3, 100, 255, 0.2);
+}
+.mds-cascader-tree-panel .mds-tree-content {
+  padding: 4px 12px;
+  border-radius: 4px;
+}
+.mds-cascader-tree-panel .mds-tree-label-wrapper {
+  flex-shrink: 0;
+}
+.mds-cascader-tree-panel .mds-tree-label-wrapper .mds-tree-label {
+  height: 22px;
+  line-height: 22px;
+  display: inline-block;
+}
+.mds-cascader-tree-panel .mds-tree-label-wrapper .mds-tree-label:hover {
+  background-color: #ebf3ff;
+}
+.tree .tree-tags {
+  cursor: text;
+}
+.tree .mds-tag {
+  background-color: rgba(31, 35, 41, 0.1);
+  color: #1f2329;
+}
+.tree .mds-tag .mdsicon-line-close {
+  color: inherit;
+}
+.tree .mds-tag.mds-cascader-tags-disabled {
+  color: rgba(0, 0, 0, 0.2);
+}
+.tree .mds-tag.mds-cascader-tags-disabled .mdsicon-line-close {
+  cursor: default;
+}
+.mds-cascader-disabled {
+  cursor: default;
+}
+.mds-cascader-disabled .mds-input {
+  cursor: default;
+}
+.mds-cascader-disabled .mds-input:hover {
+  color: red;
+}
+.mds-cascader-disabled .mds-input-suffix {
+  color: #ccd2db;
+}