@@ -861,6 +861,21 @@ label[aria-disabled=true],
861861 opacity : var (--pico-form-element-disabled-opacity );
862862 pointer-events : none;
863863}
864+
865+ input ::placeholder ,
866+ input ::-webkit-input-placeholder ,
867+ textarea ::placeholder ,
868+ textarea ::-webkit-input-placeholder ,
869+ select : invalid {
870+ color : var (--pico-form-element-placeholder-color );
871+ opacity : 1 ;
872+ }
873+
874+ input : not ([type = checkbox ], [type = radio ]),
875+ select ,
876+ textarea {
877+ margin-bottom : var (--pico-spacing );
878+ }
864879label : has ([type = checkbox ], [type = radio ]){
865880 width : -moz-fit-content;
866881 width : fit-content;
@@ -2241,9 +2256,9 @@ pre{
22412256 font-size : 0.875em ;
22422257 font-family : var (--pico-font-family );
22432258 -ms-overflow-style : scrollbar;
2244- overflow : auto;
22452259 display : block;
22462260 margin-bottom : var (--pico-spacing );
2261+ overflow : auto;
22472262 overflow-x : auto;
22482263 border-radius : var (--pico-border-radius );
22492264 background : var (--pico-code-background-color );
@@ -2513,13 +2528,13 @@ pre code{
25132528}
25142529
25152530code {
2531+ display : inline-block;
2532+ padding : 0.375rem ;
25162533 border-radius : var (--pico-border-radius );
25172534 background : var (--pico-code-background-color );
25182535 color : var (--pico-code-color );
25192536 font-weight : var (--pico-font-weight );
25202537 line-height : initial;
2521- display : inline-block;
2522- padding : 0.375rem ;
25232538}
25242539
25252540pre > code {
@@ -2540,11 +2555,11 @@ img{
25402555input {
25412556 -ms-touch-action : manipulation;
25422557 margin : 0 ;
2558+ overflow : visible;
25432559 font-size : 1rem ;
25442560 line-height : var (--pico-line-height );
25452561 font-family : inherit;
25462562 letter-spacing : inherit;
2547- overflow : visible;
25482563}
25492564
25502565[type = checkbox ],
@@ -2656,73 +2671,27 @@ label[aria-disabled=true] input[disabled]{
26562671 opacity : 1 ;
26572672}
26582673
2659- [dir = rtl ] : where (input , select , textarea ): not ([type = checkbox ], [type = radio ]): is ([aria-invalid ], [aria-invalid = true ], [aria-invalid = false ]){
2660- background-position : center left 0.75rem ;
2661- }
2662-
26632674input ::placeholder ,
2664- input ::-webkit-input-placeholder ,
2665- textarea ::placeholder ,
2666- textarea ::-webkit-input-placeholder ,
2667- select : invalid {
2675+ input ::-webkit-input-placeholder {
26682676 color : var (--pico-form-element-placeholder-color );
26692677 opacity : 1 ;
26702678}
26712679
2672- input : not ([type = checkbox ], [type = radio ]),
2673- select ,
2674- textarea {
2680+ input : not ([type = checkbox ], [type = radio ]){
26752681 margin-bottom : var (--pico-spacing );
26762682}
2677-
2678- select ::-ms-expand {
2679- border : 0 ;
2680- background-color : transparent;
2681- }
2682- select : not ([multiple ], [size ]){
2683- padding-right : calc (var (--pico-form-element-spacing-horizontal ) + 1.5rem );
2684- padding-left : var (--pico-form-element-spacing-horizontal );
2685- padding-inline-start : var (--pico-form-element-spacing-horizontal );
2686- padding-inline-end : calc (var (--pico-form-element-spacing-horizontal ) + 1.5rem );
2687- background-image : var (--pico-icon-chevron );
2688- background-position : center right 0.75rem ;
2689- background-size : 1rem auto;
2690- background-repeat : no-repeat;
2691- }
2692- select [multiple ] option : checked {
2693- background : var (--pico-form-element-selected-background-color );
2694- color : var (--pico-form-element-color );
2695- }
2696-
2697- [dir = rtl ] select : not ([multiple ], [size ]){
2698- background-position : center left 0.75rem ;
2699- }
2700-
2701- textarea {
2702- display : block;
2703- resize : vertical;
2704- }
2705- textarea [aria-invalid ]{
2706- --pico-icon-height : calc (1rem * var (--pico-line-height ) + var (--pico-form-element-spacing-vertical ) * 2 + var (--pico-border-width ) * 2 );
2707- background-position : top right 0.75rem !important ;
2708- background-size : 1rem var (--pico-icon-height ) !important ;
2709- }
2710-
2711- label > : where (input , select , textarea ){
2712- margin-top : calc (var (--pico-spacing ) * 0.25 );
2713- }
27142683kbd {
2715- font-size : 0.875 em ;
2716- font-family : var ( --pico-font-family ) ;
2684+ display : inline-block ;
2685+ padding : 0.375 rem ;
27172686 border-radius : var (--pico-border-radius );
27182687 background : var (--pico-code-background-color );
2688+ background-color : var (--pico-code-kbd-background-color );
27192689 color : var (--pico-code-color );
2690+ color : var (--pico-code-kbd-color );
27202691 font-weight : var (--pico-font-weight );
2692+ font-size : 0.875em ;
27212693 line-height : initial;
2722- display : inline-block;
2723- padding : 0.375rem ;
2724- background-color : var (--pico-code-kbd-background-color );
2725- color : var (--pico-code-kbd-color );
2694+ font-family : var (--pico-font-family );
27262695 vertical-align : baseline;
27272696}
27282697label {
@@ -2748,13 +2717,13 @@ pre samp{
27482717}
27492718
27502719samp {
2720+ display : inline-block;
2721+ padding : 0.375rem ;
27512722 border-radius : var (--pico-border-radius );
27522723 background : var (--pico-code-background-color );
27532724 color : var (--pico-code-color );
27542725 font-weight : var (--pico-font-weight );
27552726 line-height : initial;
2756- display : inline-block;
2757- padding : 0.375rem ;
27582727}
27592728
27602729pre > samp {
@@ -2765,10 +2734,10 @@ pre > samp{
27652734}
27662735select {
27672736 -ms-touch-action : manipulation;
2768- width : 100% ;
27692737 -webkit-appearance : none;
27702738 -moz-appearance : none;
27712739 appearance : none;
2740+ width : 100% ;
27722741 padding : var (--pico-form-element-spacing-vertical ) var (--pico-form-element-spacing-horizontal );
27732742 --pico-background-color : var (--pico-form-element-background-color );
27742743 --pico-border-color : var (--pico-form-element-border-color );
@@ -2789,6 +2758,38 @@ select[disabled],
27892758 opacity : var (--pico-form-element-disabled-opacity );
27902759 pointer-events : none;
27912760}
2761+
2762+ select : invalid {
2763+ color : var (--pico-form-element-placeholder-color );
2764+ opacity : 1 ;
2765+ }
2766+
2767+ select {
2768+ margin-bottom : var (--pico-spacing );
2769+ }
2770+
2771+ select ::-ms-expand {
2772+ border : 0 ;
2773+ background-color : transparent;
2774+ }
2775+ select : not ([multiple ], [size ]){
2776+ padding-right : calc (var (--pico-form-element-spacing-horizontal ) + 1.5rem );
2777+ padding-left : var (--pico-form-element-spacing-horizontal );
2778+ padding-inline-start : var (--pico-form-element-spacing-horizontal );
2779+ padding-inline-end : calc (var (--pico-form-element-spacing-horizontal ) + 1.5rem );
2780+ background-image : var (--pico-icon-chevron );
2781+ background-position : center right 0.75rem ;
2782+ background-size : 1rem auto;
2783+ background-repeat : no-repeat;
2784+ }
2785+ select [multiple ] option : checked {
2786+ background : var (--pico-form-element-selected-background-color );
2787+ color : var (--pico-form-element-color );
2788+ }
2789+
2790+ [dir = rtl ] select : not ([multiple ], [size ]){
2791+ background-position : center left 0.75rem ;
2792+ }
27922793: where (input , select , textarea , fieldset , .grid ) + small {
27932794 display : block;
27942795 width : 100% ;
@@ -2819,10 +2820,10 @@ sup{
28192820}
28202821textarea {
28212822 -ms-touch-action : manipulation;
2822- width : 100% ;
28232823 -webkit-appearance : none;
28242824 -moz-appearance : none;
28252825 appearance : none;
2826+ width : 100% ;
28262827 padding : var (--pico-form-element-spacing-vertical ) var (--pico-form-element-spacing-horizontal );
28272828 --pico-background-color : var (--pico-form-element-background-color );
28282829 --pico-border-color : var (--pico-form-element-border-color );
@@ -2910,6 +2911,31 @@ textarea[disabled],
29102911: where (input , select , textarea )[aria-invalid = true ]: is (: active , : focus ): not ([type = checkbox ], [type = radio ]){
29112912 --pico-box-shadow : 0 0 0 var (--pico-outline-width ) var (--pico-form-element-invalid-focus-color ) !important ;
29122913}
2914+
2915+ [dir = rtl ] : where (input , select , textarea ): not ([type = checkbox ], [type = radio ]): is ([aria-invalid ], [aria-invalid = true ], [aria-invalid = false ]){
2916+ background-position : center left 0.75rem ;
2917+ }
2918+
2919+ textarea ::placeholder ,
2920+ textarea ::-webkit-input-placeholder {
2921+ color : var (--pico-form-element-placeholder-color );
2922+ opacity : 1 ;
2923+ }
2924+
2925+ textarea {
2926+ margin-bottom : var (--pico-spacing );
2927+ display : block;
2928+ resize : vertical;
2929+ }
2930+ textarea [aria-invalid ]{
2931+ --pico-icon-height : calc (1rem * var (--pico-line-height ) + var (--pico-form-element-spacing-vertical ) * 2 + var (--pico-border-width ) * 2 );
2932+ background-position : top right 0.75rem !important ;
2933+ background-size : 1rem var (--pico-icon-height ) !important ;
2934+ }
2935+
2936+ label > : where (input , select , textarea ){
2937+ margin-top : calc (var (--pico-spacing ) * 0.25 );
2938+ }
29132939area {
29142940 -ms-touch-action : manipulation;
29152941}
0 commit comments