@livestorm/ui-vue 1.1.2 → 2.0.0

package/src/css/button.postcss

@@ -1,354 +0,0 @@
-.base-button {
-  @apply block border border-solid border-transparent text-grey-900 cursor-pointer rounded-8;
-  font-weight: var(--button-text-lineheight-40-semibold-font-weight);
-  transition: all .15s ease;
-
-  &[href]:not(.hidden, .sm:hidden, .md:hidden, .lg:hidden) {
-    @apply inline-block;
-  }
-
-  .button-wrapper {
-    @apply flex items-center whitespace-nowrap h-full;
-  }
-
-  .button-loader {
-    .loader {
-      @apply w-4 h-4;
-      border-left-color: currentColor;
-    }
-  }
-
-  .button-icon {
-    @apply shrink-0;
-  }
-
-  .left-icon {
-    @apply mr-2;
-  }
-
-  .right-icon,
-  .icon-close {
-    @apply ml-2;
-  }
-
-  &.w-full {
-    &:not(.base-form-style, .closable, .justify-start) {
-      .button-wrapper {
-        /* Tailwind issue: don't use @apply here https://linear.app/livestorm/issue/LIV-7385 */
-        justify-content: center;
-      }
-    }
-    &.closable {
-      .icon-close {
-        @apply ml-auto;
-      }
-    }
-  }
-
-  &.justify-start {
-    .button-wrapper > .content {
-      @apply flex-1 text-left;
-    }
-  }
-
-  &:disabled,
-  &.disabled {
-    &:not(.cursor-text) {
-      @apply opacity-50 cursor-not-allowed;
-    }
-  }
-
-
-  /** Size */
-
-  /** Medium size by default */
-  @apply px-3;
-  font-size: var(--button-text-lineheight-40-regular-font-size);
-  line-height: var(--button-text-lineheight-40-regular-line-height);
-  height: var(--button-text-lineheight-40-regular-line-height);
-  &.base-button-square {
-    width: var(--button-text-lineheight-40-regular-line-height);
-  }
-  .button-icon {
-    @apply w-4 h-4;
-  }
-
-  &-extra-small {
-    @apply px-2;
-    font-size: var(--button-text-lineheight-24-regular-font-size);
-    line-height: var(--button-text-lineheight-24-regular-line-height);
-    height: var(--button-text-lineheight-24-regular-line-height);
-    &.base-button-square {
-      width: var(--button-text-lineheight-24-regular-line-height);
-    }
-    .button-icon {
-      @apply w-3 h-3;
-    }
-  }
-
-  &-small {
-    @apply px-3;
-    font-size: var(--button-text-lineheight-32-regular-font-size);
-    line-height: var(--button-text-lineheight-32-regular-line-height);
-    height: var(--button-text-lineheight-32-regular-line-height);
-    &.base-button-square {
-      width: var(--button-text-lineheight-32-regular-line-height);
-    }
-    .button-icon {
-      @apply w-3 h-3;
-
-      &.right-icon {
-        @apply ml-1;
-      }
-    }
-  }
-
-  &-medium {
-    @apply px-3;
-    font-size: var(--button-text-lineheight-40-regular-font-size);
-    line-height: var(--button-text-lineheight-40-regular-line-height);
-    height: var(--button-text-lineheight-40-regular-line-height);
-    &.base-button-square {
-      width: var(--button-text-lineheight-40-regular-line-height);
-    }
-    .button-icon {
-      @apply w-4 h-4;
-    }
-  }
-
-  &-large {
-    @apply px-4;
-    font-size: var(--button-text-lineheight-48-regular-font-size);
-    line-height: var(--button-text-lineheight-48-regular-line-height);
-    height: var(--button-text-lineheight-48-regular-line-height);
-    &.base-button-square {
-      width: var(--button-text-lineheight-48-regular-line-height);
-    }
-    .button-icon {
-      @apply w-5 h-5;
-    }
-  }
-
-  &-extra-large {
-    @apply px-5;
-    font-size: var(--button-text-lineheight-56-regular-font-size);
-    line-height: var(--button-text-lineheight-56-regular-line-height);
-    height: var(--button-text-lineheight-56-regular-line-height);
-    &.base-button-square {
-      width: var(--button-text-lineheight-56-regular-line-height);
-    }
-    .button-icon {
-      @apply w-6 h-6;
-    }
-  }
-
-  /** Square size */
-  &-square {
-    @apply px-0 !important;
-    @apply shrink-0;
-    .button-wrapper {
-      @apply justify-center;
-    }
-  }
-
-  /** Color */
-
-  &-primary {
-    @apply bg-livestorm-700 text-white;
-    &:not(:disabled):not(.disabled) {
-      &:hover {
-        @apply bg-livestorm-600;
-      }
-      &:active {
-        @apply bg-livestorm-800;
-      }
-    }
-    &-dark {
-      @apply bg-grey-200 text-grey-900;
-      &:not(:disabled):not(.disabled) {
-        &:hover {
-          @apply bg-white;
-        }
-        &:active {
-          @apply bg-grey-300;
-        }
-      }
-    }
-  }
-
-  &-secondary {
-    @apply bg-alpha-white-100 text-livestorm-700 border border-current;
-    &:not(:disabled):not(.disabled) {
-      &:hover {
-        @apply text-livestorm-600;
-      }
-      &:active {
-        @apply text-livestorm-800;
-      }
-    }
-    &-dark {
-      @apply bg-alpha-white-100 text-white border border-alpha-white-500;
-      &:not(:disabled):not(.disabled) {
-        &:hover {
-          @apply border-white;
-        }
-        &:active {
-          @apply border-alpha-white-300;
-        }
-      }
-    }
-  }
-
-  &-red-primary {
-    @apply bg-red-700 text-white;
-    &:not(:disabled):not(.disabled) {
-      &:hover {
-        @apply bg-red-600;
-      }
-      &:active {
-        @apply bg-red-800;
-      }
-    }
-  }
-
-  &-red-secondary {
-    @apply bg-transparent text-red-700 border border-current;
-    &:not(:disabled):not(.disabled) {
-      &:hover {
-        @apply text-red-600;
-      }
-      &:active {
-        @apply text-red-800;
-      }
-    }
-  }
-
-  &-green-primary {
-    @apply bg-green-700 text-white;
-    &:not(:disabled):not(.disabled) {
-      &:hover {
-        @apply bg-green-600;
-      }
-      &:active {
-        @apply bg-green-800;
-      }
-    }
-  }
-
-  &-green-secondary {
-    @apply bg-transparent text-green-700 border border-current;
-    &:not(:disabled):not(.disabled) {
-      &:hover {
-        @apply text-green-600;
-      }
-      &:active {
-        @apply text-green-800;
-      }
-    }
-  }
-
-  &-orange-primary {
-    @apply bg-orange-700 text-white;
-    &:not(:disabled):not(.disabled) {
-      &:hover {
-        @apply bg-orange-600;
-      }
-      &:active {
-        @apply bg-orange-800;
-      }
-    }
-  }
-
-  &-orange-secondary {
-    @apply bg-transparent text-orange-700 border border-current;
-    &:not(:disabled):not(.disabled) {
-      &:hover {
-        @apply text-orange-600;
-      }
-      &:active {
-        @apply text-orange-800;
-      }
-    }
-  }
-
-  &-anti-primary {
-    @apply bg-alpha-black-200 text-grey-900;
-    &:not(:disabled):not(.disabled) {
-      &:hover {
-        @apply bg-alpha-black-100;
-      }
-      &:active {
-        @apply bg-alpha-black-300;
-      }
-    }
-  }
-
-  &-tertiary {
-    @apply text-livestorm-700 px-0;
-    &:not(:disabled):not(.disabled):not([disabled]) {
-      &:hover {
-        @apply text-livestorm-600;
-      }
-      &:active {
-        @apply text-livestorm-800;
-      }
-    }
-  }
-
-  &-quaternary {
-    @apply text-grey-700 px-0;
-    &:not(:disabled):not(.disabled):not([disabled]) {
-      &:hover {
-        @apply text-grey-900;
-      }
-      &:active {
-        @apply text-grey-900;
-      }
-    }
-    &-bg {
-      @apply text-grey-900;
-      &:not(:disabled):not(.disabled):not([disabled]) {
-        &:hover {
-          @apply text-grey-700 bg-grey-200;
-        }
-        &:active {
-          @apply text-black bg-grey-300;
-        }
-      }
-    }
-  }
-
-  &-tertiary,
-  &-quaternary {
-    &-dark {
-      @apply text-white px-0;
-      &:not(:disabled):not(.disabled):not([disabled]) {
-        &:hover {
-          @apply text-alpha-white-800;
-        }
-        &:active {
-          @apply text-alpha-white-900;
-        }
-      }
-    }
-  }
-
-  &-alpha-white {
-    @apply text-white bg-alpha-white-100;
-    &:not(:disabled):not(.disabled) {
-      &:hover {
-        @apply bg-alpha-white-200;
-      }
-    }
-  }
-
-  &-alpha-white-bg {
-    @apply text-white bg-transparent;
-    transition: background .5s ease-out;
-    &:not(:disabled):not(.disabled) {
-      &:hover {
-        @apply bg-alpha-white-100;
-      }
-    }
-  }
-}

package/src/css/checkbox-radio.postcss

@@ -1,152 +0,0 @@
-.base-checkbox,
-.base-radio {
-
-  label {
-    @apply flex items-stretch cursor-pointer;
-  }
-
-  input {
-    @apply absolute top-0 left-0 h-0 w-0 opacity-0 z-10;
-  }
-
-  .label-custom {
-    @apply ml-2;
-    margin-top: -.175em;
-  }
-
-  .input-custom {
-    @apply flex items-center justify-center shrink-0 border border-solid border-grey-300 bg-white text-white;
-
-    &.error {
-      @apply border-red-600;
-    }
-
-    margin-top: 1.5px;
-  }
-
-  &-disabled {
-    label {
-      @apply cursor-not-allowed;
-    }
-    .input-custom {
-      @apply bg-grey-200 text-grey-600;
-    }
-  }
-
-  @apply relative;
-  /* Medium size by default */
-  label {
-    font-size: var(--text-14-regular-font-size);
-    letter-spacing: var(--text-14-regular-letter-spacing);
-    line-height: var(--text-14-regular-line-height);
-    font-weight: var(--text-14-regular-font-weight);
-  }
-  .input-custom {
-    width: 16px;
-    height: 16px;
-  }
-  .check-checkbox {
-    width: .9em;
-    height: .9em;
-  }
-  .check-radio {
-    width: 8px;
-    height: 8px;
-  }
-
-  &-small {
-    label {
-      font-size: var(--text-12-regular-font-size);
-      letter-spacing: var(--text-12-regular-letter-spacing);
-      line-height: var(--text-12-regular-line-height);
-      font-weight: var(--text-12-regular-font-weight);
-    }
-    .input-custom {
-      width: 12px;
-      height: 12px;
-    }
-    .check-checkbox {
-      width: 1em;
-      height: 1em;
-    }
-    .check-radio {
-      width: 4px;
-      height: 4px;
-    }
-  }
-
-  &-medium {
-    label {
-      font-size: var(--text-14-regular-font-size);
-      letter-spacing: var(--text-14-regular-letter-spacing);
-      line-height: var(--text-14-regular-line-height);
-      font-weight: var(--text-14-regular-font-weight);
-    }
-    .input-custom {
-      width: 16px;
-      height: 16px;
-    }
-    .check-checkbox {
-      width: .9em;
-      height: .9em;
-    }
-    .check-radio {
-      width: 8px;
-      height: 8px;
-    }
-  }
-}
-
-.base-checkbox {
-  input {
-    &:checked:not(:disabled) ~ label .input-custom {
-      @apply bg-livestorm-600 border-livestorm-600;
-    }
-  }
-
-  .input-custom {
-    border-radius: 2.4px;
-  }
-}
-
-.base-radio {
-  input {
-    &:checked ~ label .input-custom {
-      @apply border-2;
-      .check-radio {
-        @apply rounded-full;
-      }
-    }
-    &:checked:not(:disabled) ~ label .input-custom {
-      @apply border-livestorm-600;
-      .check-radio {
-        @apply bg-livestorm-600;
-      }
-    }
-    &:checked:disabled ~ label .input-custom {
-      @apply border-grey-300;
-      .check-radio {
-        @apply bg-grey-300;
-      }
-    }
-    &:disabled:not(:checked) ~ label .input-custom {
-      @apply border-grey-300;
-    }
-  }
-
-  .input-custom {
-    @apply rounded-full;
-  }
-}
-
-.base-checkbox-group,
-.base-radio-group {
-  > *:not(:first-child) {
-    margin-top: 8px;
-  }
-}
-
-/* Align * for HTML custom consent required */
-.base-checkbox .label-custom > span p:last-child {
-  @apply inline;
-}

package/src/css/icon.postcss

@@ -1,9 +0,0 @@
-
-/*
-  @TODO Move into BaseIcon.vue, adapt components with deep selectors, and remove this file
-  https://linear.app/livestorm/issue/LIV-6003
-*/
-.base-icon svg,
-.svg-wrap svg {
-  @apply w-full h-full pointer-events-none block fill-current;
-}

package/src/css/loader.postcss

@@ -1,120 +0,0 @@
-.loader {
-  display: block;
-  font-size: 10px;
-  position: relative;
-  text-indent: -9999em;
-  border-color: rgba(255,255,255,0.2);
-  border-style: solid;
-  border-width: 3px;
-  border-left-color: #fff;
-  transform: translateZ(0);
-  animation: loadAnim 0.6s infinite linear;
-}
-.loader.dark {
-  border-left-color: #000;
-}
-.loader.tarawera {
-  border-left-color: var(--color-livestorm-800);
-}
-.loader.grey-dovegray {
-  border-left-color: var(--color-grey-700);
-}
-.loader.grey-lightgray {
-  border-left-color: var(--color-grey-300);
-}
-.loader,
-.loader:after {
-  border-radius: 50%;
-  width: 26px;
-  height: 26px;
-}
-.loader.large,
-.loader.large:after {
-  border-radius: 50%;
-  width: 48px;
-  height: 48px;
-}
-.loader.small,
-.loader.small:after {
-  width: 14px;
-  height: 14px;
-  border-width: 2px;
-}
-.single-loader {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.single-loader .loader {
-  margin-right: 14px;
-}
-.text-placeholder {
-  background: rgba(255,255,255,0.1);
-  height: 10px;
-  margin: 4px 0;
-  @apply rounded-8
-}
-.text-dots {
-  position: relative;
-}
-.text-dots:after {
-  position: absolute;
-  display: inline-block;
-  vertical-align: bottom;
-  content: '\2026';
-  animation: ellipsis steps(4, end) 1.2s infinite;
-  width: 0;
-  overflow: hidden;
-}
-@-moz-keyframes loadAnim {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@-webkit-keyframes loadAnim {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@-o-keyframes loadAnim {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes loadAnim {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@-moz-keyframes ellipsis {
-  to {
-    width: 1em;
-  }
-}
-@-webkit-keyframes ellipsis {
-  to {
-    width: 1em;
-  }
-}
-@-o-keyframes ellipsis {
-  to {
-    width: 1em;
-  }
-}
-@keyframes ellipsis {
-  to {
-    width: 1em;
-  }
-}