qpp-style 2.1.13 → 2.2.0-sm.0

package/styles/qppds/components/_tabs.scss

@@ -0,0 +1,199 @@
+@use '../settings/variables' as v;
+@use '../settings/mixins' as m;
+@use '../settings/functions' as f;
+
+/* stylelint-disable selector-max-specificity */
+
+.qpp-c-tabs {
+  border-bottom: 1px solid v.$gray-10;
+  display: flex;
+}
+
+/*
+`Tab Panel`
+*/
+.qpp-c-tabs__panel {
+  background-color: transparent;
+  border-bottom: 0;
+  border-left: 0;
+  border-right: 0;
+  padding: v.$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: v.$width-xs) {
+    padding: v.$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: v.$gray-80;
+  cursor: pointer;
+  display: inline-block;
+  font-size: v.$font-size-16;
+  font-weight: v.$font-regular;
+  line-height: v.$line-height-sm;
+  padding: v.$spacing-24 v.$spacing-8 f.rem(20px);
+  position: relative;
+  text-decoration: none;
+
+  // font size and spacing on larger screens
+  @media (min-width: v.$width-xs) {
+    font-size: v.$font-size-16;
+    padding: v.$spacing-24 v.$spacing-16 f.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 v.$blue-60;
+    color: v.$gray-80;
+    pointer-events: none;
+    font-weight: v.$font-medium;
+
+    &::after {
+      opacity: 1;
+      transform: scale3d(1, 1, 1);
+    }
+
+    &:focus {
+      border-bottom: 4px solid v.$blue-60;
+    }
+
+    &:focus::after {
+      background-color: transparent;
+    }
+  }
+
+  &[aria-disabled='true'] {
+    background-color: v.$gray-10;
+    border-color: v.$gray-10;
+    color: v.$gray-60;
+    pointer-events: none;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: v.$gray-20;
+      border-color: v.$gray-20;
+      color: v.$gray-70;
+    }
+  }
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+    color: v.$gray-80;
+  }
+
+  &:active {
+    background-color: rgba(0, 0, 0, 0.08);
+  }
+
+  &:focus {
+    outline: 1px solid v.$blue-60;
+    outline-offset: -1px;
+    background-color: v.$blue-10;
+    box-shadow: none;
+    color: v.$gray-80;
+    text-decoration: none;
+    line-height: v.$line-height-sm;
+    padding: v.$spacing-24 v.$spacing-8 f.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: v.$gray-80;
+      opacity: 1;
+      transform: scale3d(1, 1, 1);
+    }
+
+    @media (min-width: v.$width-xs) {
+      font-size: v.$font-size-16;
+      padding: v.$spacing-24 v.$spacing-16 f.rem(20px);
+    }
+  }
+
+  // SVG icons
+  > svg {
+    @include m.inline-icon-md;
+  }
+}
+
+.qpp-c-tabs--mui {
+  height: unset;
+  align-items: unset;
+  box-shadow: none;
+  border-bottom: 1px solid v.$gray-10;
+
+  appearance: none;
+  background-color: transparent;
+
+  .qpp-c-tabs__item {
+    min-width: unset;
+    font-family: v.$font-rubik;
+    text-transform: none;
+    letter-spacing: normal;
+    font-size: v.$font-size-16;
+    padding: v.$spacing-24 v.$spacing-8 f.rem(20px);
+    font-weight: v.$font-regular;
+    border-bottom: 4px solid transparent;
+    line-height: v.$line-height-sm;
+
+    &[aria-selected='true'] {
+      border-bottom: 4px solid v.$blue-60;
+      color: v.$gray-80;
+      font-weight: v.$font-medium;
+    }
+
+    // font size and spacing on larger screens
+    @media (min-width: v.$width-xs) {
+      font-size: v.$font-size-16;
+      padding: v.$spacing-24 v.$spacing-16 f.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 @@
+@use '../settings/variables' as v;
+
+.qpp-c-text-input {
+  display: block;
+  border: 1px solid v.$gray-10;
+  border-radius: 3px;
+  color: v.$gray-80;
+  font-size: v.$font-size-14;
+  font-family: v.$font-rubik;
+  font-weight: v.$font-regular;
+  line-height: v.$line-height-xs;
+  background-color: v.$white;
+  box-sizing: border-box;
+  padding: v.$spacing-12 v.$spacing-16;
+  height: v.$spacing-40;
+
+  &:focus,
+  &.qpp-c-text-input--focus {
+    border: 1px solid v.$blue-60;
+    box-shadow: 0 0 0 4px v.$blue-10;
+    outline: none;
+    text-decoration: none;
+  }
+
+  &:disabled,
+  &.qpp-c-text-input--disabled {
+    background-color: v.$gray-04;
+    color: v.$gray-60;
+  }
+
+  &.qpp-c-text-input--error {
+    border: 1px solid v.$red-50;
+
+    &:focus,
+    &.qpp-c-button--focus {
+      border: 1px solid v.$red-50;
+      box-shadow: 0 0 0 4px v.$red-10;
+    }
+  }
+
+  &.qpp-c-text-input--success {
+    padding-right: v.$spacing-32;
+    background-size: v.$font-size-20 auto, 100%;
+    background-position: right v.$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: v.$spacing-48;
+    padding: v.$spacing-16;
+  }
+
+  &::-ms-clear {
+    display: none;
+  }
+}

package/styles/qppds/components/index.scss

@@ -0,0 +1,25 @@
+@forward './link';
+@forward './button';
+@forward './dropdown';
+@forward './breadcrumbs';
+@forward './modal';
+@forward './page-header';
+@forward './text-input';
+@forward './search';
+@forward './table';
+@forward './tabs';
+@forward './card';
+@forward './alert';
+@forward './pagination';
+@forward './dropdown-menu';
+@forward './circular-loader';
+@forward './gov-banner';
+@forward './step-indicator';
+@forward './checkbox';
+@forward './radio-button';
+@forward './process-list';
+@forward './details';
+// TODO: the following contain references to legacy variables & mixins
+@import './footer';
+@import './header';
+@import './sidebar';

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/{components → qppds/components}/sidebar/_cms.scss

@@ -1,47 +1,60 @@
 /*
 CMS specific styles
  */
+
 .sidebar {
 	.cms-header {
-		padding: 25px 30px 0;
+		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, .2));
+			@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);
-			display: inline-block;
-			width: 100%;
 			background: transparent;
 			border: 2px solid $color-teal-light;
 			border-radius: 28px;
 			cursor: pointer;
+			display: inline-block;
 			margin: 10px 0;
 			padding: 15px 30px;
-			text-transform: uppercase;
 			text-align: center;
+			text-transform: uppercase;
+			width: 100%;
+
 			&:hover {
 				border-color: $color-white;
-				color: $color-white
+				color: $color-white;
 			}
 		}
 	}

package/styles/{components → qppds/components}/sidebar/_details.scss

@@ -1,54 +1,61 @@
 /*
 Shared details
  */
-.sidebar {
-	.practice-container,
-	.individual-container {
-		.switch-practice,
-		.switch-clinician {
-			padding-top: 10px;
-			margin: 0;
-		}
-	}
-}
 
-/*
-Practice details styles
- */
 .sidebar {
+	/* Practice details styles */
+
 	.practice-container {
-		padding: 0 30px;
+		padding: 0 25px;
+
 		.practice-name {
 			@include typography('Rubik', 20px, 26px, $color-white);
 		}
-		.practice-tin {
+
+		.practice-tin,
+		.vg-id {
 			@include typography('Rubik', 14px, 16px, $color-white);
 			padding-top: 10px;
 		}
+		.subgroup-id {
+			padding-bottom: 25px;
+		}
 	}
-}
 
-/*
-Individual details
- */
-.sidebar {
+	/* Individual details */
+
 	.individual-container {
-		padding: 25px 30px 0;
+		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;
+		}
+	}
 }