-
Notifications
You must be signed in to change notification settings - Fork 133
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Patch - New thematic for starting or expanding a family. (#2465)
* New thematic for starting or expanding a family. * - New thematic Vitality theme for starting or expanding a family. - Fixes to the steps quiz plugin. Labels were bigger than container so text would go on top of borders in small viewports - Remove Empathy thematic changes from this PR. * Updated css * Updated css * Removed extra spacing and added documentation for the cards, text and background classes. * Removed extra spacing and added documentation for the cards, text, background and checklist classes. * Missing the checklist css print example * Add printable checklist demo. * Fix cards examples. * Update méli-mélo/th-vitality/meta.md Add contact Co-authored-by: Garneauma <[email protected]> * Update méli-mélo/th-vitality/meta.md Add missing classes Co-authored-by: Garneauma <[email protected]> --------- Co-authored-by: Brahim Mahadi Wachilli <[email protected]> Co-authored-by: Garneauma <[email protected]>
- Loading branch information
3 people
authored
Feb 25, 2025
1 parent
c2a5960
commit cbe014e
Showing
3 changed files
with
325 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| --- | ||
| feature: thématique | ||
| lang: en | ||
| title: Vitality theme | ||
| description: Background colours used for vitality. | ||
| componentName: th-vitality | ||
| expiry: November 30, 2025 | ||
| mainPage: vitality.html | ||
| cssClass: | ||
| - vitality | ||
| - btn-vitality | ||
| - text-vitality | ||
| - bg-vitality | ||
| a11yStatement: > | ||
| These colours meet the colour contrast requirements as outlined in WCAG 2.1 AA Success Criterion 1.4.3: Contrast (Minimum). After validation using webaim online contrast checker, I can certified that the color matches used in this thematic are meeting a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and also a contrast ratio of at least 3:1 for graphics and user interface components. I did my due diligence and to knowledge and from my understanding, all elements of this thematic are meeting WCAG 2.1 AA standrds. | ||
| Tested by Francis Snoddy, [email protected]. 2025-01-17. | ||
| peNote: | ||
| - The <code>btn-vitality</code> class must be accompagnied with a fall back button class such as <code>btn-default</code> or <code>btn-primary</code>. | ||
| pages: | ||
| examples: | ||
| - title: Vitality theme | ||
| language: en | ||
| path: vitality.html | ||
| sponsor: Francis Snoddy on behalf of ESDC - Portfolio web | ||
| output: false | ||
| --- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| @charset "UTF-8"; | ||
|
|
||
| @media print { | ||
| .printable-checklist details[open] > summary::marker { | ||
| content: "\2B1C\0020"; | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| /* | ||
| Set Thematic colours | ||
| */ | ||
|
|
||
| h1#wb-cont.vitality { | ||
| border-bottom: 0.18em solid #1b6c1c; | ||
| border-image: linear-gradient(to right, #1b6c1c 71px, transparent 71px); | ||
| border-image-slice: 1; | ||
| } | ||
|
|
||
| .text-vitality { | ||
| color: #1b6c1c; | ||
| } | ||
|
|
||
| .bg-vitality { | ||
| background-color: #1b6c1c; | ||
| color: #fff; | ||
| } | ||
|
|
||
| .bg-vitality-light { | ||
| background-color: #d8eeca; | ||
| } | ||
|
|
||
| .cards { | ||
| padding: 20px; | ||
| box-shadow: 0px 2px 3px 0px #cccccc; | ||
| border-radius: 10px; | ||
| } | ||
|
|
||
| .btn-vitality.btn-primary, .vitality.wb-steps.quiz .btn-primary { | ||
| background-color: #1b6c1c; | ||
| } | ||
|
|
||
| .btn-vitality.btn-primary:active, .btn-vitality.btn-primary:focus, .btn-vitality.btn-primary:hover, .vitality.wb-steps.quiz .btn-primary:active, .vitality.wb-steps.quiz .btn-primary:focus, .vitality.wb-steps.quiz .btn-primary:hover { | ||
| background-color: #d8eeca; | ||
| color: #1b6c1c; | ||
| } | ||
|
|
||
| .btn-vitality.btn-default, .vitality.wb-steps.quiz .btn-default { | ||
| background-color: #fff; | ||
| border-color: #1b6c1c; | ||
| color: #1b6c1c; | ||
| } | ||
|
|
||
| .btn-vitality.btn-default:active, .btn-vitality.btn-default:focus, .btn-vitality.btn-default:hover, .vitality.wb-steps.quiz .btn-default:active, .vitality.wb-steps.quiz .btn-default:focus, .vitality.wb-steps.quiz .btn-default:hover { | ||
| background-color: #d8eeca; | ||
| border-color: #1b6c1c; | ||
| color: #1b6c1c; | ||
| } | ||
|
|
||
| .vitality .cards.dark-hover:hover, .vitality .cards.dark-hover:focus-within { | ||
| background-color: #1b6c1c; | ||
| color: white; | ||
| } | ||
|
|
||
| .vitality .cards.dark-hover:hover a, .vitality .cards.dark-hover:focus-within a { | ||
| background-color: #1b6c1c; | ||
| color: white; | ||
| } | ||
|
|
||
| .vitality .cards.light-hover:hover, .vitality .cards.light-hover:focus-within { | ||
| background-color: #d8eeca; | ||
| color: black; | ||
| } | ||
|
|
||
| .vitality .cards.light-hover:hover a, .vitality .cards.light-hover:focus-within a { | ||
| color: black; | ||
| } | ||
|
|
||
| .vitality.wb-steps.quiz progress { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| border: #1b6c1c solid 1px; | ||
| background-color: #777; | ||
| color: #d8eeca; | ||
| } | ||
|
|
||
| .vitality.wb-steps.quiz progress::-webkit-progress-bar { | ||
| background-color: #777; | ||
| } | ||
|
|
||
| .vitality.wb-steps.quiz progress::-webkit-progress-value { | ||
| background-color: #d8eeca; | ||
| } | ||
|
|
||
| .vitality.wb-steps.quiz progress::-moz-progress-bar { | ||
| background-color: #d8eeca; | ||
| } | ||
|
|
||
| .vitality.wb-steps.quiz .gc-chckbxrdio input[type=radio]:checked + label::before { | ||
| background: #1b6c1c; | ||
| } | ||
|
|
||
| .vitality.wb-steps.quiz .gc-chckbxrdio input[type=checkbox]:checked + label::after { | ||
| border-color: #1b6c1c; | ||
| } | ||
|
|
||
| .vitality.provisional.wb-steps.quiz .wb-tggle-fildst > legend.wb-steps-active { | ||
| color: #1b6c1c; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,189 @@ | ||
| --- | ||
| title: Vitality theme | ||
| dateModified: 2025-01-17 | ||
| description: Vitality CSS styles | ||
| lang: en | ||
| pageclass: cnt-wdth-lmtd | ||
| css: | ||
| - style.css | ||
| - https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/2025-04-nahanni.css | ||
| script: | ||
| - https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/2025-04-nahanni.js | ||
| layout: without-h1 | ||
| --- | ||
| <h1 property="name" id="wb-cont" class="vitality">{{ page.title }}</h1> | ||
| <p>The colors offered by this theme aim to evoke a sense of vitality for the user during certain life events, such as the addition of a child to your family.</p> | ||
| {% assign metadata = site.pages | where: "output", "false" | where: "componentName", "th-vitality" | first %} | ||
| <p>Sponsor: {{ metadata.sponsor }}</p> | ||
| <p>Accessibility statement: {{ metadata.a11yStatement }}</p> | ||
| <p>Progressive enhancement note:</p> | ||
| <ul> | ||
| {% for peNote in metadata.peNote %} | ||
| <li>{{ peNote }}</li> | ||
| {% endfor %} | ||
| </ul> | ||
|
|
||
| <h2>CSS classes</h2> | ||
| <dl> | ||
| <dt><code>.vitality</code></dt> | ||
| <dd>When applied to the <code><h1></code> element it sets a green underline to the title element of the page.</dd> | ||
| <dd>When applied to the Steps Quiz along with the <code>wb-steps</code> and <code>quiz</code> it set the thematic colors to the navigation buttons, the progress bar and to the <code><legend></code> text.</dd> | ||
| <dt><code>.cards</code></dt> | ||
| <dd>Cards can be used with <code>.light-hover</code> or <code>.dark-hover</code> to change the colours on hover or active states.</dd> | ||
| <dt><code>.text-vitality</code></dt> | ||
| <dd>Style the content with the primary thematic color.</dd> | ||
| <dt><code>.bg-vitality</code></dt> | ||
| <dd>Style the content's background with the primary thematic color.</dd> | ||
| <dt><code>.bg-vitality-light</code></dt> | ||
| <dd>Style the content's background with the secondary thematic color.</dd> | ||
| <dt><code>.btn-vitality</code></dt> | ||
| <dd>Along with <code>.btn-primary</code> or <code>.btn-default</code>, set a green colour thematic to buttons.</dd> | ||
| <dt><code>.printable-checklist</code></dt> | ||
| <dd>Displays a checkbox besides open summary elements on print media.</dd> | ||
| </dl> | ||
|
|
||
| <h2>Examples</h2> | ||
| <h3>Green Underline to the <code><h1></code> </h3> | ||
| <p>The example has been applied to the <code><h1></code> element of this page.</p> | ||
| <h4>Code</h4> | ||
| <pre><code><h1 property="name" id="wb-cont" class="vitality"><-- Page title --></h1></code></pre> | ||
|
|
||
| <h3>Cards</h3> | ||
| <p>Example of cards used in a grid layout.</p> | ||
| <div class="row vitality"> | ||
| <div class="col-xs-12 col-md-4"> | ||
| <div class="cards"> | ||
| <h4><a href="#" class="stretched-link">Default card title</a></h4> | ||
| <p>Default card content</p> | ||
| </div> | ||
| </div> | ||
| <div class="col-xs-12 col-md-4"> | ||
| <div class="cards light-hover"> | ||
| <h4><a href="#" class="stretched-link">Light card with hover</a></h4> | ||
| <p>Default card content</p> | ||
| </div> | ||
| </div> | ||
| <div class="col-xs-12 col-md-4"> | ||
| <div class="cards dark-hover"> | ||
| <h4><a href="#" class="stretched-link">Dark card with hover</a></h4> | ||
| <p>Default card content</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <h4>Code</h4> | ||
| <pre><code><div class="row vitality"> | ||
| <div class="col-xs-12 col-md-4"> | ||
| <div class="cards"> | ||
| <h4><a href="#" class="stretched-link">Default card title</a></h4> | ||
| <p>Default card content</p> | ||
| </div> | ||
| </div> | ||
| <div class="col-xs-12 col-md-4"> | ||
| <div class="cards light-hover"> | ||
| <h4><a href="#" class="stretched-link">Light card with hover</a></h4> | ||
| <p>Default card content</p> | ||
| </div> | ||
| </div> | ||
| <div class="col-xs-12 col-md-4"> | ||
| <div class="cards dark-hover"> | ||
| <h4><a href="#" class="stretched-link">Dark card with hover</a></h4> | ||
| <p>Default card content</p> | ||
| </div> | ||
| </div> | ||
| </div></code></pre> | ||
|
|
||
| <h3>Green text</h3> | ||
| <p class="text-vitality">This is green text</p> | ||
| <h4>Code</h4> | ||
| <pre><code><p class="text-vitality">This is green text</p></code></pre> | ||
|
|
||
| <h3>Green background</h3> | ||
| <p class="bg-vitality">This is on a green backgroud</p> | ||
| <h4>Code</h4> | ||
| <pre><code><p class="bg-vitality">This is on a green backgroud</p></code></pre> | ||
|
|
||
| <h3>Light green background</h3> | ||
| <p class="bg-vitality-light">This is on a light green backgroud</p> | ||
| <h4>Code</h4> | ||
| <pre><code><p class="bg-vitality-light">This is on a light green backgroud</p></code></pre> | ||
|
|
||
| <h3>Light Green Button</h3> | ||
| <button class="btn btn-default btn-vitality" type="button">Button</button> | ||
| <h4>Code</h4> | ||
| <pre><code><button class="btn btn-default btn-vitality" type="button">Button</button></code></pre> | ||
|
|
||
| <h3>Steps Form with progress bar</h3> | ||
| <div class="panel panel-default stepsquiz"> | ||
| <div class="wb-frmvld provisional wb-steps quiz vitality panel-body"> | ||
| <form action="#" id="progress-example"> | ||
| <fieldset> | ||
| <legend>Which is your favorite fruit?</legend> | ||
| <div> | ||
| <p>My favorite fruit is:</p> | ||
| <ul class="list-unstyled lst-spcd-2 gc-chckbxrdio"> | ||
| <li class="radio"> | ||
| <input type="radio" name="fruit" id="apple-1" value="apple"> | ||
| <label for="apple-1">Apple</label> | ||
| </li> | ||
| <li class="radio"> | ||
| <input type="radio" name="fruit" id="orange-1" value="orange"> | ||
| <label for="orange-1">Orange</label> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </fieldset> | ||
| <fieldset> | ||
| <legend>Condiments</legend> | ||
| <div> | ||
| <p>Choose your condiments:</p> | ||
| <ul class="list-unstyled lst-spcd-2 gc-chckbxrdio"> | ||
| <li class="checkbox"> | ||
| <input type="checkbox" id="ketchup-1" value="ketchup" name="condiments"> | ||
| <label for="ketchup-1">Ketchup</label> | ||
| </li> | ||
| <li class="checkbox"> | ||
| <input type="checkbox" id="relish-1" value="relish" name="condiments"> | ||
| <label for="relish-1">Relish</label> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </fieldset> | ||
| <input type="submit" class="btn btn-primary" /> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| <h4>Code</h4> | ||
| <pre><code><div class="wb-frmvld provisional wb-steps quiz vitality panel-body"> | ||
| <!-- Steps Form --> | ||
| </div></code></pre> | ||
|
|
||
| <h3>Open summary elements with checkboxes in print view</h3> | ||
| <ul class="printable-checklist"> | ||
| <li> | ||
| <details> | ||
| <summary>Item 1 to do</summary> | ||
| <p>Description of what needs to be done.</p> | ||
| </details> | ||
| </li> | ||
| <li> | ||
| <details> | ||
| <summary>Item 2 to do</summary> | ||
| <p>The expanded summaries will have a checkbox besides them on print media.</p> | ||
| </details> | ||
| </li> | ||
| </ul> | ||
| <h4>Code</h4> | ||
| <pre><code><ul class="printable-checklist"> | ||
| <li> | ||
| <details> | ||
| <summary>Item 1 to do</summary> | ||
| <p>Description of what needs to be done.</p> | ||
| </details> | ||
| </li> | ||
| <li> | ||
| <details> | ||
| <summary>Item 2 to do</summary> | ||
| <p>The expanded summaries will have a checkbox besides them on print media.</p> | ||
| </details> | ||
| </li> | ||
| </ul></code></pre> |