@expressivecss/expressive 0.3.0 → 0.5.0

package/src/sass/components/forms/_input-fields.scss

@@ -2,14 +2,17 @@
 
 // Text fields.
 //
-// Anatomy is the HTML. .field (or .input-field) is the container. The
-// <label> after the control is the floating label. A leading <i> is the
-// leading icon. <small> is supporting text. .outlined / .border is the
-// outlined variant; the default is filled.
+// Anatomy is the HTML. .field is the container. The <label> after the
+// control is the floating label. A leading <i> (or .prefix) is the
+// leading icon; .suffix (or a second / trailing <i>) is the trailing
+// icon. Icons come before the control in the documented markup, so
+// trailing cannot be selected with :last-child — that left .suffix
+// in flow above the well. <small> is supporting text. .outlined is
+// the outlined variant; the default is filled.
 //
 // Tokens follow https://m3.material.io/components/text-fields/specs
-//   filled     surface-variant well, 4dp top corners, 1dp/2dp bottom indicator
-//   outlined   1dp/2dp outline, 4dp corners
+//   filled     surface-variant well, 1rem corners, 1dp/2dp bottom indicator
+//   outlined   1dp/2dp outline, 1rem corners
 //   height     56dp
 //   label      body-large rest, body-small floated
 //   input      body-large / on-surface
@@ -34,21 +37,23 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
   font-family: $font-stack;
 }
 
-.field,
-.input-field {
-  --md-comp-filled-text-field-container-color: var(--md-sys-color-surface-variant);
+.field {
+  --md-comp-filled-text-field-container-color: var(--md-sys-color-surface-container-highest);
+  --md-comp-filled-text-field-container-shape: 1rem;
   --md-comp-filled-text-field-caret-color: var(--md-sys-color-primary);
   --input-color: var(--md-comp-filled-text-field-caret-color);
 
   position: relative;
   clear: both;
 
-  input:not([type="range"]),
+  // Checkboxes / radios inside a field (multi-select menu) are not text
+  // fields — do not give them the 56dp well.
+  input:not([type="range"], [type="checkbox"], [type="radio"], [type="file"]),
   textarea {
     box-sizing: border-box;
     padding: 20px 16px 8px;
     border: none;
-    border-radius: 4px 4px 0 0;
+    border-radius: var(--md-comp-filled-text-field-container-shape);
     border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
     background-color: var(--md-comp-filled-text-field-container-color);
     caret-color: var(--input-color);
@@ -67,16 +72,16 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
     }
 
     &:focus:not([readonly]) + label,
-    &:focus:not([readonly]) + span:not(.supporting-text, .character-counter) {
+    &:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .caret) {
       color: var(--input-color);
     }
 
     &:focus:not([readonly]) + label,
     &:not([placeholder=" "]) + label,
     &:not(:placeholder-shown) + label,
-    &:focus:not([readonly]) + span:not(.supporting-text, .character-counter),
-    &:not([placeholder=" "]) + span:not(.supporting-text, .character-counter),
-    &:not(:placeholder-shown) + span:not(.supporting-text, .character-counter) {
+    &:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .caret),
+    &:not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .caret),
+    &:not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .caret) {
       transform: scale(calc(12 / 16));
       top: 8px;
     }
@@ -119,7 +124,7 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
   }
 
   > label,
-  > span:not(.supporting-text, .character-counter, .file-path) {
+  > span:not(.supporting-text, .character-counter, .file-path, .caret) {
     color: var(--md-sys-color-on-surface-variant);
     user-select: none;
     position: absolute;
@@ -152,10 +157,11 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
     font-family: $font-stack;
   }
 
-  > i:first-child:not(.suffix),
-  > .prefix {
+  // Shared icon box. Position is set on the leading / trailing rules;
+  // a lone <i> matches several of the :is() items and must not pick
+  // a side here.
+  > i:is(.prefix, .suffix, :first-of-type, :last-of-type, :last-child) {
     position: absolute;
-    left: 12px;
     top: 16px;
     display: flex;
     align-items: center;
@@ -165,53 +171,44 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
     line-height: 24px;
     color: var(--md-sys-color-on-surface-variant);
     user-select: none;
+  }
+
+  > i:first-of-type:not(.suffix):not(:last-child),
+  > i.prefix {
+    left: 12px;
     pointer-events: none;
   }
 
-  > .suffix,
-  > i.suffix {
-    position: absolute;
+  > i.suffix,
+  > i:last-of-type:not(:first-of-type),
+  > i:last-child:not(:first-child):not(.prefix) {
     right: 12px;
-    top: 16px;
-    display: flex;
-    align-items: center;
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
-    color: var(--md-sys-color-on-surface-variant);
-    user-select: none;
   }
 
-  > i:first-child:not(.suffix) ~ input,
-  > i:first-child:not(.suffix) ~ textarea,
-  > .prefix ~ input,
-  > .prefix ~ textarea {
-    padding-left: 52px;
-  }
+  &:has(> i:first-of-type:not(.suffix):not(:last-child), > i.prefix) {
+    > :is(input, textarea) {
+      padding-left: 52px;
+    }
 
-  > .suffix ~ input,
-  > .suffix ~ textarea,
-  > i.suffix ~ input,
-  > i.suffix ~ textarea {
-    padding-right: 52px;
+    > :is(label, span:not(.supporting-text, .character-counter, .file-path, .caret)) {
+      left: 52px;
+    }
   }
 
-  > i:first-child:not(.suffix) ~ label,
-  > i:first-child:not(.suffix) ~ span:not(.supporting-text, .character-counter),
-  > .prefix ~ label {
-    left: 52px;
+  &:has(> i.suffix, > i:last-of-type:not(:first-of-type), > i:last-child:not(:first-child):not(.prefix)) {
+    > :is(input, textarea) {
+      padding-right: 52px;
+    }
   }
 
-  &.outlined,
-  &.border {
+  &.outlined {
     > input,
     > textarea {
       padding-top: 8px;
       padding-bottom: 8px;
       background-color: transparent;
       border: 1px solid var(--md-sys-color-outline);
-      border-radius: 4px;
+      border-radius: var(--md-comp-filled-text-field-container-shape);
 
       &:focus:not([readonly]) {
         border-width: 2px;
@@ -223,9 +220,9 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
       &:focus:not([readonly]) + label,
       &:not([placeholder=" "]) + label,
       &:not(:placeholder-shown) + label,
-      &:focus:not([readonly]) + span:not(.supporting-text, .character-counter),
-      &:not([placeholder=" "]) + span:not(.supporting-text, .character-counter),
-      &:not(:placeholder-shown) + span:not(.supporting-text, .character-counter) {
+      &:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .caret),
+      &:not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .caret),
+      &:not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .caret) {
         top: -8px;
         left: 16px;
         margin-left: -4px;
@@ -253,7 +250,7 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
 }
 
 .searchbar {
-  .prefix {
+  > i:first-child {
     position: absolute;
     padding-left: 1rem;
     top: 0;
@@ -296,8 +293,8 @@ textarea {
   li {
     .highlight { color: var(--md-sys-color-on-surface); }
     img {
-      height: $dropdown-item-height - 10;
-      width: $dropdown-item-height - 10;
+      height: $menu-item-height - 10;
+      width: $menu-item-height - 10;
       margin: 5px 15px;
     }
   }