@itwin/itwinui-css 0.63.0 → 1.0.0-dev.1

package/css/information-panel.css

@@ -13,11 +13,8 @@
   visibility:hidden;
   display:flex;
   flex-direction:column;
-  box-sizing:border-box;
   max-width:100%;
   max-height:100%;
-  z-index:2;
-  background-color:white;
   background-color:var(--iui-color-background-1);
 }
 @media (prefers-reduced-motion: no-preference){
@@ -31,26 +28,22 @@
   touch-action:none;
 }
 .iui-information-panel > .iui-resizer > .iui-resizer-bar{
-  background-color:#c7ccd1;
   background-color:var(--iui-color-background-border);
 }
 .iui-information-panel > .iui-resizer:hover > .iui-resizer-bar{
-  background-color:#008ae0;
   background-color:var(--iui-color-foreground-primary);
 }
 .iui-information-panel .iui-information-header,
 .iui-information-panel .iui-information-body{
   padding-left:12px;
   padding-right:12px;
-  box-sizing:border-box;
 }
 .iui-information-panel .iui-information-header{
-  height:55px;
+  height:60px;
   flex-shrink:0;
   display:flex;
   align-items:center;
   justify-content:space-between;
-  background-color:#edeff2;
   background-color:var(--iui-color-background-3);
 }
 .iui-information-panel .iui-information-header .iui-information-header-label{
@@ -68,27 +61,30 @@
 }
 .iui-information-panel .iui-information-header .iui-information-header-label svg{
   display:flex;
+  flex-shrink:0;
   width:24px;
   height:24px;
+  fill:var(--iui-icon-color);
   margin-right:8px;
-  flex-shrink:0;
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
+}
+@media (forced-colors: active){
+  .iui-information-panel .iui-information-header .iui-information-header-label svg{
+    fill:CanvasText;
+  }
 }
 .iui-information-panel .iui-information-header .iui-information-header-actions{
   flex-shrink:0;
   margin-left:8px;
 }
 .iui-information-panel .iui-information-body{
-  padding-top:11px;
-  padding-bottom:11px;
+  padding-top:12px;
+  padding-bottom:12px;
   height:100%;
   overflow-x:hidden;
   overflow-y:auto;
   overflow-y:overlay;
 }
 .iui-information-panel .iui-information-body > hr{
-  border-color:#c7ccd1;
   border-color:var(--iui-color-background-border);
 }
 .iui-information-panel.iui-right{
@@ -172,28 +168,23 @@
 }
 
 .iui-information-body-content{
-  display:-ms-grid;
   display:grid;
 }
 .iui-information-body-content .iui-input-label{
   font-weight:400;
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 .iui-information-body-content:not(.iui-inline) > *:nth-child(even):not(:last-child){
-  margin-bottom:11px;
+  margin-bottom:12px;
 }
 .iui-information-body-content.iui-inline{
-  row-gap:11px;
-  -ms-grid-columns:auto 1fr;
+  row-gap:12px;
   grid-template-columns:auto 1fr;
   align-items:center;
 }
 .iui-information-body-content.iui-inline .iui-input-label{
   margin:0 16px 0 0;
-  -ms-grid-column-span:1;
-  -ms-grid-column-align:end;
-      justify-self:end;
+  justify-self:end;
   text-align:end;
 }
 .iui-information-body-content.iui-inline .iui-input-label.iui-required{

package/css/input.css

@@ -0,0 +1,170 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-input{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  width:100%;
+  font-family:inherit;
+  font-size:14px;
+  font-weight:400;
+  line-height:24px;
+  border-radius:4px;
+  -webkit-appearance:none;
+     -moz-appearance:none;
+          appearance:none;
+  padding:7px 12px;
+  min-height:40px;
+  color:var(--iui-text-color);
+  background-color:var(--iui-color-background-1);
+  border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+}
+.iui-input:focus-visible{
+  outline:2px solid var(--iui-color-foreground-primary);
+  outline-offset:-2px;
+}
+@supports not selector(*:focus-visible){
+  .iui-input:focus{
+    outline:2px solid var(--iui-color-foreground-primary);
+    outline-offset:-2px;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-input{
+    transition:border-color 0.2s ease-out;
+  }
+}
+.iui-input.iui-small{
+  padding-top:1px;
+  padding-bottom:1px;
+  min-height:28px;
+}
+.iui-input.iui-large{
+  padding-top:13px;
+  padding-bottom:13px;
+  min-height:52px;
+  font-size:16px;
+}
+.iui-input::-moz-placeholder{
+  -moz-user-select:none;
+       user-select:none;
+  color:var(--iui-text-color-placeholder);
+}
+.iui-input:-ms-input-placeholder{
+  -ms-user-select:none;
+      user-select:none;
+  color:var(--iui-text-color-placeholder);
+}
+.iui-input::placeholder{
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  color:var(--iui-text-color-placeholder);
+}
+.iui-input:-webkit-autofill{
+  border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+  color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+  background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
+}
+.iui-input:autofill{
+  border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+  color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+  background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
+}
+.iui-input:hover{
+  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-input:hover{
+    transition:border-color 0.2s ease-out;
+  }
+}
+.iui-input[disabled]{
+  background-color:var(--iui-color-background-disabled);
+  border-color:var(--iui-color-background-disabled);
+  cursor:not-allowed;
+  --_hover-color:var(--iui-color-background-disabled);
+}
+:where(textarea.iui-input){
+  resize:vertical;
+}
+:where(textarea.iui-input)[disabled], :where(textarea.iui-input)[readonly]{
+  resize:none;
+}
+
+.iui-input-with-icon.iui-input-with-icon{
+  display:grid;
+  align-items:center;
+  cursor:pointer;
+}
+.iui-input-with-icon.iui-input-with-icon > :first-child{
+  grid-area:1/-1;
+  padding-right:40px;
+}
+.iui-input-with-icon.iui-input-with-icon:focus-within > :first-child{
+  outline:2px solid var(--_focus-color, var(--iui-color-foreground-primary));
+  outline-offset:-2px;
+}
+.iui-input-with-icon.iui-input-with-icon:hover > :first-child{
+  border-color:var(--_hover-color, rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)));
+}
+
+.iui-end-icon{
+  grid-area:inputs;
+  justify-self:end;
+  margin:0 14px 0 0;
+  position:relative;
+  display:flex;
+  grid-area:1/-1;
+}
+.iui-end-icon svg{
+  display:flex;
+  flex-shrink:0;
+  width:16px;
+  height:16px;
+}
+.iui-end-icon.iui-button{
+  height:100%;
+  width:-webkit-fit-content;
+  width:-moz-fit-content;
+  width:fit-content;
+  margin-right:0;
+  border-top-left-radius:0;
+  border-bottom-left-radius:0;
+  border-top-right-radius:inherit;
+  border-bottom-right-radius:inherit;
+}
+.iui-end-icon.iui-actionable{
+  align-items:center;
+  height:90%;
+  margin-right:2px;
+  padding:0 12px;
+  cursor:pointer;
+  background-position:center;
+  transition:background 0.4s ease-out;
+}
+.iui-end-icon.iui-actionable:hover{
+  background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%;
+}
+.iui-end-icon.iui-actionable:active{
+  background-color:var(--iui-color-background-2);
+  background-size:100%;
+  transition:background 0s;
+}
+.iui-end-icon.iui-actionable svg{
+  fill:var(--iui-icon-color-actionable);
+  transition:transform 0.2s ease-out;
+}
+.iui-end-icon.iui-actionable.iui-open svg{
+  transform:rotate(180deg);
+}
+.iui-end-icon.iui-disabled{
+  cursor:not-allowed;
+}
+.iui-end-icon.iui-disabled svg{
+  fill:var(--iui-icon-color-actionable-disabled);
+}

package/css/keyboard.css

@@ -11,7 +11,7 @@
   display:inline-block;
   font-size:12px;
   font-weight:600;
-  font-family:ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
+  font-family:"Noto Sans Mono", ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
   line-height:1;
   padding:4px 8px;
   white-space:nowrap;
@@ -21,9 +21,6 @@
       -ms-user-select:none;
           user-select:none;
   cursor:default;
-  background-color:white;
-  border:1px solid #c7ccd1;
-  box-shadow:0 1px 1px #c7ccd1, 0 1px 0 0 rgba(255, 255, 255, 0.2) inset;
   background-color:var(--iui-color-background-1);
   border:1px solid var(--iui-color-background-5);
   box-shadow:0 1px 1px var(--iui-color-background-5), 0 1px 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
@@ -34,6 +31,5 @@
   }
 }
 .iui-keyboard:hover{
-  box-shadow:0 0 0 #c7ccd1, 0 0 0 0 rgba(255, 255, 255, 0.2) inset;
   box-shadow:0 0 0 var(--iui-color-background-5), 0 0 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
 }

package/css/location-marker.css

@@ -13,6 +13,8 @@
       -ms-user-select:none;
           user-select:none;
   position:relative;
+  display:flex;
+  flex-shrink:0;
   width:24px;
   height:24px;
   cursor:pointer;
@@ -21,7 +23,6 @@
   filter:drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25));
 }
 .iui-location-marker-default > .iui-location-marker-default-pin > .iui-location-marker-default-pin-dot{
-  fill:white;
   fill:var(--iui-color-foreground-accessory);
 }
 
@@ -45,11 +46,7 @@
   font-size:16px;
   padding:3px 8px;
   filter:drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25));
-  box-sizing:border-box;
   position:relative;
-  border:solid 1px white;
-  background-color:white;
-  color:white;
   border:solid 1px var(--iui-color-foreground-accessory);
   background-color:var(--iui-color-foreground-accessory);
   color:var(--iui-color-foreground-accessory);
@@ -66,18 +63,18 @@
   margin:auto;
   border-width:4px;
   border-style:solid;
-  border-color:white transparent transparent transparent;
   border-color:var(--iui-color-foreground-accessory) transparent transparent transparent;
 }
 .iui-location-marker-data-rich > .iui-location-marker-data-rich-body > .iui-location-marker-data-rich-icon{
-  display:inline-block;
+  display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
+  display:inline-block;
   font-size:inherit;
   vertical-align:-2px;
 }
 .iui-location-marker-data-rich > .iui-location-marker-data-rich-body > .iui-location-marker-data-rich-icon.iui-location-marker-data-rich-icon-monochrome{
-  fill:white;
   fill:var(--iui-color-foreground-accessory);
 }
 
@@ -92,12 +89,13 @@
       -ms-user-select:none;
           user-select:none;
   position:relative;
-  position:relative;
+  display:flex;
+  flex-shrink:0;
   width:24px;
   height:24px;
+  position:relative;
   border-radius:50%;
   cursor:default;
-  background:radial-gradient(circle at center, rgba(0, 138, 224, 0), rgba(0, 138, 224, 0.2));
   background:radial-gradient(circle at center, rgba(var(--iui-color-foreground-primary-rgb), 0), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5)));
 }
 .iui-location-marker-me > .iui-location-marker-me-dot{
@@ -107,9 +105,6 @@
   top:6px;
   left:6px;
   border-radius:50%;
-  box-sizing:border-box;
-  border:1px solid white;
-  background-color:#008ae0;
   border:1px solid var(--iui-color-foreground-accessory);
   background-color:var(--iui-color-background-primary);
 }

package/css/menu.css

@@ -9,7 +9,6 @@
   background-color:var(--iui-surface-background-color);
   border-radius:var(--iui-surface-border-radius);
   box-shadow:var(--iui-surface-elevation);
-  box-sizing:border-box;
   color:var(--iui-text-color);
   margin:0;
   padding:0;
@@ -23,6 +22,7 @@
   width:100%;
   margin:0;
   padding:0;
+  max-height:var(--iui-menu-max-height);
 }
 @media (forced-colors: active){
   .iui-menu{
@@ -33,14 +33,17 @@
   margin:0 4px;
 }
 .iui-menu div.iui-header-menu-icon{
-  margin:0;
+  display:flex;
+  flex-shrink:0;
   width:24px;
   height:24px;
+  margin:0;
   border-radius:4px;
 }
 .iui-menu.iui-scroll{
   overflow-y:auto;
   overflow-y:overlay;
+  --iui-menu-max-height:315px;
 }
 
 .iui-menu-item{
@@ -48,10 +51,10 @@
   align-items:center;
   font-size:14px;
   padding:0 13px;
-  height:38px;
+  height:40px;
   cursor:pointer;
-  box-sizing:border-box;
   line-height:normal;
+  color:var(--iui-color-foreground-2);
 }
 .iui-menu-item + .iui-menu-item{
   margin-top:-1px;
@@ -73,43 +76,36 @@
 .iui-menu-item .iui-menu-description{
   display:none;
   font-size:12px;
-  opacity:0.6;
   opacity:var(--iui-opacity-3);
 }
 .iui-menu-item > .iui-icon{
+  display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
   flex:0 0 auto;
-  fill:rgba(0, 0, 0, 0.8);
-  fill:var(--iui-icons-color-actionable);
+  fill:var(--iui-icon-color-actionable);
 }
 .iui-menu-item > .iui-icon + .iui-content{
   margin-left:8px;
 }
 .iui-menu-item:hover{
-  background-color:rgba(0, 138, 224, 0.1);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
 .iui-menu-item:focus, .iui-menu-item.iui-focused{
   outline:thin solid var(--iui-color-foreground-primary);
   outline-offset:-1px;
-  outline:thin solid var(--iui-color-foreground-primary);
-  outline-offset:-1px;
 }
 .iui-menu-item:focus:not(:focus-visible){
   outline:none;
 }
 .iui-menu-item.iui-large{
-  height:49px;
+  height:52px;
 }
 .iui-menu-item.iui-large .iui-menu-description{
   display:block;
 }
 .iui-menu-item.iui-active, .iui-menu-item.iui-active:hover{
-  background-color:rgba(0, 138, 224, 0.1);
-  color:#008ae0;
-  outline:thin solid var(--iui-color-foreground-primary);
-  outline-offset:-1px;
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
   color:var(--iui-color-foreground-primary);
   outline:thin solid var(--iui-color-foreground-primary);
@@ -119,8 +115,7 @@
   opacity:1;
 }
 .iui-menu-item.iui-active > .iui-icon{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
+  fill:var(--iui-icon-color-primary);
 }
 .iui-menu-item.iui-active:focus, .iui-menu-item.iui-active.iui-focused{
   outline-width:2px;
@@ -133,14 +128,11 @@
 .iui-menu-item.iui-disabled, .iui-menu-item.iui-disabled:hover{
   cursor:not-allowed;
   outline:none;
-  background-color:white;
-  color:rgba(0, 0, 0, 0.2);
   background-color:var(--iui-color-background-1);
   color:var(--iui-text-color-placeholder);
 }
 .iui-menu-item.iui-disabled > .iui-icon, .iui-menu-item.iui-disabled:hover > .iui-icon{
-  fill:rgba(0, 0, 0, 0.2);
-  fill:var(--iui-icons-color-actionable-disabled);
+  fill:var(--iui-icon-color-actionable-disabled);
 }
 .iui-menu-item-skeleton{
   --iui-menu-item-content-skeleton-max-width:30%;
@@ -165,13 +157,12 @@
 }
 
 .iui-menu-content{
-  padding:11px 13px;
+  padding:12px 13px;
 }
 
 .iui-menu-divider{
   height:1px;
   width:calc(100% - 24px);
   margin:1px auto;
-  background-color:#c7ccd1;
   background-color:var(--iui-color-background-border);
 }

package/css/non-ideal-state.css

@@ -21,7 +21,7 @@
 .iui-non-ideal-state > .iui-non-ideal-state-illustration{
   max-width:220px;
   max-height:242px;
-  margin-bottom:22px;
+  margin-bottom:24px;
   text-align:center;
   display:flex;
   justify-content:center;
@@ -34,9 +34,9 @@
   vertical-align:baseline;
   font-size:32px;
   font-weight:300;
-  line-height:44px;
+  line-height:48px;
   padding:0;
-  margin:0 0 22px;
+  margin:0 0 24px;
 }
 .iui-non-ideal-state > .iui-non-ideal-state-description{
   margin:0;
@@ -45,9 +45,9 @@
   vertical-align:baseline;
   font-size:14px;
   font-weight:400;
-  line-height:22px;
+  line-height:24px;
   padding:0;
-  margin:0 0 22px;
+  margin:0 0 24px;
 }
 .iui-non-ideal-state > .iui-non-ideal-state-actions{
   display:flex;