mirror of
https://github.com/moodle/moodle.git
synced 2025-04-21 16:32:18 +02:00
MDL-78972 theme_boost: Add dropdown item colour styles
- Create a new SCSS file for dropdown related styles - Move current dropdown styles from core.scss to new dropdown.scss - Add helper classes for dropdown item colouring
This commit is contained in:
Mikel Martín
parent
206c3a66e7
commit
bb3dca93db
@ -50,3 +50,4 @@ $breadcrumb-divider-rtl: "◀" !default;
|
||||
@import "moodle/tertiarynavigation";
|
||||
@import "moodle/process-monitor";
|
||||
@import "moodle/moodlenet";
|
||||
@import "moodle/dropdown";
|
||||
|
||||
@ -2406,40 +2406,6 @@ $footer-link-color: $bg-inverse-link-color !default;
|
||||
}
|
||||
}
|
||||
|
||||
// Make links in a menu clickable anywhere in the row.
|
||||
.dropdown-item {
|
||||
a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: $body-color;
|
||||
}
|
||||
&.active,
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
outline: 0;
|
||||
background-color: $dropdown-link-active-bg;
|
||||
color: $dropdown-link-active-color;
|
||||
a {
|
||||
color: $dropdown-link-active-color;
|
||||
}
|
||||
}
|
||||
&[aria-current="true"],
|
||||
&[aria-selected="true"] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:before {
|
||||
@extend .fa-solid;
|
||||
content: fa-content($fa-var-check);
|
||||
position: absolute;
|
||||
left: 0.4rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.competency-tree {
|
||||
ul {
|
||||
padding-left: 1.5rem;
|
||||
|
||||
47
theme/boost/scss/moodle/dropdown.scss
Normal file
47
theme/boost/scss/moodle/dropdown.scss
Normal file
@ -0,0 +1,47 @@
|
||||
/**
|
||||
* Dropdown menu Moodle specific styles.
|
||||
*/
|
||||
|
||||
// Make links in a menu clickable anywhere in the row.
|
||||
.dropdown-item {
|
||||
a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: $body-color;
|
||||
}
|
||||
&.active,
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
outline: 0;
|
||||
background-color: $dropdown-link-active-bg;
|
||||
color: $dropdown-link-active-color;
|
||||
a {
|
||||
color: $dropdown-link-active-color;
|
||||
}
|
||||
}
|
||||
&[aria-current="true"],
|
||||
&[aria-selected="true"] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:before {
|
||||
@extend .fa-solid;
|
||||
content: fa-content($fa-var-check);
|
||||
position: absolute;
|
||||
left: 0.4rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add dropdown menu items styles for each theme color (mantainning default hover colour for contrast).
|
||||
@each $color, $value in $theme-colors {
|
||||
.dropdown-item.text-#{$color} {
|
||||
color: $value;
|
||||
&:hover {
|
||||
color: $dropdown-link-hover-color !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2067,6 +2067,8 @@
|
||||
}
|
||||
.fas,
|
||||
.fa-solid,
|
||||
.dropdown-item[aria-current=true]:before,
|
||||
.dropdown-item[aria-selected=true]:before,
|
||||
.moremenu .dropdown-item[aria-current=true]:before,
|
||||
.moremenu .dropdown-item.active:before,
|
||||
.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .dropdown-item.carousel-navigation-link::after,
|
||||
@ -2086,9 +2088,7 @@
|
||||
.dropup .dropdown-toggle::after,
|
||||
.dropright .dropdown-toggle::after,
|
||||
.dropleft .dropdown-toggle::before,
|
||||
.dropdown-toggle::after,
|
||||
.dropdown-item[aria-current=true]:before,
|
||||
.dropdown-item[aria-selected=true]:before {
|
||||
.dropdown-toggle::after {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@ -4926,6 +4926,8 @@
|
||||
.fa-sharp,
|
||||
.fas,
|
||||
.fa-solid,
|
||||
.dropdown-item[aria-current=true]:before,
|
||||
.dropdown-item[aria-selected=true]:before,
|
||||
.moremenu .dropdown-item[aria-current=true]:before,
|
||||
.moremenu .dropdown-item.active:before,
|
||||
.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .dropdown-item.carousel-navigation-link::after,
|
||||
@ -4946,8 +4948,6 @@
|
||||
.dropright .dropdown-toggle::after,
|
||||
.dropleft .dropdown-toggle::before,
|
||||
.dropdown-toggle::after,
|
||||
.dropdown-item[aria-current=true]:before,
|
||||
.dropdown-item[aria-selected=true]:before,
|
||||
.far,
|
||||
.fa-regular,
|
||||
.content-bank-container.view-grid .cb-unlisted::after,
|
||||
@ -4965,6 +4965,8 @@
|
||||
.fas,
|
||||
.fa-classic,
|
||||
.fa-solid,
|
||||
.dropdown-item[aria-current=true]:before,
|
||||
.dropdown-item[aria-selected=true]:before,
|
||||
.moremenu .dropdown-item[aria-current=true]:before,
|
||||
.moremenu .dropdown-item.active:before,
|
||||
.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .dropdown-item.carousel-navigation-link::after,
|
||||
@ -4985,8 +4987,6 @@
|
||||
.dropright .dropdown-toggle::after,
|
||||
.dropleft .dropdown-toggle::before,
|
||||
.dropdown-toggle::after,
|
||||
.dropdown-item[aria-current=true]:before,
|
||||
.dropdown-item[aria-selected=true]:before,
|
||||
.far,
|
||||
.fa-regular,
|
||||
.content-bank-container.view-grid .cb-unlisted::after {
|
||||
@ -25225,31 +25225,6 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
|
||||
width: 112px;
|
||||
}
|
||||
|
||||
.dropdown-item a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #1d2125;
|
||||
}
|
||||
.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:focus-within {
|
||||
outline: 0;
|
||||
background-color: #0f6cbf;
|
||||
color: #fff;
|
||||
}
|
||||
.dropdown-item.active a, .dropdown-item:active a, .dropdown-item:hover a, .dropdown-item:focus a, .dropdown-item:focus-within a {
|
||||
color: #fff;
|
||||
}
|
||||
.dropdown-item[aria-current=true], .dropdown-item[aria-selected=true] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.dropdown-item[aria-current=true]:before, .dropdown-item[aria-selected=true]:before {
|
||||
content: "\f00c";
|
||||
position: absolute;
|
||||
left: 0.4rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.competency-tree ul {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
@ -38267,6 +38242,90 @@ div.editor_atto_toolbar button .icon {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropdown menu Moodle specific styles.
|
||||
*/
|
||||
.dropdown-item a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #1d2125;
|
||||
}
|
||||
.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:focus-within {
|
||||
outline: 0;
|
||||
background-color: #0f6cbf;
|
||||
color: #fff;
|
||||
}
|
||||
.dropdown-item.active a, .dropdown-item:active a, .dropdown-item:hover a, .dropdown-item:focus a, .dropdown-item:focus-within a {
|
||||
color: #fff;
|
||||
}
|
||||
.dropdown-item[aria-current=true], .dropdown-item[aria-selected=true] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.dropdown-item[aria-current=true]:before, .dropdown-item[aria-selected=true]:before {
|
||||
content: "\f00c";
|
||||
position: absolute;
|
||||
left: 0.4rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.dropdown-item.text-primary {
|
||||
color: #0f6cbf;
|
||||
}
|
||||
.dropdown-item.text-primary:hover {
|
||||
color: #fff !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
.dropdown-item.text-secondary {
|
||||
color: #ced4da;
|
||||
}
|
||||
.dropdown-item.text-secondary:hover {
|
||||
color: #fff !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
.dropdown-item.text-success {
|
||||
color: #357a32;
|
||||
}
|
||||
.dropdown-item.text-success:hover {
|
||||
color: #fff !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
.dropdown-item.text-info {
|
||||
color: #008196;
|
||||
}
|
||||
.dropdown-item.text-info:hover {
|
||||
color: #fff !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
.dropdown-item.text-warning {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
.dropdown-item.text-warning:hover {
|
||||
color: #fff !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
.dropdown-item.text-danger {
|
||||
color: #ca3120;
|
||||
}
|
||||
.dropdown-item.text-danger:hover {
|
||||
color: #fff !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
.dropdown-item.text-light {
|
||||
color: #f8f9fa;
|
||||
}
|
||||
.dropdown-item.text-light:hover {
|
||||
color: #fff !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
.dropdown-item.text-dark {
|
||||
color: #343a40;
|
||||
}
|
||||
.dropdown-item.text-dark:hover {
|
||||
color: #fff !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@ -2067,6 +2067,8 @@
|
||||
}
|
||||
.fas,
|
||||
.fa-solid,
|
||||
.dropdown-item[aria-current=true]:before,
|
||||
.dropdown-item[aria-selected=true]:before,
|
||||
.moremenu .dropdown-item[aria-current=true]:before,
|
||||
.moremenu .dropdown-item.active:before,
|
||||
.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .dropdown-item.carousel-navigation-link::after,
|
||||
@ -2086,9 +2088,7 @@
|
||||
.dropup .dropdown-toggle::after,
|
||||
.dropright .dropdown-toggle::after,
|
||||
.dropleft .dropdown-toggle::before,
|
||||
.dropdown-toggle::after,
|
||||
.dropdown-item[aria-current=true]:before,
|
||||
.dropdown-item[aria-selected=true]:before {
|
||||
.dropdown-toggle::after {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@ -4926,6 +4926,8 @@
|
||||
.fa-sharp,
|
||||
.fas,
|
||||
.fa-solid,
|
||||
.dropdown-item[aria-current=true]:before,
|
||||
.dropdown-item[aria-selected=true]:before,
|
||||
.moremenu .dropdown-item[aria-current=true]:before,
|
||||
.moremenu .dropdown-item.active:before,
|
||||
.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .dropdown-item.carousel-navigation-link::after,
|
||||
@ -4946,8 +4948,6 @@
|
||||
.dropright .dropdown-toggle::after,
|
||||
.dropleft .dropdown-toggle::before,
|
||||
.dropdown-toggle::after,
|
||||
.dropdown-item[aria-current=true]:before,
|
||||
.dropdown-item[aria-selected=true]:before,
|
||||
.far,
|
||||
.fa-regular,
|
||||
.content-bank-container.view-grid .cb-unlisted::after,
|
||||
@ -4965,6 +4965,8 @@
|
||||
.fas,
|
||||
.fa-classic,
|
||||
.fa-solid,
|
||||
.dropdown-item[aria-current=true]:before,
|
||||
.dropdown-item[aria-selected=true]:before,
|
||||
.moremenu .dropdown-item[aria-current=true]:before,
|
||||
.moremenu .dropdown-item.active:before,
|
||||
.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .dropdown-item.carousel-navigation-link::after,
|
||||
@ -4985,8 +4987,6 @@
|
||||
.dropright .dropdown-toggle::after,
|
||||
.dropleft .dropdown-toggle::before,
|
||||
.dropdown-toggle::after,
|
||||
.dropdown-item[aria-current=true]:before,
|
||||
.dropdown-item[aria-selected=true]:before,
|
||||
.far,
|
||||
.fa-regular,
|
||||
.content-bank-container.view-grid .cb-unlisted::after {
|
||||
@ -25225,31 +25225,6 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
|
||||
width: 112px;
|
||||
}
|
||||
|
||||
.dropdown-item a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #1d2125;
|
||||
}
|
||||
.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:focus-within {
|
||||
outline: 0;
|
||||
background-color: #0f6cbf;
|
||||
color: #fff;
|
||||
}
|
||||
.dropdown-item.active a, .dropdown-item:active a, .dropdown-item:hover a, .dropdown-item:focus a, .dropdown-item:focus-within a {
|
||||
color: #fff;
|
||||
}
|
||||
.dropdown-item[aria-current=true], .dropdown-item[aria-selected=true] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.dropdown-item[aria-current=true]:before, .dropdown-item[aria-selected=true]:before {
|
||||
content: "\f00c";
|
||||
position: absolute;
|
||||
left: 0.4rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.competency-tree ul {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
@ -38201,6 +38176,90 @@ div.editor_atto_toolbar button .icon {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropdown menu Moodle specific styles.
|
||||
*/
|
||||
.dropdown-item a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #1d2125;
|
||||
}
|
||||
.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:focus-within {
|
||||
outline: 0;
|
||||
background-color: #0f6cbf;
|
||||
color: #fff;
|
||||
}
|
||||
.dropdown-item.active a, .dropdown-item:active a, .dropdown-item:hover a, .dropdown-item:focus a, .dropdown-item:focus-within a {
|
||||
color: #fff;
|
||||
}
|
||||
.dropdown-item[aria-current=true], .dropdown-item[aria-selected=true] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.dropdown-item[aria-current=true]:before, .dropdown-item[aria-selected=true]:before {
|
||||
content: "\f00c";
|
||||
position: absolute;
|
||||
left: 0.4rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.dropdown-item.text-primary {
|
||||
color: #0f6cbf;
|
||||
}
|
||||
.dropdown-item.text-primary:hover {
|
||||
color: #fff !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
.dropdown-item.text-secondary {
|
||||
color: #ced4da;
|
||||
}
|
||||
.dropdown-item.text-secondary:hover {
|
||||
color: #fff !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
.dropdown-item.text-success {
|
||||
color: #357a32;
|
||||
}
|
||||
.dropdown-item.text-success:hover {
|
||||
color: #fff !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
.dropdown-item.text-info {
|
||||
color: #008196;
|
||||
}
|
||||
.dropdown-item.text-info:hover {
|
||||
color: #fff !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
.dropdown-item.text-warning {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
.dropdown-item.text-warning:hover {
|
||||
color: #fff !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
.dropdown-item.text-danger {
|
||||
color: #ca3120;
|
||||
}
|
||||
.dropdown-item.text-danger:hover {
|
||||
color: #fff !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
.dropdown-item.text-light {
|
||||
color: #f8f9fa;
|
||||
}
|
||||
.dropdown-item.text-light:hover {
|
||||
color: #fff !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
.dropdown-item.text-dark {
|
||||
color: #343a40;
|
||||
}
|
||||
.dropdown-item.text-dark:hover {
|
||||
color: #fff !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user