@hazelcast/ui 2.0.4 → 3.0.0-canary.0

package/lib/components/EmptyState.module.scss

@@ -1,87 +0,0 @@
-@use '../../styles/constants' as c;
-
-.container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-
-  .content {
-    .title {
-      margin: c.$grid * 4.5 0 0 0;
-
-      @include c.typographyBodyNormal('bold' !important);
-    }
-
-    .description {
-      color: c.$colorTextSecondary;
-      margin: c.$grid 0 0 0;
-
-      @include c.typographyBodySmall;
-    }
-
-    .action {
-      flex: 1;
-      min-width: c.$emptyStateButtonMinWidthNormal;
-      margin-top: c.$grid * 5;
-    }
-  }
-
-  // Size
-  &.large {
-    .content {
-      .title {
-        margin-top: c.$grid * 5.5;
-      }
-
-      .description {
-        margin-top: c.$grid * 2;
-
-        @include c.typographyBodyNormal;
-      }
-
-      .action {
-        min-width: c.$emptyStateButtonMinWidthLarge;
-        margin-top: c.$grid * 6;
-      }
-    }
-  }
-
-  // Direction
-  &.horizontal {
-    flex: 1;
-    flex-direction: row;
-    text-align: start;
-
-    .icon {
-      flex: 0 0 auto;
-      align-self: flex-start;
-    }
-
-    .content {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      margin-left: c.$grid * 2;
-
-      .title {
-        margin: 0;
-
-        @include c.typographyBodyNormal('bold' !important);
-      }
-
-      .description {
-        margin-top: c.$grid;
-
-        @include c.typographyBodySmall;
-      }
-
-      .action {
-        align-self: flex-start;
-        min-width: auto;
-        margin: c.$grid 0 0 0;
-      }
-    }
-  }
-}

package/lib/components/Error.module.scss

@@ -1,12 +0,0 @@
-@use '../../styles/constants' as c;
-
-.container {
-  @include c.typographyBodySmall;
-
-  color: c.$colorError;
-  display: none;
-
-  &.hasError {
-    display: block;
-  }
-}

package/lib/components/FieldHeader.module.scss

@@ -1,20 +0,0 @@
-@use '../../styles/constants' as c;
-
-.root {
-  display: flex;
-  margin-bottom: c.$grid;
-}
-
-.label {
-  flex-shrink: 0;
-  white-space: pre-wrap;
-
-  &.small {
-    @include c.typographyBodySmall;
-  }
-}
-
-.helperText {
-  flex-shrink: 0;
-  margin-top: c.$grid * 0.5;
-}

package/lib/components/Help.module.scss

@@ -1,9 +0,0 @@
-@use '../../styles/constants' as c;
-
-.container {
-  display: inline-flex;
-  vertical-align: middle;
-  line-height: 1;
-  padding-left: c.$grid;
-  padding-right: c.$grid;
-}

package/lib/components/Icon.module.scss

@@ -1,33 +0,0 @@
-@use '../../styles/constants' as c;
-
-.iconContainer {
-  display: inline-block;
-
-  // Note: Font-size reset in order break inheritance.
-  font-size: 0;
-
-  .small {
-    width: c.$iconSizeSmall;
-    height: c.$iconSizeSmall;
-  }
-
-  .smallMedium {
-    width: c.$iconSizeSmallMedium;
-    height: c.$iconSizeSmallMedium;
-  }
-
-  .medium {
-    width: c.$iconSizeMedium;
-    height: c.$iconSizeMedium;
-  }
-
-  .large {
-    width: c.$iconSizeLarge;
-    height: c.$iconSizeLarge;
-  }
-
-  .xlarge {
-    width: c.$iconSizeXLarge;
-    height: c.$iconSizeXLarge;
-  }
-}

package/lib/components/IconButton.module.scss

@@ -1,59 +0,0 @@
-@use '../../styles/constants' as c;
-@use '../../styles/helpers' as h;
-
-.iconButton {
-  display: inline-flex;
-  cursor: pointer;
-  border: c.$borderWidth solid transparent;
-  background-color: transparent;
-  border-radius: c.$borderRadius;
-  color: inherit;
-  padding: 0;
-  box-sizing: border-box;
-
-  &.paddingNormal {
-    // With icon size "normal" matches text input
-    /* doiuse-disable calc */
-    padding: calc(#{c.$grid * 2} - #{c.$borderWidth});
-    /* doiuse-enable calc */
-  }
-
-  .body {
-    display: inline-flex;
-    vertical-align: middle;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-
-  &.primary {
-    color: c.$colorPrimary;
-
-    &:hover,
-    &.hover {
-      background-color: c.$colorNeutralLighter;
-      border-color: c.$colorNeutralLight;
-    }
-
-    &:disabled {
-      background-color: transparent;
-      border-color: transparent;
-      color: c.$colorTextSecondary;
-    }
-
-    &:focus,
-    &.focus {
-      @include h.outlineFormField;
-    }
-  }
-
-  &.transparent {
-    color: inherit;
-
-    &:focus,
-    &.focus {
-      @include h.outlineFormField;
-    }
-  }
-}

package/lib/components/InteractiveList.module.scss

@@ -1,72 +0,0 @@
-@use 'sass:math';
-@use '../../styles/constants' as c;
-
-$addIconSpacing: c.$grid;
-
-.inputRow {
-  display: flex;
-  margin-bottom: c.$grid * 3;
-
-  .input {
-    border-right: none;
-  }
-
-  .inputBorderOverlay {
-    border-radius: c.$borderRadius 0 0 c.$borderRadius;
-    border-right: none;
-  }
-
-  .inputContainer {
-    border-radius: c.$borderRadius 0 0 c.$borderRadius;
-
-    .input:focus {
-      & ~ .inputBorderOverlay {
-        border-right: none;
-        box-shadow: none;
-        border-color: c.$colorPrimary;
-      }
-    }
-  }
-
-  .addIcon {
-    display: block;
-    border-radius: 0 c.$borderRadius c.$borderRadius 0;
-    border: c.$borderWidth solid c.$colorPrimary;
-    background-color: c.$colorPrimary;
-    color: c.$colorNeutralWhite;
-    height: c.$inputHeight;
-    width: c.$inputHeight;
-
-    &:hover {
-      background-color: c.$colorPrimaryLight;
-      border-color: c.$colorPrimaryLight;
-    }
-  }
-}
-
-ul.list {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-
-  .removeIcon {
-    margin-right: 0;
-
-    &:hover {
-      background-color: transparent;
-      border-color: transparent;
-      color: c.$colorPrimaryLight;
-    }
-  }
-
-  .content {
-    background: c.$colorOverlayBackground;
-    padding: math.div(c.$grid, 3) c.$grid math.div(c.$grid, 3) c.$grid * 2;
-    margin-top: c.$grid * 3;
-    border: c.$borderWidth solid c.$colorNeutralLight;
-    border-radius: c.$borderRadius;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-}

package/lib/components/Label.module.scss

@@ -1,12 +0,0 @@
-@use '../../styles/constants' as c;
-
-.label {
-  @include c.typographyBodyNormal;
-
-  color: c.$colorTextSecondary;
-  padding: 0;
-
-  &.secondary {
-    color: c.$colorNeutralWhite;
-  }
-}

package/lib/components/Link.module.scss

@@ -1,64 +0,0 @@
-@use '../../styles/constants' as c;
-@use '../../styles/helpers' as h;
-
-@mixin link {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  text-decoration: none;
-  border: none;
-  background: none;
-  cursor: pointer;
-
-  &:hover,
-  &.hover,
-  &:focus,
-  &.focus,
-  &:active,
-  &.active {
-    /* doiuse-disable text-decoration */
-    text-decoration: underline solid;
-    outline: transparent solid c.$outlineWidth;
-  }
-
-  &:focus,
-  &.focus {
-    @include h.outlineSimple;
-  }
-
-  &.primary {
-    color: c.$colorPrimary;
-  }
-
-  &.secondary {
-    color: c.$colorTextSecondary;
-  }
-
-  &.contrast {
-    color: c.$colorNeutralLighter;
-  }
-}
-
-.link {
-  @include link;
-}
-
-.normal {
-  @include c.typographyBodyNormal;
-}
-
-.small {
-  @include c.typographyBodySmall;
-}
-
-.inherit {
-  font-family: inherit;
-  font-size: inherit;
-  letter-spacing: inherit;
-  line-height: inherit;
-  font-weight: inherit;
-}
-
-.bold {
-  @include c.typographyBodyWeight('bold');
-}

package/lib/components/Loader.module.scss

@@ -1,74 +0,0 @@
-@use 'sass:math';
-@use '../../styles/constants' as c;
-
-$itemsCnt: 8;
-$duration: c.$durationLoader;
-$delayStep: math.div($duration, $itemsCnt);
-$opacityMax: 1;
-$opacityMin: 0.2;
-
-.loader {
-  &.small {
-    width: c.$iconSizeSmall;
-    height: c.$iconSizeSmall;
-  }
-
-  &.smallMedium {
-    width: c.$iconSizeSmallMedium;
-    height: c.$iconSizeSmallMedium;
-  }
-
-  &.medium {
-    width: c.$iconSizeMedium;
-    height: c.$iconSizeMedium;
-  }
-
-  &.large {
-    width: c.$iconSizeLarge;
-    height: c.$iconSizeLarge;
-  }
-
-  &.xlarge {
-    width: c.$iconSizeXLarge;
-    height: c.$iconSizeXLarge;
-  }
-
-  &.primary {
-    color: c.$colorPrimaryDark;
-  }
-
-  &.contrast {
-    color: c.$colorNeutralWhite;
-  }
-
-  &.inherit {
-    color: inherit;
-  }
-
-  > line {
-    animation-duration: $duration;
-    animation-name: fade;
-    animation-iteration-count: infinite;
-    animation-fill-mode: both;
-  }
-
-  @for $i from 1 through $itemsCnt {
-    > line:nth-child(#{$i}) {
-      animation-delay: $delayStep * ($i - 1);
-    }
-  }
-}
-
-@keyframes fade {
-  0% {
-    opacity: $opacityMax;
-  }
-
-  50% {
-    opacity: $opacityMin;
-  }
-
-  100% {
-    opacity: $opacityMax;
-  }
-}

package/lib/components/Modal.module.scss

@@ -1,109 +0,0 @@
-@use 'sass:color';
-@use '../../styles/constants' as c;
-@use '../../styles/helpers' as h;
-
-.portal {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: c.$zIndex1000;
-  pointer-events: none;
-}
-
-.overlay {
-  width: 100%;
-  height: 100%;
-  background-color: color.adjust(c.$colorText, $alpha: -0.2);
-  pointer-events: all;
-}
-
-.modal {
-  background-color: c.$colorNeutralWhite;
-  border: none;
-  border-radius: c.$borderRadius;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: c.$modalWidth;
-  min-width: c.$modalMinWidth;
-  max-width: c.$modalMaxWidth;
-  max-height: c.$modalMaxHeight;
-  z-index: c.$zIndex1000;
-  padding: c.$grid * 5 0;
-  display: flex;
-  flex-direction: column;
-
-  .close {
-    position: absolute;
-    right: c.$grid * 1.5;
-    top: c.$grid * 2;
-  }
-
-  .outline {
-    position: absolute;
-    border-radius: c.$borderRadius;
-    pointer-events: none;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 100%;
-    height: 100%;
-    z-index: c.$zIndex100;
-    visibility: hidden;
-
-    @include h.outlineSimple;
-  }
-
-  &:focus,
-  &.focus {
-    // Do not remove outline for high-contrast modes
-    // https://stackoverflow.com/a/52616313
-    outline: transparent solid c.$outlineWidth;
-
-    .outline {
-      visibility: visible;
-    }
-  }
-
-  .body {
-    height: 100%;
-    display: flex;
-    overflow: hidden;
-    flex-direction: column;
-    padding: 0 c.$grid * 5;
-
-    .header {
-      display: flex;
-      flex-direction: row;
-      margin: 0 c.$grid * 5 c.$grid * 5 0;
-
-      .icon {
-        margin-right: c.$grid * 2.5;
-      }
-
-      .title {
-        margin: 0;
-        word-break: break-all;
-      }
-    }
-
-    .content {
-      flex: 1;
-      overflow: auto;
-    }
-
-    .footer {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin: c.$grid * 5 0 c.$grid * 2.5;
-
-      & > button:not(:first-of-type) {
-        margin-left: c.$grid * 5;
-      }
-    }
-  }
-}

package/lib/components/Notification.module.scss

@@ -1,97 +0,0 @@
-@use '../../styles/constants' as c;
-
-.notification {
-  display: flex;
-  align-items: flex-start;
-  padding: c.$grid * 2 c.$grid * 3;
-  border-radius: c.$borderRadiusNotification;
-
-  @include c.typographyBodySmall;
-
-  .icon {
-    flex: 0 0 auto;
-    margin-right: c.$grid * 2;
-  }
-
-  .content {
-    display: flex;
-    flex: 1 1 auto;
-    align-items: center;
-    /*
-     * Note:
-     * The (min)height is equal to corresponding icon height. Necessary due to 'flex-start' alignment and
-     * specific alignment differences between single-line and multi-line text content.
-     */
-    min-height: c.$grid * 6;
-  }
-
-  .link {
-    // Note: The (min)height is equal to corresponding icon height. Necessary due to 'flex-start' alignment.
-    min-height: c.$grid * 6;
-
-    // TODO: Improvisation. Consult with @pawel.
-    margin-left: c.$grid * 2;
-
-    @include c.typographyBodyWeight('bold');
-  }
-
-  .closeButton {
-    margin-left: c.$grid * 3;
-  }
-
-  /* Theme - success */
-  &.success {
-    color: c.$colorText;
-    background-color: c.$colorSuccessLight;
-
-    .icon {
-      color: c.$colorText;
-    }
-
-    .link {
-      color: c.$colorText;
-    }
-  }
-
-  /* Theme - info */
-  &.info {
-    color: c.$colorText;
-    background-color: c.$colorInfoLight;
-
-    .icon {
-      color: c.$colorInfoDark;
-    }
-
-    .link {
-      color: c.$colorInfoDark;
-    }
-  }
-
-  /* Theme - warning */
-  &.warning {
-    color: c.$colorText;
-    background-color: c.$colorWarningLight;
-
-    .icon {
-      color: c.$colorText;
-    }
-
-    .link {
-      color: c.$colorText;
-    }
-  }
-
-  /* Theme - error */
-  &.error {
-    color: c.$colorText;
-    background-color: c.$colorErrorLight;
-
-    .icon {
-      color: c.$colorText;
-    }
-
-    .link {
-      color: c.$colorText;
-    }
-  }
-}

package/lib/components/NumberBadge.module.scss

@@ -1,13 +0,0 @@
-@use '../../styles/constants' as c;
-
-.numberBadge {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: c.$borderRadiusBadge;
-  padding: 0 c.$grid * 1.25;
-  background-color: c.$colorNeutral;
-  color: c.$colorText;
-
-  @include c.typographyBodySmall;
-}