MDL-79920 theme: Introduced new icon circle css class

This commit is contained in:
David Woloszyn 2024-03-04 15:50:35 +11:00
parent 4da813d35e
commit b2ed67eb43
4 changed files with 77 additions and 0 deletions

View File

@ -3154,3 +3154,8 @@ blockquote {
vertical-align: middle;
}
}
/* General card customisations. */
.card.active {
border-color: $gray-500;
}

View File

@ -204,6 +204,28 @@ $iconsizes: map-merge((
}
}
.icon-circle {
display: inline-block;
background-color: darken($gray-400, 4%);
border-radius: 50%;
padding: 1.3rem;
.icon {
margin: 0;
text-align: center;
max-width: unset;
max-height: unset;
color: $black;
}
&.reversed {
background-color: darken($gray-400, 8%);
.icon {
color: $white;
}
}
}
// Make activtity colours available for custom modules.
:root {
@each $type, $value in $activity-icon-colors {

View File

@ -26060,6 +26060,11 @@ blockquote {
vertical-align: middle;
}
/* General card customisations. */
.card.active {
border-color: #8f959e;
}
.action-menu .dropdown-toggle {
text-decoration: none;
display: inline-block;
@ -26367,6 +26372,26 @@ body.behat-site .action-menu .dropdown-subpanel-content.show {
width: 32px;
}
.icon-circle {
display: inline-block;
background-color: #c2cad1;
border-radius: 50%;
padding: 1.3rem;
}
.icon-circle .icon {
margin: 0;
text-align: center;
max-width: unset;
max-height: unset;
color: #000;
}
.icon-circle.reversed {
background-color: #b7c0c8;
}
.icon-circle.reversed .icon {
color: #fff;
}
:root {
--activityadministration: invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%);
--activityassessment: invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%);

View File

@ -26060,6 +26060,11 @@ blockquote {
vertical-align: middle;
}
/* General card customisations. */
.card.active {
border-color: #8f959e;
}
.action-menu .dropdown-toggle {
text-decoration: none;
display: inline-block;
@ -26367,6 +26372,26 @@ body.behat-site .action-menu .dropdown-subpanel-content.show {
width: 32px;
}
.icon-circle {
display: inline-block;
background-color: #c2cad1;
border-radius: 50%;
padding: 1.3rem;
}
.icon-circle .icon {
margin: 0;
text-align: center;
max-width: unset;
max-height: unset;
color: #000;
}
.icon-circle.reversed {
background-color: #b7c0c8;
}
.icon-circle.reversed .icon {
color: #fff;
}
:root {
--activityadministration: invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%);
--activityassessment: invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%);