weekly release 4.0dev
[moodle.git] / 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         }
21         .cb-listitem.cb-unlisted {
22             position: relative;
23         }
25         @include media-breakpoint-down(sm) {
26             .cb-listitem {
27                 flex-basis: 50%;
28             }
29         }
31         @include media-breakpoint-up(sm) {
32             .cb-listitem {
33                 max-width: 120px;
34                 min-width: 120px;
35             }
36         }
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         }
52         .cb-unlisted .cb-thumbnail {
53             opacity: .3;
54         }
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         }
69         .cb-heading,
70         .cb-uses,
71         .cb-date,
72         .cb-size,
73         .cb-type,
74         .cb-author {
75             display: none;
76         }
77     }
79     &.view-list {
80         .cb-content-wrapper {
81             padding: 0 0.5rem;
82             flex-direction: column;
83             flex-wrap: nowrap;
84         }
86         .cb-thumbnail {
87             margin-right: 0.5rem;
88         }
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         }
98         .cb-column {
99             display: flex;
100             padding: 0.25rem;
101         }
103         .cb-column {
104             border-right: $border-width solid $border-color;
105         }
107         .cb-listitem.cb-unlisted .cb-thumbnail {
108             opacity: .3;
109         }
111         .cb-listitem.cb-unlisted .cb-column,
112         .cb-listitem.cb-unlisted .cb-column a {
113             color: $text-muted;
114         }
116         @include media-breakpoint-down(sm) {
117             .cb-column {
118                 flex: 0 0 50%;
119                 max-width: 50%;
120             }
121         }
123         @include media-breakpoint-up(sm) {
124             .cb-heading {
125                 position: sticky;
126                 top: 0;
127                 z-index: 1;
128             }
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         }
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     }
160 .cb-toolbar-container .dropdown-scrollable {
161     max-height: 190px;
162     overflow-y: auto;