@neatui/css 1.0.2

package/load/load@d.scss

@@ -0,0 +1,26 @@
+@keyframes ui-load-d {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+[ui-load~='@d'],
+.ui-load-d {
+  & {
+    display: inline-block;
+    width: 1.1em;
+    height: 1.1em;
+    background: radial-gradient(circle at 91% 47%, currentColor 7.1%, transparent 8.1%), radial-gradient(circle at 86% 29.7%, currentColor 6.3%, transparent 7.3%),
+      radial-gradient(circle at 74.3% 16.4%, currentColor 5.6%, transparent 6.6%), radial-gradient(circle at 58% 9.3%, currentColor 5.3%, transparent 6.3%),
+      radial-gradient(circle at 40.3% 9.8%, currentColor 4.9%, transparent 5.9%), radial-gradient(circle at 24% 17.6%, currentColor 4.2%, transparent 5.2%),
+      radial-gradient(circle at 13.3% 31.7%, currentColor 3.7%, transparent 4.7%), radial-gradient(circle at 9.2% 49.1%, currentColor 3.4%, transparent 4.4%),
+      radial-gradient(circle at 12.9% 66.5%, currentColor 2.7%, transparent 3.7%), radial-gradient(circle at 23.5% 80.6%, currentColor 2.2%, transparent 3.2%),
+      radial-gradient(circle at 39.3% 89%, currentColor 1.8%, transparent 2.8%), radial-gradient(circle at 57.1% 90%, currentColor 1.3%, transparent 2.3%),
+      radial-gradient(circle at 73.5% 83.3%, currentColor 0.6%, transparent 1.6%), radial-gradient(circle at 85.7% 70.2%, currentColor 0.3%, transparent 1.3%);
+    animation: ui-load-d 2s linear infinite both;
+  }
+}

package/load/load@e.scss

@@ -0,0 +1,24 @@
+[ui-load='@e'],
+.ui-load-e {
+  @keyframes ui-load-e {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  & {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    @include theme {
+      border: 1px solid currentColor;
+    }
+    border-right-color: transparent !important;
+    animation: ui-load-e 1.5s linear infinite both;
+  }
+}

package/load/load@f.scss

@@ -0,0 +1,124 @@
+@keyframes ui-load-f {
+  0% {
+    background: radial-gradient(circle at 22% 22%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 78% 22%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 22% 78%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 78% 78%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+    transform: rotate(0deg);
+  }
+
+  5% {
+    background: radial-gradient(circle at 25% 25%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 75% 25%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 25% 75%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 75% 75%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+  }
+
+  10% {
+    background: radial-gradient(circle at 28% 28%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 72% 28%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 28% 72%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 72% 72%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+  }
+
+  15% {
+    background: radial-gradient(circle at 31% 31%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 69% 31%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 31% 69%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 69% 69%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+  }
+
+  20% {
+    background: radial-gradient(circle at 34% 34%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 66% 34%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 34% 66%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 66% 66%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+  }
+
+  25% {
+    background: radial-gradient(circle at 37% 37%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 63% 37%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 37% 63%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 63% 63%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+  }
+
+  30% {
+    background: radial-gradient(circle at 39% 39%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 61% 39%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 39% 61%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 61% 61%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+  }
+
+  35% {
+    background: radial-gradient(circle at 42% 42%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 58% 42%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 42% 58%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 58% 58%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+  }
+
+  40% {
+    background: radial-gradient(circle at 45% 45%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 55% 45%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 45% 55%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 55% 55%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+  }
+
+  45% {
+    background: radial-gradient(circle at 47% 47%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 53% 47%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 47% 53%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 53% 53%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+  }
+
+  50% {
+    background: radial-gradient(circle at 50% 50%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 50% 50%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 50% 50%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 50% 50%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+  }
+
+  55% {
+    background: radial-gradient(circle at 47% 47%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 53% 47%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 47% 53%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 53% 53%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+  }
+
+  60% {
+    background: radial-gradient(circle at 45% 45%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 55% 45%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 45% 55%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 55% 55%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+  }
+
+  65% {
+    background: radial-gradient(circle at 42% 42%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 58% 42%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 42% 58%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 58% 58%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+  }
+
+  70% {
+    background: radial-gradient(circle at 39% 39%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 61% 39%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 39% 61%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 61% 61%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+  }
+
+  75% {
+    background: radial-gradient(circle at 37% 37%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 63% 37%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 37% 63%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 63% 63%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+  }
+
+  80% {
+    background: radial-gradient(circle at 34% 34%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 66% 34%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 34% 66%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 66% 66%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+  }
+
+  85% {
+    background: radial-gradient(circle at 31% 31%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 69% 31%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 31% 69%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 69% 69%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+  }
+
+  90% {
+    background: radial-gradient(circle at 28% 28%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 72% 28%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 28% 72%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 72% 72%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+  }
+
+  95% {
+    background: radial-gradient(circle at 25% 25%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 75% 25%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 25% 75%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 75% 75%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+  }
+
+  100% {
+    background: radial-gradient(circle at 22% 22%, rgba(255, 68, 68, 0.8) 20%, transparent 0%), radial-gradient(circle at 78% 22%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 22% 78%, rgba(153, 204, 0, 0.8) 20%, transparent 0%), radial-gradient(circle at 78% 78%, rgba(51, 181, 229, 0.8) 20%, transparent 0%);
+    transform: rotate(360deg);
+  }
+}
+
+[ui-load='@f'],
+.ui-load-f {
+  & {
+    display: inline-block;
+    width: 1.5em;
+    height: 1.5em;
+    position: relative;
+    background:
+      radial-gradient(circle at 22% 22%, rgba(255, 68, 68, 0.8) 20%, transparent 0%),
+      radial-gradient(circle at 78% 22%, rgba(255, 187, 50, 0.85) 20%, transparent 0%),
+      radial-gradient(circle at 22% 78%, rgba(153, 204, 0, 0.8) 20%, transparent 0%),
+      radial-gradient(circle at 78% 78%, rgba(51, 181, 229, 0.8) 20%, transparent 0%) no-repeat;
+    animation: ui-load-f 1s linear infinite both;
+  }
+}

package/load/load@g.scss

@@ -0,0 +1,35 @@
+[ui-load='@g'],
+.ui-load-g {
+  @keyframes ui-load-g {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  & {
+    position: relative;
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    border: 1px solid transparent;
+    border-right-color: currentColor !important;
+    animation: ui-load-g 1.5s linear infinite both;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      box-shadow: 0 0 0 1px currentColor;
+      opacity: 0.2;
+      border-radius: 50%;
+    }
+  }
+}

package/load/load@h.scss

@@ -0,0 +1,51 @@
+[ui-load='@h'],
+.ui-load-h {
+  @keyframes ui-load-h {
+    0%,
+    20% {
+      background: radial-gradient(circle at 15% 50%, currentColor 12%, transparent 13%);
+    }
+    21%,
+    25% {
+    }
+    25%,
+    40% {
+      background: radial-gradient(circle at 50% 50%, currentColor 17%, transparent 18%);
+    }
+    41%,
+    45% {
+    }
+    45%,
+    60% {
+      background: radial-gradient(circle at 85% 50%, currentColor 12%, transparent 13%);
+    }
+    61%,
+    100% {
+    }
+  }
+
+  & {
+    position: relative;
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    @include theme {
+      background: radial-gradient(circle at 15% 50%, rgba(co(text), 0.2) 12%, transparent 13%), radial-gradient(circle at 50% 50%, rgba(co(text), 0.2) 14%, transparent 15%),
+        radial-gradient(circle at 85% 50%, rgba(co(text), 0.2) 9%, transparent 10%);
+    }
+
+    &::after {
+      position: absolute;
+      display: block;
+      content: '';
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      @include theme {
+        color: co(text);
+      }
+      animation: ui-load-h 1s cubic-bezier(0.72, 0.115, 0.355, 0.88) infinite both;
+    }
+  }
+}

package/load/load@i.scss

@@ -0,0 +1,51 @@
+[ui-load='@i'],
+.ui-load-h {
+  @keyframes ui-load-i {
+    0%,
+    20% {
+      background: radial-gradient(circle at 15% 50%, currentColor 12%, transparent 13%);
+    }
+    21%,
+    25% {
+    }
+    25%,
+    40% {
+      background: radial-gradient(circle at 50% 50%, currentColor 17%, transparent 18%);
+    }
+    41%,
+    45% {
+    }
+    45%,
+    60% {
+      background: radial-gradient(circle at 85% 50%, currentColor 12%, transparent 13%);
+    }
+    61%,
+    100% {
+    }
+  }
+
+  & {
+    position: relative;
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    @include theme {
+      background: radial-gradient(circle at 15% 50%, rgba(co(text), 0.2) 12%, transparent 13%), radial-gradient(circle at 50% 50%, rgba(co(text), 0.2) 14%, transparent 15%),
+        radial-gradient(circle at 85% 50%, rgba(co(text), 0.2) 9%, transparent 10%);
+    }
+
+    &::after {
+      position: absolute;
+      display: block;
+      content: '';
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      @include theme {
+        color: co(text);
+      }
+      animation: ui-load-h 1s cubic-bezier(0.72, 0.115, 0.355, 0.88) infinite both;
+    }
+  }
+}

package/load/mcui@load.scss

@@ -0,0 +1,8 @@
+@import './load@a.scss';
+@import './load@b.scss';
+@import './load@c.scss';
+@import './load@d.scss';
+@import './load@e.scss';
+@import './load@f.scss';
+@import './load@g.scss';
+@import './load@h.scss';

package/load/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@neatui/load",
+  "version": "1.1.0",
+  "description": "",
+  "main": "mcui@load.scss",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "xiaojunbo",
+  "license": "MIT",
+  "dependencies": {},
+  "keywords": [
+    "mcui",
+    "ui"
+  ]
+}

package/menu/mcui@menu.scss

@@ -0,0 +1 @@
+@import './menu@b.scss';

package/menu/menu@b.scss

@@ -0,0 +1,302 @@
+.mc-menu {
+  position: relative;
+  display: inline-block;
+
+  // 切换状态
+  .mc-menu-switch {
+    display: none;
+  }
+
+  // 导航列表
+  .mc-menu-list {
+    & > label {
+      display: none;
+    }
+
+    & > * {
+      position: relative;
+      display: inline-block;
+
+      & > * {
+        display: inline-block;
+        cursor: pointer;
+        position: relative;
+
+        & > a {
+          padding: 0 1em;
+        }
+
+        &:hover,
+        & .active {
+          & > a {
+            @include theme {
+              color: co(main);
+            }
+          }
+
+          .mc-menu-list-two {
+            text-align: left;
+            opacity: 1;
+            transform: translate3d(-50%, 0.5rem, 0);
+            pointer-events: auto;
+            transition: all 0.5s;
+          }
+        }
+      }
+    }
+
+    .mc-menu-list-two {
+      position: absolute;
+      min-width: 10rem;
+      left: 50%;
+      padding: 2rem;
+      @include theme {
+        background: co(back);
+      }
+      line-height: 3rem;
+      transform: translate3d(-50%, 1rem, 0);
+      opacity: 0;
+      pointer-events: none;
+      border-radius: 0.1rem;
+      transition: all 0.2s;
+
+      & > * {
+        white-space: nowrap;
+
+        &:hover {
+          @include theme {
+            color: co(main);
+          }
+        }
+      }
+
+      &:before {
+        position: absolute;
+        content: '';
+        display: block;
+        border: 0.5rem solid transparent;
+        @include theme {
+          border-bottom-color: co(back);
+        }
+        width: 1rem;
+        height: 1rem;
+        left: 50%;
+        top: -1rem;
+        margin-left: -0.5rem;
+      }
+
+      &:after {
+        position: absolute;
+        content: '';
+        width: 100%;
+        height: 1rem;
+        top: -1rem;
+        left: 0;
+      }
+    }
+    // 搜索框
+    & > .head-search {
+      display: none;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      left: 0;
+      top: 0;
+      @include theme {
+        background: co(back);
+      }
+
+      & > input {
+        width: 8rem;
+        height: 2.5rem;
+        @include theme {
+          background: co(weak);
+        }
+        border-radius: 2.5rem;
+      }
+    }
+  }
+
+  // 导航按钮
+  .mc-menu-icon {
+    display: none;
+  }
+}
+
+// 移动
+@media screen and (max-width: 768px) {
+  .mc-menu {
+    position: static;
+    display: inline-block;
+
+    // 切换状态
+    .mc-menu-switch {
+      display: none;
+
+      // 开启状态
+      &:checked + .mc-menu-icon {
+        &:after {
+          border-radius: 30%;
+          @include theme {
+            background: linear-gradient(45deg, transparent 45%, co(read) 45%, co(read) 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, co(read) 45%, co(read) 55%, transparent 55%);
+          }
+        }
+
+        & + .mc-menu-list {
+          transition: transform 0.35s;
+          transform: translate3d(-100%, 0, 1px);
+          pointer-events: auto;
+
+          & > * {
+            opacity: 1;
+            transform: translate3d(0, 0, 1px);
+          }
+        }
+      }
+    }
+
+    // 导航主体
+    .mc-menu-list {
+      position: fixed;
+      display: block;
+      width: 100%;
+      left: 100%;
+      top: 4rem;
+      bottom: 0;
+      z-index: 10;
+      text-align: center;
+      //height: 100%;
+      line-height: 3.5rem;
+      pointer-events: none;
+      transition: transform 0.2s;
+      transform: translate3d(0, 0, 1px);
+      //background: rgba(0, 0, 0, .85);
+
+      padding: 1rem 3rem;
+      //color: #fff;
+      overflow-x: hidden;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+      @include theme {
+        background: co(back);
+        border-top: 1px solid co(line);
+      }
+
+      // 开关按钮
+      //& > label {
+      //  width: 100%;
+      //  height: 100%;
+      //  position: absolute;
+      //  top: 0;
+      //  right: 16rem;
+      //  z-index: 12;
+      //
+      //  &:after {
+      //    position: absolute;
+      //    right: -15rem;
+      //    top: 1rem;
+      //    border-radius: 30%;
+      //    background: linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%);
+      //    transform: scale3d(1, 1, 1);
+      //    transition: all .1s;
+      //  }
+      //
+      //  &:active {
+      //    &:after {
+      //      transform: scale3d(.75, .75, 1);
+      //    }
+      //  }
+      //}
+
+      // 搜索框
+      & > .head-search {
+        padding-top: 3rem;
+        @include theme {
+          border-top: 1px solid co(line);
+        }
+
+        .head-search-list {
+          padding: 1em 0;
+
+          & > * {
+            @include theme {
+              border-bottom: 1px dotted co(line);
+            }
+          }
+        }
+
+        input {
+          width: 100%;
+          height: 3rem;
+          border-radius: 3px;
+          @include theme {
+            background: co(weak);
+          }
+          padding: 1em;
+        }
+      }
+
+      // 导航列表
+      & > * {
+        position: relative;
+        width: 100%;
+        z-index: 11;
+        margin-bottom: 2rem;
+
+        & > * {
+          display: block;
+          text-align: left;
+          border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
+        }
+      }
+    }
+
+    // 开关按钮
+    .mc-menu-icon {
+      position: relative;
+      //height: 100%;
+      display: inline-block;
+      padding: 0.25rem;
+      //top: 1px;
+      z-index: 11;
+      width: 1.5rem;
+      height: 1.5rem;
+      @include theme {
+        border: 1px solid co(read);
+      }
+      border-radius: 0.25rem;
+      vertical-align: middle;
+      top: -0.1rem;
+      right: 0.3em;
+
+      &:before {
+        content: '';
+        display: block;
+        width: 300%;
+        height: 300%;
+        position: absolute;
+        left: -100%;
+        top: -100%;
+      }
+
+      &:after {
+        width: 100%;
+        height: 100%;
+        content: '';
+        display: block;
+        @include theme {
+          background: linear-gradient(0deg, transparent 42%, co(read) 0%, co(read) 57%, transparent 0%), linear-gradient(90deg, transparent 75%, co(back) 76%), linear-gradient(0deg, transparent 10%, co(read) 0%, co(read) 25%, transparent 0%), linear-gradient(0deg, transparent 75%, co(read) 0%, co(read) 90%, transparent 0%);
+        }
+        transform: scale3d(1, 1, 1);
+        transition: all 0.1s;
+      }
+
+      &:active & .active {
+        &:after {
+          transform: scale3d(0.75, 0.75, 1);
+        }
+      }
+    }
+  }
+}