@seamly/web-ui 19.1.3 → 20.0.0-beta.1

package/src/stylesheets/7-deprecated/5-components/_modal.scss

@@ -0,0 +1,138 @@
+// ##### MODAL #####
+// ==================
+
+// VARS
+// ----
+
+$small-shadow-light: 0 $spacer * 0.2 $spacer * 0.3333 0 rgba(0, 0, 0, 0.1);
+$control-small-radius: $spacer;
+$button-transition: $transition;
+
+// BASE
+// ----
+
+.#{$n}-modal {
+  @include boxSizing;
+
+  display: block;
+  display: flex;
+  position: fixed;
+  z-index: 99;
+  top: 0;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  padding: $spacer;
+  background-color: rgba($app-bg, 0.8);
+}
+
+.#{$n}-modal__float {
+  position: relative;
+  width: 100%;
+  max-width: 80rem;
+  height: 100%;
+  padding: $spacer * 0.25;
+  border: $thin-border solid $grey-b;
+  border-radius: $borderradius;
+  outline: 0;
+  background-color: $app-bg;
+  box-shadow: $boxshadow-soft;
+}
+
+.#{$n}-modal__inner {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: $spacer * 0.5;
+  border-radius: $borderradius-small;
+  background-color: $grey-a;
+}
+
+.#{$n}-modal__image {
+  display: block;
+  flex: 0 0 auto;
+  width: auto;
+  max-width: calc(95vw - (#{$spacer} * 2));
+  max-height: calc(95vh - (#{$spacer} * 2));
+  border: $thin-border solid $grey-b;
+}
+
+.#{$n}-modal__close {
+  appearance: none;
+  display: flex;
+  position: absolute;
+  top: $spacer;
+  right: $spacer * -0.5;
+  align-items: center;
+  padding: $spacer * 0.5 $spacer;
+  transition: background-color $button-transition;
+  border: $thin-border solid $grey-b;
+  border-radius: $control-small-radius;
+  background-color: $app-bg;
+  box-shadow: $small-shadow-light;
+  color: $brand3;
+  font-size: $fontsize-medium;
+  font-weight: $fontweight-bold;
+
+  .#{$n}-icon {
+    width: $badge-touch-size * 0.5;
+    height: $badge-touch-size * 0.5;
+    margin-right: $spacer * 0.25;
+
+    svg {
+      width: inherit;
+      height: inherit;
+    }
+
+    svg path {
+      transition: fill $button-transition;
+      fill: $brand3;
+    }
+  }
+
+  &:hover {
+    transition: color $button-transition;
+    background-color: $brand3;
+    color: $app-bg;
+
+    svg path {
+      fill: $app-bg;
+    }
+  }
+}
+
+.#{$n}-modal__enlarge {
+  appearance: none;
+  display: flex;
+  position: absolute;
+  right: $spacer;
+  bottom: $spacer;
+  align-items: center;
+  justify-content: center;
+  width: $spacer * 1.6;
+  height: $spacer * 1.6;
+  padding: 0;
+  border: 0 none;
+  border-radius: $control-small-radius;
+  background: rgba($app-bg, 0.4);
+  color: transparent;
+  font-size: 0;
+
+  svg path {
+    fill: $brand3;
+  }
+
+  &:hover {
+    background-color: $brand3;
+  }
+
+  &:hover .cvco-icon svg path {
+    fill: $white;
+  }
+}

package/src/stylesheets/7-deprecated/5-components/_notification.scss

@@ -0,0 +1,20 @@
+// ##### NOTIFICATION #####
+// ========================
+
+// BASE
+// ----
+.#{$n}-notification {
+  display: block;
+  width: 100%;
+  margin: 0 0 $spacer * 0.5;
+  padding: $spacer * 0.25 $spacer * 0.5;
+  border-radius: $borderradius-small;
+  background-color: rgba($brand3, 0.1);
+  color: $brand2;
+  font-size: $fontsize-small;
+  font-weight: $fontweight-bold;
+
+  &:last-child {
+    margin: 0;
+  }
+}

package/src/stylesheets/7-deprecated/5-components/_options.scss

@@ -0,0 +1,286 @@
+// ##### OPTIONS #####
+// ===================
+
+// BASE
+// ----
+.#{$n}-app__options {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: flex-end;
+  padding: $spacer * 0.25;
+  border-top: $thin-border solid $grey-b;
+}
+
+.#{$n}-app__options-item--left {
+  margin-right: auto;
+}
+
+&.#{$n}-app--collapsed .#{$n}-app__options {
+  display: none;
+}
+
+.#{$n}-app__options__button {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: $spacer * 0.25 $spacer * 0.5;
+  border-radius: $buttons-border-radius;
+}
+
+&.#{$n}-app--collapsed .#{$n}-app__options-button {
+  display: none;
+}
+
+.#{$n}-app__options__button .#{$n}-icon {
+  flex: 0 0 $spacer * 0.75;
+  width: $spacer * 0.75;
+  height: $spacer * 0.75;
+  margin-right: $spacer * 0.25;
+}
+
+.#{$n}-app__options__button .#{$n}-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.#{$n}-app__options__button.#{$n}-button--disabled .#{$n}-icon path {
+  fill: currentColor;
+}
+
+// CONTEXT MENU
+// ------------
+.#{$n}-options__menu {
+  display: none;
+  position: absolute;
+  right: $spacer * 0.5;
+  bottom: calc(100% + (#{$spacer} * 0.5));
+  max-width: $spacer * 15;
+  max-height: $spacer * 20;
+  margin: 0;
+  padding: $spacer * 0.5;
+  transform: scaleY(0) translateY($spacer * 5);
+  transform-origin: 100% 100%;
+  transition: transform 0.2s ease-in-out, opacity 0.2s ease;
+  border: $thin-border solid $grey-b;
+  border-radius: $borderradius-small;
+  opacity: 0;
+  background-color: $white;
+  box-shadow: $boxshadow-soft;
+  list-style: none;
+}
+
+.#{$n}-options__menu.#{$n}-transition--visible {
+  display: block;
+}
+
+.#{$n}-options__menu.#{$n}-transition--in {
+  transform: scaleY(1) translateY(0);
+  opacity: 1;
+}
+
+.#{$n}-options__menu__item {
+  margin-bottom: $spacer * 0.25;
+  transition: opacity 0.1s 0.1s ease;
+  opacity: 0;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.#{$n}-options__menu.#{$n}-transition--in .#{$n}-options__menu__item {
+  opacity: 1;
+}
+
+.#{$n}-options__menu .#{$n}-button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: $spacer * 10;
+  border-radius: $borderradius-small;
+
+  &:hover {
+    background-color: $brand2;
+    color: $white;
+  }
+}
+
+.#{$n}-options__menu .#{$n}-button.#{$n}-button--disabled {
+  &:hover {
+    background-color: initial;
+    color: $disabled;
+  }
+}
+
+// OPTIONS DIALOG
+// --------------
+.#{$n}-options {
+  display: none;
+  position: absolute;
+  right: $spacer * 0.5;
+  bottom: calc(100% + (#{$spacer} * 0.5));
+  flex-direction: column;
+  width: calc(100% - #{$spacer});
+  max-width: $spacer * 15;
+  margin: 0;
+  padding: 0;
+  transform: scaleY(0) translateY($spacer * 5);
+  transform-origin: 100% 100%;
+  transition: transform 0.2s ease-in-out, opacity 0.2s ease;
+  border: $thin-border solid $grey-b;
+  border-radius: $borderradius-small;
+  opacity: 0;
+  background-color: $white;
+  box-shadow: $boxshadow-soft;
+  list-style: none;
+}
+
+.#{$n}-options--left {
+  right: initial;
+  left: $spacer * 0.5;
+}
+
+.#{$n}-options--right {
+  right: $spacer * 0.5;
+}
+
+.#{$n}-options__dialog.#{$n}-transition--visible .#{$n}-options {
+  display: flex;
+}
+
+.#{$n}-options__dialog.#{$n}-transition--in .#{$n}-options {
+  transform: scaleY(1) translateY(0);
+  opacity: 1;
+}
+
+.#{$n}-options__body {
+  display: flex;
+  flex-direction: column;
+  max-height: $spacer * 15;
+  transition: opacity 0.1s 0.1s ease;
+  opacity: 0;
+}
+
+.#{$n}-options__dialog.#{$n}-transition--in .#{$n}-options__body {
+  opacity: 1;
+}
+
+.#{$n}-options__title {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  width: calc(100% - #{$badge-touch-size} - (#{$spacer} * 0.5));
+  margin: 0;
+  padding: $spacer $spacer $spacer * 0.5;
+  color: $brand2;
+  font-size: $fontsize-default;
+  font-weight: $fontweight-bold;
+}
+
+.#{$n}-options__close {
+  position: absolute;
+  top: $spacer * 0.5;
+  right: $spacer * 0.5;
+  width: $badge-touch-size;
+  height: $badge-touch-size;
+  font-size: 0;
+}
+
+.#{$n}-options__close .#{$n}-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.#{$n}-options__body form {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  width: 100%;
+}
+
+.#{$n}-options__wrapper {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  width: 100%;
+  padding: 0 $spacer;
+  overflow: auto;
+
+  // FF AND IE11 FIX
+  &:last-child::after {
+    content: '';
+    display: block;
+    flex: 0 0 100%;
+    width: 100%;
+    height: $spacer;
+  }
+}
+
+.#{$n}-options__body div {
+  width: 100%;
+}
+
+.#{$n}-options__wrapper h3 {
+  margin: 0;
+  color: $brand2;
+  font-size: $fontsize-medium;
+  font-weight: $fontweight-bold;
+}
+
+.#{$n}-options__description {
+  display: block;
+  width: 100%;
+  margin-bottom: $spacer * 0.5;
+  font-size: $fontsize-medium;
+}
+
+.#{$n}-transcript__input {
+  width: 100%;
+  padding: $spacer * 0.5;
+  transition: padding $transition;
+  border: $thin-border solid $grey-b;
+  border-radius: $borderradius-small;
+  font-size: $fontsize-small;
+
+  &:focus {
+    border: $thin-border solid $grey-b;
+  }
+
+  @supports (-webkit-overflow-scrolling: touch) {
+    font-size: 16px; // KEEP THIS FIXED
+  }
+
+  @include stylePlaceholder() {
+    overflow: visible;
+    color: $grey-c;
+    line-height: $spacer;
+  }
+}
+
+.#{$n}-options__active-language {
+  color: $grey-e;
+  font-size: $fontsize-medium;
+}
+
+.#{$n}-options__actions {
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: flex-end;
+  width: 100%;
+  margin-top: $spacer * 0.5;
+  padding: 0;
+}
+
+.#{$n}-options__actions .#{$n}-button {
+  width: 100%;
+  margin-right: $spacer * 0.5;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}

package/src/stylesheets/7-deprecated/5-components/_prompt.scss

@@ -0,0 +1,44 @@
+// ##### PROMPT #####
+// ========================
+
+// BASE
+// ----
+.#{$n}-prompt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  max-height: initial;
+  padding: $spacer * 0.5;
+}
+
+// PARTS
+// -----------
+
+.#{$n}-prompt__title {
+  margin-top: 0;
+  margin-bottom: $spacer * 0.25;
+  font-size: $fontsize-default;
+  font-weight: bold;
+  text-align: center;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.#{$n}-prompt__options {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.#{$n}-prompt__options .#{$n}-button {
+  margin: $spacer * 0.25 $spacer * 0.25 0;
+  text-align: center;
+  white-space: normal;
+}

package/src/stylesheets/7-deprecated/5-components/_skip-link.scss

@@ -0,0 +1,21 @@
+.#{$n}-skip-link {
+  position: absolute;
+  z-index: 100;
+  top: $spacer * 0.5;
+  left: 50%;
+  padding: $spacer * 0.5 $spacer;
+  transform: translate(-50%, -1 * $spacer * 0.25) scale(0);
+  transform-origin: 50% 0%;
+  transition: transform $transition, opacity $transition;
+  border: 1px solid $white;
+  border-radius: $spacer;
+  opacity: 0;
+  background: $interaction;
+  color: $white;
+  font-size: $fontsize-small;
+
+  &:focus {
+    transform: translate(-50%, 0%) scale(1);
+    opacity: 1;
+  }
+}

package/src/stylesheets/7-deprecated/5-components/_upload.scss

@@ -0,0 +1,213 @@
+// ##### UPLOAD #####
+// ==================
+
+// TOGGLE
+// ------
+.#{$n}-upload-toggle-wrapper {
+  width: 0;
+  height: 100%;
+  overflow: visible;
+  transition: width $transition;
+}
+
+.#{$n}-upload-toggle-wrapper.#{$n}-transition--in {
+  width: calc(#{$badge-touch-size} + (#{$spacer} * 0.5)); // INSTEAD OF MARGIN
+}
+
+.#{$n}-upload-toggle {
+  display: flex;
+  flex: 0 0 $badge-touch-size;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: $badge-touch-size;
+  height: $badge-touch-size;
+  padding: 0;
+  transform: translateX(-100%);
+  transition: transform $transition, opacity $transition;
+  opacity: 0;
+  color: transparent;
+  font-size: 0;
+  line-height: 1;
+  text-align: center;
+}
+
+.#{$n}-upload-toggle-wrapper.#{$n}-transition--in .#{$n}-upload-toggle {
+  transform: translateX(0%);
+  opacity: 1;
+}
+
+.#{$n}-upload-toggle .#{$n}-icon {
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
+}
+
+.#{$n}-upload-toggle .#{$n}-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+// UPLOAD DIALOG
+// -------------
+.#{$n}-upload {
+  width: 100%;
+  padding: $spacer * 0.5 $spacer * 0.5 0;
+}
+
+.#{$n}-input--file {
+  display: block;
+}
+
+.#{$n}-upload__container {
+  width: 100%;
+  margin-bottom: $spacer * 0.5;
+}
+
+.#{$n}-upload__visible-label--text {
+  display: block;
+  width: 100%;
+  font-size: $fontsize-default;
+  font-weight: $fontweight-bold;
+}
+
+.#{$n}-upload__content-hint {
+  display: block;
+  width: 100%;
+  margin-bottom: $spacer * 0.5;
+  padding-right: $spacer;
+  font-size: $fontsize-small;
+}
+
+.#{$n}-file-upload {
+  width: 100%;
+  max-width: 100%;
+  border: 1px solid $interaction;
+  border-radius: $borderradius-small;
+
+  &:hover {
+    background-color: rgba($brand3, 0.1);
+  }
+}
+
+.#{$n}-file-upload.#{$n}-focus-within {
+  outline: 1px dotted #212121;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+// Visually hidden
+.#{$n}-upload__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+.#{$n}-upload__label {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: $spacer * 0.5;
+  text-align: left;
+}
+
+.#{$n}-upload__label .#{$n}-icon {
+  flex: 0 0 32px;
+  width: 32px;
+  height: 32px;
+  margin-right: $spacer * 0.5;
+}
+
+.#{$n}-upload__label--text {
+  display: block;
+  flex: 1 1 100%;
+  max-width: 100%;
+  color: $interaction;
+  font-size: $fontsize-medium;
+  font-weight: $fontweight-bold;
+}
+
+.#{$n}-upload__output {
+  display: block;
+  flex: 1 1 100%;
+  max-width: 100%;
+  font-size: $fontsize-small;
+  word-break: break-all;
+}
+
+.#{$n}-upload .#{$n}-button--primary {
+  text-align: center;
+}
+
+.#{$n}-upload__button-container {
+  display: flex;
+  flex: 0 0 100%;
+  justify-content: flex-end;
+}
+
+.#{$n}-upload__cancel {
+  margin-right: $spacer * 0.25;
+  padding: $spacer * 0.5;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+// PROGRESS
+// --------
+.#{$n}-progress__text {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-bottom: $spacer * 0.25;
+}
+
+.#{$n}-progress__text--file-name {
+  max-width: calc(100% - (#{$spacer} * 2));
+  padding-right: $spacer;
+  overflow: hidden;
+  font-size: $fontsize-medium;
+  font-weight: $fontweight-bold;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{$n}-progress__text--percentage {
+  color: $grey-d;
+  font-size: $fontsize-medium;
+  line-height: 1;
+}
+
+.#{$n}-progress .#{$n}-error {
+  margin-top: $spacer * 0.5;
+
+  &:empty {
+    display: none;
+  }
+}
+
+.#{$n}-progress__bar {
+  appearance: none;
+  width: 100%;
+  border: 1px solid $brand1;
+  border-radius: $borderradius-small;
+  background: $white;
+
+  &::-webkit-progress-bar {
+    border-radius: $borderradius-small;
+    background: $white;
+    box-shadow: inset 0 $spacer * 0.125 $spacer * 0.125 0 rgba(0, 0, 0, 0.22);
+  }
+
+  &::-webkit-progress-value {
+    background-color: $interaction;
+  }
+
+  &::-moz-progress-bar {
+    background-color: $interaction;
+  }
+}