@cdc/core 1.1.2 → 1.1.3

package/styles/v2/components/input.scss

@@ -0,0 +1,372 @@
+@import "../utils/variables";
+@import "../themes/index";
+
+input, datalist, textarea, select {
+  transition: border-color 200ms $transition-expo-out;
+  font-family: sans-serif;
+}
+
+input[type="text"],
+input[type="number"],
+input[type="date"],
+input[type="search"],
+datalist, textarea, select {
+  padding: 0.5em 0.5em;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #cbcbcb;
+  border-radius: 3px;
+  width: 100%;
+
+  &::placeholder {
+    transition: opacity 400ms $transition-expo-out;
+    color: #b3b3b3;
+    opacity: 1;
+  }
+
+  &:focus {
+    border-width: 1px;
+    border-style: solid;
+    border-color: #4c4c4c;
+    outline: 0;
+
+    &::placeholder {
+      opacity: 0;
+    }
+  }
+}
+
+select {
+  &.input--small {
+    padding: 0;
+  }
+}
+
+input[type="text"] {
+}
+
+textarea {
+  width: 100%;
+  min-height: 140px;
+  max-width: 100%;
+  line-height: 1.5em;
+}
+
+label {
+  display: block;
+  font-size: 0.8em;
+  text-transform: uppercase;
+  user-select: none;
+
+  &:not(:first-child) {
+    margin-top: 1em;
+  }
+}
+
+.cove-input-group {
+  &:not(:last-child) {
+    margin-bottom: 1.5em;
+  }
+
+  > label {
+    margin-bottom: 0.5rem;
+  }
+
+  .cove-input-group--checkbox:last-of-type,
+  .cove-input-group--radio:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+.cove-input-group--checkbox {
+  margin-bottom: 1rem;
+}
+
+.cove-input-group--checkbox,
+.cove-input-group--radio {
+  display: flex;
+  align-items: center;
+
+  label,
+  input[type="checkbox"],
+  input[type="radio"] {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  label {
+    padding-right: 6px;
+
+    + input[type="checkbox"],
+    + input[type="radio"] {
+      margin-left: 0;
+    }
+  }
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    display: inline-block;
+    margin-right: 0;
+    margin-left: 0;
+
+    + label {
+      padding-right: 0;
+      padding-left: 6px;
+    }
+  }
+
+  input[type="radio"] {
+    margin-bottom: 5px;
+  }
+}
+
+.cove-input--hidden {
+  position: absolute;
+  z-index: -999;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.cove-input__toggle {
+  display: inline-block;
+  position: relative;
+  width: 60px;
+  height: 26px;
+  padding: 3px;
+  cursor: pointer;
+
+  &.active {
+    .cove-input__toggle-button {
+      left: 100%;
+      transform: translateX(-100%);
+    }
+
+    .cove-input__toggle-track {
+      background-color: #75b936;
+    }
+  }
+
+  &.toggle--block {
+    width: unset;
+    aspect-ratio: 1.85/1;
+    padding: 4px;
+
+    .cove-input__toggle-button {
+      border-radius: 10%;
+      box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%);
+    }
+
+    .cove-input__toggle-track {
+      border-radius: 4px;
+      box-shadow: 0 0 0 transparent;
+    }
+
+    &.active {
+      .cove-input__toggle-track {
+        box-shadow: inset -40px 0 10px -10px rgb(0 0 0 / 15%);
+      }
+    }
+  }
+
+  &.toggle--pill {
+    width: 60px;
+    height: 25px;
+
+    .cove-input__toggle-button {
+      border-radius: 999px;
+      aspect-ratio: 1.75/1;
+
+      &::before,
+      &::after {
+        content: '';
+        display: block;
+        width: 1px;
+        height: calc(100% - 10px);
+        background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(227, 227, 227, 1) 30%, rgba(227, 227, 227, 1) 70%, rgba(255, 255, 255, 1) 100%);
+        position: absolute;
+        top: 5px;
+      }
+
+      &::before {
+        left: 42%;
+      }
+
+      &::after {
+        right: 42%;
+      }
+    }
+  }
+
+  &.toggle--3d {
+    .cove-input__toggle-button {
+      background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 1) 45%, rgb(200 200 200) 100%);
+      box-shadow: 0 1px 3px 1px rgb(0 0 0 / 40%), inset 0 0 3px 2px #fff;
+      height: 160%;
+      top: -30%;
+      transform: translateX(-20%);
+
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: calc(100% - 6px);
+        height: calc(100% - 6px);
+        border: 1px solid #ececec;
+        border-radius: 999px;
+        margin: 3px;
+      }
+    }
+
+    .cove-input__toggle-track {
+      box-shadow: inset 1px 1px 3px rgb(0 0 0 / 40%)
+    }
+
+    &.active {
+      .cove-input__toggle-button {
+        transform: translateX(-80%);
+      }
+
+      .cove-input__toggle-track {
+        box-shadow: inset 1px 1px 3px rgb(0 0 0 / 60%)
+      }
+    }
+  }
+}
+
+.cove-input__toggle--small {
+  @extend .cove-input__toggle;
+  width: 40px;
+  height: 20px;
+
+  &.toggle--pill {
+    width: 45px;
+    height: 20px;
+
+    .cove-input__toggle-button {
+      aspect-ratio: 1.5/1;
+
+      &:before,
+      &:after {
+        display: none;
+      }
+    }
+  }
+
+  &.toggle--3d {
+    .cove-input__toggle-button {
+      box-shadow: 0 1px 2px 2px rgb(0 0 0 / 22%), inset 0 0 3px 2px #fff;
+
+      &:after {
+        width: calc(100% - 4px);
+        height: calc(100% - 4px);
+        margin: 2px;
+      }
+    }
+  }
+}
+
+.cove-input__toggle--large {
+  @extend .cove-input__toggle;
+  width: 80px;
+  height: 35px;
+
+  &.toggle--pill {
+    width: 80px;
+    height: 30px;
+  }
+
+  &.toggle--3d {
+    .cove-input__toggle-button {
+
+      &:after {
+        width: calc(100% - 8px);
+        height: calc(100% - 8px);
+        margin: 4px;
+      }
+    }
+  }
+}
+
+.cove-input__toggle-button {
+  position: relative;
+  left: 0;
+  height: 100%;
+  aspect-ratio: 1/1;
+  background-color: #fff;
+  box-shadow: -2px 4px 10px -7px rgb(0 0 0);
+  border-radius: 100%;
+  transition: all 200ms $transition-expo-out;
+  z-index: 2;
+}
+
+.cove-input__toggle-track {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #ccc;
+  border-radius: 999px;
+  transition: all 200ms $transition-expo-out;
+}
+
+.cove-input__checkbox {
+  display: inline-block;
+  width: 1.75rem;
+  aspect-ratio: 1/1;
+  cursor: pointer;
+
+  &--small {
+    @extend .cove-input__checkbox;
+    width: 1.25rem;
+  }
+
+  &--large {
+    @extend .cove-input__checkbox;
+    width: 2.25rem;
+  }
+
+  &.active {
+    .cove-input__checkbox-box {
+      background-color: #fff;
+
+      &.custom-color {
+        box-shadow: none;
+      }
+    }
+
+    .cove-input__checkbox-check {
+      opacity: 1;
+      transform: translateY(-1px);
+    }
+  }
+}
+
+.cove-input__checkbox-box {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: #f4f4f4;
+  border-radius: 3px;
+  box-shadow: inset 0 0 0 1px #c4c4c4;
+  transition: all 150ms $transition-expo-out;
+}
+
+.cove-input__checkbox-check {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: 3px;
+  fill: #fff;
+  pointer-events: none;
+  transform: translateY(-1px);
+  transition: all 250ms $transition-expo-out;
+  opacity: 0;
+}

package/styles/v2/components/modal.scss

@@ -0,0 +1,64 @@
+@import "../utils/variables";
+@import "../themes/index";
+
+.cove-modal {
+  background-color: #fff;
+  border-radius: 5px;
+  box-shadow: 3px 3px 10px rgb(0 0 0 / 20%);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
+}
+
+.cove-modal__header {
+  display: block;
+  position: relative;
+  min-height: 2.25rem;
+  padding: 1rem 2.5rem 1.5rem 1rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1em;
+  border-radius: 5px 5px 0 0;
+  box-shadow: inset 0 -1px 0 0 rgb(0 0 0 / 10%);
+}
+
+.cove-modal__theme--light {
+  .cove-modal__header {
+    color: #fff;
+  }
+}
+
+.cove-modal__content {
+  padding: 1rem;
+}
+
+.cove-modal__footer {
+  padding: 0 1rem 1rem;
+  box-shadow: inset 0 1px 0 0 rgb(0 0 0 / 10%);
+}
+
+.cove-modal--close {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  min-height: 2.25rem;
+  max-height: 3.25rem;
+  padding: 10px;
+  font-size: 1.25rem;
+  background-color: transparent;
+  border-radius: 0 5px 0 0;
+  border: 0;
+  cursor: pointer;
+  color: inherit;
+
+  &:active,
+  &:focus {
+    box-shadow: inset 0 0 0 2px rgb(204 204 204 / 40%);
+  }
+
+  .cove-icon {
+    flex: 0 0 auto;
+  }
+}

package/styles/v2/components/overlay.scss

@@ -0,0 +1,80 @@
+@import "../utils/variables";
+@import "../themes/index";
+
+.cove-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 20;
+
+  &.animate-in {
+    .cove-overlay__bg {
+      animation: fadeIn 400ms $transition-expo-out 0s 1 forwards;
+    }
+
+    .cove-overlay__container {
+      animation: fadeInUp 700ms $transition-expo-out 50ms 1 forwards;
+    }
+  }
+
+  &.animate-out {
+    .cove-overlay__bg {
+      animation: fadeOut 400ms $transition-expo-out 0s 1 forwards;
+    }
+
+    .cove-overlay__container {
+      animation: fadeOut 400ms $transition-expo-out 0s 1 forwards;
+      transform: translateY(0);
+    }
+  }
+
+  &.show {
+    .cove-overlay__bg {
+      opacity: 1
+    }
+
+    .cove-overlay__container {
+      opacity: 1;
+      transform: translateY(0)
+    }
+  }
+}
+
+.cove-overlay__bg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  opacity: 0;
+}
+
+.cove-overlay__wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.cove-overlay__container {
+  display: block;
+  width: 100%;
+  max-width: 600px;
+  transform: translateY(25px);
+  opacity: 0;
+  z-index: 1;
+}
+
+.overlay-error {
+  .cove-overlay__container {
+    animation: shake-horizontal 400ms 1 ease-in-out;
+  }
+}

package/styles/v2/layout/_alert.scss

@@ -0,0 +1,36 @@
+.error-box {
+  display: flex;
+  padding: .3rem 1rem;
+  justify-content: space-between;
+  background: #FFC2C2;
+  font-size: .9rem;
+
+  strong {
+    font-weight: 600;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .dismiss-error {
+    flex-shrink: 0;
+    font-size: .8rem;
+    cursor: pointer;
+  }
+}
+
+.warning {
+  color: #D8000C;
+  background-color: #FFD2D2;
+  border: #D8000C 1px solid;
+  padding: .75em 1em;
+  margin: 1em 0;
+  font-size: .8em;
+  border-radius: .4em;
+
+  strong {
+    font-weight: 600;
+    display: block;
+  }
+}

package/styles/v2/layout/_component.scss

@@ -0,0 +1,31 @@
+.cove-component {
+  border-radius: 3px;
+  // box-shadow: rgba(0, 0, 0, 0.2) 3px 6px 10px; // no box shadows
+}
+
+.cove-component__header {
+  width: 100%;
+  padding: 0.6rem 0.8rem;
+  border-bottom-width: 3px;
+  border-bottom-style: solid;
+  border-radius: 3px 3px 0 0;
+  font-size: 1.1rem;
+  transition: background-color 200ms ease, border-color 200ms ease;
+  color: #fff;
+}
+
+.cove-component__content {
+  padding-top: 1rem;
+  background: $lightestGray;
+  border: solid 1px #ccc;
+  border-top: none;
+  border-radius: 0 0 3px 3px;
+
+  &.no-borders {
+    border: none;
+  }
+}
+
+.cove-component__content-wrap {
+  padding: 0 1rem 1rem;
+}