Commit 4fd6b770 authored by bas's avatar bas
Browse files

MDL-63058 block_myoverview: allowing reuse of css classes

parent 3cfff885
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
......@@ -396,7 +396,6 @@ function(
} else {
init(root, content);
}
};
return {
......
......@@ -47,6 +47,7 @@ $string['aria:removefromfavourites'] = 'Remove star for';
$string['aria:summary'] = 'Switch to summary view';
$string['aria:sortingdropdown'] = 'Sorting dropdown';
$string['card'] = 'Card';
$string['cards'] = 'Cards';
$string['complete'] = 'Complete';
$string['favourite'] = 'Starred course';
$string['favourites'] = 'Starred';
......
......@@ -35,7 +35,7 @@
{{#str}} aria:courseactions, block_myoverview {{/str}} {{{fullname}}}
</span>
</button>
<div class="dropdown-menu">
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item {{#isfavourite}}hidden{{/isfavourite}}" href="#"
data-action="add-favourite"
data-course-id="{{id}}"
......
......@@ -35,7 +35,7 @@
data-nocoursesimg="{{nocoursesimg}}">
<div data-region="course-view-content">
<div data-region="courses-loading-placeholder">
<div class="row card-deck">
<div class="card-deck dashboard-card-deck">
{{> block_myoverview/placeholder-course }}
{{> block_myoverview/placeholder-course }}
{{> block_myoverview/placeholder-course }}
......
......@@ -25,7 +25,7 @@
<div id="block-myoverview-{{uniqid}}" class="block-myoverview" data-region="myoverview" role="navigation">
<div data-region="filter" class="d-flex m-b-1" aria-label="{{#str}} aria:controls, block_myoverview {{/str}}">
<div data-region="filter" class="d-flex align-items-center flex-wrap" aria-label="{{#str}} aria:controls, block_myoverview {{/str}}">
{{> block_myoverview/nav-grouping-selector }}
{{> block_myoverview/nav-sort-selector }}
......
......@@ -26,11 +26,11 @@
"summary": false
}
}}
<div class="dropdown">
<div class="dropdown m-b-1">
<button id="displaydropdown" type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
aria-label="{{#str}} aria:displaydropdown, block_myoverview {{/str}}">
{{#pix}} a/view_icon_active {{/pix}}
<span class="d-sm-inline-block">
<span class="d-sm-inline-block" data-active-item-text>
{{#cards}}{{#str}} card, block_myoverview {{/str}}{{/cards}}
{{#list}}{{#str}} list, block_myoverview {{/str}}{{/list}}
{{#summary}}{{#str}} summary, block_myoverview {{/str}}{{/summary}}
......
......@@ -27,7 +27,7 @@
"past": false
}
}}
<div class="dropdown">
<div class="dropdown m-b-1 mr-auto">
<button id="groupingdropdown" type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="{{#str}} aria:groupingdropdown, block_myoverview {{/str}}">
{{#pix}} i/filter {{/pix}}
<span class="d-sm-inline-block" data-active-item-text>
......
......@@ -26,24 +26,26 @@
}
}}
<div class="dropdown mr-1 ml-auto">
{{#str}} sortby, core {{/str}}
<button id="sortingdropdown" type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="{{#str}} aria:sortingdropdown, block_myoverview {{/str}}">
<span data-active-item-text class="d-sm-inline-block d-none">
{{#title}}{{#str}} title, block_myoverview {{/str}}{{/title}}
{{#lastaccessed}}{{#str}} lastaccessed, block_myoverview {{/str}}{{/lastaccessed}}
</span>
</button>
<ul class="dropdown-menu" data-show-active-item aria-labelledby="sortingdropdown">
<li>
<a class="dropdown-item {{#title}}active{{/title}}" href="#" data-filter="sort" data-pref="title" data-value="fullname" aria-label="{{#str}} aria:title, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
{{#str}} title, block_myoverview {{/str}}
</a>
</li>
<li>
<a class="dropdown-item {{#lastaccessed}}active{{/lastaccessed}}" href="#" data-filter="sort" data-pref="lastaccessed" data-value="ul.timeaccess desc" aria-label="{{#str}} aria:lastaccessed, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
{{#str}} lastaccessed, block_myoverview {{/str}}
</a>
</li>
</ul>
<div class="m-b-1 mr-1 d-flex align-items-center">
<div class="d-none d-md-inline-block mr-1">{{#str}} sortby, core {{/str}}</div>
<div class="dropdown">
<button id="sortingdropdown" type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="{{#str}} aria:sortingdropdown, block_myoverview {{/str}}">
<span data-active-item-text>
{{#title}}{{#str}} title, block_myoverview {{/str}}{{/title}}
{{#lastaccessed}}{{#str}} lastaccessed, block_myoverview {{/str}}{{/lastaccessed}}
</span>
</button>
<ul class="dropdown-menu" data-show-active-item aria-labelledby="sortingdropdown">
<li>
<a class="dropdown-item {{#title}}active{{/title}}" href="#" data-filter="sort" data-pref="title" data-value="fullname" aria-label="{{#str}} aria:title, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
{{#str}} title, block_myoverview {{/str}}
</a>
</li>
<li>
<a class="dropdown-item {{#lastaccessed}}active{{/lastaccessed}}" href="#" data-filter="sort" data-pref="lastaccessed" data-value="ul.timeaccess desc" aria-label="{{#str}} aria:lastaccessed, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
{{#str}} lastaccessed, block_myoverview {{/str}}
</a>
</li>
</ul>
</div>
</div>
\ No newline at end of file
......@@ -22,7 +22,7 @@
Example context (json):
{}
}}
<div class="card course-card border-0">
<div class="card dashboard-card border-0">
<div class="card-img-top bg-pulse-grey w-100" style="height: 7rem">
</div>
<div class="card-body course-info-container">
......
......@@ -34,11 +34,11 @@
}
}}
<div class="row card-deck" role="list">
<div class="card-deck dashboard-card-deck" role="list">
{{#courses}}
<div class="card course-card" role="listitem">
<div class="card dashboard-card" role="listitem">
<a href="{{viewurl}}" tabindex="-1">
<div class="card-img-top myoverviewimg" style='background-image: url("{{{courseimage}}}");'>
<div class="card-img dashboard-card-img" style='background-image: url("{{{courseimage}}}");'>
<span class="sr-only">{{#str}}aria:courseimage, block_myoverview{{/str}}</span>
{{> block_myoverview/favourite-icon }}
</div>
......@@ -55,7 +55,7 @@
</div>
</div>
{{#hasprogress}}
<div class="card-footer course-card-footer">
<div class="card-footer dashboard-card-footer">
{{> block_myoverview/progress-bar}}
</div>
{{/hasprogress}}
......
......@@ -73,7 +73,7 @@ class block_myoverview_privacy_testcase extends \core_privacy\tests\provider_tes
array('block_myoverview_user_grouping_preference', 'inprogress'),
array('block_myoverview_user_grouping_preference', 'future'),
array('block_myoverview_user_grouping_preference', 'past'),
array('block_myoverview_user_view_preference', 'cards'),
array('block_myoverview_user_view_preference', 'card'),
array('block_myoverview_user_view_preference', 'list'),
array('block_myoverview_user_view_preference', 'summary')
);
......
......@@ -81,31 +81,16 @@ $card-gutter : $card-deck-margin * 2;
.empty-placeholder-image-lg {
height: 125px;
}
.course-card {
margin-bottom: $card-gutter;
flex-basis: 100%;
}
.course-info-container {
padding: 0.8rem;
}
.course-card-footer {
padding: 0.8rem;
}
.progress {
height: 0.5rem;
}
.myoverviewimg {
height: 7rem;
background-position: center;
background-size: cover;
}
.course-summaryitem {
border: $border-width solid $border-color;
background-color: $body-bg;
}
.summary img {
max-width: 100%;
}
.icon {
margin-right: 0;
}
......@@ -114,22 +99,14 @@ $card-gutter : $card-deck-margin * 2;
color: inherit;
}
.btn.btn-link.btn-icon {
height: $icon-width;
width: $icon-width;
height: 36px;
width: 36px;
padding: 0;
border-radius: 50%;
flex-shrink: 0;
@include hover-focus {
background-color: $gray-200;
}
@each $size, $length in $iconsizes {
&.icon-size-#{$size} {
height: ($length + 20px) !important;
width: ($length + 20px) !important;
}
}
}
@include media-breakpoint-down(sm) {
.summaryimage {
......@@ -138,61 +115,82 @@ $card-gutter : $card-deck-margin * 2;
}
}
#region-main {
.block_myoverview {
.course-card {
flex-grow: 0;
flex-shrink: 0;
.dashboard-card-deck .dashboard-card {
margin-bottom: $card-gutter;
flex-basis: 100%;
flex-grow: 0;
.dashboard-card-img {
height: 7rem;
background-position: center;
background-size: cover;
}
.dashboard-card-footer {
padding: 0.8rem;
}
}
.dashboard-card-deck {
@include media-breakpoint-up(sm) {
.dashboard-card {
flex-basis: calc(50% - #{$card-gutter});
}
@include media-breakpoint-up(sm) {
.course-card {
flex-basis: calc(50% - #{$card-gutter});
}
}
@include media-breakpoint-up(md) {
.dashboard-card {
flex-basis: calc(33.33% - #{$card-gutter});
}
@include media-breakpoint-up(md) {
.course-card {
flex-basis: calc(33.33% - #{$card-gutter});
}
}
@include media-breakpoint-up(lg) {
.dashboard-card {
flex-basis: calc(25% - #{$card-gutter});
}
}
@include media-breakpoint-up(xl) {
.dashboard-card {
flex-basis: calc(20% - #{$card-gutter});
}
}
}
#region-main.has-blocks {
.dashboard-card-deck {
@include media-breakpoint-up(lg) {
.course-card {
flex-basis: calc(25% - #{$card-gutter});
.dashboard-card {
flex-basis: calc(33.33% - #{$card-gutter});
}
}
@include media-breakpoint-up(xl) {
.course-card {
flex-basis: calc(20% - #{$card-gutter});
.dashboard-card {
flex-basis: calc(25% - #{$card-gutter});
}
}
}
}
#region-main.has-blocks .block_myoverview {
@include media-breakpoint-up(lg) {
.course-card {
flex-basis: calc(33.33% - #{$card-gutter});
body.drawer-open-left #region-main.has-blocks {
.dashboard-card-deck {
@include media-breakpoint-up(lg) {
.dashboard-card {
flex-basis: calc(33.33% - #{$card-gutter});
}
}
}
@include media-breakpoint-up(xl) {
.course-card {
flex-basis: calc(25% - #{$card-gutter});
@media (min-width: 1400px) {
.dashboard-card {
flex-basis: calc(25% - #{$card-gutter});
}
}
}
}
body.drawer-open-left #region-main.has-blocks .block_myoverview {
.course-card {
flex-basis: calc(50% - #{$card-gutter});
}
@include media-breakpoint-up(lg) {
.course-card {
flex-basis: calc(33.33% - #{$card-gutter});
}
}
@media (min-width: 1400px) {
.course-card {
flex-basis: calc(25% - #{$card-gutter});
@media (min-width: 1200px) {
#block-region-side-pre {
.dashboard-card-deck {
margin: 0;
.dashboard-card {
flex-basis: 100% !important;
margin-left: 0;
margin-right: 0;
}
}
}
}
......
......@@ -11137,31 +11137,16 @@ div.editor_atto_toolbar button .icon {
.block_myoverview .empty-placeholder-image-lg {
height: 125px; }
.block_myoverview .course-card {
margin-bottom: 0.5rem;
flex-basis: 100%; }
.block_myoverview .course-info-container {
padding: 0.8rem; }
.block_myoverview .course-card-footer {
padding: 0.8rem; }
.block_myoverview .progress {
height: 0.5rem; }
.block_myoverview .myoverviewimg {
height: 7rem;
background-position: center;
background-size: cover; }
.block_myoverview .course-summaryitem {
border: 1px solid #dee2e6;
background-color: #fff; }
.block_myoverview .summary img {
max-width: 100%; }
.block_myoverview .icon {
margin-right: 0; }
......@@ -11170,76 +11155,68 @@ div.editor_atto_toolbar button .icon {
color: inherit; }
.block_myoverview .btn.btn-link.btn-icon, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.action, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.action, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.addcriterion, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.addcriterion {
height: 16px;
width: 16px;
height: 36px;
width: 36px;
padding: 0;
border-radius: 50%;
flex-shrink: 0; }
border-radius: 50%; }
.block_myoverview .btn.btn-link.btn-icon:hover, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.action:hover, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.action:hover, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon:hover, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon:hover, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.addcriterion:hover, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.addcriterion:hover, .block_myoverview .btn.btn-link.btn-icon:focus, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.action:focus, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.action:focus, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon:focus, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon:focus, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.addcriterion:focus, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.addcriterion:focus {
background-color: #e9ecef; }
.block_myoverview .btn.btn-link.btn-icon.icon-size-0, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-0.action, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.icon-size-0.action, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-0, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon.icon-size-0, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-0.addcriterion, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.icon-size-0.addcriterion {
height: 20px !important;
width: 20px !important; }
.block_myoverview .btn.btn-link.btn-icon.icon-size-1, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-1.action, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.icon-size-1.action, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-1, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon.icon-size-1, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-1.addcriterion, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.icon-size-1.addcriterion {
height: 24px !important;
width: 24px !important; }
.block_myoverview .btn.btn-link.btn-icon.icon-size-2, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-2.action, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.icon-size-2.action, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-2, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon.icon-size-2, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-2.addcriterion, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.icon-size-2.addcriterion {
height: 28px !important;
width: 28px !important; }
.block_myoverview .btn.btn-link.btn-icon.icon-size-3, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-3.action, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.icon-size-3.action, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-3, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon.icon-size-3, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-3.addcriterion, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.icon-size-3.addcriterion {
height: 36px !important;
width: 36px !important; }
.block_myoverview .btn.btn-link.btn-icon.icon-size-4, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-4.action, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.icon-size-4.action, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-4, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon.icon-size-4, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-4.addcriterion, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.icon-size-4.addcriterion {
height: 44px !important;
width: 44px !important; }
.block_myoverview .btn.btn-link.btn-icon.icon-size-5, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.icon-size-5.action, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.icon-size-5.action, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon.icon-size-5, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon.icon-size-5, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.icon-size-5.addcriterion, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.icon-size-5.addcriterion {
height: 68px !important;
width: 68px !important; }
@media (max-width: 767.98px) {
.block_myoverview .summaryimage {
max-height: 7rem; } }
#region-main .block_myoverview .course-card {
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(50% - 0.5rem); }
.dashboard-card-deck .dashboard-card {
margin-bottom: 0.5rem;
flex-basis: 100%;
flex-grow: 0; }
.dashboard-card-deck .dashboard-card .dashboard-card-img {
height: 7rem;
background-position: center;
background-size: cover; }
.dashboard-card-deck .dashboard-card .dashboard-card-footer {
padding: 0.8rem; }
@media (min-width: 576px) {
#region-main .block_myoverview .course-card {
.dashboard-card-deck .dashboard-card {
flex-basis: calc(50% - 0.5rem); } }
@media (min-width: 768px) {
#region-main .block_myoverview .course-card {
.dashboard-card-deck .dashboard-card {
flex-basis: calc(33.33% - 0.5rem); } }
@media (min-width: 992px) {
#region-main .block_myoverview .course-card {
.dashboard-card-deck .dashboard-card {
flex-basis: calc(25% - 0.5rem); } }
@media (min-width: 1200px) {
#region-main .block_myoverview .course-card {
.dashboard-card-deck .dashboard-card {
flex-basis: calc(20% - 0.5rem); } }
@media (min-width: 992px) {
#region-main.has-blocks .block_myoverview .course-card {
#region-main.has-blocks .dashboard-card-deck .dashboard-card {
flex-basis: calc(33.33% - 0.5rem); } }
@media (min-width: 1200px) {
#region-main.has-blocks .block_myoverview .course-card {
#region-main.has-blocks .dashboard-card-deck .dashboard-card {
flex-basis: calc(25% - 0.5rem); } }
body.drawer-open-left #region-main.has-blocks .block_myoverview .course-card {
flex-basis: calc(50% - 0.5rem); }
@media (min-width: 992px) {
body.drawer-open-left #region-main.has-blocks .block_myoverview .course-card {
body.drawer-open-left #region-main.has-blocks .dashboard-card-deck .dashboard-card {
flex-basis: calc(33.33% - 0.5rem); } }
@media (min-width: 1400px) {
body.drawer-open-left #region-main.has-blocks .block_myoverview .course-card {
body.drawer-open-left #region-main.has-blocks .dashboard-card-deck .dashboard-card {
flex-basis: calc(25% - 0.5rem); } }
@media (min-width: 1200px) {
#block-region-side-pre .dashboard-card-deck {
margin: 0; }
#block-region-side-pre .dashboard-card-deck .dashboard-card {
flex-basis: 100% !important;
margin-left: 0;
margin-right: 0; } }
.block_settings .block_tree [aria-expanded="true"],
.block_settings .block_tree [aria-expanded="true"].emptybranch,
.block_settings .block_tree [aria-expanded="false"],
......
......@@ -341,32 +341,15 @@
}
.block_myoverview {
*,
*::before,
*::after {
box-sizing: border-box;
}
.favouritebtn {
box-sizing: content-box;
* {
box-sizing: content-box;
}
}
.empty-placeholder-image-lg {
height: 125px;
}
.course-card {
.border-radius(@baseBorderRadius);
margin-bottom: 0.5rem;
flex-grow: 0;
flex-shrink: 0;
flex-basis: ~"calc(50% - 0.6rem)";
}
.course-info-container {
flex: 1 1 auto;
padding: 0.8rem;
}
.course-card-footer {
.dashboard-card-footer {
padding: 0.8rem;
background-color: @wellBackground;
border-top: 1px solid darken(@wellBackground, 7%);
......@@ -376,12 +359,6 @@
height: 0.5rem;
margin-bottom: 0;
}
.myoverviewimg {
height: 7rem;
background-position: center;
background-size: cover;
.border-top-radius(@baseBorderRadius);
}
.list-group {
margin: 0;
}
......@@ -402,49 +379,65 @@
.summary img {
max-width: 100%;
}
.favouritebtn {
cursor: pointer;
margin-left: 0;
}
.coursemenubtn {
border-radius: 50%;
height: 36px;
width: 36px;
padding: 8px 0;
&:hover {
background-color: #e9ecef;
}
img.icon {
padding-right: 0;
height: 16px;
width: 16px;
}
}
@media (max-width: 576px) {
.summaryimage {
max-height: 7rem;
}
}
}
.dashboard-card-deck {
box-sizing: border-box;
*,
*::before,
*::after {
box-sizing: border-box;
}
display: flex;
flex-flow: row wrap;
margin-right: -.25rem;
margin-left: -.25rem;
.dashboard-card {
.border-radius(@baseBorderRadius);
margin-bottom: 0.5rem;
flex-grow: 0;
flex-shrink: 0;
min-width: 0;
flex-basis: 100%;
}
@media (min-width: 576px) {
.card-deck {
display: flex;
flex-flow: row wrap;
margin-right: -.25rem;
margin-left: -.25rem;
}
.course-card {
.dashboard-card {
display: flex;
flex-direction: column;
margin-right: 0.25rem;
margin-left: 0.25rem;
flex-basis: ~"calc(50% - 0.6rem)";
}
}