The page templates and design patterns below comprise a reference implementation of the Canada.ca design system, including the mandatory requirement of the Content and Information Architecture (C&IA) Specification. Government of Canada departments and agencies can contribute additional patterns and templates via GCWeb github repository.
diff --git a/index-fr.md b/index-fr.md index 299f1644d..8643ecb89 100644 --- a/index-fr.md +++ b/index-fr.md @@ -1,7 +1,7 @@ --- title: GCWeb, le thème WET-BOEW de Canada.ca altLangPage: index-en.html -dateModified: 2022-09-15 +dateModified: 2022-09-22 description: "Page d'accueil décrivant l'ensemble des composants du thème de Canada.ca, nommé GCWeb." layout: no-container language: fr @@ -18,7 +18,7 @@ css:Les gabarits et les conceptions communes si dessous sont une référence d'implémentation du Système de conception de Canada.ca, incluant les exigences obligatoire de la spécifications du contenu et de l’architecture de l'information (C&AI) pour Canada.ca. Les ministères et organisme du gouvernement du Canada peuvent y contribuer en publiant leur modèle et leur conception commune via le dépôt github de GCWeb.
diff --git "a/m\303\251li-m\303\251lo/2022-09-svgimagemap/meta.md" "b/m\303\251li-m\303\251lo/2022-09-svgimagemap/meta.md" index 2888a6eaa..3083937ae 100644 --- "a/m\303\251li-m\303\251lo/2022-09-svgimagemap/meta.md" +++ "b/m\303\251li-m\303\251lo/2022-09-svgimagemap/meta.md" @@ -40,7 +40,7 @@ implementationPlan: todos: - Review code and governance to balance optimal accessibility and ease of implementation for users. - - Review and change the CSS class name for something more meaningful: "st0" is not descriptive enougth of what it is and how it should be applied to the SVG. + - Review and change the CSS class name for something more meaningful: st0 is not descriptive enougth of what it is and how it should be applied to the SVG. - Contextualisation of the CSS classes to limit their application to this component/feature only. - Review color schemes: They should match the sequence of colors used by the charts and graphs. - Revise in order to provide more details for implementation instructions: Like how to organize the sibling styles and how to group them with the anchor elements. diff --git "a/m\303\251li-m\303\251lo/compilation-gel\303\251/2022-06-banff.css" "b/m\303\251li-m\303\251lo/compilation-gel\303\251/2022-06-banff.css" new file mode 100644 index 000000000..ac6f3741c --- /dev/null +++ "b/m\303\251li-m\303\251lo/compilation-gel\303\251/2022-06-banff.css" @@ -0,0 +1,352 @@ +@charset "utf-8"; +/*! + * @title Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) + * @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html + * v11.3.1 - 2022-09-15 + * + */ +ul[class*=cnjnctn-type-] { + list-style:none; + padding-left:0; +} +[class*=cnjnctn-type-] { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + margin-bottom: 15px; + margin-left: 5px; + margin-right: 0px; + margin-top: 15px; + min-height: 60px; + position: relative; +} +[class*=cnjnctn-type-] [class*=cnjnctn-col]:not(:first-child):after { + background-image: linear-gradient(to bottom, #6f6f6f, #6f6f6f); + background-size: 3px; + content: ' '; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 3px; +} +[class*=cnjnctn-type-] [class*=cnjnctn-col] { + padding-left: 15px; + padding-right: 15px; + width: 100%; +} +[class*=cnjnctn-type-] [class*=cnjnctn-col]> :first-child:not([class*=mrgn-tp-]) { + margin-top: 0px; +} +[class*=cnjnctn-type-] [class*=cnjnctn-col]> :last-child:not([class*=mrgn-bttm-]) { + margin-bottom: 0px; +} +[class*=cnjnctn-type-] [class*=cnjnctn-col]:not(:last-child) { + margin-bottom: 30px; + margin-right: 30px; +} +[class*=cnjnctn-type-] [class*=cnjnctn-col]:not(:first-child) { + margin-top: 30px; +} +[class*=cnjnctn-type-] [class*=cnjnctn-col]:not(:first-child):before { + border-color: #6f6f6f; + border-style: solid; + box-sizing: content-box; + font-size: 16px; + font-weight: 600; + height: 30px; + left: auto; + line-height: 28px; + margin-top: -53px; + padding: 4px; + position: absolute; + text-align: center; + width: 30px; +} +.cnjnctn-type-or [class*=cnjnctn-col]:not(:first-child):before { + border-radius: 50%; + border-width: 3px; +} +.cnjnctn-type-and [class*=cnjnctn-col]:not(:first-child):before { + border-width: 0px 3px 0px 3px; +} +html:lang(en) .cnjnctn-type-and [class*=cnjnctn-col]:not(:first-child):before { + content: "and"; +} +html:lang(fr) .cnjnctn-type-and [class*=cnjnctn-col]:not(:first-child):before { + content: "et"; +} +html:lang(en) .cnjnctn-type-or [class*=cnjnctn-col]:not(:first-child):before { + content: "or"; +} +html:lang(fr) .cnjnctn-type-or [class*=cnjnctn-col]:not(:first-child):before { + content: "ou"; +} +[class*=cnjnctn-type-] .cnjnctn-col-90 { + flex-basis: 90% +} +[class*=cnjnctn-type-] .cnjnctn-col-80 { + flex-basis: 80% +} +[class*=cnjnctn-type-] .cnjnctn-col-75 { + flex-basis: 75% +} +[class*=cnjnctn-type-] .cnjnctn-col-70 { + flex-basis: 70% +} +[class*=cnjnctn-type-] .cnjnctn-col-60 { + flex-basis: 60% +} +[class*=cnjnctn-type-] .cnjnctn-col-50 { + flex-basis: 50% +} +[class*=cnjnctn-type-] .cnjnctn-col-40 { + flex-basis: 40% +} +[class*=cnjnctn-type-] .cnjnctn-col-30 { + flex-basis: 30% +} +[class*=cnjnctn-type-] .cnjnctn-col-25 { + flex-basis: 25% +} +[class*=cnjnctn-type-] .cnjnctn-col-20 { + flex-basis: 20% +} +[class*=cnjnctn-type-].cnjnctn-xs { + flex-direction: row; + margin-left: -15px; + margin-right: -15px; +} +[class*=cnjnctn-type-].cnjnctn-xs [class*=cnjnctn-col]:not(:first-child):after { + background-image: linear-gradient(to bottom, #6f6f6f 6px, #6f6f6f 6px, rgba(0,0,0,0) 6px, rgba(0,0,0,0) 46px, #6f6f6f 46px, #6f6f6f 46px); +} +[class*=cnjnctn-type-].cnjnctn-xs [class*=cnjnctn-col]:not(:first-child) { + margin-left: 30px; + position: relative; +} +[class*=cnjnctn-type-].cnjnctn-xs [class*=cnjnctn-col]:not(:first-child):after { + margin-left: -31px; +} +.cnjnctn-type-or.cnjnctn-xs [class*=cnjnctn-col]:not(:first-child):before { + margin-left: -67px; +} +.cnjnctn-type-and.cnjnctn-xs [class*=cnjnctn-col]:not(:first-child):before { + margin-left: -65.5px; +} +[class*=cnjnctn-type-].cnjnctn-xs [class*=cnjnctn-col]:not(:first-child):before { + margin-top: 4px; +} +[class*=cnjnctn-type-].cnjnctn-xs [class*=cnjnctn-col]:not(:last-child) { + margin-bottom: 0px; +} +[class*=cnjnctn-type-].cnjnctn-xs [class*=cnjnctn-col]:not(:first-child) { + margin-top: 0px; +} +.cnjnctn-type-and.cnjnctn-xs [class*=cnjnctn-col]:not(:first-child):before { + border-width: 3px 0px 3px 0px; +} + +@media all and (min-width: 768px) { +[class*=cnjnctn-type-].cnjnctn-sm { + border-left: 0px solid transparent; + flex-direction: row; + margin-left: -15px; + margin-right: -15px; +} +[class*=cnjnctn-type-].cnjnctn-sm [class*=cnjnctn-col]:not(:first-child) { + margin-left: 30px; + position: relative; +} +[class*=cnjnctn-type-].cnjnctn-sm [class*=cnjnctn-col]:not(:first-child):after { + margin-left: -31px; +} +.cnjnctn-type-or.cnjnctn-sm [class*=cnjnctn-col]:not(:first-child):before { + margin-left: -67px; +} +.cnjnctn-type-and.cnjnctn-sm [class*=cnjnctn-col]:not(:first-child):before { + margin-left: -65.5px; +} +[class*=cnjnctn-type-].cnjnctn-sm [class*=cnjnctn-col]:not(:first-child):before { + margin-top: 4px; +} +[class*=cnjnctn-type-].cnjnctn-sm [class*=cnjnctn-col]:not(:last-child) { + margin-bottom: 0px; +} +[class*=cnjnctn-type-].cnjnctn-sm [class*=cnjnctn-col]:not(:first-child) { + margin-top: 0px; +} +[class*=cnjnctn-type-].cnjnctn-sm [class*=cnjnctn-col]:not(:first-child):after { + background-image: linear-gradient(to bottom, #6f6f6f 6px, #6f6f6f 6px, rgba(0,0,0,0) 6px, rgba(0,0,0,0) 46px, #6f6f6f 46px, #6f6f6f 46px); +} +.cnjnctn-type-and.cnjnctn-sm [class*=cnjnctn-col]:not(:first-child):before { + border-width: 3px 0px 3px 0px; +} +} + +@media all and (min-width: 992px) { +[class*=cnjnctn-type-].cnjnctn-md { + border-left: 0px solid transparent; + flex-direction: row; + margin-left: -15px; + margin-right: -15px; +} +[class*=cnjnctn-type-].cnjnctn-md [class*=cnjnctn-col]:not(:first-child) { + margin-left: 30px; + position: relative; +} +[class*=cnjnctn-type-].cnjnctn-md [class*=cnjnctn-col]:not(:first-child):after { + margin-left: -31px; +} +.cnjnctn-type-or.cnjnctn-md [class*=cnjnctn-col]:not(:first-child):before { + margin-left: -67px; +} +.cnjnctn-type-and.cnjnctn-md [class*=cnjnctn-col]:not(:first-child):before { + margin-left: -65.5px; +} +[class*=cnjnctn-type-].cnjnctn-md [class*=cnjnctn-col]:not(:first-child):before { + margin-top: 4px; +} +[class*=cnjnctn-type-].cnjnctn-md [class*=cnjnctn-col]:not(:last-child) { + margin-bottom: 0px; +} +[class*=cnjnctn-type-].cnjnctn-md [class*=cnjnctn-col]:not(:first-child) { + margin-top: 0px; +} +[class*=cnjnctn-type-].cnjnctn-md [class*=cnjnctn-col]:not(:first-child):after { + background-image: linear-gradient(to bottom, #6f6f6f 6px, #6f6f6f 6px, rgba(0,0,0,0) 6px, rgba(0,0,0,0) 46px, #6f6f6f 46px, #6f6f6f 46px); +} +.cnjnctn-type-and.cnjnctn-md [class*=cnjnctn-col]:not(:first-child):before { + border-width: 3px 0px 3px 0px; +} +} + +@media all and (min-width: 1200px) { +[class*=cnjnctn-type-].cnjnctn-lg { + border-left: 0px solid transparent; + flex-direction: row; + margin-left: -15px; + margin-right: -15px; +} +[class*=cnjnctn-type-].cnjnctn-lg [class*=cnjnctn-col]:not(:first-child) { + margin-left: 30px; + position: relative; +} +[class*=cnjnctn-type-].cnjnctn-lg [class*=cnjnctn-col]:not(:first-child):after { + margin-left: -31px; +} +.cnjnctn-type-or.cnjnctn-lg [class*=cnjnctn-col]:not(:first-child):before { + margin-left: -67px; +} +.cnjnctn-type-and.cnjnctn-lg [class*=cnjnctn-col]:not(:first-child):before { + margin-left: -65.5px; +} +[class*=cnjnctn-type-].cnjnctn-lg [class*=cnjnctn-col]:not(:first-child):before { + margin-top: 4px; +} +[class*=cnjnctn-type-].cnjnctn-lg [class*=cnjnctn-col]:not(:last-child) { + margin-bottom: 0px; +} +[class*=cnjnctn-type-].cnjnctn-lg [class*=cnjnctn-col]:not(:first-child) { + margin-top: 0px; +} +[class*=cnjnctn-type-].cnjnctn-lg [class*=cnjnctn-col]:not(:first-child):after { + background-image: linear-gradient(to bottom, #6f6f6f 6px, #6f6f6f 6px, rgba(0,0,0,0) 6px, rgba(0,0,0,0) 46px, #6f6f6f 46px, #6f6f6f 46px); +} +.cnjnctn-type-and.cnjnctn-lg [class*=cnjnctn-col]:not(:first-child):before { + border-width: 3px 0px 3px 0px; +} +} + +ol.lst-stps, .lst-stps { + counter-reset: item; + padding-left: 0; +} +ol.lst-stps>li, .lst-stps>.lst-stps-itm { + counter-increment: item; +} +ol.lst-stps>li, ol.lst-stps-sub>li, .lst-stps .lst-stps-itm { + list-style-type: none; + margin-top: 30px; + position: relative; + padding-left: 60px; + padding-right: 15px; + min-height: 2.2em; +} +ol.lst-stps li>*:last-child, .lst-stps .lst-stps-itm>*:last-child, .lst-stps-sub>.lst-stps-itm:last-child { + margin-bottom: 0px; +} +ol.lst-stps>li:before, .lst-stps .lst-stps-itm:before { + content: counter(item); +} +ol.lst-stps li>ol.lst-stps-sub, .lst-stps .lst-stps-itm>.lst-stps-sub { + counter-reset: subitem; +} +ol.lst-stps li>ol.lst-stps-sub { + margin-left: -35px; +} +ol.lst-stps li:before, .lst-stps .lst-stps-itm:before { + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + border: 3px solid #26374a; + background-color: #fff; + float: left; + position: absolute; + box-sizing: content-box; + line-height: 2.2; + text-align: center; + font-weight: 600; + height: 2.2em; + width: 2.2em; + left: 0px; + margin-top: -8px; +} +ol.lst-stps>li>ol.lst-stps-sub>li:before, .lst-stps>.lst-stps-itm>.lst-stps-sub>.lst-stps-itm:before { + counter-increment: subitem; + content: counter(item) "" counter(subitem, lower-alpha) ""; +} +ol.lst-stps.stps-strpd>li ol.lst-stps-sub.stps-strpd, .lst-stps.stps-strpd > .lst-stps-itm > .lst-stps-sub.stps-strpd { + margin-top: 15px; +} +ol.lst-stps.stps-strpd>li, ol.lst-stps.stps-strpd ol.lst-stps-sub.stps-strpd>li, .lst-stps.stps-strpd .lst-stps-itm { + padding-top: 23px; + padding-bottom: 23px; + margin-top: 0px; +} +ol.lst-stps.stps-strpd >li:nth-child(odd), ol.lst-stps.stps-strpd >li:nth-child(even)>ol.lst-stps-sub.stps-strpd>li:nth-child(odd), ol.lst-stps.stps-strpd >li:nth-child(odd)>ol.lst-stps-sub.stps-strpd>li:nth-child(even), .lst-stps.stps-strpd >.lst-stps-itm:nth-child(odd), .lst-stps.stps-strpd >.lst-stps-itm:nth-child(even)>.lst-stps-sub.stps-strpd>.lst-stps-itm:nth-child(odd), .lst-stps.stps-strpd >.lst-stps-itm:nth-child(odd)>.lst-stps-sub.stps-strpd>.lst-stps-itm:nth-child(even) { + background-color: #f5f5f5; +} +ol.lst-stps.stps-strpd >li:nth-child(odd)>ol.lst-stps-sub.stps-strpd>li:nth-child(odd), .lst-stps.stps-strpd >.lst-stps-itm:nth-child(odd)>.lst-stps-sub.stps-strpd>.lst-stps-itm:nth-child(odd) { + background-color: #fff!important; +} +ol.lst-stps.stps-strpd >li:nth-child(even)>ol.lst-stps-sub.stps-strpd>li:nth-child(even):last-child, ol.lst-stps.stps-strpd >li:nth-child(odd)>ol.lst-stps-sub.stps-strpd>li:nth-child(even):last-child, .lst-stps.stps-strpd >.lst-stps-itm:nth-child(even)>.lst-stps-sub.stps-strpd>.lst-stps-itm:nth-child(even):last-child, .lst-stps.stps-strpd >.lst-stps-itm:nth-child(odd)>.lst-stps-sub.stps-strpd>.lst-stps-itm:nth-child(even):last-child { + padding-bottom: 0px; +} +ol.lst-stps li>:first-child, .lst-stps .lst-stps-itm>:first-child { + margin-top: auto; +} +ol.lst-stps.stps-strpd>li, ol.lst-stps.stps-strpd li ol.lst-stps-sub.stps-strpd>li, .lst-stps.stps-strpd .lst-stps-itm { + padding-left: 75px; +} +ol.lst-stps.stps-strpd>li:before, ol.lst-stps-sub.stps-strpd>li:before, .lst-stps.stps-strpd>.lst-stps-itm:before, .lst-stps-sub.stps-strpd>.lst-stps-itm:before { + margin-left: 15px; +} + +@media all and (max-width: 767px) { +ol.lst-stps li:before, .lst-stps .lst-stps-itm:before { + font-size: 0.8em; + line-height: 2; + height: 2em; + width: 2em; + margin-top: -3px; + font-weight: 600; +} +ol.lst-stps>li, ol.lst-stps>li ol.lst-stps-sub>li .lst-stps>.lst-stps-itm { + padding-left: 45px +} +ol.lst-stps.stps-strpd>li, ol.lst-stps.stps-strpd>li ol.lst-stps-sub.stps-strpd, .lst-stps.stps-strpd .lst-stps-itm { + padding-top: 19px; + padding-bottom: 19px; + margin-top: 0px; +} +} diff --git "a/m\303\251li-m\303\251lo/compilation-gel\303\251/2022-06-banff.js" "b/m\303\251li-m\303\251lo/compilation-gel\303\251/2022-06-banff.js" new file mode 100644 index 000000000..e69de29bb diff --git "a/m\303\251li-m\303\251lo/compilation-gel\303\251/index.md" "b/m\303\251li-m\303\251lo/compilation-gel\303\251/index.md" index 089083c91..535bd2ab6 100644 --- "a/m\303\251li-m\303\251lo/compilation-gel\303\251/index.md" +++ "b/m\303\251li-m\303\251lo/compilation-gel\303\251/index.md" @@ -16,6 +16,9 @@ L'autre étape serait de faire re-vive le méli-mélo gelé dans une nouvelle co - @sample - [0e2b0f1](https://github.com/wet-boew/GCWeb/tree/0e2b0f1c3bb81c198533c478bf1704ae89589ce8) * 2021-04-gcaem - GC AEM, custom CSS/JS code published on Canada.ca prior 2021-04 - 2021-04-gcaem - [0e2b0f1](https://github.com/wet-boew/GCWeb/tree/0e2b0f1c3bb81c198533c478bf1704ae89589ce8) +* 2022-06-banff + - 2021-05-steps [as GCWeb v11.3.1](https://github.com/wet-boew/GCWeb/tree/v11.3.1/m%C3%A9li-m%C3%A9lo/2021-05-steps) + - 2021-05-conjunction - [as GCWeb v11.3.1](https://github.com/wet-boew/GCWeb/tree/v11.3.1/m%C3%A9li-m%C3%A9lo/2021-05-conjunction) ## Template pour la liste de compilation gelé diff --git a/package-lock.json b/package-lock.json index 047380b08..fa6a92b68 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "GCWeb", - "version": "11.3.1", + "version": "11.4.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 43e3088ae..26c27257f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "GCWeb", - "version": "11.3.1", + "version": "11.4.0", "description": "Web Experience Toolkit (WET): Canada.ca Theme Reorg", "main": "index.html", "scripts": {