VOTE-698: organize css into components (#778)

Co-authored-by: Ray Estrada <[email protected]>

assets/styles/_variables.scss

@@ -1,4 +1,15 @@
 // Colors
+$font-light: 300;
+$font-medium: 400;
+$inner-box-width: 25rem;
+$inner-box-width-state: 35rem;
+$color-blue: #2c7cc7;
+$color-blue-dark: #11385b;
+$color-blue-headings: $color-blue-dark;
+$color-blue-light: #ecf2f8;
+$color-grey: #e1e2e4;
+$color-grey-dark: #4b4b4d;
+$theme-color-base-family: #dcdee0;
 $light-gray: #cddbee;
 $gray: #808080;
 $dark-cool-gray: #565c65;
@@ -9,3 +20,6 @@ $color-blue-dark: #11385b;
 $color-blue-headings: $color-blue-dark;
 $deep-blue: #002f6c;
 $blue-black: #1a3857;
+
+// Measurements
+$logo-width: 130px;

assets/styles/component/accordion.scss

@@ -58,3 +58,8 @@
 .homepage-acc {
   padding-top: 50px;
 }
+
+.content-heading {
+  font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;
+  font-weight: normal;
+}

assets/styles/component/alert.scss

@@ -0,0 +1,46 @@
+@use 'uswds-core' as *;
+@use '../mixins' as *;
+
+.usa-alert {
+  padding: 0;
+  margin-top: 0;
+  border-left: 0.5rem solid #00bde3;
+}
+
+[dir="rtl"] .usa-alert {
+  border-right: 0.5rem solid #00bde3;
+  border-left: 0;
+}
+
+.usa-alert--info:before {
+  display: none;
+}
+
+.usa-alert--info {
+  background-image: unset;
+  background-color: #e7f6f8;
+  border: 0;
+}
+
+[dir="rtl"] .usa-alert--info {
+  .grid-container {
+    background-position: calc(100% - 1rem) 1rem;
+
+    @include at-media('tablet') {
+      background-position: calc(100% - 1rem) 0.3rem;
+    }
+  }
+}
+
+.usa-alert--info .usa-alert__body {
+  padding-left: 2.5rem;
+
+  &:before {
+    left: -0.5rem;
+  }
+}
+
+.usa-alert__text:only-child {
+  margin-bottom: 0.5rem;
+  padding: 0.75rem 0 0.25rem;
+}

assets/styles/component/buttons.scss

@@ -0,0 +1,49 @@
+@use 'uswds-core' as *;
+@use '../variables' as *;
+
+@forward 'usa-button';
+
+.usa-button {
+  background-color: $color-blue-dark;
+  color: white;
+  margin-right: 0;
+
+  .page-type--basic & {
+    margin-top: 1rem;
+    margin-bottom: 3rem;
+  }
+}
+
+.usa-button:hover,
+.usa-button.usa-button--hover {
+  color: white;
+  background-color: $color-grey-dark;
+  border-bottom: 0;
+  text-decoration: none;
+}
+
+//"Go back" arrow button and text
+.arrow {
+  border: solid $color-blue-dark;
+  border-width: 0 4px 4px 0;
+  display: inline-block;
+  padding: 4px;
+}
+
+.direction {
+  transform: rotate(135deg);
+  -webkit-transform: rotate(135deg);
+  margin-right: 5px;
+}
+
+[dir="rtl"] .direction {
+  transform: rotate(315deg);
+  -webkit-transform: rotate(315deg);
+  margin-left: 5px;
+}
+
+.arrow-text a {
+  color: $color-blue-dark;
+  text-decoration: underline;
+  font-weight: 700;
+}

assets/styles/component/header.scss

@@ -0,0 +1,24 @@
+.usa-header .usa-alert--info {
+  margin-top: 0;
+}
+
+.banner__text-container {
+  flex: 1;
+}
+
+.usa-banner__header {
+  padding-right: 0.5rem;
+}
+
+.usa-banner__icon {
+  margin-left: 0.3rem;
+}
+
+.usa-banner__button {
+  margin-right: 0.5rem;
+}
+
+[dir="rtl"] .usa-banner__header-flag {
+  margin-left: 0.5rem;
+  margin-right: 0;
+}

assets/styles/component/hero.scss

@@ -0,0 +1,87 @@
+@use 'uswds-core' as *;
+@use '../variables' as *;
+@use '../mixins' as *;
+@use 'sass:math';
+
+.css-arrow {
+  position: relative;
+
+  &:after {
+    $arrow-width: 100px;
+    $arrow-height: 30px;
+    $arrow-half-width: math.div($arrow-width, 2);
+    content: "";
+    position: absolute;
+    left: calc(50% - #{$arrow-half-width});
+    bottom: -$arrow-height;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: $arrow-height+1 $arrow-half-width 0 $arrow-half-width;
+    border-color: $color-blue transparent transparent transparent;
+
+    @include at-media('tablet') {
+      content: none;
+    }
+  }
+}
+
+.site-logo {
+  display: block;
+  color: white;
+  text-decoration: none;
+  text-align: center;
+
+  svg .ballot {
+    transform: translateY(-4px);
+    transition: transform 200ms;
+  }
+
+  &:hover,
+  &:focus {
+    svg .ballot {
+      transform: translateY(0);
+    }
+  }
+
+  #SiteLogo {
+    width: $logo-width;
+    max-width: unset;
+    margin: auto;
+    display: block;
+  }
+
+  @include at-media('mobile') {
+    #SiteLogo {
+      padding: 10px 0 10px;
+    }
+  }
+
+  .logo-text {
+    font-weight: bold;
+    font-size: 1.6em;
+    margin-top: 20px;
+  }
+
+  @include at-media('tablet') {
+    #SiteLogo {
+      position: absolute;
+      bottom: $logo-width * -0.32 + 1;
+      right: calc(50% - #{math.div($logo-width, 2)});
+      margin-bottom: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .logo-text {
+      margin: 40px 0 140px;
+    }
+  }
+}
+
+.align-bottom {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: 100%;
+}

assets/styles/component/identifier.scss

@@ -12,8 +12,8 @@
     padding-bottom: 4rem;
   }
 
-  > .grid-container {
-    > * + * {
+  >.grid-container {
+    >* + * {
       margin-top: 40px;
     }
   }
@@ -34,7 +34,7 @@
     }
 
     @include at-media('tablet') {
-      + li {
+      +li {
         padding-top: 20px;
       }
     }

assets/styles/component/sign-up.scss

@@ -0,0 +1,7 @@
+p,
+label#emailsub,
+.registered-resources li,
+.updated-date {
+  font-size: 1.06rem;
+  line-height: 1.3rem;
+}

assets/styles/global/colors.scss

@@ -0,0 +1,19 @@
+@use '../variables' as *;
+
+.bg-blue {
+  background: $color-blue;
+  color: white;
+}
+
+.bg-lightblue {
+  background: $color-blue-light;
+  color: $color-blue-dark;
+}
+
+.bg-grey {
+  background: $color-grey;
+}
+
+.bg-darkblue {
+  background-color: $color-blue-dark;
+}

assets/styles/global/layout.scss

@@ -0,0 +1,27 @@
+@use 'uswds-core' as *;
+@use '../mixins' as *;
+
+.registered-resources li {
+  margin-bottom: 6px;
+}
+
+.right-shift {
+  /*
+  move the whole content on the right about 40 pixels to the right
+  (this is due to the spanish logo text being so close to the content on the right)
+  */
+  @include at-media('tablet') {
+    padding-left: 3rem !important;
+  }
+}
+
+.max-width-input {
+  display: inline-block;
+  max-width: 25rem;
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
+label.max-width-input {
+  margin-bottom: 0;
+}

assets/styles/global/media.scss

@@ -0,0 +1,12 @@
+svg {
+  max-width: 100%;
+  height: auto;
+}
+
+.ext-link {
+  white-space: nowrap;
+
+  svg {
+    margin-left: 0.2ex;
+  }
+}

assets/styles/global/typography.scss

@@ -0,0 +1,29 @@
+@use 'uswds-core' as *;
+@use '../variables' as *;
+@use '../mixins' as *;
+
+.bold-text {
+  font-weight: bold;
+}
+
+.text-blue {
+  color: $color-blue-headings;
+}
+
+.text-grey {
+  color: $color-grey-dark;
+}
+
+.font-size-medium {
+  font-size: 1.3em;
+}
+
+.main-heading {
+  font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;
+
+  @include at-media-max(tablet-lg) {
+    span[hidden] {
+      display: inline;
+    }
+  }
+}