En-tête ontario.ca

Cet en-tête est obligatoire pour toutes les pages qui font partie du site Web principal ontario.ca.

  • Contenu: 
    @use 'sass:math';
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as placeholders;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;

$ontario-search-input-padding: 7.2rem;
$ontario-search-input-padding--mobile: 6.4rem;

$ontario-header-logo-width: 180px;
$ontario-header-logo-width--mobile: 45px;

:root {
	--header-search-reset: url(../icons/svg/ontario-icon-close.svg);
}

.ontario-header {
	position: relative;
	overflow: hidden;
	z-index: 5;
	background-color: colours.$ontario-colour-black;
	color: colours.$ontario-colour-white;
	display: flex;
	align-items: center;
	height: 5.75rem;

	.ontario-row {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	svg {
		width: spacing.$spacing-6;
		height: spacing.$spacing-6;
		margin-bottom: spacing.$spacing-0;
	}
}

.ontario-header__logo-container {
	height: globalVariables.$ontario-logo-height;
}

.ontario-header__logo-container a {
	display: inline-block;
	height: 100%;

	&:focus {
		box-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;
	}
}

.ontario-header__logo-container {
	img {
		width: $ontario-header-logo-width--mobile;
		height: globalVariables.$ontario-logo-height;

		@media screen and (min-width: breakpoints.$small-breakpoint) {
			width: $ontario-header-logo-width;
			height: globalVariables.$ontario-logo-height;
		}
	}
}

/* Header search styles */
.ontario-header__search-container {
	position: relative;
	display: none;

	@media screen and (min-width: breakpoints.$medium-breakpoint) {
		display: flex;
	}

	@media screen and (min-width: breakpoints.$small-breakpoint) {
		padding-right: math.div(2rem, 2);
	}
}

.ontario-header__search-input.ontario-input {
	border-width: 0;
	margin-bottom: spacing.$spacing-0;
	height: globalVariables.$standard-input-height;
	padding-left: spacing.$spacing-3;
	padding-right: $ontario-search-input-padding;

	&:invalid + input[type='reset'] {
		display: none;
	}

	&:focus {
		& ~ .ontario-header__search-submit {
			background-color: colours.$ontario-colour-link;
			color: colours.$ontario-colour-white;

			&:hover {
				background-color: colours.$ontario-colour-link--hover;
				color: colours.$ontario-colour-white;
			}
		}
	}

	// Remove auto X icon for IE and Edge on input area
	&::-ms-clear {
		display: none;
		width: 0;
		height: 0;
	}

	// Remove red outline around input area on Firefox
	&:invalid:focus {
		box-shadow: 0 0 0 4px colours.$ontario-colour-focus;
		-moz-box-shadow: none;
	}

	&:invalid:not(:focus) {
		box-shadow: none;
		-moz-box-shadow: none;
	}

	@media screen and (min-width: breakpoints.$small-breakpoint) and (max-width: breakpoints.$medium-breakpoint) {
		padding-left: spacing.$spacing-4;
		padding-right: $ontario-search-input-padding--mobile;
	}
}

.ontario-header__search-submit {
	border: 0;
	border-radius: 0 3px 3px 0;
	background-color: colours.$ontario-greyscale-5;
	color: colours.$ontario-colour-black;

	display: flex;
	justify-content: center;
	align-items: center;

	font-family: 'Open Sans', sans-serif;
	font-weight: fontWeights.$ontario-font-weights-semi-bold;
	font-size: 1.125rem;
	height: 100%;
	line-height: lineheight.$ontario-line-height-8;

	position: absolute;
	right: spacing.$spacing-4;
	top: spacing.$spacing-0;
	cursor: pointer;

	padding-left: spacing.$spacing-3;
	padding-right: spacing.$spacing-3;

	&:hover {
		background-color: colours.$ontario-colour-link--hover;
		color: colours.$ontario-colour-white;
	}

	&:focus {
		outline: none;
		box-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;
		background-color: colours.$ontario-colour-link--hover;
		color: colours.$ontario-colour-white;
	}

	&:active {
		background-color: colours.$ontario-colour-link--active;
		color: colours.$ontario-colour-white;
	}

	svg {
		margin-right: spacing.$spacing-0;
	}
}

input[type='reset'].ontario-header__search-reset {
	position: absolute;
	display: flex;
	align-items: center;
	top: 11px;
	right: 80px;
	height: 28px;
	width: 28px;
	color: black;
	margin: spacing.$spacing-0;
	padding: spacing.$spacing-2;

	background-image: var(--header-search-reset);
	background-position: center center;
	background-repeat: no-repeat;
	background-color: transparent;
	outline: none;
	border: none;
	cursor: pointer;

	&:focus {
		box-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;
	}
}

/* Header menu & language toggle & close search button styles */
.ontario-header__nav-right-container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: spacing.$spacing-4;

	@media screen and (min-width: breakpoints.$medium-breakpoint) {
		gap: spacing.$spacing-0;
	}
}

/* Header buttons */
.ontario-header-button {
	background-color: colours.$ontario-colour-black;
	border: none;
	border-radius: globalVariables.$global-radius;
	box-sizing: border-box;
	box-shadow: none;
	color: colours.$ontario-colour-white;
	cursor: pointer;

	display: flex;
	align-items: center;

	font-size: 1.125rem;
	font-weight: fontWeights.$ontario-font-weights-semi-bold;
	font-family: fonts.$ontario-font-open-sans;
	height: globalVariables.$standard-input-height;
	line-height: math.div(14, 9);
	text-align: center;
	text-decoration: none;

	&:focus {
		@extend %ontario-focus;
	}

	&:hover,
	&:focus,
	&:visited {
		color: colours.$ontario-colour-white;
	}
}

.ontario-header-button--with-outline,
.ontario-header-button--without-outline {
	background-color: colours.$ontario-colour-black;
	color: colours.$ontario-colour-white;

	&:hover {
		background-color: colours.$ontario-greyscale-70;
	}

	&:active {
		background-color: colours.$ontario-greyscale-60;
	}

	&:focus {
		background-color: colours.$ontario-greyscale-70;
	}
}

.ontario-header-button--with-outline {
	border: 2px solid colours.$ontario-colour-white;
	margin: spacing.$spacing-0;
	padding: math.div(spacing.$spacing-3, 2) spacing.$spacing-4;

	&:hover {
		border: 2px solid colours.$ontario-colour-white;
		color: colours.$ontario-colour-white;
	}

	&:focus {
		background-color: colours.$ontario-greyscale-70;
	}

	@media screen and (max-width: breakpoints.$xsmall-breakpoint) {
		padding: math.div(spacing.$spacing-3, 2);
	}
}

.ontario-header-button--without-outline {
	&:focus {
		background-color: colours.$ontario-greyscale-70;
	}
}

@media screen and (min-width: breakpoints.$medium-breakpoint) {
	.ontario-header-button--desktop {
		background-color: colours.$ontario-colour-black;
		margin-left: spacing.$spacing-4;
		/* padding uses !important because a more specific global or utility rule
            (from the design-system globals) overrides this component rule in some
            contexts (e.g. header variants). Using !important ensures the desktop
            button gets the intended spacing without changing upstream styles. */
		padding: spacing.$spacing-1 spacing.$spacing-1 spacing.$spacing-1 spacing.$spacing-3 !important;

		svg {
			margin-left: spacing.$spacing-1;
			/* margin-right needs !important because the general .ontario-header__menu-toggle
                svg rule applies later/in a more specific context and pushes a different value.
               The important flag forces this desktop variant to take precedence. */
			margin-right: spacing.$spacing-0 !important;
			/* width/height use !important to override global svg sizing rules coming
                from the shared variables or component defaults (these may be applied
                by a higher-specificity selector or imported partial). We constrain the
                desktop button's icon size explicitly here. */
			width: spacing.$spacing-5 !important;
			height: spacing.$spacing-5 !important;
		}

		&:hover,
		&:focus {
			background-color: colours.$ontario-greyscale-70;
		}
	}

	.ontario-header-button--desktop.ontario-header-button--with-outline {
		border: none;
	}
}

.ontario-header__menu-toggle {
	padding: math.div(spacing.$spacing-3, 2) spacing.$spacing-4;

	@media screen and (max-width: breakpoints.$xsmall-breakpoint) {
		padding-left: spacing.$spacing-2;
		padding-right: spacing.$spacing-2;
	}

	span {
		display: flex;

		@media screen and (max-width: breakpoints.$xsmall-breakpoint) {
			display: none;
		}
	}

	svg {
		margin-right: globalFunctions.px-to-rem(6);
		width: spacing.$spacing-6;
		height: spacing.$spacing-6;

		@media screen and (max-width: breakpoints.$xsmall-breakpoint) {
			margin-right: spacing.$spacing-0;
		}
	}
}

.ontario-header__language-toggler {
	padding: spacing.$spacing-1 spacing.$spacing-3;

	abbr[title] {
		text-decoration: none;
	}

	@media screen and (min-width: breakpoints.$medium-breakpoint) {
		background-color: colours.$ontario-colour-black;

		&:hover,
		&:focus {
			background-color: colours.$ontario-greyscale-70;
		}
	}
}

.ontario-header__search-toggler {
	padding: spacing.$spacing-2 spacing.$spacing-3;

	svg {
		@media screen and (min-width: breakpoints.$small-breakpoint) {
			margin-right: 4px;
		}
	}
}

.ontario-header__search-close {
	flex-direction: column-reverse;
	font-weight: fontWeights.$ontario-font-weights-normal;
	margin-right: spacing.$spacing-4;
	padding: math.div(spacing.$spacing-5, 10) spacing.$spacing-1;
	position: relative;
	height: 60px;
	display: none;

	span {
		position: relative;
		top: -3px;
		font-size: fontSizes.$ontario-font-size-standard-body-text;
		margin-left: spacing.$spacing-0;

		@media screen and (min-width: 39.9375em) {
			margin-right: 4px;
		}

		&:hover,
		&:focus {
			outline: none;
			text-decoration: none;
		}
	}

	svg {
		top: 0;
	}

	@media screen and (min-width: breakpoints.$small-breakpoint) {
		flex-direction: row;
		padding: spacing.$spacing-1 spacing.$spacing-2 spacing.$spacing-1 spacing.$spacing-4;
		height: globalVariables.$standard-input-height;

		span {
			top: 0;
		}

		svg {
			position: relative;
			width: spacing.$spacing-7;
			height: spacing.$spacing-7;
		}
	}
}

.ontario-header--search-open .ontario-header__search-close {
	@media screen and (min-width: breakpoints.$medium-breakpoint) {
		display: none;
	}
}

.ontario-header__search-close-container {
	display: none;
	justify-content: flex-end;
	padding-right: 0;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		width: auto;
		padding-left: spacing.$spacing-0;
		padding-right: spacing.$spacing-0;
	}
}

@media screen and (max-width: breakpoints.$medium-breakpoint) {
	.ontario-header--search-open .ontario-header__logo-container,
	.ontario-header--search-open .ontario-header__nav-right-container {
		display: none;
	}

	.ontario-header--search-open .ontario-header__search-close-container,
	.ontario-header--search-open .ontario-header__search-container,
	.ontario-header--search-open .ontario-header__search-close {
		display: flex;
	}
}

.ontario-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	width: 100%;
	height: 100%;
	z-index: zIndex.$ontario-z-index-above-medium;
}

.ontario-navigation--open {
	.ontario-overlay {
		display: block;

		@media screen and (min-width: breakpoints.$medium-breakpoint) {
			display: none;
		}
	}
}

.ontario-navigation--open .ontario-navigation .ontario-header-button {
	visibility: visible;
}

#ontario-search-reset {
	display: none;
}

@media screen and (min-width: breakpoints.$medium-breakpoint) {
	.ontario-icon--rotated {
		transform: rotate(180deg);
	}
}
  • URL: /components/raw/ontario-header/ontario-header.scss
  • Chemin du système de fichiers: fractal/components/components/headers-and-footers/ontario-header/ontario-header.scss
  • Taille: 12.4 KB
  • Contenu: 
    .ontario-header-button:focus{box-shadow:0 0 0 4px #009adb;outline:4px solid transparent;transition:box-shadow .1s ease-in-out}:root{--header-search-reset: url(../icons/svg/ontario-icon-close.svg)}.ontario-header{position:relative;overflow:hidden;z-index:5;background-color:#1a1a1a;color:#fff;display:flex;align-items:center;height:5.75rem}.ontario-header .ontario-row{display:flex;align-items:center;justify-content:flex-end}.ontario-header svg{width:2rem;height:2rem;margin-bottom:0}.ontario-header__logo-container{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-header__logo-container img{width:45px;height:46px}@media screen and (min-width: 40em){.ontario-header__logo-container img{width:180px;height:46px}}.ontario-header__search-container{position:relative;display:none}@media screen and (min-width: 73em){.ontario-header__search-container{display:flex}}@media screen and (min-width: 40em){.ontario-header__search-container{padding-right:1rem}}.ontario-header__search-input.ontario-input{border-width:0;margin-bottom:0;height:48px;padding-left:.75rem;padding-right:7.2rem}.ontario-header__search-input.ontario-input:invalid+input[type=reset]{display:none}.ontario-header__search-input.ontario-input:focus~.ontario-header__search-submit{background-color:#06c;color:#fff}.ontario-header__search-input.ontario-input:focus~.ontario-header__search-submit:hover{background-color:#00478f;color:#fff}.ontario-header__search-input.ontario-input::-ms-clear{display:none;width:0;height:0}.ontario-header__search-input.ontario-input:invalid:focus{box-shadow:0 0 0 4px #009adb;-moz-box-shadow:none}.ontario-header__search-input.ontario-input:invalid:not(:focus){box-shadow:none;-moz-box-shadow:none}@media screen and (min-width: 40em)and (max-width: 73em){.ontario-header__search-input.ontario-input{padding-left:1rem;padding-right:6.4rem}}.ontario-header__search-submit{border:0;border-radius:0 3px 3px 0;background-color:#f2f2f2;color:#1a1a1a;display:flex;justify-content:center;align-items:center;font-family:"Open Sans",sans-serif;font-weight:600;font-size:1.125rem;height:100%;line-height:1.56;position:absolute;right:1rem;top:0;cursor:pointer;padding-left:.75rem;padding-right:.75rem}.ontario-header__search-submit:hover{background-color:#00478f;color:#fff}.ontario-header__search-submit:focus{outline:none;box-shadow:0 0 0 4px #009adb;background-color:#00478f;color:#fff}.ontario-header__search-submit:active{background-color:#002142;color:#fff}.ontario-header__search-submit svg{margin-right:0}input[type=reset].ontario-header__search-reset{position:absolute;display:flex;align-items:center;top:11px;right:80px;height:28px;width:28px;color:#000;margin:0;padding:.5rem;background-image:var(--header-search-reset);background-position:center center;background-repeat:no-repeat;background-color:transparent;outline:none;border:none;cursor:pointer}input[type=reset].ontario-header__search-reset:focus{box-shadow:0 0 0 4px #009adb}.ontario-header__nav-right-container{display:flex;align-items:center;justify-content:flex-end;gap:1rem}@media screen and (min-width: 73em){.ontario-header__nav-right-container{gap:0}}.ontario-header-button{background-color:#1a1a1a;border:none;border-radius:4px;box-sizing:border-box;box-shadow:none;color:#fff;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:#fff}.ontario-header-button--with-outline,.ontario-header-button--without-outline{background-color:#1a1a1a;color:#fff}.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:#666}.ontario-header-button--with-outline:focus,.ontario-header-button--without-outline:focus{background-color:#4d4d4d}.ontario-header-button--with-outline{border:2px solid #fff;margin:0;padding:.375rem 1rem}.ontario-header-button--with-outline:hover{border:2px solid #fff;color:#fff}.ontario-header-button--with-outline:focus{background-color:#4d4d4d}@media screen and (max-width: 20em){.ontario-header-button--with-outline{padding:.375rem}}.ontario-header-button--without-outline:focus{background-color:#4d4d4d}@media screen and (min-width: 73em){.ontario-header-button--desktop{background-color:#1a1a1a;margin-left:1rem;padding:.25rem .25rem .25rem .75rem !important}.ontario-header-button--desktop svg{margin-left:.25rem;margin-right:0 !important;width:1.5rem !important;height:1.5rem !important}.ontario-header-button--desktop:hover,.ontario-header-button--desktop:focus{background-color:#4d4d4d}.ontario-header-button--desktop.ontario-header-button--with-outline{border:none}}.ontario-header__menu-toggle{padding:.375rem 1rem}@media screen and (max-width: 20em){.ontario-header__menu-toggle{padding-left:.5rem;padding-right:.5rem}}.ontario-header__menu-toggle span{display:flex}@media screen and (max-width: 20em){.ontario-header__menu-toggle span{display:none}}.ontario-header__menu-toggle svg{margin-right:.375rem;width:2rem;height:2rem}@media screen and (max-width: 20em){.ontario-header__menu-toggle svg{margin-right:0}}.ontario-header__language-toggler{padding:.25rem .75rem}.ontario-header__language-toggler abbr[title]{text-decoration:none}@media screen and (min-width: 73em){.ontario-header__language-toggler{background-color:#1a1a1a}.ontario-header__language-toggler:hover,.ontario-header__language-toggler:focus{background-color:#4d4d4d}}.ontario-header__search-toggler{padding:.5rem .75rem}@media screen and (min-width: 40em){.ontario-header__search-toggler svg{margin-right:4px}}.ontario-header__search-close{flex-direction:column-reverse;font-weight:400;margin-right:1rem;padding:.15rem .25rem;position:relative;height:60px;display:none}.ontario-header__search-close span{position:relative;top:-3px;font-size:1rem;margin-left:0}@media screen and (min-width: 39.9375em){.ontario-header__search-close span{margin-right:4px}}.ontario-header__search-close span:hover,.ontario-header__search-close span:focus{outline:none;text-decoration:none}.ontario-header__search-close svg{top:0}@media screen and (min-width: 40em){.ontario-header__search-close{flex-direction:row;padding:.25rem .5rem .25rem 1rem;height:48px}.ontario-header__search-close span{top:0}.ontario-header__search-close svg{position:relative;width:2.5rem;height:2.5rem}}@media screen and (min-width: 73em){.ontario-header--search-open .ontario-header__search-close{display:none}}.ontario-header__search-close-container{display:none;justify-content:flex-end;padding-right:0}@media screen and (max-width: 40em){.ontario-header__search-close-container{width:auto;padding-left:0;padding-right:0}}@media screen and (max-width: 73em){.ontario-header--search-open .ontario-header__logo-container,.ontario-header--search-open .ontario-header__nav-right-container{display:none}.ontario-header--search-open .ontario-header__search-close-container,.ontario-header--search-open .ontario-header__search-container,.ontario-header--search-open .ontario-header__search-close{display:flex}}.ontario-overlay{display:none;position:fixed;top:0;left:0;background:rgba(0,0,0,.6);width:100%;height:100%;z-index:2}.ontario-navigation--open .ontario-overlay{display:block}@media screen and (min-width: 73em){.ontario-navigation--open .ontario-overlay{display:none}}.ontario-navigation--open .ontario-navigation .ontario-header-button{visibility:visible}#ontario-search-reset{display:none}@media screen and (min-width: 73em){.ontario-icon--rotated{transform:rotate(180deg)}}
  • URL: /components/raw/ontario-header/ontario-header.css
  • Chemin du système de fichiers: fractal/components/components/headers-and-footers/ontario-header/ontario-header.css
  • Taille: 7.8 KB

Quand utiliser cet en-tête

L’en-tête ontario.ca est utilisé uniquement pour les pages qui sont :

  • créées sur le système de gestion du contenu de ontario.ca
  • intégrées à l’environnement du site Web principal ontario.ca

L’utilisation de cet en-tête est très spécifique. Dans la plupart des cas, si vous créez une application ou un site secondaire, vous devriez utiliser l’en-tête pour les applications.

Caractéristiques

L’en-tête ontario.ca comporte :

  • une barre noire
  • le logo de l’Ontario
  • une option de bascule de langue
  • la barre de recherche ontario.ca
  • un menu d’ouverture de session

Un menu de navigation par sujet sur ontario.caLes outils de recherche et de navigation par sujet dans l’en-tête renvoient à des pages qui font partie de l’architecture de l’information du site Web principal ontario.ca.

Le menu d’ouverture de session dans cet en-tête mène aux pages d’ouverture de session de certains services du gouvernement de l’Ontario.

Pratiques exemplaires

À faire

  • Créer un lien pour relier le logo de l’Ontario dans la barre noire à la page de renvoi en anglais ou en français du site ontario.ca (selon la langue de la page).
  • S’assurer que l’option de bascule de langue se trouve dans la barre noire.
  • S’assurer que l’option de bascule de langue vous dirige vers la page miroir dans l’autre langue.

À ne pas faire

  • Personnaliser l’en-tête ontario.ca de quelque façon que ce soit.
  • Copier le style de l’en-tête ontario.ca et personnaliser la fonction de recherche ou le menu.

Exemple

Diagramme de l’en-tête ontario.ca sur un ordinateur de bureau illustrant le logo de l’Ontario, la barre de recherche ontario.ca, l’option de bascule de langue et le menu ontario.ca.

Spécifications techniques

Note technique

L’en-tête Ontario.ca nécessite les deux fichiers JavaScript suivants :

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.