@madie/madie-design-system 1.0.0

package/styles/components/_variables.scss

@@ -0,0 +1,157 @@
+// ============================================================================= QPP COLOR DEFINITIONS
+// primary
+$color-navy: #036;
+$color-teal: #04838a;
+$color-green: #689f38;
+$color-orange: #df711c;
+
+// tones
+$color-navy-medium: #125496;
+$color-navy-dark: darken($color-navy, 7%);
+$color-teal-medium: #209fa6;
+$color-teal-dark: #106970;
+$color-green-medium: #7cb342;
+$color-orange-medium: #ffb300;
+
+$color-navy-light: #3f7dba;
+$color-teal-light: #80cbc4;
+$color-green-light: #aed581;
+$color-orange-light: #ffcc80;
+
+// data
+$color-blue: #0288d1;
+$color-blue-medium: #2eb1ed;
+$color-blue-light: #81d4fa;
+
+$color-magenta: #ad1457;
+$color-magenta-medium: #f06292;
+$color-magenta-light: #f8bbd0;
+
+$color-chartreuse: #c0ca33;
+$color-chartreuse-medium: #cddc39;
+$color-chartreuse-light: #e6ee9c;
+
+$color-green-data: #507d29;
+$color-green-data-medium: #70a03d;
+$color-green-data-light: #aed581;
+
+$color-orange-data: #e47500;
+$color-orange-data-medium: #ffa200;
+$color-orange-data-light: #ffc438;
+
+// Side Navigation
+$color-slate: #21344c;
+$color-slate-light: #3b5c82;
+$color-slate-dark: #0f2138;
+
+// neutral
+$color-white: #fff;
+$color-gray-light: #f8f8f8;
+$color-gray-very-light: #ddd;
+$color-gray-medium: #b0b0b0;
+$color-gray-dark: #686868;
+$color-gray-darker-medium: #767676;
+$color-gray-darker: #242424;
+$color-black: #000;
+
+// Error and Progress
+$color-red: #bc2828;
+$color-red-highlight: #f2dede;
+$color-warning: #ffc438;
+$color-success: #507d29;
+$color-disabled: #ddd;
+
+// MIPS Category Colors
+$color-quality: #0288d1;
+$color-aci: #f06292;
+$color-ia: #ffa200;
+$color-cost: #70a03d;
+
+//  Notification Banner
+$notification-banner-background: #f7f7f7;
+$notification-banner-label-color: #515151;
+
+// ============================================================================= COLOR VARIABLES
+$brand-primary-dark: $color-navy;
+$brand-primary-medium: $color-navy-medium;
+$brand-primary-light: $color-navy-light;
+$brand-secondary-dark: $color-teal;
+$brand-secondary-light: $color-teal-light;
+
+$text-selection-color: $color-orange-light;
+
+// ============================================================================= GLOBAL
+$border-radius-base: 4px;
+$border-radius-large: 4px;
+$border-radius-small: 4px;
+// ============================================================================= FONTS SETUP
+$font-size-base: 16px;
+$font-family-base: Rubik, Arial, 'Helvetica Neue', Helvetica, sans-serif;
+
+// ============================================================================= TEXT
+$color-text-main: $color-gray-darker;
+$text-color: $color-text-main;
+$lead-color: $brand-primary-dark;
+// ============================================================================= FORMS
+$form-label-color: $brand-secondary-dark;
+$form-border-color: $color-gray-medium;
+$form-border-color-focus: $brand-secondary-dark;
+$form-field-color: $color-gray-medium;
+$form-check-color: $brand-secondary-dark;
+$form-error-color: $color-red;
+// ============================================================================= LINKS
+$link-color: $color-teal;
+$link-decoration: underline;
+$link-hover-color: $color-navy-medium;
+$link-hover-decoration: none;
+// ============================================================================= BUTTONS
+$button-color-primary: $color-orange;
+$button-color-secondary: $color-green;
+// ============================================================================= TABLES
+$table-primary-color: $brand-secondary-dark;
+$table-border-color: $color-gray-medium;
+$table-stripe-color: $color-gray-light;
+// ============================================================================= NAV
+$nav-color-primary: $brand-primary-dark;
+$nav-color-secondary: $brand-secondary-dark;
+$nav-color-secondary-light: $brand-secondary-light;
+$nav-text-color: $color-white;
+// ============================================================================= HEADINGS
+$headings-font-family: $font-family-base;
+$headings-color: $color-gray-darker;
+$headings-color-content: $color-navy;
+// ============================================================================= SIDE NAV
+$side-nav-horizontal-padding: 22px;
+$side-nav-expanded-width: 300px;
+$side-nav-closed-width: 90px;
+
+// Font weights based on /styles/components/_fonts.scss
+$rubik-light: 300;
+$rubik-regular: 400;
+$rubik-medium: 500;
+$rubik-bold: 700;
+
+// Text style based on https://confluence.cms.gov/pages/viewpage.action?spaceKey=QPPPRACTICE&title=Design+Specifications
+// Structure: (font-size(desktop), font-size(mobile), line-height(desktop), line-height(mobile), font-weight)
+$headings: (
+  (44, 32, 48, 38, $rubik-regular),
+  (32, 26, 38, 30, $rubik-regular),
+  (24, 20, 29, 24, $rubik-medium),
+  (18, 18, 22, 22, $rubik-medium),
+  (16, 16, 21, 21, $rubik-medium),
+  (14, 14, 19, 19, $rubik-medium)
+);
+
+// Structure: (Desktop (px), Tablet(px), Mobile(px), Font Weight, Transform)
+$content-headings: (
+  (56, 34, 34, $rubik-light, initial),
+  (46, 28, 28, $rubik-light, initial),
+  (36, 24, 24, $rubik-regular, initial),
+  (30, 20, 20, $rubik-medium, initial),
+  (24, 18, 18, $rubik-medium, initial),
+  (18, 18, 16, $rubik-bold, uppercase)
+);
+// ============================================================================= SCREEN SIZE
+$screen-sm: 768px;
+$screen-md: 992px;
+$screen-lg: 1200px;

package/styles/components/_wells.scss

@@ -0,0 +1,92 @@
+.measure-item {
+	align-content: center;
+	align-items: center;
+	border-top: 1px solid #eee;
+	-webkit-box-align: center;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-ms-flex-align: center;
+	-ms-flex-line-pack: center;
+	padding: 10px 0;
+
+	p {
+		display: inline;
+		margin: 0;
+		width: 85%;
+	}
+
+	a {
+		margin-left: auto;
+	}
+
+	.remove-self {
+		text-decoration: none;
+	}
+}
+
+.well {
+	background-color: #f5f5f5;
+	border: 1px solid #eaeaea;
+	border-radius: 0;
+	box-shadow: none;
+	margin-bottom: 2em;
+
+	h3 {
+		color: #333;
+		margin-bottom: 1.5em;
+	}
+
+	p {
+		&:first-of-type {
+			margin-bottom: 2em;
+		}
+	}
+}
+
+.well-search {
+	background-color: $color-navy;
+	color: $color-white;
+
+	label,
+	legend {
+		color: $color-white;
+	}
+
+	.measures-search {
+		.btn-tertiary {
+			background-color: $color-white;
+			border-color: $color-white;
+			font-size: 1rem;
+			min-height: 50px;
+			padding-right: 2.5rem;
+		}
+	}
+
+	.js-label-filter-box {
+		background-color: $color-white;
+		border-color: $color-white;
+		font-weight: 400;
+		margin-bottom: 1rem;
+
+		&:hover {
+			background-color: $color-gray-light;
+			border-color: $color-gray-light;
+		}
+	}
+
+	#search {
+		background-color: $color-green-medium;
+		border-color: $color-green-medium;
+		color: $color-white;
+		font-size: 0.9rem;
+		height: 50px;
+		text-transform: uppercase;
+
+		&:hover {
+			background-color: $color-green;
+			border-color: $color-green;
+			color: $color-white;
+		}
+	}
+}

package/styles/qppds/base/_backgrounds.scss

@@ -0,0 +1,7 @@
+// stylelint-disable declaration-no-important
+@import '../settings/index';
+
+.qpp-dark-background {
+  background-color: $blue-80;
+  color: $white;
+}

package/styles/qppds/base/_fonts.scss

@@ -0,0 +1,26 @@
+@import '../settings/index';
+
+@font-face {
+  font-family: Rubik;
+  font-style: normal;
+  font-weight: 300;
+  src: url('#{$font-path}Rubik-Light.ttf');
+}
+@font-face {
+  font-family: Rubik;
+  font-style: normal;
+  font-weight: 400;
+  src: url('#{$font-path}Rubik-Regular.ttf');
+}
+@font-face {
+  font-family: Rubik;
+  font-style: normal;
+  font-weight: 500;
+  src: url('#{$font-path}Rubik-Medium.ttf');
+}
+@font-face {
+  font-family: Rubik;
+  font-style: normal;
+  font-weight: 700;
+  src: url('#{$font-path}Rubik-Bold.ttf');
+}

package/styles/qppds/base/_icon.scss

@@ -0,0 +1,23 @@
+@import '../settings/variables/index';
+
+.qpp-icon-inline {
+  @include inline-icon;
+}
+
+.qpp-icon-inline--md {
+  @include inline-icon-md;
+}
+
+.qpp-icon-inline--lg {
+  @include inline-icon-lg;
+}
+
+.qpp-icon-mat {
+  @include mat-icon;
+}
+
+// Deprecated.  Will be removed once feather icons are
+// no longer used by applications.
+.qpp-icon-feather {
+  @include feather-icon;
+}

package/styles/qppds/base/_layout.scss

@@ -0,0 +1,5 @@
+@import '../settings/index';
+
+.qpp-raised-border {
+  @include raised-border;
+}

package/styles/qppds/base/_typography.scss

@@ -0,0 +1,85 @@
+@import '../settings/index';
+
+// scope all base (global) styles nested under .qppds selector
+// this can help avoid conflicts between new qppds styles and legacy styles
+.qppds,
+.qpp-prose {
+  // *:not() { // TODO: ignore component classes
+  // Override legacy qpp-style label styles
+  // TODO: reevaluate this when we get to forms and fieldsets
+  label {
+    @include input-label;
+  }
+
+  @for $i from 1 through length($headings) {
+    $heading: nth($headings, $i);
+
+    h#{$i},
+    .h#{$i} {
+      @include heading($heading);
+    }
+  }
+
+  p,
+  .p1 {
+    @include p1;
+  }
+
+  .p2 {
+    @include p2;
+  }
+
+  .l1 {
+    @include l1;
+  }
+
+  .l2 {
+    @include l2;
+  }
+  //}
+}
+
+// prefixed, single-use global classes for typography styles that can
+// be used outside a .qppds wrapper.
+.qpp-label {
+  @include input-label;
+}
+
+@for $i from 1 through length($headings) {
+  $heading: nth($headings, $i);
+
+  .qpp-h#{$i} {
+    @include heading($heading);
+  }
+}
+
+.qpp-p,
+.qpp-p1 {
+  @include p1;
+}
+
+.qpp-p2 {
+  @include p2;
+}
+
+.qpp-l1 {
+  @include l1;
+}
+
+.qpp-l2 {
+  @include l2;
+}
+
+.qpp-error-message {
+  color: $red-60;
+  display: block;
+  font-size: $font-size-14;
+  font-weight: 400;
+}
+
+.qpp-hint-message {
+  color: $gray-60;
+  display: block;
+  font-size: $font-size-14;
+  font-weight: 400;
+}

package/styles/qppds/base/index.scss

@@ -0,0 +1,8 @@
+// TODO: see if this conflicts with legacy qpp-style fonts
+// comment out until we're ready to replace old font-face definitions
+// @import './fonts';
+
+@import './typography';
+@import './backgrounds';
+@import './layout';
+@import './icon';

package/styles/qppds/components/_alert.scss

@@ -0,0 +1,95 @@
+@import '../settings/index';
+
+.qpp-c-alert {
+  font-family: $font-rubik;
+  font-size: $font-size-14;
+  line-height: $line-height-lg;
+  box-sizing: border-box;
+  background-color: $gray-10;
+  background-repeat: no-repeat;
+  background-size: $spacing-32;
+  padding: $spacing-16;
+  position: relative;
+  border-left: 4px solid $gray-60;
+  border-radius: 3px;
+
+  .qpp-c-alert__body {
+    vertical-align: top;
+    margin-left: $spacing-40;
+    max-width: 600px;
+  }
+
+  .qpp-c-alert__heading {
+    font-size: $font-size-16;
+    margin-top: 0;
+    margin-bottom: $spacing-8;
+    line-height: $line-height-md;
+  }
+
+  .qpp-c-alert__text {
+    margin: 0;
+  }
+
+  &::before {
+    background-color: transparent;
+    background-repeat: no-repeat;
+    content: '';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: $spacing-24;
+    margin: $spacing-16;
+  }
+
+  &.qpp-c-alert--info {
+    background-color: $blue-05;
+    color: $black;
+    border-left: 4px solid $blue-60;
+
+    &::before {
+      background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='info-circle' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='24' height='24' class='svg-inline--fa fa-info-circle fa-w-16 fa-3x'%3E%3Cpath fill='currentColor' d='M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z' class=''%3E%3C/path%3E%3C/svg%3E");
+    }
+  }
+
+  &.qpp-c-alert--warning {
+    background-color: $gold-05;
+    color: $black;
+    border-left: 4px solid $gold-20;
+
+    &::before {
+      background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='exclamation-circle' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='24' height='24' class='svg-inline--fa fa-exclamation-circle fa-w-16 fa-3x'%3E%3Cpath fill='currentColor' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z' class=''%3E%3C/path%3E%3C/svg%3E");
+    }
+  }
+
+  &.qpp-c-alert--error {
+    background-color: $red-10;
+    color: $black;
+    border-left: 4px solid $red-50;
+
+    &::before {
+      background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='times-circle' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='24' height='24' class='svg-inline--fa fa-times-circle fa-w-16 fa-3x'%3E%3Cpath fill='currentColor' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z' class=''%3E%3C/path%3E%3C/svg%3E");
+    }
+  }
+
+  &.qpp-c-alert--success {
+    background-color: $green-05;
+    color: $black;
+    border-left: 4px solid $green-30;
+
+    &::before {
+      background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='check-circle' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='24' height='24' class='svg-inline--fa fa-check-circle fa-w-16 fa-3x'%3E%3Cpath fill='currentColor' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z' class=''%3E%3C/path%3E%3C/svg%3E");
+    }
+  }
+}
+
+.qppds .qpp-c-alert a,
+.qpp-c-alert .qpp-c-link {
+  color: $blue-80;
+}
+
+.qppds .qpp-c-alert p {
+  font-family: $font-rubik;
+  font-size: $font-size-14;
+  line-height: $line-height-lg;
+}

package/styles/qppds/components/_breadcrumbs.scss

@@ -0,0 +1,70 @@
+@import '../settings/index';
+
+.qpp-c-breadcrumbs {
+  line-height: $line-height-lg;
+  font-size: $font-size-14;
+  font-family: $font-rubik;
+  color: $gray-80;
+
+  .qpp-c-breadcrumbs__list {
+    @include unstyled-list;
+    margin-left: 0;
+    display: block;
+  }
+
+  .qpp-c-breadcrumbs__list-item {
+    display: inline-block;
+    white-space: nowrap;
+
+    &::after {
+      display: inline-block;
+      margin-left: $spacing-8;
+      margin-right: $spacing-8;
+      transform: translateY(3px) rotate(20deg);
+      border-right: 0.1em solid fade-out($gray-80, 0.7);
+      height: 0.9em;
+      content: '';
+    }
+
+    &.qpp-c-breadcrumbs__list-item--current::after {
+      content: '';
+      margin-left: $spacing-0;
+      margin-right: $spacing-0;
+    }
+  }
+
+  .qpp-c-breadcrumbs__link {
+    color: $gray-80;
+    text-decoration: none;
+    text-underline-offset: rem(4px);
+    text-decoration-thickness: rem(1px);
+
+    &:focus {
+      @include link-focus;
+    }
+
+    &:hover {
+      > span {
+        text-decoration-thickness: rem(2px);
+      }
+    }
+
+    > span {
+      text-decoration: underline;
+    }
+  }
+}
+
+.qpp-c-breadcrumbs--light {
+  color: $white;
+
+  .qpp-c-breadcrumbs__link {
+    color: $white;
+  }
+
+  .qpp-c-breadcrumbs__list-item {
+    &::after {
+      border-right: 0.1em solid fade-out($white, 0.6);
+    }
+  }
+}