@latitude-ui/widgets 0.0.13 → 0.0.15

package/styles/forms/_index.scss

@@ -1,867 +0,0 @@
-lat-input-label {
-  color: var(--lat-text-color-subtle);
-  //color: var(--lat-text-color-strong);
-
-  font-size: var(--lat-font-size-small);
-  font-family: var(--lat-font-family-sans), sans-serif;
-  font-weight: var(--lat-font-weight-normal);
-
-  user-select: none;
-  line-height: 1rem;
-
-
-  label {
-    display: inline-flex;
-
-    align-self: flex-start;
-    align-items: center;
-    justify-self: start;
-
-    color: inherit;
-    text-align: right;
-    line-height: inherit;
-    vertical-align: middle;
-
-    font-size: inherit;
-    font-family: inherit;
-    font-weight: inherit;
-
-    .lat-label-asterix {
-      color: var(--lat-danger-color);
-      margin-left: 4px;
-    }
-  }
-}
-
-
-lat-input {
-  display: flex;
-
-  gap: 4px;
-  flex-direction: column;
-
-  align-items: flex-start;
-  justify-content: flex-start;
-
-  font-family: var(--lat-font-family-sans), sans-serif;
-  font-weight: var(--lat-font-weight-normal);
-
-  line-height: normal;
-
-  & > div[role="textbox"] {
-    position: relative;
-
-    overflow: hidden;
-    box-sizing: border-box;
-
-    margin-inline: calc(0.25rem * -1);
-
-    button {
-      position: relative;
-
-      box-sizing: border-box;
-
-      display: flex;
-
-      align-items: center;
-      justify-content: flex-start;
-
-      width: 100%;
-
-      height: auto;
-      min-height: 28px;
-      line-height: 28px;
-
-      cursor: default;
-
-      text-align: left;
-      touch-action: manipulation;
-
-      border-radius: 4px;
-
-      padding-block: 0.25rem;
-      padding-inline: 0.25rem;
-
-      color: var(--lat-text-color);
-      background-color: transparent;
-
-      font-size: inherit;
-      font-family: inherit;
-      font-weight: inherit;
-
-      &:hover {
-        color: var(--lat-text-color);
-        background-color: var(--lat-background-color-active);
-      }
-
-      transition-property: background, border, color, fill, opacity;
-      transition-duration: 0.2s;
-    }
-  }
-
-  & > * {
-    width: 100%;
-  }
-
-  lat-input-label {
-  }
-
-  lat-input-error {
-    display: flex;
-
-    cursor: default;
-    flex-direction: column;
-
-    align-items: flex-start;
-
-    gap: 4px;
-
-    color: var(--lat-danger-color);
-    text-align: right;
-    line-height: inherit;
-    vertical-align: middle;
-
-    font-size: 11px;
-    font-family: inherit;
-    font-weight: inherit;
-  }
-}
-
-lat-switch {
-  display: inline-flex;
-
-  cursor: default;
-
-  align-items: center;
-  justify-content: flex-start;
-
-  font-family: var(--lat-font-family-sans), sans-serif;
-  font-weight: var(--lat-font-weight-normal);
-
-  &[data-size="sm"] {
-    height: 24px;
-    font-size: 12px;
-    line-height: 24px;
-
-    button {
-      width: 32px;
-      height: 18px;
-      line-height: 18px;
-
-      & > div {
-        width: 14px;
-        height: 14px;
-      }
-
-      &[aria-checked="true"] {
-        --lat-translate-x: 14px;
-      }
-
-      &[aria-checked="false"] {
-        --lat-translate-x: 0;
-      }
-    }
-  }
-
-  &[data-size="md"] {
-    height: 28px;
-    font-size: 12px;
-    line-height: 28px;
-
-    button {
-      width: 40px;
-      height: 22px;
-      line-height: 22px;
-
-      & > div {
-        width: 18px;
-        height: 18px;
-      }
-
-      &[aria-checked="true"] {
-        --lat-translate-x: 18px;
-      }
-
-      &[aria-checked="false"] {
-        --lat-translate-x: 0;
-      }
-    }
-  }
-
-  &[data-size="lg"] {
-    height: 32px;
-    font-size: 14px;
-    line-height: 32px;
-
-    button {
-      width: 44px;
-      height: 26px;
-      line-height: 26px;
-
-      & > div {
-        width: 22px;
-        height: 22px;
-      }
-
-      &[aria-checked="true"] {
-        --lat-translate-x: 22px;
-      }
-
-      &[aria-checked="false"] {
-        --lat-translate-x: 0;
-      }
-    }
-  }
-
-  button {
-    display: inline-flex;
-
-    align-items: center;
-    justify-content: flex-start;
-
-    height: 100%;
-
-    flex-shrink: 0;
-
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--lat-thumb-border-color);
-    border-radius: 9999px;
-
-    color: var(--lat-text-color);
-    background-color: var(--lat-thumb-background-color);
-
-
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-    transition-duration: .2s;
-
-    padding: 2px 1px;
-    margin-right: .5rem;
-
-
-    & > div {
-      display: block;
-      box-sizing: border-box;
-
-      border-width: 0;
-      border-style: solid;
-      border-color: var(--lat-outline-color-strong);
-      border-radius: 9999px;
-
-      box-shadow: inset 0 0 0 var(--lat-thumb-border-width) var(--lat-thumb-border-color);
-      background-color: var(--lat-thumb-color);
-
-      transition-property: transform;
-      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-      transition-duration: .2s;
-
-      transform: translate(var(--lat-translate-x), 0)
-    }
-
-    &[aria-checked="true"] {
-      --lat-thumb-color: #ffffff;
-      --lat-thumb-border-width: 0;
-      --lat-thumb-border-color: var(--lat-primary-color);
-      --lat-thumb-background-color: var(--lat-primary-color);
-    }
-
-    &[aria-checked="false"] {
-      --lat-thumb-color: #ffffff;
-      --lat-thumb-border-width: 1px;
-      --lat-thumb-border-color: var(--lat-outline-color-strong);
-      --lat-thumb-background-color: var(--lat-background-color-subtle);
-    }
-  }
-}
-
-@mixin textbox-size(
-  $size,
-  $height,
-  $font-size,
-  $line-height,
-  $padding-block,
-  $padding-inline,
-) {
-  &[data-size="#{$size}"] {
-    --lat-textbox-height: #{$height};
-    --lat-textbox-font-size: #{$font-size};
-    --lat-textbox-line-height: #{$line-height};
-    --lat-textbox-padding-block: #{$padding-block};
-    --lat-textbox-padding-inline: #{$padding-inline};
-
-    @content;
-  }
-}
-
-
-lat-textbox, lat-textarea, lat-select {
-  --lat-textbox-height: auto;
-  --lat-textbox-line-height: inherit;
-  --lat-textbox-font-size: var(--lat-font-size-small);
-  --lat-textbox-font-family: var(--lat-font-family-sans);
-  --lat-textbox-font-weight: var(--lat-font-weight-normal);
-  --lat-textbox-padding-block: 0;
-  --lat-textbox-padding-inline: 0;
-  --lat-textbox-border-style: solid;
-  --lat-textbox-border-color: transparent;
-  --lat-textbox-border-width: 1px;
-  --lat-textbox-border-radius: 4px;
-  --lat-textbox-color: initial;
-  --lat-textbox-background-color: initial;
-  --lat-textbox-placeholder-color: initial;
-}
-
-lat-textbox, lat-textarea, lat-select {
-  --lat-textbox-color: var(--lat-text-color);
-  --lat-textbox-placeholder-color: var(--lat-text-color-subtle);
-  --lat-textbox-border-width: 0.0625rem;
-  --lat-textbox-border-color: var(--lat-outline-color-strong);
-  --lat-textbox-background-color: #ffffff;
-}
-
-lat-textbox, lat-textarea {
-  position: relative;
-  box-sizing: border-box;
-
-  display: inline-flex;
-  overflow: hidden;
-
-  width: 100%;
-
-  font-size: var(--lat-textbox-font-size);
-  font-family: var(--lat-textbox-font-family), sans-serif;
-  font-weight: var(--lat-textbox-font-weight);
-
-  border-width: var(--lat-textbox-border-width);
-  border-style: var(--lat-textbox-border-style);
-  border-color: var(--lat-textbox-border-color);
-  border-radius: var(--lat-textbox-border-radius);
-
-  color: var(--lat-textbox-color);
-  background-color: var(--lat-textbox-background-color);
-
-  transition-property: background, border, color, fill, opacity;
-  transition-duration: .2s;
-
-  &:hover {
-    --lat-textbox-color: var(--lat-text-color);
-    --lat-textbox-border-color: var(--lat-outline-color-hover);
-  }
-
-  &:focus-within {
-    --lat-textbox-color: var(--lat-text-color);
-    --lat-textbox-border-color: var(--lat-outline-color-active);
-  }
-
-  &[data-dirty="true"][data-invalid="true"] {
-    --lat-textbox-border-color: var(--lat-danger-color);
-  }
-
-  &[data-readonly="true"] {
-    --lat-textbox-color: var(--lat-text-color);
-    --lat-textbox-border-color: transparent;
-    --lat-textbox-background-color: #ffffff;
-
-    margin-inline: calc(var(--lat-textbox-padding-inline) * -1);
-
-    input, textarea {
-      cursor: default;
-    }
-
-    &:hover {
-      --lat-textbox-color: var(--lat-text-color);
-      --lat-textbox-border-color: transparent;
-      --lat-textbox-background-color: var(--lat-background-color-hover);
-    }
-
-    &:focus-within {
-      --lat-textbox-color: var(--lat-text-color);
-      --lat-textbox-border-color: transparent;
-      --lat-textbox-background-color: var(--lat-background-color-active);
-    }
-  }
-
-  input, textarea {
-    position: relative;
-    overflow: hidden;
-    box-sizing: border-box;
-
-    display: inline-flex;
-
-    align-items: center;
-    justify-content: center;
-
-    text-align: left;
-    touch-action: manipulation;
-
-    width: 100%;
-
-    height: var(--lat-textbox-height);
-    line-height: var(--lat-textbox-line-height);
-
-    font-size: inherit;
-    font-family: inherit;
-    font-weight: inherit;
-
-    margin: 0;
-    padding: 0;
-
-    border: none;
-    outline: none;
-
-    padding-block: var(--lat-textbox-padding-block);
-    padding-inline: var(--lat-textbox-padding-inline);
-
-    flex-grow: 1;
-
-    vertical-align: top;
-
-    color: inherit;
-    background-color: initial;
-
-    &::placeholder {
-      color: var(--lat-textbox-placeholder-color);
-
-      font-size: var(--lat-textbox-font-size);
-      font-family: var(--lat-textbox-font-family), sans-serif;
-      font-weight: var(--lat-textbox-font-weight);
-    }
-  }
-
-  @include textbox-size(
-      "sm",
-      1.5rem,
-      0.75rem,
-      1.125rem,
-      0.25rem,
-      0.5rem
-  );
-
-  @include textbox-size(
-      "md",
-      1.75rem,
-      0.75rem,
-      1.125rem,
-      0.25rem,
-      0.5rem
-  );
-
-  @include textbox-size(
-      "lg",
-      2rem,
-      0.875rem,
-      1.3125rem,
-      0.25rem,
-      0.5rem
-  );
-}
-
-lat-textarea {
-  height: auto;
-  box-sizing: content-box;
-
-  textarea {
-    overflow: auto;
-  }
-}
-
-lat-select {
-  position: relative;
-  box-sizing: border-box;
-
-  display: inline-flex;
-
-  overflow: hidden;
-
-  min-width: 100px;
-  max-width: 100%;
-
-  &[type="single"] {
-
-    lat-select-value,
-    lat-select-values {
-      flex: 1 1 auto;
-    }
-
-    lat-select-value {
-      span {
-        width: 100%;
-        background-color: transparent;
-      }
-    }
-  }
-
-
-  lat-select-trigger {
-    position: relative;
-    box-sizing: border-box;
-
-    display: flex;
-    flex-wrap: nowrap;
-    overflow-x: hidden;
-
-    align-items: center;
-    justify-content: space-between;
-
-    cursor: pointer;
-    user-select: none;
-
-    width: 100%;
-    max-width: 100%;
-
-    line-height: var(--lat-textbox-line-height);
-
-    font-size: var(--lat-textbox-font-size);
-    font-family: var(--lat-textbox-font-family), sans-serif;
-    font-weight: var(--lat-textbox-font-weight);
-
-    border-width: var(--lat-textbox-border-width);
-    border-style: var(--lat-textbox-border-style);
-    border-color: var(--lat-textbox-border-color);
-    border-radius: var(--lat-textbox-border-radius);
-
-    color: var(--lat-textbox-color);
-    background-color: var(--lat-textbox-background-color);
-
-    transition-property: background, border, color, fill, opacity;
-    transition-duration: .2s;
-
-    &:hover {
-      --lat-textbox-color: var(--lat-text-color);
-      --lat-textbox-border-color: var(--lat-outline-color-hover);
-    }
-
-    &:focus-within {
-      --lat-textbox-color: var(--lat-text-color);
-      --lat-textbox-border-color: var(--lat-outline-color-active);
-    }
-
-    @include textbox-size(
-        "sm",
-        1.5rem,
-        0.75rem,
-        1.125rem,
-        0.25rem,
-        0.5rem
-    );
-
-    @include textbox-size(
-        "md",
-        1.75rem,
-        0.75rem,
-        1.125rem,
-        0.25rem,
-        0.5rem
-    );
-
-    @include textbox-size(
-        "lg",
-        2rem,
-        0.875rem,
-        1.3125rem,
-        0.25rem,
-        0.5rem
-    );
-
-    lat-select-values {
-      display: flex;
-      flex-wrap: nowrap;
-      overflow-x: hidden;
-
-      gap: 0.5rem;
-      height: 100%;
-
-      margin-inline: 0.5rem;
-
-      lat-select-value {
-        display: flex;
-        overflow: hidden;
-
-        min-width: 0;
-        min-height: 0;
-
-        flex-shrink: 0;
-        align-items: center;
-        justify-content: flex-start;
-
-        cursor: pointer;
-        user-select: none;
-
-        font-size: calc(var(--lat-textbox-font-size) - 1px);
-
-        span {
-          display: inline-block;
-
-          padding-block: 2px;
-          padding-inline: 8px;
-
-          border-radius: 4px;
-
-          background-color: var(--lat-background-color-subtle-hover);
-        }
-
-      }
-    }
-
-    lat-select-values + .lat-select-control {
-      position: relative;
-      box-sizing: content-box;
-
-      display: flex;
-
-      flex-direction: column;
-
-      border-left-style: solid;
-      border-left-width: 1px;
-      border-left-color: var(--lat-textbox-border-color);
-
-      lat-button {
-        --lat-button-height: var(--lat-textbox-height);
-        width: var(--lat-textbox-height);
-
-        &:hover {
-          background-color: transparent;
-        }
-      }
-    }
-
-
-  }
-
-}
-
-.lat-select-dropdown-backdrop {
-  opacity: 1;
-  visibility: hidden;
-
-  &.cdk-overlay-backdrop-showing {
-    opacity: 0;
-    visibility: visible;
-  }
-}
-
-lat-select-dropdown {
-
-  box-sizing: border-box;
-
-  display: flex;
-
-  flex-direction: column;
-
-  outline: none;
-  pointer-events: auto;
-
-  max-height: 300px;
-
-  padding-block: 4px;
-  padding-inline: 0;
-
-  border-radius: 4px;
-
-  box-shadow: var(--lat-box-shadow-large);
-  background-color: var(--lat-background-color);
-
-  &[data-side="top"] {
-    margin: 0 0 4px 0;
-  }
-
-  &[data-side="right"] {
-    margin: 0 0 0 4px;
-  }
-
-  &[data-side="bottom"] {
-    margin: 4px 0 0 0;
-  }
-
-  &[data-side="left"] {
-    margin: 0 4px 0 0;
-  }
-
-
-  lat-textbox {
-    margin: 2px 4px 4px;
-    width: auto;
-  }
-
-  lat-listbox {
-    [role="listbox"] {
-      box-sizing: border-box;
-
-      scrollbar-width: none; /* Firefox */
-      -ms-overflow-style: none; /* IE and Edge */
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-
-    [role="option"] {
-      box-sizing: border-box;
-
-      display: inline-flex;
-
-      flex-wrap: nowrap;
-      flex-direction: row;
-
-      width: auto;
-
-      gap: 10px;
-      margin-inline: 4px;
-      padding-inline: 10px;
-
-      align-items: center;
-      justify-content: flex-start;
-
-      height: 28px;
-      min-height: 28px;
-      border-radius: 4px;
-
-      cursor: pointer;
-      user-select: none;
-
-      font-size: var(--lat-font-size-small);
-      font-family: var(--lat-font-family-sans), sans-serif;
-      font-weight: var(--lat-font-weight-normal);
-
-      color: var(--lat-text-color);
-      background-color: var(--lat-background-color);
-
-      transition-property: background, border, color, fill, opacity;
-      transition-duration: 0.2s;
-
-      &:hover {
-        fill: var(--lat-text-color);
-        color: var(--lat-text-color);
-        border-color: var(--lat-background-color-subtle-hover);
-        background-color: var(--lat-background-color-subtle-hover);
-      }
-
-      //&:active {
-      //  fill: var(--lat-text-color);
-      //  color: var(--lat-text-color);
-      //  border-color: var(--lat-background-color-subtle-active);
-      //  background-color: var(--lat-background-color-subtle-active);
-      //}
-    }
-  }
-
-  //
-
-  //}
-}
-
-lat-textbox[type="number"] {
-  lat-spinners {
-    position: relative;
-    box-sizing: content-box;
-
-    display: flex;
-
-    flex-direction: column;
-
-    align-items: center;
-    justify-content: center;
-
-    width: var(--lat-textbox-height);
-    max-height: var(--lat-textbox-height);
-    line-height: var(--lat-textbox-height);
-
-    border-left-style: solid;
-    border-left-width: 1px;
-    border-left-color: var(--lat-textbox-border-color);
-
-    transition-property: background, border, color, fill, opacity;
-    transition-duration: .2s;
-
-    lat-button {
-      --lat-button-height: calc(var(--lat-textbox-height) / 2);
-
-      width: 100%;
-      border-radius: 0;
-    }
-  }
-}
-
-lat-checkbox {
-  display: inline-flex;
-
-  cursor: default;
-
-  align-items: center;
-  justify-content: flex-start;
-
-  font-family: var(--lat-font-family-sans), sans-serif;
-  font-weight: var(--lat-font-weight-normal);
-
-  &[data-size="sm"] {
-    height: 24px;
-    font-size: 12px;
-    line-height: 24px;
-
-    button {
-      width: 14px;
-      height: 14px;
-      line-height: 14px;
-    }
-  }
-
-  &[data-size="md"] {
-    height: 28px;
-    font-size: 12px;
-    line-height: 28px;
-
-    button {
-      width: 18px;
-      height: 18px;
-      line-height: 18px;
-    }
-  }
-
-  &[data-size="lg"] {
-    height: 32px;
-    font-size: 14px;
-    line-height: 32px;
-
-    button {
-      width: 22px;
-      height: 22px;
-      line-height: 22px;
-    }
-  }
-
-  button {
-    display: inline-flex;
-
-    align-items: center;
-    justify-content: center;
-
-    flex-shrink: 0;
-
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--lat-checkbox-border-color);
-    border-radius: 4px;
-
-    color: var(--lat-checkbox-text-color);
-    background-color: var(--lat-checkbox-background-color);
-
-    transition-property: background, border, color, fill, opacity;
-    transition-duration: .2s;
-
-    &[aria-checked="true"] {
-      --lat-checkbox-text-color: #ffffff;
-      --lat-checkbox-border-color: var(--lat-primary-color);
-      --lat-checkbox-background-color: var(--lat-primary-color);
-    }
-
-    &[aria-checked="false"] {
-      --lat-checkbox-text-color: #ffffff;
-      --lat-checkbox-border-color: var(--lat-outline-color);
-      --lat-checkbox-background-color: var(--lat-background-color);
-    }
-  }
-}
-
-
-