@itwin/itwinui-css 0.45.0 → 0.46.0

package/scss/inputs/input-with-icon.scss

@@ -0,0 +1,36 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import '../style/index';
+
+// Mixin to have inputs combined with icon (eg. select)
+@mixin iui-input-with-icon {
+  display: grid;
+  align-items: center;
+  cursor: pointer;
+
+  > :first-child {
+    grid-area: 1 / -1;
+    padding-right: $iui-icons-default + $iui-l;
+  }
+
+  &:focus-within {
+    > :first-child {
+      // --_focus-color can be used to control this from outside
+      outline: 2px solid var(--_focus-color, var(--iui-color-foreground-primary));
+      outline-offset: -2px;
+    }
+  }
+
+  &:hover {
+    > :first-child {
+      // --_hover-color can be used to control this from outside
+      border-color: var(--_hover-color, rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)));
+    }
+  }
+}
+
+@mixin iui-end-icon {
+  @include iui-input-icon-inline;
+  display: flex;
+  grid-area: 1 / -1;
+}

package/scss/inputs/input.scss

@@ -63,6 +63,7 @@
       border-color: t(iui-color-background-disabled);
     }
     cursor: not-allowed;
+    --_hover-color: var(--iui-color-background-disabled);
   }
 }
 

package/scss/inputs/labeled-inputs.scss

@@ -44,9 +44,9 @@
   }
 
   .iui-input,
+  .iui-input-with-icon,
   .iui-textarea,
-  .iui-input-group,
-  .iui-select {
+  .iui-input-group {
     grid-area: inputs;
     // stylelint-disable -- fix position in IE
     -ms-grid-row: 2;
@@ -84,9 +84,9 @@
     }
 
     .iui-input,
+    .iui-input-with-icon,
     .iui-textarea,
-    .iui-input-group,
-    .iui-select {
+    .iui-input-group {
       // stylelint-disable -- fix position in IE
       -ms-grid-row: 1;
       -ms-grid-column: 2;
@@ -220,7 +220,7 @@
   }
 }
 
-/// Icon to be shown near an input.
+/// Icon to be shown near a message.
 @mixin iui-input-icon {
   display: flex;
   grid-area: icon;
@@ -245,9 +245,14 @@
 
   grid-area: inputs;
   justify-self: end;
-  margin: 0 $iui-sm 0 0;
+  margin: 0 ($iui-sm + $iui-xxs) 0 0;
   position: relative;
 
+  svg {
+    width: $iui-icons-default;
+    height: $iui-icons-default;
+  }
+
   &.iui-button {
     height: 100%;
     width: fit-content;
@@ -259,15 +264,13 @@
   &.iui-actionable {
     align-items: center;
     height: 90%;
-    margin-right: 1px;
+    margin-right: $iui-xxs;
     padding: 0 $iui-sm;
     cursor: pointer;
 
     @include iui-ripple(var(--iui-color-background-1), var(--iui-color-background-2));
 
     svg {
-      width: $iui-icons-default;
-      height: $iui-icons-default;
       @include themed {
         fill: t(iui-icons-color);
       }
@@ -278,6 +281,16 @@
       transform: rotate(180deg); // transform for arrow icon (e.g. svg-caret-down), used in combobox
     }
   }
+
+  &.iui-disabled {
+    cursor: not-allowed;
+
+    svg {
+      @include themed {
+        fill: t(iui-icons-color-actionable-disabled);
+      }
+    }
+  }
 }
 
 /// Mixin for applying status colors to input container.
@@ -319,9 +332,8 @@
     }
   }
 
-  > .iui-input,
-  > .iui-textarea,
-  > .iui-select > .iui-select-button {
+  .iui-input,
+  .iui-textarea {
     padding-bottom: $iui-component-padding-vertical - 1px;
 
     &.iui-small {
@@ -344,4 +356,25 @@
       }
     }
   }
+
+  .iui-input-with-icon {
+    --_hover-color: var(--iui-color-foreground-#{$status});
+    --_focus-color: var(--iui-color-foreground-#{$status});
+  }
+
+  .iui-select-button {
+    border-bottom: transparent;
+
+    &::after {
+      content: '';
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: $iui-xxs;
+      @include themed {
+        background-color: t(iui-color-foreground-#{$status});
+      }
+    }
+  }
 }

package/scss/inputs/select.scss

@@ -3,113 +3,64 @@
 @import '../style/index';
 @import '../menu/index';
 
-$iui-after-border: 5px solid;
+@mixin iui-select-button {
+  @include iui-focus($offset: -2px, $thickness: 2px);
+  width: 100%;
+  margin: 0;
+  border-radius: $iui-border-radius;
+  box-sizing: border-box;
+  padding: $iui-component-padding-vertical $iui-component-padding-horizontal;
+  min-height: $iui-component-height;
+  transition: border-color $iui-speed-fast ease-out;
 
-@mixin iui-select {
-  @include iui-reset;
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  user-select: none;
   position: relative;
-  width: 100%;
-  min-width: 0;
-
-  > .iui-select-button {
-    @include iui-input;
-    @include iui-focus($offset: -2px, $thickness: 2px);
-    display: flex;
-    align-items: center;
-    min-height: $iui-component-height;
-    padding-right: $iui-xl;
-    user-select: none;
-    position: relative;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: border-color $iui-speed-fast ease-out;
-    }
-
-    > .iui-icon {
-      @include iui-menu-icon;
-    }
-
-    > .iui-content {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    &.iui-placeholder {
-      @include themed {
-        color: t(iui-text-color-placeholder);
-      }
-    }
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      right: $iui-m;
-      transform: translateY(-50%);
-      width: 0;
-      height: 0;
-      border-left: $iui-after-border transparent;
-      border-right: $iui-after-border transparent;
-      @include themed {
-        border-top: $iui-after-border t(iui-icons-color-actionable);
-      }
-    }
-
-    &:hover {
-      @include themed {
-        border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
-      }
-
-      &::after {
-        border-bottom: none;
-        @include themed {
-          border-top: $iui-after-border t(iui-icons-color-actionable-hover);
-        }
-      }
-    }
+  overflow: hidden;
 
-    &.iui-active {
-      &::after {
-        border-top: none;
-        @include themed {
-          border-bottom: $iui-after-border t(iui-icons-color-actionable);
-        }
-      }
-
-      &:hover::after {
-        @include themed {
-          border-bottom: $iui-after-border t(iui-icons-color-actionable-hover);
-        }
-      }
-    }
-
-    &.iui-disabled {
-      cursor: not-allowed;
-      @include themed {
-        background-color: t(iui-color-background-disabled);
-        border-color: t(iui-color-background-disabled);
-      }
-
-      &::after {
-        @include themed {
-          border-top: $iui-after-border t(iui-icons-color-actionable-disabled);
-        }
-      }
-    }
+  @include themed {
+    color: t(iui-text-color);
+    background-color: t(iui-color-background-1);
+    border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
   }
 
-  &.iui-small .iui-select-button {
+  &.iui-small {
     padding-top: $iui-component-padding-vertical-small;
     padding-bottom: $iui-component-padding-vertical-small;
     min-height: $iui-component-height-small;
   }
 
-  &.iui-large .iui-select-button {
+  &.iui-large {
     padding-top: $iui-component-padding-vertical-large;
     padding-bottom: $iui-component-padding-vertical-large;
     min-height: $iui-component-height-large;
     font-size: $iui-font-size-leading;
   }
+
+  &.iui-disabled {
+    @include themed {
+      background-color: t(iui-color-background-disabled);
+      border-color: t(iui-color-background-disabled);
+    }
+    --_hover-color: var(--iui-color-background-disabled);
+    cursor: not-allowed;
+  }
+
+  .iui-icon {
+    @include iui-menu-icon;
+    fill: currentColor;
+  }
+
+  .iui-content {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &.iui-placeholder {
+    @include themed {
+      color: t(iui-text-color-placeholder);
+    }
+  }
 }