strip emotes for language detection

[alttp.git] / resources / sass / form.scss

diff --git a/resources/sass/form.scss b/resources/sass/form.scss
index ee2ee5fd567b03e2b3b7dbd8632916cdf23f8088..411188ff2eba90c3252cdc7bf45d030ace06a1fb 100644 (file)
--- a/resources/sass/form.scss
+++ b/resources/sass/form.scss
@@ -12,3 +12,71 @@ label {
                visibility: visible;
        }
 }
+
+.custom-toggle {
+       display: inline-block;
+       width: auto;
+       height: 2.25rem;
+       min-width: 58px;
+       background: $input-bg;
+       border: $input-border-width solid $input-border-color;
+       border-radius: 1.25rem;
+       transition: background 200ms ease, padding 200ms ease;
+       text-align: left;
+       padding: 3px 3px 3px 24px;
+
+       &.is-toggled {
+               background: $success;
+               padding: 3px 24px 3px 3px;
+       }
+
+       &.is-invalid,
+       &.is-valid {
+               background-image: none;
+               padding: 3px 24px 3px 3px;
+               &.is-toggled {
+                       padding: 3px 24px 3px 3px;
+               }
+       }
+       &.is-invalid.is-toggled {
+               background: red;
+
+               .handle-label {
+                       color: red;
+               }
+       }
+
+       &:hover {
+               cursor: pointer;
+       }
+
+       &:focus {
+               border-color: #ced4da;
+       }
+
+       .handle {
+               display: inline-block;
+               min-width: 40px;
+               height: 28px;
+               background: #fff;
+               border-radius: 1rem;
+               text-transform: uppercase;
+               color: green;
+               text-align: center;
+               padding: 0 10px;
+
+               .handle-label {
+                       display: inline-block;
+                       font-size: 18px;
+                       font-weight: 600;
+                       white-space: nowrap;
+                       -webkit-touch-callout: none;
+                       -webkit-user-select: none;
+                       -khtml-user-select: none;
+                       -moz-user-select: none;
+                       -ms-user-select: none;
+                       user-select: none;
+                       color: #495057;
+               }
+       }
+}