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

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

@@ -41,9 +41,10 @@
 /* -------------------------------
     Focus placeholder
 --------------------------------- */
+.ontario-header-button:focus,
+.ontario-header-button:focus-visible,
 .ontario-navigation a:focus,
 .ontario-navigation a:active,
-.ontario-header-button:focus,
 .ontario-input:focus,
 .ontario-input:active {
 	box-shadow: 0 0 0 4px #009adb;
@@ -54,6 +55,12 @@
 /* -------------------------------
     Global line-height variables
 --------------------------------- */
+/* -------------------------------
+    Global letter-spacing variables
+--------------------------------- */
+/* -------------------------------
+    Global typography variables
+--------------------------------- */
 /*
 *  Grid functions
 *
@@ -1638,12 +1645,6 @@
 		display: block !important;
 	}
 }
-/* -------------------------------
-    Global letter-spacing variables
---------------------------------- */
-/* -------------------------------
-    Global typography variables
---------------------------------- */
 .ontario-input {
 	border: 2px solid rgb(25.5, 25.5, 25.5);
 	border-radius: 4px;
@@ -1687,99 +1688,120 @@
 	max-width: 41ex;
 }
 
-:host {
-	--header-search-reset: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);
-}
-
-.ontario-header__container {
-	position: relative;
-	z-index: 5;
+.ontario-navigation {
+	position: absolute;
+	width: 100%;
 }
 @media screen and (min-width: 73em) {
-	.ontario-header__container {
-		z-index: 1;
+	.ontario-navigation {
+		position: relative;
+		max-width: 72rem;
+		width: auto;
+		margin: 0 auto;
 	}
 }
 
-.ontario-icon-container {
-	display: flex;
-	align-items: center;
-}
-
-.ontario-icon-container-reset {
-	display: flex;
-	align-items: center;
-}
-.ontario-icon-container-reset svg {
-	fill: rgb(25.5, 25.5, 25.5);
+.ontario-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	background: rgba(0, 0, 0, 0.6);
+	width: 100%;
+	z-index: 2;
 }
 
-.ontario-subheader__menu a {
+.ontario-header-button {
+	background-color: rgb(25.5, 25.5, 25.5);
+	border: none;
 	border-radius: 4px;
 	color: #ffffff;
-	display: inline;
-	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	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.4375rem;
-	padding: 0.75rem 1rem;
+	line-height: 1.5;
+	text-align: center;
 	text-decoration: none;
-	white-space: nowrap;
 }
-.ontario-subheader__menu a.ontario-link--active {
-	border-radius: 4px 4px 0 0;
-	border-bottom: 4px solid #ffffff;
+
+.ontario-header-button--with-outline {
+	border: 2px solid #ffffff;
+	margin: 0 0 0 1rem;
+	padding: 0.375rem 1rem;
 }
-.ontario-subheader__menu a:hover {
-	background-color: #666666;
-	color: #ffffff;
+
+:host {
+	--header-search-reset: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);
 }
-.ontario-subheader__menu a:active {
+
+.ontario-header {
+	position: relative;
+	overflow: hidden;
+	z-index: 4;
 	background-color: rgb(25.5, 25.5, 25.5);
+	color: #ffffff;
+	display: flex;
+	align-items: center;
+	height: 5.75rem;
 }
-.ontario-subheader__menu a:focus {
-	box-shadow: 0 0 0 4px #009adb;
-	outline: 4px solid transparent;
-	transition: all 0.1s ease-in-out;
+.ontario-header .ontario-row {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}
+.ontario-header svg {
+	width: 2rem;
+	height: 2rem;
+	margin-bottom: 0;
 }
 
-.ontario-navigation {
-	position: absolute;
-	width: 100%;
+.ontario-header__container {
+	position: relative;
+	z-index: 4;
 }
 @media screen and (min-width: 73em) {
-	.ontario-navigation {
-		position: relative;
-		max-width: 72rem;
-		width: auto;
-		margin: 0 auto;
+	.ontario-header__container {
+		z-index: 1;
 	}
 }
 
-.nav-ul-closed {
-	background: white;
-	position: absolute;
-	transform: translateY(-100%);
-	transition:
-		transform 0.3s ease-in-out,
-		visibility 0.1s ease;
-	width: 100%;
-	visibility: hidden;
-	z-index: 4;
+.ontario-header__logo-container {
+	height: 46px;
+}
+.ontario-header__logo-container a {
+	display: inline-block;
+	height: 100%;
+	outline: none;
+}
+.ontario-header__logo-container a:focus {
+	box-shadow: 0 0 0 4px #009adb;
+}
+.ontario-header__logo-container svg,
+.ontario-header__logo-container img {
+	width: 45px;
+	height: 46px;
+}
+@media screen and (min-width: 40em) {
+	.ontario-header__logo-container svg,
+	.ontario-header__logo-container img {
+		width: 180px;
+	}
 }
 
-.nav-ul-opened {
+.ontario-header-button:hover,
+.ontario-header-button:focus,
+.ontario-header-button:visited {
+	color: #ffffff;
+}
+
+.ontario-navigation--open {
 	visibility: visible;
 	transform: translateY(0);
 	transition: transform 0.4s ease-in-out;
 }
-@media screen and (min-width: 73em) {
-	.nav-ul-opened {
-		z-index: 5;
-	}
-}
-
 .ontario-navigation ul {
 	list-style: none;
 	padding: 0.5rem 0;
@@ -1791,7 +1813,6 @@
 		border-bottom: none;
 	}
 }
-
 .ontario-navigation li {
 	border-top: 1px solid #cccccc;
 	padding: 0;
@@ -1800,7 +1821,6 @@
 .ontario-navigation li:last-of-type {
 	border-bottom: 1px solid #cccccc;
 }
-
 .ontario-navigation a {
 	color: rgb(25.5, 25.5, 25.5);
 	display: block;
@@ -1827,54 +1847,17 @@
 	background-color: rgb(242.25, 242.25, 242.25);
 }
 
-.ontario-overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	background: rgba(0, 0, 0, 0.6);
-	width: 100%;
-	height: 100%;
-	z-index: 2;
-}
-
-.ontario-header {
-	position: relative;
-	overflow: hidden;
-	z-index: 5;
-	background-color: rgb(25.5, 25.5, 25.5);
-	color: #ffffff;
+.ontario-icon-container {
 	display: flex;
 	align-items: center;
-	height: 5.75rem;
 }
-.ontario-header .ontario-row {
+
+.ontario-icon-container-reset {
 	display: flex;
 	align-items: center;
-	justify-content: flex-end;
-}
-.ontario-header svg {
-	width: 2rem;
-	height: 2rem;
-	margin-bottom: 0;
-}
-
-.ontario-header__logo-container a {
-	display: inline-flex;
-	height: 100%;
-	outline: none;
-}
-.ontario-header__logo-container a:focus {
-	box-shadow: 0 0 0 4px #009adb;
 }
-.ontario-header__logo-container a img {
-	width: 45px;
-	height: 46px;
-}
-@media screen and (min-width: 40em) {
-	.ontario-header__logo-container a img {
-		width: 180px;
-		height: 46px;
-	}
+.ontario-icon-container-reset svg {
+	fill: rgb(25.5, 25.5, 25.5);
 }
 
 .ontario-navigation__container.ontario-navigation--open {
@@ -1884,7 +1867,7 @@
 }
 @media screen and (min-width: 73em) {
 	.ontario-navigation__container.ontario-navigation--open {
-		z-index: 5;
+		z-index: 4;
 	}
 }
 
@@ -1911,28 +1894,6 @@
 	background-color: rgb(25.5, 25.5, 25.5);
 }
 
-.ontario-header__logo-container {
-	height: 46px;
-}
-.ontario-header__logo-container svg {
-	width: 45px;
-	height: 46px;
-}
-@media screen and (min-width: 40em) {
-	.ontario-header__logo-container svg {
-		width: 180px;
-		height: 46px;
-	}
-}
-
-.ontario-header__logo-container a {
-	display: inline-block;
-	height: 100%;
-}
-.ontario-header__logo-container a:focus {
-	box-shadow: 0 0 0 4px #009adb;
-}
-
 /* Ontario heaader search styles */
 .ontario-header__search-container {
 	position: relative;
@@ -2070,58 +2031,6 @@ input[type='reset'].ontario-header__search-reset:focus {
 	justify-content: flex-end;
 }
 
-/* Header buttons */
-.ontario-header-button {
-	background-color: rgb(25.5, 25.5, 25.5);
-	border: none;
-	border-radius: 4px;
-	box-sizing: border-box;
-	box-shadow: none;
-	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.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: rgb(25.5, 25.5, 25.5);
-	color: #ffffff;
-}
-.ontario-header-button--with-outline:hover,
-.ontario-header-button--without-outline:hover {
-	background-color: rgb(76.5, 76.5, 76.5);
-}
-.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: rgb(76.5, 76.5, 76.5);
-}
-.ontario-header-button--with-outline:active,
-.ontario-header-button--without-outline:active {
-	background-color: #666666;
-}
-
-.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;
@@ -2260,57 +2169,6 @@ input[type='reset'].ontario-header__search-reset:focus {
 		display: flex;
 	}
 }
-/* Ontario header navigation styles */
-.ontario-navigation {
-	position: absolute;
-	width: 100%;
-}
-@media screen and (min-width: 73em) {
-	.ontario-navigation {
-		position: relative;
-		max-width: 72rem;
-		width: auto;
-		margin: 0 auto;
-	}
-}
-
-.ontario-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-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-navigation ul {
-	list-style: none;
-	padding: 0.5rem 0;
-	margin: 0;
-	border-bottom: 1px solid #cccccc;
-}
-@media screen and (min-width: 73em) {
-	.ontario-navigation ul {
-		border-bottom: none;
-	}
-}
-
 .ontario-header-navigation__menu-item {
 	border-top: 1px solid #cccccc;
 	padding: 0;
@@ -2358,39 +2216,8 @@ input[type='reset'].ontario-header__search-reset:focus {
 	}
 }
 
-/* Ontario 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 helper styles */
 .ontario-header__icon-container {
 	display: flex;
 	align-items: center;
 }
-
-.ontario-navigation .ontario-header-button {
-	visibility: hidden;
-	position: absolute;
-	right: 1rem;
-	z-index: 6;
-}
-.ontario-navigation .ontario-header-button svg {
-	width: 2rem;
-	height: 2rem;
-	margin-bottom: 0;
-}
-
-.ontario-navigation--open .ontario-navigation .ontario-header-button {
-	visibility: visible;
-}
-
-.ontario-header + .ontario-navigation .ontario-header-button {
-	top: -4.35rem;
-}

package/dist/collection/components/ontario-header/ontario-header.interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"ontario-header.interface.js","sourceRoot":"","sources":["../../../src/components/ontario-header/ontario-header.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { DrupalMenuMachineName } from './ontario-header.enum';\n\nexport interface MenuItem {\n\ttitle: string;\n\thref: string;\n\tlinkIsActive?: boolean;\n\tonClickHandler?: (event: Event) => void;\n}\n\nexport interface ApplicationHeaderInfo {\n\ttitle: string;\n\thref?: string;\n\tmaxSubheaderDesktopLinks?: number;\n\tmaxSubheaderTabletLinks?: number;\n\tmaxSubheaderMobileLinks?: number;\n}\n\nexport interface LanguageToggleOptions {\n\tenglishLink: string;\n\tfrenchLink: string;\n}\n\nexport interface OntarioMenuItems {\n\t'href': string;\n\t'title': string;\n\t'drupal-menu-hierarchy': string[];\n\t'drupal-menu-machine-name': DrupalMenuMachineName[];\n}\n\nexport type OntarioHeaderType = 'application' | 'ontario' | 'serviceOntario';\n"]}
+{"version":3,"file":"ontario-header.interface.js","sourceRoot":"","sources":["../../../src/components/ontario-header/ontario-header.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { DrupalMenuMachineName } from './ontario-header.enum';\n\nexport interface ApplicationHeaderInfo {\n\ttitle: string;\n\thref?: string;\n\tmaxSubheaderLinks?: maxSubheaderLinks;\n}\n\ninterface maxSubheaderLinks {\n\tdesktop?: number;\n\ttablet?: number;\n\tmobile?: number;\n}\n\nexport interface LanguageToggleOptions {\n\tenglishLink: string;\n\tfrenchLink: string;\n}\n\nexport interface OntarioMenuItems {\n\t'href': string;\n\t'title': string;\n\t'drupal-menu-hierarchy': string[];\n\t'drupal-menu-machine-name': DrupalMenuMachineName[];\n}\n\nexport type OntarioHeaderType = 'application' | 'ontario' | 'serviceOntario';\n"]}