theme/boost/scss/moodle/contentbank.scss

   1 .content-bank-container {
   2     .cb-content-wrapper {
   3         padding: 0.5rem;
   4         min-height: 140px;
   5         max-height: 500px;
   6         overflow-x: auto;
   7         flex-wrap: wrap;
   8     }
   9     .cb-thumbnail {
  10         width: 24px;
  11         height: 24px;
  12         background-repeat: no-repeat;
  13         background-position: center;
  14         background-size: cover;
  15     }
  16     &.view-grid {
  17         .cb-listitem {
  18             margin-bottom: 0.5rem;
  19         }
  20
  21         .cb-listitem.cb-unlisted {
  22             position: relative;
  23         }
  24
  25         @include media-breakpoint-down(sm) {
  26             .cb-listitem {
  27                 flex-basis: 50%;
  28             }
  29         }
  30
  31         @include media-breakpoint-up(sm) {
  32             .cb-listitem {
  33                 max-width: 120px;
  34                 min-width: 120px;
  35             }
  36         }
  37
  38         .cb-name {
  39             text-align: center;
  40         }
  41         .cb-file {
  42             padding: 0.5rem;
  43         }
  44         .cb-thumbnail {
  45             width: 64px;
  46             height: 64px;
  47             margin-left: auto;
  48             margin-right: auto;
  49             margin-bottom: 0.5rem;
  50         }
  51
  52         .cb-unlisted .cb-thumbnail {
  53             opacity: .15;
  54         }
  55
  56         /* Display a centered eye slash on top of unlisted content icons. */
  57         .cb-unlisted::after {
  58             position: absolute;
  59             top: 20px;
  60             left: 0;
  61             width: 100%;
  62             content: $fa-var-eye-slash;
  63             font-family: FontAwesome;
  64             font-size: 26px;
  65             text-align: center;
  66             opacity: 0.9;
  67             text-shadow: 0 0 10px $body-bg;
  68         }
  69
  70         .cb-heading,
  71         .cb-uses,
  72         .cb-date,
  73         .cb-size,
  74         .cb-type,
  75         .cb-author {
  76             display: none;
  77         }
  78     }
  79
  80     &.view-list {
  81         .cb-content-wrapper {
  82             padding: 0 0.5rem;
  83             flex-direction: column;
  84             flex-wrap: nowrap;
  85         }
  86
  87         .cb-thumbnail {
  88             margin-right: 0.5rem;
  89         }
  90
  91         .cb-listitem,
  92         .cb-heading {
  93             display: flex;
  94             flex-wrap: wrap;
  95             width: 100%;
  96             border-bottom: $border-width solid $border-color;
  97         }
  98
  99         .cb-column {
 100             display: flex;
 101             padding: 0.25rem;
 102         }
 103
 104         .cb-column {
 105             border-right: $border-width solid $border-color;
 106         }
 107
 108         .cb-listitem.cb-unlisted .cb-thumbnail {
 109             opacity: .3;
 110         }
 111
 112         .cb-listitem.cb-unlisted .cb-column,
 113         .cb-listitem.cb-unlisted .cb-column a {
 114             color: $text-muted;
 115         }
 116
 117         @include media-breakpoint-down(sm) {
 118             .cb-column {
 119                 flex: 0 0 50%;
 120                 max-width: 50%;
 121             }
 122         }
 123
 124         @include media-breakpoint-up(sm) {
 125             .cb-heading {
 126                 position: sticky;
 127                 top: 0;
 128                 z-index: 1;
 129             }
 130
 131             .cb-file {
 132                 flex: 0 0 40%;
 133                 max-width: 40%;
 134             }
 135             .cb-uses,
 136             .cb-date,
 137             .cb-size,
 138             .cb-type,
 139             .cb-author {
 140                 flex: 0 0 12%;
 141                 max-width: 12%;
 142             }
 143             .cb-column.last {
 144                 border-right: 0;
 145             }
 146         }
 147
 148         .cb-btnsort {
 149             span {
 150                 display: none;
 151             }
 152             .title {
 153                 display: inline;
 154             }
 155             &.dir-none .default,
 156             &.dir-asc .asc,
 157             &.dir-desc .desc {
 158                 display: inline;
 159             }
 160         }
 161     }
 162 }
 163
 164 .cb-toolbar-container .dropdown-scrollable {
 165     max-height: 190px;
 166     overflow-y: auto;
 167 }