{{#summary}}{{#str}} summary, block_myoverview {{/str}}{{/summary}}
</span>
</button>
- <ul class="dropdown-menu" data-show-active-item aria-labelledby="displaydropdown">
+ <ul class="dropdown-menu" role="menu" data-show-active-item data-skip-active-class="true" aria-labelledby="displaydropdown">
{{#layouts}}
<li>
- <a class="dropdown-item {{#active}}active{{/active}}" href="#" data-display-option="display" data-value="{{id}}" data-pref="{{id}}" aria-label="{{arialabel}}" aria-controls="courses-view-{{uniqid}}">
+ <a class="dropdown-item" href="#" data-display-option="display" data-value="{{id}}" data-pref="{{id}}" aria-label="{{arialabel}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#active}}aria-current="true"{{/active}}>
{{name}}
</a>
</li>
{{selectedcustomfield}}
</span>
</button>
- <ul class="dropdown-menu" data-show-active-item data-active-item-text aria-labelledby="groupingdropdown">
+ <ul class="dropdown-menu" role="menu" data-show-active-item data-skip-active-class="true" data-active-item-text aria-labelledby="groupingdropdown">
{{#displaygroupingallincludinghidden}}
<li>
- <a class="dropdown-item {{#allincludinghidden}}active{{/allincludinghidden}}" href="#" data-filter="grouping" data-value="allincludinghidden" data-pref="allincludinghidden" aria-label="{{#str}} aria:allcoursesincludinghidden, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+ <a class="dropdown-item" href="#" data-filter="grouping" data-value="allincludinghidden" data-pref="allincludinghidden" aria-label="{{#str}} aria:allcoursesincludinghidden, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#allincludinghidden}}aria-current="true"{{/allincludinghidden}}>
{{#str}} allincludinghidden, block_myoverview {{/str}}
</a>
</li>
<span class="filler"> </span>
</li>
<li>
- <a class="dropdown-item {{#all}}active{{/all}}" href="#" data-filter="grouping" data-value="all" data-pref="all" aria-label="{{#str}} aria:allcourses, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+ <a class="dropdown-item" href="#" data-filter="grouping" data-value="all" data-pref="all" aria-label="{{#str}} aria:allcourses, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#all}}aria-current="true"{{/all}}>
{{#str}} all, block_myoverview {{/str}}
</a>
</li>
<span class="filler"> </span>
</li>
<li>
- <a class="dropdown-item {{#inprogress}}active{{/inprogress}}" href="#" data-filter="grouping" data-value="inprogress" data-pref="inprogress" aria-label="{{#str}} aria:inprogress, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+ <a class="dropdown-item" href="#" data-filter="grouping" data-value="inprogress" data-pref="inprogress" aria-label="{{#str}} aria:inprogress, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#inprogress}}aria-current="true"{{/inprogress}}>
{{#str}} inprogress, block_myoverview {{/str}}
</a>
</li>
</li>
{{/displaygroupinginprogress}}
<li>
- <a class="dropdown-item {{#future}}active{{/future}}" href="#" data-filter="grouping" data-value="future" data-pref="future" aria-label="{{#str}} aria:future, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+ <a class="dropdown-item" href="#" data-filter="grouping" data-value="future" data-pref="future" aria-label="{{#str}} aria:future, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#future}}aria-current="true"{{/future}}>
{{#str}} future, block_myoverview {{/str}}
</a>
</li>
{{/displaygroupingfuture}}
{{/displaygroupinginprogress}}
<li>
- <a class="dropdown-item {{#past}}active{{/past}}" href="#" data-filter="grouping" data-value="past" data-pref="past" aria-label="{{#str}} aria:past, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+ <a class="dropdown-item" href="#" data-filter="grouping" data-value="past" data-pref="past" aria-label="{{#str}} aria:past, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#past}}aria-current="true"{{/past}}>
{{#str}} past, block_myoverview {{/str}}
</a>
</li>
</li>
{{#customfieldvalues}}
<li>
- <a class="dropdown-item {{#active}}active{{/active}}" href="#" data-filter="grouping"
+ <a class="dropdown-item" href="#" data-filter="grouping"
data-value="customfield" data-pref="customfield" data-customfieldvalue="{{value}}"
aria-label="{{#str}}aria:customfield, block_myoverview, {{name}}{{/str}}"
- aria-controls="courses-view-{{uniqid}}">
+ aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#active}}aria-current="true"{{/active}}>
{{name}}
</a>
</li>
<span class="filler"> </span>
</li>
<li>
- <a class="dropdown-item {{#favourites}}active{{/favourites}}" href="#" data-filter="grouping" data-value="favourites" data-pref="favourites" aria-label="{{#str}} aria:favourites, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+ <a class="dropdown-item" href="#" data-filter="grouping" data-value="favourites" data-pref="favourites" aria-label="{{#str}} aria:favourites, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#favourites}}aria-current="true"{{/favourites}}>
{{#str}} favourites, block_myoverview {{/str}}
</a>
{{/displaygroupingfavourites}}
<span class="filler"> </span>
</li>
<li>
- <a class="dropdown-item {{#hidden}}active{{/hidden}}" href="#" data-filter="grouping" data-value="hidden" data-pref="hidden" aria-label="{{#str}} aria:hiddencourses, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+ <a class="dropdown-item" href="#" data-filter="grouping" data-value="hidden" data-pref="hidden" aria-label="{{#str}} aria:hiddencourses, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#hidden}}aria-current="true"{{/hidden}}>
{{#str}} hiddencourses, block_myoverview {{/str}}
</a>
</li>
{{#shortname}}{{#str}} shortname, block_myoverview {{/str}}{{/shortname}}
</span>
</button>
- <ul class="dropdown-menu" data-show-active-item aria-labelledby="sortingdropdown">
+ <ul class="dropdown-menu" role="menu" data-show-active-item data-skip-active-class="true" aria-labelledby="sortingdropdown">
<li>
- <a class="dropdown-item {{#title}}active{{/title}}" href="#" data-filter="sort" data-pref="title" data-value="fullname" aria-label="{{#str}} aria:title, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+ <a class="dropdown-item" href="#" data-filter="sort" data-pref="title" data-value="fullname" aria-label="{{#str}} aria:title, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#title}}aria-current="true"{{/title}}>
{{#str}} title, block_myoverview {{/str}}
</a>
</li>
{{#showsortbyshortname}}
<li>
- <a class="dropdown-item {{#shortname}}active{{/shortname}}" href="#" data-filter="sort" data-pref="shortname" data-value="shortname" aria-label="{{#str}} aria:shortname, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+ <a class="dropdown-item" href="#" data-filter="sort" data-pref="shortname" data-value="shortname" aria-label="{{#str}} aria:shortname, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#shortname}}aria-current="true"{{/shortname}}>
{{#str}} shortname, block_myoverview {{/str}}
</a>
</li>
{{/showsortbyshortname}}
<li>
- <a class="dropdown-item {{#lastaccessed}}active{{/lastaccessed}}" href="#" data-filter="sort" data-pref="lastaccessed" data-value="ul.timeaccess desc" aria-label="{{#str}} aria:lastaccessed, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+ <a class="dropdown-item" href="#" data-filter="sort" data-pref="lastaccessed" data-value="ul.timeaccess desc" aria-label="{{#str}} aria:lastaccessed, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#lastaccessed}}aria-current="true"{{/lastaccessed}}>
{{#str}} lastaccessed, block_myoverview {{/str}}
</a>
</li>
var option = $(e.target).closest(SELECTORS.TIMELINE_DAY_FILTER_OPTION);
- if (option.hasClass('active')) {
+ if (option.attr('aria-current') == 'true') {
// If it's already active then we don't need to do anything.
return;
}
// Listen for when the user changes tab so that we can show the first set of courses
// and load their events when they request the sort by courses view for the first time.
- viewSelector.on('shown shown.bs.tab', function() {
+ viewSelector.on('shown shown.bs.tab', function(e) {
View.shown(timelineViewRoot);
+ $(e.target).removeClass('active');
});
+
// Event selector for user_sort
CustomEvents.define(viewSelector, [CustomEvents.events.activate]);
viewSelector.on(CustomEvents.events.activate, "[data-toggle='tab']", function(e) {
{{#next6months}} {{#str}}next6months, block_timeline {{/str}} {{/next6months}}
</span>
</button>
- <div id="menudayfilter" role="menu" class="dropdown-menu" data-show-active-item>
+ <div id="menudayfilter" role="menu" class="dropdown-menu" data-show-active-item data-skip-active-class="true">
<a
- class="dropdown-item {{#all}} active {{/all}}"
+ class="dropdown-item"
href="#"
data-from="-14"
data-filtername="all"
+ {{#all}}aria-current="true"{{/all}}
aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} all, core {{/str}}{{/str}}"
role="menuitem"
- {{#all}}aria-current="true"{{/all}}
>
{{#str}} all, core {{/str}}
</a>
<a
- class="dropdown-item {{#overdue}} active {{/overdue}}"
+ class="dropdown-item"
href="#"
data-from="-14"
data-to="0"
data-filtername="overdue"
+ {{#overdue}}aria-current="true"{{/overdue}}
aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} overdue, block_timeline {{/str}}{{/str}}"
role="menuitem"
- {{#overdue}}aria-current="true"{{/overdue}}
>
{{#str}} overdue, block_timeline {{/str}}
</a>
<div class="dropdown-divider" role="separator"></div>
<h6 class="dropdown-header">{{#str}} duedate, block_timeline {{/str}}</h6>
<a
- class="dropdown-item {{#next7days}} active {{/next7days}}"
+ class="dropdown-item"
href="#"
data-from="0"
data-to="7"
data-filtername="next7days"
+ {{#next7days}}aria-current="true"{{/next7days}}
aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next7days, block_timeline {{/str}}{{/str}}"
role="menuitem"
- {{#next7days}}aria-current="true"{{/next7days}}
>
{{#str}} next7days, block_timeline {{/str}}
</a>
<a
- class="dropdown-item {{#next30days}} active {{/next30days}}"
+ class="dropdown-item"
href="#"
data-from="0"
data-to="30"
data-filtername="next30days"
+ {{#next30days}}aria-current="true"{{/next30days}}
aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next30days, block_timeline {{/str}}{{/str}}"
role="menuitem"
- {{#next30days}}aria-current="true"{{/next30days}}
>
{{#str}} next30days, block_timeline {{/str}}
</a>
<a
- class="dropdown-item {{#next3months}} active {{/next3months}}"
+ class="dropdown-item"
href="#"
data-from="0"
data-to="90"
data-filtername="next3months"
+ {{#next3months}}aria-current="true"{{/next3months}}
aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next3months, block_timeline {{/str}}{{/str}}"
role="menuitem"
- {{#next3months}}aria-current="true"{{/next3months}}
>
{{#str}} next3months, block_timeline {{/str}}
</a>
data-from="0"
data-to="180"
data-filtername="next6months"
+ {{#next6months}}aria-current="true"{{/next6months}}
aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next6months, block_timeline {{/str}}{{/str}}"
role="menuitem"
- {{#next6months}}aria-current="true"{{/next6months}}
>
{{#str}} next6months, block_timeline {{/str}}
</a>
</button>
<div id="menusortby" role="menu" class="dropdown-menu dropdown-menu-right list-group hidden" data-show-active-item data-skip-active-class="true">
<a
- class="dropdown-item {{#sorttimelinedates}}active{{/sorttimelinedates}}"
+ class="dropdown-item"
href="#view_dates_{{uniqid}}"
data-toggle="tab"
data-filtername="sortbydates"
+ {{#sorttimelinedates}}aria-current="true"{{/sorttimelinedates}}
aria-label="{{#str}} ariaviewselectoroption, block_timeline, {{#str}} sortbydates, block_timeline {{/str}}{{/str}}"
role="menuitem"
- {{#sorttimelinedates}}aria-current="true"{{/sorttimelinedates}}
>
{{#str}} sortbydates, block_timeline {{/str}}
</a>
<a
- class="dropdown-item {{#sorttimelinecourses}}active{{/sorttimelinecourses}}"
+ class="dropdown-item"
href="#view_courses_{{uniqid}}"
data-toggle="tab"
data-filtername="sortbycourses"
+ {{#sorttimelinecourses}}aria-current="true"{{/sorttimelinecourses}}
aria-label="{{#str}} ariaviewselectoroption, block_timeline, {{#str}} sortbycourses, block_timeline {{/str}}{{/str}}"
role="menuitem"
- {{#sorttimelinecourses}}aria-current="true"{{/sorttimelinecourses}}
>
{{#str}} sortbycourses, block_timeline {{/str}}
</a>
role="menu"
class="dropdown-menu"
data-show-active-item
+ data-skip-active-class="true"
{{#arialabels.itemsperpagecomponents}}
data-active-item-button-aria-label-components="{{.}}"
{{/arialabels.itemsperpagecomponents}}
input[type="file"],
input[type="image"],
.sr-only-focusable,
-a.dropdown-item,
a.dropdown-toggle,
.modal-dialog[tabindex="0"],
.moodle-dialogue-base .closebutton,
}
}
-.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,
}
// Make links in a menu clickable anywhere in the row.
-.dropdown-item a {
- display: block;
- width: 100%;
- color: $body-color;
-}
-.dropdown-item:active a {
- color: $dropdown-link-active-color;
+.dropdown-item {
+ a {
+ display: block;
+ width: 100%;
+ color: $body-color;
+ }
+ &:active,
+ &:hover,
+ &:focus,
+ &:focus-within {
+ outline: 0;
+ background-color: $dropdown-link-hover-bg;
+ a {
+ color: $dropdown-link-active-color;
+ }
+ }
+ &[aria-current="true"] {
+ position: relative;
+ display: flex;
+ align-items: center;
+ &:before {
+ @include fa-icon();
+ content: $fa-var-circle;
+ position: absolute;
+ left: 0.4rem;
+ font-size: 0.7rem;
+ }
+ }
}
.competency-tree {
.form-autocomplete-suggestions {
position: absolute;
background-color: white;
- border: 2px solid $gray-300;
- border-radius: 3px;
+ border: $border-width solid $input-border-color;
min-width: 206px;
max-height: 20em;
overflow: auto;
- margin: 0;
padding: 0;
- margin-top: 0.4em;
+ margin: 2px 0 0 0;
z-index: 1;
}
.form-autocomplete-suggestions li {
list-style-type: none;
- padding: 0.2em;
+ padding: $dropdown-item-padding-y $dropdown-item-padding-x;
margin: 0;
cursor: pointer;
color: $body-color;
-}
-
-.form-autocomplete-suggestions li:hover {
- background-color: lighten($dropdown-link-active-bg, 15%);
- color: $dropdown-link-active-color;
-}
-
-.form-autocomplete-suggestions li[aria-selected=true] {
- background-color: darken($dropdown-bg, 5%);
- color: $gray-700;
+ &:hover,
+ &:focus,
+ &[aria-selected="true"] {
+ background-color: $dropdown-link-active-bg;
+ color: $dropdown-link-active-color;
+ }
}
.form-autocomplete-downarrow {
$input-border-color: $gray-500 !default;
+$dropdown-link-hover-color: $white;
+$dropdown-link-hover-bg: $primary;
+
// stylelint-disable
$theme-colors: () !default;
$theme-colors: map-merge((
background-color: transparent;
border: 0; }
.dropdown-item:hover, .dropdown-item:focus {
- color: #16181b;
+ color: #fff;
text-decoration: none;
- background-color: #f8f9fa; }
+ background-color: #0f6fc5; }
.dropdown-item.active, .dropdown-item:active {
color: #fff;
text-decoration: none;
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,
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,
.safari input[type="radio"]:focus {
outline: auto; }
-.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(15, 111, 197, 0.75); }
-
.unlist,
.unlist li,
.inline-list,
width: 100%;
color: #212529; }
-.dropdown-item:active a {
- color: #fff; }
+.dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:focus-within {
+ outline: 0;
+ background-color: #0f6fc5; }
+ .dropdown-item:active a, .dropdown-item:hover a, .dropdown-item:focus a, .dropdown-item:focus-within a {
+ color: #fff; }
+
+.dropdown-item[aria-current="true"] {
+ position: relative;
+ display: flex;
+ align-items: center; }
+ .dropdown-item[aria-current="true"]:before {
+ display: inline-block;
+ font: normal normal normal 14px/1 FontAwesome;
+ font-size: inherit;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: "";
+ position: absolute;
+ left: 0.4rem;
+ font-size: 0.7rem; }
.competency-tree ul {
padding-left: 1.5rem; }
.form-autocomplete-suggestions {
position: absolute;
background-color: white;
- border: 2px solid #dee2e6;
- border-radius: 3px;
+ border: 1px solid #8f959e;
min-width: 206px;
max-height: 20em;
overflow: auto;
- margin: 0;
padding: 0;
- margin-top: 0.4em;
+ margin: 2px 0 0 0;
z-index: 1; }
.form-autocomplete-suggestions li {
list-style-type: none;
- padding: 0.2em;
+ padding: 0.25rem 1.5rem;
margin: 0;
cursor: pointer;
color: #212529; }
-
-.form-autocomplete-suggestions li:hover {
- background-color: #3195ef;
- color: #fff; }
-
-.form-autocomplete-suggestions li[aria-selected=true] {
- background-color: #f2f2f2;
- color: #495057; }
+ .form-autocomplete-suggestions li:hover, .form-autocomplete-suggestions li:focus, .form-autocomplete-suggestions li[aria-selected="true"] {
+ background-color: #0f6fc5;
+ color: #fff; }
.form-autocomplete-downarrow {
color: #212529;
$input-border-color: $gray-500 !default;
+$dropdown-link-hover-color: $white;
+$dropdown-link-hover-bg: $primary;
+
// stylelint-disable
$theme-colors: () !default;
$theme-colors: map-merge((
background-color: transparent;
border: 0; }
.dropdown-item:hover, .dropdown-item:focus {
- color: #16181b;
+ color: #fff;
text-decoration: none;
- background-color: #f8f9fa; }
+ background-color: #0f6fc5; }
.dropdown-item.active, .dropdown-item:active {
color: #fff;
text-decoration: none;
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,
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,
.safari input[type="radio"]:focus {
outline: auto; }
-.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(15, 111, 197, 0.75); }
-
.unlist,
.unlist li,
.inline-list,
width: 100%;
color: #212529; }
-.dropdown-item:active a {
- color: #fff; }
+.dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:focus-within {
+ outline: 0;
+ background-color: #0f6fc5; }
+ .dropdown-item:active a, .dropdown-item:hover a, .dropdown-item:focus a, .dropdown-item:focus-within a {
+ color: #fff; }
+
+.dropdown-item[aria-current="true"] {
+ position: relative;
+ display: flex;
+ align-items: center; }
+ .dropdown-item[aria-current="true"]:before {
+ display: inline-block;
+ font: normal normal normal 14px/1 FontAwesome;
+ font-size: inherit;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: "";
+ position: absolute;
+ left: 0.4rem;
+ font-size: 0.7rem; }
.competency-tree ul {
padding-left: 1.5rem; }
.form-autocomplete-suggestions {
position: absolute;
background-color: white;
- border: 2px solid #dee2e6;
- border-radius: 3px;
+ border: 1px solid #8f959e;
min-width: 206px;
max-height: 20em;
overflow: auto;
- margin: 0;
padding: 0;
- margin-top: 0.4em;
+ margin: 2px 0 0 0;
z-index: 1; }
.form-autocomplete-suggestions li {
list-style-type: none;
- padding: 0.2em;
+ padding: 0.25rem 1.5rem;
margin: 0;
cursor: pointer;
color: #212529; }
-
-.form-autocomplete-suggestions li:hover {
- background-color: #3195ef;
- color: #fff; }
-
-.form-autocomplete-suggestions li[aria-selected=true] {
- background-color: #f2f2f2;
- color: #495057; }
+ .form-autocomplete-suggestions li:hover, .form-autocomplete-suggestions li:focus, .form-autocomplete-suggestions li[aria-selected="true"] {
+ background-color: #0f6fc5;
+ color: #fff; }
.form-autocomplete-downarrow {
color: #212529;
