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: .3;
  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.8;
  67         }
  68
  69         .cb-heading,
  70         .cb-uses,
  71         .cb-date,
  72         .cb-size,
  73         .cb-type,
  74         .cb-author {
  75             display: none;
  76         }
  77     }
  78
  79     &.view-list {
  80         .cb-content-wrapper {
  81             padding: 0 0.5rem;
  82             flex-direction: column;
  83             flex-wrap: nowrap;
  84         }
  85
  86         .cb-thumbnail {
  87             margin-right: 0.5rem;
  88         }
  89
  90         .cb-listitem,
  91         .cb-heading {
  92             display: flex;
  93             flex-wrap: wrap;
  94             width: 100%;
  95             border-bottom: $border-width solid $border-color;
  96         }
  97
  98         .cb-column {
  99             display: flex;
 100             padding: 0.25rem;
 101         }
 102
 103         .cb-column {
 104             border-right: $border-width solid $border-color;
 105         }
 106
 107         .cb-listitem.cb-unlisted .cb-thumbnail {
 108             opacity: .3;
 109         }
 110
 111         .cb-listitem.cb-unlisted .cb-column,
 112         .cb-listitem.cb-unlisted .cb-column a {
 113             color: $text-muted;
 114         }
 115
 116         @include media-breakpoint-down(sm) {
 117             .cb-column {
 118                 flex: 0 0 50%;
 119                 max-width: 50%;
 120             }
 121         }
 122
 123         @include media-breakpoint-up(sm) {
 124             .cb-heading {
 125                 position: sticky;
 126                 top: 0;
 127                 z-index: 1;
 128             }
 129
 130             .cb-file {
 131                 flex: 0 0 40%;
 132                 max-width: 40%;
 133             }
 134             .cb-uses,
 135             .cb-date,
 136             .cb-size,
 137             .cb-type,
 138             .cb-author {
 139                 flex: 0 0 12%;
 140                 max-width: 12%;
 141             }
 142             .cb-column.last {
 143                 border-right: 0;
 144             }
 145         }
 146
 147         .cb-btnsort {
 148             span {
 149                 display: none;
 150             }
 151             &.dir-none .default,
 152             &.dir-asc .asc,
 153             &.dir-desc .desc {
 154                 display: block;
 155             }
 156         }
 157     }
 158 }
 159
 160 .cb-toolbar-container .dropdown-scrollable {
 161     max-height: 190px;
 162     overflow-y: auto;
 163 }