chore: move assets to namespaced folder

app/assets/config/dashboard_manifest.js

@@ -1,2 +1,2 @@
 //= link_directory ../stylesheets/dashboard .css
-//= link_tree ../images
+//= link_tree ../images/dashboard

app/assets/stylesheets/dashboard/application.css

@@ -13,3 +13,5 @@
  *= require_tree .
  *= require_self
  */
+
+

app/assets/stylesheets/dashboard/application.sass.scss

@@ -0,0 +1,4 @@
+@import "bootstrap/scss/bootstrap";
+@import "legacy_partials/scaffolds";
+@import "legacy_partials/school_categories";
+@import "legacy_partials/questions";

app/assets/stylesheets/dashboard/partials/_bootstrap-overrides.scss

@@ -0,0 +1,60 @@
+@import 'colors';
+/* @import 'partials/fonts'; */
+
+$spacer: 0.5rem;
+$spacers: (
+  0: 0,
+  1: ($spacer * .25),
+  2: ($spacer * .5),
+  3: $spacer,
+  4: ($spacer * 2),
+  5: ($spacer * 3),
+  6: ($spacer * 4),
+  7: ($spacer * 5),
+  8: ($spacer * 6),
+  9: ($spacer * 7),
+  10: ($spacer * 8),
+  11: ($spacer * 9),
+  12: ($spacer * 10),
+);
+
+$font-family-base: 'Cabin', sans-serif;
+$body-color: $black;
+
+$alert-border-radius: 0.5rem;
+$alert-color-scale: 0%;
+$alert-border-width: 0;
+
+$headings-font-family: 'Bitter', serif;
+$headings-font-weight: 700;
+
+$form-select-border-radius: 0;
+$form-select-indicator-color: $blue;
+$input-border-radius: 0;
+$input-btn-focus-color-opacity: 0.35;
+$btn-border-radius: 0;
+
+$btn-close-width: 1.5em;
+$btn-close-opacity: 1;
+
+$nav-link-color: $white;
+$nav-link-font-weight: 600;
+$nav-link-hover-color: $nav-link-color;
+$nav-tabs-link-active-bg: $light-blue;
+$nav-tabs-link-hover-border-color: rgba($white, 0.5);
+$nav-tabs-border-color: transparent;
+$nav-tabs-border-radius: 15px;
+
+$accordion-border-radius: 8px;
+$accordion-button-active-bg: $gray-3;
+$accordion-icon-width: 16px;
+$accordion-icon-color: $blue;
+$accordion-button-active-color: $black;
+
+$popover-border-color: $gray-2;
+$popover-border-radius: 4px;
+$popover-body-padding-x: map-get($spacers, 4);
+$popover-body-padding-y: map-get($spacers, 4);
+
+$modal-header-border-color: transparent;
+$modal-content-border-radius: 0;

app/assets/stylesheets/dashboard/partials/_borders.scss

@@ -0,0 +1,9 @@
+/* @import 'colors'; */
+
+.border-radius-8 {
+  border-radius: 8px;
+}
+
+.border-gray-2 {
+  border: 1px solid $gray-2;
+}

app/assets/stylesheets/dashboard/partials/_buttons.scss

@@ -0,0 +1,12 @@
+/* @import "colors"; */
+
+.view-details {
+  background-color: $blue;
+  font-family: 'Bitter', sans-serif;
+  font-weight: 600;
+  font-size: 14px;
+  color: $white;
+  padding: 8px 16px;
+  border: 0;
+  text-decoration: none;
+}

app/assets/stylesheets/dashboard/partials/_clear-margin-padding.scss

@@ -0,0 +1,85 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}

app/assets/stylesheets/dashboard/partials/_colors.scss

@@ -0,0 +1,176 @@
+$black: #3E3A38;
+$gray-1: #595959;
+$gray-2: #CECECE;
+$gray-3: #F3F3F3;
+$light-blue: #FAFCFD;
+$white: #FFFFFF;
+
+$blue: #01788E;
+$dark-blue: #004D61;
+
+$red: #C93047;
+$dark-red: #920020;
+
+$gold: #FFC857;
+$light-gold: #FFFAEE;
+$purple: #49416D;
+$light-purple: #EDECF0;
+
+$teal: #00B0B3;
+$lime: #B2D236;
+
+$warning: $gold;
+$watch: $gold;
+$growth: $gold;
+$approval: $purple;
+$ideal: $purple;
+
+:root {
+  --color-purple: #{$purple};
+  --color-gold: #{$gold};
+}
+
+.color-red {
+  color: $red;
+}
+
+.color-black {
+  color: $black;
+}
+
+.color-white {
+  color: $white;
+}
+
+.color-blue {
+  color: $blue;
+}
+
+.color-lime {
+  color: $lime;
+}
+
+.color-teal {
+  color: $teal;
+}
+
+.color-gray-2 {
+  color: $gray-2;
+}
+
+.bg-color-light-blue {
+  background-color: $light-blue;
+}
+
+.bg-color-blue {
+  background-color: $blue;
+}
+
+.bg-color-purple {
+  background-color: $purple;
+}
+
+.bg-color-light-purple {
+  background-color: $light-purple;
+}
+
+.bg-color-gold {
+  background-color: $gold;
+}
+
+.bg-color-light-gold {
+  background-color: $light-gold;
+}
+
+.bg-color-lime {
+  color: $lime;
+}
+
+.bg-color-teal {
+  color: $teal;
+}
+
+.bg-color-white {
+  background-color: $white;
+}
+
+.bg-color-gray-2 {
+  background-color: $gray-2;
+}
+
+.bg-color-gray-3 {
+  background-color: $gray-3;
+}
+
+.fill-black {
+  fill: $black;
+}
+
+.bg-gray {
+  background-color: $gray-3;
+}
+
+.bg-warning {
+  background-color: $warning;
+}
+
+.bg-watch {
+  background-color: $watch;
+}
+
+.bg-growth {
+  background-color: $growth;
+}
+
+.bg-approval {
+  background-color: $approval;
+}
+
+.bg-ideal {
+  background-color: $ideal;
+}
+
+.bg-fill-warning,
+.bg-fill-watch,
+.bg-fill-growth
+{
+  fill: $light-gold;
+}
+
+.bg-fill-approval,
+.bg-fill-ideal
+{
+  fill: $light-purple;
+}
+
+.fill-warning {
+  fill: $warning;
+}
+
+.fill-watch {
+  fill: $watch;
+}
+
+.fill-growth {
+  fill: $growth;
+}
+
+.fill-approval {
+  fill: $approval;
+}
+
+.fill-ideal {
+  fill: $ideal;
+}
+
+.stroke-black {
+  stroke: $black;
+}
+
+.stroke-gray-1 {
+  stroke: $gray-1;
+}
+
+.stroke-gray-2 {
+  stroke: $gray-2;
+}

app/assets/stylesheets/dashboard/partials/_fonts.scss

@@ -0,0 +1,67 @@
+.font-bitter {
+  font-family: 'Bitter', serif;
+}
+
+.font-cabin {
+  font-family: 'Cabin', sans-serif;
+}
+
+.font-size-14 {
+  font-size: 14px;
+}
+
+.weight-700 {
+  font-weight: 700;
+}
+
+.weight-600 {
+  font-weight: 600;
+}
+
+.weight-400 {
+  font-weight: 400;
+}
+
+.sub-header {
+  @extend .font-bitter;
+  @extend .weight-600;
+  font-size: 40px;
+}
+
+.sub-header-2 {
+  @extend .font-bitter;
+  @extend .weight-700;
+  font-size: 28px;
+}
+
+.sub-header-3 {
+  @extend .font-bitter;
+  @extend .weight-700;
+  font-size: 20px;
+}
+
+.sub-header-4 {
+  @extend .font-bitter;
+  @extend .weight-700;
+  font-size: 16px;
+}
+
+.body-large {
+  font-size: 16px;
+  line-height: 1.3;
+}
+
+.body-small {
+  font-size: 14px;
+  line-height: 1.3;
+}
+
+.link {
+  @extend .color-blue;
+  text-decoration: none;
+}
+
+.caption {
+  font-size: 12px;
+  color: $gray-1;
+}

app/assets/stylesheets/dashboard/partials/_footer.scss

@@ -0,0 +1,8 @@
+.footer-item {
+  margin: 40px 12px;
+  color: $gray-1;
+}
+.footer-link {
+  @extend .font-cabin;
+  color: #01788E;
+}

app/assets/stylesheets/dashboard/partials/_forms.scss

@@ -0,0 +1,13 @@
+@import "colors";
+
+header .form-select {
+  width: auto;
+  max-width: 290px;
+}
+
+.bg-color-blue .form-select {
+  &:focus {
+    box-shadow: 0 0 0 0.25rem rgba($white, 0.35);
+  }
+}
+

app/assets/stylesheets/dashboard/partials/_navigation.scss

@@ -0,0 +1,24 @@
+/* @import 'colors'; */
+/* @import 'fonts'; */
+
+a:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba($blue, 0.35);
+}
+
+.nav-tabs {
+  margin-bottom: -1rem;
+
+  .nav-link {
+    @extend .font-bitter;
+    background-color: $dark-blue;
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 4px rgba($white, 0.35);
+    }
+  }
+}
+
+.nav-item {
+  margin-right: 1px;
+}

app/assets/stylesheets/dashboard/partials/_overview.scss

@@ -0,0 +1,134 @@
+@import 'bootstrap/scss/bootstrap';
+
+.graph-header {
+  @extend .font-bitter;
+  @extend .weight-700;
+}
+
+.graph-footer {
+  font-family: 'Cabin', sans-serif;
+}
+
+.harvey-ball-legend {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  @extend .p-3;
+  @extend .bg-color-gray-3;
+  @extend .border-radius-8;
+}
+
+.subcategory-card {
+  @extend .p-3;
+  @extend .body-small;
+}
+
+.subcategory-card__benchmark-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  @extend .my-3;
+}
+
+.subcategory-card__circle {
+  min-width: 24px;
+  min-height: 24px;
+  height: 24px;
+  width: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  @extend .me-3;
+}
+
+.subcategory-card__benchmark-label {
+  font-size: 30px;
+}
+
+.school-quality-frameworks {
+  display: grid;
+  row-gap: map-get($spacers, 4);
+  column-gap: map-get($spacers, 5);
+  grid-auto-flow: column;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows:  repeat(4, max-content);
+}
+
+.zone-header {
+  @extend .sub-header-4;
+}
+
+.subcategory-card__circle:focus {
+  outline: none;
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px rgba($blue, 0.35);
+}
+
+.harvey-ball {
+  stroke: $black;
+}
+
+.harvey-ball--approval, .harvey-ball--ideal {
+  fill: $purple;
+}
+
+.harvey-ball--warning, .harvey-ball--watch, .harvey-ball--growth {
+  fill: $gold;
+}
+
+.harvey-ball--insufficient_data {
+  stroke: $gray-2;
+  fill: $gray-3;
+}
+
+.limited-availability-indicator {
+  color: white;
+  background-color: black;
+  line-height: 30px;
+  border-radius: 50%;
+  width: 20px;
+}
+
+.overall-response-rate-row {
+  width: 55%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: -23px;
+}
+
+.overall-response-rate-container {
+  padding: 0.4em 0.7em;
+  width: 48%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: $gray-1;
+  @extend .bg-color-gray-3;
+  @extend .border-radius-8;
+  @extend .font-size-14
+}
+
+@media only screen and (min-width: 768px){
+.measure-row-label {
+  width: 170px;
+}
+  }
+@media only screen and (min-width: 1000px){
+.measure-row-label {
+  width: 200px;
+}
+
+}
+@media only screen and (min-width: 1200px){
+.measure-row-label {
+  width: 250px;
+}
+
+}
+@media only screen and (min-width: 1400px){
+.measure-row-label {
+  width: 500px;
+}
+
+}

app/assets/stylesheets/dashboard/partials/_sqm_bootstrap.scss

@@ -0,0 +1,57 @@
+/* @import "colors"; */
+@import "bootstrap-overrides";
+
+// Configuration
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/utilities";
+
+// Layout & components
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/placeholders";
+
+// Helpers
+@import "bootstrap/scss/helpers";
+
+// Utilities
+@import "bootstrap/scss/utilities/api";
+
+.popover {
+  box-shadow: 0 0 8px rgba($black, 0.25);
+}
+
+.modal-content {
+  padding: 40px;
+}

app/assets/stylesheets/dashboard/sqm.sass.scss

@@ -0,0 +1,132 @@
+@import "partials/colors";
+@import "partials/bootstrap-overrides";
+@import "partials/sqm_bootstrap";
+@import "partials/clear-margin-padding";
+@import "partials/fonts";
+@import "partials/borders";
+@import "partials/overview";
+@import "partials/navigation";
+@import "partials/buttons";
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
+@import "@fortawesome/fontawesome-free/scss/solid";
+@import "partials/footer";
+@import "partials/forms";
+
+.height-56 {
+  height: 56px;
+}
+
+.card {
+  @extend .bg-color-white;
+  @extend .mb-5;
+  @extend .p-7;
+  border-radius: 8px;
+  box-shadow: 0 0 6px rgba($black, 0.25);
+}
+
+.construct-id {
+  @extend .font-cabin;
+  @extend .weight-700;
+
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-size: 14px;
+  color: $gray-1;
+  line-height: 18px;
+}
+
+.subcategory-section {
+  @extend .mt-5;
+  @extend .bg-color-white;
+  box-shadow: 0 0 3px rgba($black, 0.25);
+}
+
+.gauge-graph-lg {
+  width: 468px;
+  height: auto;
+}
+
+.gauge-graph-sm {
+  width: 268px;
+  height: auto;
+}
+
+.gauge-title {
+  line-height: 1.2;
+  max-width: 10ch;
+  text-align: center;
+  bottom: 0;
+  position: absolute;
+}
+
+.measure-section {
+  flex-basis: 33%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.measure-description {
+  text-align: center;
+}
+
+.measure-card {
+  @extend .bg-gray;
+  box-shadow: 0px -1px 0px $gray-2;
+}
+
+.arrow-container {
+  position: relative;
+  top: -50px;
+  left: 220px;
+}
+
+.arrow {
+  background-color: $gray-3;
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+  width: 96px;
+  height: 48px;
+  position: absolute;
+  top: 2px;
+  left: 1px;
+}
+
+.arrow-shadow {
+  background-color: $gray-2;
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+  width: 98px;
+  height: 50px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.measure-accordion {
+  width: 100%;
+}
+
+.measure-accordion-button {
+  background-color: $gray-3;
+  border-color: $gray-2;
+  @extend .font-cabin;
+  @extend .font-size-14;
+  @extend .weight-700;
+}
+
+.measure-accordion-body {
+  background-color: $gray-3;
+}
+
+.response-rate {
+  background-color: $gray-3;
+  border: 1px solid;
+  border-color: $gray-2;
+  width: 150px;
+  border-radius: 8px;
+  padding: 8px;
+}
+
+.response-rate-percentage {
+  font-size: 20px;
+  @extend .sub-header-4;
+}

app/assets/stylesheets/dashboard/welcome.sass.scss

@@ -0,0 +1,75 @@
+@import "partials/colors";
+@import "bootstrap/scss/bootstrap";
+@import "partials/bootstrap-overrides";
+@import "partials/clear-margin-padding";
+@import "partials/fonts";
+@import "partials/borders";
+@import "partials/footer";
+
+.hero-image {
+  background-image: url(hero.svg);
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+  padding-top: 50px;
+  padding-bottom: 50px;
+}
+
+.hero-text {
+  color: $white;
+  text-align: center;
+}
+
+.hero-description {
+  max-width: 588px;
+  margin: auto;
+  font-size: 20px;
+}
+
+.framework-wheel-container {
+  @extend .d-flex;
+  @extend .flex-column;
+  @extend .align-items-center;
+
+  img {
+    width: 442px;
+    max-width: 100%;
+  }
+
+  p {
+    color: $gray-1;
+    font-size: 12px;
+    max-width: 410px;
+    @extend .text-center;
+    @extend .bg-color-gray-3;
+    @extend .p-3;
+    @extend .border-radius-8;
+  }
+}
+
+.welcome-controls {
+  @extend .py-5;
+}
+
+.btn-secondary {
+  @include button-variant($black, transparent, $white,
+    $gray-1, transparent, $white,
+    $black, $black, $white,
+    $gray-2, transparent, $white);
+}
+
+#landing-accordion {
+  max-width: 550px;
+}
+
+.about-mciea {
+  margin: auto;
+  max-width: 792px;
+  @extend .color-white;
+
+  .btn {
+    @extend .font-bitter;
+    @extend .font-size-14;
+    @extend .weight-700;
+  }
+}