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";
    @import "../../../../theme/assets/styles/sass/variables-import";
    @import "../../../../theme/assets/styles/sass/tools/focus.placeholder";
    
    $ontario-search-input-padding: 7.2rem;
    $ontario-search-input-padding--mobile: 6.4rem;
    
    $ontario-header-logo-width: 180px;
    $ontario-header-logo-width--mobile: 45px;
    
    .ontario-header {
        position: relative;
        overflow: hidden;
        z-index: 5;
        background-color: $ontario-colour-black;
        color: $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-6;
            height: $spacing-6;
            margin-bottom: $spacing-0;
        }
    }
    
    .ontario-header__logo-container {
        height: $ontario-logo-height;
    }
    
    .ontario-header__logo-container a {
        display: inline-block;
        height: 100%;
    
        &:focus {
            box-shadow: 0 0 0 $global-radius $ontario-colour-focus;
        }
    }
    
    .ontario-header__logo-container {
        img {
            width: $ontario-header-logo-width--mobile;
            height: $ontario-logo-height;
    
            @media screen and (min-width: $small-breakpoint) {
                width: $ontario-header-logo-width;
                height: $ontario-logo-height;
            }
        }
    }
    
    /* Header search styles */
    .ontario-header__search-container {
        position: relative;
        display: none;
    
        @media screen and (min-width: $medium-breakpoint) {
            display: flex;
        }
    
        @media screen and (min-width: $small-breakpoint) {
            padding-right: math.div(2rem, 2);
        }
    }
    
    .ontario-header__search-input.ontario-input {
        border-width: 0;
        margin-bottom: $spacing-0;
        height: $standard-input-height;
        padding-left: $spacing-3;
        padding-right: $ontario-search-input-padding;
    
        &:invalid + input[type="reset"] {
            display: none;
        }
    
        &:focus {
            & ~ .ontario-header__search-submit {
                background-color: $ontario-colour-link;
                color: $ontario-colour-white;
    
                &:hover {
                    background-color: $ontario-colour-link--hover;
                    color: $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 $ontario-colour-focus;
            -moz-box-shadow: none;
        }
    
        &:invalid:not(:focus) {
            box-shadow: none;
            -moz-box-shadow: none;
        }
    
        @media screen and (min-width: $small-breakpoint) and (max-width: $medium-breakpoint) {
            padding-left: $spacing-4;
            padding-right: $ontario-search-input-padding--mobile;
        }
    }
    
    .ontario-header__search-submit {
        border: 0;
        border-radius: 0 3px 3px 0;
        background-color: $ontario-greyscale-5;
        color: $ontario-colour-black;
    
        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: $spacing-4;
        top: $spacing-0;
        cursor: pointer;
    
        padding-left: $spacing-3;
        padding-right: $spacing-3;
    
        &:hover {
            background-color: $ontario-colour-link--hover;
            color: $ontario-colour-white;
        }
    
        &:focus {
            outline: none;
            box-shadow: 0 0 0 $global-radius $ontario-colour-focus;
            background-color: $ontario-colour-link--hover;
            color: $ontario-colour-white;
        }
    
        &:active {
            background-color: $ontario-colour-link--active;
            color: $ontario-colour-white;
        }
    
        svg {
            margin-right: $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-0;
        padding: $spacing-2;
    
        background-image: url(../icons/ontario-icons-close.svg);
        background-position: center center;
        background-repeat: no-repeat;
        background-color: transparent;
        outline: none;
        border: none;
        cursor: pointer;
    
        &:focus {
            box-shadow: 0 0 0 $global-radius $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;
    }
    
    /* Header buttons */
    .ontario-header-button {
        background-color: $ontario-colour-black;
        border: none;
        border-radius: $global-radius;
        box-sizing: border-box;
        box-shadow: none;
        color: $ontario-colour-white;
        cursor: pointer;
    
        display: flex;
        align-items: center;
    
        font-size: 1.125rem;
        font-weight: 600;
        font-family: $ontario-font-open-sans;
        height: $standard-input-height;
        line-height: math.div(14, 9);
        text-align: center;
        text-decoration: none;
    
        &:focus {
            @extend %ontario-focus;
        }
    
        &:hover,
        &:focus,
        &:visited {
            color: $ontario-colour-white;
        }
    }
    
    .ontario-header-button--with-outline,
    .ontario-header-button--without-outline {
        background-color: $ontario-colour-black;
        color: $ontario-colour-white;
    
        &:hover {
            background-color: $ontario-greyscale-70;
        }
    
        &:active {
            background-color: $ontario-greyscale-60;
        }
        &:focus {
            background-color: $ontario-greyscale-70;
        }
    }
    
    .ontario-header-button--with-outline {
        border: 2px solid $ontario-colour-white;
        margin: $spacing-0 $spacing-0 $spacing-0 $spacing-4;
        padding: math.div($spacing-3, 2) $spacing-4;
    
        &:hover {
            border: 2px solid $ontario-colour-white;
            color: $ontario-colour-white;
        }
    
        &:focus {
            background-color: $ontario-greyscale-70;
        }
    
        @media screen and (max-width: $xsmall-breakpoint) {
            padding: calc(#{$spacing-3} / 2);
        }
    }
    
    .ontario-header-button--without-outline {
        &:focus {
            background-color: $ontario-greyscale-70;
        }
    }
    
    .ontario-header__menu-toggler {
        padding: math.div($spacing-3, 2) $spacing-4;
    
        @media screen and (max-width: $xsmall-breakpoint) {
            padding-left: $spacing-2;
            padding-right: $spacing-2;
        }
    
        span {
            display: flex;
    
            @media screen and (max-width: $xsmall-breakpoint) {
                display: none;
            }
        }
    
        svg {
            margin-right: 6px;
    
            @media screen and (max-width: $xsmall-breakpoint) {
                margin-right: 0;
            }
        }
    }
    
    .ontario-header__language-toggler {
        padding: $spacing-3;
    
        abbr[title] {
            text-decoration: none;
        }
    }
    
    .ontario-header__search-toggler {
        padding: $spacing-2 $spacing-3;
        margin-left: $spacing-4;
    
        svg {
            @media screen and (min-width: $small-breakpoint) {
                margin-right: 4px;
            }
        }
    }
    
    .ontario-header__search-close {
        flex-direction: column-reverse;
        font-weight: 400;
        margin-right: $spacing-4;
        padding: math.div($spacing-5, 10) $spacing-1;
        position: relative;
        height: 60px;
        display: none;
    
        span {
            position: relative;
            top: -3px;
            font-size: 1rem;
            margin-left: $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: $small-breakpoint) {
            flex-direction: row;
            padding: $spacing-1 $spacing-2 $spacing-1 $spacing-4;
            height: $standard-input-height;
    
            span {
                top: 0;
            }
    
            svg {
                position: relative;
                width: $spacing-7;
                height: $spacing-7;
            }
        }
    }
    
    .ontario-header--search-open .ontario-header__search-close {
        @media screen and (min-width: $medium-breakpoint) {
            display: none;
        }
    }
    
    .ontario-header__search-close-container {
        display: none;
        justify-content: flex-end;
        padding-right: 0;
    
        @media screen and (max-width: $small-breakpoint) {
            width: auto;
            padding-left: 0;
            padding-right: 0;
        }
    }
    
    @media screen and (max-width: $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: 2;
    }
    
    .ontario-navigation--open {
        .ontario-overlay {
            display: block;
    
            @media screen and (min-width: $medium-breakpoint) {
                display: none;
            }
        }
    }
    
  • URL: /components/raw/ontario-header/ontario-header.scss
  • Chemin du système de fichiers: fractal/components/components/headers/ontario-header/ontario-header.scss
  • Taille: 9.2 KB
  • Contenu:
    .ontario-header-button:focus{box-shadow:0 0 0 4px #009adb;outline:4px solid transparent;transition:box-shadow .1s ease-in-out}.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:url(../icons/ontario-icons-close.svg);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}.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 0 0 1rem;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:calc(0.75rem / 2)}}.ontario-header-button--without-outline:focus{background-color:#4d4d4d}.ontario-header__menu-toggler{padding:.375rem 1rem}@media screen and (max-width: 20em){.ontario-header__menu-toggler{padding-left:.5rem;padding-right:.5rem}}.ontario-header__menu-toggler span{display:flex}@media screen and (max-width: 20em){.ontario-header__menu-toggler span{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-header__language-toggler{padding:.75rem}.ontario-header__language-toggler abbr[title]{text-decoration:none}.ontario-header__search-toggler{padding:.5rem .75rem;margin-left:1rem}@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}}
  • URL: /components/raw/ontario-header/ontario-header.css
  • Chemin du système de fichiers: fractal/components/components/headers/ontario-header/ontario-header.css
  • Taille: 6.8 KB

Quand utiliser cet en-tête

Cet en-tête 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
  • le menu ontario.ca

La barre de recherche et le menu de cet en-tête renvoient à des pages qui font partie de l’architecture de l’information du site Web principal ontario.ca.


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.
 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.

Note technique

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


Pour nous joindre

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