From f33dc35272298c2b1cb450b05b2dab2e8842d4e3 Mon Sep 17 00:00:00 2001 From: swiniker Date: Thu, 17 Mar 2022 13:44:16 +0100 Subject: [PATCH] Add background to focus (#4100) * Add a border on a white background to focus * Fix Webdav View-Control * Line Break issue in mainbar on Small Screens when focused. * Fix issues from review --- .../class.ilWebDAVMountInstructionsGUI.php | 2 +- .../default/Breadcrumbs/breadcrumbs.less | 7 + src/UI/templates/default/Button/button.less | 5 +- src/UI/templates/default/Card/card.less | 15 +- src/UI/templates/default/Item/item.less | 4 + .../default/MainControls/Slate/slate.less | 8 +- .../default/MainControls/mainbar.less | 11 +- templates/default/delos.css | 306 ++++++++++++++---- templates/default/delos.less | 8 + .../less/Services/Awareness/delos.less | 2 +- .../default/less/Services/Calendar/delos.less | 4 + .../default/less/Services/Form/delos.less | 25 +- .../less/Services/UIComponent/Tabs/delos.less | 4 + .../Services/UIComponent/Toolbar/delos.less | 4 +- .../default/less/Services/WebDAV/delos.less | 4 + templates/default/less/focus-mixin.less | 29 +- templates/default/less/variables.less | 11 +- 17 files changed, 355 insertions(+), 94 deletions(-) create mode 100644 templates/default/less/Services/WebDAV/delos.less diff --git a/Services/WebDAV/classes/mount_instructions/class.ilWebDAVMountInstructionsGUI.php b/Services/WebDAV/classes/mount_instructions/class.ilWebDAVMountInstructionsGUI.php index d3106de0ee17..2e8216faf821 100644 --- a/Services/WebDAV/classes/mount_instructions/class.ilWebDAVMountInstructionsGUI.php +++ b/Services/WebDAV/classes/mount_instructions/class.ilWebDAVMountInstructionsGUI.php @@ -119,7 +119,7 @@ public function buildGUIFromGivenMountInstructions($a_mount_instructions, $a_ren // Add view control and legacy add the beginning of the array (so they will be rendered first) $header_comps = array( - $f->legacy("
"), + $f->legacy("
"), $view_control, $f->legacy("
"), $js_function_legacy); diff --git a/src/UI/templates/default/Breadcrumbs/breadcrumbs.less b/src/UI/templates/default/Breadcrumbs/breadcrumbs.less index 1ef2538d51a3..72d244cf9874 100644 --- a/src/UI/templates/default/Breadcrumbs/breadcrumbs.less +++ b/src/UI/templates/default/Breadcrumbs/breadcrumbs.less @@ -20,6 +20,13 @@ &:hover { color: @il-standard-page-breadcrumbs-active-color; } + &:focus { + border: @il-focus-outline-inner; + + &::after { + content: none; + } + } } &>span+span:before { diff --git a/src/UI/templates/default/Button/button.less b/src/UI/templates/default/Button/button.less index 37c0470c752c..6f15c2d00099 100644 --- a/src/UI/templates/default/Button/button.less +++ b/src/UI/templates/default/Button/button.less @@ -17,15 +17,12 @@ input.btn{ .btn-default { .button-variant(@il-btn-standard-color; @il-btn-standard-bg; @il-btn-standard-border); &:focus-visible { - outline-offset: @il-focus-outline-offset; + position: relative; } } .btn-primary { .button-variant(@il-btn-primary-color; @il-btn-primary-bg; @il-btn-primary-border); - &:focus-visible { - outline-offset: @il-focus-outline-offset; - } } .btn, .btn.btn-tag{ diff --git a/src/UI/templates/default/Card/card.less b/src/UI/templates/default/Card/card.less index 1ee36a2b6d93..a68ae7bfaea4 100644 --- a/src/UI/templates/default/Card/card.less +++ b/src/UI/templates/default/Card/card.less @@ -15,8 +15,16 @@ overflow: hidden; } - .thumbnail{ + &.thumbnail{ margin-bottom: 0px; + + &:focus-within .il-card-repository-head { + z-index: 1; + } + + a:focus-visible { + overflow: visible; + } } .card-highlight { background: @il-card-highlight-bg; @@ -98,6 +106,11 @@ margin-left: auto; margin-right: auto; } + + &:focus-visible { + overflow: visible; + outline-offset: @il-focus-outline-inner-width + @il-focus-outline-outer-width - 1; + } } } } diff --git a/src/UI/templates/default/Item/item.less b/src/UI/templates/default/Item/item.less index 0a0279f88d5a..e5ac07460e33 100644 --- a/src/UI/templates/default/Item/item.less +++ b/src/UI/templates/default/Item/item.less @@ -14,6 +14,10 @@ .btn-link, a { font-size: inherit; line-height: @line-height-base; + + &:focus-visible { + display: block; + } } } diff --git a/src/UI/templates/default/MainControls/Slate/slate.less b/src/UI/templates/default/MainControls/Slate/slate.less index b64c9af734ab..51077c8f5409 100644 --- a/src/UI/templates/default/MainControls/Slate/slate.less +++ b/src/UI/templates/default/MainControls/Slate/slate.less @@ -20,18 +20,18 @@ display: flex; margin-bottom: @il-slate-content-spacing; position: relative; - &.engaged:after, - &.disengaged:after { + &.engaged::before, + &.disengaged::before { font-family: "il-icons"; font-size: @il-slate-bulky-glyph-size * 0.85; position: absolute; right: 10px; top: 20px; } - &.engaged:after { + &.engaged::before { content: " \e604"; } - &.disengaged:after { + &.disengaged::before { content: " \e606"; } &:focus{ diff --git a/src/UI/templates/default/MainControls/mainbar.less b/src/UI/templates/default/MainControls/mainbar.less index 02c4d17e1ef7..c83dbb44de57 100644 --- a/src/UI/templates/default/MainControls/mainbar.less +++ b/src/UI/templates/default/MainControls/mainbar.less @@ -22,11 +22,16 @@ line-height: @il-mainbar-btn-label-size * @line-height-large; &:focus, &:active { - box-shadow: none; + box-shadow: none; } - &:focus-visible { - border: 3px solid @il-focus-color; + &:focus-visible, + &:active:focus-visible { + border: @il-focus-outline-inner; outline: none; + + &::after { + content: none; + } } } .bulky-label { diff --git a/templates/default/delos.css b/templates/default/delos.css index 463fd74dec49..ac3d4cabda87 100644 --- a/templates/default/delos.css +++ b/templates/default/delos.css @@ -1127,6 +1127,17 @@ a:focus { outline-offset: 0px; } a:focus:focus-visible { + outline: 2px solid #FFFFFF; + outline-offset: 5px; +} +a:focus:focus-visible::after { + content: " "; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border: 2px solid #FFFFFF; outline: 3px solid #0078D7; } figure { @@ -2724,6 +2735,19 @@ input[type="checkbox"]:focus { input[type="file"]:focus:focus-visible, input[type="radio"]:focus:focus-visible, input[type="checkbox"]:focus:focus-visible { + outline: 2px solid #FFFFFF; + outline-offset: 5px; +} +input[type="file"]:focus:focus-visible::after, +input[type="radio"]:focus:focus-visible::after, +input[type="checkbox"]:focus:focus-visible::after { + content: " "; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border: 2px solid #FFFFFF; outline: 3px solid #0078D7; } output { @@ -2799,7 +2823,7 @@ textarea.form-control { .input-group-sm input[type="time"], .input-group-sm input[type="datetime-local"], .input-group-sm input[type="month"] { - line-height: 26px; + line-height: 28px; } input[type="date"].input-lg, input[type="time"].input-lg, @@ -2881,39 +2905,39 @@ fieldset[disabled] .checkbox-inline { padding-left: 0; } .input-sm { - height: 26px; - padding: 3px 6px; + height: 28px; + padding: 4px 6px; font-size: 12px; line-height: 1.5; border-radius: 0px; } select.input-sm { - height: 26px; - line-height: 26px; + height: 28px; + line-height: 28px; } textarea.input-sm, select[multiple].input-sm { height: auto; } .form-group-sm .form-control { - height: 26px; - padding: 3px 6px; + height: 28px; + padding: 4px 6px; font-size: 12px; line-height: 1.5; border-radius: 0px; } .form-group-sm select.form-control { - height: 26px; - line-height: 26px; + height: 28px; + line-height: 28px; } .form-group-sm textarea.form-control, .form-group-sm select[multiple].form-control { height: auto; } .form-group-sm .form-control-static { - height: 26px; + height: 28px; min-height: 32px; - padding: 4px 6px; + padding: 5px 6px; font-size: 12px; line-height: 1.5; } @@ -2982,9 +3006,9 @@ select[multiple].input-lg { .input-sm + .form-control-feedback, .input-group-sm + .form-control-feedback, .form-group-sm .form-control + .form-control-feedback { - width: 26px; - height: 26px; - line-height: 26px; + width: 28px; + height: 28px; + line-height: 28px; } .has-success .help-block, .has-success .control-label, @@ -3172,7 +3196,7 @@ select[multiple].input-lg { } @media (min-width: 768px) { .form-horizontal .form-group-sm .control-label { - padding-top: 4px; + padding-top: 5px; font-size: 12px; } } @@ -3213,6 +3237,22 @@ select[multiple].input-lg { .btn.focus:focus-visible, .btn:active.focus:focus-visible, .btn.active.focus:focus-visible { + outline: 2px solid #FFFFFF; + outline-offset: 5px; +} +.btn:focus:focus-visible::after, +.btn:active:focus:focus-visible::after, +.btn.active:focus:focus-visible::after, +.btn.focus:focus-visible::after, +.btn:active.focus:focus-visible::after, +.btn.active.focus:focus-visible::after { + content: " "; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border: 2px solid #FFFFFF; outline: 3px solid #0078D7; } .btn:hover, @@ -3601,7 +3641,7 @@ fieldset[disabled] .btn-link:focus { } .btn-sm, .btn-group-sm > .btn { - padding: 3px 6px; + padding: 4px 6px; font-size: 12px; line-height: 1.5; border-radius: 0px; @@ -4017,8 +4057,8 @@ select[multiple].input-group-lg > .input-group-btn > .btn { .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn { - height: 26px; - padding: 3px 6px; + height: 28px; + padding: 4px 6px; font-size: 12px; line-height: 1.5; border-radius: 0px; @@ -4026,8 +4066,8 @@ select[multiple].input-group-lg > .input-group-btn > .btn { select.input-group-sm > .form-control, select.input-group-sm > .input-group-addon, select.input-group-sm > .input-group-btn > .btn { - height: 26px; - line-height: 26px; + height: 28px; + line-height: 28px; } textarea.input-group-sm > .form-control, textarea.input-group-sm > .input-group-addon, @@ -4065,7 +4105,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { border-radius: 0; } .input-group-addon.input-sm { - padding: 3px 6px; + padding: 4px 6px; font-size: 12px; border-radius: 0px; } @@ -4617,8 +4657,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn { margin-bottom: 7.5px; } .navbar-btn.btn-sm { - margin-top: 7px; - margin-bottom: 7px; + margin-top: 6px; + margin-bottom: 6px; } .navbar-btn.btn-xs { margin-top: 9px; @@ -4927,7 +4967,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus { } .pagination-sm > li > a, .pagination-sm > li > span { - padding: 3px 6px; + padding: 4px 6px; font-size: 12px; line-height: 1.5; } @@ -6924,7 +6964,7 @@ button.close { background-color: #f9f9f9; margin: 0; padding: 9px 12px; - padding-bottom: 3px; + padding-bottom: 4px; border: none; -webkit-box-shadow: none; box-shadow: none; @@ -7010,8 +7050,8 @@ button.close { padding: 6px 12px; } .panel-secondary .panel-heading.ilHeader h4 { - padding-top: 3px; - padding-bottom: 3px; + padding-top: 4px; + padding-bottom: 4px; } .panel-secondary .panel-heading.ilHeader h2.ilHeader { font-size: 17px; @@ -7076,7 +7116,7 @@ button.close { font-weight: 600; float: left; padding: 9px 12px; - padding-bottom: 3px; + padding-bottom: 4px; margin: 0; line-height: 1.33; } @@ -7087,7 +7127,7 @@ button.close { padding: 9px 12px; } .il-panel-listing-std-container > .dropdown:not(:last-child) { - padding-bottom: 3px; + padding-bottom: 4px; } .il-card { padding: 0 0 6px 0; @@ -7104,9 +7144,15 @@ button.close { .il-card a { overflow: hidden; } -.il-card .thumbnail { +.il-card.thumbnail { margin-bottom: 0px; } +.il-card.thumbnail:focus-within .il-card-repository-head { + z-index: 1; +} +.il-card.thumbnail a:focus-visible { + overflow: visible; +} .il-card .card-highlight { background: #B54F00; height: 6px; @@ -7151,7 +7197,7 @@ button.close { } .il-card .il-card-repository-head .il-chart-progressmeter-box { width: 41px; - height: 38px; + height: 39px; } .il-card .il-card-repository-head .il-chart-progressmeter-box > .il-chart-progressmeter-container .il-chart-progressmeter-viewbox { max-width: 100%; @@ -7172,6 +7218,10 @@ button.close { margin-left: auto; margin-right: auto; } +.il-card .il-card-repository-head > div.il-card-repository-dropdown > .dropdown > button:focus-visible { + overflow: visible; + outline-offset: 4px; +} .il-panel-report .il-card { background-color: #f9f9f9; } @@ -7292,8 +7342,19 @@ button.close { font-size: 12px; } .btn:focus-visible { + position: relative; + outline: 2px solid #FFFFFF; + outline-offset: 4px; +} +.btn:focus-visible::after { + content: " "; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border: 2px solid #FFFFFF; outline: 3px solid #0078D7; - outline-offset: 0px; } .btn:active, .btn.engaged { @@ -7363,7 +7424,7 @@ fieldset[disabled] .btn-default.focus { background-color: white; } .btn-default:focus-visible { - outline-offset: 2px; + position: relative; } .btn-primary { color: white; @@ -7418,9 +7479,6 @@ fieldset[disabled] .btn-primary.focus { color: #557b2e; background-color: white; } -.btn-primary:focus-visible { - outline-offset: 2px; -} .btn[disabled], .btn.btn-tag[disabled], fieldset[disabled] .btn, @@ -7631,7 +7689,7 @@ a fieldset[disabled] .active { font-size: 12px; } h4.il-divider { - padding: 3px 6px; + padding: 4px 6px; margin-bottom: 0px; background-color: white; display: block; @@ -7721,6 +7779,10 @@ ul.dropdown-menu > li > .btn:focus { font-size: inherit; line-height: 1.42857143; } +.il-item .il-item-title .btn-link:focus-visible, +.il-item .il-item-title a:focus-visible { + display: block; +} .il-item .il-item-divider { clear: both; padding: 10px 0 0 0; @@ -7901,7 +7963,7 @@ ul.dropdown-menu > li > .btn:focus { margin: 0; font-weight: 600; font-size: 12px; - padding: 3px; + padding: 4px; padding-left: 100px; } .breadcrumb_wrapper .breadcrumb span.crumb a { @@ -7910,6 +7972,12 @@ ul.dropdown-menu > li > .btn:focus { .breadcrumb_wrapper .breadcrumb span.crumb a:hover { color: #3a4c65; } +.breadcrumb_wrapper .breadcrumb span.crumb a:focus { + border: 3px solid #0078D7; +} +.breadcrumb_wrapper .breadcrumb span.crumb a:focus::after { + content: none; +} .breadcrumb_wrapper .breadcrumb > span + span:before { content: " \e606"; color: #737373; @@ -8104,14 +8172,14 @@ ul.dropdown-menu > li > .btn:focus { .il-standard-form .il-section-input-header h2 { font-size: 19px; padding-top: 12px; - padding-bottom: 3px; + padding-bottom: 4px; } .il-standard-form .il-standar-form-header-byline, .il-standard-form .il-section-input-header-byline { font-size: 12px; } .il-standard-form .il-standard-form-header + .il-section-input { - margin-top: -21.14285715px; + margin-top: -22.14285715px; padding: 0; } .il-standard-form .il-standard-form-header + .il-section-input .il-section-input-header h2 { @@ -8120,7 +8188,7 @@ ul.dropdown-menu > li > .btn:focus { } .il-standard-form .il-dependant-group { background-color: #f9f9f9; - padding: 3px 0; + padding: 4px 0; } .il-standard-form .il-dependant-group .form-group { margin: 0; @@ -8152,8 +8220,8 @@ ul.dropdown-menu > li > .btn:focus { margin: 2px 0 10px; } .form-horizontal .help-block.alert-danger { - margin: 3px 0 0; - padding: 0 3px 0 3px; + margin: 4px 0 0; + padding: 0 4px 0 4px; color: #a94442; background-color: #f2dede; border-color: #ebccd1; @@ -8269,7 +8337,7 @@ ul.dropdown-menu > li > .btn:focus { } .il-filter-bar { display: flex; - padding: 3px 12px; + padding: 4px 12px; } .il-filter-bar .il-filter-bar-opener { flex: 1; @@ -8300,11 +8368,11 @@ ul.dropdown-menu > li > .btn:focus { } .il-filter-inputs-active { background-color: #f9f9f9; - padding: 3px 8px; + padding: 4px 8px; } .il-filter-inputs-active span { display: inline-block; - margin: 3px 8px 3px 0; + margin: 4px 8px 4px 0; padding: 0 8px; float: left; background-color: white; @@ -8850,7 +8918,7 @@ fieldset[disabled] .il-table-presentation-viewcontrols .btn-default.engaged.focu /* when characteristic value listing is used in the card */ .il-card .il-listing-characteristic-value-row { border-top: none; - padding: 6px 3px; + padding: 6px 4px; } .il-card .il-listing-characteristic-value-label { padding-left: 6px; @@ -8906,7 +8974,7 @@ div.alert ul > li:before { } .il-tree { list-style-type: none; - padding: 0 3px 0 calc(3px + 4px); + padding: 0 4px 0 calc(4px + 4px); margin-left: 0; } .il-tree ul { @@ -9450,22 +9518,22 @@ footer { margin-bottom: 2px; position: relative; } -.il-maincontrols-slate .btn-bulky.engaged:after, -.il-maincontrols-slate .link-bulky.engaged:after, -.il-maincontrols-slate .btn-bulky.disengaged:after, -.il-maincontrols-slate .link-bulky.disengaged:after { +.il-maincontrols-slate .btn-bulky.engaged::before, +.il-maincontrols-slate .link-bulky.engaged::before, +.il-maincontrols-slate .btn-bulky.disengaged::before, +.il-maincontrols-slate .link-bulky.disengaged::before { font-family: "il-icons"; font-size: 1.7rem; position: absolute; right: 10px; top: 20px; } -.il-maincontrols-slate .btn-bulky.engaged:after, -.il-maincontrols-slate .link-bulky.engaged:after { +.il-maincontrols-slate .btn-bulky.engaged::before, +.il-maincontrols-slate .link-bulky.engaged::before { content: " \e604"; } -.il-maincontrols-slate .btn-bulky.disengaged:after, -.il-maincontrols-slate .link-bulky.disengaged:after { +.il-maincontrols-slate .btn-bulky.disengaged::before, +.il-maincontrols-slate .link-bulky.disengaged::before { content: " \e606"; } .il-maincontrols-slate .btn-bulky:focus, @@ -9481,7 +9549,7 @@ footer { } .il-maincontrols-slate .btn-bulky .icon, .il-maincontrols-slate .link-bulky .icon { - margin-top: 3px; + margin-top: 4px; margin-right: 5px; filter: invert(50%); } @@ -9809,10 +9877,24 @@ footer { .il-maincontrols-mainbar .btn-bulky:focus-visible, .il-maincontrols-metabar .btn-bulky:focus-visible, .il-maincontrols-mainbar .il-link.link-bulky:focus-visible, -.il-maincontrols-metabar .il-link.link-bulky:focus-visible { +.il-maincontrols-metabar .il-link.link-bulky:focus-visible, +.il-maincontrols-mainbar .btn-bulky:active:focus-visible, +.il-maincontrols-metabar .btn-bulky:active:focus-visible, +.il-maincontrols-mainbar .il-link.link-bulky:active:focus-visible, +.il-maincontrols-metabar .il-link.link-bulky:active:focus-visible { border: 3px solid #0078D7; outline: none; } +.il-maincontrols-mainbar .btn-bulky:focus-visible::after, +.il-maincontrols-metabar .btn-bulky:focus-visible::after, +.il-maincontrols-mainbar .il-link.link-bulky:focus-visible::after, +.il-maincontrols-metabar .il-link.link-bulky:focus-visible::after, +.il-maincontrols-mainbar .btn-bulky:active:focus-visible::after, +.il-maincontrols-metabar .btn-bulky:active:focus-visible::after, +.il-maincontrols-mainbar .il-link.link-bulky:active:focus-visible::after, +.il-maincontrols-metabar .il-link.link-bulky:active:focus-visible::after { + content: none; +} .il-maincontrols-mainbar .bulky-label, .il-maincontrols-metabar .bulky-label { white-space: normal; @@ -10139,8 +10221,8 @@ footer { } .il-mainbar-triggers .btn-bulky .icon.small, .il-mainbar-triggers .il-link.link-bulky .icon.small { - height: 17px; - width: 17px; + height: 15px; + width: 15px; } .il-mainbar-tools-entries.engaged { height: 50px; @@ -10785,8 +10867,19 @@ footer { } } .il-link:focus-visible { + position: relative; + outline: 2px solid #FFFFFF; + outline-offset: 4px; +} +.il-link:focus-visible::after { + content: " "; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border: 2px solid #FFFFFF; outline: 3px solid #0078D7; - outline-offset: 0px; } .il-link:active, .il-link.engaged { @@ -11891,6 +11984,25 @@ a:hover { color: #3a4c65; text-decoration: underline; } +a:focus-visible { + position: relative; + outline: 2px solid #FFFFFF; + outline-offset: 4px; +} +a:focus-visible::after { + content: " "; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border: 2px solid #FFFFFF; + outline: 3px solid #0078D7; +} +a:active, +a.engaged { + outline: none; +} hr { margin-bottom: 0.8em; border: none; @@ -12421,6 +12533,10 @@ div.il_TreeIcons { color: #161616; font-size: 90%; } +#current_perma_link:focus-visible { + outline: 3px solid #FFFFFF; + outline-offset: 2px; +} a.permalink_label > span.glyphicon { display: none; } @@ -13046,8 +13162,20 @@ form.form-inline { box-shadow: none; outline: 3px solid #0078D7; } -.btn-file:focus-within { +input[type="file"]:focus:focus-visible::after, +input[type="radio"]:focus:focus-visible::after, +input[type="checkbox"]:focus:focus-visible::after { + content: none; +} +input.btn.btn-default:focus-visible { + outline: 3px solid #0078D7; + outline-offset: 3px; +} +.btn-file:focus-within, +.btn-file:hover:focus-within { + z-index: 3; outline: 3px solid #0078D7; + outline-offset: 3px; } textarea.form-control { max-width: 100%; @@ -13117,6 +13245,11 @@ td.form-inline > div.form-group { display: block; padding: 4px 0; } +input[type="radio"]:focus:focus-visible, +input[type="checkbox"]:focus:focus-visible { + outline: 3px solid #0078D7; + outline-offset: 2px; +} input[type="file"].form-control { border: none; height: auto; @@ -14480,6 +14613,10 @@ table.calmini td.calmininext > .il_calmini_monthday > a { color: #161616; display: none; } +table.calmini a { + display: block; + width: 100%; +} a.callink:link, a.callink:visited { color: inherit; @@ -15272,6 +15409,9 @@ ul.il-mm-selfloading { border: 0 none; border-bottom: 2px solid #2c2c2c; } +#ilTab a:focus-visible { + z-index: 3; +} .ilSetupContent #ilTab { margin: 7px 0 23px; } @@ -15301,7 +15441,7 @@ ul.il-mm-selfloading { } /* Services/UIComponent/GroupedLists */ div.ilGroupedListH { - padding: 6px 0 3px 0; + padding: 6px 0 4px 0; color: #161616; } div.ilGroupedListSep { @@ -17122,8 +17262,24 @@ div#il_startup_logo img { background-color: white; } .ilToolbar .navbar-toggle:focus-visible { + position: relative; + outline: 2px solid #FFFFFF; + outline-offset: 4px; +} +.ilToolbar .navbar-toggle:focus-visible::after { + content: " "; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border: 2px solid #FFFFFF; outline: 3px solid #0078D7; } +.ilToolbar .navbar-toggle:active, +.ilToolbar .navbar-toggle.engaged { + outline: none; +} .ilToolbar .ilToolbarItems { padding: 0; } @@ -17173,7 +17329,7 @@ div#il_startup_logo img { margin-right: 0; } .ilToolbar .btn[disabled] { - padding: 3px 6px; + padding: 4px 6px; } .ilToolbar .ilToolbarStickyItems { float: left; @@ -17827,9 +17983,25 @@ body.ilPrtfPdfBody .ilPCMyCoursesToggle img { border-bottom: 1px solid #dddddd; background-color: white; } -.ilAwarenessItem > div[role='button']:focus-visible { +.ilAwarenessItem > div[role='button']:focus-visible:focus-visible { + position: relative; + outline: 2px solid #FFFFFF; + outline-offset: 4px; +} +.ilAwarenessItem > div[role='button']:focus-visible:focus-visible::after { + content: " "; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border: 2px solid #FFFFFF; outline: 3px solid #0078D7; } +.ilAwarenessItem > div[role='button']:focus-visible:active, +.ilAwarenessItem > div[role='button']:focus-visible.engaged { + outline: none; +} .ilAwarenessItem ul { margin: 0; padding: 0; @@ -18973,6 +19145,10 @@ span.ilProfileBadge .modal .img-responsive { font-size: 100%; margin-top: 0; } +.webdav-view-control { + text-align: center; + padding: 5px; +} .noMargin { margin: 0; } diff --git a/templates/default/delos.less b/templates/default/delos.less index cb0951fc1583..1d6ccbeef295 100644 --- a/templates/default/delos.less +++ b/templates/default/delos.less @@ -527,6 +527,8 @@ a { color: @link-hover-color; text-decoration: underline; } + + .il-focus(); } hr { @@ -1141,6 +1143,11 @@ div.il_TreeIcons { #current_perma_link { color: @il-text-color; font-size: 90%; + + &:focus-visible { + outline: @il-focus-outline-inner-width solid @il-focus-protection-color; + outline-offset: @il-focus-outline-outer-width; + } } a.permalink_label { > span.glyphicon { @@ -1778,6 +1785,7 @@ span.ilIcalIcon { @import "less/Modules/LearningSequence/delos.less"; @import "less/Services/LearningHistory/delos.less"; @import "less/Services/Preview/delos.less"; +@import "less/Services/WebDAV/delos.less"; .noMargin { margin: 0; diff --git a/templates/default/less/Services/Awareness/delos.less b/templates/default/less/Services/Awareness/delos.less index 6e70ea977e20..b5ba3654d341 100644 --- a/templates/default/less/Services/Awareness/delos.less +++ b/templates/default/less/Services/Awareness/delos.less @@ -62,7 +62,7 @@ background-color: @il-main-bg; > div[role='button']:focus-visible { - outline: @il-focus-outline; + .il-focus(); } ul { diff --git a/templates/default/less/Services/Calendar/delos.less b/templates/default/less/Services/Calendar/delos.less index 7772c8e99a32..66b8ff98c121 100644 --- a/templates/default/less/Services/Calendar/delos.less +++ b/templates/default/less/Services/Calendar/delos.less @@ -132,6 +132,10 @@ table.calmini { color: @il-text-color; display:none; } + a { + display: block; + width: 100%; + } } a.callink:link, a.callink:visited { diff --git a/templates/default/less/Services/Form/delos.less b/templates/default/less/Services/Form/delos.less index 52df147ce846..de7e258bb290 100644 --- a/templates/default/less/Services/Form/delos.less +++ b/templates/default/less/Services/Form/delos.less @@ -37,11 +37,24 @@ form.form-inline { .form-control:focus-visible { .box-shadow(none); - outline: @il-focus-outline; + outline: @il-focus-outline-inner; } -.btn-file:focus-within { - outline: @il-focus-outline; +input[type="file"]:focus:focus-visible::after, +input[type="radio"]:focus:focus-visible::after, +input[type="checkbox"]:focus:focus-visible::after { + content: none; +} + +input.btn.btn-default:focus-visible { + outline: @il-focus-outline-inner; + outline-offset: @il-focus-outline-inner-width; +} + +.btn-file:focus-within, .btn-file:hover:focus-within { + z-index: 3; + outline: @il-focus-outline-inner; + outline-offset: @il-focus-outline-inner-width; } textarea.form-control { @@ -121,6 +134,12 @@ td.form-inline > div.form-group { padding: 4px 0; } +input[type="radio"]:focus:focus-visible, +input[type="checkbox"]:focus:focus-visible { + outline: @il-focus-outline-inner; + outline-offset: @il-focus-outline-outer-width; +} + input[type="file"].form-control { border: none; height: auto; diff --git a/templates/default/less/Services/UIComponent/Tabs/delos.less b/templates/default/less/Services/UIComponent/Tabs/delos.less index f51de1fb87bb..48c2db146539 100644 --- a/templates/default/less/Services/UIComponent/Tabs/delos.less +++ b/templates/default/less/Services/UIComponent/Tabs/delos.less @@ -46,6 +46,10 @@ border-bottom: 2px solid @il-neutral-color; } +#ilTab a:focus-visible { + z-index: 3; +} + .ilSetupContent #ilTab { margin: 7px 0 23px; } diff --git a/templates/default/less/Services/UIComponent/Toolbar/delos.less b/templates/default/less/Services/UIComponent/Toolbar/delos.less index f0bdb1a1faf0..4c654d94c799 100644 --- a/templates/default/less/Services/UIComponent/Toolbar/delos.less +++ b/templates/default/less/Services/UIComponent/Toolbar/delos.less @@ -9,9 +9,7 @@ background-color: @il-toolbar-bg; } .navbar-toggle { - &:focus-visible { - outline: @il-focus-outline; - } + .il-focus(); } .ilToolbarItems { padding: 0; diff --git a/templates/default/less/Services/WebDAV/delos.less b/templates/default/less/Services/WebDAV/delos.less new file mode 100644 index 000000000000..00d19e7925b4 --- /dev/null +++ b/templates/default/less/Services/WebDAV/delos.less @@ -0,0 +1,4 @@ +.webdav-view-control { + text-align: center; + padding: @il-focus-outline-inner-width + @il-focus-outline-outer-width; +} \ No newline at end of file diff --git a/templates/default/less/focus-mixin.less b/templates/default/less/focus-mixin.less index a495513550fd..737e787661b8 100644 --- a/templates/default/less/focus-mixin.less +++ b/templates/default/less/focus-mixin.less @@ -1,23 +1,42 @@ // In order not to manually overwrite the focus in all places, the following bootstrap focus mixin is overwritten ilias/libs/bower/bower_components/bootstrap/less/mixins/tab-focus.less. -.tab-focus() { +.tab-focus(){ // WebKit-specific. Other browsers will keep their default outline style. // (Initially tried to also force default via `outline: initial`, // but that seems to erroneously remove the outline in Firefox altogether.) outline: none; outline-offset: 0px; &:focus-visible { - outline: @il-focus-outline; + outline: @il-focus-outline-outer; + outline-offset: @il-focus-outline-inner-width + @il-focus-outline-outer-width; + + .il-focus-after(); } } -.il-focus(){ +.il-focus() { &:focus-visible { - outline: @il-focus-outline; - outline-offset: 0px; + position: relative; + outline: @il-focus-outline-outer; + outline-offset: @il-focus-outline-inner-width + @il-focus-outline-outer-width - 1px; + + .il-focus-after(); } &:active,&.engaged{ outline: none; } +} + +.il-focus-after() { + &::after { + content: " "; + position: absolute; + top: -@il-focus-outline-outer-width; + left: -@il-focus-outline-outer-width; + right: -@il-focus-outline-outer-width; + bottom: -@il-focus-outline-outer-width; + border: @il-focus-outline-outer; + outline: @il-focus-outline-inner; + } } \ No newline at end of file diff --git a/templates/default/less/variables.less b/templates/default/less/variables.less index 2d2c4f39b050..6837e41502dd 100644 --- a/templates/default/less/variables.less +++ b/templates/default/less/variables.less @@ -55,6 +55,7 @@ with the il- variable set here. //** Used to set focus on interactive elements for keyboard navigation. @il-focus-color: #0078D7; +@il-focus-protection-color: #FFFFFF; //== Extended Colors // @@ -129,7 +130,7 @@ with the il- variable set here. @il-padding-large-vertical: 6px; @il-padding-large-horizontal: 12px; -@il-padding-small-vertical: 3px; +@il-padding-small-vertical: 4px; @il-padding-small-horizontal: 6px; @il-padding-xs-vertical: 1px; @@ -139,9 +140,11 @@ with the il- variable set here. @il-border-radius-large: 0px; @il-border-radius-small: 0px; -@il-focus-outline: 3px solid @il-focus-color; +@il-focus-outline-inner: @il-focus-outline-inner-width solid @il-focus-color; +@il-focus-outline-outer: @il-focus-outline-outer-width solid @il-focus-protection-color; // The offset should only be used if the contrast between the focus outline and the component is insufficient. -@il-focus-outline-offset: 2px; +@il-focus-outline-inner-width: 3px; +@il-focus-outline-outer-width: 2px; //== Layout (UI Layout Page) // @@ -717,7 +720,7 @@ with the il- variable set here. @il-background-images-path: "images/"; //** Size for icons: xsmall is used in the tree. e.g. -@il-icon-size-xsmall: 17px; +@il-icon-size-xsmall: 15px; //** Size for icons: Small is used in the tree. e.g. @il-icon-size-small: 20px; //** Size for icons: Medium is used in the content-listing. e.g.