@bloom-housing/ui-components 2.0.0-pre-tailwind

package/src/global/custom_counter.scss

@@ -0,0 +1,50 @@
+.custom-counter__item {
+  @screen md {
+    @apply mb-12;
+    @apply ml-8;
+    @apply pl-12;
+    @apply relative;
+    counter-increment: step-counter;
+  }
+}
+
+.custom-counter__item::before {
+  @screen md {
+    @apply absolute;
+    @apply font-serif;
+    @apply text-gray-850;
+    top: 0;
+    left: -1rem;
+    content: counter(step-counter);
+    margin-right: 5px;
+    font-size: 4.375rem;
+    line-height: 0.85;
+  }
+}
+
+.custom-counter__header {
+  @apply pb-4;
+
+  @screen md {
+    @apply -ml-4;
+    @apply pl-4;
+    @apply border-solid;
+    @apply border-l-2;
+    @apply border-gray-450;
+    @apply mb-4;
+    @apply mt-4;
+  }
+}
+
+.custom-counter__title {
+  @apply text-lg;
+
+  @screen md {
+    @apply text-xl;
+  }
+}
+
+.custom-counter__subtitle {
+  @apply text-gray-700;
+  @apply text-tiny;
+}

package/src/global/forms.scss

@@ -0,0 +1,362 @@
+.field {
+  margin-bottom: 1.25rem;
+
+  * > &:last-child {
+    margin-bottom: 0;
+  }
+
+  label,
+  .label {
+    @apply pb-2;
+    @apply text-tiny;
+    @apply text-gray-800;
+  }
+
+  label + .control {
+    @apply mt-2;
+  }
+
+  label.sr-only + .control,
+  label.field-label--caps + .control {
+    @apply mt-0;
+  }
+
+  .label + .field-note {
+    @apply mt-2;
+  }
+
+  .field-label--caps.label + .field-note {
+    @apply mt-0;
+  }
+
+  .control {
+    position: relative;
+
+    .input {
+      @apply border;
+      @apply border-gray-500;
+      @apply bg-gray-200;
+      @apply rounded;
+      @apply w-full;
+      @apply py-3;
+      @apply text-gray-900;
+      font-family: inherit;
+      font-size: 1rem;
+      line-height: normal;
+    }
+
+    select.input {
+      @apply pl-3;
+      @apply pr-8;
+    }
+
+    input.input {
+      @apply px-3;
+    }
+
+    .prepend {
+      @apply absolute;
+      @apply px-3;
+      @apply py-2;
+      @apply items-center;
+      @apply text-lg;
+      background: transparent;
+    }
+
+    .prepend + input[aria-invalid="false"] {
+      @apply pl-8;
+    }
+
+    .prepend + input[aria-invalid="true"] {
+      @apply pl-12;
+    }
+
+    &.control-narrower {
+      max-width: 8rem;
+    }
+  }
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    opacity: 0;
+    position: absolute;
+    margin-left: -20px;
+
+    &:focus {
+      text-decoration: none;
+      // Appears to be for the case of no label
+      outline: none;
+      box-shadow: 0 0 0 2px #ffffff, 0 0 3px 4px $tailwind-primary;
+    }
+  }
+
+  input[type="checkbox"] + label,
+  input[type="radio"] + label {
+    cursor: pointer;
+    // margin-bottom: 0.5em;
+    margin-left: 2rem;
+    display: block;
+    text-indent: -2rem;
+  }
+
+  input[type="checkbox"] + label::before,
+  input[type="radio"] + label::before {
+    background: white;
+    border-radius: 4px;
+    box-shadow: 0 0 0 1px white, 0 0 0 2px map-get($tailwind-gray, 550);
+    content: "\a0";
+    display: inline-block;
+    height: 1.25rem;
+    line-height: 0.8;
+    margin-right: 0.8em;
+    text-indent: 0.15em;
+    vertical-align: 0.2em;
+    width: 1.25rem;
+  }
+
+  input[type="radio"] + label::before {
+    height: 1.2rem;
+    width: 1.2rem;
+    border-radius: 100%;
+  }
+
+  input[type="checkbox"]:checked + label::before,
+  input[type="radio"]:checked + label::before {
+    background-color: $tailwind-primary;
+    box-shadow: 0 0 0 1px $tailwind-primary;
+  }
+
+  input[type="radio"]:checked + label::before {
+    box-shadow: 0 0 0 1px white, 0 0 0 2px $tailwind-primary;
+  }
+
+  input[type="checkbox"]:checked + label::before {
+    background-image: url("/images/check.png");
+    background-image: url("/images/check.svg");
+    background-position: 50%;
+    background-repeat: no-repeat;
+  }
+
+  input[type="radio"]:focus + label::before,
+  input[type="checkbox"]:focus + label::before {
+    box-shadow: 0 0 0 1px white, 0 0 0 2px $tailwind-accent-cool, 0 0 3px 4px $tailwind-accent-cool;
+  }
+
+  input[type="checkbox"]:disabled + label {
+    color: map-get($tailwind-gray, 450) !important;
+  }
+
+  input[type="checkbox"]:disabled + label::before,
+  input[type="radio"]:disabled + label::before {
+    background: map-get($tailwind-gray, 400);
+    box-shadow: 0 0 0 1px map-get($tailwind-gray, 450);
+    cursor: not-allowed;
+  }
+
+  select {
+    @apply text-gray-900;
+    @apply rounded;
+    @apply border;
+    @apply border-gray-500;
+    @apply bg-gray-200;
+    @apply text-gray-900;
+    @apply leading-tight;
+    @apply py-2;
+    @apply px-3;
+    height: 3em;
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: normal;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background-image: url("/images/arrow-down.png");
+    background-image: url("/images/arrow-down.svg");
+    background-position: right 0.75rem center;
+    background-repeat: no-repeat;
+    background-size: 0.75rem;
+    padding-right: 2.25rem;
+  }
+
+  input:disabled,
+  select:disabled,
+  textarea:disabled,
+  .control input:disabled,
+  .control select:disabled,
+  .control textarea:disabled {
+    @apply bg-gray-400;
+    cursor: not-allowed;
+    @apply text-gray-700;
+    @apply border-gray-500;
+  }
+
+  select:disabled,
+  .control select:disabled {
+    opacity: 1;
+  }
+
+  &.error {
+    label {
+      @apply text-red-700;
+    }
+
+    .control {
+      .input,
+      .prepend,
+      select {
+        @apply border-red-700;
+        @apply border-2;
+      }
+
+      .prepend {
+        @apply text-red-700;
+      }
+    }
+
+    .error-message {
+      @apply text-sm;
+      @apply text-red-700;
+    }
+
+    input[type="radio"] + label::before {
+      box-shadow: 0 0 0 2px #fff, 0 0 0 4px $tailwind-alert;
+    }
+
+    input[type="checkbox"] + label::before {
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px $tailwind-alert;
+    }
+  }
+}
+
+input[type],
+textarea,
+select {
+  @apply rounded;
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #fff, 0 0 3px 4px $tailwind-accent-cool;
+  }
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.field-group--inline {
+  @apply flex;
+
+  .field {
+    @apply mr-5;
+    @apply mb-0;
+  }
+}
+
+.field-label {
+  @apply pb-2;
+  @apply text-tiny;
+  @apply text-gray-800;
+}
+
+.field-label--caps {
+  @apply font-sans;
+  @apply uppercase;
+  @apply text-gray-750;
+  @apply tracking-widest;
+  @apply font-semibold;
+  @apply text-tiny;
+  @apply mb-3;
+  @apply inline-block;
+}
+
+.field--inline {
+  display: inline-block;
+}
+
+.field--inline + .field--inline {
+  margin-left: 1.5rem;
+}
+
+.flex > .field,
+.field-group--date .field {
+  @apply flex-auto;
+  margin-left: 0.325rem;
+  margin-right: 0.325rem;
+}
+
+.flex > .field,
+.field-group--date .field {
+  &:first-of-type {
+    margin-left: 0;
+  }
+  &:last-of-type {
+    margin-right: 0;
+  }
+}
+
+.field-group--date {
+  @apply flex;
+
+  .field {
+    max-width: 3.5rem;
+    margin-bottom: 0;
+
+    select {
+      padding-right: 1.75rem;
+      background-position: right 0.625rem center;
+    }
+
+    &:last-child {
+      max-width: 4.5rem;
+    }
+  }
+}
+
+.field-note {
+  @apply text-tiny;
+  @apply text-gray-700;
+  @apply font-semibold;
+}
+
+.form-section__title {
+  @apply font-alt-sans;
+  @apply text-xl;
+  @apply text-gray-900;
+  @apply font-medium;
+  @apply block;
+  @apply mb-1;
+}
+
+.form-section__description {
+  @apply font-sans;
+  @apply text-base;
+  @apply text-gray-750;
+  @apply block;
+  @apply mb-8;
+}
+
+progress,
+::-webkit-progress-bar {
+  appearance: none;
+  width: 100%;
+  @apply bg-gray-400;
+  border: 0;
+  height: 12px;
+  border-radius: 6px;
+}
+::-webkit-progress-value {
+  border-radius: 6px;
+  @apply bg-primary;
+  transition: width 0.25s;
+}
+::-moz-progress-bar {
+  border-radius: 6px;
+  @apply bg-primary;
+  transition: width 0.25s;
+}

package/src/global/headers.scss

@@ -0,0 +1,89 @@
+// Listing Detail
+.detail-header {
+  @apply relative;
+  @apply pr-4;
+  @apply pb-6;
+  @apply pl-4;
+  @apply pt-4;
+  @apply border-b;
+  @apply border-gray-400;
+  @apply text-primary-darker;
+
+  @screen md {
+    @apply pt-0;
+    @apply pb-8;
+    @apply text-sm;
+    @apply border-none;
+    @apply text-gray-800;
+  }
+}
+
+.detail-header__image {
+  @apply absolute;
+  @apply w-12;
+  @apply mr-2;
+
+  @screen md {
+    @apply left-0;
+  }
+}
+
+.detail-header__hgroup {
+  @apply ml-12;
+  @apply pl-4;
+
+  @screen md {
+    @apply border-l-2;
+    @apply border-primary;
+  }
+
+  .ui-icon {
+    @apply absolute;
+    top: 1rem;
+    right: 1rem;
+
+    @screen md {
+      @apply hidden;
+    }
+
+    svg {
+      @apply w-3;
+      @apply h-3;
+    }
+  }
+}
+
+.detail-header__title {
+  @apply font-alt-sans;
+  @apply uppercase;
+  @apply text-tiny;
+  @apply tracking-widest;
+  @apply text-primary-darker;
+
+  @screen md {
+    @apply text-black;
+    @apply font-serif;
+    @apply text-3xl;
+    @apply normal-case;
+    @apply tracking-normal;
+    @apply text-gray-900;
+  }
+}
+
+.detail-header__subtitle {
+  @apply text-tiny;
+
+  @screen md {
+    @apply text-gray-700;
+  }
+}
+
+.toggle-header {
+  @apply font-sans;
+  @apply text-tiny;
+  @apply bg-primary-light;
+  @apply p-4;
+  @apply text-gray-800;
+  @apply border-b;
+  @apply border-primary;
+}