Sindbad~EG File Manager
// List Layout
// Desktops, large screens
@mixin section-list-layout() {
.side {
&.left {
@media (max-width:$sm-screen-bp) {
gap: $gap-24;
}
}
&.right {}
}
&:not(#section-0) {
background: $white;
// overflow: hidden;
border-radius: $border-radius-8;
border: $border-height solid $light-border;
}
&.collapsed{
.summary.card-text{
display: none;
}
}
.content {
.panel-title,
h3 a {
margin: 0px;
color: $heading-color;
@include frmt-font-styling(24px, 32px, 700);
}
.course-section-summary-wrapper {
display: flex;
flex-direction: column;
gap: $gap-8;
padding: $pad-24;
& .no-overflow {
@include frmt-font-styling(14px, 22px, 400);
color: $paragraph-color;
}
}
}
.course-section-header {
justify-content: space-between;
// align-items: center;
gap: $gap-16;
@media (max-width:$tb-screenp-bp) {
flex-direction: column;
align-items: flex-start;
}
.name-progress-wrapper {
gap: $gap-16;
}
.sectionheading {
color: $heading-color;
@include frmt-font-styling(24px, 32px, 700);
}
.header-progresbar-wrapper{
gap: $gap-6;
flex-direction: column;
@media (max-width:$screen-900) {
gap: $gap-24;
}
@media (max-width:$tb-screenp-bp) {
gap:$gap-16
}
.section-title {
gap: $gap-8;
color: $heading-color;
@include frmt-font-styling(24px, 32px, 700);
}
.progress-bar-warpper{
@media (max-width:$sm-screen-bp){
// justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
.progress {
width: $progress-bar-min-width;
}
}
}
}
}
&.main {
// background: transparent;
// border: 0;
// box-shadow: none;
// padding: 0;
}
// Highliging current section
.highlight {
position: absolute;
top: 0;
width: 3px;
bottom: 0;
left: 0;
}
width: 100%;
// Section contents.
.card-footer {
background: transparent;
}
// Indent classes for activities
ul.section {
padding: 0;
.mod-indent-1 {
width: 35px;
}
.mod-indent-2 {
width: 70px;
}
.mod-indent-3 {
width: 105px;
}
.mod-indent-4 {
width: 140px;
}
.mod-indent-5 {
width: 175px;
}
.mod-indent-6 {
width: 210px;
}
.mod-indent-7 {
width: 245px;
}
.mod-indent-8 {
width: 280px;
}
.mod-indent-9 {
width: 315px;
}
.mod-indent-10 {
width: 350px;
}
.mod-indent-11 {
width: 385px;
}
.mod-indent-12 {
width: 420px;
}
.mod-indent-13 {
width: 455px;
}
.mod-indent-14 {
width: 490px;
}
.mod-indent-15 {
width: 525px;
}
.mod-indent-16 {
width: 560px;
}
}
.right.side {
width: max-content;
.wdm-add-new-section {
white-space: nowrap
}
}
.section_action_menu.ml-auto {
margin: unset !important;
}
}
@mixin list-section-toggle-icon() {
// Custom section content toggle icon.
.toggle-icon {
cursor: pointer;
transform: rotate(-90deg);
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: 0 !important;
&::before {
display: flex;
transition: all 0.5s ease;
font-size: 1.2rem;
}
}
// Rotating toggle icon when section is collapsed
&.collapsed {
.toggle-icon {
&::before {
transform: rotate(180deg);
}
}
}
}
&.editing {
.remui-format-list{
.summary {
padding-top: $pad-8;
}
.sections {
.section {
.side {
margin: 0;
&.left {
// padding: 0.5rem 0!important;
align-items: center;
// gap: 4px;
@media (max-width:1200px) {
flex-direction: column;
align-items: start;
}
.section-handle {
position: absolute;
top: 5px;
left: 5px;
}
}
&.right {
@media (max-width:$screen-900) {
width: 100%;
}
gap: $gap-8;
justify-content: space-between;
}
}
.sectionname {
display: flex;
align-items: center;
}
.card-title {
.fa-angle-up,
.fa-angle-down {
margin-right: 2%;
&:hover {
cursor: pointer;
}
}
}
}
#changenumsections {
width: 100%;
}
}
.section_availability .section_availability,
.section_availability.course-description-item{
padding:0px $pad-24 $pad-24 $pad-24 ;
}
// &.one-section-format {
// .one-section-format-details-page-wrapper {
// .course-section-header {
// flex-direction: row;
// }
// }
// }
}
}
.modtype_label {
box-shadow: unset !important;
background-color: unset;
border: 0px !important;
.single-card {
border: 0 !important;
}
.contentwithoutlink {
max-height: 100%;
padding: 0px;
}
.activity-badges{
.badge{
white-space: nowrap !important;
}
}
}
&:not(.editing) {
.remui-format-list {
.sections {
.section {
.side {
&.left {
// padding: 0.5rem 0!important;
align-items: center;
gap: $gap-4;
// .sectionname {
// order: 2;
// }
// .sectionbadges {
// order: 3;
// }
@media (max-width:$screen-900) {
flex-direction: column;
align-items: flex-start;
}
}
&.right {
margin-top: 0;
gap: $gap-24;
@media (max-width:$screen-900) {
width: 100%;
}
}
}
.sectionname {
.panel-title {
.float-right {
padding-right: 10px;
}
}
}
.availability-summary-wrapper:not(:has(:first-child)) {
display: none;
}
.availability-summary-wrapper:has(:nth-child(2)) {
.summary {
margin-top: $margin-16;
}
}
}
}
&.one-section-format {
.sections {
.section {
.sectionname {
.panel-title {
.float-right {
padding-right: 0;
}
}
}
}
}
}
}
}
// Styling for list format
// #list-container {
// margin-top: 48px;
// }
.remui-format-list,
.list-view-general-activities {
.availabilityinfo {
&.isrestricted {
margin: 0px;
// margin-top: $margin-16;
padding: $pad-8;
border-radius: $border-radius-8;
background-color: $small-ui-bg;
@include frmt-font-styling(12px,normal,400);
.description-inner,
.expanded-content {
ul {
padding-left: 1rem;
li{
margin-top: 4px;
margin-bottom: unset !important;
}
}
}
strong{
@include frmt-font-styling(12px,15px,600);
a{
@include frmt-font-styling(12px,normal,400);
}
}
}
}
.summary,.course-section-summary-wrapper{
@include frmt-font-styling(16px,24px,400);
color: $paragraph-color;
gap: $gap-16;
.no-overflow {
p {
margin: 0;
}
}
}
.sections {
list-style: none;
display: flex;
flex-direction: column;
gap: $gap-24;
.section {
@include section-list-layout();
}
}
.section.delegated-section {
@include section-list-layout();
@include list-section-toggle-icon();
.activity.activity-wrapper {
padding: 0 !important;
border: 0 !important;
}
}
// Styling for main course page where all sections are listed.
&.all-section-format {
ul.sections {
li.section {
// Custom section content toggle icon.
.toggle-icon {
cursor: pointer;
transform: rotate(-90deg);
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: 0 !important;
&::before {
display: flex;
transition: all 0.5s ease;
font-size: 1.2rem;
}
}
// Rotating toggle icon when section is collapsed
&.collapsed {
.toggle-icon {
&::before {
transform: rotate(180deg);
}
}
}
.content {
ul.section {
border: unset !important;
border-radius: unset !important;
border-top: $border-height solid $light-border !important;
.activity {
padding: 0px;
.activitytitle {
gap: $gap-24;
}
}
}
}
}
}
}
// common activity changes in list view
.activities-list,
.card-footer {
padding: unset;
ul.section {
padding: $pad-24 !important;
li:not(:last-child) {
margin-bottom: $margin-16;
}
li:has(.divider):not(:has(.divider-plus)){
margin-bottom: 0px;
}
.activity{
border-top: 0;
.activitytitle {
gap: $gap-24;
@media (max-width:$sm-screen-bp) {
flex-direction: column;
}
}
.activity-info.mt-1 {
margin-left: 74px;
padding-left: 0;
@media (max-width:$tb-screenp-bp) {
margin-top: $margin-24 !important;
margin-left: 0;
}
.activity-information {
.automatic-completion-conditions {
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 8px;
}
}
}
.activity-basis {
&:has([data-region="completion-info"]) {
margin-bottom: 16px;
}
& > div.flex-column {
flex-direction: column !important;
}
}
.description{
.availabilityinfo{
margin: unset;
margin-top: $margin-8;
}
}
&.indented{
// margin-left: $margin-24 !important;
&:hover{
background-color: unset!important;
}
.cm_action_menu.actions{
.section-cm-edit-actions{
.editing_moveright{
display: none;
}
}
}
}
@media (min-width:$tb-screenp-bp) {
.activity-item:not(:has(.activity-grid)) > *:not(.activity-basis):not(.editing_move),
.activity-item .activity-grid > *:not(.activity-instance):not(.activityiconcontainer ):not(.activity-actions) {
margin-left: 74px;
}
}
@media (max-width:$tb-screenp-bp) {
.activity-item .activity-grid > .activity-instance,
.activity-item .activity-grid > .activityiconcontainer {
margin-bottom: $margin-8 !important;
}
}
.activity-item:not(:has(.activity-grid)) > *:has(.badge),
.activity-item .activity-grid > *:has(.badge) {
margin-bottom: $margin-16 !important;
}
&.modtype_label .activity-item > *{
margin-left: unset !important ;
}
&.modtype_subsection{
.activity-altcontent{
margin-left: 0px !important;
.section{
border: unset !important;
border-radius: unset !important;
}
}
}
}
}
}
// Styling for section when single section is opened.
&.one-section-format {
&.all-section {
.sections {
.section:not(#section-0) {
ul.section {
display: none;
}
& .content {
display: flex;
flex-direction: column;
gap: $gap-14;
padding: $pad-24;
// .course-section-header{
// padding: $pad-24;
// }
}
}
}
}
.one-section-format-details-page-wrapper {
.section {
.course-section-summary-wrapper{
padding: $pad-24;
}
.content {
// padding-top: 24px;
}
}
}
// Single section activity list styling.
.activities-list {
ul.section {
margin: 0;
border: unset !important;
border-radius: unset !important;
border-top: $border-height solid $light-border !important;
.activity {
padding: 0px !important;
&:last-child {
border-bottom: 0 !important;
}
}
}
.section-modchooser {
// padding-top: 10px;
margin: 0px;
&.mb-3{
margin-bottom: 0px !important;
}
}
}
// .section_availability .section_availability
// .section_availability.course-description-item{
// padding:2px 0px $pad-16 0px;
// }
}
.section_availability .section_availability,
.section_availability.course-description-item{
color: $paragraph-color;
padding-top: 2px;
@include frmt-font-styling(12px,15px,400);
.availabilityinfo{
background-color: $small-ui-bg;
border-radius: $border-radius-4;
padding: $pad-8;
ul li{
margin-top: 4px;
}
}
strong{
@include frmt-font-styling(12px,normal,600);
a{
@include frmt-font-styling(12px,normal,400);
}
}
}
.section_availability.badge:not(:has(.section_availability.badge .section_availability:first-child)) {
display: none;
}
// Only for moodle 4.3
.activity-item {
.activity-grid {
grid-template-rows: 1fr repeat(6,min-content);
grid-template-areas:
"icon name groupmode completion actions"
"icon visibility groupmode completion actions"
"icon visibility groupmode completion actions"
"dates dates dates dates dates"
"altcontent altcontent altcontent altcontent altcontent"
"afterlink afterlink afterlink afterlink afterlink"
"availability availability availability availability availability";
.activity-dates {
margin-right: 0 !important;
}
.activity-instance:not(:has(.activityiconcontainer )) {
margin-left: $margin-24;
& ~ .activity-badges {
margin-left: $margin-24 !important;
}
}
}
}
}
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists