@24i/bigscreen-sdk 1.0.34 → 1.0.35-alpha.2578

package/packages/keyboard/src/MobiKeyboard/Keyboard.scss

@@ -1,180 +1,180 @@
-$background-color: #121317;
-$key-text-color: #aaa;
-$key-color: #dcdcdc;
-$focus-color: #f0f0f0;
-$focus-text-color: #000;
-
-$double-key-width: ($key-width + $key-margin) * 2 - 2;
-$double-key-margin: $key-margin + 2;
-
-$done-key-height: ($key-height * 3) + ($key-margin * 4);
-$done-key-line-height: ($line-height * 3) + ($key-margin * 3);
-$space-key-width: ($key-width * 11) + ($key-margin * 20);
-
-@mixin mask-icon {
-    -webkit-mask-size: contain;
-    mask-size: contain;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-    -webkit-mask-position: center;
-    mask-position: center;
-}
-
-.keyboard {
-    position: absolute;
-    left: $margin-horizontal;
-    bottom: $margin-bottom;
-    right: $margin-horizontal;
-    padding: $padding;
-  
-    z-index: 10;
-    background-color: $background-color;
-
-    &.shift-active,
-    &.caps-active {
-        text-transform: uppercase;
-
-        .key-shift,
-        .key-clear,
-        .key-done,
-        .key-cancel {
-            text-transform: none;
-        }
-    }
-
-    &.caps-active .key-shift::before {
-        content: '⬤';
-        position: absolute;
-        left: $caps-indicator-left;
-        font-size: 0.35em;
-    }
-
-    .keyboard-row {
-        position: relative;
-        text-align: center;
-    }
-
-    .key {
-        font-size: $font-size;
-        font-weight: bold;
-        display: inline-block;
-        width: $key-width;
-        height: $key-height;
-        margin: $key-margin;
-        line-height: $line-height;
-        text-align: center;
-        background-color: rgba($key-color, 0.1);
-        color: $key-text-color;
-        outline: none;
-
-        &.key-icon {
-            background-position: center;
-            background-repeat: no-repeat;
-            vertical-align: bottom;
-
-            .key-mask-icon {
-                background-color: $key-text-color;
-                display: inline-block;
-                width: $icon-width;
-                height: 100%;
-            }
-        }
-
-        &:focus {
-            background-color: $focus-color;
-            color: $focus-text-color;
-
-            .key-mask-icon {
-                background-color: $focus-text-color;
-            }
-        }
-
-        &.key-space {
-            width: $space-key-width;
-
-            .key-mask-icon {
-                -webkit-mask: url('./icons/key_space.svg');
-                mask: url('./icons/key_space.svg');
-                /* stylelint-disable */
-                @include mask-icon;
-                /* stylelint-enable */
-            }
-        }
-
-        &.done-container {
-            margin-right: -$key-width - $key-margin;
-            position: relative;
-            vertical-align: bottom;
-            background: none;
-        }
-
-        &.key-done {
-            position: absolute;
-            margin: 0;
-            top: -$key-height - ($key-margin * 2);
-            left: 0;
-            height: $done-key-height;
-            line-height: $done-key-line-height;
-            width: $double-key-width;
-        }
-
-        &.key-backspace {
-            .key-mask-icon {
-                -webkit-mask: url('./icons/key_backspace.svg');
-                mask: url('./icons/key_backspace.svg');
-                /* stylelint-disable */
-                @include mask-icon;
-                /* stylelint-enable */
-            }
-        }
-
-        &.key-left {
-            .key-mask-icon {
-                -webkit-mask: url('./icons/arrow_left.svg');
-                mask: url('./icons/arrow_left.svg');
-                /* stylelint-disable */
-                @include mask-icon;
-                /* stylelint-enable */
-            }
-        }
-
-        &.key-right {
-            .key-mask-icon {
-                -webkit-mask: url('./icons/arrow_right.svg');
-                mask: url('./icons/arrow_right.svg');
-                /* stylelint-disable */
-                @include mask-icon;
-                /* stylelint-enable */
-            }
-        }
-
-        &.key-fill {
-            background: none;
-            vertical-align: bottom;
-
-            &.double {
-                width: $double-key-width;
-            }
-        }
-
-        &.key-special {
-            width: $double-key-width;
-            margin-left: $double-key-margin;
-        }
-
-        &.key-clear {
-            width: $double-key-width;
-            margin-right: $double-key-margin;
-        }
-
-        &.key-shift {
-            width: $double-key-width;
-            margin-left: $double-key-margin;
-        }
-
-        &.key-cancel {
-            width: $double-key-width;
-            margin-right: $double-key-margin;
-        }
-    }
-}
+$background-color: #121317;
+$key-text-color: #aaa;
+$key-color: #dcdcdc;
+$focus-color: #f0f0f0;
+$focus-text-color: #000;
+
+$double-key-width: ($key-width + $key-margin) * 2 - 2;
+$double-key-margin: $key-margin + 2;
+
+$done-key-height: ($key-height * 3) + ($key-margin * 4);
+$done-key-line-height: ($line-height * 3) + ($key-margin * 3);
+$space-key-width: ($key-width * 11) + ($key-margin * 20);
+
+@mixin mask-icon {
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+
+.keyboard {
+    position: absolute;
+    left: $margin-horizontal;
+    bottom: $margin-bottom;
+    right: $margin-horizontal;
+    padding: $padding;
+  
+    z-index: 10;
+    background-color: $background-color;
+
+    &.shift-active,
+    &.caps-active {
+        text-transform: uppercase;
+
+        .key-shift,
+        .key-clear,
+        .key-done,
+        .key-cancel {
+            text-transform: none;
+        }
+    }
+
+    &.caps-active .key-shift::before {
+        content: '⬤';
+        position: absolute;
+        left: $caps-indicator-left;
+        font-size: 0.35em;
+    }
+
+    .keyboard-row {
+        position: relative;
+        text-align: center;
+    }
+
+    .key {
+        font-size: $font-size;
+        font-weight: bold;
+        display: inline-block;
+        width: $key-width;
+        height: $key-height;
+        margin: $key-margin;
+        line-height: $line-height;
+        text-align: center;
+        background-color: rgba($key-color, 0.1);
+        color: $key-text-color;
+        outline: none;
+
+        &.key-icon {
+            background-position: center;
+            background-repeat: no-repeat;
+            vertical-align: bottom;
+
+            .key-mask-icon {
+                background-color: $key-text-color;
+                display: inline-block;
+                width: $icon-width;
+                height: 100%;
+            }
+        }
+
+        &:focus {
+            background-color: $focus-color;
+            color: $focus-text-color;
+
+            .key-mask-icon {
+                background-color: $focus-text-color;
+            }
+        }
+
+        &.key-space {
+            width: $space-key-width;
+
+            .key-mask-icon {
+                -webkit-mask: url('./icons/key_space.svg');
+                mask: url('./icons/key_space.svg');
+                /* stylelint-disable */
+                @include mask-icon;
+                /* stylelint-enable */
+            }
+        }
+
+        &.done-container {
+            margin-right: -$key-width - $key-margin;
+            position: relative;
+            vertical-align: bottom;
+            background: none;
+        }
+
+        &.key-done {
+            position: absolute;
+            margin: 0;
+            top: -$key-height - ($key-margin * 2);
+            left: 0;
+            height: $done-key-height;
+            line-height: $done-key-line-height;
+            width: $double-key-width;
+        }
+
+        &.key-backspace {
+            .key-mask-icon {
+                -webkit-mask: url('./icons/key_backspace.svg');
+                mask: url('./icons/key_backspace.svg');
+                /* stylelint-disable */
+                @include mask-icon;
+                /* stylelint-enable */
+            }
+        }
+
+        &.key-left {
+            .key-mask-icon {
+                -webkit-mask: url('./icons/arrow_left.svg');
+                mask: url('./icons/arrow_left.svg');
+                /* stylelint-disable */
+                @include mask-icon;
+                /* stylelint-enable */
+            }
+        }
+
+        &.key-right {
+            .key-mask-icon {
+                -webkit-mask: url('./icons/arrow_right.svg');
+                mask: url('./icons/arrow_right.svg');
+                /* stylelint-disable */
+                @include mask-icon;
+                /* stylelint-enable */
+            }
+        }
+
+        &.key-fill {
+            background: none;
+            vertical-align: bottom;
+
+            &.double {
+                width: $double-key-width;
+            }
+        }
+
+        &.key-special {
+            width: $double-key-width;
+            margin-left: $double-key-margin;
+        }
+
+        &.key-clear {
+            width: $double-key-width;
+            margin-right: $double-key-margin;
+        }
+
+        &.key-shift {
+            width: $double-key-width;
+            margin-left: $double-key-margin;
+        }
+
+        &.key-cancel {
+            width: $double-key-width;
+            margin-right: $double-key-margin;
+        }
+    }
+}

package/packages/keyboard/src/MobiKeyboard/Keyboard.styles.1080.scss

@@ -1,2 +1,2 @@
-@import './sizes.1080';
-@import './Keyboard';
+@import './sizes.1080';
+@import './Keyboard';

package/packages/keyboard/src/MobiKeyboard/Keyboard.styles.animated.1080.scss

@@ -1,3 +1,3 @@
-@import './sizes.1080';
-@import './Keyboard';
-@import './animated';
+@import './sizes.1080';
+@import './Keyboard';
+@import './animated';

package/packages/keyboard/src/MobiKeyboard/Keyboard.styles.animated.scss

@@ -1,3 +1,3 @@
-@import './sizes';
-@import './Keyboard';
-@import './animated';
+@import './sizes';
+@import './Keyboard';
+@import './animated';

package/packages/keyboard/src/MobiKeyboard/Keyboard.styles.scss

@@ -1,2 +1,2 @@
-@import './sizes';
-@import './Keyboard';
+@import './sizes';
+@import './Keyboard';