theme/boost/scss/moodle/courseindex.scss

   1 $courseindex-link-color: $list-group-action-color !default;
   2 $courseindex-link-color-selected: color-yiq($primary) !default;
   3 $courseindex-link-dimmed-color: $gray-600 !default;
   4 $courseindex-link-hover-color: black !default;
   5 $courseindex-item-dragging-bg: theme-color-level('info', -11) !default;
   6 $courseindex-item-dragging-border: theme-color-level('info', -9) !default;
   7 $courseindex-item-active-border: $gray-300 !default;
   8 $courseindex-item-active-bg: $gray-100 !default;
   9 $courseindex-item-page-bg: $primary !default;
  10 $courseindex-item-padding-y: 0.5rem;
  11 $courseindex-item-padding-x: 0.5rem;
  12 $courseindex-item-radius: $border-radius !default;
  13 $courseindex-item-current: $primary !default;
  14
  15 @mixin courseindex-item-hover() {
  16     @include hover-focus() {
  17         color: $courseindex-link-hover-color;
  18
  19         .courseindex-link,
  20         .courseindex-chevron {
  21             color: $courseindex-link-hover-color;
  22             cursor: pointer;
  23         }
  24         &.dimmed {
  25             color: $courseindex-link-hover-color;
  26
  27             .courseindex-link,
  28             .courseindex-chevron {
  29                 color: $courseindex-link-hover-color;
  30             }
  31         }
  32         &.draggable {
  33             cursor: pointer;
  34         }
  35     }
  36 }
  37
  38 @mixin courseindex-item-dragging() {
  39     &.dragging {
  40         border: $border-width solid $courseindex-item-dragging-border;
  41         background-color: $courseindex-item-dragging-bg;
  42     }
  43 }
  44
  45 .courseindex {
  46     // Both activity and section items.
  47     .courseindex-item {
  48         padding: $courseindex-item-padding-y $courseindex-item-padding-x;
  49         border: $border-width solid transparent;
  50         @include border-radius($courseindex-item-radius);
  51
  52         &.courseindex-section-title a {
  53             font-weight: bold;
  54         }
  55
  56         .icons-collapse-expand {
  57             padding-right: 4px;
  58         }
  59
  60         .courseindex-link,
  61         .courseindex-chevron {
  62             color: $courseindex-link-color;
  63             @include hover-focus() {
  64                 color: $courseindex-link-hover-color;
  65                 text-decoration: none;
  66             }
  67         }
  68
  69         @include courseindex-item-hover();
  70
  71         @include courseindex-item-dragging();
  72
  73         &.active {
  74             background-color: $courseindex-item-active-bg;
  75             border-color: $courseindex-item-active-border;
  76         }
  77
  78         // Hidden elements.
  79         &.dimmed {
  80             color: $courseindex-link-dimmed-color;
  81
  82             .courseindex-link,
  83             .courseindex-chevron {
  84                 color: $courseindex-link-dimmed-color;
  85             }
  86
  87             // Current page dimmed item.
  88             &.pageitem {
  89                 color: $courseindex-link-color-selected;
  90
  91                 a {
  92                     color: $courseindex-link-color-selected;
  93                 }
  94             }
  95         }
  96
  97         // Restrictions icon.
  98         .courseindex-locked {
  99             display: none;
 100         }
 101         &.restrictions {
 102             .courseindex-locked {
 103                 display: block;
 104             }
 105         }
 106
 107         // Current page item.
 108         &.pageitem {
 109             background-color: $courseindex-item-page-bg;
 110             color: $courseindex-link-color-selected;
 111             scroll-margin: 6rem;
 112             a {
 113                 color: $courseindex-link-color-selected;
 114             }
 115
 116             @include hover-focus() {
 117                 background-color: darken($courseindex-item-page-bg, 7.5%);
 118                 color: darken($courseindex-link-color-selected, 10%);
 119                 .courseindex-link,
 120                 .courseindex-chevron {
 121                     color: darken($courseindex-link-color-selected, 10%);
 122                 }
 123             }
 124         }
 125
 126         // Completion.
 127         .completioninfo {
 128             min-width: 24px;
 129
 130             &.completion_complete {
 131                 color: $success;
 132             }
 133
 134             &.completion_fail {
 135                 color: $danger;
 136             }
 137         }
 138     }
 139
 140     // The full section collapsable.
 141     .courseindex-section {
 142
 143         @include courseindex-item-dragging();
 144
 145         border-left: solid 3px transparent;
 146
 147         .current-badge {
 148             line-height: $line-height-base;
 149             display: none;
 150         }
 151
 152         &.current {
 153             border-left: solid 3px $courseindex-item-current;
 154
 155             .current-badge {
 156                 display: inline-block;
 157             }
 158         }
 159
 160         &.dropready .courseindex-item-content {
 161             /* Extra dropzone space */
 162             padding-bottom: 1em;
 163         }
 164
 165         .courseindex-sectioncontent {
 166             .courseindex-item {
 167                 padding-left: $courseindex-item-padding-x;
 168             }
 169         }
 170     }
 171
 172     // General icons size.
 173     .icon {
 174         font-size: 12px;
 175     }
 176
 177     // Element visible only on editing mode.
 178     .d-flex-noedit {
 179         display: none;
 180     }
 181     &.editing {
 182         .d-flex-noedit {
 183             display: flex;
 184         }
 185     }
 186
 187     // Placeholders.
 188     .media-list {
 189         .rounded-circle {
 190             height: 1rem;
 191             width: 1rem;
 192         }
 193
 194         .w-100 {
 195             height: 1rem;
 196             margin: 0.5rem 0;
 197         }
 198     }
 199 }