amis-ui 3.1.1 → 3.3.0

package/package.json

@@ -3,10 +3,11 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
-  "version": "3.1.1",
+  "version": "3.3.0",
   "description": "",
   "scripts": {
     "build": "npm run clean-dist && NODE_ENV=production rollup -c ",
+    "build-esm": "npm run clean-dist && NODE_ENV=production rollup -c rollup.esm.config.js",
     "dev": "rollup -c -w",
     "test": "jest",
     "gen-doc": "ts-node ./scripts/genDoc.ts",
@@ -35,9 +36,9 @@
   },
   "dependencies": {
     "@rc-component/mini-decimal": "^1.0.1",
-    "amis-core": "^3.1.1",
-    "amis-formula": "^3.1.1",
-    "classnames": "2.3.1",
+    "amis-core": "^3.3.0",
+    "amis-formula": "^3.3.0",
+    "classnames": "2.3.2",
     "codemirror": "^5.63.0",
     "downshift": "6.1.12",
     "echarts": "5.4.0",
@@ -108,6 +109,10 @@
   },
   "jest": {
     "testEnvironment": "jsdom",
+    "coverageReporters": [
+      "text",
+      "cobertura"
+    ],
     "collectCoverageFrom": [
       "src/**/*"
     ],
@@ -141,5 +146,5 @@
       "/.rollup.cache/"
     ]
   },
-  "gitHead": "17e32ce204cfacf65f00db8ea0109295406d9282"
+  "gitHead": "b2637905fa258d984cf27b538b25a8db1bf8b5fc"
 }

package/scss/_components.scss

@@ -1,4 +1,5 @@
-:root {
+:root,
+.AMISCSSWrapper {
   --button-default-default-top-border-color: var(--colors-neutral-line-8);
   --button-default-default-top-border-style: var(--borders-style-2);
   --button-default-default-top-border-width: var(--borders-width-2);
@@ -1159,8 +1160,8 @@
   );
   --inputNumber-enhance-default-paddingTop: var(--sizes-size-3);
   --inputNumber-enhance-default-paddingBottom: var(--sizes-size-3);
-  --inputNumber-enhance-default-paddingLeft: var(--sizes-size-7);
-  --inputNumber-enhance-default-paddingRight: var(--sizes-size-7);
+  --inputNumber-enhance-default-paddingLeft: var(--sizes-size-5);
+  --inputNumber-enhance-default-paddingRight: var(--sizes-size-5);
   --inputNumber-enhance-default-bg-color: var(--colors-neutral-fill-11);
   --inputNumber-enhance-hover-top-border-color: var(--colors-brand-5);
   --inputNumber-enhance-hover-top-border-width: var(--borders-width-2);
@@ -1273,6 +1274,11 @@
   );
   --inputNumber-enhance-leftIcon-default-icon: '<svg viewBox="0 0 12 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon icon-minus"><g id="minus" fill="currentColor" fill-rule="nonzero"><polygon id="path-1" points="0 1.6 0 0.4 12 0.4 12 1.6"></polygon></g></svg>';
   --inputNumber-enhance-rightIcon-default-icon: '<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" class="icon  icon-plus"><path d="M6.6 6.6V12H5.4V6.6H0V5.4h5.4V0h1.2v5.4H12v1.2z" fill="currentColor" fill-rule="nonzero"></path></svg>';
+  --inputNumber-enhance-mobile-input-width: #{px2rem(56px)};
+  --inputNumber-enhance-mobile-icon-width: #{px2rem(28px)};
+  --inputNumber-enhance-mobile-icon-height: #{px2rem(28px)};
+  --inputNumber-enhance-mobile-icon-inner-width: #{px2rem(27px)};
+  --inputNumber-enhance-mobile-icon-inner-height: #{px2rem(27px)};
   --Form-input-onHover-borderColor: var(--colors-brand-5);
   --Form-input-onFocused-borderColor: var(--colors-brand-5);
 
@@ -1587,7 +1593,7 @@
   --ListControl-item-onActive-color: var(
     --listSelect-base-active-top-border-color
   );
-  --ListControl-item-onActive-before-bg: var(--colors-brand-4);
+  --ListControl-item-onActive-before-bg: var(--colors-brand-5);
   --ListControl-item-color: var(--listSelect-base-default-color);
   --ListControl-item-onDisabled-color: var(--listSelect-base-disabled-color);
   --ListControl-item-paddingX: var(--listSelect-base-default-paddingLeft);
@@ -1626,6 +1632,7 @@
 
   // 表单
   --Form-item-gap: var(--sizes-base-12);
+  --Form-item-mobile-gap: var(--sizes-base-4);
   --Form-item-color: var(--colors-neutral-text-4);
   --Form-item-fontColor: var(--Form-item-color);
   --Form-item-fontSize: var(--fonts-size-7);
@@ -1671,6 +1678,8 @@
   --InputRange-track-onActive-bg: var(--colors-brand-5);
   --InputRange-handle-height: var(--sizes-size-9);
   --InputRange-handle-width: var(--sizes-size-9);
+  --InputRange-handle-mobile-height: var(--sizes-base-10);
+  --InputRange-handle-mobile-width: var(--sizes-base-10);
   --InputRange-handle-bg: var(--colors-neutral-fill-11);
   --InputRange-handle-top-border-color: var(--colors-brand-5);
   --InputRange-handle-top-border-width: 0.0625rem;
@@ -1687,7 +1696,7 @@
   --InputRange-handle-onFocus-borderRadius: var(
     --InputRange-handle-border-radius
   );
-  --InputRange-padding: #{px2rem(20px)};
+  --InputRange-padding: #{px2rem(16px)};
   --InputRange-handle-icon-width: var(--sizes-size-5);
   --InputRange-handle-icon-height: var(--sizes-size-5);
   --InputRange-handle-icon-color: var(--colors-brand-9);
@@ -1725,6 +1734,7 @@
   );
   --InputRange-label-position-bottom: calc(100% + 8px);
   --InputRange-input-width: var(--sizes-base-40);
+  --InputRange-input-mobile-width: var(--sizes-base-20);
   --InputRange-input-marginTop: var(--sizes-size-0);
   --InputRange-input-marginBottom: var(--sizes-size-0);
   --InputRange-input-marginLeft: var(--sizes-size-5);
@@ -2816,6 +2826,7 @@
   --select-tree-active-bg-color: var(--colors-brand-10);
 
   --Form-select-bg: var(--select-base-default-bg-color);
+  --Form-select-mobile-icon-check-color: var(--colors-brand-5);
   --Form-select-height: var(--Form-select-outer-top);
   --Form-select-borderColor: var(--select-base-default-top-border-color)
     var(--select-base-default-right-border-color)
@@ -3487,7 +3498,7 @@
   --Toast--danger-bottom-left-border-radius: var(--borders-radius-3);
   --Toast--danger-bgColor: var(--colors-neutral-fill-11);
   --Toast--info-color: var(--colors-neutral-text-2);
-  --Toast--info-fontSize: var(--fonts-size-6);
+  --Toast--info-fontSize: var(--fonts-size-7);
   --Toast--info-fontWeight: var(--fonts-weight-6);
   --Toast--info-top-border-color: var(--colors-neutral-line-11);
   --Toast--info-top-border-width: var(--borders-width-2);
@@ -3959,9 +3970,9 @@
   --Table-color: var(--table-body-color);
   --Table-expandBtn-color: var(--colors-neutral-text-5);
   --Table-fixed-zIndex: 5;
-  --Table-fixedLeft-boxShadow: 0.42rem 0 0.42rem -0.28rem rgba(0, 0, 0, 0.15);
-  --Table-fixedRight-boxShadow: -0.42rem 0 0.42rem -0.28rem rgba(0, 0, 0, 0.15);
-  --Table-fixedTop-boxShadow: var(--shadows-shadow-normal);
+  --Table-fixedLeft-boxShadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.06);
+  --Table-fixedRight-boxShadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.06);
+  --Table-fixedTop-boxShadow: inset 0 10px 8px -8px rgba(5, 5, 5, 0.06);
   --Table-fontSize: var(--table-body-fontSize);
   --Table-heading-bg: var(--table-title-bg-color);
   --Table-heading-height: #{px2rem(40px)};

package/scss/_mixins.scss

@@ -482,7 +482,6 @@
     border: none;
     color: var(--Form-input-color);
     width: 100%;
-    height: var(--Form-input-lineHeight);
 
     &::placeholder {
       color: var(--Form-input-placeholderColor);

package/scss/_properties.scss

@@ -5,13 +5,14 @@ $remFactor: 16px;
 /* 此处放置需要override的变量，因为部分变量已经在variables.scss中定义 */
 $Table-strip-bg: transparent;
 
-:root {
+:root,
+.AMISCSSWrapper {
   --white: var(--colors-neutral-text-11);
   --primary: var(--colors-brand-5);
   --primary-onHover: var(--colors-brand-6);
   --primary-onActive: var(--colors-brand-4);
 
-  --secondary: var(--colors-neutral-text-4); // secondary 颜色需进一步确认
+  --secondary: var(--colors-neutral-text-4); /*  secondary 颜色需进一步确认 */
   --secondary-onHover: var(--colors-neutral-text-6);
   --secondary-onActive: var(--colors-neutral-text-4);
 
@@ -243,6 +244,7 @@ $Table-strip-bg: transparent;
   --ColorPicker-fontSize: var(--Form-input-fontSize);
   --ColorPicker-height: var(--Form-input-height);
   --ColorPicker-lineHeight: var(--Form-input-lineHeight);
+  --ColorPicker-height: var(--sizes-base-16);
   --ColorPicker-onDisabled-bg: var(--colors-neutral-fill-8);
   --ColorPicker-onDisabled-color: var(--text--muted-color);
   --ColorPicker-onFocused-borderColor: var(--Form-input-onFocused-borderColor);
@@ -480,7 +482,7 @@ $Table-strip-bg: transparent;
   --ListControl-item-borderRadius: var(--borders-radius-3);
   --ListControl-item-color: var(--colors-neutral-text-2);
   --ListControl-item-onActive-after-borderColor: var(--colors-neutral-line-11);
-  --ListControl-item-onActive-before-bg: var(--colors-brand-4);
+  --ListControl-item-onActive-before-bg: var(--colors-brand-5);
   --ListControl-item-onActive-bg: var(--colors-neutral-fill-11);
   --ListControl-item-onActive-borderColor: var(--colors-brand-4);
   --ListControl-item-onActive-color: var(--colors-brand-4);
@@ -527,6 +529,10 @@ $Table-strip-bg: transparent;
   --ListMenu-item-bg: var(--colors-neutral-fill-11);
   --ListMenu-item-color: var(--colors-neutral-text-2);
   --ListMenu-item-height: var(--sizes-base-15);
+  --ListMenu-item-mobile-margin: #{px2rem(5px)};
+  --ListMenu-item-mobile-width: #{px2rem(90px)};
+  --ListMenu-item-mobile-bg: #f5f5f5;
+  --ListMenu-item-mobile-active-bg: #e7f1ff;
 
   --Log-bg: #222;
   --Log-padding: var(--gap-sm) 0;
@@ -634,6 +640,7 @@ $Table-strip-bg: transparent;
   --PopOverAble-onHover-iconColor: inherit;
 
   --PopUp-cancelAction-color: #666;
+  --PopUp-confirmAction-color: var(--primary);
 
   --Property-title-bg: #f2f2f2;
   --Property-label-bg: #f7f7f7;
@@ -757,9 +764,10 @@ $Table-strip-bg: transparent;
   --ColumnToggler-item-dragBar-color: #d8d8d8;
 
   --InputFormula-header-bgColor: #fafafa;
-  --InputFormula-icon-size: #{px2rem(24px)};
+  --InputFormula-icon-size: #{px2rem(18px)};
   --InputFormula-icon-color-onActive: var(--colors-brand-5);
   --InputFormula-code-bgColor: var(--colors-neutral-fill-10);
+  --InputFormula-input-schema-height: var(--sizes-base-12);
 
   --UserSelect--post-bg: var(--colors-brand-6);
   --UserSelect--department-bg: #ffab52;
@@ -768,6 +776,24 @@ $Table-strip-bg: transparent;
   --UserSelect--content-bg: #f5f7f8;
   --UserSelect--bread-color: #5e626a;
 
+  --Cascader-border-color: #f7f7f9;
+  --Cascader-border-active-bg-color: #f7f7f9;
+  --Cascader-option-disable-color: #b8babf;
+
+  // tag
+  --Tag-content-fontSize: var(--fontSizeSm);
+  --Tag-height: #{px2rem(24px)};
+  --Tag-borderRadius: #{px2rem(2px)};
+  --Tag-fontColor: #151a26;
+
+  --Tag-default-color: #f2f2f4;
+  --Tag-inactive-color: #b8babf;
+  --Tag-active-color: var(--colors-brand-5);
+  --Tag-processing-color: var(--colors-brand-6);
+  --Tag-success-color: var(--colors-success-5);
+  --Tag-error-color: var(--colors-error-5);
+  --Tag-warning-color: var(--colors-warning-5);
+
   --Tag-checkable-bgColor: #f2f2f4;
   --Tag-checkable-bgColor-onDisable: #e6e6e8;
   --Tag-checkable-bgColor-onHover: #e6e6e8;

package/scss/_variables.scss

@@ -279,6 +279,26 @@ $widths: map-merge(
   )
 ) !default;
 
+$minWidths: (
+  none: none,
+  0: 0rem,
+  xs: 20rem,
+  sm: 24rem,
+  md: 28rem,
+  lg: 32rem,
+  xl: 36rem,
+  2xl: 42rem,
+  3xl: 48rem,
+  4xl: 56rem,
+  5xl: 64rem,
+  6xl: 72rem,
+  7xl: 80rem,
+  full: 100%,
+  min: min-content,
+  max: max-content,
+  prose: 65ch
+) !default;
+
 $maxWidths: (
   none: none,
   0: 0rem,

package/scss/base/_common.scss

@@ -5,3 +5,7 @@
 .is-keyword {
   color: var(--primary-onActive);
 }
+
+.visibility-sensor {
+  min-height: 5px;
+}

package/scss/components/_button-group.scss

@@ -2,6 +2,7 @@
   position: relative;
   display: inline-flex;
   vertical-align: middle;
+  flex-wrap: wrap;
 
   > .#{$ns}Button {
     position: relative;

package/scss/components/_calendar.scss

@@ -109,7 +109,8 @@
 .#{$ns}CalendarMobile {
   height: 100%;
   width: 100%;
-  overflow: scroll;
+  overflow-y: scroll;
+  overflow-x: hidden;
 
   &-pop {
     position: fixed;
@@ -122,9 +123,21 @@
     overflow: hidden;
     border-width: 0;
 
+    &--quarters,
+    &--months {
+      height: px2rem(400px);
+    }
+
     &--time {
-      height: fit-content;
+      height: px2rem(360px);
       max-height: 90vh;
+      .#{$ns}PopUp-content {
+        overflow: hidden;
+      }
+    }
+
+    &--years {
+      height: px2rem(360px);
     }
   }
 
@@ -204,6 +217,7 @@
     overflow-y: scroll;
 
     table {
+      padding: 0;
       border-spacing: 0 px2rem(4px);
     }
 
@@ -238,14 +252,15 @@
     }
 
     .calendar-wrap {
-      position: relative;
       width: px2rem(50px);
+      position: relative;
       height: 100%;
       text-align: center;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       border-radius: px2rem(4px);
+      padding: 0 px2rem(10px);
     }
   }
 
@@ -260,6 +275,7 @@
     flex-shrink: 0;
 
     .date-range-confirm {
+      width: 100%;
       height: px2rem(36px);
       margin: px2rem(7px) 0;
       border-radius: var(--borderRadiusMd);
@@ -267,13 +283,7 @@
       justify-content: center;
       align-items: center;
     }
-    .is-disabled {
-      opacity: 0.5;
-      color: var(--Button--primary-color);
-      background: var(--Button--primary-bg);
-      border-color: var(--Button--primary-bg);
-      filter: none;
-    }
+
     &-toolbar {
       padding: 0 px2rem(16px);
     }
@@ -287,11 +297,11 @@
       line-height: px2rem(48px);
     }
     .#{$ns}DateRangePicker-rangers {
-      position: absolute;
+      padding-left: revert;
       white-space: nowrap;
-      .#{$ns}DateRangePicker-ranger {
-        margin: 0 px2rem(25px);
-      }
+      line-height: inherit;
+      display: flex;
+      justify-content: space-between;
     }
     .#{$ns}DatePicker-shortcuts {
       width: auto;

package/scss/components/_cards.scss

@@ -31,18 +31,11 @@
   }
 
   &-fixedTop {
-    position: absolute;
+    position: sticky;
     background: var(--white);
-    z-index: -1;
-    opacity: 0;
-    box-shadow: var(--Cards-fixedTop-boxShadow);
+    // box-shadow: var(--Cards-fixedTop-boxShadow);
     padding: var(--gap-sm);
-
-    &.in {
-      position: fixed;
-      opacity: 1;
-      z-index: $zindex-affix;
-    }
+    z-index: $zindex-sticky;
 
     .#{$ns}Cards-toolbar {
       margin-bottom: 0;

package/scss/components/_cascader.scss

@@ -12,9 +12,12 @@
 .#{$ns}Cascader-tab {
   flex: 1;
   width: calc((100vw - 20px) / 3);
-  height: px2rem(370px);
+  height: px2rem(260px);
   overflow-y: auto;
   display: inline-block;
+  padding-left: px2rem(10px);
+  border: 1px solid var(--Cascader-border-color);
+
   &::-webkit-scrollbar {
     display: none;
   }
@@ -52,13 +55,18 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: px2rem(6px) 0;
+    padding: px2rem(6px) 0 px2rem(6px) px2rem(10px);
     font-size: var(--fontSizeMd);
     line-height: var(--Cascader-option-lineHeight);
     cursor: pointer;
     position: relative;
+
+    &.is-active {
+      background-color: var(--Cascader-border-active-bg-color);
+    }
+
     &.selected {
-      span {
+      .#{$ns}Cascader-option--text {
         color: var(--primary);
       }
     }
@@ -68,11 +76,26 @@
       }
     }
     &--text {
+      flex: 1;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       user-select: none;
+
+      &.disabled {
+        color: var(--Cascader-option-disable-color);
+      }
     }
+
+    &-arrow {
+      flex: 1;
+      text-align: right;
+      padding-right: px2rem(6px);
+      > svg {
+        transform: scale(0.8);
+      }
+    }
+
     &-selectedNum {
       min-width: px2rem(16px);
       height: px2rem(16px);

package/scss/components/_city-area.scss

@@ -1,4 +1,5 @@
 .#{$ns}CityArea {
+  flex: 1;
   text-align: right;
 
   &-popup {
@@ -15,6 +16,11 @@
     font-size: var(--Form-input-fontSize);
     display: inline-flex !important;
 
+    &.is-focused,
+    &:hover {
+      border: none !important;
+    }
+
     &::placeholder {
       color: var(--Form-input-placeholderColor);
       user-select: none;

package/scss/components/_collapse-group.scss

@@ -24,7 +24,7 @@
     }
   }
 
-  .#{$ns}Collapse:not(:last-child) {
+  .#{$ns}Collapse:not(:last-child):not(.is-mobile) {
     border-bottom: none;
   }
 
@@ -40,4 +40,14 @@
       }
     }
   }
+
+  &.is-mobile {
+    &.icon-position-right {
+      .#{$ns}Collapse-header {
+        .#{$ns}Collapse-arrow-wrap {
+          margin-right: px2rem(-18px);
+        }
+      }
+    }
+  }
 }

package/scss/components/_collapse.scss

@@ -42,6 +42,17 @@
       background: var(--Collapse-header-onHover-bg);
       color: var(--collapse-default-header-hover-color);
     }
+
+    &.is-mobile {
+      background: none;
+      border-radius: 0 !important;
+      position: relative;
+      padding-left: 0;
+
+      &:hover {
+        background: none;
+      }
+    }
   }
 
   .Collapse-arrow {
@@ -76,7 +87,7 @@
   //   display: inline-block;
   // }
 
-  &.is-active > &-header > &-arrow-wrap > &-arrow {
+  &.is-active > .#{$ns}Collapse-header > .#{$ns}Collapse-arrow-wrap > &-arrow {
     transform: rotate(var(--collapse-icon-rotate));
     transform-origin: 50% 50%;
   }
@@ -133,6 +144,28 @@
     line-height: var(--collapse-default-content-lineHeight);
     background: var(--collapse-default-bg-color);
   }
+
+  &.is-mobile {
+    border-top: none;
+    border-left: none;
+    border-right: none;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .#{$ns}Collapse-icon-tranform,
+    .#{$ns}Collapse-arrow-wrap {
+      margin-right: px2rem(-18px);
+      float: right;
+      margin-top: px2rem(2px);
+    }
+
+    .#{$ns}Collapse-content {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
 }
 
 //FieldSet Form + Collapse

package/scss/components/_column-toggler.scss

@@ -6,17 +6,17 @@
     margin-left: var(--DropDown-caret-marginLeft);
     display: inline-block;
     vertical-align: top;
-    transition: transform var(--animation-duration) ease;
 
     > svg {
       width: px2rem(10px);
       height: px2rem(10px);
-      top: 0.125em;
+      transition: transform var(--animation-duration) ease;
+      transform: rotate(90deg);
     }
   }
 
-  &.is-opened &-caret {
-    transform: rotate(180deg);
+  &.is-opened &-caret svg {
+    transform: rotate(270deg);
   }
 
   &.is-actived > .#{$ns}Button {
@@ -67,11 +67,6 @@
     text-decoration: var(--link-decoration);
     background: var(--table-togglable-bg-color);
 
-    &:hover {
-      background: var(--table-togglable-hover-bg-color);
-      color: var(--DropDown-menuItem-onHover-color);
-    }
-
     &.is-active {
       color: var(--DropDown-menuItem-onActive-color);
     }
@@ -97,6 +92,13 @@
     }
   }
 
+  &-menu:not(.is-mobile) > li {
+    &:hover {
+      background: var(--table-togglable-hover-bg-color);
+      color: var(--DropDown-menuItem-onHover-color);
+    }
+  }
+
   &-menu > li a {
     color: inherit;
     display: block;

package/scss/components/_condition-builder.scss

@@ -1,3 +1,6 @@
+.#{$ns}ConditionBuilderControl.is-mobile {
+  overflow-x: auto;
+}
 .#{$ns}CBGroup {
   font-size: var(--fontSizeSm);
   position: relative;
@@ -195,6 +198,7 @@
       width: px2rem(10px);
       height: px2rem(10px);
       top: 0;
+      transform: rotate(90deg);
     }
   }
 
@@ -278,7 +282,7 @@
         padding: 10px;
         margin: -10px 0px;
         background: $white;
-        z-index: 1;
+        z-index: 2;
       }
       > .#{$ns}CBGroupOrItem-dragbar {
         left: px2rem(-5px);
@@ -331,9 +335,31 @@
     opacity: 0;
   }
 
-  &:hover > &-body > &-body-item > &-dragbar,
-  &:hover > &-body > &-body-item > .#{$ns}CBDelete {
-    opacity: 1;
+  &:is(.is-mobile) {
+    > .#{$ns}CBGroupOrItem-body
+      > .#{$ns}CBGroupOrItem-body-group
+      > .#{$ns}CBGroupOrItem-dragbar,
+    > .#{$ns}CBGroupOrItem-body
+      > .#{$ns}CBGroupOrItem-body-item
+      > .#{$ns}CBGroupOrItem-dragbar,
+    > .#{$ns}CBGroupOrItem-body
+      > .#{$ns}CBGroupOrItem-body-item
+      > .#{$ns}CBDelete {
+      opacity: 1;
+    }
+  }
+
+  &:not(.is-mobile) {
+    &:hover
+      > .#{$ns}CBGroupOrItem-body
+      > .#{$ns}CBGroupOrItem-body-item
+      > .#{$ns}CBGroupOrItem-dragbar,
+    &:hover
+      > .#{$ns}CBGroupOrItem-body
+      > .#{$ns}CBGroupOrItem-body-item
+      > .#{$ns}CBDelete {
+      opacity: 1;
+    }
   }
 
   &-simple {