From f57806124ef7d0f8099394428b082dfaf763820c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Sun, 3 May 2020 17:32:19 +0200 Subject: [PATCH 01/14] Make sr-only-focusable deep-focusable & stylable This drops support for IE and pre-chromium Edge. Closes #141 --- resources/sass/_screenreaders.scss | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/resources/sass/_screenreaders.scss b/resources/sass/_screenreaders.scss index d425be17..c2cf5df6 100644 --- a/resources/sass/_screenreaders.scss +++ b/resources/sass/_screenreaders.scss @@ -11,15 +11,8 @@ border: 0; } -.sr-only-focusable { - @extend .sr-only; - - &:focus { - position: static; - width: auto; - height: auto; - overflow: visible; - clip: auto; - white-space: normal; - } +/* Warning: Has no effect in IE or pre-chromium Edge */ +.sr-only-focusable:not(:focus-within):not(:active) { + position: absolute; + clip-path: inset(50%); } From b60ed5957ed2c4641e386a5ad411ceeb9a482b7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Sun, 3 May 2020 17:38:19 +0200 Subject: [PATCH 02/14] Use clip-path to hide content in modern browsers --- resources/sass/_screenreaders.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/resources/sass/_screenreaders.scss b/resources/sass/_screenreaders.scss index c2cf5df6..2b6fb035 100644 --- a/resources/sass/_screenreaders.scss +++ b/resources/sass/_screenreaders.scss @@ -6,7 +6,8 @@ height: 1px; padding: 0; overflow: hidden; - clip: rect(0, 0, 0, 0); + clip: rect(0 0 0 0); + clip-path: inset(50%); white-space: nowrap; border: 0; } From f50949f1abc28b1460f7b25ad54ce1dfc03c268b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Sun, 3 May 2020 17:42:09 +0200 Subject: [PATCH 03/14] Make sr-only focusable to cover missuse If someone puts .sr-only on a focusable element by misstake, this at least makes tabbing less confusing in some cases. --- resources/sass/_screenreaders.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/resources/sass/_screenreaders.scss b/resources/sass/_screenreaders.scss index 2b6fb035..e4e41c86 100644 --- a/resources/sass/_screenreaders.scss +++ b/resources/sass/_screenreaders.scss @@ -1,6 +1,7 @@ // Utilities for screenreaders -.sr-only { +/* Supports IE9+ */ +.sr-only:not(:focus):not(:active) { position: absolute; width: 1px; height: 1px; From e6b6e9121d922b0d08af1fdb2ffb7268d5e238d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Sun, 3 May 2020 17:46:01 +0200 Subject: [PATCH 04/14] Add margin -1px to sr-only Inspired by Tailwind CSS https://tailwindcss.com/docs/screen-readers/ --- resources/sass/_screenreaders.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/resources/sass/_screenreaders.scss b/resources/sass/_screenreaders.scss index e4e41c86..52d5e935 100644 --- a/resources/sass/_screenreaders.scss +++ b/resources/sass/_screenreaders.scss @@ -5,6 +5,7 @@ position: absolute; width: 1px; height: 1px; + margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); From f4e987c9eb642c7295124c97ab302498e693bbb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Sun, 3 May 2020 17:47:44 +0200 Subject: [PATCH 05/14] Reorder attributes --- resources/sass/_screenreaders.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/resources/sass/_screenreaders.scss b/resources/sass/_screenreaders.scss index 52d5e935..12f6e157 100644 --- a/resources/sass/_screenreaders.scss +++ b/resources/sass/_screenreaders.scss @@ -3,15 +3,15 @@ /* Supports IE9+ */ .sr-only:not(:focus):not(:active) { position: absolute; + clip: rect(0 0 0 0); + clip-path: inset(50%); width: 1px; height: 1px; margin: -1px; padding: 0; + border: 0; overflow: hidden; - clip: rect(0 0 0 0); - clip-path: inset(50%); white-space: nowrap; - border: 0; } /* Warning: Has no effect in IE or pre-chromium Edge */ From 428d3daa90a7046df3fa1f7a3b22ea8b25d2f10b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Sun, 3 May 2020 18:11:41 +0200 Subject: [PATCH 06/14] Add instructions and change order of classes --- resources/sass/_screenreaders.scss | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/resources/sass/_screenreaders.scss b/resources/sass/_screenreaders.scss index 12f6e157..f0c7e7dd 100644 --- a/resources/sass/_screenreaders.scss +++ b/resources/sass/_screenreaders.scss @@ -1,6 +1,18 @@ // Utilities for screenreaders -/* Supports IE9+ */ +/* + * Visually hide element until it or anything inside receives focus. + * Warning: Has no effect in IE or pre-chromium Edge! + */ +.sr-only-focusable:not(:focus-within):not(:active) { + position: absolute; + clip-path: inset(50%); +} + +/* + * Visually hide element until it receives focus. + * Supports IE9+ + */ .sr-only:not(:focus):not(:active) { position: absolute; clip: rect(0 0 0 0); @@ -13,9 +25,3 @@ overflow: hidden; white-space: nowrap; } - -/* Warning: Has no effect in IE or pre-chromium Edge */ -.sr-only-focusable:not(:focus-within):not(:active) { - position: absolute; - clip-path: inset(50%); -} From 5d9d236ccd06381004b452f4ad080597c73de775 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Sun, 3 May 2020 18:21:36 +0200 Subject: [PATCH 07/14] Use common sr-only utility on skip-to-content --- resources/views/layouts/master.blade.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/views/layouts/master.blade.php b/resources/views/layouts/master.blade.php index 750071e9..1cfc0e9d 100644 --- a/resources/views/layouts/master.blade.php +++ b/resources/views/layouts/master.blade.php @@ -4,7 +4,7 @@ @extends('kontour::layouts.html') @section('body') - +
@section('kontourHeader') From 0269b1f3d072428480494a2d043cb96f50a54d42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Sun, 3 May 2020 18:22:09 +0200 Subject: [PATCH 08/14] Build for production --- resources/css/kontour.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/css/kontour.css b/resources/css/kontour.css index 57622c7c..a0c4c50e 100644 --- a/resources/css/kontour.css +++ b/resources/css/kontour.css @@ -1 +1 @@ -html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}*,body{margin:0;background-color:#fff;color:#000}*+*{margin-top:1rem}a,abbr,acronym,audio *,b,bdo,big,br,cite,code,del,dfn,dt+*,em,figure *,h2+*,h3+*,h4+*,h5+*,h6+*,header+:last-child,hgroup h1+*,i,ins,kbd,label,label+*,legend+*,li+*,map,map *,object *,picture *,q,samp,select *,small,span,strong,sub,sup,table *,time,tt,var,video *{margin-top:0}img{max-width:100%;height:auto}dl>*{-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}dl>div{margin-top:0;padding-bottom:1rem}dt{-webkit-column-break-after:avoid;-moz-column-break-after:avoid;break-after:avoid}dd{-webkit-column-break-before:avoid;-moz-column-break-before:avoid;break-before:avoid}body{font-family:system-ui,sans-serif;line-height:1.6}header{border-bottom:1px solid #e6e6e6}body>main{border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6}body>footer{background:#f2f2f2}[aria-current=page],[aria-current=page] a{text-decoration:none}[data-kontour-section=kontourHeader]>:first-child{font-size:1.5em;color:grey;text-decoration:none}[data-kontour-section=kontourNav]>button rect{fill:currentColor}[data-kontour-section=kontourNav] [aria-expanded=true] svg .bottom,[data-kontour-section=kontourNav] [aria-expanded=true] svg .top{visibility:hidden}[data-kontour-widget] header{color:grey}[data-kontour-widget] a{color:inherit}[data-kontour-section=kontourStickyActions]{background-color:#f2f2f2;color:#000;padding:1rem}body{min-height:100vh;display:-webkit-box;display:flex;flex-wrap:wrap}body>*{-webkit-box-flex:1;flex-grow:1;margin-top:0;padding:1rem}body>header{flex-basis:100%;min-height:4rem;max-height:-webkit-max-content;max-height:-moz-max-content;max-height:max-content}body>main{-webkit-box-flex:1000;flex-grow:1000;flex-basis:45ch;min-height:calc(100vh - 10rem)}body>footer{flex-basis:100%}#skip-to-content{position:absolute;max-width:33%;left:0;right:0;margin-left:auto;margin-right:auto;background:#fff;padding:1ch;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;text-align:center}#skip-to-content,[data-kontour-section=kontourHeader]{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}[data-kontour-section=kontourHeader]{flex-wrap:wrap;-webkit-box-pack:end;justify-content:flex-end;padding:0}[data-kontour-section=kontourHeader] *{margin-top:0}[data-kontour-section=kontourHeader]>*{padding:.5rem}[data-kontour-section=kontourHeader]>:first-child{margin-right:auto}[data-kontour-menu-expanded] [data-kontour-section=kontourHeader]>:first-child{margin-left:4rem}[data-kontour-menu-expanded] [data-kontour-section=kontourNav]{flex-basis:100%}[data-kontour-section=kontourNav]>button{width:4rem;padding:1ch;line-height:0}[data-kontour-menu-expanded] [data-kontour-section=kontourNav]>button{position:absolute;top:0;left:0}[data-kontour-section=kontourNav]>button+*{margin-top:0}[data-kontour-section=kontourWidgets]{-webkit-box-flex:500;flex-grow:500;flex-basis:0;display:-webkit-box;display:flex;flex-wrap:wrap;align-content:flex-start;padding:0}[data-kontour-section=kontourWidgets]>*{-webkit-box-flex:1;flex-grow:1;margin-top:0;padding:1rem}[data-kontour-section=kontourFooter]{display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-pack:center;justify-content:center;-webkit-box-align:baseline;align-items:baseline;align-content:center;padding:.5rem}[data-kontour-section=kontourFooter]>*{margin:.25rem;padding:.25rem;text-align:center}header[data-kontour-section=kontourToolHeader]+*{margin-top:1rem}[data-kontour-section=kontourStickyActions]{position:-webkit-sticky;position:sticky;top:0;bottom:0}.error,.list-unstyled,[data-kontour-widget] ol,[data-kontour-widget] ul,[id*=error],[id*=Error],ol[data-kontour-widget],ul[data-kontour-widget]{list-style:none;padding:0}.button-reset,[data-kontour-section=kontourNav]>button,[data-kontour-widget=userAccount] button{border:none;background:none;color:inherit}.columns-narrow{-webkit-column-width:20ch;-moz-column-width:20ch;column-width:20ch}.columns-readable{-webkit-column-width:45ch;-moz-column-width:45ch;column-width:45ch}button,input,select,textarea{font-size:inherit;line-height:inherit}[type=email],[type=password],[type=text],fieldset,textarea{width:100%;max-width:65ch}[type=email],[type=password]{max-width:35ch}input,select,textarea{border-width:1px;padding:.1em}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:red;border-style:solid}[data-kontour-unload-prevented=true] input[data-kontour-dirty=true],[data-kontour-unload-prevented=true] select[data-kontour-dirty=true],[data-kontour-unload-prevented=true] textarea[data-kontour-dirty=true]{border-color:orange;border-style:solid}.error,[id*=error],[id*=Error]{margin-top:0;color:red}fieldset{border:1px solid #e6e6e6}[data-checked-radio] label{display:block}.button,.button-destructive,.button-link,.button-primary,[data-kontour-button=create],[data-kontour-button=destroy],[data-kontour-button=link],[data-kontour-button=update],[data-kontour-button]{color:#00f;background:transparent;display:inline-block;border:1px solid;border-radius:.1em;text-decoration:none;padding-top:.1em;padding-bottom:.1em}.button-destructive:focus,.button-link:focus,.button-primary:focus,.button:focus,[data-kontour-button=create]:focus,[data-kontour-button=destroy]:focus,[data-kontour-button=link]:focus,[data-kontour-button=update]:focus,[data-kontour-button]:focus{outline:none;box-shadow:0 0 0 .2rem #99f}.button-destructive:active,.button-link:active,.button-primary:active,.button:active,[data-kontour-button=create]:active,[data-kontour-button=destroy]:active,[data-kontour-button=link]:active,[data-kontour-button=update]:active,[data-kontour-button]:active{color:#00f;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}.button-destructive:disabled,.button-link:disabled,.button-primary:disabled,.button.disabled,.button:disabled,.disabled.button-destructive,.disabled.button-link,.disabled.button-primary,.disabled[data-kontour-button=create],.disabled[data-kontour-button=destroy],.disabled[data-kontour-button=link],.disabled[data-kontour-button=update],.disabled[data-kontour-button],[data-kontour-button=create]:disabled,[data-kontour-button=destroy]:disabled,[data-kontour-button=link]:disabled,[data-kontour-button=update]:disabled,[data-kontour-button]:disabled,fieldset:disabled .button,fieldset:disabled .button-destructive,fieldset:disabled .button-link,fieldset:disabled .button-primary,fieldset:disabled [data-kontour-button=create],fieldset:disabled [data-kontour-button=destroy],fieldset:disabled [data-kontour-button=link],fieldset:disabled [data-kontour-button=update],fieldset:disabled [data-kontour-button]{pointer-events:none;background-color:grey;border-color:transparent;box-shadow:none}.button-primary,[data-kontour-button=create],[data-kontour-button=update]{color:#fff;background-color:#00f;border-color:#00f}.button-primary:active,[data-kontour-button=create]:active,[data-kontour-button=update]:active{color:#fff}.button-destructive,[data-kontour-button=destroy]{color:red;border-color:red}.button-destructive:focus,[data-kontour-button=destroy]:focus{box-shadow:0 0 0 .2rem #f99}.button-destructive:active,[data-kontour-button=destroy]:active{color:red;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}.button-destructive.button-primary,.button-destructive[data-kontour-button=create],.button-destructive[data-kontour-button=update],.button-primary[data-kontour-button=destroy],[data-kontour-button=create][data-kontour-button=destroy],[data-kontour-button=update][data-kontour-button=destroy]{background-color:red;border-color:red;color:#fff}.button-destructive.button-primary:active,.button-destructive[data-kontour-button=create]:active,.button-destructive[data-kontour-button=update]:active,.button-primary[data-kontour-button=destroy]:active,[data-kontour-button=create][data-kontour-button=destroy]:active,[data-kontour-button=update][data-kontour-button=destroy]:active{color:#fff}.button-link,[data-kontour-button=link]{border-color:transparent;background-color:transparent;text-decoration:underline}.button-link:focus,[data-kontour-button=link]:focus{text-decoration:none}.button-link:active,[data-kontour-button=link]:active{box-shadow:none;text-decoration:none}.button-link:disabled,[data-kontour-button=link]:disabled{text-decoration:none}[data-kontour-widget=crumbtrail]>*{display:-webkit-box;display:flex;flex-wrap:wrap;list-style:none;padding:0}[data-kontour-widget=crumbtrail] li{white-space:pre-line}[data-kontour-widget=crumbtrail] *+li:before{content:"\2192";padding-left:.5rem;padding-right:.5rem}[data-kontour-widget=menu] small{color:grey}[data-kontour-widget=menu] li ul{margin-top:0;padding-left:1ch}[data-kontour-widget=menu] [aria-current]>a{position:relative}[data-kontour-widget=menu] [aria-current]>a:before{content:" \2023";position:absolute;left:calc(100% + .5ch)}[data-kontour-widget=userAccount]{color:grey;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}[data-kontour-widget=userAccount] form{line-height:0}[data-kontour-widget=userAccount] button{width:3ch;padding:0;margin-left:.5ch}[data-kontour-widget=userAccount] polygon{fill:currentColor}[data-kontour-widget=message] [data-kontour-message-level=info],[data-kontour-widget=message] [data-kontour-message-level=success]{color:green}[data-kontour-widget=message] [data-kontour-message-level=warning]{color:orange}[data-kontour-widget=message] [data-kontour-message-level=error]{color:red}[data-kontour-widget$=RecentVisits] a{white-space:nowrap;overflow:hidden;text-overflow:fade;display:inline-block;max-width:30ch}.sr-only,.sr-only-focusable{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sr-only-focusable:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal} \ No newline at end of file +html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}*,body{margin:0;background-color:#fff;color:#000}*+*{margin-top:1rem}a,abbr,acronym,audio *,b,bdo,big,br,cite,code,del,dfn,dt+*,em,figure *,h2+*,h3+*,h4+*,h5+*,h6+*,header+:last-child,hgroup h1+*,i,ins,kbd,label,label+*,legend+*,li+*,map,map *,object *,picture *,q,samp,select *,small,span,strong,sub,sup,table *,time,tt,var,video *{margin-top:0}img{max-width:100%;height:auto}dl>*{-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}dl>div{margin-top:0;padding-bottom:1rem}dt{-webkit-column-break-after:avoid;-moz-column-break-after:avoid;break-after:avoid}dd{-webkit-column-break-before:avoid;-moz-column-break-before:avoid;break-before:avoid}body{font-family:system-ui,sans-serif;line-height:1.6}header{border-bottom:1px solid #e6e6e6}body>main{border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6}body>footer{background:#f2f2f2}[aria-current=page],[aria-current=page] a{text-decoration:none}[data-kontour-section=kontourHeader]>:first-child{font-size:1.5em;color:grey;text-decoration:none}[data-kontour-section=kontourNav]>button rect{fill:currentColor}[data-kontour-section=kontourNav] [aria-expanded=true] svg .bottom,[data-kontour-section=kontourNav] [aria-expanded=true] svg .top{visibility:hidden}[data-kontour-widget] header{color:grey}[data-kontour-widget] a{color:inherit}[data-kontour-section=kontourStickyActions]{background-color:#f2f2f2;color:#000;padding:1rem}body{min-height:100vh;display:-webkit-box;display:flex;flex-wrap:wrap}body>*{-webkit-box-flex:1;flex-grow:1;margin-top:0;padding:1rem}body>header{flex-basis:100%;min-height:4rem;max-height:-webkit-max-content;max-height:-moz-max-content;max-height:max-content}body>main{-webkit-box-flex:1000;flex-grow:1000;flex-basis:45ch;min-height:calc(100vh - 10rem)}body>footer{flex-basis:100%}#skip-to-content{position:absolute;max-width:33%;left:0;right:0;margin-left:auto;margin-right:auto;background:#fff;padding:1ch;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;text-align:center}#skip-to-content,[data-kontour-section=kontourHeader]{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}[data-kontour-section=kontourHeader]{flex-wrap:wrap;-webkit-box-pack:end;justify-content:flex-end;padding:0}[data-kontour-section=kontourHeader] *{margin-top:0}[data-kontour-section=kontourHeader]>*{padding:.5rem}[data-kontour-section=kontourHeader]>:first-child{margin-right:auto}[data-kontour-menu-expanded] [data-kontour-section=kontourHeader]>:first-child{margin-left:4rem}[data-kontour-menu-expanded] [data-kontour-section=kontourNav]{flex-basis:100%}[data-kontour-section=kontourNav]>button{width:4rem;padding:1ch;line-height:0}[data-kontour-menu-expanded] [data-kontour-section=kontourNav]>button{position:absolute;top:0;left:0}[data-kontour-section=kontourNav]>button+*{margin-top:0}[data-kontour-section=kontourWidgets]{-webkit-box-flex:500;flex-grow:500;flex-basis:0;display:-webkit-box;display:flex;flex-wrap:wrap;align-content:flex-start;padding:0}[data-kontour-section=kontourWidgets]>*{-webkit-box-flex:1;flex-grow:1;margin-top:0;padding:1rem}[data-kontour-section=kontourFooter]{display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-pack:center;justify-content:center;-webkit-box-align:baseline;align-items:baseline;align-content:center;padding:.5rem}[data-kontour-section=kontourFooter]>*{margin:.25rem;padding:.25rem;text-align:center}header[data-kontour-section=kontourToolHeader]+*{margin-top:1rem}[data-kontour-section=kontourStickyActions]{position:-webkit-sticky;position:sticky;top:0;bottom:0}.error,.list-unstyled,[data-kontour-widget] ol,[data-kontour-widget] ul,[id*=error],[id*=Error],ol[data-kontour-widget],ul[data-kontour-widget]{list-style:none;padding:0}.button-reset,[data-kontour-section=kontourNav]>button,[data-kontour-widget=userAccount] button{border:none;background:none;color:inherit}.columns-narrow{-webkit-column-width:20ch;-moz-column-width:20ch;column-width:20ch}.columns-readable{-webkit-column-width:45ch;-moz-column-width:45ch;column-width:45ch}button,input,select,textarea{font-size:inherit;line-height:inherit}[type=email],[type=password],[type=text],fieldset,textarea{width:100%;max-width:65ch}[type=email],[type=password]{max-width:35ch}input,select,textarea{border-width:1px;padding:.1em}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:red;border-style:solid}[data-kontour-unload-prevented=true] input[data-kontour-dirty=true],[data-kontour-unload-prevented=true] select[data-kontour-dirty=true],[data-kontour-unload-prevented=true] textarea[data-kontour-dirty=true]{border-color:orange;border-style:solid}.error,[id*=error],[id*=Error]{margin-top:0;color:red}fieldset{border:1px solid #e6e6e6}[data-checked-radio] label{display:block}.button,.button-destructive,.button-link,.button-primary,[data-kontour-button=create],[data-kontour-button=destroy],[data-kontour-button=link],[data-kontour-button=update],[data-kontour-button]{color:#00f;background:transparent;display:inline-block;border:1px solid;border-radius:.1em;text-decoration:none;padding-top:.1em;padding-bottom:.1em}.button-destructive:focus,.button-link:focus,.button-primary:focus,.button:focus,[data-kontour-button=create]:focus,[data-kontour-button=destroy]:focus,[data-kontour-button=link]:focus,[data-kontour-button=update]:focus,[data-kontour-button]:focus{outline:none;box-shadow:0 0 0 .2rem #99f}.button-destructive:active,.button-link:active,.button-primary:active,.button:active,[data-kontour-button=create]:active,[data-kontour-button=destroy]:active,[data-kontour-button=link]:active,[data-kontour-button=update]:active,[data-kontour-button]:active{color:#00f;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}.button-destructive:disabled,.button-link:disabled,.button-primary:disabled,.button.disabled,.button:disabled,.disabled.button-destructive,.disabled.button-link,.disabled.button-primary,.disabled[data-kontour-button=create],.disabled[data-kontour-button=destroy],.disabled[data-kontour-button=link],.disabled[data-kontour-button=update],.disabled[data-kontour-button],[data-kontour-button=create]:disabled,[data-kontour-button=destroy]:disabled,[data-kontour-button=link]:disabled,[data-kontour-button=update]:disabled,[data-kontour-button]:disabled,fieldset:disabled .button,fieldset:disabled .button-destructive,fieldset:disabled .button-link,fieldset:disabled .button-primary,fieldset:disabled [data-kontour-button=create],fieldset:disabled [data-kontour-button=destroy],fieldset:disabled [data-kontour-button=link],fieldset:disabled [data-kontour-button=update],fieldset:disabled [data-kontour-button]{pointer-events:none;background-color:grey;border-color:transparent;box-shadow:none}.button-primary,[data-kontour-button=create],[data-kontour-button=update]{color:#fff;background-color:#00f;border-color:#00f}.button-primary:active,[data-kontour-button=create]:active,[data-kontour-button=update]:active{color:#fff}.button-destructive,[data-kontour-button=destroy]{color:red;border-color:red}.button-destructive:focus,[data-kontour-button=destroy]:focus{box-shadow:0 0 0 .2rem #f99}.button-destructive:active,[data-kontour-button=destroy]:active{color:red;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}.button-destructive.button-primary,.button-destructive[data-kontour-button=create],.button-destructive[data-kontour-button=update],.button-primary[data-kontour-button=destroy],[data-kontour-button=create][data-kontour-button=destroy],[data-kontour-button=update][data-kontour-button=destroy]{background-color:red;border-color:red;color:#fff}.button-destructive.button-primary:active,.button-destructive[data-kontour-button=create]:active,.button-destructive[data-kontour-button=update]:active,.button-primary[data-kontour-button=destroy]:active,[data-kontour-button=create][data-kontour-button=destroy]:active,[data-kontour-button=update][data-kontour-button=destroy]:active{color:#fff}.button-link,[data-kontour-button=link]{border-color:transparent;background-color:transparent;text-decoration:underline}.button-link:focus,[data-kontour-button=link]:focus{text-decoration:none}.button-link:active,[data-kontour-button=link]:active{box-shadow:none;text-decoration:none}.button-link:disabled,[data-kontour-button=link]:disabled{text-decoration:none}[data-kontour-widget=crumbtrail]>*{display:-webkit-box;display:flex;flex-wrap:wrap;list-style:none;padding:0}[data-kontour-widget=crumbtrail] li{white-space:pre-line}[data-kontour-widget=crumbtrail] *+li:before{content:"\2192";padding-left:.5rem;padding-right:.5rem}[data-kontour-widget=menu] small{color:grey}[data-kontour-widget=menu] li ul{margin-top:0;padding-left:1ch}[data-kontour-widget=menu] [aria-current]>a{position:relative}[data-kontour-widget=menu] [aria-current]>a:before{content:" \2023";position:absolute;left:calc(100% + .5ch)}[data-kontour-widget=userAccount]{color:grey;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}[data-kontour-widget=userAccount] form{line-height:0}[data-kontour-widget=userAccount] button{width:3ch;padding:0;margin-left:.5ch}[data-kontour-widget=userAccount] polygon{fill:currentColor}[data-kontour-widget=message] [data-kontour-message-level=info],[data-kontour-widget=message] [data-kontour-message-level=success]{color:green}[data-kontour-widget=message] [data-kontour-message-level=warning]{color:orange}[data-kontour-widget=message] [data-kontour-message-level=error]{color:red}[data-kontour-widget$=RecentVisits] a{white-space:nowrap;overflow:hidden;text-overflow:fade;display:inline-block;max-width:30ch}.sr-only-focusable:not(:focus-within):not(:active){position:absolute;-webkit-clip-path:inset(50%);clip-path:inset(50%)}.sr-only:not(:focus):not(:active){position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap} \ No newline at end of file From ce11afd6a1341a447a419c6a2a9d11b377c9ec30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Mon, 4 May 2020 18:46:49 +0200 Subject: [PATCH 09/14] Test for clip-path instead of position --- tests/Browser/SkipToContentTest.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/Browser/SkipToContentTest.php b/tests/Browser/SkipToContentTest.php index bf34a14f..07290e2d 100644 --- a/tests/Browser/SkipToContentTest.php +++ b/tests/Browser/SkipToContentTest.php @@ -22,12 +22,12 @@ public function test_skip_to_content() $routeManager = $this->app->make(\Kontenta\Kontour\Contracts\AdminRouteManager::class); $browser->loginAs($this->user, 'admin')->visit($routeManager->indexUrl()); - $this->assertEquals('absolute', $browser->element($this->element)->getCSSValue('position')); + $this->assertEquals('inset(50%)', $browser->element($this->element)->getCSSValue('clip-path')); $browser->keys('', '{tab}') ->assertFocused($this->element); - $this->assertEquals('absolute', $browser->element($this->element)->getCSSValue('position')); + $this->assertEquals('none', $browser->element($this->element)->getCSSValue('clip-path')); $browser->keys($this->element, '{enter}') ->assertNotFocused($this->element) From ec29c3c505463b6eb45ece6ab72414cab208812c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Mon, 4 May 2020 18:51:56 +0200 Subject: [PATCH 10/14] Make skip-to-content link fixed in viewport --- resources/sass/_layout.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss index d64151e9..434b8a72 100644 --- a/resources/sass/_layout.scss +++ b/resources/sass/_layout.scss @@ -30,8 +30,9 @@ body { } #skip-to-content { - position: absolute; + position: fixed; max-width: 33%; + top: $kontour-spacing-base/2; left: 0; right: 0; margin-left: auto; From c3ede0619a89b4500b9ddcdcbb5162624588bb23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Mon, 4 May 2020 18:52:22 +0200 Subject: [PATCH 11/14] Build assets for production --- resources/css/kontour.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/css/kontour.css b/resources/css/kontour.css index a0c4c50e..2383a431 100644 --- a/resources/css/kontour.css +++ b/resources/css/kontour.css @@ -1 +1 @@ -html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}*,body{margin:0;background-color:#fff;color:#000}*+*{margin-top:1rem}a,abbr,acronym,audio *,b,bdo,big,br,cite,code,del,dfn,dt+*,em,figure *,h2+*,h3+*,h4+*,h5+*,h6+*,header+:last-child,hgroup h1+*,i,ins,kbd,label,label+*,legend+*,li+*,map,map *,object *,picture *,q,samp,select *,small,span,strong,sub,sup,table *,time,tt,var,video *{margin-top:0}img{max-width:100%;height:auto}dl>*{-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}dl>div{margin-top:0;padding-bottom:1rem}dt{-webkit-column-break-after:avoid;-moz-column-break-after:avoid;break-after:avoid}dd{-webkit-column-break-before:avoid;-moz-column-break-before:avoid;break-before:avoid}body{font-family:system-ui,sans-serif;line-height:1.6}header{border-bottom:1px solid #e6e6e6}body>main{border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6}body>footer{background:#f2f2f2}[aria-current=page],[aria-current=page] a{text-decoration:none}[data-kontour-section=kontourHeader]>:first-child{font-size:1.5em;color:grey;text-decoration:none}[data-kontour-section=kontourNav]>button rect{fill:currentColor}[data-kontour-section=kontourNav] [aria-expanded=true] svg .bottom,[data-kontour-section=kontourNav] [aria-expanded=true] svg .top{visibility:hidden}[data-kontour-widget] header{color:grey}[data-kontour-widget] a{color:inherit}[data-kontour-section=kontourStickyActions]{background-color:#f2f2f2;color:#000;padding:1rem}body{min-height:100vh;display:-webkit-box;display:flex;flex-wrap:wrap}body>*{-webkit-box-flex:1;flex-grow:1;margin-top:0;padding:1rem}body>header{flex-basis:100%;min-height:4rem;max-height:-webkit-max-content;max-height:-moz-max-content;max-height:max-content}body>main{-webkit-box-flex:1000;flex-grow:1000;flex-basis:45ch;min-height:calc(100vh - 10rem)}body>footer{flex-basis:100%}#skip-to-content{position:absolute;max-width:33%;left:0;right:0;margin-left:auto;margin-right:auto;background:#fff;padding:1ch;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;text-align:center}#skip-to-content,[data-kontour-section=kontourHeader]{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}[data-kontour-section=kontourHeader]{flex-wrap:wrap;-webkit-box-pack:end;justify-content:flex-end;padding:0}[data-kontour-section=kontourHeader] *{margin-top:0}[data-kontour-section=kontourHeader]>*{padding:.5rem}[data-kontour-section=kontourHeader]>:first-child{margin-right:auto}[data-kontour-menu-expanded] [data-kontour-section=kontourHeader]>:first-child{margin-left:4rem}[data-kontour-menu-expanded] [data-kontour-section=kontourNav]{flex-basis:100%}[data-kontour-section=kontourNav]>button{width:4rem;padding:1ch;line-height:0}[data-kontour-menu-expanded] [data-kontour-section=kontourNav]>button{position:absolute;top:0;left:0}[data-kontour-section=kontourNav]>button+*{margin-top:0}[data-kontour-section=kontourWidgets]{-webkit-box-flex:500;flex-grow:500;flex-basis:0;display:-webkit-box;display:flex;flex-wrap:wrap;align-content:flex-start;padding:0}[data-kontour-section=kontourWidgets]>*{-webkit-box-flex:1;flex-grow:1;margin-top:0;padding:1rem}[data-kontour-section=kontourFooter]{display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-pack:center;justify-content:center;-webkit-box-align:baseline;align-items:baseline;align-content:center;padding:.5rem}[data-kontour-section=kontourFooter]>*{margin:.25rem;padding:.25rem;text-align:center}header[data-kontour-section=kontourToolHeader]+*{margin-top:1rem}[data-kontour-section=kontourStickyActions]{position:-webkit-sticky;position:sticky;top:0;bottom:0}.error,.list-unstyled,[data-kontour-widget] ol,[data-kontour-widget] ul,[id*=error],[id*=Error],ol[data-kontour-widget],ul[data-kontour-widget]{list-style:none;padding:0}.button-reset,[data-kontour-section=kontourNav]>button,[data-kontour-widget=userAccount] button{border:none;background:none;color:inherit}.columns-narrow{-webkit-column-width:20ch;-moz-column-width:20ch;column-width:20ch}.columns-readable{-webkit-column-width:45ch;-moz-column-width:45ch;column-width:45ch}button,input,select,textarea{font-size:inherit;line-height:inherit}[type=email],[type=password],[type=text],fieldset,textarea{width:100%;max-width:65ch}[type=email],[type=password]{max-width:35ch}input,select,textarea{border-width:1px;padding:.1em}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:red;border-style:solid}[data-kontour-unload-prevented=true] input[data-kontour-dirty=true],[data-kontour-unload-prevented=true] select[data-kontour-dirty=true],[data-kontour-unload-prevented=true] textarea[data-kontour-dirty=true]{border-color:orange;border-style:solid}.error,[id*=error],[id*=Error]{margin-top:0;color:red}fieldset{border:1px solid #e6e6e6}[data-checked-radio] label{display:block}.button,.button-destructive,.button-link,.button-primary,[data-kontour-button=create],[data-kontour-button=destroy],[data-kontour-button=link],[data-kontour-button=update],[data-kontour-button]{color:#00f;background:transparent;display:inline-block;border:1px solid;border-radius:.1em;text-decoration:none;padding-top:.1em;padding-bottom:.1em}.button-destructive:focus,.button-link:focus,.button-primary:focus,.button:focus,[data-kontour-button=create]:focus,[data-kontour-button=destroy]:focus,[data-kontour-button=link]:focus,[data-kontour-button=update]:focus,[data-kontour-button]:focus{outline:none;box-shadow:0 0 0 .2rem #99f}.button-destructive:active,.button-link:active,.button-primary:active,.button:active,[data-kontour-button=create]:active,[data-kontour-button=destroy]:active,[data-kontour-button=link]:active,[data-kontour-button=update]:active,[data-kontour-button]:active{color:#00f;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}.button-destructive:disabled,.button-link:disabled,.button-primary:disabled,.button.disabled,.button:disabled,.disabled.button-destructive,.disabled.button-link,.disabled.button-primary,.disabled[data-kontour-button=create],.disabled[data-kontour-button=destroy],.disabled[data-kontour-button=link],.disabled[data-kontour-button=update],.disabled[data-kontour-button],[data-kontour-button=create]:disabled,[data-kontour-button=destroy]:disabled,[data-kontour-button=link]:disabled,[data-kontour-button=update]:disabled,[data-kontour-button]:disabled,fieldset:disabled .button,fieldset:disabled .button-destructive,fieldset:disabled .button-link,fieldset:disabled .button-primary,fieldset:disabled [data-kontour-button=create],fieldset:disabled [data-kontour-button=destroy],fieldset:disabled [data-kontour-button=link],fieldset:disabled [data-kontour-button=update],fieldset:disabled [data-kontour-button]{pointer-events:none;background-color:grey;border-color:transparent;box-shadow:none}.button-primary,[data-kontour-button=create],[data-kontour-button=update]{color:#fff;background-color:#00f;border-color:#00f}.button-primary:active,[data-kontour-button=create]:active,[data-kontour-button=update]:active{color:#fff}.button-destructive,[data-kontour-button=destroy]{color:red;border-color:red}.button-destructive:focus,[data-kontour-button=destroy]:focus{box-shadow:0 0 0 .2rem #f99}.button-destructive:active,[data-kontour-button=destroy]:active{color:red;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}.button-destructive.button-primary,.button-destructive[data-kontour-button=create],.button-destructive[data-kontour-button=update],.button-primary[data-kontour-button=destroy],[data-kontour-button=create][data-kontour-button=destroy],[data-kontour-button=update][data-kontour-button=destroy]{background-color:red;border-color:red;color:#fff}.button-destructive.button-primary:active,.button-destructive[data-kontour-button=create]:active,.button-destructive[data-kontour-button=update]:active,.button-primary[data-kontour-button=destroy]:active,[data-kontour-button=create][data-kontour-button=destroy]:active,[data-kontour-button=update][data-kontour-button=destroy]:active{color:#fff}.button-link,[data-kontour-button=link]{border-color:transparent;background-color:transparent;text-decoration:underline}.button-link:focus,[data-kontour-button=link]:focus{text-decoration:none}.button-link:active,[data-kontour-button=link]:active{box-shadow:none;text-decoration:none}.button-link:disabled,[data-kontour-button=link]:disabled{text-decoration:none}[data-kontour-widget=crumbtrail]>*{display:-webkit-box;display:flex;flex-wrap:wrap;list-style:none;padding:0}[data-kontour-widget=crumbtrail] li{white-space:pre-line}[data-kontour-widget=crumbtrail] *+li:before{content:"\2192";padding-left:.5rem;padding-right:.5rem}[data-kontour-widget=menu] small{color:grey}[data-kontour-widget=menu] li ul{margin-top:0;padding-left:1ch}[data-kontour-widget=menu] [aria-current]>a{position:relative}[data-kontour-widget=menu] [aria-current]>a:before{content:" \2023";position:absolute;left:calc(100% + .5ch)}[data-kontour-widget=userAccount]{color:grey;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}[data-kontour-widget=userAccount] form{line-height:0}[data-kontour-widget=userAccount] button{width:3ch;padding:0;margin-left:.5ch}[data-kontour-widget=userAccount] polygon{fill:currentColor}[data-kontour-widget=message] [data-kontour-message-level=info],[data-kontour-widget=message] [data-kontour-message-level=success]{color:green}[data-kontour-widget=message] [data-kontour-message-level=warning]{color:orange}[data-kontour-widget=message] [data-kontour-message-level=error]{color:red}[data-kontour-widget$=RecentVisits] a{white-space:nowrap;overflow:hidden;text-overflow:fade;display:inline-block;max-width:30ch}.sr-only-focusable:not(:focus-within):not(:active){position:absolute;-webkit-clip-path:inset(50%);clip-path:inset(50%)}.sr-only:not(:focus):not(:active){position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap} \ No newline at end of file +html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}*,body{margin:0;background-color:#fff;color:#000}*+*{margin-top:1rem}a,abbr,acronym,audio *,b,bdo,big,br,cite,code,del,dfn,dt+*,em,figure *,h2+*,h3+*,h4+*,h5+*,h6+*,header+:last-child,hgroup h1+*,i,ins,kbd,label,label+*,legend+*,li+*,map,map *,object *,picture *,q,samp,select *,small,span,strong,sub,sup,table *,time,tt,var,video *{margin-top:0}img{max-width:100%;height:auto}dl>*{-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}dl>div{margin-top:0;padding-bottom:1rem}dt{-webkit-column-break-after:avoid;-moz-column-break-after:avoid;break-after:avoid}dd{-webkit-column-break-before:avoid;-moz-column-break-before:avoid;break-before:avoid}body{font-family:system-ui,sans-serif;line-height:1.6}header{border-bottom:1px solid #e6e6e6}body>main{border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6}body>footer{background:#f2f2f2}[aria-current=page],[aria-current=page] a{text-decoration:none}[data-kontour-section=kontourHeader]>:first-child{font-size:1.5em;color:grey;text-decoration:none}[data-kontour-section=kontourNav]>button rect{fill:currentColor}[data-kontour-section=kontourNav] [aria-expanded=true] svg .bottom,[data-kontour-section=kontourNav] [aria-expanded=true] svg .top{visibility:hidden}[data-kontour-widget] header{color:grey}[data-kontour-widget] a{color:inherit}[data-kontour-section=kontourStickyActions]{background-color:#f2f2f2;color:#000;padding:1rem}body{min-height:100vh;display:-webkit-box;display:flex;flex-wrap:wrap}body>*{-webkit-box-flex:1;flex-grow:1;margin-top:0;padding:1rem}body>header{flex-basis:100%;min-height:4rem;max-height:-webkit-max-content;max-height:-moz-max-content;max-height:max-content}body>main{-webkit-box-flex:1000;flex-grow:1000;flex-basis:45ch;min-height:calc(100vh - 10rem)}body>footer{flex-basis:100%}#skip-to-content{position:fixed;max-width:33%;top:.5rem;left:0;right:0;margin-left:auto;margin-right:auto;background:#fff;padding:1ch;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;text-align:center}#skip-to-content,[data-kontour-section=kontourHeader]{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}[data-kontour-section=kontourHeader]{flex-wrap:wrap;-webkit-box-pack:end;justify-content:flex-end;padding:0}[data-kontour-section=kontourHeader] *{margin-top:0}[data-kontour-section=kontourHeader]>*{padding:.5rem}[data-kontour-section=kontourHeader]>:first-child{margin-right:auto}[data-kontour-menu-expanded] [data-kontour-section=kontourHeader]>:first-child{margin-left:4rem}[data-kontour-menu-expanded] [data-kontour-section=kontourNav]{flex-basis:100%}[data-kontour-section=kontourNav]>button{width:4rem;padding:1ch;line-height:0}[data-kontour-menu-expanded] [data-kontour-section=kontourNav]>button{position:absolute;top:0;left:0}[data-kontour-section=kontourNav]>button+*{margin-top:0}[data-kontour-section=kontourWidgets]{-webkit-box-flex:500;flex-grow:500;flex-basis:0;display:-webkit-box;display:flex;flex-wrap:wrap;align-content:flex-start;padding:0}[data-kontour-section=kontourWidgets]>*{-webkit-box-flex:1;flex-grow:1;margin-top:0;padding:1rem}[data-kontour-section=kontourFooter]{display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-pack:center;justify-content:center;-webkit-box-align:baseline;align-items:baseline;align-content:center;padding:.5rem}[data-kontour-section=kontourFooter]>*{margin:.25rem;padding:.25rem;text-align:center}header[data-kontour-section=kontourToolHeader]+*{margin-top:1rem}[data-kontour-section=kontourStickyActions]{position:-webkit-sticky;position:sticky;top:0;bottom:0}.error,.list-unstyled,[data-kontour-widget] ol,[data-kontour-widget] ul,[id*=error],[id*=Error],ol[data-kontour-widget],ul[data-kontour-widget]{list-style:none;padding:0}.button-reset,[data-kontour-section=kontourNav]>button,[data-kontour-widget=userAccount] button{border:none;background:none;color:inherit}.columns-narrow{-webkit-column-width:20ch;-moz-column-width:20ch;column-width:20ch}.columns-readable{-webkit-column-width:45ch;-moz-column-width:45ch;column-width:45ch}button,input,select,textarea{font-size:inherit;line-height:inherit}[type=email],[type=password],[type=text],fieldset,textarea{width:100%;max-width:65ch}[type=email],[type=password]{max-width:35ch}input,select,textarea{border-width:1px;padding:.1em}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:red;border-style:solid}[data-kontour-unload-prevented=true] input[data-kontour-dirty=true],[data-kontour-unload-prevented=true] select[data-kontour-dirty=true],[data-kontour-unload-prevented=true] textarea[data-kontour-dirty=true]{border-color:orange;border-style:solid}.error,[id*=error],[id*=Error]{margin-top:0;color:red}fieldset{border:1px solid #e6e6e6}[data-checked-radio] label{display:block}.button,.button-destructive,.button-link,.button-primary,[data-kontour-button=create],[data-kontour-button=destroy],[data-kontour-button=link],[data-kontour-button=update],[data-kontour-button]{color:#00f;background:transparent;display:inline-block;border:1px solid;border-radius:.1em;text-decoration:none;padding-top:.1em;padding-bottom:.1em}.button-destructive:focus,.button-link:focus,.button-primary:focus,.button:focus,[data-kontour-button=create]:focus,[data-kontour-button=destroy]:focus,[data-kontour-button=link]:focus,[data-kontour-button=update]:focus,[data-kontour-button]:focus{outline:none;box-shadow:0 0 0 .2rem #99f}.button-destructive:active,.button-link:active,.button-primary:active,.button:active,[data-kontour-button=create]:active,[data-kontour-button=destroy]:active,[data-kontour-button=link]:active,[data-kontour-button=update]:active,[data-kontour-button]:active{color:#00f;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}.button-destructive:disabled,.button-link:disabled,.button-primary:disabled,.button.disabled,.button:disabled,.disabled.button-destructive,.disabled.button-link,.disabled.button-primary,.disabled[data-kontour-button=create],.disabled[data-kontour-button=destroy],.disabled[data-kontour-button=link],.disabled[data-kontour-button=update],.disabled[data-kontour-button],[data-kontour-button=create]:disabled,[data-kontour-button=destroy]:disabled,[data-kontour-button=link]:disabled,[data-kontour-button=update]:disabled,[data-kontour-button]:disabled,fieldset:disabled .button,fieldset:disabled .button-destructive,fieldset:disabled .button-link,fieldset:disabled .button-primary,fieldset:disabled [data-kontour-button=create],fieldset:disabled [data-kontour-button=destroy],fieldset:disabled [data-kontour-button=link],fieldset:disabled [data-kontour-button=update],fieldset:disabled [data-kontour-button]{pointer-events:none;background-color:grey;border-color:transparent;box-shadow:none}.button-primary,[data-kontour-button=create],[data-kontour-button=update]{color:#fff;background-color:#00f;border-color:#00f}.button-primary:active,[data-kontour-button=create]:active,[data-kontour-button=update]:active{color:#fff}.button-destructive,[data-kontour-button=destroy]{color:red;border-color:red}.button-destructive:focus,[data-kontour-button=destroy]:focus{box-shadow:0 0 0 .2rem #f99}.button-destructive:active,[data-kontour-button=destroy]:active{color:red;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}.button-destructive.button-primary,.button-destructive[data-kontour-button=create],.button-destructive[data-kontour-button=update],.button-primary[data-kontour-button=destroy],[data-kontour-button=create][data-kontour-button=destroy],[data-kontour-button=update][data-kontour-button=destroy]{background-color:red;border-color:red;color:#fff}.button-destructive.button-primary:active,.button-destructive[data-kontour-button=create]:active,.button-destructive[data-kontour-button=update]:active,.button-primary[data-kontour-button=destroy]:active,[data-kontour-button=create][data-kontour-button=destroy]:active,[data-kontour-button=update][data-kontour-button=destroy]:active{color:#fff}.button-link,[data-kontour-button=link]{border-color:transparent;background-color:transparent;text-decoration:underline}.button-link:focus,[data-kontour-button=link]:focus{text-decoration:none}.button-link:active,[data-kontour-button=link]:active{box-shadow:none;text-decoration:none}.button-link:disabled,[data-kontour-button=link]:disabled{text-decoration:none}[data-kontour-widget=crumbtrail]>*{display:-webkit-box;display:flex;flex-wrap:wrap;list-style:none;padding:0}[data-kontour-widget=crumbtrail] li{white-space:pre-line}[data-kontour-widget=crumbtrail] *+li:before{content:"\2192";padding-left:.5rem;padding-right:.5rem}[data-kontour-widget=menu] small{color:grey}[data-kontour-widget=menu] li ul{margin-top:0;padding-left:1ch}[data-kontour-widget=menu] [aria-current]>a{position:relative}[data-kontour-widget=menu] [aria-current]>a:before{content:" \2023";position:absolute;left:calc(100% + .5ch)}[data-kontour-widget=userAccount]{color:grey;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}[data-kontour-widget=userAccount] form{line-height:0}[data-kontour-widget=userAccount] button{width:3ch;padding:0;margin-left:.5ch}[data-kontour-widget=userAccount] polygon{fill:currentColor}[data-kontour-widget=message] [data-kontour-message-level=info],[data-kontour-widget=message] [data-kontour-message-level=success]{color:green}[data-kontour-widget=message] [data-kontour-message-level=warning]{color:orange}[data-kontour-widget=message] [data-kontour-message-level=error]{color:red}[data-kontour-widget$=RecentVisits] a{white-space:nowrap;overflow:hidden;text-overflow:fade;display:inline-block;max-width:30ch}.sr-only-focusable:not(:focus-within):not(:active){position:absolute;-webkit-clip-path:inset(50%);clip-path:inset(50%)}.sr-only:not(:focus):not(:active){position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap} \ No newline at end of file From 1254b3cbf8c0da68dec2b1e897420992660ab588 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Mon, 4 May 2020 19:13:10 +0200 Subject: [PATCH 12/14] Improve comments --- resources/sass/_screenreaders.scss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/resources/sass/_screenreaders.scss b/resources/sass/_screenreaders.scss index f0c7e7dd..35693a56 100644 --- a/resources/sass/_screenreaders.scss +++ b/resources/sass/_screenreaders.scss @@ -1,7 +1,11 @@ // Utilities for screenreaders /* - * Visually hide element until it or anything inside receives focus. + * Visually hide any element until it, or anything inside, receives focus. + * + * This can be useful to hide a non-interactive element grouping + * some interactive elements, revealing them all together. + * * Warning: Has no effect in IE or pre-chromium Edge! */ .sr-only-focusable:not(:focus-within):not(:active) { @@ -10,7 +14,11 @@ } /* - * Visually hide element until it receives focus. + * Visually hide an element, until it receives focus. + * + * This has good browser compatibility but doesn't work when + * the element has any focusable descendants. + * * Supports IE9+ */ .sr-only:not(:focus):not(:active) { From 02f446c87098572d65b90409e9a3df478c45f9e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Mon, 4 May 2020 19:15:12 +0200 Subject: [PATCH 13/14] Declare the more common utility first --- resources/sass/_screenreaders.scss | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/resources/sass/_screenreaders.scss b/resources/sass/_screenreaders.scss index 35693a56..071bf24a 100644 --- a/resources/sass/_screenreaders.scss +++ b/resources/sass/_screenreaders.scss @@ -1,18 +1,5 @@ // Utilities for screenreaders -/* - * Visually hide any element until it, or anything inside, receives focus. - * - * This can be useful to hide a non-interactive element grouping - * some interactive elements, revealing them all together. - * - * Warning: Has no effect in IE or pre-chromium Edge! - */ -.sr-only-focusable:not(:focus-within):not(:active) { - position: absolute; - clip-path: inset(50%); -} - /* * Visually hide an element, until it receives focus. * @@ -33,3 +20,16 @@ overflow: hidden; white-space: nowrap; } + +/* + * Visually hide any element until it, or anything inside, receives focus. + * + * This can be useful to hide a non-interactive element grouping + * some interactive elements, revealing them all together. + * + * Warning: Has no effect in IE or pre-chromium Edge! + */ +.sr-only-focusable:not(:focus-within):not(:active) { + position: absolute; + clip-path: inset(50%); +} From 801339f053e3403e08b8a98334679f1a750d00d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Mon, 4 May 2020 19:15:41 +0200 Subject: [PATCH 14/14] Build assets for production --- resources/css/kontour.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/css/kontour.css b/resources/css/kontour.css index 2383a431..3d89ecd6 100644 --- a/resources/css/kontour.css +++ b/resources/css/kontour.css @@ -1 +1 @@ -html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}*,body{margin:0;background-color:#fff;color:#000}*+*{margin-top:1rem}a,abbr,acronym,audio *,b,bdo,big,br,cite,code,del,dfn,dt+*,em,figure *,h2+*,h3+*,h4+*,h5+*,h6+*,header+:last-child,hgroup h1+*,i,ins,kbd,label,label+*,legend+*,li+*,map,map *,object *,picture *,q,samp,select *,small,span,strong,sub,sup,table *,time,tt,var,video *{margin-top:0}img{max-width:100%;height:auto}dl>*{-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}dl>div{margin-top:0;padding-bottom:1rem}dt{-webkit-column-break-after:avoid;-moz-column-break-after:avoid;break-after:avoid}dd{-webkit-column-break-before:avoid;-moz-column-break-before:avoid;break-before:avoid}body{font-family:system-ui,sans-serif;line-height:1.6}header{border-bottom:1px solid #e6e6e6}body>main{border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6}body>footer{background:#f2f2f2}[aria-current=page],[aria-current=page] a{text-decoration:none}[data-kontour-section=kontourHeader]>:first-child{font-size:1.5em;color:grey;text-decoration:none}[data-kontour-section=kontourNav]>button rect{fill:currentColor}[data-kontour-section=kontourNav] [aria-expanded=true] svg .bottom,[data-kontour-section=kontourNav] [aria-expanded=true] svg .top{visibility:hidden}[data-kontour-widget] header{color:grey}[data-kontour-widget] a{color:inherit}[data-kontour-section=kontourStickyActions]{background-color:#f2f2f2;color:#000;padding:1rem}body{min-height:100vh;display:-webkit-box;display:flex;flex-wrap:wrap}body>*{-webkit-box-flex:1;flex-grow:1;margin-top:0;padding:1rem}body>header{flex-basis:100%;min-height:4rem;max-height:-webkit-max-content;max-height:-moz-max-content;max-height:max-content}body>main{-webkit-box-flex:1000;flex-grow:1000;flex-basis:45ch;min-height:calc(100vh - 10rem)}body>footer{flex-basis:100%}#skip-to-content{position:fixed;max-width:33%;top:.5rem;left:0;right:0;margin-left:auto;margin-right:auto;background:#fff;padding:1ch;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;text-align:center}#skip-to-content,[data-kontour-section=kontourHeader]{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}[data-kontour-section=kontourHeader]{flex-wrap:wrap;-webkit-box-pack:end;justify-content:flex-end;padding:0}[data-kontour-section=kontourHeader] *{margin-top:0}[data-kontour-section=kontourHeader]>*{padding:.5rem}[data-kontour-section=kontourHeader]>:first-child{margin-right:auto}[data-kontour-menu-expanded] [data-kontour-section=kontourHeader]>:first-child{margin-left:4rem}[data-kontour-menu-expanded] [data-kontour-section=kontourNav]{flex-basis:100%}[data-kontour-section=kontourNav]>button{width:4rem;padding:1ch;line-height:0}[data-kontour-menu-expanded] [data-kontour-section=kontourNav]>button{position:absolute;top:0;left:0}[data-kontour-section=kontourNav]>button+*{margin-top:0}[data-kontour-section=kontourWidgets]{-webkit-box-flex:500;flex-grow:500;flex-basis:0;display:-webkit-box;display:flex;flex-wrap:wrap;align-content:flex-start;padding:0}[data-kontour-section=kontourWidgets]>*{-webkit-box-flex:1;flex-grow:1;margin-top:0;padding:1rem}[data-kontour-section=kontourFooter]{display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-pack:center;justify-content:center;-webkit-box-align:baseline;align-items:baseline;align-content:center;padding:.5rem}[data-kontour-section=kontourFooter]>*{margin:.25rem;padding:.25rem;text-align:center}header[data-kontour-section=kontourToolHeader]+*{margin-top:1rem}[data-kontour-section=kontourStickyActions]{position:-webkit-sticky;position:sticky;top:0;bottom:0}.error,.list-unstyled,[data-kontour-widget] ol,[data-kontour-widget] ul,[id*=error],[id*=Error],ol[data-kontour-widget],ul[data-kontour-widget]{list-style:none;padding:0}.button-reset,[data-kontour-section=kontourNav]>button,[data-kontour-widget=userAccount] button{border:none;background:none;color:inherit}.columns-narrow{-webkit-column-width:20ch;-moz-column-width:20ch;column-width:20ch}.columns-readable{-webkit-column-width:45ch;-moz-column-width:45ch;column-width:45ch}button,input,select,textarea{font-size:inherit;line-height:inherit}[type=email],[type=password],[type=text],fieldset,textarea{width:100%;max-width:65ch}[type=email],[type=password]{max-width:35ch}input,select,textarea{border-width:1px;padding:.1em}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:red;border-style:solid}[data-kontour-unload-prevented=true] input[data-kontour-dirty=true],[data-kontour-unload-prevented=true] select[data-kontour-dirty=true],[data-kontour-unload-prevented=true] textarea[data-kontour-dirty=true]{border-color:orange;border-style:solid}.error,[id*=error],[id*=Error]{margin-top:0;color:red}fieldset{border:1px solid #e6e6e6}[data-checked-radio] label{display:block}.button,.button-destructive,.button-link,.button-primary,[data-kontour-button=create],[data-kontour-button=destroy],[data-kontour-button=link],[data-kontour-button=update],[data-kontour-button]{color:#00f;background:transparent;display:inline-block;border:1px solid;border-radius:.1em;text-decoration:none;padding-top:.1em;padding-bottom:.1em}.button-destructive:focus,.button-link:focus,.button-primary:focus,.button:focus,[data-kontour-button=create]:focus,[data-kontour-button=destroy]:focus,[data-kontour-button=link]:focus,[data-kontour-button=update]:focus,[data-kontour-button]:focus{outline:none;box-shadow:0 0 0 .2rem #99f}.button-destructive:active,.button-link:active,.button-primary:active,.button:active,[data-kontour-button=create]:active,[data-kontour-button=destroy]:active,[data-kontour-button=link]:active,[data-kontour-button=update]:active,[data-kontour-button]:active{color:#00f;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}.button-destructive:disabled,.button-link:disabled,.button-primary:disabled,.button.disabled,.button:disabled,.disabled.button-destructive,.disabled.button-link,.disabled.button-primary,.disabled[data-kontour-button=create],.disabled[data-kontour-button=destroy],.disabled[data-kontour-button=link],.disabled[data-kontour-button=update],.disabled[data-kontour-button],[data-kontour-button=create]:disabled,[data-kontour-button=destroy]:disabled,[data-kontour-button=link]:disabled,[data-kontour-button=update]:disabled,[data-kontour-button]:disabled,fieldset:disabled .button,fieldset:disabled .button-destructive,fieldset:disabled .button-link,fieldset:disabled .button-primary,fieldset:disabled [data-kontour-button=create],fieldset:disabled [data-kontour-button=destroy],fieldset:disabled [data-kontour-button=link],fieldset:disabled [data-kontour-button=update],fieldset:disabled [data-kontour-button]{pointer-events:none;background-color:grey;border-color:transparent;box-shadow:none}.button-primary,[data-kontour-button=create],[data-kontour-button=update]{color:#fff;background-color:#00f;border-color:#00f}.button-primary:active,[data-kontour-button=create]:active,[data-kontour-button=update]:active{color:#fff}.button-destructive,[data-kontour-button=destroy]{color:red;border-color:red}.button-destructive:focus,[data-kontour-button=destroy]:focus{box-shadow:0 0 0 .2rem #f99}.button-destructive:active,[data-kontour-button=destroy]:active{color:red;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}.button-destructive.button-primary,.button-destructive[data-kontour-button=create],.button-destructive[data-kontour-button=update],.button-primary[data-kontour-button=destroy],[data-kontour-button=create][data-kontour-button=destroy],[data-kontour-button=update][data-kontour-button=destroy]{background-color:red;border-color:red;color:#fff}.button-destructive.button-primary:active,.button-destructive[data-kontour-button=create]:active,.button-destructive[data-kontour-button=update]:active,.button-primary[data-kontour-button=destroy]:active,[data-kontour-button=create][data-kontour-button=destroy]:active,[data-kontour-button=update][data-kontour-button=destroy]:active{color:#fff}.button-link,[data-kontour-button=link]{border-color:transparent;background-color:transparent;text-decoration:underline}.button-link:focus,[data-kontour-button=link]:focus{text-decoration:none}.button-link:active,[data-kontour-button=link]:active{box-shadow:none;text-decoration:none}.button-link:disabled,[data-kontour-button=link]:disabled{text-decoration:none}[data-kontour-widget=crumbtrail]>*{display:-webkit-box;display:flex;flex-wrap:wrap;list-style:none;padding:0}[data-kontour-widget=crumbtrail] li{white-space:pre-line}[data-kontour-widget=crumbtrail] *+li:before{content:"\2192";padding-left:.5rem;padding-right:.5rem}[data-kontour-widget=menu] small{color:grey}[data-kontour-widget=menu] li ul{margin-top:0;padding-left:1ch}[data-kontour-widget=menu] [aria-current]>a{position:relative}[data-kontour-widget=menu] [aria-current]>a:before{content:" \2023";position:absolute;left:calc(100% + .5ch)}[data-kontour-widget=userAccount]{color:grey;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}[data-kontour-widget=userAccount] form{line-height:0}[data-kontour-widget=userAccount] button{width:3ch;padding:0;margin-left:.5ch}[data-kontour-widget=userAccount] polygon{fill:currentColor}[data-kontour-widget=message] [data-kontour-message-level=info],[data-kontour-widget=message] [data-kontour-message-level=success]{color:green}[data-kontour-widget=message] [data-kontour-message-level=warning]{color:orange}[data-kontour-widget=message] [data-kontour-message-level=error]{color:red}[data-kontour-widget$=RecentVisits] a{white-space:nowrap;overflow:hidden;text-overflow:fade;display:inline-block;max-width:30ch}.sr-only-focusable:not(:focus-within):not(:active){position:absolute;-webkit-clip-path:inset(50%);clip-path:inset(50%)}.sr-only:not(:focus):not(:active){position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap} \ No newline at end of file +html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}*,body{margin:0;background-color:#fff;color:#000}*+*{margin-top:1rem}a,abbr,acronym,audio *,b,bdo,big,br,cite,code,del,dfn,dt+*,em,figure *,h2+*,h3+*,h4+*,h5+*,h6+*,header+:last-child,hgroup h1+*,i,ins,kbd,label,label+*,legend+*,li+*,map,map *,object *,picture *,q,samp,select *,small,span,strong,sub,sup,table *,time,tt,var,video *{margin-top:0}img{max-width:100%;height:auto}dl>*{-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}dl>div{margin-top:0;padding-bottom:1rem}dt{-webkit-column-break-after:avoid;-moz-column-break-after:avoid;break-after:avoid}dd{-webkit-column-break-before:avoid;-moz-column-break-before:avoid;break-before:avoid}body{font-family:system-ui,sans-serif;line-height:1.6}header{border-bottom:1px solid #e6e6e6}body>main{border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6}body>footer{background:#f2f2f2}[aria-current=page],[aria-current=page] a{text-decoration:none}[data-kontour-section=kontourHeader]>:first-child{font-size:1.5em;color:grey;text-decoration:none}[data-kontour-section=kontourNav]>button rect{fill:currentColor}[data-kontour-section=kontourNav] [aria-expanded=true] svg .bottom,[data-kontour-section=kontourNav] [aria-expanded=true] svg .top{visibility:hidden}[data-kontour-widget] header{color:grey}[data-kontour-widget] a{color:inherit}[data-kontour-section=kontourStickyActions]{background-color:#f2f2f2;color:#000;padding:1rem}body{min-height:100vh;display:-webkit-box;display:flex;flex-wrap:wrap}body>*{-webkit-box-flex:1;flex-grow:1;margin-top:0;padding:1rem}body>header{flex-basis:100%;min-height:4rem;max-height:-webkit-max-content;max-height:-moz-max-content;max-height:max-content}body>main{-webkit-box-flex:1000;flex-grow:1000;flex-basis:45ch;min-height:calc(100vh - 10rem)}body>footer{flex-basis:100%}#skip-to-content{position:fixed;max-width:33%;top:.5rem;left:0;right:0;margin-left:auto;margin-right:auto;background:#fff;padding:1ch;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;text-align:center}#skip-to-content,[data-kontour-section=kontourHeader]{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}[data-kontour-section=kontourHeader]{flex-wrap:wrap;-webkit-box-pack:end;justify-content:flex-end;padding:0}[data-kontour-section=kontourHeader] *{margin-top:0}[data-kontour-section=kontourHeader]>*{padding:.5rem}[data-kontour-section=kontourHeader]>:first-child{margin-right:auto}[data-kontour-menu-expanded] [data-kontour-section=kontourHeader]>:first-child{margin-left:4rem}[data-kontour-menu-expanded] [data-kontour-section=kontourNav]{flex-basis:100%}[data-kontour-section=kontourNav]>button{width:4rem;padding:1ch;line-height:0}[data-kontour-menu-expanded] [data-kontour-section=kontourNav]>button{position:absolute;top:0;left:0}[data-kontour-section=kontourNav]>button+*{margin-top:0}[data-kontour-section=kontourWidgets]{-webkit-box-flex:500;flex-grow:500;flex-basis:0;display:-webkit-box;display:flex;flex-wrap:wrap;align-content:flex-start;padding:0}[data-kontour-section=kontourWidgets]>*{-webkit-box-flex:1;flex-grow:1;margin-top:0;padding:1rem}[data-kontour-section=kontourFooter]{display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-pack:center;justify-content:center;-webkit-box-align:baseline;align-items:baseline;align-content:center;padding:.5rem}[data-kontour-section=kontourFooter]>*{margin:.25rem;padding:.25rem;text-align:center}header[data-kontour-section=kontourToolHeader]+*{margin-top:1rem}[data-kontour-section=kontourStickyActions]{position:-webkit-sticky;position:sticky;top:0;bottom:0}.error,.list-unstyled,[data-kontour-widget] ol,[data-kontour-widget] ul,[id*=error],[id*=Error],ol[data-kontour-widget],ul[data-kontour-widget]{list-style:none;padding:0}.button-reset,[data-kontour-section=kontourNav]>button,[data-kontour-widget=userAccount] button{border:none;background:none;color:inherit}.columns-narrow{-webkit-column-width:20ch;-moz-column-width:20ch;column-width:20ch}.columns-readable{-webkit-column-width:45ch;-moz-column-width:45ch;column-width:45ch}button,input,select,textarea{font-size:inherit;line-height:inherit}[type=email],[type=password],[type=text],fieldset,textarea{width:100%;max-width:65ch}[type=email],[type=password]{max-width:35ch}input,select,textarea{border-width:1px;padding:.1em}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:red;border-style:solid}[data-kontour-unload-prevented=true] input[data-kontour-dirty=true],[data-kontour-unload-prevented=true] select[data-kontour-dirty=true],[data-kontour-unload-prevented=true] textarea[data-kontour-dirty=true]{border-color:orange;border-style:solid}.error,[id*=error],[id*=Error]{margin-top:0;color:red}fieldset{border:1px solid #e6e6e6}[data-checked-radio] label{display:block}.button,.button-destructive,.button-link,.button-primary,[data-kontour-button=create],[data-kontour-button=destroy],[data-kontour-button=link],[data-kontour-button=update],[data-kontour-button]{color:#00f;background:transparent;display:inline-block;border:1px solid;border-radius:.1em;text-decoration:none;padding-top:.1em;padding-bottom:.1em}.button-destructive:focus,.button-link:focus,.button-primary:focus,.button:focus,[data-kontour-button=create]:focus,[data-kontour-button=destroy]:focus,[data-kontour-button=link]:focus,[data-kontour-button=update]:focus,[data-kontour-button]:focus{outline:none;box-shadow:0 0 0 .2rem #99f}.button-destructive:active,.button-link:active,.button-primary:active,.button:active,[data-kontour-button=create]:active,[data-kontour-button=destroy]:active,[data-kontour-button=link]:active,[data-kontour-button=update]:active,[data-kontour-button]:active{color:#00f;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}.button-destructive:disabled,.button-link:disabled,.button-primary:disabled,.button.disabled,.button:disabled,.disabled.button-destructive,.disabled.button-link,.disabled.button-primary,.disabled[data-kontour-button=create],.disabled[data-kontour-button=destroy],.disabled[data-kontour-button=link],.disabled[data-kontour-button=update],.disabled[data-kontour-button],[data-kontour-button=create]:disabled,[data-kontour-button=destroy]:disabled,[data-kontour-button=link]:disabled,[data-kontour-button=update]:disabled,[data-kontour-button]:disabled,fieldset:disabled .button,fieldset:disabled .button-destructive,fieldset:disabled .button-link,fieldset:disabled .button-primary,fieldset:disabled [data-kontour-button=create],fieldset:disabled [data-kontour-button=destroy],fieldset:disabled [data-kontour-button=link],fieldset:disabled [data-kontour-button=update],fieldset:disabled [data-kontour-button]{pointer-events:none;background-color:grey;border-color:transparent;box-shadow:none}.button-primary,[data-kontour-button=create],[data-kontour-button=update]{color:#fff;background-color:#00f;border-color:#00f}.button-primary:active,[data-kontour-button=create]:active,[data-kontour-button=update]:active{color:#fff}.button-destructive,[data-kontour-button=destroy]{color:red;border-color:red}.button-destructive:focus,[data-kontour-button=destroy]:focus{box-shadow:0 0 0 .2rem #f99}.button-destructive:active,[data-kontour-button=destroy]:active{color:red;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}.button-destructive.button-primary,.button-destructive[data-kontour-button=create],.button-destructive[data-kontour-button=update],.button-primary[data-kontour-button=destroy],[data-kontour-button=create][data-kontour-button=destroy],[data-kontour-button=update][data-kontour-button=destroy]{background-color:red;border-color:red;color:#fff}.button-destructive.button-primary:active,.button-destructive[data-kontour-button=create]:active,.button-destructive[data-kontour-button=update]:active,.button-primary[data-kontour-button=destroy]:active,[data-kontour-button=create][data-kontour-button=destroy]:active,[data-kontour-button=update][data-kontour-button=destroy]:active{color:#fff}.button-link,[data-kontour-button=link]{border-color:transparent;background-color:transparent;text-decoration:underline}.button-link:focus,[data-kontour-button=link]:focus{text-decoration:none}.button-link:active,[data-kontour-button=link]:active{box-shadow:none;text-decoration:none}.button-link:disabled,[data-kontour-button=link]:disabled{text-decoration:none}[data-kontour-widget=crumbtrail]>*{display:-webkit-box;display:flex;flex-wrap:wrap;list-style:none;padding:0}[data-kontour-widget=crumbtrail] li{white-space:pre-line}[data-kontour-widget=crumbtrail] *+li:before{content:"\2192";padding-left:.5rem;padding-right:.5rem}[data-kontour-widget=menu] small{color:grey}[data-kontour-widget=menu] li ul{margin-top:0;padding-left:1ch}[data-kontour-widget=menu] [aria-current]>a{position:relative}[data-kontour-widget=menu] [aria-current]>a:before{content:" \2023";position:absolute;left:calc(100% + .5ch)}[data-kontour-widget=userAccount]{color:grey;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}[data-kontour-widget=userAccount] form{line-height:0}[data-kontour-widget=userAccount] button{width:3ch;padding:0;margin-left:.5ch}[data-kontour-widget=userAccount] polygon{fill:currentColor}[data-kontour-widget=message] [data-kontour-message-level=info],[data-kontour-widget=message] [data-kontour-message-level=success]{color:green}[data-kontour-widget=message] [data-kontour-message-level=warning]{color:orange}[data-kontour-widget=message] [data-kontour-message-level=error]{color:red}[data-kontour-widget$=RecentVisits] a{white-space:nowrap;overflow:hidden;text-overflow:fade;display:inline-block;max-width:30ch}.sr-only:not(:focus):not(:active){position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap}.sr-only-focusable:not(:focus-within):not(:active){position:absolute;-webkit-clip-path:inset(50%);clip-path:inset(50%)} \ No newline at end of file