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

package/scss/dialog/dialog.scss

@@ -1,178 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import '../style/index';
-@import '../utils/index';
-
-$iui-dialog-width: 380px;
-
-@mixin iui-dialog-wrapper {
-  position: relative;
-  overflow: hidden;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  transform: translateX(0); // creates containing block for position: fixed
-}
-
-@mixin iui-dialog {
-  z-index: 999;
-  isolation: isolate;
-  border-radius: $iui-border-radius;
-  box-shadow: $iui-elevation-24;
-  position: fixed;
-  padding: $iui-baseline $iui-m;
-  overflow: hidden;
-  pointer-events: auto;
-  background-color: var(--iui-color-background-1);
-  @media (forced-colors: active) {
-    border: 1px solid;
-  }
-
-  &:not(.iui-dialog-visible) {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  transition: visibility $iui-speed-instant linear, opacity $iui-speed-fast ease-out;
-  transition-delay: $iui-speed-fast, $iui-speed-instant;
-
-  &.iui-dialog-visible {
-    transition-delay: $iui-speed-instant; // remove delay for entry animation
-  }
-}
-
-@mixin iui-dialog-default {
-  max-width: Max(50%, $iui-dialog-width);
-  min-width: $iui-dialog-width;
-  max-height: 100vh;
-}
-
-@mixin iui-dialog-placement {
-  &:not([data-iui-placement]) {
-    left: 50%;
-    top: 33%;
-    transform: translate(-50%, -33%);
-  }
-
-  &[data-iui-placement='top-left'] {
-    top: 0;
-    left: 0;
-    margin-left: $iui-baseline;
-    margin-top: $iui-m;
-  }
-
-  &[data-iui-placement='top-right'] {
-    top: 0;
-    right: 0;
-    margin-right: $iui-baseline;
-    margin-top: $iui-m;
-  }
-
-  &[data-iui-placement='bottom-left'] {
-    bottom: 0;
-    left: 0;
-    margin-left: $iui-baseline;
-    margin-bottom: $iui-m;
-  }
-
-  &[data-iui-placement='bottom-right'] {
-    bottom: 0;
-    right: 0;
-    margin-right: $iui-baseline;
-    margin-bottom: $iui-m;
-  }
-}
-
-@mixin iui-dialog-full-page {
-  border-radius: 0;
-  height: 100vh;
-  height: 100dvh;
-  width: 100vw;
-  top: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  will-change: transform;
-
-  &:not(.iui-dialog-visible) {
-    transform: translateY(100%);
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    transition: visibility $iui-speed-instant linear $iui-speed, opacity $iui-speed-instant linear $iui-speed,
-      transform $iui-speed-fast ease-in;
-
-    &.iui-dialog-visible {
-      transition: transform $iui-speed ease-out;
-    }
-  }
-}
-
-@mixin iui-dialog-draggable {
-  max-width: 100%;
-  max-height: 100vh;
-  min-width: $iui-dialog-width;
-  min-height: 144px;
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--iui-color-background-border);
-}
-
-@mixin iui-dialog-animation {
-  &-enter {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-
-  &-enter-active {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@mixin iui-dialog-title {
-  font-size: inherit;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 1.5;
-}
-
-@mixin iui-dialog-title-bar {
-  display: flex;
-  align-items: center;
-  margin-bottom: $iui-baseline;
-  justify-content: space-between;
-  font-size: $iui-font-size-subheading;
-}
-
-@mixin iui-dialog-title-bar-filled {
-  font-size: $iui-font-size-leading;
-  padding: round($iui-baseline * 0.5) $iui-m;
-  margin: -#{$iui-baseline} -#{$iui-m} $iui-baseline -#{$iui-m}; // negative margin to counteract dialog padding
-  cursor: grab;
-  background-color: var(--iui-color-background-3);
-  border-bottom: 1px solid var(--iui-color-background-border);
-
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-@mixin iui-dialog-content {
-  flex-grow: 2;
-  margin: 0 -#{$iui-m};
-  padding: 0 $iui-m;
-  overflow-y: auto;
-  overflow-y: overlay;
-}
-
-@mixin iui-dialog-button-bar {
-  margin-top: $iui-baseline;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: $iui-s;
-}

package/scss/dialog/index.scss

@@ -1,3 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './dialog';

package/scss/expandable-block/block.scss

@@ -1,165 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import '../style/index';
-@import '../utils/index';
-@import '../icon/index';
-
-@mixin iui-expandable-block {
-  @include iui-reset;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  background-color: var(--iui-color-background-1);
-
-  > .iui-header {
-    @include iui-focus;
-    display: flex;
-    align-items: center;
-    padding: $iui-baseline $iui-sm;
-    cursor: pointer;
-    user-select: none;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: background-color $iui-speed-fast ease-out;
-    }
-    border: 1px solid var(--iui-color-background-3);
-    border-bottom-color: var(--iui-color-background-4);
-    background-color: var(--iui-color-background-3);
-
-    > .iui-icon,
-    > .iui-status-icon {
-      display: inline-flex;
-      flex-shrink: 0;
-      width: $iui-icons-default;
-      height: $iui-icons-default;
-    }
-
-    > .iui-icon {
-      @media (prefers-reduced-motion: no-preference) {
-        transition: transform $iui-speed-fast ease-out;
-      }
-      fill: var(--iui-icons-color-actionable);
-    }
-
-    > .iui-status-icon {
-      margin-left: $iui-sm;
-      @include iui-icons-color;
-    }
-
-    .iui-expandable-block-label {
-      display: flex;
-      flex-direction: column;
-      flex: auto;
-      min-width: 0;
-      margin-left: $iui-sm;
-      @media (prefers-reduced-motion: no-preference) {
-        transition: color $iui-speed-fast ease;
-      }
-      color: var(--iui-text-color);
-    }
-
-    .iui-title,
-    .iui-caption {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .iui-title {
-      font-size: $iui-font-size-leading;
-    }
-
-    .iui-caption {
-      font-size: $iui-font-size-small;
-      color: var(--iui-text-color-muted);
-    }
-
-    @include iui-focus;
-  }
-
-  .iui-expandable-content {
-    overflow: hidden;
-    border-bottom: 1px solid var(--iui-color-background-4);
-    border-right: 1px solid var(--iui-color-background-4);
-    border-left: 1px solid var(--iui-color-background-4);
-
-    @include iui-transition-group;
-
-    // padding should be in a separate div because otherwise it messes up height transition
-    > div {
-      padding: $iui-baseline $iui-sm;
-    }
-  }
-
-  &:hover {
-    > .iui-header {
-      background-color: var(--iui-color-background-4);
-
-      > .iui-icon {
-        fill: var(--iui-icons-color-actionable-hover);
-      }
-
-      .iui-caption,
-      .iui-title {
-        color: var(--iui-color-foreground-body);
-        @media (prefers-reduced-motion: no-preference) {
-          transition: color $iui-speed-fast ease;
-        }
-      }
-    }
-  }
-
-  &.iui-expanded {
-    > .iui-header {
-      background-color: var(--iui-color-background-3);
-      border-left: 1px solid var(--iui-color-background-4);
-      border-top: 1px solid var(--iui-color-background-4);
-      border-right: 1px solid var(--iui-color-background-4);
-
-      &:hover {
-        background-color: var(--iui-color-background-4);
-      }
-
-      > .iui-icon {
-        transform: rotate(90deg);
-      }
-    }
-  }
-
-  &.iui-small .iui-header {
-    padding: ($iui-baseline * 0.5) $iui-s;
-
-    > .iui-icon {
-      width: $iui-icons-small;
-      height: $iui-icons-small;
-    }
-
-    > .iui-expandable-block-label {
-      margin-left: $iui-s;
-    }
-
-    > .iui-status-icon {
-      margin-left: $iui-s;
-    }
-  }
-
-  &.iui-borderless {
-    &,
-    .iui-header,
-    .iui-expandable-content {
-      background-color: transparent;
-      border: initial;
-    }
-
-    .iui-header {
-      border-radius: $iui-border-radius;
-
-      &:hover {
-        background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
-      }
-    }
-
-    .iui-expandable-content > div {
-      padding: 0;
-    }
-  }
-}

package/scss/expandable-block/classes.scss

@@ -1,7 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './index';
-
-.iui-expandable-block {
-  @include iui-expandable-block;
-}

package/scss/expandable-block/index.scss

@@ -1,3 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './block';

package/scss/fieldset/classes.scss

@@ -1,7 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './index';
-
-.iui-fieldset {
-  @include iui-fieldset;
-}

package/scss/fieldset/fieldset.scss

@@ -1,29 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import '../style/index';
-@import '../utils/index';
-
-@mixin iui-fieldset {
-  @include iui-reset;
-  padding: $iui-baseline $iui-sm;
-  border-radius: $iui-border-radius;
-  border: 1px solid var(--iui-color-background-border);
-  background-color: var(--iui-color-background-1);
-
-  legend {
-    font-size: $iui-font-size-leading;
-    padding: $iui-component-padding-vertical-small $iui-s;
-    border-radius: $iui-border-radius;
-    user-select: none;
-    background-color: var(--iui-color-background-4);
-    color: var(--iui-text-color);
-  }
-
-  &[disabled] {
-    cursor: not-allowed;
-
-    legend {
-      color: var(--iui-text-color-muted);
-    }
-  }
-}

package/scss/fieldset/index.scss

@@ -1,3 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './fieldset';

package/scss/file-upload/classes.scss

@@ -1,7 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './index';
-
-.iui-file-upload {
-  @include iui-file-upload;
-}

package/scss/file-upload/file-upload.scss

@@ -1,80 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import '../style/index';
-@import '../utils/index';
-@import '../icon/index';
-
-@mixin iui-file-upload {
-  @include iui-reset;
-  font-size: $iui-font-size;
-  font-weight: $iui-font-weight-normal;
-  position: relative;
-  display: flex;
-
-  > .iui-content {
-    visibility: hidden;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    user-select: none;
-    padding: round($iui-baseline * 0.5) $iui-sm;
-    background-color: var(--iui-color-background-2);
-    border: 1px solid var(--iui-color-background-2);
-
-    .iui-browse-input {
-      width: 0.1px;
-      height: 0.1px;
-      opacity: 0;
-      overflow: hidden;
-      position: absolute;
-    }
-
-    > svg,
-    .iui-template-icon {
-      @include iui-icons-3xl;
-      margin-top: $iui-baseline;
-      margin-bottom: $iui-baseline;
-    }
-
-    &:only-child {
-      visibility: visible;
-      position: relative;
-      flex-direction: row;
-
-      &:focus-within {
-        outline: 2px solid var(--iui-color-foreground-primary);
-        outline-offset: -2px;
-      }
-    }
-
-    .iui-template-text {
-      margin-left: $iui-l;
-
-      > label {
-        font-weight: $iui-font-weight-bold;
-      }
-    }
-  }
-
-  &.iui-drag > .iui-content {
-    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));
-    border-color: var(--iui-color-foreground-primary);
-    color: var(--iui-color-foreground-primary);
-    visibility: visible;
-
-    > svg,
-    .iui-template-icon {
-      fill: var(--iui-icons-color-primary);
-    }
-  }
-}

package/scss/file-upload/index.scss

@@ -1,3 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './file-upload';

package/scss/footer/classes.scss

@@ -1,7 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './index';
-
-.iui-legal-footer {
-  @include iui-legal-footer;
-}

package/scss/footer/footer.scss

@@ -1,55 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import '../style/index';
-@import '../anchor/index';
-@import '../utils/index';
-
-@mixin iui-legal-footer {
-  @include iui-reset;
-
-  text-align: center;
-  width: 100%;
-  padding: $iui-baseline 0;
-  font-size: $iui-font-size-small;
-
-  > ul {
-    list-style-type: none;
-    margin: 0 auto;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-
-    > li {
-      display: inline-block;
-      user-select: none;
-      white-space: nowrap;
-      word-break: keep-all;
-      color: var(--iui-text-color-muted);
-
-      .iui-separator {
-        margin: 0 $iui-s;
-        width: 1px;
-        height: $iui-baseline;
-        display: inline-table;
-        background-color: var(--iui-text-color-muted);
-      }
-
-      > a {
-        @include iui-anchor;
-
-        &,
-        &:hover {
-          color: var(--iui-text-color-muted);
-        }
-      }
-    }
-  }
-
-  > .iui-legal-footer-developer {
-    display: block;
-    user-select: all;
-    color: var(--iui-text-color-muted);
-  }
-}

package/scss/footer/index.scss

@@ -1,3 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './footer';

package/scss/header/classes.scss

@@ -1,79 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import './index';
-
-.iui-page-header {
-  @include iui-page-header;
-
-  &[data-iui-size='slim'] {
-    @include iui-page-header-slim;
-  }
-}
-
-.iui-page-header-left,
-.iui-page-header-center,
-.iui-page-header-right {
-  @include iui-page-header-zone;
-}
-
-.iui-page-header-right {
-  @include iui-page-header-right;
-}
-
-.iui-page-header-divider {
-  @include iui-page-header-divider;
-}
-
-.iui-header-breadcrumbs {
-  @include iui-page-header-breadcrumbs;
-}
-
-.iui-header-brand {
-  @include iui-header-brand;
-}
-
-.iui-header-brand-icon {
-  @include iui-header-brand-icon;
-}
-
-.iui-header-brand-label {
-  @include iui-header-brand-label;
-}
-
-.iui-header-breadcrumbs-list {
-  @include iui-breadcrumbs-list;
-}
-
-.iui-page-header-left,
-.iui-header-breadcrumbs,
-.iui-header-breadcrumbs-list {
-  @include iui-page-header-left;
-}
-
-.iui-header-breadcrumb-button {
-  @include iui-header-breadcrumb-button;
-}
-
-.iui-header-breadcrumb-button-split {
-  @include iui-header-breadcrumb-button-split;
-}
-
-.iui-header-breadcrumb-item {
-  @include iui-header-breadcrumb-item;
-}
-
-.iui-header-breadcrumb-button-wrapper {
-  @include iui-header-breadcrumb-button-wrapper;
-}
-
-.iui-header-breadcrumb-button-icon {
-  @include iui-header-breadcrumb-button-icon;
-}
-
-.iui-header-breadcrumb-button-dropdown-icon {
-  @include iui-header-breadcrumb-button-dropdown-icon;
-}
-
-.iui-header-breadcrumb-button-text {
-  @include iui-header-breadcrumb-button-text;
-}