feat(action): add disabled action

cft-group · Mar 11, 2021 · a74da86 · a74da86
1 parent b4c244a
commit a74da86
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 8 deletions.
diff --git a/src/packages/core/src/action/action.css b/src/packages/core/src/action/action.css
@@ -32,6 +32,18 @@
   }
 }
 
+._e_action_disabled {
+  cursor: default;
+  pointer-events: none;
+
+  & ._e_action__icon svg {
+    fill: var(--N100);
+  }
+  & ._e_action__text {
+    color: var(--N200);
+  }
+}
+
 ._e_action__icon {
   width: var(--S24);
   height: var(--S24);

diff --git a/src/packages/core/src/action/action.html b/src/packages/core/src/action/action.html
@@ -1,8 +1,21 @@
-<button class="_e_action">
-  <div class="_e_action__icon">
-    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M4.41431 3H19.5859C20.1382 3 20.5859 3.44772 20.5859 4C20.5859 4.26522 20.4805 4.51957 20.293 4.70711L14.0001 11V21L10.0001 18V11L3.7072 4.70711C3.31668 4.31658 3.31668 3.68342 3.7072 3.29289C3.89474 3.10536 4.14909 3 4.41431 3Z" />
-    </svg>    
-  </div>
-  <div class="_e_action__text">Filter Items</div>
-</button>
+<p>
+  <button class="_e_action">
+    <div class="_e_action__icon">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4.41431 3H19.5859C20.1382 3 20.5859 3.44772 20.5859 4C20.5859 4.26522 20.4805 4.51957 20.293 4.70711L14.0001 11V21L10.0001 18V11L3.7072 4.70711C3.31668 4.31658 3.31668 3.68342 3.7072 3.29289C3.89474 3.10536 4.14909 3 4.41431 3Z" />
+      </svg>    
+    </div>
+    <div class="_e_action__text">Filter Items</div>
+  </button>
+</p>
+
+<p>
+  <button class="_e_action _e_action_disabled">
+    <div class="_e_action__icon">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4.41431 3H19.5859C20.1382 3 20.5859 3.44772 20.5859 4C20.5859 4.26522 20.4805 4.51957 20.293 4.70711L14.0001 11V21L10.0001 18V11L3.7072 4.70711C3.31668 4.31658 3.31668 3.68342 3.7072 3.29289C3.89474 3.10536 4.14909 3 4.41431 3Z" />
+      </svg>    
+    </div>
+    <div class="_e_action__text">Filter Items</div>
+  </button>
+</p>