@itwin/itwinui-css 0.50.1 → 0.53.0

package/css/keyboard.css

@@ -21,15 +21,19 @@
       -ms-user-select:none;
           user-select:none;
   cursor:default;
-  background-color:#FFF;
-  border:1px solid #C7CCD1;
-  box-shadow:0 1px 1px #C7CCD1, 0 1px 0 0 rgba(255, 255, 255, 0.2) inset;
+  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; }
-  @media (prefers-reduced-motion: no-preference){
-    .iui-keyboard{
-      transition:box-shadow 0.2s ease-out; } }
-  .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; }
+  box-shadow:0 1px 1px var(--iui-color-background-5), 0 1px 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-keyboard{
+    transition:box-shadow 0.2s ease-out;
+  }
+}
+.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

@@ -15,12 +15,15 @@
   position:relative;
   width:24px;
   height:24px;
-  cursor:pointer; }
-  .iui-location-marker-default > .iui-location-marker-default-pin{
-    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:#FFF;
-      fill:var(--iui-color-foreground-accessory); }
+  cursor:pointer;
+}
+.iui-location-marker-default > .iui-location-marker-default-pin{
+  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);
+}
 
 .iui-location-marker-data-rich{
   margin:0;
@@ -33,45 +36,50 @@
       -ms-user-select:none;
           user-select:none;
   position:relative;
-  cursor:pointer; }
-  .iui-location-marker-data-rich > .iui-location-marker-data-rich-body{
-    min-width:32px;
-    border-radius:3px;
-    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 #FFF;
-    background-color:#FFF;
-    color:#FFF;
-    border:solid 1px var(--iui-color-foreground-accessory);
-    background-color:var(--iui-color-foreground-accessory);
-    color:var(--iui-color-foreground-accessory); }
-    .iui-location-marker-data-rich > .iui-location-marker-data-rich-body::before{
-      content:'';
-      position:absolute;
-      display:block;
-      width:0;
-      height:0;
-      bottom:-9px;
-      left:0;
-      right:0;
-      margin:auto;
-      border-width:4px;
-      border-style:solid;
-      border-color:#FFF 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;
-      width:16px;
-      height:16px;
-      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:#FFF;
-        fill:var(--iui-color-foreground-accessory); }
+  cursor:pointer;
+}
+.iui-location-marker-data-rich > .iui-location-marker-data-rich-body{
+  min-width:32px;
+  border-radius:3px;
+  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);
+}
+.iui-location-marker-data-rich > .iui-location-marker-data-rich-body::before{
+  content:"";
+  position:absolute;
+  display:block;
+  width:0;
+  height:0;
+  bottom:-9px;
+  left:0;
+  right:0;
+  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;
+  width:16px;
+  height:16px;
+  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);
+}
 
 .iui-location-marker-me{
   margin:0;
@@ -89,17 +97,19 @@
   height:24px;
   border-radius:50%;
   cursor:default;
-  background:radial-gradient(circle at center, rgba(0, 139, 225, 0), rgba(0, 139, 225, 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{
-    width:12px;
-    height:12px;
-    position:absolute;
-    top:6px;
-    left:6px;
-    border-radius:50%;
-    box-sizing:border-box;
-    border:1px solid #FFF;
-    background-color:#008BE1;
-    border:1px solid var(--iui-color-foreground-accessory);
-    background-color:var(--iui-color-background-primary); }
+  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{
+  width:12px;
+  height:12px;
+  position:absolute;
+  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

@@ -3,15 +3,18 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-menu{
+  --iui-surface-background-color:var(--iui-color-background-1);
+  --iui-surface-border-radius:0;
+  --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
+  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;
   border:none;
   vertical-align:baseline;
-  box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
-  background-color:#FFF;
-  color:rgba(0, 0, 0, 0.8);
-  background-color:var(--iui-color-background-1);
-  color:var(--iui-text-color);
   list-style-type:none;
   -webkit-user-select:none;
      -moz-user-select:none;
@@ -19,17 +22,26 @@
           user-select:none;
   width:100%;
   margin:0;
-  padding:0; }
-  .iui-menu .iui-header-menu-icon{
-    margin:0 4px; }
-  .iui-menu div.iui-header-menu-icon{
-    margin:0;
-    width:24px;
-    height:24px;
-    border-radius:3px; }
-  .iui-menu.iui-scroll{
-    overflow-y:auto;
-    overflow-y:overlay; }
+  padding:0;
+}
+@media (forced-colors: active){
+  .iui-menu{
+    border:1px solid transparent;
+  }
+}
+.iui-menu .iui-header-menu-icon{
+  margin:0 4px;
+}
+.iui-menu div.iui-header-menu-icon{
+  margin:0;
+  width:24px;
+  height:24px;
+  border-radius:3px;
+}
+.iui-menu.iui-scroll{
+  overflow-y:auto;
+  overflow-y:overlay;
+}
 
 .iui-menu-item{
   display:flex;
@@ -39,80 +51,106 @@
   height:38px;
   cursor:pointer;
   box-sizing:border-box;
-  line-height:normal; }
-  .iui-menu-item + .iui-menu-item{
-    margin-top:-1px; }
-  .iui-menu-item .iui-content,
-  .iui-menu-item .iui-menu-label,
-  .iui-menu-item .iui-menu-description{
-    white-space:nowrap;
-    overflow:hidden;
-    text-overflow:ellipsis; }
-  .iui-menu-item .iui-content{
-    flex:1 1 auto; }
-    .iui-menu-item .iui-content + .iui-icon{
-      margin-right:0;
-      margin-left:8px; }
-  .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, 139, 225, 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; }
-    .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, 139, 225, 0.2);
-    outline:thin solid var(--iui-color-foreground-primary);
-    outline-offset:-1px;
-    background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-    outline:thin solid var(--iui-color-foreground-primary);
-    outline-offset:-1px; }
-  .iui-menu-item.iui-active > .iui-icon{
-    fill:#008BE1;
-    fill:var(--iui-icons-color-primary); }
-  .iui-menu-item.iui-active:focus, .iui-menu-item.iui-active.iui-focused{
-    outline-width:2px;
-    outline-offset:-2px; }
-  .iui-menu-item.iui-active:focus:not(:focus-visible){
-    outline:thin solid var(--iui-color-foreground-primary);
-    outline-offset:-1px; }
-  .iui-menu-item.iui-disabled, .iui-menu-item.iui-disabled:hover{
-    cursor:not-allowed;
-    outline:none;
-    background-color:#FFF;
-    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); }
+  line-height:normal;
+}
+.iui-menu-item + .iui-menu-item{
+  margin-top:-1px;
+}
+.iui-menu-item .iui-content,
+.iui-menu-item .iui-menu-label,
+.iui-menu-item .iui-menu-description{
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+}
+.iui-menu-item .iui-content{
+  flex:1 1 auto;
+}
+.iui-menu-item .iui-content + .iui-icon{
+  margin-right:0;
+  margin-left:8px;
+}
+.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;
+}
+.iui-menu-item.iui-large{
+  height:49px;
+}
+.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);
+  outline-offset:-1px;
+}
+.iui-menu-item.iui-active .iui-menu-description{
+  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{
+  outline-width:2px;
+  outline-offset:-2px;
+}
+.iui-menu-item.iui-active:focus:not(:focus-visible){
+  outline:thin solid var(--iui-color-foreground-primary);
+  outline-offset:-1px;
+}
+.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-content{
-  padding:11px 13px; }
+  padding:11px 13px;
+}
 
 .iui-menu-divider{
   height:1px;
   width:calc(100% - 24px);
   margin:1px auto;
-  background-color:#DCE0E3;
-  background-color:var(--iui-color-background-4); }
+  background-color:#c7ccd1;
+  background-color:var(--iui-color-background-border);
+}

package/css/modal.css

@@ -13,50 +13,120 @@
   left:0;
   width:100%;
   height:100%;
+  background-color:rgba(0, 0, 0, 0.4);
+  background-color:rgba(0, 0, 0, var(--iui-opacity-4));
   visibility:hidden;
   opacity:0;
-  background-color:rgba(0, 0, 0, 0.4);
-  background-color:rgba(0, 0, 0, var(--iui-opacity-4)); }
-  @media (prefers-reduced-motion: no-preference){
-    .iui-modal{
-      transition:visibility 0s linear 0.2s, opacity 0.2s ease-out; } }
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-modal{
+    transition:visibility 0s linear 0.2s, opacity 0.2s ease-out;
+  }
+}
+.iui-modal.iui-modal-visible{
+  visibility:visible;
+  opacity:1;
+  transition-delay:0s;
+}
+.iui-modal.iui-modal-animation-enter{
+  visibility:hidden;
+  opacity:0;
+}
+.iui-modal.iui-modal-animation-enter-active{
+  visibility:visible;
+  opacity:1;
+}
+.iui-modal > .iui-modal-dialog{
+  position:absolute;
+  left:50%;
+  top:33%;
+  transform:translate(-50%, -33%);
+  z-index:1000;
+  max-width:50%;
+  min-width:380px;
+  max-height:100vh;
+  border-radius:3px;
+  box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
+  padding:11px 16px;
+  box-sizing:border-box;
+  background-color:white;
+  background-color:var(--iui-color-background-1);
+}
+@media screen and (max-width: 400px){
   .iui-modal > .iui-modal-dialog{
-    position:absolute;
-    left:50%;
-    top:33%;
-    transform:translate(-50%, -33%);
-    z-index:1000;
-    max-width:50%;
-    min-width:400px;
-    border-radius:3px;
-    box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
-    padding:11px 16px;
-    background-color:#FFF;
-    background-color:var(--iui-color-background-1); }
-    @media screen and (max-width: 400px){
-      .iui-modal > .iui-modal-dialog{
-        max-width:95%;
-        width:95%;
-        min-width:95%; } }
-    .iui-modal > .iui-modal-dialog .iui-title-bar{
-      display:flex;
-      align-items:center;
-      margin-bottom:11px;
-      justify-content:space-between; }
-      .iui-modal > .iui-modal-dialog .iui-title-bar > .iui-title{
-        font-size:18px;
-        white-space:nowrap;
-        overflow:hidden;
-        text-overflow:ellipsis;
-        line-height:1.5; }
-    .iui-modal > .iui-modal-dialog .iui-button-bar{
-      margin-top:11px;
-      display:flex;
-      align-items:center;
-      justify-content:flex-end; }
-      .iui-modal > .iui-modal-dialog .iui-button-bar > .iui-button:not(:last-child){
-        margin-right:8px; }
-  .iui-modal.iui-modal-visible{
-    visibility:visible;
-    opacity:1;
-    transition-delay:0s; }
+    max-width:95%;
+    width:95%;
+    min-width:95%;
+  }
+}
+.iui-modal > .iui-modal-dialog .iui-title-bar{
+  display:flex;
+  align-items:center;
+  margin-bottom:11px;
+  justify-content:space-between;
+}
+.iui-modal > .iui-modal-dialog .iui-title-bar > .iui-title{
+  font-size:18px;
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  line-height:1.5;
+}
+.iui-modal > .iui-modal-dialog .iui-button-bar{
+  margin-top:11px;
+  display:flex;
+  align-items:center;
+  justify-content:flex-end;
+}
+.iui-modal > .iui-modal-dialog .iui-button-bar > .iui-button:not(:last-child){
+  margin-right:8px;
+}
+.iui-modal > .iui-modal-dialog .iui-modal-content{
+  flex-grow:2;
+  margin:0 -16px;
+  padding:0 16px;
+  overflow-y:auto;
+  overflow-y:overlay;
+}
+.iui-modal-full-page > .iui-modal-dialog{
+  display:flex;
+  flex-direction:column;
+  height:100vh;
+  width:100vw;
+  left:0;
+  top:0;
+  transform:none;
+  max-width:initial;
+  min-width:initial;
+  border-radius:0;
+  will-change:transform;
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-modal-full-page{
+    transition:visibility 0s linear 0.4s, opacity 0.4s ease-out 0.2s;
+  }
+}
+.iui-modal-full-page > .iui-modal-dialog{
+  transform:translateY(100%);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-modal-full-page > .iui-modal-dialog{
+    transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.4s ease-in;
+  }
+}
+.iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
+  transform:translateY(0);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
+    transition:transform 0.4s ease-out;
+  }
+}
+.iui-modal-full-page.iui-modal-animation-enter > .iui-modal-dialog{
+  transform:translateY(100%);
+  opacity:0;
+}
+.iui-modal-full-page.iui-modal-animation-enter-active > .iui-modal-dialog{
+  transform:translateY(0);
+  opacity:1;
+}