@madie/madie-design-system 1.0.0

package/styles/components/_fonts.scss

@@ -0,0 +1,42 @@
+@font-face {
+	font-family: 'FontAwesome';
+	src: url('#{$font-path}fontawesome-webfont.eot?') format('eot'),
+		url('#{$font-path}fontawesome-webfont.woff2') format('woff2'),
+		url('#{$font-path}fontawesome-webfont.woff') format('woff'),
+		url('#{$font-path}fontawesome-webfont.ttf') format('truetype'),
+		url('#{$font-path}fontawesome-webfont.svg') format('svg');
+}
+@font-face {
+	font-family: 'Rubik';
+	font-style: normal;
+	font-weight: 300;
+	letter-spacing: -0.2px;
+	src: url('#{$font-path}Rubik-Light.ttf');
+}
+@font-face {
+	font-family: 'Rubik';
+	font-style: normal;
+	font-weight: 400;
+	letter-spacing: -0.2px;
+	src: url('#{$font-path}Rubik-Regular.ttf');
+}
+@font-face {
+	font-family: 'Rubik';
+	font-style: normal;
+	font-weight: 500;
+	letter-spacing: -0.2px;
+	src: url('#{$font-path}Rubik-Medium.ttf');
+}
+@font-face {
+	font-family: 'Rubik';
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: -0.2px;
+	src: url('#{$font-path}Rubik-Bold.ttf');
+}
+@font-face {
+	font-family: 'FontAwesome';
+	font-style: normal;
+	font-weight: 400;
+	src: url('#{$font-path}FontAwesome.otf') format('opentype');
+}

package/styles/components/_forms.scss

@@ -0,0 +1,277 @@
+/* Forms */
+
+label,
+legend {
+	border-bottom: none;
+	color: $form-label-color;
+	font-size: 0.8em;
+	font-weight: 500;
+	margin-bottom: 0.2rem;
+	text-transform: uppercase;
+
+	&.form-small {
+		color: $color-text-main;
+		font-size: 14px;
+		font-weight: 500;
+		line-height: 22px;
+		margin: 0.5rem 0;
+		text-transform: none;
+	}
+}
+
+fieldset {
+	padding: 0.35em 0 0;
+}
+
+.form-control {
+	-webkit-appearance: none;
+	border-color: $form-border-color;
+	border-radius: 2px;
+	box-shadow: none; // Bootstrap 3
+	color: $color-gray-dark;
+	font-family: $font-family-base;
+	font-size: 1rem; // Bootstrap 3
+	height: 50px; // Bootstrap 3
+	padding: 0.9rem 0.75rem;
+
+	&::placeholder {
+		color: $form-field-color;
+	}
+
+	&:focus {
+		border-color: $form-border-color-focus;
+		box-shadow: none; // Bootstrap 3
+	}
+}
+
+.form-control-feedback {
+	display: none;
+	font-size: 0.9rem;
+	margin-top: 0;
+	position: relative;
+	text-align: initial;
+	width: initial;
+}
+
+.custom-control {
+	cursor: pointer;
+	display: inline-flex;
+	margin-right: 1rem;
+	min-height: 1.5rem;
+	padding-left: 2.2rem;
+	position: relative;
+	top: -20px;
+	user-select: none;
+
+	.custom-control-indicator {
+		background-color: $color-gray-very-light;
+		background-position: center center;
+		background-repeat: no-repeat;
+		border: 1px solid $form-border-color;
+		display: block;
+		height: 1.5rem;
+		left: 0;
+		padding: 5px;
+		pointer-events: none;
+		position: absolute;
+		width: 1.5rem;
+
+		&.radio {
+			background-position: 4px 4px;
+			background-size: 65%;
+			border-radius: 50%;
+		}
+
+		&.checkbox {
+			background-size: 90%;
+			border-radius: 3px;
+
+			&.white {
+				background-color: $color-white;
+			}
+		}
+	}
+
+	.custom-control-input {
+		opacity: 0;
+		position: absolute;
+		z-index: -1;
+
+		&:active {
+			& ~ .custom-control-indicator {
+				background-color: $color-white;
+				border-color: $form-border-color;
+			}
+		}
+
+		&:focus {
+			& ~ .custom-control-indicator {
+				border-color: $form-border-color;
+				box-shadow: none;
+			}
+		}
+
+		&:checked {
+			& ~ .custom-control-indicator {
+				background-color: $form-check-color;
+				border-color: $form-check-color;
+			}
+
+			&:focus {
+				& ~ .custom-control-indicator {
+					border-color: $form-check-color;
+					box-shadow: none;
+				}
+			}
+		}
+	}
+
+	.custom-control-description {
+		color: $text-color;
+		font-weight: normal;
+		position: relative;
+		text-transform: initial;
+		top: 10px;
+	}
+}
+
+.custom-radio,
+.custom-checkbox {
+	margin-bottom: -0.875rem;
+	padding-bottom: 0.875rem;
+}
+
+.custom-radio {
+	.custom-control-input:checked ~ .custom-control-indicator.radio {
+		background-color: $color-white;
+		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='4' fill='%2304838a'/%3E%3C/svg%3E");
+		border: 1px solid $color-teal;
+	}
+}
+
+.custom-checkbox {
+	.custom-control-input:checked ~ .custom-control-indicator.checkbox,
+	.custom-control-input:checked ~ .custom-control-indicator.checkbox-white {
+		background-color: $color-teal;
+		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='3 0 20 25'%3E%3Cpath fill='%23fff' d='M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z'/%3E%3C/svg%3E");
+		border: 1px solid $color-teal;
+	}
+}
+
+.has-danger {
+	.col-form-label,
+	.custom-control,
+	.form-check-label,
+	.form-control-feedback,
+	.form-control-label {
+		color: $form-error-color;
+		display: block;
+		height: initial;
+		line-height: initial;
+	}
+
+	.form-control {
+		border-color: $form-error-color;
+		border-width: 2px;
+	}
+
+	.form-control-danger {
+		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23bc2828' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23bc2828' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
+		background-position: center right 0.5625rem;
+		background-repeat: no-repeat;
+		background-size: 1.125rem 1.125rem;
+	}
+}
+
+.form-check {
+	.form-check-label {
+		color: inherit;
+		font-weight: normal;
+		text-transform: initial;
+	}
+}
+
+form {
+	button[type='submit'] {
+		margin-top: 1rem;
+	}
+}
+
+select.form-control:not([size]):not([multiple]) {
+	height: calc(3rem + 2px);
+}
+
+.custom-select {
+	appearance: none;
+	background: #fff
+		url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-26 -12 40 40'%3E%3Cpath fill='%2304838a' d='M13.148 6.312l-5.797 5.789q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.789q-0.148-0.148-0.148-0.355t0.148-0.355l1.297-1.289q0.148-0.148 0.352-0.148t0.352 0.148l4.148 4.148 4.148-4.148q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.289q0.148 0.148 0.148 0.355t-0.148 0.355z'/%3E%3C/svg%3E")
+		no-repeat right 0.75rem center;
+	background-size: 40px 40px;
+
+	&::-ms-expand {
+		display: none;
+	}
+}
+
+.input-group {
+	.input-group-btn {
+		select {
+			border-right: none;
+			min-width: 110px;
+		}
+	}
+
+	input {
+		border-left: none;
+	}
+
+	.form-control {
+		&:focus {
+			border-color: $form-border-color;
+			border-right: none;
+			box-shadow: none; // Bootstrap 3
+		}
+	}
+}
+
+.detail-boxed {
+	border-left: 1px solid $color-gray-very-light;
+	border-radius: 3px;
+	border-right: 1px solid $color-gray-very-light;
+	border-top: 1px solid $color-gray-very-light;
+	box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.1);
+	font-size: 1rem;
+	margin-bottom: 2rem;
+	margin-top: 2rem;
+
+	.detail {
+		border-bottom: 1px solid $color-gray-very-light;
+		display: flex;
+		flex-direction: column;
+		@include breakpoint(sm) {
+			flex-direction: row;
+		}
+
+		& > div {
+			padding: 1rem;
+		}
+
+		& > div:nth-of-type(1) {
+			background: $color-gray-light;
+			flex: 1;
+			font-weight: 500;
+		}
+
+		& > div:nth-of-type(2) {
+			@include breakpoint(sm) {
+				flex: 2;
+			}
+		}
+
+		.detail-field {
+			display: flex;
+			flex-direction: row-reverse;
+			justify-content: space-between;
+		}
+	}
+}

package/styles/components/_grid.scss

@@ -0,0 +1,37 @@
+// Due to adding in the side-nav, on qpp-ui we need to start
+// phasing out bootstrap's default containers to make it more responsive
+
+.responsive-container {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 15px;
+  padding-right: 15px;
+
+  @include breakpoint(sm) {
+    max-width: $screen-sm;
+  }
+  @include breakpoint(md) {
+    max-width: $screen-md;
+  }
+  @include breakpoint(lg) {
+    max-width: $screen-lg;
+  }
+
+  &.tight {
+    max-width: 800px;
+  }
+
+  &.tighter {
+    max-width: 500px;
+  }
+}
+
+// The bootstrap container class causes issues with our
+// sm/md/lg breakpoints. Will remove this once we make changes
+// to legacy containers.
+
+.container {
+  &.tight {
+    max-width: 800px;
+  }
+}

package/styles/components/_info-modal.scss

@@ -0,0 +1,139 @@
+.info-modal-overlay {
+	background-color: rgba(0, 0, 0, 0.8);
+	bottom: 0;
+	left: 0;
+	position: fixed;
+	right: 0;
+	top: 0;
+	z-index: 2000;
+}
+
+.info-modal-content {
+	background: $color-white;
+	border: 0 none;
+	border-radius: 2px;
+	bottom: auto;
+	left: 50%;
+	max-width: 800px;
+	min-width: 450px;
+	outline: none;
+	overflow: auto;
+	padding: 2rem 3rem 1rem;
+	position: absolute;
+	right: auto;
+	top: 10%;
+
+	transform: translateX(-50%);
+
+	@include breakpoint(xs) {
+		height: 100%;
+		overflow: scroll;
+		top: 0;
+	}
+
+	p {
+		&.body-text {
+			margin-bottom: 10px;
+		}
+
+		&.disclaimer {
+			color: $color-gray-darker-medium;
+			font-size: 0.875rem;
+		}
+	}
+
+	h1 {
+		color: $brand-primary-dark;
+		font-size: 2rem;
+		font-weight: 400;
+		margin-bottom: 30px;
+		position: relative;
+
+		.icon {
+			fill: $color-gray-medium;
+			height: 1.9375rem;
+			left: -2.75rem;
+			position: absolute;
+			top: 0.125rem;
+			width: 2rem;
+		}
+	}
+
+	.closeModal {
+		background-color: transparent;
+		border: 0;
+		line-height: 0;
+		margin: 0;
+		padding: 0;
+		position: absolute;
+		right: 16px;
+		top: 16px;
+
+		@include breakpoint(xs) {
+			padding: 16px;
+			right: 10%;
+		}
+
+		.close-icon {
+			fill: $color-gray-medium;
+			height: 16px;
+			width: 16px;
+
+			@include breakpoint(xs) {
+				height: 11px;
+				width: 11px;
+			}
+		}
+	}
+
+	.list-section {
+		color: $color-gray-dark;
+		font-size: 0.9rem;
+
+		p {
+			font-weight: normal;
+		}
+
+		ul {
+			margin-bottom: 0;
+		}
+
+		ul li {
+			font-weight: 100;
+		}
+	}
+
+	.actions {
+		align-items: center;
+		display: flex;
+		flex-direction: column;
+		margin-top: 30px;
+	}
+
+	.btn {
+		background-color: transparent;
+		border: 1px solid transparent;
+		border-radius: 2rem;
+		color: $color-teal;
+		font-size: 0.75rem;
+		margin-top: 0.25rem;
+		padding: 1.25rem 4rem;
+		text-transform: uppercase;
+
+		&.primary-action {
+			background-color: $color-teal;
+			color: $color-white;
+		}
+
+		&.secondary-action {
+			color: $color-gray-dark;
+			font-weight: 100;
+			text-decoration: underline;
+			text-transform: none;
+		}
+	}
+}
+
+.info-modal-content-primary-only {
+	padding-bottom: 3rem;
+}

package/styles/components/_links.scss

@@ -0,0 +1,12 @@
+// External Links
+
+a[target^='_blank']:not(.button):not([download]):not(.social-link):not(.adobe-link) {
+	&::after {
+		content: '\f08e';
+		display: inline-block;
+		font-family: 'FontAwesome';
+		font-size: 1em;
+		margin-left: 0.25em;
+		vertical-align: middle;
+	}
+}

package/styles/components/_modals.scss

@@ -0,0 +1,18 @@
+.modal-subscribe-footer {
+  padding-top: 10px;
+  text-align: center;
+}
+
+.modal-footer {
+  text-align: center;
+
+  a {
+    margin-right: 20px;
+  }
+}
+
+#privacy-modal {
+  .text-wrap-normal {
+    white-space: normal;
+  }
+}

package/styles/components/_notification-banner.scss

@@ -0,0 +1,165 @@
+@mixin label-style($customColor) {
+	.expanded-view .notification-banner-label {
+		background-color: $customColor;
+	}
+
+	.collapsed-view .notification-banner-label .bell-icon svg {
+		fill: $customColor;
+	}
+}
+
+.notification-banner-red {
+	@include label-style($color-red);
+}
+
+.notification-banner-blue {
+	@include label-style($color-navy);
+}
+
+.notification-banner {
+	background: $notification-banner-background;
+	border-bottom: 1px solid $color-gray-light;
+	border-bottom-color: $color-gray-very-light;
+	color: $color-gray-darker;
+	display: flex;
+	flex-direction: column;
+	font-size: 0.875rem;
+
+	&-label {
+		background-color: transparent;
+		border: none;
+		cursor: pointer;
+	}
+
+	&.expanded {
+		.expanded-view.notification-banner-wrapper {
+			opacity: 100;
+			position: relative;
+		}
+
+		.collapsed-view.notification-banner-wrapper {
+			opacity: 0;
+			position: absolute;
+		}
+	}
+
+	&.collapsed {
+		flex-direction: column-reverse;
+
+		.expanded-view.notification-banner-wrapper {
+			opacity: 0;
+			position: absolute;
+		}
+
+		.collapsed-view.notification-banner-wrapper {
+			opacity: 100;
+			position: relative;
+		}
+	}
+
+	.notification-banner-wrapper {
+		display: flex;
+		flex-direction: row;
+		flex-shrink: 0;
+
+		.notification-banner-label {
+			align-items: center;
+			display: flex;
+			line-height: 1;
+			text-transform: uppercase;
+			flex: 0 0 auto;
+		}
+
+		&.expanded-view {
+			justify-content: flex-start;
+
+			.notification-banner-label {
+				color: $color-white;
+				font-size: 1rem;
+				padding: 0 30px;
+			}
+
+			.notification-banner-content {
+				padding: 20px 80px 20px 20px;
+
+				b {
+					color: $color-navy;
+				}
+
+				p {
+					display: inline;
+					margin: 0;
+				}
+
+				a {
+					color: $link-color;
+				}
+			}
+
+			.notification-banner-close {
+				align-self: flex-start;
+				background: transparent;
+				border: 0 none;
+				margin-left: auto;
+				padding: 15px 15px;
+
+				.close-icon {
+					fill: $link-color;
+					height: 1rem;
+					width: 1rem;
+				}
+			}
+		}
+
+		&.collapsed-view {
+			cursor: pointer;
+			justify-content: flex-end;
+			padding: 10px 30px;
+
+			.notification-banner-label {
+				color: $notification-banner-label-color;
+				font-size: 0.75rem;
+
+				.bell-icon {
+					padding-left: 15px;
+
+					svg {
+						height: 18px;
+						width: 18px;
+					}
+				}
+			}
+		}
+	}
+}
+
+@include breakpoint(xs) {
+	.notification-banner {
+		.notification-banner-wrapper {
+			flex-direction: column;
+
+			&.collapsed-view {
+				align-items: center;
+			}
+
+			&.expanded-view {
+				.notification-banner-label {
+					align-self: flex-start;
+					font-size: 0.875rem;
+					margin: 20px 0 0 20px;
+					padding: 10px;
+				}
+
+				.notification-banner-content {
+					padding: 20px 50px 20px 20px;
+				}
+
+				.notification-banner-close {
+					padding: 20px;
+					position: absolute;
+					right: 0;
+				}
+			}
+		}
+	}
+}