From e308341028705d069b3b07def3943c7459709eab Mon Sep 17 00:00:00 2001 From: Amy Holt Date: Mon, 7 Jun 2021 08:54:29 -0600 Subject: [PATCH 1/5] Add checkbox base styles --- css/design_system/elements/checkbox.scss | 126 +++++++++++++++++++++++ css/design_system/index.scss | 1 + 2 files changed, 127 insertions(+) create mode 100644 css/design_system/elements/checkbox.scss diff --git a/css/design_system/elements/checkbox.scss b/css/design_system/elements/checkbox.scss new file mode 100644 index 0000000..7c2b92b --- /dev/null +++ b/css/design_system/elements/checkbox.scss @@ -0,0 +1,126 @@ +@mixin docstring($class, $label, $example_class) { + /** + * @title #{$label} + * @category elements + * @element_type checkbox + * @status draft + * @value .#{$class} + * @description Styles for a checkbox element. + * + * @example + * + * + * + * + */ +} + +// Inspiration: https://medium.com/claritydesignsystem/pure-css-accessible-checkboxes-and-radios-buttons-54063e759bb3 +.s-visually-hidden { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +@include docstring("s-checkbox", "Unchecked", "s-checkbox") +.s-checkbox { + input { + //hides real checkbox from non-screen readers + @extend .s-visually-hidden; + } + + input + label:after { + //default to unchecked + content: none; + } + + input:checked + label:after { + //shows check when checked + content: ""; + } + + input:focus + label:before { + //adds focus for a11y + outline: green auto 5px; + } + + label { + position: relative; + display: inline-block; + padding-left: 24px; + padding-top: 6px; + color: var(--s-color-gray-600); + } + + label::before, label:after { + //set up for fake box and it's checkmark + position: absolute; + content: ""; + display: inline-block; + } + + label:before { + //creates fake box + height: 16px; + width: 16px; + border: 1px solid var(--s-color-gray-700); + border-radius: .3rem; + left: 0px; + top: 3px; + } + +} + +@include docstring("s-checkbox-checked", "Checked", "s-checkbox s-checkbox-checked") +.s-checkbox.s-checkbox-checked { + label::before, label:after { + background-color: var(--s-color-cyan-400); + border: 1px solid var(--s-color-cyan-400); + } + + label:after { + //creates checkmark in fake box + height: 5px; + width: 9px; + border-left: 2px solid; + border-bottom: 2px solid; + transform: rotate(-45deg); + left: 3px; + top: 6px; + + -webkit-transition: all .5s; + transition: all .5s; + } +} + +@include docstring("s-checkbox-disabled", "Disabled", "s-checkbox s-checkbox-disabled") +.s-checkbox.s-checkbox-disabled { + label::before, label:after { + background-color: var(--s-color-gray-400); + } +} +@include docstring("s-checkbox-disabled-checked", "Disabled, Checked", "s-checkbox s-checkbox-disabled-checked") +.s-checkbox.s-checkbox-disabled-checked { + label::before, label:after { + background-color: var(--s-color-gray-400); + border: 1px solid var(--s-color-gray-400); + } + + label:after { + //creates checkmark in fake box + height: 5px; + width: 9px; + border-left: 2px solid; + border-bottom: 2px solid; + transform: rotate(-45deg); + left: 3px; + top: 6px; + + -webkit-transition: all .5s; + transition: all .5s; + } +} diff --git a/css/design_system/index.scss b/css/design_system/index.scss index a507916..cbfe229 100644 --- a/css/design_system/index.scss +++ b/css/design_system/index.scss @@ -14,6 +14,7 @@ @import "elements/button"; @import "elements/link"; @import "elements/p"; +@import "elements/checkbox"; @import "content"; From 81187972807f5fc6fff888f23a5ab714a0a04c64 Mon Sep 17 00:00:00 2001 From: Amy Holt Date: Mon, 7 Jun 2021 08:55:05 -0600 Subject: [PATCH 2/5] Add set up for checkboxes --- _layouts/default.html | 1 + elements.html | 22 ++++++++++++++++++++++ 2 files changed, 23 insertions(+) diff --git a/_layouts/default.html b/_layouts/default.html index b337e76..9b03f46 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -6,6 +6,7 @@ + diff --git a/elements.html b/elements.html index 56e7359..6898087 100644 --- a/elements.html +++ b/elements.html @@ -5,8 +5,30 @@ subnav: buttons-links: Buttons & Links paragraphs: Paragraph Text + checkboxes: Checkboxes --- +

Checkboxes

+ + + + + + + + + + {% assign checkboxes = site.elements | where: "element_type", "checkbox" %} + {% for checkbox in checkboxes %} + + + + + + {% endfor %} + +
Class NameHTMLExample
{% highlight html %}{{ checkbox.value }}{% endhighlight %}{% highlight html %}{{ checkbox | remove: '

' | remove: '

' }}{% endhighlight %}		{{ checkbox }}
+

Many of our sites have links that appear to be buttons. This is acceptable from a design standpoint, but it is important that the HTML correctly communicates the intent of the element to the browser. Start by understanding the important difference between a button and a link: