@taiga-ui/kit 4.7.0 → 4.8.1-canary.d818d28

package/styles/components/like.less

@@ -0,0 +1,69 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+/**
+ * @name Like
+ * @selector [tuiLike]
+ *
+ * @description
+ * A stylized input type="checkbox"
+ *
+ * @attributes
+ * data-size — size (default: 'm') ('s' | 'm')
+ *
+ * @vars
+ * --t-icon-color - custom color for `:checked` state
+ * --t-unchecked-icon — default state icon
+ * --t-checked-icon — checkmark icon
+ *
+ * @example
+ * <input tuiLike />
+ *
+ * @see-also
+ * Checkbox, Switch, Radio, Appearance
+ */
+[tuiLike] {
+    --t-size: var(--tui-height-m);
+    --t-border-width: 0.75rem;
+
+    inline-size: var(--t-size);
+    block-size: var(--t-size);
+    border: var(--t-border-width) transparent solid;
+    border-radius: 100%;
+    cursor: pointer;
+    margin: 0;
+    flex-shrink: 0;
+
+    &::before,
+    &::after {
+        .fullsize();
+        .transition(~'transform, opacity');
+
+        content: '';
+        background: currentColor;
+        mask: var(--t-unchecked-icon) no-repeat center/contain;
+    }
+
+    &::after {
+        mask-image: var(--t-checked-icon);
+        opacity: 0;
+        color: var(--t-icon-color, inherit);
+        transform: scale(0);
+    }
+
+    &:checked {
+        &::before {
+            opacity: 0;
+        }
+
+        &::after {
+            opacity: 1;
+            transform: scale(1);
+            transition-timing-function: cubic-bezier(0.2, 0.6, 0.5, 1.8), ease-in-out;
+        }
+    }
+
+    &[data-size='s'] {
+        --t-size: var(--tui-height-s);
+        --t-border-width: 0.5rem;
+    }
+}