added dark theme option. It ìs selected automagically based on system choiche of...

[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..5d20c58 100644 (file)
--- a/assets/sass/components/_form.scss
+++ b/assets/sass/components/_form.scss
@@ -69,7 +69,7 @@
        }\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
@@ -87,7 +87,7 @@
        select,\r
        textarea {\r
                @include vendor('appearance', 'none');\r
-               background: _palette(border-bg);\r
+               background: _palette_light(border-bg);\r
                border: none;\r
                border-radius: 0;\r
                color: inherit;\r
@@ -102,13 +102,13 @@
                }\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: 0 0 0 2px _palette_light(highlight);\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
@@ -117,8 +117,8 @@
                text-overflow: ellipsis;\r
 \r
                option {\r
-                       color: _palette(fg-bold);\r
-                       background: _palette(bg);\r
+                       color: _palette_light(fg-bold);\r
+                       background: _palette_light(bg);\r
                }\r
 \r
                &:focus {\r
@@ -158,7 +158,7 @@
 \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
@@ -167,7 +167,7 @@
                        position: relative;\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
@@ -184,16 +184,16 @@
 \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
                        }\r
                }\r
 \r
                &:focus + label {\r
                        &:before {\r
-                               box-shadow: 0 0 0 2px _palette(highlight);\r
+                               box-shadow: 0 0 0 2px _palette_light(highlight);\r
                        }\r
                }\r
        }\r
@@ -214,21 +214,21 @@
        }\r
 \r
        ::-webkit-input-placeholder {\r
-               color: _palette(fg-light) !important;\r
+               color: _palette_light(fg-light) !important;\r
                opacity: 1.0;\r
        }\r
 \r
        :-moz-placeholder {\r
-               color: _palette(fg-light) !important;\r
+               color: _palette_light(fg-light) !important;\r
                opacity: 1.0;\r
        }\r
 \r
        ::-moz-placeholder {\r
-               color: _palette(fg-light) !important;\r
+               color: _palette_light(fg-light) !important;\r
                opacity: 1.0;\r
        }\r
 \r
        :-ms-input-placeholder {\r
-               color: _palette(fg-light) !important;\r
+               color: _palette_light(fg-light) !important;\r
                opacity: 1.0;\r
        }
\ No newline at end of file