@itwin/itwinui-css 0.59.2 → 1.0.0-dev.0

package/css/icon.css

@@ -3,145 +3,115 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-icons-default{
-  fill:rgba(0, 0, 0, 0.4);
   fill:var(--iui-icons-color);
   display:inline-flex;
   width:16px;
   height:16px;
 }
 .iui-icons-default.iui-informational{
-  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-icons-default.iui-positive{
-  fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
 .iui-icons-default.iui-warning{
-  fill:#f18d13;
   fill:var(--iui-icons-color-warning);
 }
 .iui-icons-default.iui-negative{
-  fill:#d10a0a;
   fill:var(--iui-icons-color-negative);
 }
 
 .iui-icons-small{
-  fill:rgba(0, 0, 0, 0.4);
   fill:var(--iui-icons-color);
   display:inline-flex;
   width:12px;
   height:12px;
 }
 .iui-icons-small.iui-informational{
-  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-icons-small.iui-positive{
-  fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
 .iui-icons-small.iui-warning{
-  fill:#f18d13;
   fill:var(--iui-icons-color-warning);
 }
 .iui-icons-small.iui-negative{
-  fill:#d10a0a;
   fill:var(--iui-icons-color-negative);
 }
 
 .iui-icons-large{
-  fill:rgba(0, 0, 0, 0.4);
   fill:var(--iui-icons-color);
   display:inline-flex;
   width:24px;
   height:24px;
 }
 .iui-icons-large.iui-informational{
-  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-icons-large.iui-positive{
-  fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
 .iui-icons-large.iui-warning{
-  fill:#f18d13;
   fill:var(--iui-icons-color-warning);
 }
 .iui-icons-large.iui-negative{
-  fill:#d10a0a;
   fill:var(--iui-icons-color-negative);
 }
 
 .iui-icons-xl{
-  fill:rgba(0, 0, 0, 0.4);
   fill:var(--iui-icons-color);
   display:inline-flex;
   width:32px;
   height:32px;
 }
 .iui-icons-xl.iui-informational{
-  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-icons-xl.iui-positive{
-  fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
 .iui-icons-xl.iui-warning{
-  fill:#f18d13;
   fill:var(--iui-icons-color-warning);
 }
 .iui-icons-xl.iui-negative{
-  fill:#d10a0a;
   fill:var(--iui-icons-color-negative);
 }
 
 .iui-icons-xxl{
-  fill:rgba(0, 0, 0, 0.4);
   fill:var(--iui-icons-color);
   display:inline-flex;
   width:48px;
   height:48px;
 }
 .iui-icons-xxl.iui-informational{
-  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-icons-xxl.iui-positive{
-  fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
 .iui-icons-xxl.iui-warning{
-  fill:#f18d13;
   fill:var(--iui-icons-color-warning);
 }
 .iui-icons-xxl.iui-negative{
-  fill:#d10a0a;
   fill:var(--iui-icons-color-negative);
 }
 
 .iui-icons-3xl{
-  fill:rgba(0, 0, 0, 0.4);
   fill:var(--iui-icons-color);
   display:inline-flex;
   width:64px;
   height:64px;
 }
 .iui-icons-3xl.iui-informational{
-  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-icons-3xl.iui-positive{
-  fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
 .iui-icons-3xl.iui-warning{
-  fill:#f18d13;
   fill:var(--iui-icons-color-warning);
 }
 .iui-icons-3xl.iui-negative{
-  fill:#d10a0a;
   fill:var(--iui-icons-color-negative);
 }

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,18 +28,15 @@
   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;
@@ -50,7 +44,6 @@
   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{
@@ -72,7 +65,6 @@
   height:24px;
   margin-right:8px;
   flex-shrink:0;
-  fill:rgba(0, 0, 0, 0.4);
   fill:var(--iui-icons-color);
 }
 .iui-information-panel .iui-information-header .iui-information-header-actions{
@@ -88,7 +80,6 @@
   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,12 +163,10 @@
 }
 
 .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){
@@ -185,15 +174,12 @@
 }
 .iui-information-body-content.iui-inline{
   row-gap:11px;
-  -ms-grid-columns:auto 1fr;
   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,162 @@
+/*---------------------------------------------------------------------------------------------
+ * 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:22px;
+  border-radius:4px;
+  -webkit-appearance:none;
+     -moz-appearance:none;
+          appearance:none;
+  padding:7px 12px;
+  min-height:38px;
+  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:1.5px;
+  padding-bottom:1.5px;
+  min-height:27px;
+}
+.iui-input.iui-large{
+  padding-top:12.5px;
+  padding-bottom:12.5px;
+  min-height:49px;
+  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);
+}
+
+.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{
+  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-icons-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-icons-color-actionable-disabled);
+}

package/css/keyboard.css

@@ -7,11 +7,11 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  border-radius:3px;
+  border-radius:4px;
   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

@@ -21,7 +21,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);
 }
 
@@ -40,16 +39,12 @@
 }
 .iui-location-marker-data-rich > .iui-location-marker-data-rich-body{
   min-width:32px;
-  border-radius:3px;
+  border-radius:4px;
   text-align:center;
   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,7 +61,6 @@
   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{
@@ -77,7 +71,6 @@
   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);
 }
 
@@ -97,7 +90,6 @@
   height:24px;
   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 +99,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;
@@ -36,7 +35,7 @@
   margin:0;
   width:24px;
   height:24px;
-  border-radius:3px;
+  border-radius:4px;
 }
 .iui-menu.iui-scroll{
   overflow-y:auto;
@@ -50,7 +49,6 @@
   padding:0 13px;
   height:38px;
   cursor:pointer;
-  box-sizing:border-box;
   line-height:normal;
 }
 .iui-menu-item + .iui-menu-item{
@@ -73,28 +71,23 @@
 .iui-menu-item .iui-menu-description{
   display:none;
   font-size:12px;
-  opacity:0.6;
   opacity:var(--iui-opacity-3);
 }
 .iui-menu-item > .iui-icon{
   width:16px;
   height:16px;
   flex:0 0 auto;
-  fill:rgba(0, 0, 0, 0.8);
   fill:var(--iui-icons-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;
@@ -106,10 +99,6 @@
   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,7 +108,6 @@
   opacity:1;
 }
 .iui-menu-item.iui-active > .iui-icon{
-  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-menu-item.iui-active:focus, .iui-menu-item.iui-active.iui-focused{
@@ -133,13 +121,10 @@
 .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);
 }
 .iui-menu-item-skeleton{
@@ -172,6 +157,5 @@
   height:1px;
   width:calc(100% - 24px);
   margin:1px auto;
-  background-color:#c7ccd1;
   background-color:var(--iui-color-background-border);
 }