indico/htdocs/sass/modules/_attachments.scss

   1 /* This file is part of Indico.
   2  * Copyright (C) 2002 - 2015 European Organization for Nuclear Research (CERN).
   3  *
   4  * Indico is free software; you can redistribute it and/or
   5  * modify it under the terms of the GNU General Public License as
   6  * published by the Free Software Foundation; either version 3 of the
   7  * License, or (at your option) any later version.
   8  *
   9  * Indico is distributed in the hope that it will be useful, but
  10  * WITHOUT ANY WARRANTY; without even the implied warranty of
  11  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  12  * General Public License for more details.
  13  *
  14  * You should have received a copy of the GNU General Public License
  15  * along with Indico; if not, see <http://www.gnu.org/licenses/>.
  16  */
  17
  18 @import 'base/palette';
  19 @import 'base/defaults';
  20 @import 'base/utilities';
  21 @import 'compass';
  22 @import 'compass/css3/user-interface';
  23
  24 %attachment-line {
  25     line-height: 1rem;
  26
  27     vertical-align: middle;
  28 }
  29
  30 %attachment-icon {
  31     @extend %attachment-line;
  32
  33     font-size: 0.8rem;
  34
  35     width: 1px;
  36
  37     white-space: nowrap;
  38 }
  39
  40
  41 .tree {
  42     width: 100%;
  43
  44     border-collapse: collapse;
  45     tr {
  46         > td {
  47             font-size: 0.9rem;
  48
  49             padding: 0.2rem 0.3rem;
  50             &:first-child {
  51                 @include icon-before('icon-none');
  52
  53                 overflow: hidden;
  54
  55                 max-width: 1px;
  56
  57                 white-space: nowrap;
  58                 text-overflow: ellipsis;
  59                 &:before {
  60                     display: inline-block;
  61                 }
  62                 > .custom-protection:before {
  63                     @extend %attachment-icon;
  64
  65                     color: $pastel-red;
  66                 }
  67             }
  68             > * {
  69                 @extend %attachment-line;
  70             }
  71         }
  72         &:not(.sub-tree) {
  73             > td {
  74                 &:first-child:before, > a, > span {
  75                     color: $light-black;
  76                 }
  77                 > a:hover {
  78                     color: $black;
  79                 }
  80                 &.actions,
  81                 &.actions > *,
  82                 &.date {
  83                     @extend %attachment-icon;
  84
  85                     color: $gray;
  86                 }
  87                 &.actions {
  88                     width: 2.2rem;
  89
  90                     text-align: right;
  91                     > * {
  92                         visibility: hidden;
  93
  94                         cursor: pointer;
  95
  96                         opacity: 0;
  97                         &.icon-remove:hover:before {
  98                             color: $red;
  99                         }
 100                         &.icon-edit:hover:before,
 101                         &.icon-file-download:hover:before {
 102                             color: $blue;
 103                         }
 104                     }
 105                 }
 106             }
 107             &:hover:not(.empty) > td {
 108                 background-color: $pastel-blue;
 109                 &:first-child {
 110                     @include border-top-left-radius(2px);
 111                     @include border-bottom-left-radius(2px);
 112                 }
 113                 &:last-child {
 114                     @include border-top-right-radius(2px);
 115                     @include border-bottom-right-radius(2px);
 116                 }
 117                 &.actions > *,
 118                 &.date {
 119                     color: $dark-gray;
 120                 }
 121                 &.actions > * {
 122                     visibility: visible;
 123
 124                     opacity: 1;
 125                 }
 126             }
 127         }
 128         &.expandable {
 129             @include user-select(none);
 130
 131             cursor: pointer;
 132             > td {
 133                 &:first-child {
 134                     @include icon-before('icon-arrow-down');
 135                     @include border-top-left-radius(2px);
 136                     @include border-bottom-left-radius(2px);
 137
 138                     font-weight: bold;
 139                     &:before {
 140                         @include transition(transform 0.15s ease-out);
 141
 142                         -webkit-transform-origin: 50%  51%; // improve blurry text on rotate with chrome
 143                     }
 144                     > span {
 145                         @include icon-before('icon-folder-open');
 146                     }
 147                 }
 148                 &:last-child {
 149                     @include border-top-right-radius(2px);
 150                 }
 151             }
 152             &.collapsed > td:first-child {
 153                 > span {
 154                     @include icon-before('icon-folder');
 155                 }
 156                 &:before {
 157                     @include rotate(-90deg);
 158                 }
 159             }
 160         }
 161         &.sub-tree > td {
 162             padding: 0 0 0 2.8em;
 163             &:first-child:before {
 164                 display: none; // no icon space for nested files
 165             }
 166             > div > .tree {
 167                 @include border-radius(2px);
 168
 169                 background-color: $light-gray;
 170                 tr > td:first-child:before {
 171                     display: none; // no icon space for nested files
 172                 }
 173             }
 174         }
 175         &.empty > td {
 176             font-style: italic;
 177
 178             color: $dark-gray;
 179         }
 180     }
 181 }
 182
 183 %protected-colors {
 184     border-bottom: 2px solid $red;
 185     &:hover:before {
 186         color: $red !important;
 187     }
 188     &:hover {
 189         border-bottom-color: $red !important;
 190     }
 191 }
 192
 193 @mixin download-button($color) {
 194     &:before {
 195         color: $color !important;
 196     }
 197     &:hover:not(.disabled):not(disabled) {
 198         color: lighten($color, 5%) !important;
 199     }
 200 }
 201
 202 .attachment.icon-file-pdf {
 203     @include download-button($red);
 204 }
 205
 206 .attachment.icon-file-excel {
 207     @include download-button($green);
 208 }
 209
 210 .attachment.icon-file-word {
 211     @include download-button($dark-blue);
 212 }
 213
 214 .attachment.icon-file-image {
 215     @include download-button($blue);
 216 }
 217
 218 .attachment.icon-calendar {
 219     @include download-button($dark-yellow);
 220 }
 221
 222 .attachment.icon-file-presentation {
 223     @include download-button($yellow);
 224 }
 225
 226 .material-list {
 227     .folder .attachment {
 228         display: inline-block;
 229         overflow: hidden;
 230
 231         max-width: 100px;
 232         padding-left: 0.2em !important;
 233
 234         text-overflow: ellipsis;
 235         .title {
 236             color: $light-black;
 237             font-size: 0.9em;
 238             text-overflow: ellipsis;
 239             white-space: nowrap;
 240         }
 241     }
 242     .folder .i-button.attachment,
 243     .folder .attachments {
 244         display: inline-block;
 245         font-family: Roboto;
 246
 247         display: inline-block;
 248
 249         margin-top: 0.2em;
 250         &:not(first-child) {
 251             margin-left: 0.2em;
 252         }
 253         &.is-protected {
 254             @extend %protected-colors;
 255         }
 256         &.has-label {
 257             margin: 0;
 258             padding-left: 0.7em !important;
 259         }
 260     }
 261     .folder.toolbar {
 262         display: inline-block;
 263
 264         &.is-protected {
 265             .i-button.label {
 266                 @extend %protected-colors;
 267
 268                 border-bottom-color: $red !important;
 269             }
 270         }
 271     }
 272     .folder .dropdown {
 273         & > li {
 274             padding: 0.1em 0.2em !important;
 275
 276             .attachment {
 277                 max-width: 250px;
 278                 &.is-protected {
 279                     color: $red;
 280                 }
 281             }
 282         }
 283     }
 284 }
 285
 286 .folder-main, div.main > .attachments-package {
 287     max-width: 1024px;
 288     margin: auto;
 289     margin-top: 2em;
 290     padding: 2em;
 291     background-color: $light-gray;
 292 }