ids-enterprise-wc 1.0.0-beta.10 → 1.0.0-beta.11

package/components/ids-empty-message/ids-empty-message.css

@@ -1,37 +0,0 @@
-.ids-empty-message {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 310px;
-}
-.ids-empty-message .button {
-  margin-block-end: var(--ids-empty-message-button-margin-block-end);
-}
-.ids-empty-message .icon {
-  fill: var(--ids-empty-message-icon-fill);
-  color: var(--ids-empty-message-icon-color);
-  margin: var(--ids-empty-message-icon-margin);
-  height: var(--ids-empty-message-icon-height);
-  width: var(--ids-empty-message-icon-width);
-}
-.ids-empty-message .label {
-  padding: var(--ids-empty-message-label-padding);
-}
-.ids-empty-message .label ::slotted(span) {
-  font-size: var(--ids-empty-message-label-font-size);
-}
-.ids-empty-message .description {
-  padding: var(--ids-empty-message-description-padding);
-  text-align: var(--ids-empty-message-description-text-align);
-}
-@media all and (max-width: 600px) {
-  .ids-empty-message {
-    max-width: 340px;
-  }
-}
-@media all and (max-width: 360px) {
-  .ids-empty-message {
-    max-width: 260px;
-  }
-}

package/components/ids-error-page/ids-error-page.css

@@ -1,3 +0,0 @@
-ids-popup::part(popup) {
-  max-width: 335px;
-}

package/components/ids-expandable-area/ids-expandable-area.css

@@ -1,52 +0,0 @@
-.ids-expandable-area {
-  border-bottom: var(--ids-expandable-area-border-bottom);
-  contain: content;
-  padding: calc(var(--ids-spacing-lg) * 3) var(--ids-spacing-none);
-}
-.ids-expandable-area .expandable-pane-content {
-  margin-block-start: calc(var(--ids-spacing-lg) * 2);
-}
-
-:host([type=toggle-btn]) .ids-expandable-area-header {
-  margin-block-end: var(--ids-spacing-lg);
-}
-
-:host([type=partial]) .ids-expandable-area-visible-pane .expandable-pane-content {
-  margin-block-start: calc(var(--ids-spacing-lg) * 3);
-}
-:host([type=partial]) .ids-expandable-area-pane .expandable-pane-content {
-  margin-block-start: var(--ids-spacing-none);
-}
-
-.ids-expandable-area-header ::slotted(ids-text) {
-  display: block;
-  margin-block-end: var(--ids-spacing-lg);
-}
-
-.ids-expandable-area-footer ::slotted(ids-hyperlink),
-.ids-expandable-area-footer ::slotted(ids-text) {
-  display: block;
-  margin-block-start: var(--ids-spacing-none);
-  margin-block-end: calc(var(--ids-spacing-lg) * -1);
-}
-
-[data-expander=link] {
-  display: inline-block;
-}
-[data-expander=link][aria-expanded=true] {
-  margin-block-start: var(--ids-spacing-lg);
-}
-
-[data-expander=header] {
-  pointer-events: none;
-}
-
-[data-expander=header] [name=header] {
-  pointer-events: initial;
-}
-
-.ids-expandable-area-pane {
-  height: var(--ids-spacing-none);
-  overflow: hidden;
-  transition: height var(--ids-transition-length) var(--ids-transition-ease);
-}

package/components/ids-fieldset/ids-fieldset.css

@@ -1,10 +0,0 @@
-/* Ids Fieldset CSS */
-fieldset {
-  border: var(--ids-spacing-none);
-  contain: content;
-}
-
-fieldset > ::slotted(legend),
-fieldset > legend {
-  padding-block-end: var(--ids-spacing-xxl);
-}

package/components/ids-header/ids-header.css

@@ -1,14 +0,0 @@
-/* Ids Header Component */
-.ids-header {
-  background-color: var(--ids-header-background-color);
-  color: var(--ids-header-text-color);
-  display: flex;
-  flex-direction: column;
-  transition: background-color var(--ids-transition-length) var(--ids-transition-ease), color var(--ids-transition-length) var(--ids-transition-ease);
-  width: 100%;
-}
-
-::slotted(ids-toolbar),
-.ids-toolbar {
-  padding: var(--ids-header-padding);
-}

package/components/ids-hierarchy/ids-hierarchy.css

@@ -1,123 +0,0 @@
-.ids-hierarchy-item {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  padding-inline-start: calc(var(--ids-spacing-lg) * 12);
-}
-@media all and (max-width: 600px) {
-  .ids-hierarchy-item {
-    padding-inline-start: var(--ids-spacing-none);
-  }
-}
-
-.leaf {
-  border: var(--ids-spacing-xs) solid var(--ids-hierarchy-item-leaf-border-color);
-  margin-block-end: calc(var(--ids-spacing-lg) * 4);
-  box-shadow: var(--ids-hierarchy-item-leaf-box-shadow);
-  border-radius: var(--ids-hierarchy-item-leaf-border-radius);
-  position: relative;
-  width: 315px;
-}
-.leaf::before {
-  display: block;
-  position: absolute;
-  border-bottom: 1.34px solid var(--ids-hierarchy-item-leaf-before-border-color);
-  border-left: 1.34px solid var(--ids-hierarchy-item-leaf-before-border-color);
-  content: "";
-  height: 110px;
-  left: -30px;
-  top: -70px;
-  width: 50%;
-  z-index: 0;
-}
-
-.leaf-inside {
-  align-items: center;
-  background-color: var(--ids-hierarchy-item-leaf-inside-background-color);
-  border-left: var(--ids-hierarchy-item-leaf-inside-border-left);
-  box-shadow: var(--ids-hierarchy-item-leaf-inside-box-shadow);
-  padding: var(--ids-spacing-lg) calc(var(--ids-spacing-lg) * 2);
-  position: relative;
-  display: flex;
-  z-index: 1;
-}
-
-.avatar {
-  flex-shrink: 0;
-  display: block;
-  height: 55px;
-  width: 55px;
-  border: var(--ids-hierarchy-item-avatar-border);
-  border-radius: 100%;
-  margin-inline-end: calc(var(--ids-spacing-lg) * 2);
-  overflow: hidden;
-}
-.avatar ::slotted(img) {
-  max-width: 100%;
-}
-
-:host([root-item]) .leaf::before {
-  display: none;
-}
-:host([root-item]) .ids-hierarchy-item {
-  padding-inline-start: var(--ids-spacing-none);
-}
-
-@media all and (max-width: 600px) {
-  :host([root-item][expanded]) .leaf::before {
-    border-left: none;
-    display: block;
-  }
-}
-
-:host(:focus) {
-  outline: none;
-  border: none;
-  border-color: transparent;
-  box-shadow: var(--ids-hierarchy-item-focus-box-shadow);
-}
-
-:host([selected]) .leaf {
-  box-shadow: var(--ids-hierarchy-item-selected-leaf-box-shadow);
-}
-
-div[part=actions] {
-  margin-inline-start: auto;
-  display: flex;
-}
-
-ids-button[part=icon-menu] {
-  margin-right: var(--ids-spacing-md);
-}
-ids-button[part=icon-menu] .ids-icon-button {
-  padding: var(--ids-spacing-md);
-}
-
-ids-button[part=icon-btn] {
-  display: none;
-  cursor: pointer;
-}
-ids-button[part=icon-btn] .ids-icon-button {
-  padding: var(--ids-spacing-md);
-}
-
-:host([expanded]) ids-button[part=icon-btn] ids-icon {
-  transform: rotate(180deg);
-}
-
-.has-nested-items ids-button[part=icon-btn] {
-  display: block;
-}
-
-.sub-level {
-  display: none;
-}
-
-:host([expanded]) .sub-level {
-  display: block;
-}
-
-::slotted([slot=menu]) {
-  position: relative;
-}

package/components/ids-home-page/ids-home-page.css

@@ -1,11 +0,0 @@
-/* Ids Home page Component */
-.ids-home-page {
-  position: relative;
-}
-.ids-home-page .cards {
-  position: absolute;
-  left: 50%;
-}
-.ids-home-page ::slotted(ids-card) {
-  position: absolute;
-}

package/components/ids-hyperlink/ids-hyperlink.css

@@ -1,116 +0,0 @@
-/* Ids Hyperlink Component */
-.ids-hyperlink {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  border: 1px solid transparent;
-  border-radius: var(--ids-hyperlink-border-radius);
-  cursor: var(--ids-hyperlink-cursor);
-  display: inline-block;
-  font-family: var(--ids-font-family);
-  font-size: var(--ids-hyperlink-font-size);
-  font-weight: var(--ids-hyperlink-font-weight);
-  padding: var(--ids-hyperlink-padding);
-  position: relative;
-  margin: calc(var(--ids-hyperlink-padding) * -1);
-  /* Ids Typography System */
-}
-.ids-hyperlink.disabled, .ids-hyperlink[disabled] {
-  cursor: var(--ids-cursor-default);
-  pointer-events: none;
-  user-select: none;
-}
-.ids-hyperlink:focus {
-  outline: none;
-}
-.ids-hyperlink.bold {
-  font-weight: var(--ids-font-weight-bold);
-}
-.ids-hyperlink.hitbox::after {
-  content: "";
-  display: block;
-  height: var(--ids-size-md);
-  top: 50%;
-  left: 0;
-  position: absolute;
-  transform: translateY(-50%);
-  width: 100%;
-}
-.ids-hyperlink.ids-text-10 {
-  font-size: var(--ids-font-size-xxs);
-  text-transform: var(--ids-text-transform);
-}
-.ids-hyperlink.ids-text-12, .ids-hyperlink.ids-text-xs {
-  font-size: var(--ids-font-size-xs);
-  text-transform: var(--ids-text-transform);
-}
-.ids-hyperlink.ids-text-14, .ids-hyperlink.ids-text-sm {
-  font-size: var(--ids-font-size-sm);
-}
-.ids-hyperlink.ids-text-16, .ids-hyperlink.ids-text, .ids-hyperlink.ids-text-base {
-  font-size: var(--ids-font-size-md);
-}
-.ids-hyperlink.ids-text-20 {
-  font-size: var(--ids-font-size-lg);
-}
-.ids-hyperlink.ids-text-24, .ids-hyperlink.ids-text-lg {
-  font-size: var(--ids-font-size-xxl);
-}
-.ids-hyperlink.ids-text-28 {
-  font-size: var(--ids-font-size-xxl);
-}
-.ids-hyperlink.ids-text-32, .ids-hyperlink.ids-text-xl {
-  font-size: var(--ids-font-size-3xl);
-}
-.ids-hyperlink.ids-text-40 {
-  font-size: var(--ids-font-size-4xl);
-}
-.ids-hyperlink.ids-text-48 {
-  font-size: var(--ids-font-size-5xl);
-}
-.ids-hyperlink.ids-text-60 {
-  font-size: var(--ids-font-size-6xl);
-}
-.ids-hyperlink.ids-text-72 {
-  font-size: var(--ids-font-size-7xl);
-  margin-bottom: 0;
-}
-.ids-hyperlink:not(.ids-hyperlink-color-unset) {
-  color: var(--ids-hyperlink-text-color);
-}
-.ids-hyperlink:not(.ids-hyperlink-color-unset):focus {
-  border: 1px solid var(--ids-hyperlink-text-color);
-  box-shadow: var(--ids-focus-box-shadow);
-}
-.ids-hyperlink:not(.ids-hyperlink-color-unset):hover:not([disabled]):not(.ids-text-decoration-hover):not(.disabled), .ids-hyperlink:not(.ids-hyperlink-color-unset):active:not([disabled]):not(.ids-text-decoration-hover):not(.disabled) {
-  color: var(--ids-hyperlink-hover-text-color);
-}
-.ids-hyperlink:not(.ids-hyperlink-color-unset).disabled, .ids-hyperlink:not(.ids-hyperlink-color-unset)[disabled] {
-  color: var(--ids-hyperlink-disabled-text-color);
-}
-.ids-hyperlink:not(.ids-hyperlink-color-unset).color-variant-breadcrumb {
-  color: var(--ids-breadcrumb-text-color);
-}
-.ids-hyperlink:not(.ids-hyperlink-color-unset).color-variant-breadcrumb.disabled, .ids-hyperlink:not(.ids-hyperlink-color-unset).color-variant-breadcrumb[disabled] {
-  color: var(--ids-breadcrumb-disabled-text-color);
-}
-.ids-hyperlink:not(.ids-hyperlink-color-unset).color-variant-alternate {
-  color: var(--ids-breadcrumb-inverse-text-color);
-}
-
-.ids-text-decoration-none {
-  text-decoration: none;
-}
-.ids-text-decoration-none:hover {
-  text-decoration: none;
-}
-
-.ids-text-decoration-hover {
-  text-decoration: none;
-}
-.ids-text-decoration-hover:hover {
-  text-decoration: underline;
-}
-
-:host(:not([allow-empty-href=false])) .ids-hyperlink:not(.ids-text-decoration-none):not(.color-variant-breadcrumb):not(.ids-text-decoration-hover) {
-  text-decoration: underline;
-}

package/components/ids-icon/ids-icon.css

@@ -1,76 +0,0 @@
-/* Ids Icon Component */
-:root {
-  display: inline-flex;
-  align-self: center;
-  contain: content;
-  place-self: center;
-  position: relative;
-}
-
-:host([hidden]) {
-  display: none;
-}
-
-.vertical {
-  transform: rotate(90deg);
-}
-
-.mirrored {
-  transform: scaleX(-1);
-}
-
-:host([icon=more]) svg,
-:host([icon=vertical-ellipsis]) svg {
-  height: 19px;
-}
-
-:host([icon=add]) svg {
-  width: 17px;
-}
-
-:host([icon^=empty-]) {
-  color: var(--ids-icon-empty-icon-color);
-}
-
-:host([icon^=empty-][icon$=-new]) {
-  color: var(--ids-icon-empty-new-icon-color);
-}
-
-.notification-badge {
-  background-color: var(--ids-notification-badge-error-background-color);
-  border-radius: var(--ids-notification-badge-border-radius);
-  height: var(--ids-notification-badge-size);
-  width: var(--ids-notification-badge-size);
-  position: absolute;
-  /**
-  * positioning notification badge
-  */
-}
-.notification-badge.info, .notification-badge.base {
-  background-color: var(--ids-notification-badge-info-background-color);
-}
-.notification-badge.error {
-  background-color: var(--ids-notification-badge-error-background-color);
-}
-.notification-badge.success {
-  background-color: var(--ids-notification-badge-success-background-color);
-}
-.notification-badge.warning {
-  background-color: var(--ids-notification-badge-warning-background-color);
-}
-.notification-badge.top-right {
-  bottom: 75%;
-  left: 75%;
-}
-.notification-badge.top-left {
-  bottom: 75%;
-  left: 0;
-}
-.notification-badge.bottom-right {
-  bottom: 0;
-  left: 75%;
-}
-.notification-badge.bottom-left {
-  bottom: 0;
-  left: 0;
-}

package/components/ids-image/ids-image.css

@@ -1,150 +0,0 @@
-:root {
-  display: inline-block;
-  max-width: 100%;
-}
-
-:host([size=sm]) .ids-image,
-.ids-image.sm {
-  width: 60px;
-  height: 60px;
-}
-
-:host([size=md]) .ids-image,
-.ids-image.md {
-  width: 154px;
-  height: 120px;
-}
-
-:host([size=lg]) .ids-image,
-.ids-image.lg {
-  width: 300px;
-  height: 350px;
-}
-
-:host(:focus-visible) {
-  outline: none;
-}
-
-:host(:focus) .ids-image,
-:host(:focus-visible) .ids-image {
-  border-color: var(--ids-image-focus-border-color);
-  box-shadow: var(--ids-image-focus-box-shadow);
-}
-
-:host .placeholder,
-.ids-image.placeholder {
-  border-color: var(--ids-image-border-color);
-}
-:host .placeholder ids-icon,
-.ids-image.placeholder ids-icon {
-  color: var(--ids-image-text-color);
-}
-
-:host([round=true]) .ids-image,
-.ids-image.round {
-  border-radius: var(--ids-image-initials-border-radius);
-  min-width: 50px;
-  max-width: 50px;
-  width: 50px;
-  height: 50px;
-}
-
-:host([user-status]),
-.user-status-wrapper {
-  position: relative;
-}
-
-.ids-image {
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  max-width: 100%;
-  height: auto;
-}
-.ids-image:not(.placeholder):not(.initials) {
-  display: block;
-  object-fit: cover;
-}
-.ids-image.placeholder {
-  align-items: center;
-  display: inline-flex;
-  background-color: var(--ids-image-placeholder-background-color);
-  justify-content: center;
-  min-width: 50px;
-  min-height: 50px;
-}
-.ids-image.initials {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  min-width: 50px;
-  min-height: 50px;
-  background-color: var(--ids-image-initials-background-color);
-  color: var(--ids-color-neutral-00);
-  text-transform: uppercase;
-}
-.ids-image .audible {
-  clip: rect(0, 0, 0, 0);
-  height: 0;
-  line-height: 0;
-  min-height: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.user-status {
-  position: absolute;
-  width: 18px;
-  height: 18px;
-  right: -1px;
-  bottom: -3px;
-}
-.user-status.available {
-  color: var(--ids-image-status-available-background-color);
-}
-.user-status.busy, .user-status.do-not-disturb {
-  color: var(--ids-image-status-busy-background-color);
-}
-.user-status.away {
-  color: var(--ids-image-status-away-background-color);
-}
-.user-status.unknown {
-  color: var(--ids-image-status-unknown-background-color);
-}
-.user-status::before {
-  position: absolute;
-  border-radius: var(--ids-border-radius-round);
-  background-color: var(--ids-color-neutral-00);
-  content: "";
-  width: 12px;
-  height: 12px;
-  left: 3px;
-  top: 3px;
-  z-index: 1;
-}
-.user-status::after {
-  position: absolute;
-  border-radius: var(--ids-border-radius-round);
-  background-color: var(--ids-body-background-color);
-  content: "";
-  width: 16px;
-  height: 16px;
-  left: 1px;
-  top: 1px;
-}
-.user-status ids-icon {
-  z-index: 1;
-}
-
-.user-status-wrapper .user-status {
-  position: unset;
-  width: 18px;
-  height: 18px;
-  margin-left: 36px;
-  margin-top: -18px;
-}
-.user-status-wrapper .user-status svg {
-  border-radius: var(--ids-border-radius-round);
-  background-color: var(--ids-body-background-color);
-}