mirror of
https://github.com/moodle/moodle.git
synced 2025-04-20 16:04:25 +02:00
MDL-80219 core_courseformat: Add course section and activity new styling
- Add border to sections (not in single section page) - Remove border to activity cards and add single line separators - Refactor activity and sections styles to fit this new layout - Remove styles that are not necessary with this new layout
This commit is contained in:
Mikel Martín
parent
328b48ebc5
commit
0efe999276
@ -39,7 +39,7 @@
|
||||
}
|
||||
}}
|
||||
{{#showaddsection}}
|
||||
<div class="mdl-left py-2 changenumsections bulk-hidden">
|
||||
<div class="mdl-left changenumsections bulk-hidden mt-3">
|
||||
{{#increase}}
|
||||
<a href="{{{url}}}" class="increase-sections">
|
||||
{{#pix}}t/switch_plus, moodle, {{#str}} increasesections, moodle {{/str}}{{/pix}}
|
||||
|
||||
@ -62,6 +62,9 @@
|
||||
{{> core_course/activitychooserbuttonactivity}}
|
||||
</div>
|
||||
{{/editing}}
|
||||
|
||||
<hr class="my-2">
|
||||
|
||||
<div class="activity-item focus-control {{#modstealth}}hiddenactivity{{/modstealth}}{{!
|
||||
}}{{#modhiddenfromstudents}}hiddenactivity{{/modhiddenfromstudents}}{{!
|
||||
}}{{#modinline}}activityinline{{/modinline}}" data-activityname="{{activityname}}">
|
||||
|
||||
@ -36,19 +36,19 @@
|
||||
{{/ core_courseformat/local/content/section/bulkselect }}
|
||||
{{/sectionbulk}}
|
||||
{{#headerdisplaymultipage}}
|
||||
<h3 id="sectionid-{{id}}-title" class="sectionname">
|
||||
<h3 id="sectionid-{{id}}-title" class="h4 sectionname">
|
||||
{{{title}}}
|
||||
</h3>
|
||||
{{/headerdisplaymultipage}}
|
||||
{{^headerdisplaymultipage}}
|
||||
{{#sitehome}}
|
||||
<h2 id="sectionid-{{id}}-title" class="sectionname">
|
||||
<h2 id="sectionid-{{id}}-title" class="h3 sectionname">
|
||||
{{{title}}}
|
||||
</h2>
|
||||
{{/sitehome}}
|
||||
{{^sitehome}}
|
||||
{{#displayonesection}}
|
||||
<h3 id="sectionid-{{id}}-title" class="sectionname">
|
||||
<h3 id="sectionid-{{id}}-title" class="h4 sectionname mb-0">
|
||||
{{{title}}}
|
||||
</h3>
|
||||
{{/displayonesection}}
|
||||
@ -61,7 +61,7 @@
|
||||
id="collapssesection{{num}}"
|
||||
aria-expanded="{{^contentcollapsed}}true{{/contentcollapsed}}{{#contentcollapsed}}false{{/contentcollapsed}}"
|
||||
aria-controls="coursecontentcollapse{{num}}"
|
||||
class="btn btn-icon mr-1 icons-collapse-expand justify-content-center
|
||||
class="btn btn-icon mr-3 icons-collapse-expand justify-content-center
|
||||
{{#contentcollapsed}} collapsed {{/contentcollapsed}}"
|
||||
aria-label="{{name}}">
|
||||
<span class="expanded-icon icon-no-margin p-2" title="{{#str}} collapse, core {{/str}}">
|
||||
@ -72,7 +72,7 @@
|
||||
<span class="dir-ltr-hide">{{#pix}} t/collapsedchevron_rtl, core {{/pix}}</span>
|
||||
</span>
|
||||
</a>
|
||||
<h3 class="sectionname course-content-item d-flex align-self-stretch align-items-center mb-0"
|
||||
<h3 class="h4 sectionname course-content-item d-flex align-self-stretch align-items-center mb-0"
|
||||
id="sectionid-{{id}}-title" data-for="section_title" data-id="{{id}}" data-number="{{num}}">
|
||||
{{{title}}}
|
||||
</h3>
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
"sectionreturn": 0
|
||||
}
|
||||
}}
|
||||
<button class="btn btn-link text-decoration-none section-modchooser section-modchooser-link activity-add bulk-hidden d-flex align-items-center p-3 mb-5"
|
||||
<button class="btn btn-link text-decoration-none section-modchooser section-modchooser-link activity-add bulk-hidden d-flex align-items-center p-3 mt-3"
|
||||
data-action="open-chooser"
|
||||
data-sectionid="{{sectionid}}"
|
||||
{{#sectionreturn}}data-sectionreturnid="{{.}}"{{/sectionreturn}}>
|
||||
|
||||
@ -7,11 +7,6 @@
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.section-modchooser {
|
||||
clear: both;
|
||||
margin-top: map-get($spacers, 1);
|
||||
}
|
||||
|
||||
.block_tree .tree_item.branch {
|
||||
margin-left: 8px;
|
||||
}
|
||||
@ -35,22 +30,6 @@
|
||||
margin-left: .2em;
|
||||
}
|
||||
|
||||
.sitetopic ul.section {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body:not(.editing) .sitetopic ul.section {
|
||||
padding-left: 0;
|
||||
.label .mod-indent-outer {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.course-content ul.section {
|
||||
margin: $spacer;
|
||||
}
|
||||
}
|
||||
.section {
|
||||
.side {
|
||||
&.left {
|
||||
@ -70,9 +49,6 @@ body:not(.editing) .sitetopic ul.section {
|
||||
}
|
||||
|
||||
.activity {
|
||||
list-style: none;
|
||||
padding: map-get($spacers, 1) 0;
|
||||
|
||||
.spinner {
|
||||
left: 100%;
|
||||
position: absolute;
|
||||
@ -180,12 +156,6 @@ body:not(.editing) .sitetopic ul.section {
|
||||
.activityinstance {
|
||||
padding-right: 200px;
|
||||
}
|
||||
.editing_move {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
.mod-indent-outer {
|
||||
/**
|
||||
* Add appropriate padding such that nothing overlaps the
|
||||
@ -195,12 +165,6 @@ body:not(.editing) .sitetopic ul.section {
|
||||
}
|
||||
}
|
||||
}
|
||||
.activity .editing_move_activity {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
// Remove old spinners if the reactive state is ready.
|
||||
.course-content .stateready .section .spinner {
|
||||
display: none;
|
||||
@ -586,12 +550,6 @@ body:not(.editing) .sitetopic ul.section {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.path-site li.activity > div:not(.activity-item),
|
||||
.path-course-view li.activity > div:not(.activity-item) {
|
||||
position: relative;
|
||||
padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
|
||||
}
|
||||
|
||||
.path-course-view li.activity span.autocompletion img {
|
||||
vertical-align: text-bottom;
|
||||
margin-left: 0;
|
||||
@ -612,11 +570,6 @@ li.section.hidden span.commands a.editing_show {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.single-section h3.sectionname {
|
||||
text-align: center;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
input.titleeditor {
|
||||
width: 330px;
|
||||
vertical-align: text-bottom;
|
||||
@ -1306,8 +1259,14 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
|
||||
.course-section {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
border-bottom: $border-width solid $border-color;
|
||||
padding: map-get($spacers, 3);
|
||||
margin-top: map-get($spacers, 3);
|
||||
border: $border-width solid $border-color;
|
||||
@include border-radius($activity-item-border-radius);
|
||||
|
||||
&.hidden {
|
||||
background-color: $gray-100;
|
||||
}
|
||||
|
||||
.sectionname > a {
|
||||
color: $gray-900;
|
||||
@ -1316,10 +1275,6 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child:not(.section-summary) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.sectionbadges .badge {
|
||||
margin-left: map-get($spacers, 2);
|
||||
}
|
||||
@ -1363,6 +1318,13 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
}
|
||||
}
|
||||
|
||||
// Override '.btn.btn-icon' styles from buttons.scss to make action menu buttons smaller.
|
||||
.action-menu .btn.btn-icon {
|
||||
height: map-get($iconsizes, 5);
|
||||
width: map-get($iconsizes, 5);
|
||||
@include border-radius();
|
||||
}
|
||||
|
||||
&.section-summary {
|
||||
padding-left: map-get($spacers, 3);
|
||||
padding-right: map-get($spacers, 3);
|
||||
@ -1392,8 +1354,20 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
}
|
||||
}
|
||||
|
||||
/* Re-style ordered list in course content */
|
||||
/* Single section page specific styles */
|
||||
|
||||
.single-section {
|
||||
// Revert main section's styles.
|
||||
> ul > .course-section {
|
||||
padding: 0;
|
||||
border: none;
|
||||
&.hidden {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Re-style ordered list in course content */
|
||||
.course-content .activity-altcontent {
|
||||
ul {
|
||||
list-style: disc;
|
||||
@ -1408,18 +1382,20 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
|
||||
/* Activity cards */
|
||||
|
||||
.activity {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
position: relative;
|
||||
@include border-radius($activity-item-border-radius);
|
||||
|
||||
&:not(.activityinline) {
|
||||
border: $border-width solid $border-color;
|
||||
padding: map-get($spacers, 3);
|
||||
padding: .75rem;
|
||||
}
|
||||
&.activityinline {
|
||||
padding: map-get($spacers, 3) 0;
|
||||
padding: .75rem 0;
|
||||
}
|
||||
|
||||
&.hiddenactivity {
|
||||
background-color: $gray-100;
|
||||
.activityiconcontainer,
|
||||
@ -1435,12 +1411,12 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
grid-template-columns: min-content 1fr min-content min-content min-content;
|
||||
grid-template-rows: 1fr repeat(5, min-content);
|
||||
grid-template-areas:
|
||||
"icon name groupmode completion actions"
|
||||
"icon visibility groupmode completion actions"
|
||||
"icon dates groupmode completion actions"
|
||||
"altcontent altcontent altcontent altcontent altcontent"
|
||||
"afterlink afterlink afterlink afterlink afterlink"
|
||||
"availability availability availability availability availability";
|
||||
"icon name groupmode completion actions"
|
||||
"icon visibility groupmode completion actions"
|
||||
"icon dates groupmode completion actions"
|
||||
"icon altcontent altcontent altcontent altcontent"
|
||||
"icon afterlink afterlink afterlink afterlink"
|
||||
"icon availability availability availability availability";
|
||||
@include media-breakpoint-down(xs) {
|
||||
grid-template-columns: min-content 1fr min-content min-content min-content;
|
||||
grid-template-rows: 1fr repeat(4, min-content);
|
||||
@ -1480,12 +1456,6 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
.actions {
|
||||
position: relative;
|
||||
}
|
||||
// Override '.btn.btn-icon' styles from buttons.scss to make action menu buttons smaller.
|
||||
.action-menu .btn.btn-icon {
|
||||
height: map-get($iconsizes, 5);
|
||||
width: map-get($iconsizes, 5);
|
||||
@include border-radius();
|
||||
}
|
||||
}
|
||||
|
||||
.activity-icon {
|
||||
@ -1635,12 +1605,6 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
.no-overflow {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
&:not(.activityinline) {
|
||||
padding: map-get($spacers, 3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Activity card in editing mode */
|
||||
@ -1677,9 +1641,11 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
|
||||
.activity {
|
||||
div.divider {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
margin-top: -1.25rem;
|
||||
margin-bottom: -0.75rem;
|
||||
margin-top: -1rem;
|
||||
margin-bottom: -1rem;
|
||||
z-index: 5;
|
||||
button {
|
||||
border-radius: 100%;
|
||||
@ -1750,3 +1716,16 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Home page course specific styles */
|
||||
|
||||
.sitetopic {
|
||||
// Hide the first activity top border.
|
||||
.activity:first-of-type hr {
|
||||
display: none;
|
||||
}
|
||||
.section {
|
||||
margin-bottom: map-get($spacers, 4);
|
||||
@include border-radius();
|
||||
}
|
||||
}
|
||||
|
||||
@ -27908,11 +27908,6 @@ table.calendartable caption {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.section-modchooser {
|
||||
clear: both;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.block_tree .tree_item.branch {
|
||||
margin-left: 8px;
|
||||
}
|
||||
@ -27938,22 +27933,6 @@ table.calendartable caption {
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
|
||||
.sitetopic ul.section {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body:not(.editing) .sitetopic ul.section {
|
||||
padding-left: 0;
|
||||
}
|
||||
body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.course-content ul.section {
|
||||
margin: 1rem;
|
||||
}
|
||||
}
|
||||
.section .side {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
@ -27969,8 +27948,6 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
|
||||
width: 16px;
|
||||
}
|
||||
.section .activity {
|
||||
list-style: none;
|
||||
padding: 0.25rem 0;
|
||||
/* The command block for each activity */
|
||||
}
|
||||
.section .activity .spinner {
|
||||
@ -28054,12 +28031,6 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
|
||||
.editing .section .activity .activityinstance {
|
||||
padding-right: 200px;
|
||||
}
|
||||
.editing .section .activity .editing_move {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
.editing .section .activity .mod-indent-outer {
|
||||
/**
|
||||
* Add appropriate padding such that nothing overlaps the
|
||||
@ -28067,12 +28038,6 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
|
||||
*/
|
||||
padding-left: 2rem;
|
||||
}
|
||||
.editing .activity .editing_move_activity {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
.editing .course-content .stateready .section .spinner {
|
||||
display: none;
|
||||
}
|
||||
@ -28403,12 +28368,6 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.path-site li.activity > div:not(.activity-item),
|
||||
.path-course-view li.activity > div:not(.activity-item) {
|
||||
position: relative;
|
||||
padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
|
||||
}
|
||||
|
||||
.path-course-view li.activity span.autocompletion img {
|
||||
vertical-align: text-bottom;
|
||||
margin-left: 0;
|
||||
@ -28425,11 +28384,6 @@ li.section.hidden span.commands a.editing_show {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.single-section h3.sectionname {
|
||||
text-align: center;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
input.titleeditor {
|
||||
width: 330px;
|
||||
vertical-align: text-bottom;
|
||||
@ -29039,8 +28993,13 @@ span.editinstructions .alert-link {
|
||||
/* Course section */
|
||||
.course-section {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.course-section.hidden {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.course-section .sectionname > a {
|
||||
color: #1d2125;
|
||||
@ -29048,9 +29007,6 @@ span.editinstructions .alert-link {
|
||||
.course-section .sectionname > a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.course-section:last-child:not(.section-summary) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.course-section .sectionbadges .badge {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
@ -29081,6 +29037,11 @@ span.editinstructions .alert-link {
|
||||
font-size: inherit;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
.course-section .action-menu .btn.btn-icon {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.course-section.section-summary {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
@ -29102,6 +29063,15 @@ span.editinstructions .alert-link {
|
||||
color: #0f6cbf;
|
||||
}
|
||||
|
||||
/* Single section page specific styles */
|
||||
.single-section > ul > .course-section {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
.single-section > ul > .course-section.hidden {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
/* Re-style ordered list in course content */
|
||||
.course-content .activity-altcontent ul {
|
||||
list-style: disc;
|
||||
@ -29114,16 +29084,20 @@ span.editinstructions .alert-link {
|
||||
}
|
||||
|
||||
/* Activity cards */
|
||||
.activity {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
position: relative;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.activity-item:not(.activityinline) {
|
||||
border: 1px solid #dee2e6;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
.activity-item.activityinline {
|
||||
padding: 1rem 0;
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
.activity-item.hiddenactivity {
|
||||
background-color: #f8f9fa;
|
||||
@ -29137,7 +29111,7 @@ span.editinstructions .alert-link {
|
||||
align-items: center;
|
||||
grid-template-columns: min-content 1fr min-content min-content min-content;
|
||||
grid-template-rows: 1fr repeat(5, min-content);
|
||||
grid-template-areas: "icon name groupmode completion actions" "icon visibility groupmode completion actions" "icon dates groupmode completion actions" "altcontent altcontent altcontent altcontent altcontent" "afterlink afterlink afterlink afterlink afterlink" "availability availability availability availability availability";
|
||||
grid-template-areas: "icon name groupmode completion actions" "icon visibility groupmode completion actions" "icon dates groupmode completion actions" "icon altcontent altcontent altcontent altcontent" "icon afterlink afterlink afterlink afterlink" "icon availability availability availability availability";
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.activity-item .activity-grid {
|
||||
@ -29162,11 +29136,6 @@ span.editinstructions .alert-link {
|
||||
.activity-item .activity-actions .actions {
|
||||
position: relative;
|
||||
}
|
||||
.activity-item .activity-actions .action-menu .btn.btn-icon {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.activity-item .activity-icon {
|
||||
grid-area: icon;
|
||||
}
|
||||
@ -29716,11 +29685,6 @@ span.editinstructions .alert-link {
|
||||
.activity-item .no-overflow {
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.activity-item:not(.activityinline) {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Activity card in editing mode */
|
||||
.editing .activity-item {
|
||||
@ -29758,9 +29722,11 @@ span.editinstructions .alert-link {
|
||||
}
|
||||
|
||||
.activity div.divider {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
margin-top: -1.25rem;
|
||||
margin-bottom: -0.75rem;
|
||||
margin-top: -1rem;
|
||||
margin-bottom: -1rem;
|
||||
z-index: 5;
|
||||
}
|
||||
.activity div.divider button {
|
||||
@ -29822,6 +29788,15 @@ span.editinstructions .alert-link {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
/* Home page course specific styles */
|
||||
.sitetopic .activity:first-of-type hr {
|
||||
display: none;
|
||||
}
|
||||
.sitetopic .section {
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */
|
||||
:target {
|
||||
scroll-margin-top: 70px;
|
||||
|
||||
@ -27908,11 +27908,6 @@ table.calendartable caption {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.section-modchooser {
|
||||
clear: both;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.block_tree .tree_item.branch {
|
||||
margin-left: 8px;
|
||||
}
|
||||
@ -27938,22 +27933,6 @@ table.calendartable caption {
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
|
||||
.sitetopic ul.section {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body:not(.editing) .sitetopic ul.section {
|
||||
padding-left: 0;
|
||||
}
|
||||
body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.course-content ul.section {
|
||||
margin: 1rem;
|
||||
}
|
||||
}
|
||||
.section .side {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
@ -27969,8 +27948,6 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
|
||||
width: 16px;
|
||||
}
|
||||
.section .activity {
|
||||
list-style: none;
|
||||
padding: 0.25rem 0;
|
||||
/* The command block for each activity */
|
||||
}
|
||||
.section .activity .spinner {
|
||||
@ -28054,12 +28031,6 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
|
||||
.editing .section .activity .activityinstance {
|
||||
padding-right: 200px;
|
||||
}
|
||||
.editing .section .activity .editing_move {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
.editing .section .activity .mod-indent-outer {
|
||||
/**
|
||||
* Add appropriate padding such that nothing overlaps the
|
||||
@ -28067,12 +28038,6 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
|
||||
*/
|
||||
padding-left: 2rem;
|
||||
}
|
||||
.editing .activity .editing_move_activity {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
.editing .course-content .stateready .section .spinner {
|
||||
display: none;
|
||||
}
|
||||
@ -28403,12 +28368,6 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.path-site li.activity > div:not(.activity-item),
|
||||
.path-course-view li.activity > div:not(.activity-item) {
|
||||
position: relative;
|
||||
padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
|
||||
}
|
||||
|
||||
.path-course-view li.activity span.autocompletion img {
|
||||
vertical-align: text-bottom;
|
||||
margin-left: 0;
|
||||
@ -28425,11 +28384,6 @@ li.section.hidden span.commands a.editing_show {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.single-section h3.sectionname {
|
||||
text-align: center;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
input.titleeditor {
|
||||
width: 330px;
|
||||
vertical-align: text-bottom;
|
||||
@ -29039,8 +28993,13 @@ span.editinstructions .alert-link {
|
||||
/* Course section */
|
||||
.course-section {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.course-section.hidden {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.course-section .sectionname > a {
|
||||
color: #1d2125;
|
||||
@ -29048,9 +29007,6 @@ span.editinstructions .alert-link {
|
||||
.course-section .sectionname > a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.course-section:last-child:not(.section-summary) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.course-section .sectionbadges .badge {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
@ -29081,6 +29037,11 @@ span.editinstructions .alert-link {
|
||||
font-size: inherit;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
.course-section .action-menu .btn.btn-icon {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.course-section.section-summary {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
@ -29102,6 +29063,15 @@ span.editinstructions .alert-link {
|
||||
color: #0f6cbf;
|
||||
}
|
||||
|
||||
/* Single section page specific styles */
|
||||
.single-section > ul > .course-section {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
.single-section > ul > .course-section.hidden {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
/* Re-style ordered list in course content */
|
||||
.course-content .activity-altcontent ul {
|
||||
list-style: disc;
|
||||
@ -29114,16 +29084,20 @@ span.editinstructions .alert-link {
|
||||
}
|
||||
|
||||
/* Activity cards */
|
||||
.activity {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
position: relative;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.activity-item:not(.activityinline) {
|
||||
border: 1px solid #dee2e6;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
.activity-item.activityinline {
|
||||
padding: 1rem 0;
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
.activity-item.hiddenactivity {
|
||||
background-color: #f8f9fa;
|
||||
@ -29137,7 +29111,7 @@ span.editinstructions .alert-link {
|
||||
align-items: center;
|
||||
grid-template-columns: min-content 1fr min-content min-content min-content;
|
||||
grid-template-rows: 1fr repeat(5, min-content);
|
||||
grid-template-areas: "icon name groupmode completion actions" "icon visibility groupmode completion actions" "icon dates groupmode completion actions" "altcontent altcontent altcontent altcontent altcontent" "afterlink afterlink afterlink afterlink afterlink" "availability availability availability availability availability";
|
||||
grid-template-areas: "icon name groupmode completion actions" "icon visibility groupmode completion actions" "icon dates groupmode completion actions" "icon altcontent altcontent altcontent altcontent" "icon afterlink afterlink afterlink afterlink" "icon availability availability availability availability";
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.activity-item .activity-grid {
|
||||
@ -29162,11 +29136,6 @@ span.editinstructions .alert-link {
|
||||
.activity-item .activity-actions .actions {
|
||||
position: relative;
|
||||
}
|
||||
.activity-item .activity-actions .action-menu .btn.btn-icon {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.activity-item .activity-icon {
|
||||
grid-area: icon;
|
||||
}
|
||||
@ -29716,11 +29685,6 @@ span.editinstructions .alert-link {
|
||||
.activity-item .no-overflow {
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.activity-item:not(.activityinline) {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Activity card in editing mode */
|
||||
.editing .activity-item {
|
||||
@ -29758,9 +29722,11 @@ span.editinstructions .alert-link {
|
||||
}
|
||||
|
||||
.activity div.divider {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
margin-top: -1.25rem;
|
||||
margin-bottom: -0.75rem;
|
||||
margin-top: -1rem;
|
||||
margin-bottom: -1rem;
|
||||
z-index: 5;
|
||||
}
|
||||
.activity div.divider button {
|
||||
@ -29822,6 +29788,15 @@ span.editinstructions .alert-link {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
/* Home page course specific styles */
|
||||
.sitetopic .activity:first-of-type hr {
|
||||
display: none;
|
||||
}
|
||||
.sitetopic .section {
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
/* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */
|
||||
:target {
|
||||
scroll-margin-top: 60px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user