MDL-80621 core_courseformat: Add new activity separator styles
- Created a new divider template to generate activity and section dividers - Refactored templates and styles for the course sections for the new section dividers - Changed the topics format 'hasaddsection' property to 'true' so now adding sections to the bottom of the course will be handled by the format instead of the last section. Also re-styled this 'Add topic' button. - Refactored templates and styles for the course activities for the new activity dividers - Fixed some related behat that failed because of these changes - Moved blocks related SCSS to the blocks file and removed some unused SCSS
This commit is contained in:
Mikel Martín
@@ -203,9 +203,11 @@
|
||||
</div>
|
||||
{{/hasnavigation}}
|
||||
{{#numsections}}
|
||||
{{$ core_courseformat/local/content/addsection}}
|
||||
{{> core_courseformat/local/content/addsection}}
|
||||
{{/ core_courseformat/local/content/addsection}}
|
||||
{{^singlesection}}
|
||||
{{$ core_courseformat/local/content/addsection}}
|
||||
{{> core_courseformat/local/content/addsection}}
|
||||
{{/ core_courseformat/local/content/addsection}}
|
||||
{{/singlesection}}
|
||||
{{/numsections}}
|
||||
{{#bulkedittools}}
|
||||
{{$ core_courseformat/local/content/bulkedittools}}
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
}
|
||||
}}
|
||||
{{#showaddsection}}
|
||||
<div class="mdl-left changenumsections bulk-hidden mt-3">
|
||||
<div id="course-addsection" class="changenumsections bulk-hidden mt-5">
|
||||
{{#increase}}
|
||||
<a href="{{{url}}}" class="increase-sections">
|
||||
{{#pix}}t/switch_plus, moodle, {{#str}} increasesections, moodle {{/str}}{{/pix}}
|
||||
@@ -51,16 +51,18 @@
|
||||
</a>
|
||||
{{/decrease}}
|
||||
{{#addsections}}
|
||||
<a
|
||||
href="{{{url}}}"
|
||||
class="add-sections btn btn-link px-0"
|
||||
|
||||
<a href="{{{url}}}"
|
||||
class="btn add-section d-flex justify-content-center align-items-center p-3"
|
||||
data-add-sections="{{title}}"
|
||||
data-new-sections="{{newsection}}"
|
||||
data-action="addSection"
|
||||
{{#insertafter}} data-id="{{id}}" {{/insertafter}}
|
||||
>
|
||||
{{#pix}}t/switch_plus, moodle{{/pix}}{{title}}
|
||||
{{#pix}} t/add, core {{/pix}}
|
||||
{{title}}
|
||||
</a>
|
||||
|
||||
{{/addsections}}
|
||||
</div>
|
||||
{{/showaddsection}}
|
||||
|
||||
@@ -58,13 +58,10 @@
|
||||
}
|
||||
}}
|
||||
{{#editing}}
|
||||
<div class="divider divider-plus bulk-hidden" data-action="insert-before-{{activityname}}">
|
||||
{{> core_course/activitychooserbuttonactivity}}
|
||||
</div>
|
||||
{{< core_courseformat/local/content/divider}}
|
||||
{{$content}}{{> core_course/activitychooserbuttonactivity}}{{/content}}
|
||||
{{/ core_courseformat/local/content/divider}}
|
||||
{{/editing}}
|
||||
|
||||
<hr class="my-2">
|
||||
|
||||
<div class="activity-item focus-control {{#modstealth}}hiddenactivity{{/modstealth}}{{!
|
||||
}}{{#modhiddenfromstudents}}hiddenactivity{{/modhiddenfromstudents}}{{!
|
||||
}}{{#modinline}}activityinline{{/modinline}}" data-activityname="{{activityname}}" data-region="activity-card">
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
{{!
|
||||
This file is part of Moodle - http://moodle.org/
|
||||
|
||||
Moodle is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
Moodle is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
|
||||
}}
|
||||
{{!
|
||||
@template core_courseformat/local/content/divider
|
||||
|
||||
Displays a dashed divider.
|
||||
|
||||
Example context (json):
|
||||
{
|
||||
"extraclasses": "mt-3",
|
||||
"content": "<button class=\"btn btn-primary\">Add section</button>"
|
||||
}
|
||||
}}
|
||||
|
||||
<div class="divider bulk-hidden d-flex justify-content-center align-items-center {{$extraclasses}}{{extraclasses}}{{/extraclasses}}">
|
||||
<hr>
|
||||
<div class="divider-content px-3">
|
||||
{{$content}}{{content}}{{/content}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -96,13 +96,23 @@
|
||||
data-id="{{id}}"
|
||||
data-number="{{num}}"
|
||||
>
|
||||
<div class="course-section-header d-flex"
|
||||
data-for="section_title"
|
||||
data-id="{{id}}"
|
||||
data-number="{{num}}"
|
||||
>
|
||||
{{$ core_courseformat/local/content/section/content }}
|
||||
{{> core_courseformat/local/content/section/content }}
|
||||
{{/ core_courseformat/local/content/section/content }}
|
||||
<div class="section-item">
|
||||
<div class="course-section-header d-flex"
|
||||
data-for="section_title"
|
||||
data-id="{{id}}"
|
||||
data-number="{{num}}"
|
||||
>
|
||||
{{$ core_courseformat/local/content/section/content }}
|
||||
{{> core_courseformat/local/content/section/content }}
|
||||
{{/ core_courseformat/local/content/section/content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#insertafter}}
|
||||
{{#numsections}}
|
||||
{{$ core_courseformat/local/content/addsection}}
|
||||
{{> core_courseformat/local/content/section/addsectiondivider }}
|
||||
{{/ core_courseformat/local/content/addsection}}
|
||||
{{/numsections}}
|
||||
{{/insertafter}}
|
||||
</li>
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
{{!
|
||||
This file is part of Moodle - http://moodle.org/
|
||||
|
||||
Moodle is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
Moodle is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
|
||||
}}
|
||||
{{!
|
||||
@template core_courseformat/local/content/section/addsectiondivider
|
||||
|
||||
Displays the add section divider inside a section.
|
||||
|
||||
Example context (json):
|
||||
{
|
||||
"showaddsection": true,
|
||||
"id": 42,
|
||||
"insertafter": true,
|
||||
"num": 0,
|
||||
"addsections": {
|
||||
"url": "#",
|
||||
"title": "Add section",
|
||||
"newsection": 3
|
||||
}
|
||||
}
|
||||
}}
|
||||
{{#showaddsection}}
|
||||
<div class="changenumsections bulk-hidden" data-region="section-addsection">
|
||||
{{#addsections}}
|
||||
{{< core_courseformat/local/content/divider}}
|
||||
{{$extraclasses}}always-hidden mt-2{{/extraclasses}}
|
||||
{{$content}}
|
||||
<a href="{{{url}}}"
|
||||
class="btn add-content section-modchooser section-modchooser-link activitychooser-button d-flex justify-content-center align-items-center p-1 icon-no-margin"
|
||||
data-add-sections="{{title}}"
|
||||
data-new-sections="{{newsection}}"
|
||||
data-action="addSection"
|
||||
{{#insertafter}} data-id="{{id}}" {{/insertafter}}
|
||||
>
|
||||
{{#pix}} t/add, core {{/pix}}
|
||||
<span class="sr-only">{{title}}</span>
|
||||
</a>
|
||||
{{/content}}
|
||||
{{/ core_courseformat/local/content/divider}}
|
||||
{{/addsections}}
|
||||
</div>
|
||||
{{/showaddsection}}
|
||||
@@ -178,10 +178,3 @@
|
||||
{{/ core_courseformat/local/content/section/cmlist }}
|
||||
{{/cmlist}}
|
||||
{{{cmcontrols}}}
|
||||
{{#insertafter}}
|
||||
{{#numsections}}
|
||||
{{$ core_courseformat/local/content/addsection}}
|
||||
{{> core_courseformat/local/content/addsection}}
|
||||
{{/ core_courseformat/local/content/addsection}}
|
||||
{{/numsections}}
|
||||
{{/insertafter}}
|
||||
|
||||
@@ -257,7 +257,7 @@ Feature: Course index depending on role
|
||||
Scenario: Adding section should alter the course index
|
||||
Given I log in as "teacher1"
|
||||
And I am on "Course 1" course homepage with editing mode on
|
||||
When I click on "Add section" "link" in the "Topic 4" "section"
|
||||
When I click on "Add section" "link" in the "course-addsection" "region"
|
||||
Then I should see "Topic 5" in the "courseindex-content" "region"
|
||||
|
||||
@javascript
|
||||
|
||||
@@ -84,3 +84,8 @@ Feature: Single section course page
|
||||
And I am on "Course 1" course homepage
|
||||
And I navigate to "Reports > Live logs" in current page administration
|
||||
And I should see "Section viewed"
|
||||
|
||||
Scenario: The add section button is not displayed in the single section page
|
||||
Given I turn editing mode on
|
||||
When I click on "View" "link" in the "Topic 1" "section"
|
||||
Then "Add section" "link" should not exist in the "region-main" "region"
|
||||
|
||||
@@ -37,11 +37,9 @@ use renderer_base;
|
||||
class content extends content_base {
|
||||
|
||||
/**
|
||||
* @var bool Topic format has add section after each topic.
|
||||
*
|
||||
* The responsible for the buttons is core_courseformat\output\local\content\section.
|
||||
* @var bool Topic format has also add section after each topic.
|
||||
*/
|
||||
protected $hasaddsection = false;
|
||||
protected $hasaddsection = true;
|
||||
|
||||
/**
|
||||
* Export this data so it can be used as the context for a mustache template (core/inplace_editable).
|
||||
|
||||
@@ -79,12 +79,13 @@ Feature: Sections can be edited and deleted in custom sections format
|
||||
|
||||
@javascript
|
||||
Scenario: Adding sections at the end of a custom sections format
|
||||
When I click on "Add section" "link" in the "Topic 5" "section"
|
||||
When I click on "Add section" "link" in the "course-addsection" "region"
|
||||
Then I should see "Topic 6" in the "Topic 6" "section"
|
||||
And I should see "Test choice name" in the "Topic 5" "section"
|
||||
|
||||
@javascript
|
||||
Scenario: Adding sections between topics in custom sections format
|
||||
Given I hover over the "Add section" "link" in the "Topic 4" "section"
|
||||
When I click on "Add section" "link" in the "Topic 4" "section"
|
||||
Then I should see "Topic 6" in the "Topic 6" "section"
|
||||
And I should not see "Test choice name" in the "Topic 5" "section"
|
||||
@@ -92,7 +93,7 @@ Feature: Sections can be edited and deleted in custom sections format
|
||||
|
||||
@javascript
|
||||
Scenario: Add a topic and then add an activity in it
|
||||
When I click on "Add section" "link" in the "Topic 5" "section"
|
||||
When I click on "Add section" "link" in the "course-addsection" "region"
|
||||
And I add an assign activity to course "Course 1" section "6" and I fill the form with:
|
||||
| Assignment name | Very new activity |
|
||||
| Description | Test |
|
||||
|
||||
@@ -29,12 +29,16 @@
|
||||
"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 mt-3"
|
||||
data-action="open-chooser"
|
||||
data-sectionid="{{sectionid}}"
|
||||
{{#sectionreturn}}data-sectionreturnid="{{.}}"{{/sectionreturn}}>
|
||||
<span class="pluscontainer icon-no-margin icon-size-3 d-flex p-2 mr-2">
|
||||
{{#pix}} t/add, core {{/pix}}
|
||||
</span>
|
||||
<span class="activity-add-text">{{#str}}addresourceoractivity, core{{/str}}</span>
|
||||
</button>
|
||||
{{< core_courseformat/local/content/divider}}
|
||||
{{$extraclasses}}always-visible my-3{{/extraclasses}}
|
||||
{{$content}}
|
||||
<button class="btn add-content section-modchooser section-modchooser-link d-flex justify-content-center align-items-center py-1 px-2"
|
||||
data-action="open-chooser"
|
||||
data-sectionid="{{sectionid}}"
|
||||
{{#sectionreturn}}data-sectionreturnid="{{.}}"{{/sectionreturn}}
|
||||
>
|
||||
{{#pix}} t/add, core {{/pix}}
|
||||
<span class="activity-add-text pr-1">{{#str}}addresourceoractivity, core{{/str}}</span>
|
||||
</button>
|
||||
{{/content}}
|
||||
{{/ core_courseformat/local/content/divider}}
|
||||
|
||||
@@ -31,12 +31,13 @@
|
||||
"sectionreturn": 5
|
||||
}
|
||||
}}
|
||||
<button class="btn btn-link text-decoration-none section-modchooser section-modchooser-link activity-add d-flex align-items-center activitychooser-button"
|
||||
data-action="open-chooser"
|
||||
data-sectionid="{{num}}"
|
||||
{{#sectionreturn}}data-sectionreturnid="{{.}}"{{/sectionreturn}}
|
||||
data-beforemod="{{id}}"
|
||||
aria-label="{{#str}}insertresourceoractivitybefore, core, { "activityname": {{#quote}} {{activityname}} {{/quote}} } {{/str}}"
|
||||
tabindex="0">
|
||||
<button class="btn add-content section-modchooser section-modchooser-link activitychooser-button d-flex justify-content-center align-items-center p-1 icon-no-margin"
|
||||
data-action="open-chooser"
|
||||
data-sectionid="{{num}}"
|
||||
{{#sectionreturn}}data-sectionreturnid="{{.}}"{{/sectionreturn}}
|
||||
data-beforemod="{{id}}"
|
||||
aria-label="{{#str}}insertresourceoractivitybefore, core, { "activityname": {{#quote}} {{activityname}} {{/quote}} } {{/str}}"
|
||||
tabindex="0"
|
||||
>
|
||||
{{#pix}} t/add, core {{/pix}}
|
||||
</button>
|
||||
|
||||
@@ -24,9 +24,9 @@ Feature: Use the activity chooser to insert activities anywhere in a section
|
||||
|
||||
Scenario: The activity chooser icon is hidden by default and be made visible on hover
|
||||
Given I hover ".navbar-brand" "css_element"
|
||||
And "[data-action='insert-before-Test Forum'] button" "css_element" should not be visible
|
||||
And "Insert an activity or resource before 'Test Forum'" "button" should not be visible
|
||||
When I hover "Insert an activity or resource before 'Test Forum'" "button"
|
||||
Then "[data-action='insert-before-Test Forum'] button" "css_element" should be visible
|
||||
Then "Insert an activity or resource before 'Test Forum'" "button" should be visible
|
||||
|
||||
Scenario: The activity chooser can be used to insert modules before existing modules
|
||||
Given I hover "Insert an activity or resource before 'Test Forum'" "button"
|
||||
|
||||
@@ -386,3 +386,26 @@ $card-gutter : $card-deck-margin * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Block add button
|
||||
//
|
||||
.block-add {
|
||||
@include alert-variant($primary-light-background, $primary-light-border, $primary);
|
||||
@include border-radius();
|
||||
width: 100%;
|
||||
border-width: $border-width;
|
||||
.pluscontainer {
|
||||
border: $border-width solid $primary-light-border;
|
||||
border-radius: 50%;
|
||||
width: map-get($iconsizes, 5);
|
||||
height: map-get($iconsizes, 5);
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: $primary-light-background;
|
||||
.activity-add-text {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+181
-194
@@ -2,34 +2,10 @@
|
||||
|
||||
/* COURSE CONTENT */
|
||||
|
||||
.section_add_menus {
|
||||
text-align: right;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.block_tree .tree_item.branch {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.section_add_menus .horizontal div,
|
||||
.section_add_menus .horizontal form {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.section_add_menus optgroup {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
/*rtl:ignore*/
|
||||
.section_add_menus .urlselect {
|
||||
text-align: left;
|
||||
margin-left: .4em;
|
||||
}
|
||||
/*rtl:ignore*/
|
||||
.section_add_menus .urlselect select {
|
||||
margin-left: .2em;
|
||||
}
|
||||
|
||||
.section {
|
||||
.side {
|
||||
&.left {
|
||||
@@ -325,24 +301,6 @@
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.course-content .section-summary {
|
||||
border: 1px solid $table-border-color;
|
||||
margin-top: 5px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.course-content .section-summary .section-title {
|
||||
margin: 2px 5px 10px 5px;
|
||||
}
|
||||
|
||||
.course-content .section-summary .summarytext {
|
||||
margin: 2px 5px 2px 5px;
|
||||
}
|
||||
|
||||
.course-content .section-summary .summary {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.course-content .single-section .section-navigation {
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
@@ -403,8 +361,6 @@
|
||||
list-style: none;
|
||||
|
||||
li.section {
|
||||
padding-top: $spacer;
|
||||
padding-bottom: $spacer;
|
||||
.content {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -1163,12 +1119,12 @@ span.editinstructions {
|
||||
|
||||
/* Variables definition*/
|
||||
|
||||
$activity-item-background: theme-color-level('primary', -12) !default;
|
||||
$activity-item-border: theme-color-level('primary', -2) !default;
|
||||
$activity-item-color: $body-color !default;
|
||||
$activity-item-hover: theme-color-level('primary', -12) !default;
|
||||
$activity-item-border-radius: 1rem !default;
|
||||
$activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
$activity-border-radius: 1rem !default;
|
||||
$activity-border-width: 2px !default;
|
||||
$activity-hover-border-color: $primary !default;
|
||||
$divider-color: $gray-300 !default;
|
||||
$divider-width: 2px !default;
|
||||
$divider-hover-color: $primary !default;
|
||||
|
||||
/* Functions/Mixins definition */
|
||||
|
||||
@@ -1195,49 +1151,6 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
}
|
||||
}
|
||||
|
||||
/* Activity & Block 'add' buttons */
|
||||
|
||||
.activity-add,
|
||||
.block-add {
|
||||
@include alert-variant($primary-light-background, $primary-light-border, $primary);
|
||||
border-width: $border-width;
|
||||
.pluscontainer {
|
||||
border: $border-width solid $primary-light-border;
|
||||
border-radius: 50%;
|
||||
width: map-get($iconsizes, 5);
|
||||
height: map-get($iconsizes, 5);
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: $activity-add-hover;
|
||||
.activity-add-text {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.block-add {
|
||||
@include border-radius();
|
||||
}
|
||||
|
||||
.activity-add {
|
||||
@include border-radius($activity-item-border-radius);
|
||||
}
|
||||
|
||||
/* Add section */
|
||||
|
||||
.changenumsections {
|
||||
border-top: $border-width solid $primary-light-border;
|
||||
}
|
||||
|
||||
.add-sections {
|
||||
.icon {
|
||||
margin-right: map-get($spacers, 1);
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
/* Section Expand all/Collapse all */
|
||||
|
||||
.section-collapsemenu {
|
||||
@@ -1264,13 +1177,22 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
|
||||
.course-section {
|
||||
list-style: none;
|
||||
padding: map-get($spacers, 3);
|
||||
margin-top: map-get($spacers, 3);
|
||||
border: $border-width solid $border-color;
|
||||
@include border-radius($activity-item-border-radius);
|
||||
// Custom styles for course sections while editing.
|
||||
.editing & {
|
||||
margin-top: map-get($spacers, 2);
|
||||
}
|
||||
|
||||
.section-item {
|
||||
padding: map-get($spacers, 3);
|
||||
border: $border-width solid $border-color;
|
||||
@include border-radius($activity-border-radius);
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
background-color: $gray-100;
|
||||
.section-item {
|
||||
background-color: $gray-100;
|
||||
}
|
||||
}
|
||||
|
||||
.sectionname > a {
|
||||
@@ -1297,7 +1219,7 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
.summarytext {
|
||||
// Add rounded borders to images.
|
||||
img {
|
||||
@include border-radius($activity-item-border-radius);
|
||||
@include border-radius($activity-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1307,7 +1229,7 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
padding: map-get($spacers, 1) map-get($spacers, 3);
|
||||
background-color: $gray-200;
|
||||
@include font-size($small-font-size);
|
||||
@include border-radius($activity-item-border-radius);
|
||||
@include border-radius($activity-border-radius);
|
||||
.editavailability {
|
||||
a {
|
||||
@include border-radius();
|
||||
@@ -1330,16 +1252,6 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
@include border-radius();
|
||||
}
|
||||
|
||||
&.section-summary {
|
||||
padding-left: map-get($spacers, 3);
|
||||
padding-right: map-get($spacers, 3);
|
||||
margin-bottom: map-get($spacers, 2);
|
||||
margin-top: map-get($spacers, 2);
|
||||
@if $enable-rounded {
|
||||
@include border-radius();
|
||||
}
|
||||
}
|
||||
|
||||
.section-summary-activities {
|
||||
.icon {
|
||||
width: inherit;
|
||||
@@ -1359,16 +1271,33 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
}
|
||||
}
|
||||
|
||||
// Course 'add section' button.
|
||||
.btn.add-section {
|
||||
@include border-radius($activity-border-radius);
|
||||
border: $divider-width dashed $border-color;
|
||||
color: $primary;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: bold;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $primary-light-background;
|
||||
border: $divider-width solid $primary;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
/* Single section page specific styles */
|
||||
|
||||
.single-section {
|
||||
// Revert main section's styles.
|
||||
> ul > .course-section {
|
||||
padding: 0;
|
||||
border: none;
|
||||
&.hidden {
|
||||
&.hidden .section-item {
|
||||
background-color: inherit;
|
||||
}
|
||||
.section-item {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1390,14 +1319,22 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
.activity {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
padding-top: map-get($spacers, 1);
|
||||
margin-top: map-get($spacers, 1);
|
||||
border-top: $border-width solid $border-color;
|
||||
// Custom styles for activity while editing.
|
||||
.editing & {
|
||||
// Remove activity top border and spacing, while editing a separator is displayed.
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
position: relative;
|
||||
@include border-radius($activity-item-border-radius);
|
||||
&:not(.activityinline) {
|
||||
padding: .75rem;
|
||||
}
|
||||
padding: .75rem;
|
||||
background-color: $white;
|
||||
&.activityinline {
|
||||
padding: .75rem 0;
|
||||
}
|
||||
@@ -1408,6 +1345,24 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
}
|
||||
// Custom styles for activity cards while editing.
|
||||
.editing & {
|
||||
cursor: move;
|
||||
border: $activity-border-width solid transparent;
|
||||
@include border-radius($activity-border-radius);
|
||||
.a {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:hover,
|
||||
&.selected {
|
||||
border: $activity-border-width solid $activity-hover-border-color;
|
||||
box-shadow: $box-shadow-sm;
|
||||
.activityiconcontainer,
|
||||
.badge {
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Activity card grid layout.
|
||||
.activity-grid {
|
||||
@@ -1483,12 +1438,12 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
// Prevent bootstrap strech-link from covering the inplace editable button using z-index.
|
||||
.activityname {
|
||||
.afterlink {
|
||||
margin-left: 0.5rem;
|
||||
margin-left: map-get($spacers, 2);
|
||||
}
|
||||
.inplaceeditable .quickeditlink {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-left: 0.5rem;
|
||||
margin-left: map-get($spacers, 2);
|
||||
}
|
||||
}
|
||||
.activitybadge {
|
||||
@@ -1592,7 +1547,7 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
}
|
||||
// Add rounded borders to images.
|
||||
img {
|
||||
@include border-radius($activity-item-border-radius);
|
||||
@include border-radius($activity-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1612,97 +1567,129 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
}
|
||||
}
|
||||
|
||||
/* Activity card in editing mode */
|
||||
|
||||
.editing .activity-item {
|
||||
cursor: move;
|
||||
|
||||
.a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.selected {
|
||||
@include alert-variant($activity-item-hover, $activity-item-border, $activity-item-color);
|
||||
|
||||
.activityiconcontainer,
|
||||
.badge {
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section .draggable .activity-item .dragicon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Activity divider */
|
||||
/* Dividers */
|
||||
|
||||
.activity:focus-within + .activity div.divider button,
|
||||
.course-section-header:focus-within + .content .section .activity:first-child div.divider button,
|
||||
.content .section .activity:focus-within div.divider button {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.activity {
|
||||
div.divider {
|
||||
position: absolute;
|
||||
.divider {
|
||||
position: relative;
|
||||
hr {
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
margin-top: -1rem;
|
||||
margin-bottom: -1rem;
|
||||
z-index: 5;
|
||||
button {
|
||||
border-radius: 100%;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
position: relative;
|
||||
left: calc(50%);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: visibility 0.1s;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
i.icon {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
position: absolute;
|
||||
left: calc(0.25rem - 1px);
|
||||
top: calc(0.25rem - 0.5px);
|
||||
}
|
||||
margin: map-get($spacers, 2) map-get($spacers, 1);
|
||||
border-top: $divider-width dashed $divider-color;
|
||||
}
|
||||
.divider-content {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: visibility 0.1s;
|
||||
position: absolute;
|
||||
background: linear-gradient(transparent 40%, $white 40%, $white 60%, transparent 60%);
|
||||
.section.hidden & {
|
||||
background: linear-gradient(transparent 40%, $gray-100 40%, $gray-100 60%, transparent 60%);
|
||||
}
|
||||
}
|
||||
&:not(.dragging) div.divider {
|
||||
&:hover button,
|
||||
&:focus button,
|
||||
&:focus-within button {
|
||||
&.always-visible {
|
||||
.divider-content {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
&.always-hidden {
|
||||
hr {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
.divider-content {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
hr {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
// Style the hr divider when the "Add content" button is hovered.
|
||||
&:has(.btn.add-content:hover) {
|
||||
hr {
|
||||
border-color: $divider-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// These styles will make the activity and section dividers buttons visible (but still without opacity) so
|
||||
// buttons can be keyboard focusable.
|
||||
.activity:focus-within + .activity .divider .divider-content,
|
||||
.course-section-header:focus-within + .content .section .activity:first-child .divider .divider-content,
|
||||
.content .section .activity:focus-within .divider .divider-content,
|
||||
.course-content:focus-within .changenumsections .divider .divider-content {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
// Hide last section "Add section". It will rely on the course format general "Add section" button.
|
||||
.course-content ul.topics > li:last-child .changenumsections {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Custom buttons for dividers.
|
||||
.btn.add-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@include border-radius($rounded-pill);
|
||||
font-size: $font-size-sm;
|
||||
font-weight: bold;
|
||||
color: theme-color-level("primary", $alert-color-level);
|
||||
background-color: theme-color-level("primary", $alert-bg-level);
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: color-yiq($primary);
|
||||
background-color: $primary;
|
||||
}
|
||||
.icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Bulk editing */
|
||||
|
||||
.bulkenabled .bulk-hidden {
|
||||
display: none !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
|
||||
.activity-item .bulkselect {
|
||||
position: absolute;
|
||||
left: -2rem;
|
||||
}
|
||||
|
||||
.course-section-header .bulkselect {
|
||||
left: -2rem;
|
||||
position: relative;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.bulkenabled .course-content {
|
||||
.bulkenabled {
|
||||
.bulk-hidden {
|
||||
display: none !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
.section:not(:first-child) {
|
||||
margin-top: map-get($spacers, 4);
|
||||
}
|
||||
.activity {
|
||||
margin-top: map-get($spacers, 2);
|
||||
margin-left: 2rem;
|
||||
padding-top: map-get($spacers, 2);
|
||||
border-top: $divider-width dashed $divider-color;
|
||||
&:first-child {
|
||||
margin-top: map-get($spacers, 4);
|
||||
}
|
||||
}
|
||||
.activity-item {
|
||||
.bulkselect {
|
||||
position: absolute;
|
||||
left: -2rem;
|
||||
}
|
||||
}
|
||||
.course-section-header .bulkselect {
|
||||
left: -2.75rem;
|
||||
position: relative;
|
||||
width: 0;
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
.course-content {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1726,7 +1713,7 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
.activity:first-of-type hr {
|
||||
display: none;
|
||||
}
|
||||
.section {
|
||||
.section-item {
|
||||
margin-bottom: map-get($spacers, 4);
|
||||
@include border-radius();
|
||||
}
|
||||
|
||||
+154
-178
@@ -27207,6 +27207,34 @@ aside[id^=block-region-side-] .block_recentlyaccesseditems .dashboard-card-deck
|
||||
}
|
||||
}
|
||||
|
||||
.block-add {
|
||||
color: #0f6cbf;
|
||||
background-color: #f5f9fc;
|
||||
border-color: #3584c9;
|
||||
border-radius: 0.5rem;
|
||||
width: 100%;
|
||||
border-width: 1px;
|
||||
}
|
||||
.block-add hr {
|
||||
border-top-color: #3077b5;
|
||||
}
|
||||
.block-add .alert-link {
|
||||
color: #0b5190;
|
||||
}
|
||||
.block-add .pluscontainer {
|
||||
border: 1px solid #3584c9;
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.block-add:hover {
|
||||
cursor: pointer;
|
||||
background-color: #f5f9fc;
|
||||
}
|
||||
.block-add:hover .activity-add-text {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* calendar.less */
|
||||
.calendar_event_category {
|
||||
background-color: #e0cbe0;
|
||||
@@ -27896,36 +27924,10 @@ table.calendartable caption {
|
||||
|
||||
/* course.less */
|
||||
/* COURSE CONTENT */
|
||||
.section_add_menus {
|
||||
text-align: right;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.block_tree .tree_item.branch {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.section_add_menus .horizontal div,
|
||||
.section_add_menus .horizontal form {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.section_add_menus optgroup {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*rtl:ignore*/
|
||||
.section_add_menus .urlselect {
|
||||
text-align: left;
|
||||
margin-left: 0.4em;
|
||||
}
|
||||
|
||||
/*rtl:ignore*/
|
||||
.section_add_menus .urlselect select {
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
|
||||
.section .side {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
@@ -28158,24 +28160,6 @@ table.calendartable caption {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.course-content .section-summary {
|
||||
border: 1px solid #dee2e6;
|
||||
margin-top: 5px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.course-content .section-summary .section-title {
|
||||
margin: 2px 5px 10px 5px;
|
||||
}
|
||||
|
||||
.course-content .section-summary .summarytext {
|
||||
margin: 2px 5px 2px 5px;
|
||||
}
|
||||
|
||||
.course-content .section-summary .summary {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.course-content .single-section .section-navigation {
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
@@ -28232,11 +28216,6 @@ table.calendartable caption {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.course-content ul.topics li.section,
|
||||
.course-content ul.weeks li.section {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.course-content ul.topics li.section .content,
|
||||
.course-content ul.weeks li.section .content {
|
||||
margin: 0;
|
||||
@@ -28922,58 +28901,6 @@ span.editinstructions .alert-link {
|
||||
|
||||
/* Variables definition*/
|
||||
/* Functions/Mixins definition */
|
||||
/* Activity & Block 'add' buttons */
|
||||
.activity-add,
|
||||
.block-add {
|
||||
color: #0f6cbf;
|
||||
background-color: #f5f9fc;
|
||||
border-color: #3584c9;
|
||||
border-width: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
.activity-add hr,
|
||||
.block-add hr {
|
||||
border-top-color: #3077b5;
|
||||
}
|
||||
.activity-add .alert-link,
|
||||
.block-add .alert-link {
|
||||
color: #0b5190;
|
||||
}
|
||||
.activity-add .pluscontainer,
|
||||
.block-add .pluscontainer {
|
||||
border: 1px solid #3584c9;
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.activity-add:hover,
|
||||
.block-add:hover {
|
||||
cursor: pointer;
|
||||
background-color: #cfe2f2;
|
||||
}
|
||||
.activity-add:hover .activity-add-text,
|
||||
.block-add:hover .activity-add-text {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.block-add {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.activity-add {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
/* Add section */
|
||||
.changenumsections {
|
||||
border-top: 1px solid #3584c9;
|
||||
}
|
||||
|
||||
.add-sections .icon {
|
||||
margin-right: 0.25rem;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* Section Expand all/Collapse all */
|
||||
.section-collapsemenu .collapseall {
|
||||
display: block;
|
||||
@@ -28991,12 +28918,17 @@ span.editinstructions .alert-link {
|
||||
/* Course section */
|
||||
.course-section {
|
||||
list-style: none;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.editing .course-section {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.course-section .section-item {
|
||||
padding: 1rem;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.course-section.hidden {
|
||||
.course-section.hidden .section-item {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.course-section .sectionname > a {
|
||||
@@ -29040,13 +28972,6 @@ span.editinstructions .alert-link {
|
||||
width: 32px;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.course-section.section-summary {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.course-section .section-summary-activities .icon {
|
||||
width: inherit;
|
||||
color: #0f6cbf;
|
||||
@@ -29061,14 +28986,27 @@ span.editinstructions .alert-link {
|
||||
color: #0f6cbf;
|
||||
}
|
||||
|
||||
.btn.add-section {
|
||||
border-radius: 1rem;
|
||||
border: 2px dashed #dee2e6;
|
||||
color: #0f6cbf;
|
||||
font-size: 0.8203125rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.btn.add-section:hover, .btn.add-section:focus {
|
||||
background-color: #f5f9fc;
|
||||
border: 2px solid #0f6cbf;
|
||||
color: #0f6cbf;
|
||||
}
|
||||
|
||||
/* Single section page specific styles */
|
||||
.single-section > ul > .course-section {
|
||||
.single-section > ul > .course-section.hidden .section-item {
|
||||
background-color: inherit;
|
||||
}
|
||||
.single-section > ul > .course-section .section-item {
|
||||
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 {
|
||||
@@ -29085,14 +29023,20 @@ span.editinstructions .alert-link {
|
||||
.activity {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
padding-top: 0.25rem;
|
||||
margin-top: 0.25rem;
|
||||
border-top: 1px solid #dee2e6;
|
||||
}
|
||||
.editing .activity {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
position: relative;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.activity-item:not(.activityinline) {
|
||||
padding: 0.75rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
.activity-item.activityinline {
|
||||
padding: 0.75rem 0;
|
||||
@@ -29104,6 +29048,23 @@ span.editinstructions .alert-link {
|
||||
.activity-item.hiddenactivity .badge {
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
.editing .activity-item {
|
||||
cursor: move;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.editing .activity-item .a {
|
||||
cursor: pointer;
|
||||
}
|
||||
.editing .activity-item:hover, .editing .activity-item.selected {
|
||||
border: 2px solid #0f6cbf;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
.editing .activity-item:hover .activityiconcontainer,
|
||||
.editing .activity-item:hover .badge, .editing .activity-item.selected .activityiconcontainer,
|
||||
.editing .activity-item.selected .badge {
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
.activity-item .activity-grid {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
@@ -29684,95 +29645,110 @@ span.editinstructions .alert-link {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Activity card in editing mode */
|
||||
.editing .activity-item {
|
||||
cursor: move;
|
||||
}
|
||||
.editing .activity-item .a {
|
||||
cursor: pointer;
|
||||
}
|
||||
.editing .activity-item:hover, .editing .activity-item.selected {
|
||||
color: #1d2125;
|
||||
background-color: #f5f9fc;
|
||||
border-color: #3584c9;
|
||||
}
|
||||
.editing .activity-item:hover hr, .editing .activity-item.selected hr {
|
||||
border-top-color: #3077b5;
|
||||
}
|
||||
.editing .activity-item:hover .alert-link, .editing .activity-item.selected .alert-link {
|
||||
color: #070808;
|
||||
}
|
||||
.editing .activity-item:hover .activityiconcontainer,
|
||||
.editing .activity-item:hover .badge, .editing .activity-item.selected .activityiconcontainer,
|
||||
.editing .activity-item.selected .badge {
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.section .draggable .activity-item .dragicon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Activity divider */
|
||||
.activity:focus-within + .activity div.divider button,
|
||||
.course-section-header:focus-within + .content .section .activity:first-child div.divider button,
|
||||
.content .section .activity:focus-within div.divider button {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.activity div.divider {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
margin-top: -1rem;
|
||||
margin-bottom: -1rem;
|
||||
z-index: 5;
|
||||
}
|
||||
.activity div.divider button {
|
||||
border-radius: 100%;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
/* Dividers */
|
||||
.divider {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
}
|
||||
.divider hr {
|
||||
width: 100%;
|
||||
margin: 0.5rem 0.25rem;
|
||||
border-top: 2px dashed #dee2e6;
|
||||
}
|
||||
.divider .divider-content {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: visibility 0.1s;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.activity div.divider button i.icon {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
position: absolute;
|
||||
left: calc(0.25rem - 1px);
|
||||
top: calc(0.25rem - 0.5px);
|
||||
background: linear-gradient(transparent 40%, #fff 40%, #fff 60%, transparent 60%);
|
||||
}
|
||||
.activity:not(.dragging) div.divider:hover button, .activity:not(.dragging) div.divider:focus button, .activity:not(.dragging) div.divider:focus-within button {
|
||||
.section.hidden .divider .divider-content {
|
||||
background: linear-gradient(transparent 40%, #f8f9fa 40%, #f8f9fa 60%, transparent 60%);
|
||||
}
|
||||
.divider.always-visible .divider-content {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.divider.always-hidden hr {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.divider:hover .divider-content, .divider:focus .divider-content, .divider:focus-within .divider-content {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.divider:hover hr, .divider:focus hr, .divider:focus-within hr {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.divider:has(.btn.add-content:hover) hr {
|
||||
border-color: #0f6cbf;
|
||||
}
|
||||
|
||||
.activity:focus-within + .activity .divider .divider-content,
|
||||
.course-section-header:focus-within + .content .section .activity:first-child .divider .divider-content,
|
||||
.content .section .activity:focus-within .divider .divider-content,
|
||||
.course-content:focus-within .changenumsections .divider .divider-content {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.course-content ul.topics > li:last-child .changenumsections {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn.add-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 50rem;
|
||||
font-size: 0.8203125rem;
|
||||
font-weight: bold;
|
||||
color: #083863;
|
||||
background-color: #cfe2f2;
|
||||
}
|
||||
.btn.add-content:hover, .btn.add-content:focus {
|
||||
color: #fff;
|
||||
background-color: #0f6cbf;
|
||||
}
|
||||
.btn.add-content .icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Bulk editing */
|
||||
.bulkenabled .bulk-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.activity-item .bulkselect {
|
||||
.bulkenabled .section:not(:first-child) {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.bulkenabled .activity {
|
||||
margin-top: 0.5rem;
|
||||
margin-left: 2rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 2px dashed #dee2e6;
|
||||
}
|
||||
.bulkenabled .activity:first-child {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.bulkenabled .activity-item .bulkselect {
|
||||
position: absolute;
|
||||
left: -2rem;
|
||||
}
|
||||
|
||||
.course-section-header .bulkselect {
|
||||
left: -2rem;
|
||||
.bulkenabled .course-section-header .bulkselect {
|
||||
left: -2.75rem;
|
||||
position: relative;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.bulkenabled .course-content {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Activity completion */
|
||||
.defaultactivitycompletion-item a {
|
||||
color: #000;
|
||||
@@ -29787,7 +29763,7 @@ span.editinstructions .alert-link {
|
||||
.sitetopic .activity:first-of-type hr {
|
||||
display: none;
|
||||
}
|
||||
.sitetopic .section {
|
||||
.sitetopic .section-item {
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
+154
-178
@@ -27207,6 +27207,34 @@ aside[id^=block-region-side-] .block_recentlyaccesseditems .dashboard-card-deck
|
||||
}
|
||||
}
|
||||
|
||||
.block-add {
|
||||
color: #0f6cbf;
|
||||
background-color: #f5f9fc;
|
||||
border-color: #3584c9;
|
||||
border-radius: 0.25rem;
|
||||
width: 100%;
|
||||
border-width: 1px;
|
||||
}
|
||||
.block-add hr {
|
||||
border-top-color: #3077b5;
|
||||
}
|
||||
.block-add .alert-link {
|
||||
color: #0b5190;
|
||||
}
|
||||
.block-add .pluscontainer {
|
||||
border: 1px solid #3584c9;
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.block-add:hover {
|
||||
cursor: pointer;
|
||||
background-color: #f5f9fc;
|
||||
}
|
||||
.block-add:hover .activity-add-text {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* calendar.less */
|
||||
.calendar_event_category {
|
||||
background-color: #e0cbe0;
|
||||
@@ -27896,36 +27924,10 @@ table.calendartable caption {
|
||||
|
||||
/* course.less */
|
||||
/* COURSE CONTENT */
|
||||
.section_add_menus {
|
||||
text-align: right;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.block_tree .tree_item.branch {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.section_add_menus .horizontal div,
|
||||
.section_add_menus .horizontal form {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.section_add_menus optgroup {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*rtl:ignore*/
|
||||
.section_add_menus .urlselect {
|
||||
text-align: left;
|
||||
margin-left: 0.4em;
|
||||
}
|
||||
|
||||
/*rtl:ignore*/
|
||||
.section_add_menus .urlselect select {
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
|
||||
.section .side {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
@@ -28158,24 +28160,6 @@ table.calendartable caption {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.course-content .section-summary {
|
||||
border: 1px solid #dee2e6;
|
||||
margin-top: 5px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.course-content .section-summary .section-title {
|
||||
margin: 2px 5px 10px 5px;
|
||||
}
|
||||
|
||||
.course-content .section-summary .summarytext {
|
||||
margin: 2px 5px 2px 5px;
|
||||
}
|
||||
|
||||
.course-content .section-summary .summary {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.course-content .single-section .section-navigation {
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
@@ -28232,11 +28216,6 @@ table.calendartable caption {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.course-content ul.topics li.section,
|
||||
.course-content ul.weeks li.section {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.course-content ul.topics li.section .content,
|
||||
.course-content ul.weeks li.section .content {
|
||||
margin: 0;
|
||||
@@ -28922,58 +28901,6 @@ span.editinstructions .alert-link {
|
||||
|
||||
/* Variables definition*/
|
||||
/* Functions/Mixins definition */
|
||||
/* Activity & Block 'add' buttons */
|
||||
.activity-add,
|
||||
.block-add {
|
||||
color: #0f6cbf;
|
||||
background-color: #f5f9fc;
|
||||
border-color: #3584c9;
|
||||
border-width: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
.activity-add hr,
|
||||
.block-add hr {
|
||||
border-top-color: #3077b5;
|
||||
}
|
||||
.activity-add .alert-link,
|
||||
.block-add .alert-link {
|
||||
color: #0b5190;
|
||||
}
|
||||
.activity-add .pluscontainer,
|
||||
.block-add .pluscontainer {
|
||||
border: 1px solid #3584c9;
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.activity-add:hover,
|
||||
.block-add:hover {
|
||||
cursor: pointer;
|
||||
background-color: #cfe2f2;
|
||||
}
|
||||
.activity-add:hover .activity-add-text,
|
||||
.block-add:hover .activity-add-text {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.block-add {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.activity-add {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
/* Add section */
|
||||
.changenumsections {
|
||||
border-top: 1px solid #3584c9;
|
||||
}
|
||||
|
||||
.add-sections .icon {
|
||||
margin-right: 0.25rem;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* Section Expand all/Collapse all */
|
||||
.section-collapsemenu .collapseall {
|
||||
display: block;
|
||||
@@ -28991,12 +28918,17 @@ span.editinstructions .alert-link {
|
||||
/* Course section */
|
||||
.course-section {
|
||||
list-style: none;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.editing .course-section {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.course-section .section-item {
|
||||
padding: 1rem;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.course-section.hidden {
|
||||
.course-section.hidden .section-item {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.course-section .sectionname > a {
|
||||
@@ -29040,13 +28972,6 @@ span.editinstructions .alert-link {
|
||||
width: 32px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.course-section.section-summary {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.course-section .section-summary-activities .icon {
|
||||
width: inherit;
|
||||
color: #0f6cbf;
|
||||
@@ -29061,14 +28986,27 @@ span.editinstructions .alert-link {
|
||||
color: #0f6cbf;
|
||||
}
|
||||
|
||||
.btn.add-section {
|
||||
border-radius: 1rem;
|
||||
border: 2px dashed #dee2e6;
|
||||
color: #0f6cbf;
|
||||
font-size: 0.8203125rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.btn.add-section:hover, .btn.add-section:focus {
|
||||
background-color: #f5f9fc;
|
||||
border: 2px solid #0f6cbf;
|
||||
color: #0f6cbf;
|
||||
}
|
||||
|
||||
/* Single section page specific styles */
|
||||
.single-section > ul > .course-section {
|
||||
.single-section > ul > .course-section.hidden .section-item {
|
||||
background-color: inherit;
|
||||
}
|
||||
.single-section > ul > .course-section .section-item {
|
||||
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 {
|
||||
@@ -29085,14 +29023,20 @@ span.editinstructions .alert-link {
|
||||
.activity {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
padding-top: 0.25rem;
|
||||
margin-top: 0.25rem;
|
||||
border-top: 1px solid #dee2e6;
|
||||
}
|
||||
.editing .activity {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
position: relative;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.activity-item:not(.activityinline) {
|
||||
padding: 0.75rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
.activity-item.activityinline {
|
||||
padding: 0.75rem 0;
|
||||
@@ -29104,6 +29048,23 @@ span.editinstructions .alert-link {
|
||||
.activity-item.hiddenactivity .badge {
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
.editing .activity-item {
|
||||
cursor: move;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.editing .activity-item .a {
|
||||
cursor: pointer;
|
||||
}
|
||||
.editing .activity-item:hover, .editing .activity-item.selected {
|
||||
border: 2px solid #0f6cbf;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
.editing .activity-item:hover .activityiconcontainer,
|
||||
.editing .activity-item:hover .badge, .editing .activity-item.selected .activityiconcontainer,
|
||||
.editing .activity-item.selected .badge {
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
.activity-item .activity-grid {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
@@ -29684,95 +29645,110 @@ span.editinstructions .alert-link {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Activity card in editing mode */
|
||||
.editing .activity-item {
|
||||
cursor: move;
|
||||
}
|
||||
.editing .activity-item .a {
|
||||
cursor: pointer;
|
||||
}
|
||||
.editing .activity-item:hover, .editing .activity-item.selected {
|
||||
color: #1d2125;
|
||||
background-color: #f5f9fc;
|
||||
border-color: #3584c9;
|
||||
}
|
||||
.editing .activity-item:hover hr, .editing .activity-item.selected hr {
|
||||
border-top-color: #3077b5;
|
||||
}
|
||||
.editing .activity-item:hover .alert-link, .editing .activity-item.selected .alert-link {
|
||||
color: #070808;
|
||||
}
|
||||
.editing .activity-item:hover .activityiconcontainer,
|
||||
.editing .activity-item:hover .badge, .editing .activity-item.selected .activityiconcontainer,
|
||||
.editing .activity-item.selected .badge {
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.section .draggable .activity-item .dragicon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Activity divider */
|
||||
.activity:focus-within + .activity div.divider button,
|
||||
.course-section-header:focus-within + .content .section .activity:first-child div.divider button,
|
||||
.content .section .activity:focus-within div.divider button {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.activity div.divider {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
margin-top: -1rem;
|
||||
margin-bottom: -1rem;
|
||||
z-index: 5;
|
||||
}
|
||||
.activity div.divider button {
|
||||
border-radius: 100%;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
/* Dividers */
|
||||
.divider {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
}
|
||||
.divider hr {
|
||||
width: 100%;
|
||||
margin: 0.5rem 0.25rem;
|
||||
border-top: 2px dashed #dee2e6;
|
||||
}
|
||||
.divider .divider-content {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: visibility 0.1s;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.activity div.divider button i.icon {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
position: absolute;
|
||||
left: calc(0.25rem - 1px);
|
||||
top: calc(0.25rem - 0.5px);
|
||||
background: linear-gradient(transparent 40%, #fff 40%, #fff 60%, transparent 60%);
|
||||
}
|
||||
.activity:not(.dragging) div.divider:hover button, .activity:not(.dragging) div.divider:focus button, .activity:not(.dragging) div.divider:focus-within button {
|
||||
.section.hidden .divider .divider-content {
|
||||
background: linear-gradient(transparent 40%, #f8f9fa 40%, #f8f9fa 60%, transparent 60%);
|
||||
}
|
||||
.divider.always-visible .divider-content {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.divider.always-hidden hr {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.divider:hover .divider-content, .divider:focus .divider-content, .divider:focus-within .divider-content {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.divider:hover hr, .divider:focus hr, .divider:focus-within hr {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.divider:has(.btn.add-content:hover) hr {
|
||||
border-color: #0f6cbf;
|
||||
}
|
||||
|
||||
.activity:focus-within + .activity .divider .divider-content,
|
||||
.course-section-header:focus-within + .content .section .activity:first-child .divider .divider-content,
|
||||
.content .section .activity:focus-within .divider .divider-content,
|
||||
.course-content:focus-within .changenumsections .divider .divider-content {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.course-content ul.topics > li:last-child .changenumsections {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn.add-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 50rem;
|
||||
font-size: 0.8203125rem;
|
||||
font-weight: bold;
|
||||
color: #083863;
|
||||
background-color: #cfe2f2;
|
||||
}
|
||||
.btn.add-content:hover, .btn.add-content:focus {
|
||||
color: #fff;
|
||||
background-color: #0f6cbf;
|
||||
}
|
||||
.btn.add-content .icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Bulk editing */
|
||||
.bulkenabled .bulk-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.activity-item .bulkselect {
|
||||
.bulkenabled .section:not(:first-child) {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.bulkenabled .activity {
|
||||
margin-top: 0.5rem;
|
||||
margin-left: 2rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 2px dashed #dee2e6;
|
||||
}
|
||||
.bulkenabled .activity:first-child {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.bulkenabled .activity-item .bulkselect {
|
||||
position: absolute;
|
||||
left: -2rem;
|
||||
}
|
||||
|
||||
.course-section-header .bulkselect {
|
||||
left: -2rem;
|
||||
.bulkenabled .course-section-header .bulkselect {
|
||||
left: -2.75rem;
|
||||
position: relative;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.bulkenabled .course-content {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Activity completion */
|
||||
.defaultactivitycompletion-item a {
|
||||
color: #000;
|
||||
@@ -29787,7 +29763,7 @@ span.editinstructions .alert-link {
|
||||
.sitetopic .activity:first-of-type hr {
|
||||
display: none;
|
||||
}
|
||||
.sitetopic .section {
|
||||
.sitetopic .section-item {
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user