@taiga-ui/addon-mobile 3.54.0 → 3.55.0-canary.f5fbcc5

package/styles/common/button.less

@@ -0,0 +1,27 @@
+[tuiButtonNew] {
+    width: 100%;
+
+    &[data-size='xs'],
+    &[data-size='s'],
+    &[data-size='l'] {
+        --t-radius: 1rem;
+    }
+
+    &[data-size='m'] {
+        --t-radius: 0.75rem;
+    }
+
+    &:disabled:not(._loading) {
+        background: var(--tui-clear);
+        color: var(--tui-clear-active);
+        opacity: 1;
+
+        &[data-appearance='flat'] {
+            background: transparent;
+        }
+    }
+}
+
+[tuiButton][tuiButtonVertical] {
+    gap: 0.5rem;
+}

package/styles/common/title.less

@@ -0,0 +1,7 @@
+[tuiTitle] {
+    gap: 0.25rem;
+
+    [tuiSubtitle] {
+        color: var(--tui-text-02);
+    }
+}

package/styles/ios/checkbox.less

@@ -0,0 +1,38 @@
+input[tuiCheckbox],
+input[tuiRadio] {
+    width: 1.375rem;
+    height: 1.375rem;
+    border-radius: 100%;
+    color: var(--tui-base-01);
+    transition: none;
+
+    &:checked,
+    &:not([tuiRadio]):indeterminate {
+        background: var(--tui-accent);
+        box-shadow: none;
+
+        &:disabled:not(._readonly) {
+            background: var(--tui-base-04);
+        }
+
+        &:before {
+            display: block;
+            transform: none;
+            mask: var(--t-mask) center/100%;
+        }
+
+        &._invalid {
+            background: var(--tui-error-fill);
+        }
+    }
+
+    &:before {
+        display: none;
+
+        --t-mask: url('data:image/svg+xml,<svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"><path d="M6.75 11.25L9.8 15.2L15.2 7" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+    }
+
+    &:not([tuiRadio]):indeterminate:before {
+        --t-mask: url('data:image/svg+xml,<svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"><path d="M6 11H16" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="round"/></svg>');
+    }
+}

package/styles/ios/toggle.less

@@ -0,0 +1,50 @@
+input[tuiToggle],
+input[tuiToggle]& {
+    height: 1.9375rem;
+    width: 3.1875rem;
+    border-radius: 2rem;
+    color: var(--tui-text-01-night);
+    background: var(--tui-base-04);
+    overflow: visible;
+
+    &:before {
+        opacity: 0;
+    }
+
+    &:after {
+        .transition(~'transform, width');
+        right: auto;
+        width: 1.9375rem;
+        height: 1.9375rem;
+        border-radius: 2rem;
+        background: currentColor;
+        transform: scale(0.871);
+        box-shadow:
+            0 0.25rem 0.125rem rgba(0, 0, 0, 0.06),
+            0 0.25rem 0.5rem rgba(0, 0, 0, 0.15) !important;
+    }
+
+    &:active:after {
+        width: 2.3rem;
+    }
+
+    &:checked {
+        background: var(--tui-accent);
+
+        &:after {
+            transform: scale(0.871) translateX(1.44rem);
+        }
+
+        &:active:after {
+            transform: scale(0.871) translateX(1.0775rem);
+        }
+    }
+
+    &._invalid {
+        background: var(--tui-error-bg);
+
+        &:checked {
+            background: var(--tui-error-fill);
+        }
+    }
+}

package/styles/taiga-ui-mobile.less

@@ -0,0 +1,24 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+[data-platform='android'] {
+    @import './android/checkbox';
+    @import './android/radio';
+    @import './android/toggle';
+
+    tui-badge-notification[data-size='l'] {
+        --t-size: 1.375rem;
+    }
+}
+
+[data-platform='ios'] {
+    @import './ios/checkbox';
+    @import './ios/toggle';
+}
+
+[data-platform='android'],
+[data-platform='ios'] {
+    @import './common/badge';
+    @import './common/badge-notification';
+    @import './common/button';
+    @import './common/title';
+}