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

package/src/global/homepage.scss

@@ -0,0 +1,8 @@
+.homepage-extra {
+  @apply text-center;
+  @apply text-base;
+
+  @screen md {
+    @apply text-lg;
+  }
+}

package/src/global/index.scss

@@ -0,0 +1,72 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700");
+@import url("https://fonts.googleapis.com/css?family=Lato:400,900,700");
+@import url("https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic");
+
+html {
+  @apply antialiased;
+}
+
+body {
+  @apply font-sans;
+  @apply bg-white;
+  @apply text-gray-900;
+}
+
+.-top {
+  top: -0.8rem;
+}
+
+main {
+}
+
+.site-wrapper {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+.site-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    > section {
+      flex: 1;
+    }
+  }
+}
+
+.site-content--wide-content {
+  .navbar,
+  .page-header__group {
+    @apply max-w-screen-xl;
+  }
+}
+
+@import "mixins.scss";
+@import "markdown.scss";
+@import "navbar.scss";
+@import "text.scss";
+@import "headers.scss";
+@import "blocks.scss";
+@import "accordion.scss";
+@import "custom_counter.scss";
+@import "forms.scss";
+@import "lists.scss";
+@import "tables.scss";
+@import "homepage.scss";
+@import "print.scss";
+@import "vendor/ag_grid.scss";
+/* ***********/
+/* Additional stylesheets are contained within individual component folders */
+/* ***********/
+
+@import "tailwindcss/utilities";

package/src/global/lists.scss

@@ -0,0 +1,21 @@
+// responsive content spacing
+.responsive-content-list {
+  .responsive-content-item {
+    @screen md {
+      @apply pt-12;
+      @apply pb-4;
+      margin-left: -9999rem;
+      margin-right: -9999rem;
+      /* add back negative margin value */
+      padding-left: 9999rem;
+      padding-right: 9999rem;
+    }
+  }
+
+  .header-hidden {
+    @screen md {
+      @apply pt-0;
+      @apply pb-0;
+    }
+  }
+}

package/src/global/markdown.scss

@@ -0,0 +1,33 @@
+.markdown {
+  h3 {
+    @apply mt-8;
+    @apply mb-5;
+    @apply text-3xl;
+
+    @screen md {
+      @apply text-xl;
+    }
+  }
+
+  h3:first-child {
+    @apply mt-0;
+  }
+
+  hr {
+    @apply mt-8;
+    @apply mb-8;
+    @apply border-b;
+    @apply border-solid;
+    @apply border-gray-450;
+  }
+
+  p:not(:last-child),
+  ul:not(:last-child) {
+    @apply mb-4;
+  }
+
+  ul {
+    list-style: disc;
+    @apply ml-6;
+  }
+}

package/src/global/mixins.scss

@@ -0,0 +1,175 @@
+// Using due to errors from compass mixin
+@mixin custom-linear-gradient($top, $bottom) {
+  background: $top; /* Old browsers */
+  background: -moz-linear-gradient(top, $top 0%, $bottom 100%); /* FF3.6+ */
+  background: -webkit-linear-gradient(top, $top 0%, $bottom 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, $top 0%, $bottom 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top, $top 0%, $bottom 100%); /* IE10+ */
+  background: linear-gradient(to bottom, $top 0%, $bottom 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
+}
+
+// Adds full screen image to pseudo element
+@mixin overlay-image() {
+  @apply block;
+  @apply absolute;
+  @apply inset-0;
+  content: "";
+  z-index: 2;
+}
+
+@mixin clearfix() {
+  &::after {
+    @apply table;
+    @apply clear-both;
+    content: "";
+  }
+}
+
+@mixin has-toggle() {
+  &:after {
+    @apply font-bold;
+    @apply inline-block;
+    @apply ml-2;
+    @apply mr-2;
+    @apply text-sm;
+    content: "⌃";
+    transform: rotate(180deg) translateY(2px);
+  }
+  &[aria-expanded="true"]:after {
+    @apply mr-5;
+    transform: rotate(0deg) translateY(2px);
+  }
+}
+
+@mixin has-image-skeleton() {
+  @apply bg-gray-500;
+
+  &::before {
+    @apply float-left;
+    content: "";
+    width: 1px;
+    margin-left: -1px;
+    height: 0;
+    padding-top: 591.44px / 1127.34px * 100%;
+  }
+
+  &::after {
+    /* to clear float */
+    @apply table;
+    @apply clear-both;
+    content: "";
+  }
+}
+
+@mixin filled-appearances() {
+  &.is-primary {
+    @apply bg-primary-dark;
+    @apply border-primary-dark;
+    @apply text-white;
+
+    &:hover {
+      @apply bg-primary-darker;
+      @apply border-primary-darker;
+    }
+  }
+
+  &.is-success {
+    @apply bg-success;
+    @apply border-success;
+    @apply text-white;
+
+    &:hover {
+      @apply bg-success-dark;
+    }
+  }
+
+  &.is-alert {
+    @apply bg-alert;
+    @apply border-alert;
+    @apply text-white;
+
+    &:hover {
+      @apply bg-alert-dark;
+      @apply border-alert-dark;
+    }
+  }
+
+  &.is-warning {
+    @apply bg-warn;
+    @apply border-warn;
+    @apply text-gray-800;
+
+    &:hover {
+      @apply text-white;
+      @apply bg-warn-dark;
+      @apply border-warn-dark;
+    }
+  }
+
+  &.is-borderless {
+    @apply text-primary-darker;
+    border-color: transparent;
+    background: transparent;
+
+    &:hover {
+      background: transparent;
+      @apply text-primary-darker;
+    }
+  }
+}
+
+@mixin outlined-appearances() {
+  @apply bg-white;
+  @apply text-primary;
+  @apply border-2;
+  @apply border-primary;
+
+  &:hover {
+    @apply bg-primary-dark;
+    @apply text-white;
+  }
+
+  &.is-outlined {
+    background: transparent;
+
+    &.is-success {
+      @apply text-success;
+
+      &:hover {
+        @apply text-white;
+      }
+    }
+
+    &.is-alert {
+      @apply text-alert;
+
+      &:hover {
+        @apply text-white;
+      }
+    }
+
+    &.is-warning {
+      @apply text-gray-800;
+
+      &:hover {
+        @apply text-white;
+      }
+    }
+  }
+}
+
+@mixin transition-timing {
+  transition-duration: 0.25s;
+  transition-timing-function: cubic-bezier(0.475, 0.335, 0.43, 0.94);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0s;
+  }
+}
+
+@mixin ellipsis() {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/src/global/navbar.scss

@@ -0,0 +1,280 @@
+@import "vendor/setup_bulma";
+@import "~bulma/sass/components/navbar.sass";
+
+.navbar-notice {
+  @apply hidden;
+  @apply w-full;
+  @apply bg-primary;
+  @apply text-right;
+  @apply text-white;
+
+  @screen md {
+    @apply block;
+  }
+}
+
+.navbar-notice__text {
+  @apply max-w-5xl;
+  @apply m-auto;
+  @apply text-sm;
+  @apply pt-2;
+  @apply pb-2;
+  @apply pr-1;
+
+  a,
+  a:hover {
+    @apply underline;
+    color: inherit;
+  }
+}
+
+// Custom Navbar Styles
+nav.navbar {
+  @apply max-w-5xl;
+  @apply m-auto;
+}
+
+.navbar-brand {
+  @apply relative;
+  @apply justify-start;
+
+  @screen print {
+    @apply justify-center;
+  }
+}
+
+.navbar-image-only {
+  max-height: 80% !important; // Unfortunately we need this to overrwrite Bulma, reccomend removing Bulma #1345
+  max-width: 100%;
+}
+
+.navbar-custom-width {
+  @apply flex;
+  @apply items-center;
+  @apply justify-center;
+  @apply flex-col;
+}
+
+.navbar-image-only-container {
+  // 75px - .5rem of padding from the container around it.
+  height: 67px;
+  @screen md {
+    height: 120px;
+  }
+}
+
+.navbar-width-slim {
+  width: 200px;
+}
+
+.navbar-width-med {
+  width: 450px;
+}
+
+.navbar-width-wide {
+  width: 600px;
+}
+
+.navbar-brand .logo {
+  @apply text-black;
+  @apply block;
+  @apply text-center;
+  @apply z-10;
+  @apply items-center;
+  @apply justify-center;
+  max-width: 60%;
+  max-height: 120px;
+
+  @screen md {
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
+    margin-bottom: -0.75rem;
+    margin-top: -2.75em;
+    padding-top: 1em;
+
+    &:focus {
+      box-shadow: 0 0 3px 4px $tailwind-accent-cool;
+    }
+  }
+
+  @screen print {
+    margin-top: 0;
+  }
+
+  &.navbar-item,
+  &.navbar-item:hover,
+  &.navbar-item:focus {
+    @apply bg-white;
+    @apply border-b-0;
+    @apply pt-1;
+    @apply pb-1;
+    @apply pl-4;
+    @apply pr-4;
+    @apply flex;
+  }
+
+  .logo__image {
+    @apply inline-block;
+    @apply mt-1;
+    @apply mb-1;
+    max-height: 1.5rem;
+
+    @screen md {
+      @apply mt-3;
+      @apply mb-2;
+      max-height: 2rem;
+    }
+  }
+
+  .logo__title {
+    @apply uppercase;
+    @apply font-bold;
+    @apply text-gray-900;
+    @apply font-alt-sans;
+    @apply tracking-wider;
+    @apply text-sm;
+
+    @screen md {
+      @apply text-tiny;
+    }
+  }
+}
+
+.navbar-item,
+.navbar-link {
+  @apply pt-1;
+  @apply pb-1;
+}
+
+a.navbar-link,
+a.navbar-item {
+  @apply text-base;
+  @apply text-gray-800;
+  @apply py-4;
+  @apply border-b;
+  @apply border-gray-400;
+
+  &:hover {
+    @apply bg-primary-lighter;
+  }
+
+  &:focus {
+    @apply bg-white;
+  }
+
+  @screen md {
+    @apply text-sm;
+    @apply border-b-2;
+    @apply uppercase;
+    @apply pt-10;
+    @apply pb-3;
+    border-color: transparent;
+
+    &:hover {
+      @apply bg-white;
+      @apply border-primary;
+      @apply text-gray-800;
+    }
+  }
+}
+
+.navbar-dropdown {
+  @apply py-0;
+  @apply rounded-b-none;
+
+  a.navbar-item {
+    @apply text-base;
+    @apply normal-case;
+    @apply py-4;
+    @apply px-4;
+    @apply border-b;
+    @apply border-gray-400;
+
+    &:hover {
+      @apply bg-primary-lighter;
+    }
+
+    @screen md {
+      @apply text-tiny;
+    }
+  }
+}
+
+.navbar-divider {
+  @apply my-0;
+}
+
+.navbar-link:not(.is-arrowless)::after {
+  @apply border-gray-600;
+  bottom: 1.25rem;
+  top: auto;
+}
+
+.navbar-item.has-dropdown {
+  &:hover {
+    .navbar-link {
+      background-color: transparent;
+    }
+  }
+
+  > .navbar-link {
+    @apply hidden;
+
+    @screen md {
+      @apply block;
+    }
+  }
+}
+
+.navbar-burger {
+  &:hover {
+    background: transparent;
+  }
+}
+
+.navbar-burger {
+  @apply absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+
+  &:before {
+    @apply absolute;
+    content: "Menu";
+    left: -22px;
+    top: calc(50% + 1px);
+    transform: translateY(-50%);
+    @apply uppercase;
+    @apply text-xs;
+  }
+
+  span {
+    height: 2px;
+  }
+}
+
+.navbar-menu {
+  @apply p-0;
+}
+
+.navbar-end {
+  @apply border-t;
+  @apply border-gray-400;
+}
+
+.navbar__skip-link {
+  @apply sr-only;
+  @apply text-white;
+
+  &:hover {
+    @apply text-white;
+  }
+
+  &:focus {
+    @apply not-sr-only;
+    @apply absolute;
+    @apply p-1;
+    @apply text-white;
+    top: 0;
+    left: 0;
+  }
+}