@cdc/core 1.1.4 → 4.22.11

package/styles/v2/components/input.scss

@@ -1,372 +0,0 @@
-@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/layout/_header.scss

@@ -1,13 +0,0 @@
-.header {
-  position: relative;
-  padding: 0.6em 0.8em;
-  margin: 0;
-  color: #fff;
-  font-size: 1.1em;
-  border-bottom-width: 3px;
-  border-bottom-style: solid;
-
-  &:not(:empty) {
-    margin: 0 0 1rem 0;
-  }
-}

package/styles/v2/layout/_link.scss

@@ -1,46 +0,0 @@
-.guidance-link {
-  display: flex;
-  position: relative;
-  padding: .75em 1em;
-  margin: 2em 0 1em;
-  text-decoration: none;
-  font-size: 1em;
-  border: $lightGray 1px solid;
-  color: #444;
-  transition: .2s all;
-
-  &:before {
-    content: " ";
-    position: absolute;
-    top: -1px;
-    left: -1px;
-    bottom: -1px;
-    width: 5px;
-    background: $blue;
-  }
-
-  &:hover {
-    background: $lightestGray;
-    color: #444;
-    transition: .2s all;
-  }
-
-  > div {
-    font-size: .9em;
-  }
-
-  svg {
-    width: 60px;
-    color: $blue;
-    margin-right: 1rem;
-
-    path {
-      fill: currentColor;
-    }
-  }
-
-  h3 {
-    font-weight: 600;
-    font-size: 1.2rem;
-  }
-}