@cdc/core 1.1.2 → 1.1.4

package/styles/v2/components/accordion.scss

@@ -0,0 +1,156 @@
+@import "../utils/variables";
+@import "../themes/index";
+
+.cove {
+  .cove-accordion__item {
+    select {
+      text-transform: capitalize;
+    }
+
+    .number-narrow {
+      min-width: auto;
+      width: 75px
+    }
+  }
+
+  .cove-accordion__heading {
+    background: $lightestGray;
+  }
+
+  .cove-accordion__button {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    width: 100%;
+    padding: .3em 1em;
+    font-size: 1em;
+    text-align: left;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    user-select: none;
+    cursor: pointer;
+
+    &::before {
+      display: inline-block;
+      content: '';
+      height: 7px;
+      width: 7px;
+      margin-right: 1em;
+      border-bottom: 2px solid currentColor;
+      border-right: 2px solid currentColor;
+      right: 0;
+      position: absolute;
+      top: 50%;
+      transform: rotate(-45deg) translateX(0) translateY(-50%);
+      transition: .1s all;
+    }
+
+    &[aria-expanded='true']::before,
+    &[aria-selected='true']::before {
+      transform: rotate(45deg) translateX(-2px) translateY(-70%);
+      margin-right: 1.3em;
+      transition: .1s all;
+    }
+
+    .cove-tooltip,
+    .cove-tooltip--target {
+      display: inline-flex;
+    }
+
+    .cove-tooltip {
+      right: 1.5rem;
+    }
+  }
+
+  .cove-accordion__panel {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    padding: 1em 1.25em 2em;
+    animation: fadeIn 0.2s ease-in;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    h5 {
+      font-size: .8em;
+    }
+  }
+
+  .cove-accordion__panel-section {
+    padding: 16px;
+    border: 1px solid #c4c4c4;
+    border-radius: 8px;
+    margin-top: 8px;
+    margin-bottom: 24px;
+  }
+
+  .cove-accordion__panel-row {
+    display: flex;
+    justify-content: flex-start;
+    margin-left: -4px;
+    margin-right: -4px;
+  }
+
+  .cove-accordion__panel-col {
+    flex: 1 1 0;
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  .cove-accordion__divider {
+    border: 0;
+    border-top: 1px solid #e2e2e2;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  // TODO: May not need these? Input styles should be pulling from global ----------
+
+  .cove-accordion__panel-label {
+    font-size: 14px;
+    text-transform: unset;
+    font-weight: normal;
+    line-height: 16px;
+    user-select: none;
+  }
+
+  .cove-accordion__small-inputs {
+    input[type="text"] {
+      display: block;
+      width: 100%;
+      height: 22px;
+      min-width: unset !important;
+      padding-top: 0;
+      padding-bottom: 0;
+      font-size: 1.1em;
+      line-height: 1em;
+      box-sizing: border-box;
+    }
+  }
+
+  .cove-accordion__panel-label--inline {
+    @extend .cove-accordion__panel-label;
+    text-align: right;
+    margin-right: 8px;
+  }
+
+  .cove-accordion__panel-label--muted {
+    @extend .cove-accordion__panel-label;
+    color: #6f6f6f;
+  }
+
+  .cove-accordion__input-error {
+    color: #D8000C;
+    border: #D8000C 1px solid;
+  }
+
+  .cove-accordion__panel-error {
+    color: #D8000C;
+    background-color: #FFD2D2;
+    border: #D8000C 1px solid;
+    margin-top: 12px;
+    padding: 4px 8px;
+    line-height: 1.2em;
+    font-size: 14px;
+    border-radius: 4px;
+  }
+}

package/styles/v2/components/button.scss

@@ -0,0 +1,178 @@
+@import "../utils/variables";
+@import "../themes/index";
+
+.cove-button {
+  display: inline-block;
+  position: relative;
+  min-height: 2.125rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  color: #fff;
+  background-color: $primary;
+  border-radius: 0.1875rem;
+  border: 0;
+  outline: none;
+  transition: all 500ms $transition-expo-out;
+
+  * {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  &:disabled {
+    background-color: #adadad !important;
+    cursor: not-allowed !important;
+  }
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+
+  &:hover,
+  &:active,
+  &:focus,
+  &.active {
+    background-color: lighten($primary, 5%);
+  }
+
+  &:active,
+  &:focus {
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      outline: 2px solid rgba(161, 161, 161, 0.6);
+      border-radius: .3125em;
+      margin: -2px;
+      pointer-events: none;
+    }
+  }
+
+  &.fluid {
+    width: 100%;
+  }
+
+  &.success {
+    background-color: #44aa41;
+
+    &:hover {
+      background-color: lighten(#44aa41, 5%);
+    }
+  }
+
+  &.warn {
+    background-color: #d73636;
+
+    &:hover {
+      background-color: darken(#d73636, 5%);
+    }
+  }
+
+  &.muted {
+    background-color: #a0a0a0;
+
+    &:hover {
+      background-color: darken(#a0a0a0, 5%);
+    }
+  }
+
+  &.cove-button--flex-center {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.cove-button__text {
+  position: relative;
+  transition: width 500ms $transition-expo-out;
+  align-self: stretch;
+
+  .cove-button__text--loading {
+    opacity: 0;
+  }
+
+  .cove-button__text--children {
+    opacity: 1;
+  }
+
+  .cove-button__text--loading,
+  .cove-button__text--children {
+    position: absolute;
+    top: 0;
+    left: 0;
+    white-space: nowrap;
+    transition: all 500ms $transition-expo-out;
+  }
+}
+
+.cove-button__load-spin {
+  display: flex;
+  width: 0;
+  overflow: hidden;
+}
+
+.cove-button__text--loading,
+.cove-button__load-spin {
+  white-space: nowrap;
+  transition: all 500ms $transition-expo-out;
+  opacity: 0;
+}
+
+/* Old Styles ------------------------------------------
+.btn {
+  display: block;
+  padding: .4em .8em;
+  font-size: 1em;
+  color: #fff;
+  background: #005eaa;
+  border: 0;
+  border-radius: .3em;
+  transition: .1s background-color;
+  cursor: pointer;
+
+  &.full-width {
+    width: 100%;
+  }
+
+  &:hover {
+    transition: .1s background-color;
+  }
+
+  &.secondary {
+    font-size: .8em;
+    padding: .3em 1em;
+    background: rgba(0, 0, 0, 0.3);
+    display: inline-block;
+    margin-bottom: 1em;
+
+    &:hover {
+      background: rgba(0, 0, 0, .5);
+    }
+  }
+
+  &.danger {
+    background-color: $red;
+    color: #fff;
+
+    &:hover {
+      background-color: darken($red, 5%);
+    }
+  }
+
+  &:hover {
+    transition: .1s all;
+    background: lighten(#005eaa, 5%);
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+    position: relative;
+    top: 2px;
+    margin-left: 5px;
+  }
+}*/