fixed higlighting of form items when focused

[theme-danix.xyz.git] / assets / sass / components / _form.scss

diff --git a/assets/sass/components/_form.scss b/assets/sass/components/_form.scss
index fed297d..5bfe29f 100644 (file)
--- a/assets/sass/components/_form.scss
+++ b/assets/sass/components/_form.scss
@@ -69,13 +69,16 @@
        }\r
 \r
        label {\r
-               color: _palette(fg-bold);\r
+               color: _palette_light(fg-bold);\r
                display: block;\r
                font-size: 0.8em;\r
                font-weight: _font(weight-bold);\r
                letter-spacing: _font(letter-spacing-alt);\r
                margin: 0 0 (_size(element-margin) * 0.5) 0;\r
                text-transform: uppercase;\r
+               @media screen and (prefers-color-scheme: dark) {\r
+                       color: _palette_dark(fg-bold);\r
+               }\r
        }\r
 \r
        input[type="text"],\r
@@ -87,8 +90,8 @@
        select,\r
        textarea {\r
                @include vendor('appearance', 'none');\r
-               background: _palette(border-bg);\r
-               border: none;\r
+               background: _palette_light(border-bg);\r
+               border: 1px solid _palette_light(fg-light);\r
                border-radius: 0;\r
                color: inherit;\r
                display: block;\r
@@ -96,29 +99,44 @@
                padding: 0 1em;\r
                text-decoration: none;\r
                width: 100%;\r
+               @media screen and (prefers-color-scheme: dark) {\r
+                       background: _palette_dark(border);\r
+                       border: 1px solid _palette_dark(fg-light);\r
+               }\r
 \r
                &:invalid {\r
                        box-shadow: none;\r
                }\r
 \r
                &:focus {\r
-                       border-color: _palette(highlight);\r
-                       box-shadow: 0 0 0 2px _palette(highlight);\r
+                       border-color: _palette_light(highlight);\r
+                       box-shadow: inset 0 0 0 2px _palette_light(highlight);\r
+                       @media screen and (prefers-color-scheme: dark) {\r
+                               border-color: _palette_dark(highlight);\r
+                               box-shadow: inset 0 0 0 2px _palette_dark(highlight);\r
+                       }\r
                }\r
        }\r
 \r
        select {\r
-               background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");\r
+               background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette_light(border)}' /></svg>");\r
                background-size: 1.25rem;\r
                background-repeat: no-repeat;\r
                background-position: calc(100% - 1rem) center;\r
                height: _size(element-height);\r
                padding-right: _size(element-height);\r
                text-overflow: ellipsis;\r
+               @media screen and (prefers-color-scheme: dark) {\r
+                       background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette_dark(border)}' /></svg>");\r
+               }\r
 \r
                option {\r
-                       color: _palette(fg-bold);\r
-                       background: _palette(bg);\r
+                       color: _palette_light(fg-bold);\r
+                       background: _palette_light(bg);\r
+                       @media screen and (prefers-color-scheme: dark) {\r
+                               color: _palette_dark(fg-bold);\r
+                               background: _palette_dark(bg);\r
+                       }\r
                }\r
 \r
                &:focus {\r
@@ -158,16 +176,19 @@
 \r
                & + label {\r
                        @include icon(false, solid);\r
-                       color: _palette(fg);\r
+                       color: _palette_light(fg);\r
                        cursor: pointer;\r
                        display: inline-block;\r
                        font-weight: _font(weight);\r
                        padding-left: (_size(element-height) * 0.6) + 1em;\r
                        padding-right: 0.75em;\r
                        position: relative;\r
+                       @media screen and (prefers-color-scheme: dark) {\r
+                               color: _palette_dark(fg);\r
+                       }\r
 \r
                        &:before {\r
-                               background: _palette(border-bg);\r
+                               background: _palette_light(border-bg);\r
                                content: '';\r
                                display: inline-block;\r
                                font-size: 0.8em;\r
@@ -179,21 +200,32 @@
                                text-align: center;\r
                                top: 0;\r
                                width: (_size(element-height) * 0.75);\r
+                               @media screen and (prefers-color-scheme: dark) {\r
+                                       background: _palette_dark(border-bg);\r
+                               }\r
                        }\r
                }\r
 \r
                &:checked + label {\r
                        &:before {\r
-                               background: _palette(fg-bold);\r
-                               border-color: _palette(highlight);\r
+                               background: _palette_light(fg-bold);\r
+                               border-color: _palette_light(highlight);\r
                                content: '\f00c';\r
-                               color: _palette(bg);\r
+                               color: _palette_light(bg);\r
+                               @media screen and (prefers-color-scheme: dark) {\r
+                                       background: _palette_dark(fg-bold);\r
+                                       border-color: _palette_dark(highlight);\r
+                                       color: _palette_dark(bg);\r
+                               }\r
                        }\r
                }\r
 \r
                &:focus + label {\r
                        &:before {\r
-                               box-shadow: 0 0 0 2px _palette(highlight);\r
+                               box-shadow: inset 0 0 0 2px _palette_light(highlight);\r
+                               @media screen and (prefers-color-scheme: dark) {\r
+                                       box-shadow: inset 0 0 0 2px _palette_dark(highlight);\r
+                               }\r
                        }\r
                }\r
        }\r
@@ -214,21 +246,33 @@
        }\r
 \r
        ::-webkit-input-placeholder {\r
-               color: _palette(fg-light) !important;\r
+               color: _palette_light(fg-light) !important;\r
                opacity: 1.0;\r
+               @media screen and (prefers-color-scheme: dark) {\r
+                       color: _palette_dark(fg-light) !important;\r
+               }\r
        }\r
 \r
        :-moz-placeholder {\r
-               color: _palette(fg-light) !important;\r
+               color: _palette_light(fg-light) !important;\r
                opacity: 1.0;\r
+               @media screen and (prefers-color-scheme: dark) {\r
+                       color: _palette_dark(fg-light) !important;\r
+               }\r
        }\r
 \r
        ::-moz-placeholder {\r
-               color: _palette(fg-light) !important;\r
+               color: _palette_light(fg-light) !important;\r
                opacity: 1.0;\r
+               @media screen and (prefers-color-scheme: dark) {\r
+                       color: _palette_dark(fg-light) !important;\r
+               }\r
        }\r
 \r
        :-ms-input-placeholder {\r
-               color: _palette(fg-light) !important;\r
+               color: _palette_light(fg-light) !important;\r
                opacity: 1.0;\r
+               @media screen and (prefers-color-scheme: dark) {\r
+                       color: _palette_dark(fg-light) !important;\r
+               }\r
        }
\ No newline at end of file