@ongov/ontario-design-system-component-library 6.0.0-alpha.3 → 6.0.0-alpha.5

package/dist/collection/components/ontario-header/ontario-application-header.css

@@ -26,7 +26,8 @@
 /* callout backgrounds */
 /* icon colours */
 /* service ontario header colours */
-/*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
+/*** 1 - Breakpoint sizes for media queries ***/
+/* -------------------------------
     Global font variables
 --------------------------------- */
 /* Rem calc function */
@@ -40,9 +41,9 @@
 /* -------------------------------
     Focus placeholder
 --------------------------------- */
-.ontario-application-navigation a:focus,
-.ontario-application-navigation a:active,
+.ontario-header-button:hover,
 .ontario-header-button:focus,
+.ontario-application-subheader__heading a:focus,
 .ontario-input:focus,
 .ontario-input:active {
 	box-shadow: 0 0 0 4px #009adb;
@@ -1552,56 +1553,6 @@
 		float: left;
 	}
 }
-/*
-*  Text Inputs
-*/
-.ontario-input {
-	border: 2px solid #1a1a1a;
-	border-radius: 4px;
-	box-sizing: border-box;
-	color: #1a1a1a;
-	display: block;
-	font-size: 1rem;
-	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	line-height: 1.5;
-	margin: 0 0 2.5rem;
-	max-width: 48rem;
-	width: 100%;
-	padding: 0.625rem 1rem;
-	transition: box-shadow 0.1s ease-in-out;
-}
-.ontario-input--2-char-width {
-	max-width: 8ex;
-}
-
-.ontario-input--3-char-width {
-	max-width: 10ex;
-}
-
-.ontario-input--4-char-width {
-	max-width: 12ex;
-}
-
-.ontario-input--5-char-width {
-	max-width: 14ex;
-}
-
-.ontario-input--7-char-width {
-	max-width: 17ex;
-}
-
-.ontario-input--10-char-width {
-	max-width: 23ex;
-}
-
-.ontario-input--20-char-width {
-	max-width: 41ex;
-}
-
-.ontario-form-group:last-of-type {
-	margin-bottom: 2.5rem;
-}
-
 /*
 * Visibility
 *
@@ -1717,129 +1668,107 @@
 		display: block !important;
 	}
 }
-.ontario-application-header {
-	display: flex;
-	align-items: center;
-	background-color: #1a1a1a;
-	color: #ffffff;
-	height: 3.125rem !important;
-	position: relative;
-	z-index: 5;
+.ontario-input {
+	border: 2px solid rgb(25.5, 25.5, 25.5);
+	border-radius: 4px;
+	box-sizing: border-box;
+	color: rgb(25.5, 25.5, 25.5);
+	display: block;
+	font-size: 1rem;
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.5;
+	margin: 0;
+	max-width: 48rem;
+	width: 100%;
+	padding: 0.625rem 1rem;
+	transition: box-shadow 0.1s ease-in-out;
 }
-.ontario-application-header > .ontario-row {
-	display: flex;
-	align-items: center;
+.ontario-input--2-char-width {
+	max-width: 8ex;
 }
 
-.ontario-application-header-container {
-	position: relative;
-	width: 100%;
+.ontario-input--3-char-width {
+	max-width: 10ex;
 }
 
-.ontario-header-button.ontario-application-navigation--open:hover {
-	background-color: #666666;
+.ontario-input--4-char-width {
+	max-width: 12ex;
 }
 
-.ontario-header-button.ontario-application-navigation--closed:active {
-	background-color: #1a1a1a;
+.ontario-input--5-char-width {
+	max-width: 14ex;
 }
 
-.ontario-header-button--with-outline {
-	border: 2px solid #ffffff;
-	margin: 0 0 0 1rem;
-	padding: 0.375rem 1rem;
+.ontario-input--7-char-width {
+	max-width: 17ex;
 }
 
-.ontario-application-subheader .ontario-header-button,
-.ontario-application-navigation .ontario-header-button {
-	background-color: #4d4d4d;
+.ontario-input--10-char-width {
+	max-width: 23ex;
 }
 
-.ontario-header-button--closed:focus {
-	box-shadow: none;
-	outline: none;
-	transition: none;
+.ontario-input--20-char-width {
+	max-width: 41ex;
 }
 
-.ontario-application-header__logo,
-.ontario-application-header__logo a,
-.ontario-application-header__lang-toggle,
-.ontario-application-subheader__container,
-.ontario-application-subheader__menu-container,
-.ontario-application-subheader__menu {
+.ontario-application-header {
+	position: relative;
 	display: flex;
 	align-items: center;
-	outline: none;
-}
-
-.ontario-application-header__logo a:focus {
-	box-shadow: 0 0 0 4px #009adb;
-	transition: all 0.1s ease-in-out;
-}
-
-.ontario-application-header__logo svg,
-.ontario-application-header__logo img {
-	width: 100px;
-	height: 25px;
-}
-
-.ontario-application-header__lang-toggle {
-	justify-content: flex-end;
-}
-.ontario-application-header__lang-toggle a {
-	font-size: 1rem;
-	line-height: 1.375rem;
-	height: auto;
-	outline: none;
-	padding: 0.5rem 0.75rem;
+	background-color: rgb(25.5, 25.5, 25.5);
+	color: #ffffff;
+	height: 3.125rem;
+	z-index: 4;
 }
 
-/* Ontario application subheader styles */
-.ontario-application-subheader {
-	padding: 1.25rem 0;
-	background-color: #404040;
-	overflow: visible;
-	position: relative;
-	z-index: 5;
-}
-@media screen and (min-width: 73em) {
-	.ontario-application-subheader {
-		z-index: 0;
-	}
-}
-.ontario-application-subheader > .ontario-row {
-	position: relative;
+.ontario-header-button {
+	background-color: rgb(25.5, 25.5, 25.5);
+	border: none;
+	border-radius: 4px;
+	color: #ffffff;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	font-size: 1.125rem;
+	font-weight: 600;
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	height: 48px;
+	line-height: 1.5;
+	text-align: center;
+	text-decoration: none;
 }
 
-.ontario-application-header-container {
-	position: relative;
-	z-index: 5;
+.ontario-header-button--with-outline {
+	border: 2px solid #ffffff;
+	margin: 0 0 0 1rem;
+	padding: 0.375rem 1rem;
 }
 
+/* Ontario Application Header */
 .ontario-application-header > .ontario-row {
 	display: flex;
 	align-items: center;
 }
 
-.ontario-application-subheader .ontario-header-button {
-	visibility: visible;
+.ontario-application-header-container {
+	position: relative;
+	width: 100%;
+	z-index: 4;
 }
 
-.ontario-application-subheader .ontario-header-button,
-.ontario-application-navigation .ontario-header-button {
-	background-color: #4d4d4d;
-}
-.ontario-application-subheader .ontario-header-button:hover,
-.ontario-application-navigation .ontario-header-button:hover {
-	background-color: #666666;
+/* Header Buttons */
+.ontario-header-button {
+	border: 2px solid #ffffff;
+	padding: 0.5rem 1rem;
 }
-.ontario-application-subheader .ontario-header-button:active,
-.ontario-application-navigation .ontario-header-button:active {
-	background-color: #1a1a1a;
+.ontario-header-button:hover,
+.ontario-header-button:focus {
+	background-color: rgb(76.5, 76.5, 76.5);
+	color: #ffffff;
 }
 
 .ontario-header-button--without-outline:hover {
-	background-color: #4d4d4d;
+	background-color: rgb(76.5, 76.5, 76.5);
 }
 .ontario-header-button--without-outline:focus {
 	box-shadow: 0 0 0 4px #009adb;
@@ -1847,63 +1776,30 @@
 	transition: all 0.1s ease-in-out;
 }
 
-.ontario-application-subheader__heading {
-	padding: 0.375rem 0;
-	margin-bottom: 0;
-	max-width: 65%;
-}
-.ontario-application-subheader__heading a {
-	color: #ffffff;
-	font-weight: 600;
-	text-decoration: none;
-}
-.ontario-application-subheader__heading a:focus {
-	box-shadow: 0 0 0 4px #009adb;
-	transition: all 0.1s ease-in-out;
+/* Subheader */
+.ontario-application-subheader {
+	padding: 1.25rem 0;
+	background-color: rgb(63.75, 63.75, 63.75);
+	position: relative;
+	z-index: 4;
 }
-.ontario-application-subheader__heading a:hover,
-.ontario-application-subheader__heading a:active,
-.ontario-application-subheader__heading a:visited {
-	color: #ffffff;
-	text-decoration: underline;
+@media screen and (min-width: 73em) {
+	.ontario-application-subheader {
+		z-index: 0;
+	}
 }
-
 .ontario-application-subheader .ontario-header-button {
+	background-color: rgb(76.5, 76.5, 76.5);
 	visibility: visible;
-	background-color: #4d4d4d;
 }
 .ontario-application-subheader .ontario-header-button:hover {
 	background-color: #666666;
 }
 .ontario-application-subheader .ontario-header-button:active {
-	background-color: #1a1a1a;
-}
-
-.ontario-header__menu-toggler span {
-	display: flex;
-}
-@media screen and (max-width: 20em) {
-	.ontario-header__menu-toggler span:last-of-type {
-		display: none;
-	}
-}
-.ontario-header__menu-toggler svg {
-	margin-right: 6px;
-}
-@media screen and (max-width: 20em) {
-	.ontario-header__menu-toggler svg {
-		margin-right: 0;
-	}
-}
-
-.ontario-application-subheader__container {
-	align-items: center;
-	justify-content: space-between;
+	background-color: rgb(25.5, 25.5, 25.5);
 }
 
 .ontario-application-subheader__menu {
-	display: flex;
-	align-items: center;
 	list-style: none;
 	margin: 0;
 	padding-left: 0;
@@ -1940,355 +1836,103 @@
 	color: #ffffff;
 }
 .ontario-application-subheader__menu-container a:active {
-	background-color: #1a1a1a;
+	background-color: rgb(25.5, 25.5, 25.5);
 }
 .ontario-application-subheader__menu-container a:focus {
 	box-shadow: 0 0 0 4px #009adb;
 	transition: all 0.1s ease-in-out;
 }
 
-.ontario-application-navigation {
-	position: absolute;
-	width: 100%;
-}
-@media screen and (min-width: 73em) {
-	.ontario-application-navigation {
-		position: relative;
-		max-width: 72rem;
-		width: auto;
-		margin: 0 auto;
-	}
-}
-
-.ontario-application-navigation .ontario-header-button {
-	visibility: hidden;
-	position: absolute;
-	top: -4.25rem;
-	right: 1rem;
-	z-index: 6;
-}
-
-.ontario-application-navigation__container {
-	background: #ffffff;
-	position: absolute;
-	top: 0;
-	width: 100%;
-	z-index: 4;
-}
-@media screen and (min-width: 40em) {
-	.ontario-application-navigation__container {
-		background: #ffffff;
-		position: absolute;
-		z-index: 4;
-	}
-}
-@media screen and (min-width: 73em) {
-	.ontario-application-navigation__container {
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-		border-radius: 4px;
-		position: absolute;
-		right: 0.75rem;
-		top: -0.6rem;
-		min-width: 290px;
-		max-width: 30%;
-		z-index: 3;
-		transition: none !important;
-	}
-}
-
-.ontario-application-navigation ul {
-	list-style: none;
-	padding: 0.5rem 0;
-	margin: 0;
-	border-bottom: 1px solid #cccccc;
-}
-@media screen and (min-width: 73em) {
-	.ontario-application-navigation ul {
-		border-bottom: none;
-	}
-}
-
-.ontario-application-navigation li {
-	border-top: 1px solid #cccccc;
-	padding: 0;
+.ontario-application-subheader__heading {
+	padding: 0.375rem 0;
 	margin-bottom: 0;
+	max-width: 65%;
 }
-.ontario-application-navigation li:last-of-type {
-	border-bottom: 1px solid #cccccc;
-}
-
-.ontario-application-navigation a {
-	color: #1a1a1a;
-	display: block;
-	font-size: 1.125rem;
+.ontario-application-subheader__heading a {
+	color: #ffffff;
 	font-weight: 600;
-	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 	text-decoration: none;
-	padding: 0.6730769231rem 1.5rem;
 }
-.ontario-application-navigation a:hover {
-	text-decoration: underline;
-	background-color: #e5e5e5;
-}
-.ontario-application-navigation a:active {
+.ontario-application-subheader__heading a:hover,
+.ontario-application-subheader__heading a:active,
+.ontario-application-subheader__heading a:visited {
+	color: #ffffff;
 	text-decoration: underline;
-	background-color: #cccccc;
-}
-.ontario-application-navigation a:focus,
-.ontario-application-navigation a:active {
-	box-shadow: 0 0 0 4px #009adb inset;
-}
-.ontario-application-navigation a.ontario-link--active {
-	border-left: 6px solid #1a1a1a;
-	background-color: #f2f2f2;
-}
-
-.ontario-navigation--open {
-	visibility: visible;
-	transform: translateY(0);
-	transition: transform 0.4s ease-in-out;
-}
-@media screen and (min-width: 73em) {
-	.ontario-navigation--open {
-		z-index: 5;
-	}
-}
-
-.ontario-navigation--closed {
-	background: #ffffff;
-	position: absolute;
-	transform: translateY(-100%);
-	transition:
-		transform 0.3s ease-in-out,
-		visibility 0.1s ease;
-	width: 100%;
-	visibility: hidden;
-	z-index: 4;
 }
 
-.ontario-application-navigation.ontario-navigation--open .ontario-application-navigation__container {
-	visibility: visible;
-	transform: translateY(0);
-	transition: transform 0.4s ease-in-out;
-}
-@media screen and (min-width: 73em) {
-	.ontario-application-navigation.ontario-navigation--open .ontario-application-navigation__container {
-		transition: none;
-		display: block;
-	}
-}
-
-.ontario-overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	background: rgba(0, 0, 0, 0.6);
-	width: 100%;
-	height: 100%;
-	z-index: 2;
-}
-
-.ontario-header-button.ontario-navigation--open:hover {
-	background-color: #666666;
-}
-.ontario-header-button.ontario-navigation--open:active {
-	background-color: #1a1a1a;
-}
-
-.ontario-header-button.ontario-navigation--closed:active {
-	background-color: #1a1a1a;
+.ontario-application-subheader__container {
+	align-items: center;
+	justify-content: space-between;
 }
 
-/* Header buttons */
-.ontario-header-button {
-	background-color: #1a1a1a;
-	border: none;
-	border-radius: 4px;
-	box-sizing: border-box;
-	box-shadow: none;
-	color: #ffffff;
-	cursor: pointer;
+/* Logo */
+.ontario-application-header__logo,
+.ontario-application-header__logo a,
+.ontario-application-header__lang-toggle,
+.ontario-application-subheader__container,
+.ontario-application-subheader__menu-container,
+.ontario-application-subheader__menu {
 	display: flex;
 	align-items: center;
-	font-size: 1.125rem;
-	font-weight: 600;
-	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	height: 48px;
-	line-height: 1.5555555556;
-	text-align: center;
-	text-decoration: none;
-}
-.ontario-header-button:hover,
-.ontario-header-button:focus,
-.ontario-header-button:visited {
-	color: #ffffff;
-}
-
-.ontario-header-button--with-outline,
-.ontario-header-button--without-outline {
-	background-color: #1a1a1a;
-	color: #ffffff;
-}
-.ontario-header-button--with-outline:hover,
-.ontario-header-button--without-outline:hover {
-	background-color: #4d4d4d;
-}
-.ontario-header-button--with-outline:active,
-.ontario-header-button--without-outline:active {
-	background-color: #666666;
-}
-.ontario-header-button--with-outline:focus,
-.ontario-header-button--without-outline:focus {
-	background-color: #4d4d4d;
-}
-
-.ontario-header-button--with-outline {
-	border: 2px solid #ffffff;
-	margin: 0 0 0 1rem;
-	padding: 0.375rem 1rem;
-}
-.ontario-header-button--with-outline:hover {
-	border: 2px solid #ffffff;
-	color: #ffffff;
-}
-.ontario-header-button--with-outline:focus {
-	background-color: #4d4d4d;
-}
-@media screen and (max-width: 20em) {
-	.ontario-header-button--with-outline {
-		padding: 0.375rem;
-	}
+	outline: none;
 }
 
-.ontario-header__menu-toggler {
-	padding: 0.375rem 1rem;
-}
-@media screen and (max-width: 20em) {
-	.ontario-header__menu-toggler {
-		padding-left: 0.5rem;
-		padding-right: 0.5rem;
-	}
-}
-.ontario-header__menu-toggler span {
+.ontario-application-header__logo span {
 	display: flex;
 }
 @media screen and (max-width: 20em) {
-	.ontario-header__menu-toggler span {
+	.ontario-application-header__logo span:last-of-type {
 		display: none;
 	}
 }
-.ontario-header__menu-toggler svg {
+.ontario-application-header__logo svg {
 	margin-right: 6px;
 }
 @media screen and (max-width: 20em) {
-	.ontario-header__menu-toggler svg {
+	.ontario-application-header__logo svg {
 		margin-right: 0;
 	}
 }
-
-.ontario-application-navigation__container {
-	background: #ffffff;
-	position: absolute;
-	transform: translateY(-100%);
-	transition:
-		transform 0.3s ease-in-out,
-		visibility 0.1s ease;
-	width: 100%;
-	visibility: hidden;
-	z-index: 4;
-}
-@media screen and (min-width: 73em) {
-	.ontario-application-navigation__container {
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-		border-radius: 4px;
-		display: none;
-		position: absolute;
-		right: 1rem;
-		top: calc(100% - 0.5rem);
-		min-width: 290px;
-		max-width: 30%;
-		z-index: 5;
-	}
-}
-
-.ontario-application-navigation.ontario-navigation--open .ontario-application-navigation__container {
-	background: #ffffff;
-	visibility: visible;
-	transform: translateY(0);
-	transition: transform 0.4s ease-in-out;
-}
-@media screen and (min-width: 73em) {
-	.ontario-application-navigation.ontario-navigation--open .ontario-application-navigation__container {
-		transition: none;
-		display: block;
-	}
+.ontario-application-header__logo a:focus {
+	box-shadow: 0 0 0 4px #009adb;
+	transition: all 0.1s ease-in-out;
 }
 
-.ontario-application-navigation.ontario-navigation--open {
-	background: #ffffff;
-	z-index: 4;
+.ontario-application-header__logo svg,
+.ontario-application-header__logo img {
+	width: 100px;
+	height: 25px;
 }
 
-.ontario-application-navigation ul {
-	list-style: none;
-	padding: 0.5rem 0;
-	margin: 0;
-	border-bottom: 1px solid #cccccc;
+/* Menu Toggler */
+.ontario-header__menu-toggler {
+	display: flex;
+	align-items: center;
+	padding: 0.5rem 1rem;
 }
-@media screen and (min-width: 73em) {
-	.ontario-application-navigation ul {
-		border-bottom: none;
+@media screen and (max-width: 20em) {
+	.ontario-header__menu-toggler {
+		padding-left: 0.5rem;
+		padding-right: 0.5rem;
 	}
 }
-
-.ontario-application-navigation li {
-	border-top: 1px solid #cccccc;
-	padding: 0;
-	margin-bottom: 0;
-}
-.ontario-application-navigation li:last-of-type {
-	border-bottom: 1px solid #cccccc;
-}
-
-.ontario-application-navigation a {
-	color: #1a1a1a;
-	display: block;
-	font-size: 1.125rem;
-	font-weight: 600;
-	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	text-decoration: none;
-	padding: 0.6730769231rem 1.5rem;
-}
-.ontario-application-navigation a:hover {
-	text-decoration: underline;
-	background-color: #e5e5e5;
-}
-.ontario-application-navigation a:active {
-	text-decoration: underline;
-	background-color: #cccccc;
-}
-.ontario-application-navigation a:focus,
-.ontario-application-navigation a:active {
-	box-shadow: 0 0 0 4px #009adb inset;
-}
-.ontario-application-navigation a.ontario-link--active {
-	border-left: 6px solid #1a1a1a;
-	background-color: #f2f2f2;
-}
-
-/* Ontario application header overlay styles */
-.ontario-overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	background: rgba(0, 0, 0, 0.6);
-	width: 100%;
-	height: 100%;
-	z-index: 2;
+.ontario-header__menu-toggler svg {
+	margin-right: 6px;
 }
 
-/* Ontario header helper styles */
+/* Icon Container */
 .ontario-header__icon-container {
 	display: flex;
 	align-items: center;
 }
+
+.ontario-application-header__lang-toggle {
+	justify-content: flex-end;
+}
+.ontario-application-header__lang-toggle a {
+	font-size: 1rem;
+	line-height: 1.375rem;
+	height: auto;
+	outline: none;
+	padding: 0.5rem 0.75rem;
+}