From 91de0ed823ea30780f6136e5a439f13796b39338 Mon Sep 17 00:00:00 2001 From: Bas Brands Date: Wed, 8 Apr 2020 12:24:02 +0200 Subject: [PATCH] MDL-67874 theme_boost: make focus outline accessible --- .../myoverview/templates/view-list.mustache | 2 +- .../templates/view-summary.mustache | 2 +- calendar/templates/header.mustache | 2 +- calendar/templates/month_detailed.mustache | 4 +- course/classes/management_renderer.php | 6 +- course/renderer.php | 10 +- course/templates/coursecard.mustache | 2 +- .../local/activitychooser/item.mustache | 2 +- course/tests/behat/behat_course.php | 3 +- files/renderer.php | 7 +- lib/form/dateselector.php | 3 +- lib/form/datetimeselector.php | 3 +- lib/outputrenderers.php | 4 +- lib/templates/action_menu_link.mustache | 2 +- lib/templates/action_menu_trigger.mustache | 2 +- .../filemanager_modal_generallayout.mustache | 2 +- .../filemanager_page_generallayout.mustache | 2 +- lib/templates/inplace_editable.mustache | 2 +- mod/quiz/attemptlib.php | 2 +- theme/boost/scss/moodle/buttons.scss | 20 ++ theme/boost/scss/moodle/core.scss | 74 ++++++- theme/boost/scss/moodle/course.scss | 2 +- theme/boost/scss/moodle/filemanager.scss | 9 +- theme/boost/scss/moodle/modules.scss | 9 - theme/boost/scss/preset/default.scss | 2 + theme/boost/style/moodle.css | 193 ++++++++++++++++-- theme/boost/templates/navbar.mustache | 2 +- theme/classic/scss/preset/default.scss | 2 + theme/classic/style/moodle.css | 193 ++++++++++++++++-- theme/classic/templates/navbar.mustache | 2 +- 30 files changed, 473 insertions(+), 97 deletions(-) diff --git a/blocks/myoverview/templates/view-list.mustache b/blocks/myoverview/templates/view-list.mustache index c4d527cf7d9..f32e7e8c4cf 100644 --- a/blocks/myoverview/templates/view-list.mustache +++ b/blocks/myoverview/templates/view-list.mustache @@ -63,7 +63,7 @@
{{{shortname}}}
{{/showshortname}} - + {{> core_course/favouriteicon }} {{#str}}aria:coursename, core_course{{/str}} diff --git a/blocks/myoverview/templates/view-summary.mustache b/blocks/myoverview/templates/view-summary.mustache index 9f929900cc5..02dd28428b4 100644 --- a/blocks/myoverview/templates/view-summary.mustache +++ b/blocks/myoverview/templates/view-summary.mustache @@ -73,7 +73,7 @@ {{/showshortname}}
- + {{> core_course/favouriteicon }} {{#str}}aria:coursename, core_course{{/str}} diff --git a/calendar/templates/header.mustache b/calendar/templates/header.mustache index ce7c76f27fc..6bfc7980edc 100644 --- a/calendar/templates/header.mustache +++ b/calendar/templates/header.mustache @@ -31,7 +31,7 @@ { } }} -
+
{{> core_calendar/view_selector}} {{#filter_selector}} {{{filter_selector}}} diff --git a/calendar/templates/month_detailed.mustache b/calendar/templates/month_detailed.mustache index 11608cd08a9..a88f65ebbaa 100644 --- a/calendar/templates/month_detailed.mustache +++ b/calendar/templates/month_detailed.mustache @@ -72,7 +72,7 @@ data-new-event-timestamp="{{neweventtimestamp}}">
{{#hasevents}} - {{mday}} @@ -125,7 +125,7 @@
{{#hasevents}} - {{mday}} diff --git a/course/classes/management_renderer.php b/course/classes/management_renderer.php index 07394ca4706..ada3a69a44f 100644 --- a/course/classes/management_renderer.php +++ b/course/classes/management_renderer.php @@ -272,7 +272,7 @@ class core_course_management_renderer extends plugin_renderer_base { $html .= html_writer::end_div(); $html .= $icon; if ($hasactions) { - $textattributes = array('class' => 'float-left categoryname'); + $textattributes = array('class' => 'float-left categoryname aalink'); } else { $textattributes = array('class' => 'float-left categoryname without-actions'); } @@ -647,7 +647,7 @@ class core_course_management_renderer extends plugin_renderer_base { 'for' => 'courselistitem' . $course->id)); $html .= html_writer::end_div(); $html .= html_writer::end_div(); - $html .= html_writer::link($viewcourseurl, $text, array('class' => 'float-left coursename')); + $html .= html_writer::link($viewcourseurl, $text, array('class' => 'float-left coursename aalink')); $html .= html_writer::start_div('float-right'); if ($course->idnumber) { $html .= html_writer::tag('span', s($course->idnumber), array('class' => 'text-muted idnumber')); @@ -1222,7 +1222,7 @@ class core_course_management_renderer extends plugin_renderer_base { $html .= html_writer::end_div(); } $html .= html_writer::end_div(); - $html .= html_writer::link($viewcourseurl, $text, array('class' => 'float-left coursename')); + $html .= html_writer::link($viewcourseurl, $text, array('class' => 'float-left coursename aalink')); $html .= html_writer::tag('span', $categoryname, array('class' => 'float-left ml-3 text-muted')); $html .= html_writer::start_div('float-right'); $html .= $this->search_listitem_actions($course); diff --git a/course/renderer.php b/course/renderer.php index b5260c410d1..bb7b3b9867e 100644 --- a/course/renderer.php +++ b/course/renderer.php @@ -709,7 +709,7 @@ class core_course_renderer extends plugin_renderer_base { 'class' => 'iconlarge activityicon', 'alt' => '', 'role' => 'presentation', 'aria-hidden' => 'true')) . html_writer::tag('span', $instancename . $altname, array('class' => 'instancename')); if ($mod->uservisible) { - $output .= html_writer::link($url, $activitylink, array('class' => $linkclasses, 'onclick' => $onclick)); + $output .= html_writer::link($url, $activitylink, array('class' => 'aalink' . $linkclasses, 'onclick' => $onclick)); } else { // We may be displaying this just in order to show information // about visibility, without the actual link ($mod->is_visible_on_course_page()). @@ -1142,7 +1142,7 @@ class core_course_renderer extends plugin_renderer_base { } $coursename = $chelper->get_course_formatted_name($course); $coursenamelink = html_writer::link(new moodle_url('/course/view.php', ['id' => $course->id]), - $coursename, ['class' => $course->visible ? '' : 'dimmed']); + $coursename, ['class' => $course->visible ? 'aalink' : 'aalink dimmed']); $content .= html_writer::tag($nametag, $coursenamelink, ['class' => 'coursename']); // If we display course in collapsed form but the course has summary or course contacts, display the link to the info page. $content .= html_writer::start_tag('div', ['class' => 'moreinfo']); @@ -1648,7 +1648,7 @@ class core_course_renderer extends plugin_renderer_base { } $content .= html_writer::start_tag('div', array('class' => 'info')); - $content .= html_writer::tag(($depth > 1) ? 'h4' : 'h3', $categoryname, array('class' => 'categoryname')); + $content .= html_writer::tag(($depth > 1) ? 'h4' : 'h3', $categoryname, array('class' => 'categoryname aabtn')); $content .= html_writer::end_tag('div'); // .info // add category content to the output @@ -1682,7 +1682,7 @@ class core_course_renderer extends plugin_renderer_base { if ($coursecat->get_children_count()) { $classes = array( - 'collapseexpand', + 'collapseexpand', 'aabtn' ); // Check if the category content contains subcategories with children's content loaded. @@ -2391,7 +2391,7 @@ class core_course_renderer extends plugin_renderer_base { } $output = html_writer::link('#' . $skipdivid, get_string('skipa', 'access', core_text::strtolower(strip_tags($header))), - array('class' => 'skip-block skip')); + array('class' => 'skip-block skip aabtn')); // Wrap frontpage part in div container. $output .= html_writer::start_tag('div', array('id' => $contentsdivid)); diff --git a/course/templates/coursecard.mustache b/course/templates/coursecard.mustache index 74300b9fb6c..b24636c88db 100644 --- a/course/templates/coursecard.mustache +++ b/course/templates/coursecard.mustache @@ -57,7 +57,7 @@
{{/showshortname}}
- + {{> core_course/favouriteicon }} {{#str}}aria:coursename, core_course{{/str}} diff --git a/course/templates/local/activitychooser/item.mustache b/course/templates/local/activitychooser/item.mustache index ccebf940343..82e6de32956 100644 --- a/course/templates/local/activitychooser/item.mustache +++ b/course/templates/local/activitychooser/item.mustache @@ -29,7 +29,7 @@ "icon": "" } }} -
{{#pix}}i/loading_small{{/pix}}{{#str}}loadinghelp{{/str}}
diff --git a/lib/templates/inplace_editable.mustache b/lib/templates/inplace_editable.mustache index dc78b411419..cfdf87c0085 100644 --- a/lib/templates/inplace_editable.mustache +++ b/lib/templates/inplace_editable.mustache @@ -54,7 +54,7 @@ {{^ linkeverything }}{{{displayvalue}}}{{/ linkeverything }} - + {{# linkeverything }}{{{displayvalue}}}{{/ linkeverything }} {{#pix}}t/editstring,core,{{{edithint}}}{{/pix}} diff --git a/mod/quiz/attemptlib.php b/mod/quiz/attemptlib.php index e85f69638e6..5efd8ffc1aa 100644 --- a/mod/quiz/attemptlib.php +++ b/mod/quiz/attemptlib.php @@ -2794,7 +2794,7 @@ class quiz_attempt_nav_panel extends quiz_nav_panel_base { return ''; } return html_writer::link($this->attemptobj->summary_url(), - get_string('endtest', 'quiz'), array('class' => 'endtestlink')) . + get_string('endtest', 'quiz'), array('class' => 'endtestlink aalink')) . $output->countdown_timer($this->attemptobj, time()) . $this->render_restart_preview_link($output); } diff --git a/theme/boost/scss/moodle/buttons.scss b/theme/boost/scss/moodle/buttons.scss index b4db9f2504d..a3ddda2c06d 100644 --- a/theme/boost/scss/moodle/buttons.scss +++ b/theme/boost/scss/moodle/buttons.scss @@ -60,3 +60,23 @@ p.arrow_button { } } } + +@mixin button-focus($background, $innershadow) { + &:focus, + &.focus { + outline: $btn-focus-width solid darken($background, 40%); + box-shadow: inset 0 0 0 2px $innershadow; + } +} + +@each $color, $value in $theme-colors { + .btn-#{$color} { + @include button-focus($value, $white); + } +} + +@each $color, $value in $theme-colors { + .btn-outline-#{$color} { + @include button-focus($value, $gray-800); + } +} \ No newline at end of file diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss index 1065a7066e2..a21dc2cb560 100644 --- a/theme/boost/scss/moodle/core.scss +++ b/theme/boost/scss/moodle/core.scss @@ -138,6 +138,66 @@ a.dimmed_text:visited, color: $text-muted; } +// Accessible focus styling for links, add .aalink to links with custom css classes to get +// accessible focus styles. +.aalink, +#page-footer a:not([class]), +.arrow_link, +a:not([class]), +.activityinstance > a { + &.focus, + &:focus { + outline: $btn-focus-width solid transparent; + color: $gray-900; + background-color: lighten($primary, 50%); + box-shadow: 0 -#{$btn-focus-width} lighten($primary, 50%), 0 $btn-focus-width $gray-800; + } + &:focus:hover { + text-decoration: none; + } +} + +// Accessible focus styling for buttons like elements that do not use the .btn class. Add +// .aabtn to you element if you need the same focus styles. +.aabtn, +.btn-link, +.nav-link, +.atto_link_button, +[role="button"], +.list-group-item-action, +input[type="checkbox"], +input[type="radio"], +input[type="file"], +input[type="image"], +.sr-only-focusable, +a.dropdown-item, +a.dropdown-toggle, +.modal-dialog[tabindex="0"], +.moodle-dialogue-base .closebutton, +button.close { + &.focus, + &:focus { + outline: 0; + box-shadow: $input-btn-focus-box-shadow; + } + &:focus:hover { + text-decoration: none; + } +} + +.usermenu, +div.dropdown-item { + a, + a[role="button"] { + outline: 0; + box-shadow: none; + } + &:focus-within { + outline: 0; + box-shadow: $input-btn-focus-box-shadow; + } +} + .unlist, .unlist li, .inline-list, @@ -1956,6 +2016,7 @@ nav.navbar .logo img { // Do not remove these rules. overflow: hidden; + padding: 0.25rem; .page-header-image, .page-header-headings { @@ -1967,6 +2028,9 @@ nav.navbar .logo img { .page-header-image { margin-right: 1em; margin-bottom: 1em; + & > a { + display: inline-block; + } } .page-header-headings, @@ -1979,13 +2043,6 @@ nav.navbar .logo img { .header-button-group { display: block; float: left; - - a { - position: relative; - - // Don't touch it unless you know exactly what you are doing. - top: -0.4em; - } } } @@ -2218,6 +2275,9 @@ $footer-link-color: $bg-inverse-link-color !default; .icon { color: $footer-link-color; } + &:focus .icon { + color: $body-color; + } } .bg-inverse a { diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss index 8a9297f3646..e548f331714 100644 --- a/theme/boost/scss/moodle/course.scss +++ b/theme/boost/scss/moodle/course.scss @@ -89,7 +89,7 @@ body:not(.editing) .sitetopic ul.section { min-height: 2em; > a { - display: block; + display: inline-block; text-indent: -31px; padding-left: 31px; } diff --git a/theme/boost/scss/moodle/filemanager.scss b/theme/boost/scss/moodle/filemanager.scss index c1f03d9e35d..347004d1255 100644 --- a/theme/boost/scss/moodle/filemanager.scss +++ b/theme/boost/scss/moodle/filemanager.scss @@ -184,6 +184,7 @@ .fp-iconview .fp-filename-field { height: 33px; + margin-top: 3px; word-wrap: break-word; overflow: hidden; position: absolute; @@ -736,10 +737,12 @@ a.ygtvspacer:hover { } .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu { - display: block; position: absolute; - right: 7px; - bottom: 5px; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; } .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu, diff --git a/theme/boost/scss/moodle/modules.scss b/theme/boost/scss/moodle/modules.scss index f961a82ed34..62f78626b33 100644 --- a/theme/boost/scss/moodle/modules.scss +++ b/theme/boost/scss/moodle/modules.scss @@ -1059,15 +1059,6 @@ div#dock { .usermenu { .login { line-height: 2.25rem; - - a { - color: $link-color; - &:hover, - &:focus { - color: $link-hover-color; - text-decoration: underline; - } - } } } diff --git a/theme/boost/scss/preset/default.scss b/theme/boost/scss/preset/default.scss index 01ef061c093..280f1920f34 100644 --- a/theme/boost/scss/preset/default.scss +++ b/theme/boost/scss/preset/default.scss @@ -68,6 +68,8 @@ $card-group-margin: .25rem; // Custom control size $custom-control-indicator-size: 1.25rem; +$input-btn-focus-color: rgba($primary, .75) !default; + // stylelint-disable $theme-colors: () !default; $theme-colors: map-merge(( diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 9d14485a7d8..5e730e02386 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -3798,7 +3798,7 @@ pre { background-color: #fff; border-color: #6eb5f3; outline: 0; - box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); } + box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); } .form-control::placeholder { color: #6c757d; opacity: 1; } @@ -4154,7 +4154,7 @@ textarea.form-control { text-decoration: none; } .btn:focus, .btn.focus { outline: 0; - box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); } + box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); } .btn.disabled, .btn:disabled { opacity: 0.65; } .btn:not(:disabled):not(.disabled) { @@ -5018,7 +5018,7 @@ input[type="button"].btn-block { border-color: #1177d1; background-color: #1177d1; } .custom-control-input:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); } + box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); } .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: #6eb5f3; } .custom-control-input:not(:disabled):active ~ .custom-control-label::before { @@ -5124,7 +5124,7 @@ input[type="button"].btn-block { .custom-select:focus { border-color: #6eb5f3; outline: 0; - box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); } + box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); } .custom-select:focus::-ms-value { color: #495057; background-color: #fff; } @@ -5174,7 +5174,7 @@ input[type="button"].btn-block { opacity: 0; } .custom-file-input:focus ~ .custom-file-label { border-color: #6eb5f3; - box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); } + box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); } .custom-file-input[disabled] ~ .custom-file-label, .custom-file-input:disabled ~ .custom-file-label { background-color: #e9ecef; } @@ -5220,11 +5220,11 @@ input[type="button"].btn-block { .custom-range:focus { outline: none; } .custom-range:focus::-webkit-slider-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.25); } + box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.75); } .custom-range:focus::-moz-range-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.25); } + box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.75); } .custom-range:focus::-ms-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.25); } + box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.75); } .custom-range::-moz-focus-outer { border: 0; } .custom-range::-webkit-slider-thumb { @@ -5809,7 +5809,7 @@ input[type="button"].btn-block { .page-link:focus { z-index: 3; outline: 0; - box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); } + box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); } .page-item:first-child .page-link { margin-left: 0; } @@ -9742,6 +9742,91 @@ a.dimmed_text:visited, .dimmed_category a { color: #6c757d; } +.aalink.focus, .aalink:focus, +#page-footer a:not([class]).focus, +#page-footer a:not([class]):focus, +.arrow_link.focus, +.arrow_link:focus, +a:not([class]).focus, +a:not([class]):focus, +.activityinstance > a.focus, +.activityinstance > a:focus { + outline: 0.2rem solid transparent; + color: #212529; + background-color: #e4f1fd; + box-shadow: 0 -0.2rem #e4f1fd, 0 0.2rem #343a40; } + +.aalink:focus:hover, +#page-footer a:not([class]):focus:hover, +.arrow_link:focus:hover, +a:not([class]):focus:hover, +.activityinstance > a:focus:hover { + text-decoration: none; } + +.aabtn.focus, .aabtn:focus, +.btn-link.focus, +.btn-link:focus, +.nav-link.focus, +.nav-link:focus, +.atto_link_button.focus, +.atto_link_button:focus, +[role="button"].focus, +[role="button"]:focus, +.list-group-item-action.focus, +.list-group-item-action:focus, +input[type="checkbox"].focus, +input[type="checkbox"]:focus, +input[type="radio"].focus, +input[type="radio"]:focus, +input[type="file"].focus, +input[type="file"]:focus, +input[type="image"].focus, +input[type="image"]:focus, +.sr-only-focusable.focus, +.sr-only-focusable:focus, +a.dropdown-item.focus, +a.dropdown-item:focus, +a.dropdown-toggle.focus, +a.dropdown-toggle:focus, +.modal-dialog[tabindex="0"].focus, +.modal-dialog[tabindex="0"]:focus, +.moodle-dialogue-base .closebutton.focus, +.moodle-dialogue-base .closebutton:focus, +button.close.focus, +button.close:focus { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); } + +.aabtn:focus:hover, +.btn-link:focus:hover, +.nav-link:focus:hover, +.atto_link_button:focus:hover, +[role="button"]:focus:hover, +.list-group-item-action:focus:hover, +input[type="checkbox"]:focus:hover, +input[type="radio"]:focus:hover, +input[type="file"]:focus:hover, +input[type="image"]:focus:hover, +.sr-only-focusable:focus:hover, +a.dropdown-item:focus:hover, +a.dropdown-toggle:focus:hover, +.modal-dialog[tabindex="0"]:focus:hover, +.moodle-dialogue-base .closebutton:focus:hover, +button.close:focus:hover { + text-decoration: none; } + +.usermenu a, +.usermenu a[role="button"], +div.dropdown-item a, +div.dropdown-item a[role="button"] { + outline: 0; + box-shadow: none; } + +.usermenu:focus-within, +div.dropdown-item:focus-within { + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); } + .unlist, .unlist li, .inline-list, @@ -11208,7 +11293,8 @@ nav.navbar .logo img { /** Header-bar styles **/ .page-context-header { - overflow: hidden; } + overflow: hidden; + padding: 0.25rem; } .page-context-header .page-header-image, .page-context-header .page-header-headings { float: left; @@ -11217,6 +11303,8 @@ nav.navbar .logo img { .page-context-header .page-header-image { margin-right: 1em; margin-bottom: 1em; } + .page-context-header .page-header-image > a { + display: inline-block; } .page-context-header .page-header-headings, .page-context-header .header-button-group { position: relative; @@ -11225,9 +11313,6 @@ nav.navbar .logo img { .page-context-header .header-button-group { display: block; float: left; } - .page-context-header .header-button-group a { - position: relative; - top: -0.4em; } ul.dragdrop-keyboard-drag li { list-style-type: none; } @@ -11400,6 +11485,8 @@ ul { text-decoration: underline; } #page-footer a .icon { color: #fff; } + #page-footer a:focus .icon { + color: #343a40; } .bg-inverse a { color: #fff; @@ -13015,7 +13102,7 @@ body:not(.editing) .sitetopic ul.section { min-height: 2em; } .section .activity .contentwithoutlink > a, .section .activity .activityinstance > a { - display: block; + display: inline-block; text-indent: -31px; padding-left: 31px; } .section .activity .contentwithoutlink .dimmed .activityicon, @@ -14102,6 +14189,7 @@ body.drawer-ease { .fp-iconview .fp-filename-field { height: 33px; + margin-top: 3px; word-wrap: break-word; overflow: hidden; position: absolute; } @@ -14560,10 +14648,12 @@ a.ygtvspacer:hover { display: none; } .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu { - display: block; position: absolute; - right: 7px; - bottom: 5px; } + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; } .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu, .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu { @@ -17145,11 +17235,6 @@ div#dock { .usermenu .login { line-height: 2.25rem; } - .usermenu .login a { - color: #1177d1; } - .usermenu .login a:hover, .usermenu .login a:focus { - color: #0b4f8a; - text-decoration: underline; } .userloggedinas .usermenu .usertext, .userswitchedrole .usermenu .usertext, @@ -17780,6 +17865,70 @@ p.arrow_button { line-height: 48px !important; /* stylelint-disable-line declaration-no-important */ } +.btn-primary:focus, .btn-primary.focus { + outline: 0.2rem solid #020c14; + box-shadow: inset 0 0 0 2px #fff; } + +.btn-secondary:focus, .btn-secondary.focus { + outline: 0.2rem solid #5f6e7d; + box-shadow: inset 0 0 0 2px #fff; } + +.btn-success:focus, .btn-success.focus { + outline: 0.2rem solid black; + box-shadow: inset 0 0 0 2px #fff; } + +.btn-info:focus, .btn-info.focus { + outline: 0.2rem solid #124a5b; + box-shadow: inset 0 0 0 2px #fff; } + +.btn-warning:focus, .btn-warning.focus { + outline: 0.2rem solid #694109; + box-shadow: inset 0 0 0 2px #fff; } + +.btn-danger:focus, .btn-danger.focus { + outline: 0.2rem solid #360d0c; + box-shadow: inset 0 0 0 2px #fff; } + +.btn-light:focus, .btn-light.focus { + outline: 0.2rem solid #8193a5; + box-shadow: inset 0 0 0 2px #fff; } + +.btn-dark:focus, .btn-dark.focus { + outline: 0.2rem solid black; + box-shadow: inset 0 0 0 2px #fff; } + +.btn-outline-primary:focus, .btn-outline-primary.focus { + outline: 0.2rem solid #020c14; + box-shadow: inset 0 0 0 2px #343a40; } + +.btn-outline-secondary:focus, .btn-outline-secondary.focus { + outline: 0.2rem solid #5f6e7d; + box-shadow: inset 0 0 0 2px #343a40; } + +.btn-outline-success:focus, .btn-outline-success.focus { + outline: 0.2rem solid black; + box-shadow: inset 0 0 0 2px #343a40; } + +.btn-outline-info:focus, .btn-outline-info.focus { + outline: 0.2rem solid #124a5b; + box-shadow: inset 0 0 0 2px #343a40; } + +.btn-outline-warning:focus, .btn-outline-warning.focus { + outline: 0.2rem solid #694109; + box-shadow: inset 0 0 0 2px #343a40; } + +.btn-outline-danger:focus, .btn-outline-danger.focus { + outline: 0.2rem solid #360d0c; + box-shadow: inset 0 0 0 2px #343a40; } + +.btn-outline-light:focus, .btn-outline-light.focus { + outline: 0.2rem solid #8193a5; + box-shadow: inset 0 0 0 2px #343a40; } + +.btn-outline-dark:focus, .btn-outline-dark.focus { + outline: 0.2rem solid black; + box-shadow: inset 0 0 0 2px #343a40; } + .gradetreebox h4 { font-size: 0.9375rem; } diff --git a/theme/boost/templates/navbar.mustache b/theme/boost/templates/navbar.mustache index e3067d9bc81..c93e68f0c0b 100644 --- a/theme/boost/templates/navbar.mustache +++ b/theme/boost/templates/navbar.mustache @@ -23,7 +23,7 @@
-