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

package/css/utils.css

@@ -0,0 +1,669 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+[data-iui-icon-size=s]{
+  display:flex;
+  flex-shrink:0;
+  width:12px;
+  height:12px;
+}
+
+[data-iui-icon-size=m]{
+  display:flex;
+  flex-shrink:0;
+  width:16px;
+  height:16px;
+}
+
+[data-iui-icon-size=l]{
+  display:flex;
+  flex-shrink:0;
+  width:24px;
+  height:24px;
+}
+
+[data-iui-icon-size=xl]{
+  display:flex;
+  flex-shrink:0;
+  width:32px;
+  height:32px;
+}
+
+[data-iui-icon-size="2xl"]{
+  display:flex;
+  flex-shrink:0;
+  width:48px;
+  height:48px;
+}
+
+[data-iui-icon-size="3xl"]{
+  display:flex;
+  flex-shrink:0;
+  width:64px;
+  height:64px;
+}
+
+[data-iui-icon-color=default]{
+  fill:var(--iui-icon-color);
+}
+@media (forced-colors: active){
+  [data-iui-icon-color=default]{
+    fill:CanvasText;
+  }
+}
+
+[data-iui-icon-color=informational]{
+  fill:var(--iui-icon-color-primary);
+}
+
+[data-iui-icon-color=positive]{
+  fill:var(--iui-icon-color-positive);
+}
+
+[data-iui-icon-color=warning]{
+  fill:var(--iui-icon-color-warning);
+}
+
+[data-iui-icon-color=negative]{
+  fill:var(--iui-icon-color-negative);
+}
+
+.iui-input-container{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  display:grid;
+  grid-template:"label label" "inputs inputs"/auto 1fr;
+  cursor:default;
+}
+.iui-input-container.iui-inline-icon > .iui-input{
+  padding-right:40px;
+}
+.iui-input-container.iui-inline-icon > .iui-input:last-child{
+  padding-right:12px;
+}
+.iui-input-container.iui-with-message{
+  grid-template:"label label" "inputs inputs" "icon message"/auto 1fr;
+}
+.iui-input-container.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
+  margin-top:4px;
+}
+.iui-input-container .iui-input,
+.iui-input-container .iui-input-with-icon,
+.iui-input-container .iui-input-group{
+  grid-area:inputs;
+}
+.iui-input-container .iui-input-group .iui-toggle-switch-wrapper{
+  padding:6px 0;
+}
+label.iui-input-container{
+  cursor:pointer;
+}
+label.iui-input-container.iui-disabled{
+  cursor:not-allowed;
+}
+
+.iui-input-container.iui-disabled label{
+  cursor:not-allowed;
+}
+.iui-input-container .iui-checkbox-wrapper,
+.iui-input-container .iui-radio-wrapper{
+  min-height:24px;
+}
+.iui-input-container.iui-inline-label{
+  grid-template:"label inputs icon"/auto 1fr auto;
+}
+.iui-input-container.iui-inline-label.iui-with-message{
+  grid-template:"label inputs inputs" ". icon message"/auto auto 1fr;
+}
+.iui-input-container.iui-inline-label > .iui-input-group{
+  display:flex;
+  gap:16px;
+}
+.iui-input-container.iui-inline-label > .iui-input-group:not(:last-child){
+  margin-right:16px;
+}
+.iui-input-container > .iui-label{
+  font-weight:600;
+  margin-bottom:4px;
+  grid-area:label;
+  align-self:center;
+}
+.iui-input-container > .iui-label.iui-required::after{
+  content:"*";
+  margin-left:4px;
+  color:var(--iui-color-foreground-negative);
+}
+.iui-input-container .iui-input-icon{
+  display:flex;
+  flex-shrink:0;
+  width:16px;
+  height:16px;
+  fill:var(--iui-icon-color);
+  grid-area:icon;
+  align-self:center;
+}
+@media (forced-colors: active){
+  .iui-input-container .iui-input-icon{
+    fill:CanvasText;
+  }
+}
+.iui-input-container .iui-input-icon:not(:last-child){
+  margin-right:4px;
+}
+.iui-input-container .iui-message{
+  font-size:12px;
+  grid-area:message;
+  margin-top:4px;
+  color:var(--iui-text-color-muted);
+}
+.iui-input-container .iui-message a{
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+}
+.iui-input-container.iui-inline-icon > .iui-input-icon{
+  grid-area:inputs;
+  justify-self:end;
+  margin:0 14px 0 0;
+  position:relative;
+}
+.iui-input-container.iui-inline-icon > .iui-input-icon svg{
+  display:flex;
+  flex-shrink:0;
+  width:16px;
+  height:16px;
+}
+.iui-input-container.iui-inline-icon > .iui-input-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-input-container.iui-inline-icon > .iui-input-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-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:hover{
+  background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%;
+}
+.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:active{
+  background-color:var(--iui-color-background-2);
+  background-size:100%;
+  transition:background 0s;
+}
+.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
+  fill:var(--iui-icon-color-actionable);
+  transition:transform 0.2s ease-out;
+}
+.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
+  transform:rotate(180deg);
+}
+.iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled{
+  cursor:not-allowed;
+}
+.iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled svg{
+  fill:var(--iui-icon-color-actionable-disabled);
+}
+.iui-input-container.iui-inline-label > .iui-label{
+  margin:0 16px 0 0;
+}
+.iui-input-container.iui-inline-label > .iui-label.iui-required{
+  margin-right:6px;
+}
+.iui-input-container.iui-positive::-moz-selection, .iui-input-container.iui-positive *::-moz-selection{
+  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+}
+.iui-input-container.iui-positive::selection,
+.iui-input-container.iui-positive *::selection{
+  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+}
+.iui-input-container.iui-positive .iui-input-icon{
+  fill:var(--iui-color-foreground-positive);
+}
+.iui-input-container.iui-positive .iui-message{
+  color:var(--iui-color-foreground-positive);
+}
+.iui-input-container.iui-positive .iui-message a{
+  text-decoration:underline;
+  color:var(--iui-color-foreground-positive);
+}
+.iui-input-container.iui-positive .iui-message a:hover{
+  text-decoration:none;
+  color:var(--iui-color-foreground-positive-overlay);
+}
+.iui-input-container.iui-positive .iui-input{
+  padding-bottom:6px;
+  border-bottom:2px solid var(--iui-color-foreground-positive);
+}
+.iui-input-container.iui-positive .iui-input.iui-small{
+  padding-bottom:0px;
+}
+.iui-input-container.iui-positive .iui-input.iui-large{
+  padding-bottom:12px;
+}
+.iui-input-container.iui-positive .iui-input:focus{
+  border-bottom:2px solid var(--iui-color-foreground-positive);
+  outline:2px solid var(--iui-color-foreground-positive);
+  outline-offset:-2px;
+}
+.iui-input-container.iui-positive .iui-input-with-icon{
+  --_hover-color:var(--iui-color-foreground-positive);
+  --_focus-color:var(--iui-color-foreground-positive);
+}
+.iui-input-container.iui-positive .iui-select-button{
+  border-bottom:transparent;
+}
+.iui-input-container.iui-positive .iui-select-button::after{
+  content:"";
+  width:100%;
+  position:absolute;
+  bottom:0;
+  left:0;
+  height:2px;
+  background-color:var(--iui-color-foreground-positive);
+}
+.iui-input-container.iui-negative::-moz-selection, .iui-input-container.iui-negative *::-moz-selection{
+  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+}
+.iui-input-container.iui-negative::selection,
+.iui-input-container.iui-negative *::selection{
+  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+}
+.iui-input-container.iui-negative .iui-input-icon{
+  fill:var(--iui-color-foreground-negative);
+}
+.iui-input-container.iui-negative .iui-message{
+  color:var(--iui-color-foreground-negative);
+}
+.iui-input-container.iui-negative .iui-message a{
+  text-decoration:underline;
+  color:var(--iui-color-foreground-negative);
+}
+.iui-input-container.iui-negative .iui-message a:hover{
+  text-decoration:none;
+  color:var(--iui-color-foreground-negative-overlay);
+}
+.iui-input-container.iui-negative .iui-input{
+  padding-bottom:6px;
+  border-bottom:2px solid var(--iui-color-foreground-negative);
+}
+.iui-input-container.iui-negative .iui-input.iui-small{
+  padding-bottom:0px;
+}
+.iui-input-container.iui-negative .iui-input.iui-large{
+  padding-bottom:12px;
+}
+.iui-input-container.iui-negative .iui-input:focus{
+  border-bottom:2px solid var(--iui-color-foreground-negative);
+  outline:2px solid var(--iui-color-foreground-negative);
+  outline-offset:-2px;
+}
+.iui-input-container.iui-negative .iui-input-with-icon{
+  --_hover-color:var(--iui-color-foreground-negative);
+  --_focus-color:var(--iui-color-foreground-negative);
+}
+.iui-input-container.iui-negative .iui-select-button{
+  border-bottom:transparent;
+}
+.iui-input-container.iui-negative .iui-select-button::after{
+  content:"";
+  width:100%;
+  position:absolute;
+  bottom:0;
+  left:0;
+  height:2px;
+  background-color:var(--iui-color-foreground-negative);
+}
+.iui-input-container.iui-warning::-moz-selection, .iui-input-container.iui-warning *::-moz-selection{
+  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+}
+.iui-input-container.iui-warning::selection,
+.iui-input-container.iui-warning *::selection{
+  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+}
+.iui-input-container.iui-warning .iui-input-icon{
+  fill:var(--iui-color-foreground-warning);
+}
+.iui-input-container.iui-warning .iui-message{
+  color:var(--iui-color-foreground-warning);
+}
+.iui-input-container.iui-warning .iui-message a{
+  text-decoration:underline;
+  color:var(--iui-color-foreground-warning);
+}
+.iui-input-container.iui-warning .iui-message a:hover{
+  text-decoration:none;
+  color:var(--iui-color-foreground-warning-overlay);
+}
+.iui-input-container.iui-warning .iui-input{
+  padding-bottom:6px;
+  border-bottom:2px solid var(--iui-color-foreground-warning);
+}
+.iui-input-container.iui-warning .iui-input.iui-small{
+  padding-bottom:0px;
+}
+.iui-input-container.iui-warning .iui-input.iui-large{
+  padding-bottom:12px;
+}
+.iui-input-container.iui-warning .iui-input:focus{
+  border-bottom:2px solid var(--iui-color-foreground-warning);
+  outline:2px solid var(--iui-color-foreground-warning);
+  outline-offset:-2px;
+}
+.iui-input-container.iui-warning .iui-input-with-icon{
+  --_hover-color:var(--iui-color-foreground-warning);
+  --_focus-color:var(--iui-color-foreground-warning);
+}
+.iui-input-container.iui-warning .iui-select-button{
+  border-bottom:transparent;
+}
+.iui-input-container.iui-warning .iui-select-button::after{
+  content:"";
+  width:100%;
+  position:absolute;
+  bottom:0;
+  left:0;
+  height:2px;
+  background-color:var(--iui-color-foreground-warning);
+}
+
+.iui-input-label{
+  font-weight:600;
+  margin-bottom:4px;
+  cursor:default;
+  display:block;
+}
+.iui-input-label.iui-required::after{
+  content:"*";
+  margin-left:4px;
+  color:var(--iui-color-foreground-negative);
+}
+label.iui-input-label{
+  cursor:pointer;
+}
+label.iui-input-label.iui-disabled{
+  cursor:not-allowed;
+}
+
+.iui-input-label.iui-inline{
+  margin:0 16px 0 0;
+  display:inline-flex;
+  align-items:center;
+}
+.iui-input-label.iui-inline.iui-required{
+  margin-right:6px;
+}
+
+.iui-notification-primary{
+  position:relative;
+}
+.iui-notification-primary::before{
+  content:"";
+  position:absolute;
+  width:12px;
+  height:12px;
+  top:-6px;
+  right:-6px;
+  border-radius:100%;
+  background-color:var(--iui-color-foreground-primary);
+  border:2px solid var(--iui-color-background-1);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-primary::before{
+    transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-primary.iui-urgent::before{
+    -webkit-animation:pulse-primary 2s infinite;
+            animation:pulse-primary 2s infinite;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  @-webkit-keyframes pulse-primary{
+    0%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0);
+    }
+  }
+  @keyframes pulse-primary{
+    0%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0);
+    }
+  }
+}
+
+.iui-notification-positive{
+  position:relative;
+}
+.iui-notification-positive::before{
+  content:"";
+  position:absolute;
+  width:12px;
+  height:12px;
+  top:-6px;
+  right:-6px;
+  border-radius:100%;
+  background-color:var(--iui-color-foreground-positive);
+  border:2px solid var(--iui-color-background-1);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-positive::before{
+    transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-positive.iui-urgent::before{
+    -webkit-animation:pulse-positive 2s infinite;
+            animation:pulse-positive 2s infinite;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  @-webkit-keyframes pulse-positive{
+    0%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-1));
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-positive-rgb), 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), 0);
+    }
+  }
+  @keyframes pulse-positive{
+    0%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-1));
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-positive-rgb), 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), 0);
+    }
+  }
+}
+
+.iui-notification-warning{
+  position:relative;
+}
+.iui-notification-warning::before{
+  content:"";
+  position:absolute;
+  width:12px;
+  height:12px;
+  top:-6px;
+  right:-6px;
+  border-radius:100%;
+  background-color:var(--iui-color-foreground-warning);
+  border:2px solid var(--iui-color-background-1);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-warning::before{
+    transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-warning.iui-urgent::before{
+    -webkit-animation:pulse-warning 2s infinite;
+            animation:pulse-warning 2s infinite;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  @-webkit-keyframes pulse-warning{
+    0%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1));
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0);
+    }
+  }
+  @keyframes pulse-warning{
+    0%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1));
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0);
+    }
+  }
+}
+
+.iui-notification-negative{
+  position:relative;
+}
+.iui-notification-negative::before{
+  content:"";
+  position:absolute;
+  width:12px;
+  height:12px;
+  top:-6px;
+  right:-6px;
+  border-radius:100%;
+  background-color:var(--iui-color-foreground-negative);
+  border:2px solid var(--iui-color-background-1);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-negative::before{
+    transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-negative.iui-urgent::before{
+    -webkit-animation:pulse-negative 2s infinite;
+            animation:pulse-negative 2s infinite;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  @-webkit-keyframes pulse-negative{
+    0%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1));
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0);
+    }
+  }
+  @keyframes pulse-negative{
+    0%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1));
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0);
+    }
+  }
+}
+
+.iui-notification-accessory{
+  position:relative;
+}
+.iui-notification-accessory::before{
+  content:"";
+  position:absolute;
+  width:12px;
+  height:12px;
+  top:-6px;
+  right:-6px;
+  border-radius:100%;
+  background-color:var(--iui-color-foreground-accessory);
+  border:2px solid var(--iui-color-background-1);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-accessory::before{
+    transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-accessory.iui-urgent::before{
+    -webkit-animation:pulse-accessory 2s infinite;
+            animation:pulse-accessory 2s infinite;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  @-webkit-keyframes pulse-accessory{
+    0%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1));
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-accessory-rgb), 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0);
+    }
+  }
+  @keyframes pulse-accessory{
+    0%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1));
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-accessory-rgb), 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0);
+    }
+  }
+}
+.iui-popover.tippy-box{
+  all:revert;
+}
+.iui-popover.tippy-box[data-reference-hidden]{
+  visibility:hidden;
+  pointer-events:none;
+}
+.iui-popover .tippy-content{
+  all:revert;
+}