@madie/madie-design-system 1.0.0

package/styles/qppds/components/_tabs.scss

@@ -0,0 +1,197 @@
+@import '../settings/index';
+
+/* stylelint-disable selector-max-specificity */
+
+.qpp-c-tabs {
+  border-bottom: 1px solid $gray-10;
+  display: flex;
+}
+
+/*
+`Tab Panel`
+*/
+.qpp-c-tabs__panel {
+  background-color: transparent;
+  border-bottom: 0;
+  border-left: 0;
+  border-right: 0;
+  padding: $spacing-16 0;
+
+  &[aria-hidden='true'] {
+    /* stylelint-disable declaration-no-important */
+    display: none !important;
+    /* stylelint-enable declaration-no-important */
+  }
+
+  // Increase size on larger screens
+  @media (min-width: $width-xs) {
+    padding: $spacing-24 0;
+  }
+}
+
+/*
+`Tab`
+*/
+.qpp-c-tabs__item,
+.qpp-c-tabs__item:visited,
+.qppds .qpp-c-tabs__item,
+.qppds .qpp-c-tabs__item:visited {
+  appearance: none;
+  background-color: transparent;
+  border-bottom: 4px solid transparent;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+  color: $gray-80;
+  cursor: pointer;
+  display: inline-block;
+  font-size: $font-size-16;
+  font-weight: $font-regular;
+  line-height: $line-height-sm;
+  padding: $spacing-24 $spacing-8 rem(20px);
+  position: relative;
+  text-decoration: none;
+
+  // font size and spacing on larger screens
+  @media (min-width: $width-xs) {
+    font-size: $font-size-16;
+    padding: $spacing-24 $spacing-16 rem(20px);
+  }
+
+  // Override CMSDS pseudo-element when including cmsds css
+  &::after {
+    background-color: transparent;
+    content: none;
+    height: 0;
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  // States
+  &[aria-selected='true'] {
+    border-bottom: 4px solid $blue-60;
+    color: $gray-80;
+    pointer-events: none;
+    font-weight: $font-medium;
+
+    &::after {
+      opacity: 1;
+      transform: scale3d(1, 1, 1);
+    }
+
+    &:focus {
+      border-bottom: 4px solid $blue-60;
+    }
+
+    &:focus::after {
+      background-color: transparent;
+    }
+  }
+
+  &[aria-disabled='true'] {
+    background-color: $gray-10;
+    border-color: $gray-10;
+    color: $gray-60;
+    pointer-events: none;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $gray-20;
+      border-color: $gray-20;
+      color: $gray-70;
+    }
+  }
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+    color: $gray-80;
+  }
+
+  &:active {
+    background-color: rgba(0, 0, 0, 0.08);
+  }
+
+  &:focus {
+    outline: 1px solid $blue-60;
+    outline-offset: -1px;
+    background-color: $blue-10;
+    box-shadow: none;
+    color: $gray-80;
+    text-decoration: none;
+    line-height: $line-height-sm;
+    padding: $spacing-24 $spacing-8 rem(20px);
+    border-bottom: 4px solid transparent;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+    margin-left: 0;
+    margin-right: 0;
+
+    &::after {
+      background-color: $gray-80;
+      opacity: 1;
+      transform: scale3d(1, 1, 1);
+    }
+
+    @media (min-width: $width-xs) {
+      font-size: $font-size-16;
+      padding: $spacing-24 $spacing-16 rem(20px);
+    }
+  }
+
+  // SVG icons
+  > svg {
+    @include inline-icon-md;
+  }
+}
+
+.qpp-c-tabs--mui {
+  height: unset;
+  align-items: unset;
+  box-shadow: none;
+  border-bottom: 1px solid $gray-10;
+
+  appearance: none;
+  background-color: transparent;
+
+  .qpp-c-tabs__item {
+    min-width: unset;
+    font-family: $font-rubik;
+    text-transform: none;
+    letter-spacing: normal;
+    font-size: $font-size-16;
+    padding: $spacing-24 $spacing-8 rem(20px);
+    font-weight: $font-regular;
+    border-bottom: 4px solid transparent;
+    line-height: $line-height-sm;
+
+    &[aria-selected='true'] {
+      border-bottom: 4px solid $blue-60;
+      color: $gray-80;
+      font-weight: $font-medium;
+    }
+
+    // font size and spacing on larger screens
+    @media (min-width: $width-xs) {
+      font-size: $font-size-16;
+      padding: $spacing-24 $spacing-16 rem(20px);
+    }
+  }
+
+  .MuiTab-textColorInherit,
+  .MuiTab-textColorInherit.Mui-disabled {
+    opacity: 1;
+  }
+
+  .MuiTabs-indicator {
+    display: none;
+  }
+}
+
+/* stylelint-enable selector-max-specificity */

package/styles/qppds/components/_text-input.scss

@@ -0,0 +1,60 @@
+@import '../settings/index';
+
+.qpp-c-text-input {
+  display: block;
+  border: 1px solid $gray-10;
+  border-radius: 3px;
+  color: $gray-80;
+  font-size: $font-size-14;
+  font-family: $font-rubik;
+  font-weight: $font-regular;
+  line-height: $line-height-xs;
+  background-color: $white;
+  box-sizing: border-box;
+  padding: $spacing-12 $spacing-16;
+  height: $spacing-40;
+
+  &:focus,
+  &.qpp-c-text-input--focus {
+    border: 1px solid $blue-60;
+    box-shadow: 0 0 0 4px $blue-10;
+    outline: none;
+    text-decoration: none;
+  }
+
+  &:disabled,
+  &.qpp-c-text-input--disabled {
+    background-color: $gray-04;
+    color: $gray-60;
+  }
+
+  &.qpp-c-text-input--error {
+    border: 1px solid $red-60;
+
+    &:focus,
+    &.qpp-c-button--focus {
+      border: 1px solid $red-50;
+      box-shadow: 0 0 0 4px $red-10;
+    }
+  }
+
+  &.qpp-c-text-input--success {
+    padding-right: $spacing-32;
+    background-size: $font-size-20 auto, 100%;
+    background-position: right $spacing-12 top 50%, 0 0;
+    background-repeat: no-repeat, repeat;
+    background-image: url("data:image/svg+xml,%3Csvg fill='rgb(124, 179, 66)' color='currentColor' viewBox='0 0 1792 1792' width='1792' height='1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1412 734q0-28-18-46l-91-90q-19-19-45-19t-45 19l-408 407-226-226q-19-19-45-19t-45 19l-91 90q-18 18-18 46 0 27 18 45l362 362q19 19 45 19 27 0 46-19l543-543q18-18 18-45zm252 162q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E");
+    appearance: none;
+    -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
+    -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
+  }
+
+  &.qpp-c-text-input--big {
+    height: $spacing-48;
+    padding: $spacing-16;
+  }
+
+  &::-ms-clear {
+    display: none;
+  }
+}

package/styles/qppds/components/index.scss

@@ -0,0 +1,16 @@
+@import './link';
+@import './button';
+@import './dropdown';
+@import './breadcrumbs';
+@import './modal';
+@import './page-header';
+@import './text-input';
+@import './search';
+@import './table';
+@import './tabs';
+@import './card';
+@import './alert';
+@import './footer';
+@import './header';
+@import './sidebar';
+@import './pagination';

package/styles/qppds/components/sidebar/_animations.scss

@@ -0,0 +1,38 @@
+/*
+Sidebar animations
+ */
+@-webkit-keyframes left-bounce {
+	0% {
+		left: 0;
+	}
+
+	25% {
+		left: 4px;
+	}
+
+	50% {
+		left: 6px;
+	}
+
+	100% {
+		left: 0;
+	}
+}
+
+@-webkit-keyframes right-bounce {
+	0% {
+		right: 0;
+	}
+
+	25% {
+		right: 4px;
+	}
+
+	50% {
+		right: 6px;
+	}
+
+	100% {
+		right: 0;
+	}
+}

package/styles/qppds/components/sidebar/_cms.scss

@@ -0,0 +1,61 @@
+/*
+CMS specific styles
+ */
+
+.sidebar {
+	.cms-header {
+		padding: 25px 25px 0;
+
+		.quality-title {
+			@include typography('Rubik', 14px, 16px, $color-white);
+			font-weight: 500;
+			text-transform: uppercase;
+		}
+
+		.quality-subtitle {
+			@include typography('Rubik', 14px, 16px, $color-white);
+			padding: 10px 0 0;
+		}
+	}
+
+	.cms-content {
+		padding-left: 40px;
+		padding-top: 10px;
+
+		.due-date,
+		.completed,
+		.trial-period {
+			@include typography(
+				'Rubik',
+				14px,
+				20px,
+				transparentize($color-white, 0.2)
+			);
+
+			& span {
+				color: $color-white;
+				font-family: 'Rubik', sans-serif;
+				font-weight: 500;
+			}
+		}
+
+		a.button {
+			@include typography('Rubik', 14px, 20px, $color-teal-light);
+			background: transparent;
+			border: 2px solid $color-teal-light;
+			border-radius: 28px;
+			cursor: pointer;
+			display: inline-block;
+			margin: 10px 0;
+			padding: 15px 30px;
+			text-align: center;
+			text-transform: uppercase;
+			width: 100%;
+
+			&:hover {
+				border-color: $color-white;
+				color: $color-white;
+			}
+		}
+	}
+}

package/styles/qppds/components/sidebar/_details.scss

@@ -0,0 +1,58 @@
+/*
+Shared details
+ */
+
+.sidebar {
+	/* Practice details styles */
+
+	.practice-container {
+		padding: 0 25px;
+
+		.practice-name {
+			@include typography('Rubik', 20px, 26px, $color-white);
+		}
+
+		.practice-tin,
+		.vg-id {
+			@include typography('Rubik', 14px, 16px, $color-white);
+			padding-top: 10px;
+		}
+	}
+
+	/* Individual details */
+
+	.individual-container {
+		padding: 25px 25px 0;
+
+		.individual-name {
+			@include typography('Rubik', 16px, 22px, $color-white);
+			font-weight: 500;
+			text-transform: uppercase;
+		}
+
+		.individual-npi {
+			@include typography('Rubik', 14px, 16px, $color-white);
+			padding: 10px 0 0;
+		}
+
+		.individual-link {
+			@include typography('Rubik', 14px, 20px, $color-teal-light);
+			padding-bottom: 10px;
+
+			&:hover {
+				color: $color-white;
+			}
+		}
+	}
+
+	.practice-container,
+	.individual-container {
+		width: $side-nav-expanded-width;
+
+		.switch-practice,
+		.switch-clinician {
+			margin: 0;
+			padding-top: 10px;
+		}
+	}
+}