@madie/madie-design-system 1.0.0

package/styles/components/_panels.scss

@@ -0,0 +1,61 @@
+.panel-group {
+	margin-bottom: 20px;
+}
+
+.panel-title {
+	align-content: center;
+	align-items: center;
+	display: flex;
+
+	a {
+		color: $color-blue-light;
+
+		&:first-child {
+			width: 85%;
+		}
+	}
+
+	svg {
+		height: 15px;
+		width: 15px;
+	}
+}
+
+.panel-default {
+	& > .panel-heading {
+		background-color: transparent;
+
+		h3 {
+			margin: 0.5em 0;
+		}
+
+		a {
+			line-height: 1.4;
+		}
+	}
+}
+
+.panel-body {
+	font-size: 1rem;
+}
+
+.panel-default > .panel-heading + .panel-collapse > .panel-body {
+	border-top-color: #fff;
+}
+
+.panel-info {
+	& > .panel-heading {
+		background-color: $color-teal-light;
+	}
+
+	&.selected-measures {
+		border-color: $color-teal-light;
+
+		p.panel-title {
+			color: #000;
+			font-size: 14px;
+			font-weight: 700;
+			text-align: center;
+		}
+	}
+}

package/styles/components/_pie-chart.scss

@@ -0,0 +1,13 @@
+.pie-chart {
+	margin: 0 auto;
+	max-width: 300px;
+	padding-bottom: 2em;
+	text-align: center;
+	@include breakpoint(md) {
+		max-width: none;
+	}
+
+	h3 {
+		margin: 0 0 1em;
+	}
+}

package/styles/components/_score-chart.scss

@@ -0,0 +1,164 @@
+.chart {
+	align-items: center;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	margin-bottom: 20px;
+	text-align: center;
+
+	button {
+		background: none;
+		border: none;
+		padding: 0;
+	}
+
+	.score-chart {
+		.arc {
+			fill: none;
+			stroke-width: 1.5;
+
+			&.empty {
+				fill: transparent;
+				stroke: $color-slate-light;
+			}
+
+			&.filled {
+				&.quality {
+					fill: $color-quality;
+					stroke: $color-quality;
+				}
+
+				&.aci,
+				&.pi {
+					fill: $color-aci;
+					stroke: $color-aci;
+				}
+
+				&.ia {
+					fill: $color-ia;
+					stroke: $color-ia;
+				}
+			}
+
+			&.filled,
+			&.empty {
+				cursor: pointer;
+			}
+		}
+
+		text {
+			fill: $color-white;
+
+			&.label {
+				font-weight: normal;
+			}
+
+			&.chart-title {
+				font-size: 40px;
+				font-weight: 300;
+			}
+
+			&.chart-subtitle {
+				fill: $color-gray-medium;
+				font-size: 12px;
+				font-weight: bold;
+				letter-spacing: 0.1em;
+			}
+		}
+	}
+
+	.chart-tooltip {
+		@include typography('Rubik', 14px, 20px, $color-text-main);
+		background-color: rgba(255, 255, 255, 0.85);
+		border-radius: 10px;
+		box-shadow: 4px 4px 10px rbga(0, 0, 0, 0.4);
+		color: black;
+		height: 40px;
+		padding: 10px;
+		pointer-events: none;
+		position: absolute;
+		width: 250px;
+
+		&.off {
+			opacity: 0;
+		}
+	}
+
+	.chart-legend-toggler {
+		cursor: pointer;
+		display: flex;
+		flex-direction: row;
+
+		& button {
+			@include typography('Rubik', 14px, 20px, $color-teal-light);
+			cursor: pointer;
+			fill: $color-teal-light;
+			margin: 20px 0;
+			padding: 5px;
+
+			&.open {
+				color: $color-white;
+				fill: $color-white;
+			}
+
+			& .right-icon {
+				height: 11px;
+				margin-left: 5px;
+				transition: transform 0.6s;
+				width: 11px;
+			}
+
+			& .rotated {
+				transform: rotate(180deg);
+			}
+		}
+	}
+
+	.chart-legend {
+		list-style: none;
+		text-align: left;
+
+		& button {
+			@include typography('Rubik', 14px, 20px, $color-white);
+			margin-bottom: 7px;
+		}
+
+		.legend-axis {
+			color: white;
+			font-size: 14px;
+
+			.legend-axis-color {
+				border-radius: 10px;
+				float: left;
+				height: 15px;
+				margin: 2px;
+				margin-right: 10px;
+				margin-top: 3px;
+				width: 15px;
+
+				&.quality {
+					background-color: $color-quality;
+				}
+
+				&.aci,
+				&.pi {
+					background-color: $color-aci;
+				}
+
+				&.ia {
+					background-color: $color-ia;
+				}
+
+				&.cost {
+					background-color: $color-cost;
+				}
+			}
+
+			.legend-axis-title {
+				display: inline-block;
+				text-align: left;
+				width: 165px;
+			}
+		}
+	}
+}

package/styles/components/_spinner.scss

@@ -0,0 +1,7 @@
+.ds-c-spinner::after {
+	color: $color-teal;
+}
+
+.ds-c-spinner::before {
+	color: $color-gray-very-light;
+}

package/styles/components/_tables.scss

@@ -0,0 +1,111 @@
+/* Tables */
+
+.thead-inverse th {
+  background-color: $table-primary-color;
+  color: $color-white; // Bootstrap 3
+}
+
+.table {
+  font-size: 1.1rem;
+
+  th {
+    border-top: none;
+    font-weight: 500;
+  }
+
+  th,
+  td {
+    border-color: $table-border-color !important; // Impotant Bootstrap 3
+    padding: 1.2rem 1.4rem !important; // Impotant Bootstrap 3
+  }
+}
+
+.table-bordered {
+  border: none;
+
+  thead {
+    th {
+      border-bottom: none !important; // Impotant Bootstrap 3
+    }
+  }
+}
+
+.table thead {
+  tr {
+    th {
+      border-bottom: none;
+      vertical-align: middle;
+    }
+  }
+}
+
+.table-bordered thead th:first-of-type {
+  border-left: none;
+}
+
+.table-bordered thead th:last-of-type {
+  border-right-color: $table-primary-color;
+}
+
+.table tbody {
+  tr {
+    &:first-of-type {
+      td {
+        border-top: 0;
+      }
+    }
+  }
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+  background-color: transparent;
+}
+
+.table-striped tbody tr:nth-of-type(even) {
+  background-color: $table-stripe-color;
+}
+
+// Mobile table fixes
+
+.table-container {
+  margin: 0 0 1em;
+  overflow-y: auto;
+  width: 100%;
+
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    height: 14px;
+    width: 14px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.3);
+    border: 3px solid $color-white;
+    border-radius: 8px;
+  }
+
+  .table {
+    @include breakpoint(xs) {
+      margin-bottom: 2rem;
+      position: relative;
+
+      &::after {
+        bottom: -32px;
+        content: 'Scroll to view table \2192';
+        font-size: 0.9rem;
+        font-weight: 100;
+        position: absolute;
+      }
+    }
+  }
+}
+
+.no-scroll-table-container {
+  overflow-y: inherit !important;
+  overflow: inherit !important;
+  .table {
+    &::after {
+      content: '' !important;
+    }
+  }
+}

package/styles/components/_tabs.scss

@@ -0,0 +1,69 @@
+.react-tabs {
+	position: relative;
+
+	.ds-c-tabs {
+		border-bottom: 1px solid $color-gray-very-light;
+		display: flex;
+		list-style-type: none;
+		margin-bottom: 0;
+		padding-left: 0;
+	}
+
+	.react-tabs__tab-rule {
+		background: $color-gray-very-light;
+		height: 1px;
+		margin-top: -1px;
+		position: absolute;
+		z-index: -1;
+	}
+
+	.ds-c-tabs__item {
+		border-color: $color-gray-very-light;
+		border-style: solid;
+		border-top-left-radius: 3px;
+		border-top-right-radius: 3px;
+		border-width: 1px;
+		color: $link-color;
+		cursor: pointer;
+		display: inline-block;
+		margin-left: 0.625rem;
+		padding: 1.25rem;
+		padding-bottom: 0.9375rem;
+		text-decoration: none;
+		text-transform: uppercase;
+
+		&[aria-selected='true'] {
+			border-bottom-color: $color-white;
+			color: $color-text-main;
+			font-weight: $rubik-medium;
+		}
+
+		&[aria-disabled='true'] {
+			background: $color-gray-very-light;
+			color: $color-gray-darker-medium;
+			cursor: not-allowed;
+		}
+	}
+
+	.ds-c-tabs__panel {
+		margin-top: 2.5rem;
+
+		&:empty {
+			display: none;
+		}
+
+		&[aria-hidden='true'] {
+			display: none;
+		}
+	}
+
+	.react-tabs__full-width {
+		.ds-c-tabs {
+			border-bottom: 0 none;
+		}
+
+		.ds-c-tabs__item:first-child {
+			margin-left: 0;
+		}
+	}
+}

package/styles/components/_text.scss

@@ -0,0 +1,150 @@
+/* Base Styles */
+
+html {
+	font-size: $font-size-base;
+}
+
+body {
+	color: $text-color;
+	font-family: $font-family-base;
+	font-size: $font-size-base * 1.125;
+	font-weight: 400;
+	line-height: 1.7;
+}
+
+::-moz-selection {
+	background: $text-selection-color;
+}
+
+::selection {
+	background: $text-selection-color;
+}
+
+p {
+	margin-bottom: 30px;
+
+	&.lead {
+		color: $lead-color;
+		font-size: 1.5rem;
+		font-weight: 400;
+	}
+
+	& ~ ul,
+	& ~ ol {
+		margin-bottom: 30px;
+		margin-top: -25px;
+	}
+}
+
+a {
+	color: $link-color;
+	text-decoration: $link-decoration;
+
+	&:hover {
+		color: $link-hover-color;
+		text-decoration: $link-hover-decoration;
+	}
+}
+
+strong {
+	font-weight: 500;
+}
+
+small {
+	font-size: 1rem;
+	line-height: 1.5;
+}
+
+hr {
+	margin-bottom: 35px;
+}
+
+#panel {
+	section:first-of-type {
+		margin-top: 2rem;
+	}
+}
+
+/* Header Styles */
+
+$default-font-size: 16;
+
+h1 {
+	.subtitle {
+		font-size: 18px; // Fallback in pixels
+		font-size: (18 / $default-font-size) + rem;
+		font-weight: $rubik-regular;
+
+		@include breakpoint(xs) {
+			font-size: 16px; // Fallback in pixels
+			font-size: (16 / $default-font-size) + rem;
+		}
+	}
+}
+
+@for $i from 1 through length($headings) {
+	$heading: nth($headings, $i);
+
+	h#{$i},
+	.h#{$i} {
+		color: $headings-color;
+		font-weight: nth($heading, 5);
+		margin-bottom: 10px;
+
+		@include breakpoint(xs) {
+			font-size: nth($heading, 2) + px; // Fallback in pixels
+			font-size: (nth($heading, 2) / $default-font-size) + rem;
+			line-height: nth($heading, 4) + px;
+		}
+		@include breakpoint(sm) {
+			font-size: nth($heading, 2) + px; // Fallback in pixels
+			font-size: (nth($heading, 2) / $default-font-size) + rem;
+			line-height: nth($heading, 4) + px;
+		}
+		@include breakpoint(md) {
+			font-size: nth($heading, 1) + px; // Fallback in pixels
+			font-size: (nth($heading, 1) / $default-font-size) + rem;
+			line-height: nth($heading, 3) + px;
+		}
+	}
+}
+
+.content-page h1 {
+	.subtitle {
+		font-size: 24px; // Fallback in pixels
+		font-size: (24 / $default-font-size) + rem;
+		font-weight: $rubik-light;
+
+		@include breakpoint(xs) {
+			font-size: 20px; // Fallback in pixels
+			font-size: (20 / $default-font-size) + rem;
+		}
+	}
+}
+
+@for $i from 1 through length($content-headings) {
+	$heading: nth($content-headings, $i);
+
+	.content-page h#{$i},
+	.content-page .h#{$i} {
+		color: $headings-color-content;
+		font-size: nth($heading, 1) + px; // Fallback in pixels
+		font-size: (nth($heading, 1) / $default-font-size) + rem;
+		font-weight: nth($heading, 4);
+		line-height: 1.2;
+		margin-bottom: 10px;
+		text-transform: nth($heading, 5);
+		@include breakpoint(xs) {
+			font-size: nth($heading, 3) + px; // Fallback in pixels
+			font-size: (nth($heading, 3) / $default-font-size) + rem;
+		}
+		@include breakpoint(sm) {
+			font-size: nth($heading, 2) + px; // Fallback in pixels
+			font-size: (nth($heading, 2) / $default-font-size) + rem;
+		}
+		@include breakpoint(md) {
+			font-size: nth($heading, 1) + px; // Fallback in pixels
+			font-size: (nth($heading, 1) / $default-font-size) + rem;
+		}
+	}
+}

package/styles/components/_toggles.scss

@@ -0,0 +1,3 @@
+.dropdown-toggle {
+	font-weight: normal;
+}

package/styles/components/_tooltip.scss

@@ -0,0 +1,23 @@
+[data-reach-tooltip] {
+	border: none;
+	border-radius: 4px;
+	padding: 10px;
+	box-shadow: 0 4px 8px 6px rgba(0, 0, 0, 0.1);
+	white-space: normal;
+	z-index: 1;
+	pointer-events: none;
+	position: absolute;
+	font-size: 85%;
+}
+
+@media only screen and (max-width: 339px) {
+	/* For small screens */
+	[data-reach-tooltip] {
+		max-width: 90%;
+	}
+}
+@media only screen and (min-width: 340px) {
+	[data-reach-tooltip] {
+		max-width: 340px;
+	}
+}