🔧 Rename .form-field to .form-input

index.html

@@ -407,6 +407,17 @@
                     <input id="input-email" type="email" placeholder="Email"/>
                     <label for="input-disabled">Disabled</label>
                     <input id="input-disabled" type="text" placeholder="Disabled" disabled/>
+                    <label for="input-select">Select</label>
+                    <select id="input-select">
+                        <option>A</option>
+                        <option>B</option>
+                        <option>C</option>
+                        <optgroup label="D">
+                            <option>D.1</option>
+                            <option>D.2</option>
+                            <option>D.3</option>
+                        </optgroup>
+                    </select>
                     <div class="form-buttons">
                         <input id="input-submit" type="submit" value="Submit"/>
                     </div>

src/rules/skeleton.less

@@ -127,7 +127,7 @@
         justify-self: end;
     }
 
-    @{form-field} {
+    @{form-input} {
         grid-column: 2;
         justify-self: stretch;
         width: 100%;
@@ -336,6 +336,10 @@
         }
     }
 
+    &@{input-select} {
+
+    }
+
     // --- Element status ---
 
     @{status-hoverable} {

src/targets/paper.module.css

@@ -224,7 +224,7 @@
   grid-column: 1;
   justify-self: end;
 }
-.bluelib .form-field {
+.bluelib .form-input {
   grid-column: 2;
   justify-self: stretch;
   width: 100%;

src/targets/paper.root.css

@@ -860,14 +860,22 @@ body input[type="time"],
 body input[type="url"],
 .base-skeleton input[type="week"],
 body input[type="week"],
-.base-skeleton .form-field,
-body .form-field {
+.base-skeleton form select,
+body form select,
+.base-skeleton .input-select,
+body .input-select,
+.base-skeleton .form-input,
+body .form-input {
   grid-column: 2;
   justify-self: stretch;
   width: 100%;
 }
-.base-skeleton form input[type="submit"],
-body form input[type="submit"],
+.base-skeleton form .button,
+body form .button,
+.base-skeleton button,
+body button,
+.base-skeleton input[type="submit"],
+body input[type="submit"],
 .base-skeleton form button,
 body form button,
 .base-skeleton .form-submit,

src/targets/royalblue.module.css

@@ -224,7 +224,7 @@
   grid-column: 1;
   justify-self: end;
 }
-.bluelib .form-field {
+.bluelib .form-input {
   grid-column: 2;
   justify-self: stretch;
   width: 100%;

src/targets/royalblue.root.css

@@ -860,14 +860,22 @@ body input[type="time"],
 body input[type="url"],
 .base-skeleton input[type="week"],
 body input[type="week"],
-.base-skeleton .form-field,
-body .form-field {
+.base-skeleton form select,
+body form select,
+.base-skeleton .input-select,
+body .input-select,
+.base-skeleton .form-input,
+body .form-input {
   grid-column: 2;
   justify-self: stretch;
   width: 100%;
 }
-.base-skeleton form input[type="submit"],
-body form input[type="submit"],
+.base-skeleton form .button,
+body form .button,
+.base-skeleton button,
+body button,
+.base-skeleton input[type="submit"],
+body input[type="submit"],
 .base-skeleton form button,
 body form button,
 .base-skeleton .form-submit,

src/vars/module.less

@@ -14,7 +14,7 @@
 @image-limited: ~".image-limited";
 @form: ~".form";
 @form-label: ~".form-label";
-@form-field: ~".form-field";
+@form-input: ~".form-input";
 @form-submit: ~'.form-submit';
 @form-buttons: ~'.form-buttons';
 @button: ~'.button';
@@ -23,6 +23,7 @@
 @button-toggle-off: ~'.button-toggle-off';
 @button-toggle-on: ~'.button-toggle-on';
 @input-field: ~'.input-field';
+@input-select: ~'.input-select';
 @spoiler: ~".spoiler";
 @element-title: ~".element-title";
 @element-paragraph: ~".element-paragraph";

src/vars/root.less

@@ -14,8 +14,8 @@
 @image-limited: ~".image-limited";
 @form: ~"form, .form";
 @form-label: ~"form label, .form-label";
-@form-field: ~"form @{input-field}, .form-field";
-@form-submit: ~'form input[type="submit"], form button, .form-submit';
+@form-input: ~"form @{input-field}, form @{input-select}, .form-input";
+@form-submit: ~'form @{button}, form button, .form-submit';
 @form-buttons: ~'.form-buttons';
 @button: ~'.button, button, input[type="submit"]';
 @button-fill-width: ~'.button-fill-width';
@@ -23,6 +23,7 @@
 @button-toggle-off: ~'.button-toggle-off';
 @button-toggle-on: ~'.button-toggle-on';
 @input-field: ~'.input-field, input[type="color"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="file"], input[type="image"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]';
+@input-select: ~'select, .input-select';
 @spoiler: ~".spoiler";
 @element-title: ~".element-title, h1, h2, h3, h4, h5, h6";
 @element-paragraph: ~".element-paragraph, p";