mirror of
https://github.com/moodle/moodle.git
synced 2025-08-05 08:56:36 +02:00
MDL-71457 theme_boost: activity icon styling
This commit is contained in:
Bas Brands
parent
5958c0df0c
commit
f2ddd23ec1
44 changed files with 319 additions and 158 deletions
|
|
@ -187,7 +187,7 @@ class core_renderer extends \core_renderer {
|
|||
// Image data.
|
||||
if (isset($contextheader->imagedata)) {
|
||||
// Header specific image.
|
||||
$html .= html_writer::div($contextheader->imagedata, 'page-header-image icon-size-6');
|
||||
$html .= html_writer::div($contextheader->imagedata, 'page-header-image mr-2');
|
||||
}
|
||||
|
||||
// Headings.
|
||||
|
|
|
|||
|
|
@ -2059,9 +2059,6 @@ nav.navbar .logo img {
|
|||
}
|
||||
|
||||
.page-header-image {
|
||||
margin-right: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
margin-top: 0.7em;
|
||||
& > a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -85,14 +85,10 @@ body:not(.editing) .sitetopic ul.section {
|
|||
.contentwithoutlink,
|
||||
.activityinstance {
|
||||
min-width: 40%;
|
||||
display: table-cell;
|
||||
padding-right: 4px;
|
||||
min-height: 2em;
|
||||
|
||||
> a {
|
||||
display: inline-block;
|
||||
text-indent: -31px;
|
||||
padding-left: 31px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dimmed {
|
||||
|
|
@ -154,14 +150,10 @@ body:not(.editing) .sitetopic ul.section {
|
|||
}
|
||||
}
|
||||
|
||||
.activity img.activityicon {
|
||||
margin-right: 6px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.section .activity .activityinstance,
|
||||
.section .activity .activityinstance div {
|
||||
display: inline-block;
|
||||
.section .activity .activityinstance {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.editing {
|
||||
|
|
@ -1333,26 +1325,6 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
|||
}
|
||||
}
|
||||
|
||||
$activity-iconcontainer-width: 50px;
|
||||
$activity-iconcontainer-height: 50px;
|
||||
|
||||
.activity-item .activityiconcontainer {
|
||||
width: $activity-iconcontainer-width;
|
||||
height: $activity-iconcontainer-height;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $gray-100;
|
||||
border-radius: $border-radius;
|
||||
padding: 0.7rem;
|
||||
|
||||
.activityicon {
|
||||
margin: 0;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.description .course-description-item {
|
||||
background-color: $gray-100;
|
||||
padding-left: map-get($spacers, 3);
|
||||
|
|
|
|||
|
|
@ -124,3 +124,36 @@ $iconsizes: map-merge((
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.activityiconcontainer {
|
||||
width: $activity-iconcontainer-width;
|
||||
height: $activity-iconcontainer-height;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $gray-100;
|
||||
border-radius: 4px;
|
||||
padding: 0.7rem;
|
||||
.activityicon {
|
||||
margin: 0;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@each $type, $value in $activity-icon-colors {
|
||||
.activityiconcontainer.#{$type} {
|
||||
background-color: $value;
|
||||
.activityicon {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make activtity colours available for custom modules.
|
||||
:root {
|
||||
@each $type, $value in $activity-icon-colors {
|
||||
--activity#{$type}: #{$value};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,3 +34,18 @@ $primary-light-background: theme-color-level('primary', -12) !default;
|
|||
$primary-light-border: theme-color-level('primary', -2) !default;
|
||||
$primary-light-color: $body-color;
|
||||
$primary-light-hover: theme-color-level('primary', -10) !default;
|
||||
$activity-iconcontainer-height: 50px;
|
||||
$activity-iconcontainer-width: 50px;
|
||||
|
||||
$activity-icon-colors: () !default;
|
||||
$activity-icon-colors: map-merge(
|
||||
(
|
||||
"administration": #5d63f6,
|
||||
"assessment": #eb66a2,
|
||||
"collaboration": #f7634d,
|
||||
"communication": #11a676,
|
||||
"content": #399be2,
|
||||
"interface": #a378ff
|
||||
),
|
||||
$activity-icon-colors
|
||||
);
|
||||
|
|
|
|||
|
|
@ -11552,12 +11552,8 @@ nav.navbar .logo img {
|
|||
float: left;
|
||||
display: block;
|
||||
position: relative; }
|
||||
.page-context-header .page-header-image {
|
||||
margin-right: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
margin-top: 0.7em; }
|
||||
.page-context-header .page-header-image > a {
|
||||
display: inline-block; }
|
||||
.page-context-header .page-header-image > a {
|
||||
display: inline-block; }
|
||||
.page-context-header .page-header-headings,
|
||||
.page-context-header .header-button-group {
|
||||
position: relative;
|
||||
|
|
@ -12344,6 +12340,58 @@ body.dragging .dragging {
|
|||
display: flex;
|
||||
align-items: center; }
|
||||
|
||||
.activityiconcontainer {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
padding: 0.7rem; }
|
||||
.activityiconcontainer .activityicon {
|
||||
margin: 0;
|
||||
height: 24px;
|
||||
width: 24px; }
|
||||
|
||||
.activityiconcontainer.administration {
|
||||
background-color: #5d63f6; }
|
||||
.activityiconcontainer.administration .activityicon {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.assessment {
|
||||
background-color: #eb66a2; }
|
||||
.activityiconcontainer.assessment .activityicon {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.collaboration {
|
||||
background-color: #f7634d; }
|
||||
.activityiconcontainer.collaboration .activityicon {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.communication {
|
||||
background-color: #11a676; }
|
||||
.activityiconcontainer.communication .activityicon {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.content {
|
||||
background-color: #399be2; }
|
||||
.activityiconcontainer.content .activityicon {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.interface {
|
||||
background-color: #a378ff; }
|
||||
.activityiconcontainer.interface .activityicon {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
:root {
|
||||
--activityadministration: #5d63f6;
|
||||
--activityassessment: #eb66a2;
|
||||
--activitycollaboration: #f7634d;
|
||||
--activitycommunication: #11a676;
|
||||
--activitycontent: #399be2;
|
||||
--activityinterface: #a378ff; }
|
||||
|
||||
/* admin.less */
|
||||
.formtable tbody th {
|
||||
font-weight: normal;
|
||||
|
|
@ -13682,15 +13730,11 @@ body:not(.editing) .sitetopic ul.section {
|
|||
display: flex; }
|
||||
.section .activity .contentwithoutlink,
|
||||
.section .activity .activityinstance {
|
||||
min-width: 40%;
|
||||
display: table-cell;
|
||||
padding-right: 4px;
|
||||
min-height: 2em; }
|
||||
min-width: 40%; }
|
||||
.section .activity .contentwithoutlink > a,
|
||||
.section .activity .activityinstance > a {
|
||||
display: inline-block;
|
||||
text-indent: -31px;
|
||||
padding-left: 31px; }
|
||||
display: inline-flex;
|
||||
align-items: center; }
|
||||
.section .activity .contentwithoutlink .dimmed .activityicon,
|
||||
.section .activity .activityinstance .dimmed .activityicon {
|
||||
opacity: .5; }
|
||||
|
|
@ -13731,13 +13775,10 @@ body:not(.editing) .sitetopic ul.section {
|
|||
padding-bottom: initial;
|
||||
vertical-align: text-bottom; }
|
||||
|
||||
.activity img.activityicon {
|
||||
margin-right: 6px;
|
||||
vertical-align: text-bottom; }
|
||||
|
||||
.section .activity .activityinstance,
|
||||
.section .activity .activityinstance div {
|
||||
display: inline-block; }
|
||||
.section .activity .activityinstance {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
.editing .section .activity .contentwithoutlink,
|
||||
.editing .section .activity .activityinstance {
|
||||
|
|
@ -14596,20 +14637,6 @@ span.editinstructions {
|
|||
white-space: nowrap;
|
||||
display: inline-block; }
|
||||
|
||||
.activity-item .activityiconcontainer {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.7rem; }
|
||||
.activity-item .activityiconcontainer .activityicon {
|
||||
margin: 0;
|
||||
height: 24px;
|
||||
width: 24px; }
|
||||
|
||||
.description .course-description-item {
|
||||
background-color: #f8f9fa;
|
||||
padding-left: 1rem;
|
||||
|
|
|
|||
|
|
@ -11552,12 +11552,8 @@ nav.navbar .logo img {
|
|||
float: left;
|
||||
display: block;
|
||||
position: relative; }
|
||||
.page-context-header .page-header-image {
|
||||
margin-right: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
margin-top: 0.7em; }
|
||||
.page-context-header .page-header-image > a {
|
||||
display: inline-block; }
|
||||
.page-context-header .page-header-image > a {
|
||||
display: inline-block; }
|
||||
.page-context-header .page-header-headings,
|
||||
.page-context-header .header-button-group {
|
||||
position: relative;
|
||||
|
|
@ -12344,6 +12340,58 @@ body.dragging .dragging {
|
|||
display: flex;
|
||||
align-items: center; }
|
||||
|
||||
.activityiconcontainer {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
padding: 0.7rem; }
|
||||
.activityiconcontainer .activityicon {
|
||||
margin: 0;
|
||||
height: 24px;
|
||||
width: 24px; }
|
||||
|
||||
.activityiconcontainer.administration {
|
||||
background-color: #5d63f6; }
|
||||
.activityiconcontainer.administration .activityicon {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.assessment {
|
||||
background-color: #eb66a2; }
|
||||
.activityiconcontainer.assessment .activityicon {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.collaboration {
|
||||
background-color: #f7634d; }
|
||||
.activityiconcontainer.collaboration .activityicon {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.communication {
|
||||
background-color: #11a676; }
|
||||
.activityiconcontainer.communication .activityicon {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.content {
|
||||
background-color: #399be2; }
|
||||
.activityiconcontainer.content .activityicon {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
.activityiconcontainer.interface {
|
||||
background-color: #a378ff; }
|
||||
.activityiconcontainer.interface .activityicon {
|
||||
filter: brightness(0) invert(1); }
|
||||
|
||||
:root {
|
||||
--activityadministration: #5d63f6;
|
||||
--activityassessment: #eb66a2;
|
||||
--activitycollaboration: #f7634d;
|
||||
--activitycommunication: #11a676;
|
||||
--activitycontent: #399be2;
|
||||
--activityinterface: #a378ff; }
|
||||
|
||||
/* admin.less */
|
||||
.formtable tbody th {
|
||||
font-weight: normal;
|
||||
|
|
@ -13682,15 +13730,11 @@ body:not(.editing) .sitetopic ul.section {
|
|||
display: flex; }
|
||||
.section .activity .contentwithoutlink,
|
||||
.section .activity .activityinstance {
|
||||
min-width: 40%;
|
||||
display: table-cell;
|
||||
padding-right: 4px;
|
||||
min-height: 2em; }
|
||||
min-width: 40%; }
|
||||
.section .activity .contentwithoutlink > a,
|
||||
.section .activity .activityinstance > a {
|
||||
display: inline-block;
|
||||
text-indent: -31px;
|
||||
padding-left: 31px; }
|
||||
display: inline-flex;
|
||||
align-items: center; }
|
||||
.section .activity .contentwithoutlink .dimmed .activityicon,
|
||||
.section .activity .activityinstance .dimmed .activityicon {
|
||||
opacity: .5; }
|
||||
|
|
@ -13731,13 +13775,10 @@ body:not(.editing) .sitetopic ul.section {
|
|||
padding-bottom: initial;
|
||||
vertical-align: text-bottom; }
|
||||
|
||||
.activity img.activityicon {
|
||||
margin-right: 6px;
|
||||
vertical-align: text-bottom; }
|
||||
|
||||
.section .activity .activityinstance,
|
||||
.section .activity .activityinstance div {
|
||||
display: inline-block; }
|
||||
.section .activity .activityinstance {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
.editing .section .activity .contentwithoutlink,
|
||||
.editing .section .activity .activityinstance {
|
||||
|
|
@ -14596,20 +14637,6 @@ span.editinstructions {
|
|||
white-space: nowrap;
|
||||
display: inline-block; }
|
||||
|
||||
.activity-item .activityiconcontainer {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.7rem; }
|
||||
.activity-item .activityiconcontainer .activityicon {
|
||||
margin: 0;
|
||||
height: 24px;
|
||||
width: 24px; }
|
||||
|
||||
.description .course-description-item {
|
||||
background-color: #f8f9fa;
|
||||
padding-left: 1rem;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue