linkmore-design 1.1.13-alpha.1 → 1.1.13-alpha.10

package/lib/LmFilter/style/index.css

@@ -1,8 +1,8 @@
 .lm_filter_wrapper .lm_filter_container .lm_filter {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
   gap: 8px;
+  align-items: center;
   font-size: 12px;
 }
 .lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_custom {
@@ -13,14 +13,14 @@
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
-  height: 32px;
-  line-height: 1;
   min-width: 100px;
   max-width: 180px;
+  height: 32px;
+  padding: 0 8px;
+  color: var(--font2-color);
+  line-height: 1;
   border: 1px solid var(--color-15);
   border-radius: 2px;
-  color: var(--font2-color);
-  padding: 0 8px;
   cursor: pointer;
   transition: 0.3s;
 }
@@ -28,13 +28,13 @@
   height: 24px;
 }
 .lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_custom .lm_filter_custom_select .lm_filter_custom_select_label span {
-  text-overflow: ellipsis;
-  white-space: nowrap;
   overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_custom .lm_filter_custom_select .lm_filter_custom_select_icon {
-  font-size: 14px;
   color: var(--text-color);
+  font-size: 14px;
   transition: 0.3s;
 }
 .lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_custom .lm_filter_custom_select:hover {
@@ -63,16 +63,17 @@
   height: 24px;
 }
 .lm_filter_basic_item {
-  font-size: 12px;
   display: inline-flex;
+  gap: 4px;
   align-items: center;
+  height: 32px;
+  padding: 0 8px;
+  font-size: 12px;
   line-height: 1;
+  vertical-align: middle;
   border-radius: 2px;
-  padding: 0 8px;
-  transition: 0.3s;
   cursor: pointer;
-  height: 32px;
-  gap: 4px;
+  transition: 0.3s;
 }
 .lm_filter_basic_item.small {
   height: 24px;
@@ -82,21 +83,34 @@
 .lm_filter_basic_item.active {
   background-color: var(--color-4);
 }
+.lm_filter_basic_item .filter_item_label {
+  flex: 0 0 auto;
+}
 .lm_filter_basic_item .filter_item_value {
   display: inline-flex;
-  align-items: center;
   gap: 4px;
+  align-items: center;
+  max-width: 552px;
+  overflow: hidden;
   color: var(--text-color);
   transition: 0.3s;
 }
+.lm_filter_basic_item .filter_item_value span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .lm_filter_basic_item .filter_item_icon {
-  font-size: 14px;
   color: var(--text-color);
+  font-size: 14px;
   transition: 0.3s;
 }
 .lm_filter_basic_item .filter_item_icon.addon_before {
   color: var(--font-color);
 }
+.lm_filter_basic_item .filter_item_icon .icon_clear {
+  display: none;
+}
 .lm_filter_basic_item.expand .filter_item_icon.addon_after {
   transform: rotateX(180deg);
 }
@@ -110,23 +124,29 @@
 .lm_filter_basic_item.active.lm_filter_complex_item .filter_item_label {
   color: var(--primary-color);
 }
+.lm_filter_basic_item.active:hover .icon_down {
+  display: none;
+}
+.lm_filter_basic_item.active:hover .icon_clear {
+  display: inline-block;
+}
 .ant-dropdown.filter_dropdown_container_cascader > div {
   transform: translateY(-4px);
 }
 .ant-dropdown.filter_dropdown_container_date .ant-picker {
-  visibility: hidden;
   transform: translateY(-36px);
+  visibility: hidden;
 }
 .filter_dropdown {
   display: flex;
   flex-flow: column;
-  box-shadow: 0 2px 6px var(--box-shadow-color);
   background-color: #fff;
+  box-shadow: 0 2px 6px var(--box-shadow-color);
 }
 .filter_dropdown .filter_header {
   min-height: 40px;
-  border-bottom: 1px solid #eee;
   padding: 8px;
+  border-bottom: 1px solid #eee;
 }
 .filter_dropdown .filter_header .filter_header_operate {
   display: flex;
@@ -138,13 +158,13 @@
   align-items: center;
 }
 .filter_dropdown .filter_header .filter_header_operate .filter_reset {
-  font-size: 12px;
   color: var(--primary-color);
+  font-size: 12px;
   cursor: pointer;
 }
 .filter_dropdown .filter_header .filter_header_operate .filter_tip {
-  font-size: 12px;
   color: var(--text-color);
+  font-size: 12px;
 }
 .filter_dropdown .filter_header .ant-input-group {
   line-height: 1;
@@ -165,32 +185,40 @@
 }
 .filter_dropdown .filter_body .filter_item {
   display: flex;
+  gap: 8px;
   align-items: center;
   justify-content: space-between;
-  font-size: 12px;
-  height: 32px;
   min-width: 120px;
+  height: 32px;
   padding: 0 8px;
-  transition: 0.3s;
+  font-size: 12px;
   white-space: nowrap;
   cursor: pointer;
-  gap: 8px;
+  transition: 0.3s;
 }
 .filter_dropdown .filter_body .filter_item.last_item {
   border-top: 1px solid var(--line-color);
 }
 .filter_dropdown .filter_body .filter_item .filter_item_content {
   flex: auto;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.filter_dropdown .filter_body .filter_item .filter_item_content.lm-checkbox > span:last-child {
+  max-width: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .filter_dropdown .filter_body .filter_item .filter_item_operate {
   display: inline-flex;
-  align-items: center;
   gap: 4px;
+  align-items: center;
 }
 .filter_dropdown .filter_body .filter_item .filter_item_operate .icon_hover {
   font-size: 16px;
-  transition: 0.3s;
   opacity: 0;
+  transition: 0.3s;
 }
 .filter_dropdown .filter_body .filter_item .filter_item_operate .icon_hover:hover {
   color: var(--primary-color);
@@ -212,15 +240,15 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 12px;
   min-height: 32px;
   padding: 6px 8px;
-  border-top: 1px solid #eee;
+  font-size: 12px;
   letter-spacing: 1px;
+  border-top: 1px solid #eee;
 }
 .filter_dropdown .filter_footer button {
-  font-size: 12px;
   padding: 0 8px;
+  font-size: 12px;
 }
 .filter_dropdown .filter_footer .footer_save {
   color: var(--primary-color);
@@ -238,14 +266,14 @@
 .filter_dropdown .filter_empty {
   display: flex;
   flex-flow: column;
+  gap: 4px;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
   min-height: 40px;
-  color: #666;
-  padding: 16px 8px;
   margin: auto;
-  gap: 4px;
+  padding: 16px 8px;
+  color: #666;
+  font-size: 12px;
 }
 .filter_dropdown .filter_empty .filter_empty_text {
   display: inline-flex;
@@ -256,8 +284,8 @@
 }
 .filter_dropdown .ant-checkbox-wrapper {
   flex: 1;
-  font-size: 12px;
   align-items: center;
+  font-size: 12px;
 }
 .filter_dropdown .ant-checkbox-wrapper .ant-checkbox {
   top: initial;
@@ -293,18 +321,18 @@
   padding: 0 0 8px;
 }
 .ant-drawer.lm_filter_drawer .filter_drawer_group_add .ant-btn {
-  font-size: 12px;
   max-width: initial;
+  font-size: 12px;
 }
 .ant-drawer.lm_filter_drawer .filter_drawer_group_list .filter_drawer_group_item {
   margin-bottom: var(--gap);
 }
 .ant-drawer.lm_filter_drawer .filter_drawer_group_list .filter_drawer_group_item .item_box {
+  padding: calc(var(--gap) * 2);
   line-height: 1;
+  background: var(--background-color);
   border: 1px solid transparent;
   border-radius: 2px;
-  background: var(--background-color);
-  padding: calc(var(--gap) * 2);
   cursor: pointer;
   transition: 0.3s;
 }
@@ -314,12 +342,12 @@
   justify-content: space-between;
 }
 .ant-drawer.lm_filter_drawer .filter_drawer_group_list .filter_drawer_group_item .item_box .item_header .item_header_title {
-  font-size: 12px;
   font-weight: 500;
+  font-size: 12px;
 }
 .ant-drawer.lm_filter_drawer .filter_drawer_group_list .filter_drawer_group_item .item_box .item_header .item_header_icon {
+  color: #8c8c8c;
   font-size: 16px;
-  color: #8C8C8C;
   transition: 0.3s;
 }
 .ant-drawer.lm_filter_drawer .filter_drawer_group_list .filter_drawer_group_item .item_box .item_header .item_header_icon.icon_plus {
@@ -335,9 +363,9 @@
   padding-top: 12px;
 }
 .ant-drawer.lm_filter_drawer .filter_drawer_group_list .filter_drawer_group_item .item_box .item_tags .ant-tag {
+  margin: 0;
   color: var(--font-color);
   background-color: var(--background-color);
-  margin: 0;
 }
 .ant-drawer.lm_filter_drawer .filter_drawer_group_list .filter_drawer_group_item .item_box .item_tags .ant-tag.add_tags {
   background: transparent;
@@ -357,8 +385,8 @@
   margin-bottom: 24px;
 }
 .ant-drawer.lm_filter_drawer .complex_filter_body .list_group .list_group_title {
-  font-size: 14px;
   font-weight: 500;
+  font-size: 14px;
   line-height: 1.25;
 }
 .ant-drawer.lm_filter_drawer .complex_filter_body .list_group .list_group_search {
@@ -368,14 +396,14 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
   height: 24px;
-  border-radius: 2px;
+  padding: 0 8px;
   color: var(--font-color);
+  font-size: 12px;
   background-color: var(--stripe-color);
-  padding: 0 8px;
-  transition: 0.3s;
+  border-radius: 2px;
   cursor: pointer;
+  transition: 0.3s;
 }
 .ant-drawer.lm_det_drawer .checkbox_tag:hover,
 .ant-drawer.lm_det_drawer .checkbox_tag.active {
@@ -401,25 +429,25 @@
   top: 0;
 }
 .ant-drawer.lm_det_drawer .ant-select {
-  font-size: 12px;
   width: 100%;
+  font-size: 12px;
 }
 .ant-drawer.lm_det_drawer .custom_form {
   display: flex;
   flex-flow: column;
-  height: 100%;
   gap: 24px;
+  height: 100%;
 }
 .ant-drawer.lm_det_drawer .custom_form .custom_label {
-  font-size: 14px;
-  font-weight: 500;
   margin-bottom: 16px;
   color: var(--font-color);
+  font-weight: 500;
+  font-size: 14px;
 }
 .ant-drawer.lm_det_drawer .custom_form .custom_full {
   display: flex;
-  flex-flow: column;
   flex: 1;
+  flex-flow: column;
 }
 .lm_filter_dropdown_picker {
   padding: 0 !important;
@@ -428,17 +456,17 @@
   display: flex;
 }
 .lm_filter_dropdown_picker .filter_picker_box .filter_picker_aside {
+  padding: 6px 0;
   font-size: 12px;
   border-right: 1px solid var(--background-color-hover);
-  padding: 6px 0;
 }
 .lm_filter_dropdown_picker .filter_picker_box .filter_picker_aside .filter_picker_aside_item {
   display: flex;
   align-items: center;
   height: 32px;
   padding: 0 8px;
-  transition: 0.3s;
   cursor: pointer;
+  transition: 0.3s;
 }
 .lm_filter_dropdown_picker .filter_picker_box .filter_picker_aside .filter_picker_aside_item:hover,
 .lm_filter_dropdown_picker .filter_picker_box .filter_picker_aside .filter_picker_aside_item.active {
@@ -449,13 +477,13 @@
   align-items: center;
   justify-content: space-between;
   min-height: 40px;
-  line-height: 1;
   padding: 0 16px;
+  line-height: 1;
   border-bottom: 1px solid var(--background-color-hover);
 }
 .lm_filter_dropdown_picker .filter_picker_box .filter_picker_main .filter_picker_header .ant-radio-button-wrapper {
-  font-size: 12px;
   color: var(--font2-color);
+  font-size: 12px;
 }
 .lm_filter_dropdown_picker .filter_picker_box .filter_picker_main .filter_picker_header .ant-radio-button-wrapper:hover,
 .lm_filter_dropdown_picker .filter_picker_box .filter_picker_main .filter_picker_header .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {