@itwin/itwinui-css 0.58.0 → 0.59.2

package/LICENSE.md

@@ -0,0 +1,9 @@
+# MIT License
+
+Copyright © Bentley Systems, Incorporated. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -77,4 +77,4 @@ Please read our [CONTRIBUTING.md](https://github.com/iTwin/iTwinUI/blob/main/CON
 
 ## Changelog
 
-Read our [CHANGELOG.md](https://github.com/iTwin/iTwinUI/blob/main/CHANGELOG.md) to find recent changes.
+Read our [CHANGELOG.md](https://github.com/iTwin/iTwinUI/blob/main/packages/itwinui-css/CHANGELOG.md) to find recent changes.

package/css/all.css

@@ -2166,9 +2166,6 @@ a.iui-breadcrumbs-text:focus{
 .iui-codeblock > .iui-title-bar > .iui-button{
   margin-left:auto;
 }
-.iui-codeblock .iui-button{
-  gap:0;
-}
 .iui-codeblock > .iui-codeblock-content{
   margin:0;
   overflow-x:auto;
@@ -4358,7 +4355,7 @@ button.iui-header-logo:hover:not(:focus-visible):not(:hover), .iui-header-logo[r
   min-width:192px;
   height:100%;
   transform:translateX(100%);
-  box-shadow:-1px 0 14px rgba(0, 0, 0, 0.25);
+  box-shadow:-1px 0 10px rgba(0, 0, 0, 0.25);
   -webkit-clip-path:inset(0 0 0 -15px);
           clip-path:inset(0 0 0 -15px);
 }
@@ -4391,7 +4388,7 @@ button.iui-header-logo:hover:not(:focus-visible):not(:hover), .iui-header-logo[r
   min-height:192px;
   width:100%;
   transform:translateY(100%);
-  box-shadow:0 -1px 14px rgba(0, 0, 0, 0.25);
+  box-shadow:0 -1px 10px rgba(0, 0, 0, 0.25);
   -webkit-clip-path:inset(-15px 0 0 0);
           clip-path:inset(-15px 0 0 0);
 }
@@ -6957,7 +6954,7 @@ label.iui-input-label.iui-disabled{
   border-right:none;
   overflow:hidden;
   justify-content:flex-start;
-  --_iui-button-active-stripe-inset:0 calc(100% - 2px) 0 0;
+  --_iui-button-active-stripe-inset:0 0 0 calc(100% - 2px);
 }
 .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
   height:55px;
@@ -7354,6 +7351,7 @@ label.iui-input-label.iui-disabled{
   vertical-align:baseline;
   display:flex;
   flex-direction:column;
+  isolation:isolate;
 }
 .iui-table *{
   box-sizing:border-box;
@@ -7381,41 +7379,57 @@ label.iui-input-label.iui-disabled{
   margin-left:auto;
 }
 .iui-table.iui-condensed .iui-table-header .iui-cell,
-.iui-table.iui-condensed .iui-row .iui-cell,
 .iui-table.iui-condensed .iui-paginator{
   min-height:44px;
 }
+.iui-table.iui-condensed .iui-row .iui-cell{
+  min-height:46px;
+}
 .iui-table.iui-extra-condensed .iui-table-header .iui-cell,
-.iui-table.iui-extra-condensed .iui-row .iui-cell,
 .iui-table.iui-extra-condensed .iui-paginator{
   min-height:33px;
 }
+.iui-table.iui-extra-condensed .iui-row .iui-cell{
+  min-height:35px;
+}
+.iui-table.iui-extra-condensed .iui-table-header .iui-cell{
+  padding-block:2.75px;
+}
 
-.iui-table-header{
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
+.iui-table-header-wrapper{
   overflow:hidden;
+  display:flex;
   flex-shrink:0;
-  background-color:#edeff2;
-  background-color:var(--iui-color-background-3);
 }
 @supports not (overflow: overlay){
-  .iui-table-header{
+  .iui-table-header-wrapper{
     overflow-y:scroll;
   }
 }
+
+.iui-table-header{
+  display:flex;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  min-width:100%;
+  flex-shrink:0;
+}
 .iui-table-header .iui-row{
   display:flex;
   flex-grow:1;
-  border-left:solid 1px transparent;
-  border-right:solid 1px transparent;
+  min-width:100%;
+}
+.iui-table-header .iui-cell{
+  min-height:55px;
+  background-color:#edeff2;
+  background-color:var(--iui-color-background-3);
 }
 .iui-table-header .iui-cell:not(.iui-slot){
-  flex-wrap:wrap;
   -moz-column-gap:4px;
        column-gap:4px;
+  padding-block:5.5px;
 }
 .iui-table-header .iui-cell:not(.iui-slot):focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -7434,9 +7448,6 @@ label.iui-input-label.iui-disabled{
   cursor:-webkit-grabbing;
   cursor:grabbing;
 }
-.iui-table-header .iui-cell:not(.iui-slot) .iui-filter-button{
-  margin-right:8px;
-}
 .iui-table-header .iui-cell:not(.iui-slot) .iui-filter-button:not(.iui-active){
   visibility:hidden;
 }
@@ -7517,6 +7528,15 @@ label.iui-input-label.iui-disabled{
   display:flex;
   flex-grow:1;
   align-items:center;
+  flex-wrap:wrap;
+  justify-content:flex-end;
+  margin-right:12px;
+}
+.iui-table-header-actions-container .iui-cell-end-icon{
+  width:28px;
+  height:28px;
+  margin-right:initial;
+  margin-left:auto;
 }
 
 .iui-table-body{
@@ -7536,28 +7556,33 @@ label.iui-input-label.iui-disabled{
 .iui-table-body.iui-scroll-snapping .iui-row{
   scroll-snap-align:start none;
 }
-.iui-table-body.iui-zebra-striping .iui-row:nth-child(even):not(.iui-selected){
+.iui-table-body.iui-zebra-striping .iui-row:nth-child(even):not(.iui-selected) .iui-cell{
   background-color:rgba(0, 0, 0, 0.02);
   background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02);
 }
 .iui-table-body .iui-row{
   min-width:100%;
   display:flex;
-  border:solid 1px transparent;
+}
+.iui-table-body .iui-row .iui-cell{
+  border-top:solid 1px transparent;
+  border-bottom:solid 1px transparent;
   border-bottom-color:#c7ccd1;
   border-bottom-color:var(--iui-color-background-border);
+  background-color:white;
+  background-color:var(--iui-color-background-1);
 }
 @media (prefers-reduced-motion: no-preference){
-  .iui-table-body .iui-row{
+  .iui-table-body .iui-row .iui-cell{
     transition:border 0.2s ease-out;
   }
 }
 .iui-table-body .iui-row > .iui-slot > .iui-more-options{
   visibility:hidden;
 }
-.iui-table-body .iui-row:hover:not(.iui-disabled):not(.iui-expanded-content){
-  background-color:rgba(0, 138, 224, 0.1);
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+.iui-table-body .iui-row:hover:not(.iui-disabled) .iui-cell{
+  background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
+  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-table-body .iui-row:hover:not(.iui-disabled) > .iui-slot:not(.iui-disabled) > .iui-more-options{
   visibility:visible;
@@ -7572,9 +7597,10 @@ label.iui-input-label.iui-disabled{
 }
 .iui-table-body .iui-row.iui-row-expanded{
   overflow:hidden;
+}
+.iui-table-body .iui-row.iui-row-expanded .iui-cell{
   border-left-color:#dde1e4;
   border-right-color:#dde1e4;
-  border-bottom-color:transparent;
   border-left-color:var(--iui-color-background-4);
   border-right-color:var(--iui-color-background-4);
   border-bottom-color:transparent;
@@ -7590,6 +7616,10 @@ label.iui-input-label.iui-disabled{
 }
 .iui-table-body .iui-row.iui-expanded-content{
   overflow:hidden;
+  border-left:1px solid transparent;
+  border-right:1px solid transparent;
+  border-bottom:1px solid #c7ccd1;
+  border-bottom:1px solid var(--iui-color-background-border);
 }
 .iui-table-body .iui-row.iui-expanded-content.iui-enter{
   opacity:0;
@@ -7613,26 +7643,26 @@ label.iui-input-label.iui-disabled{
     transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
   }
 }
-.iui-table-body .iui-row:not(.iui-selected) + .iui-selected, .iui-table-body .iui-row.iui-selected:first-child{
+.iui-table-body .iui-row:not(.iui-selected) + .iui-selected .iui-cell, .iui-table-body .iui-row.iui-selected:first-child .iui-cell{
   border-bottom-color:transparent;
 }
-.iui-table-body .iui-row.iui-selected{
+.iui-table-body .iui-row.iui-selected .iui-cell{
   border-color:#008ae0;
-  background:rgba(0, 138, 224, 0.1);
+  background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
   border-color:var(--iui-color-foreground-primary);
-  background:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+  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-table-body .iui-row.iui-selected + .iui-selected{
+.iui-table-body .iui-row.iui-selected + .iui-selected .iui-cell{
   border-bottom-color:transparent;
   border-top-color:rgba(0, 138, 224, 0.4);
   border-top-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
 }
-.iui-table-body .iui-row.iui-selected:last-child{
+.iui-table-body .iui-row.iui-selected:last-child .iui-cell{
   border-bottom-color:#008ae0;
   border-bottom-color:var(--iui-color-foreground-primary);
 }
-.iui-table-body .iui-row.iui-selected + :not(.iui-selected),
-.iui-table-body .iui-row.iui-selected + .iui-expanded-content + :not(.iui-selected){
+.iui-table-body .iui-row.iui-selected + :not(.iui-selected) .iui-cell,
+.iui-table-body .iui-row.iui-selected + .iui-expanded-content + .iui-row:not(.iui-selected) .iui-cell{
   border-top-color:#008ae0;
   border-top-color:var(--iui-color-foreground-primary);
 }
@@ -7673,17 +7703,17 @@ label.iui-input-label.iui-disabled{
 .iui-table-body .iui-row.iui-expanded-content.iui-disabled .iui-user-icon{
   filter:grayscale(100%);
 }
-.iui-table-body .iui-row.iui-positive,
+.iui-table-body .iui-row.iui-positive .iui-cell:first-of-type,
 .iui-table-body .iui-row.iui-positive + .iui-expanded-content{
   box-shadow:inset 2px 0 0 0 #53a21a;
   box-shadow:inset 2px 0 0 0 var(--iui-icons-color-positive);
 }
-.iui-table-body .iui-row.iui-positive::-moz-selection, .iui-table-body .iui-row.iui-positive *::-moz-selection, .iui-table-body .iui-row.iui-positive + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-positive + .iui-expanded-content *::-moz-selection{
+.iui-table-body .iui-row.iui-positive .iui-cell:first-of-type::-moz-selection, .iui-table-body .iui-row.iui-positive .iui-cell:first-of-type *::-moz-selection, .iui-table-body .iui-row.iui-positive + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-positive + .iui-expanded-content *::-moz-selection{
   background-color:rgba(83, 162, 26, 0.2);
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
 }
-.iui-table-body .iui-row.iui-positive::selection,
-.iui-table-body .iui-row.iui-positive *::selection,
+.iui-table-body .iui-row.iui-positive .iui-cell:first-of-type::selection,
+.iui-table-body .iui-row.iui-positive .iui-cell:first-of-type *::selection,
 .iui-table-body .iui-row.iui-positive + .iui-expanded-content::selection,
 .iui-table-body .iui-row.iui-positive + .iui-expanded-content *::selection{
   background-color:rgba(83, 162, 26, 0.2);
@@ -7693,17 +7723,17 @@ label.iui-input-label.iui-disabled{
   fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
-.iui-table-body .iui-row.iui-warning,
+.iui-table-body .iui-row.iui-warning .iui-cell:first-of-type,
 .iui-table-body .iui-row.iui-warning + .iui-expanded-content{
   box-shadow:inset 2px 0 0 0 #f18d13;
   box-shadow:inset 2px 0 0 0 var(--iui-icons-color-warning);
 }
-.iui-table-body .iui-row.iui-warning::-moz-selection, .iui-table-body .iui-row.iui-warning *::-moz-selection, .iui-table-body .iui-row.iui-warning + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-warning + .iui-expanded-content *::-moz-selection{
+.iui-table-body .iui-row.iui-warning .iui-cell:first-of-type::-moz-selection, .iui-table-body .iui-row.iui-warning .iui-cell:first-of-type *::-moz-selection, .iui-table-body .iui-row.iui-warning + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-warning + .iui-expanded-content *::-moz-selection{
   background-color:rgba(241, 141, 19, 0.2);
   background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
 }
-.iui-table-body .iui-row.iui-warning::selection,
-.iui-table-body .iui-row.iui-warning *::selection,
+.iui-table-body .iui-row.iui-warning .iui-cell:first-of-type::selection,
+.iui-table-body .iui-row.iui-warning .iui-cell:first-of-type *::selection,
 .iui-table-body .iui-row.iui-warning + .iui-expanded-content::selection,
 .iui-table-body .iui-row.iui-warning + .iui-expanded-content *::selection{
   background-color:rgba(241, 141, 19, 0.2);
@@ -7713,17 +7743,17 @@ label.iui-input-label.iui-disabled{
   fill:#f18d13;
   fill:var(--iui-icons-color-warning);
 }
-.iui-table-body .iui-row.iui-negative,
+.iui-table-body .iui-row.iui-negative .iui-cell:first-of-type,
 .iui-table-body .iui-row.iui-negative + .iui-expanded-content{
   box-shadow:inset 2px 0 0 0 #d10a0a;
   box-shadow:inset 2px 0 0 0 var(--iui-icons-color-negative);
 }
-.iui-table-body .iui-row.iui-negative::-moz-selection, .iui-table-body .iui-row.iui-negative *::-moz-selection, .iui-table-body .iui-row.iui-negative + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-negative + .iui-expanded-content *::-moz-selection{
+.iui-table-body .iui-row.iui-negative .iui-cell:first-of-type::-moz-selection, .iui-table-body .iui-row.iui-negative .iui-cell:first-of-type *::-moz-selection, .iui-table-body .iui-row.iui-negative + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-negative + .iui-expanded-content *::-moz-selection{
   background-color:rgba(209, 10, 10, 0.2);
   background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
 }
-.iui-table-body .iui-row.iui-negative::selection,
-.iui-table-body .iui-row.iui-negative *::selection,
+.iui-table-body .iui-row.iui-negative .iui-cell:first-of-type::selection,
+.iui-table-body .iui-row.iui-negative .iui-cell:first-of-type *::selection,
 .iui-table-body .iui-row.iui-negative + .iui-expanded-content::selection,
 .iui-table-body .iui-row.iui-negative + .iui-expanded-content *::selection{
   background-color:rgba(209, 10, 10, 0.2);
@@ -7754,12 +7784,18 @@ label.iui-input-label.iui-disabled{
   display:flex;
   flex-grow:1;
   min-width:64px;
-  min-height:55px;
+  min-height:57px;
   padding-left:16px;
   flex-basis:64px;
   position:relative;
   word-break:break-word;
 }
+.iui-cell:first-of-type{
+  border-left:solid 1px transparent;
+}
+.iui-cell:last-of-type{
+  border-right:solid 1px transparent;
+}
 .iui-cell.iui-slot{
   width:48px;
   padding:0;
@@ -7770,12 +7806,19 @@ label.iui-input-label.iui-disabled{
   align-items:center;
   flex-basis:48px;
 }
+.iui-cell.iui-cell-sticky{
+  position:-webkit-sticky;
+  position:sticky;
+  z-index:1;
+  left:var(--iui-table-sticky-left, initial);
+  right:var(--iui-table-sticky-right, initial);
+}
 .iui-cell:not(.iui-slot):last-child{
   padding-right:16px;
 }
 .iui-cell.iui-positive{
-  background-color:rgba(83, 162, 26, 0.1);
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6));
+  background:linear-gradient(rgba(83, 162, 26, 0.1), rgba(83, 162, 26, 0.1)), linear-gradient(white, white);
+  background:linear-gradient(rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
 }
 .iui-cell.iui-positive::-moz-selection, .iui-cell.iui-positive *::-moz-selection{
   background-color:rgba(83, 162, 26, 0.2);
@@ -7787,8 +7830,8 @@ label.iui-input-label.iui-disabled{
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
 }
 .iui-cell.iui-warning{
-  background-color:rgba(241, 141, 19, 0.1);
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6));
+  background:linear-gradient(rgba(241, 141, 19, 0.1), rgba(241, 141, 19, 0.1)), linear-gradient(white, white);
+  background:linear-gradient(rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
 }
 .iui-cell.iui-warning::-moz-selection, .iui-cell.iui-warning *::-moz-selection{
   background-color:rgba(241, 141, 19, 0.2);
@@ -7800,8 +7843,8 @@ label.iui-input-label.iui-disabled{
   background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
 }
 .iui-cell.iui-negative{
-  background-color:rgba(209, 10, 10, 0.1);
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6));
+  background:linear-gradient(rgba(209, 10, 10, 0.1), rgba(209, 10, 10, 0.1)), linear-gradient(white, white);
+  background:linear-gradient(rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
 }
 .iui-cell.iui-negative::-moz-selection, .iui-cell.iui-negative *::-moz-selection{
   background-color:rgba(209, 10, 10, 0.2);
@@ -7824,6 +7867,36 @@ label.iui-input-label.iui-disabled{
   background-color:var(--iui-color-background-1);
 }
 
+.iui-cell-shadow-left{
+  position:absolute;
+  top:-1px;
+  bottom:-1px;
+  width:24px;
+  pointer-events:none;
+  left:0;
+  transform:translate(-100%);
+  box-shadow:inset -10px 0 5px -10px rgba(0, 0, 0, 0.25);
+}
+.iui-table-header .iui-cell-shadow-left{
+  top:0;
+  bottom:0;
+}
+
+.iui-cell-shadow-right{
+  position:absolute;
+  top:-1px;
+  bottom:-1px;
+  width:24px;
+  pointer-events:none;
+  right:0;
+  transform:translate(100%);
+  box-shadow:inset 10px 0 5px -10px rgba(0, 0, 0, 0.25);
+}
+.iui-table-header .iui-cell-shadow-right{
+  top:0;
+  bottom:0;
+}
+
 .iui-paginator{
   margin:0;
   padding:0;

package/css/code.css

@@ -44,9 +44,6 @@
 .iui-codeblock > .iui-title-bar > .iui-button{
   margin-left:auto;
 }
-.iui-codeblock .iui-button{
-  gap:0;
-}
 .iui-codeblock > .iui-codeblock-content{
   margin:0;
   overflow-x:auto;

package/css/information-panel.css

@@ -98,7 +98,7 @@
   min-width:192px;
   height:100%;
   transform:translateX(100%);
-  box-shadow:-1px 0 14px rgba(0, 0, 0, 0.25);
+  box-shadow:-1px 0 10px rgba(0, 0, 0, 0.25);
   -webkit-clip-path:inset(0 0 0 -15px);
           clip-path:inset(0 0 0 -15px);
 }
@@ -131,7 +131,7 @@
   min-height:192px;
   width:100%;
   transform:translateY(100%);
-  box-shadow:0 -1px 14px rgba(0, 0, 0, 0.25);
+  box-shadow:0 -1px 10px rgba(0, 0, 0, 0.25);
   -webkit-clip-path:inset(-15px 0 0 0);
           clip-path:inset(-15px 0 0 0);
 }

package/css/side-navigation.css

@@ -71,7 +71,7 @@
   border-right:none;
   overflow:hidden;
   justify-content:flex-start;
-  --_iui-button-active-stripe-inset:0 calc(100% - 2px) 0 0;
+  --_iui-button-active-stripe-inset:0 0 0 calc(100% - 2px);
 }
 .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
   height:55px;