[Summary view] [Print] [Text view]

   1  // Media browser
   2  .media-browser {
   3    position: relative;
   4    min-height: 70vh;
   5    border-inline-start: 1px solid $border-color;
   6    transition: width .3s cubic-bezier(.4, 0, .2, 1);
   7  }
   8  
   9  // Grid View
  10  .media-browser-grid {
  11    padding: $grid-outside-padding 0 $grid-outside-padding $grid-outside-padding;
  12  }
  13  
  14  .media-browser-items {
  15    display: flex;
  16    flex-wrap: wrap;
  17  }
  18  
  19  .media-browser-item {
  20    position: relative;
  21    margin-right: $grid-gutter-width;
  22    margin-bottom: $grid-gutter-width;
  23    cursor: pointer;
  24    user-select: none;
  25    .media-browser-items-sm & {
  26      width: calc(#{$grid-item-width-sm} - #{$grid-gutter-width});
  27    }
  28    .media-browser-items-md & {
  29      width: calc(#{$grid-item-width-md} - #{$grid-gutter-width});
  30    }
  31    .media-browser-items-lg & {
  32      width: calc(#{$grid-item-width-lg} - #{$grid-gutter-width});
  33    }
  34    .media-browser-items-xl & {
  35      width: calc(#{$grid-item-width-xl} - #{$grid-gutter-width});
  36    }
  37  }
  38  
  39  .media-browser-item-preview {
  40    position: relative;
  41    font-size: 60px;
  42    color: #007eb7;
  43    border: 1px solid hsl(var(--hue),35%,95%);
  44    border-radius: $grid-item-border-radius;
  45    &::after {
  46      position: absolute;
  47      top: 0;
  48      right: 0;
  49      bottom: 0;
  50      left: 0;
  51      content: "";
  52      background-color: $grid-item-hover-color;
  53      border-radius: $grid-item-border-radius;
  54      opacity: 0;
  55      transition: opacity .2s cubic-bezier(.4, 0, .2, 1);
  56      .media-browser-item.active &, .selected & {
  57        opacity: 1;
  58      }
  59    }
  60  }
  61  
  62  .media-browser-item-info {
  63    padding: 0 2px;
  64    overflow: hidden;
  65    font-size: .9rem;
  66    line-height: 28px;
  67    text-overflow: ellipsis;
  68    white-space: nowrap;
  69  }
  70  
  71  .media-browser-select {
  72    position: absolute;
  73    top: 6px;
  74    left: 6px;
  75    width: calc(#{$grid-item-icon-size} * 1.54);
  76    height: calc(#{$grid-item-icon-size} * 1.54);
  77    content: "";
  78    background-color: $grid-item-icon-bg-color;
  79    border: 2px solid $grid-item-icon-bg-color-hover;
  80    border-radius: $grid-item-border-radius;
  81    box-shadow: inset 0 0 0 0 $grid-item-icon-color;
  82    opacity: 0;
  83    transition: all .3s cubic-bezier(.4, 0, .2, 1);
  84    .media-browser-item.active & {
  85      opacity: 1;
  86    }
  87    &::after {
  88      position: absolute;
  89      top: 0;
  90      left: 0;
  91      width: calc(#{$grid-item-icon-size} * 1.3);
  92      height: calc(#{$grid-item-icon-size} * 1.3);
  93      font-family: "Font Awesome 5 Free";
  94      font-size: $grid-item-icon-size;
  95      font-weight: 900;
  96      line-height: calc(#{$grid-item-icon-size} * 1.3);
  97      text-align: center;
  98      content: "\f00c";
  99      opacity: 0;
 100      transition: all .3s cubic-bezier(.4, 0, .2, 1);
 101      transform: scale(.5);
 102      .selected & {
 103        opacity: 1;
 104        transform: scale(1);
 105      }
 106    }
 107    .selected & {
 108      color: $grid-item-icon-color-hover;
 109      background-color: $grid-item-icon-bg-color-hover;
 110      box-shadow: inset 0 0 0 15px $grid-item-icon-bg-color-hover;
 111      opacity: 1;
 112    }
 113  }
 114  
 115  .media-browser-actions {
 116    position: absolute;
 117    top: 4px;
 118    right: 0;
 119    padding: 2px;
 120    overflow: hidden;
 121    > button {
 122      opacity: 0;
 123      .media-browser-item.active & {
 124        opacity: 1;
 125      }
 126    }
 127    &.active {
 128      > button {
 129        display: none;
 130      }
 131    }
 132    ul {
 133      padding: 0;
 134      margin: 0;
 135      list-style: none;
 136      column-gap: 5px;
 137      columns: 2;
 138    }
 139  }
 140  
 141  .media-browser-actions-list {
 142    display: flex;
 143    flex-direction: column;
 144    button, a {
 145      position: relative;
 146      top: 0;
 147      padding: 0;
 148      margin-bottom: 3px;
 149      visibility: hidden;
 150      background-color: transparent;
 151      border: 0;
 152      opacity: 0;
 153      transition: all 0s ease;
 154      transition-delay: 0s;
 155      .media-browser-actions.active & {
 156        top: 0;
 157        visibility: visible;
 158        opacity: 1;
 159        transition-duration: .2s;
 160        &:first-of-type {
 161          transition-delay: .1s;
 162        }
 163        &:nth-of-type(2) {
 164          transition-delay: .15s;
 165        }
 166        &:nth-of-type(3) {
 167          transition-delay: .2s;
 168        }
 169        &:nth-of-type(4) {
 170          transition-delay: .25s;
 171        }
 172      }
 173    }
 174  }
 175  
 176  .image-browser-action {
 177    width: calc(#{$grid-item-icon-size} * 1.55);
 178    height: calc(#{$grid-item-icon-size} * 1.55);
 179    margin-right: 4px;
 180    margin-left: 4px;
 181    color: $grid-item-icon-color;
 182    text-align: center;
 183    cursor: pointer;
 184    background-color: $grid-item-icon-bg-color;
 185    border-radius: $grid-item-border-radius;
 186    .action-delete & {
 187      background-color: $grid-item-icon-warning-icon-bg;
 188    }
 189    &::before {
 190      font-size: $grid-item-icon-size;
 191      line-height: calc(#{$grid-item-icon-size} * 1.55);
 192    }
 193    &:hover {
 194      color: $grid-item-icon-color-hover;
 195      background-color: $grid-item-icon-bg-color-hover;
 196    }
 197  }
 198  
 199  .image-background {
 200    background-color: #fff;
 201    background-image: linear-gradient(45deg, hsl(var(--hue), 20%, 97%) 25%, transparent 25%, transparent 75%, #eee 75%, hsl(var(--hue), 20%, 97%) 100%), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, hsl(var(--hue), 20%, 97%) 75%, hsl(var(--hue), 20%, 97%) 100%);
 202    background-position: 0 0, 10px 10px;
 203    background-size: 20px 20px;
 204  }
 205  
 206  .image-cropped {
 207    aspect-ratio: 1/1;
 208    max-width: 100%;
 209    height: auto;
 210    object-fit: contain;
 211    border-radius: $grid-item-border-radius;
 212  }
 213  
 214  .image-placeholder {
 215    display: flex;
 216    align-items: center;
 217    justify-content: center;
 218    aspect-ratio: 1/1;
 219    max-width: 100%;
 220    height: auto;
 221    color: #9d9d9d;
 222  }
 223  
 224  .file-background, .folder-background {
 225    padding-bottom: 100%;
 226    background-color: hsl(var(--hue), 20%, 97%);
 227    border: 1px solid hsl(var(--hue), 35%, 95%);
 228    border-radius: $grid-item-border-radius;
 229  }
 230  
 231  .file-icon, .folder-icon {
 232    position: absolute;
 233    top: 0;
 234    right: 0;
 235    bottom: 0;
 236    left: 0;
 237    display: flex;
 238    align-items: center;
 239    justify-content: center;
 240    color: hsl(var(--hue), 20%, 60%);
 241  }
 242  
 243  .media-dragoutline {
 244    position: absolute;
 245    top: 6px;
 246    right: 6px;
 247    bottom: 1px;
 248    left: 6px;
 249    z-index: 1040;
 250    display: flex;
 251    flex-direction: column;
 252    align-items: center;
 253    justify-content: center;
 254    visibility: hidden;
 255    content: "";
 256    background-color: $dnd-bg;
 257    border: $dnd-border;
 258    border-radius: $border-radius;
 259    opacity: 0;
 260    transition: all .2s ease;
 261    transition-delay: .2s;
 262    transform: scale(.6);
 263    .upload-icon {
 264      font-size: 8rem;
 265      color: $dnd-icon-color;
 266      opacity: 0;
 267      transition: all .2s ease;
 268      transition-delay: .1s;
 269      transform: translateY(50%);
 270    }
 271    p {
 272      font-size: 1.4rem;
 273      opacity: 0;
 274      transition: all .2s ease;
 275      transition-delay: 0s;
 276    }
 277    &.active {
 278      visibility: visible;
 279      opacity: 1;
 280      transition-delay: 0s;
 281      transform: scale(1);
 282      .upload-icon {
 283        opacity: 1;
 284        transform: translateY(0);
 285      }
 286      p {
 287        opacity: 1;
 288        transition-delay: .2s;
 289      }
 290    }
 291  }
 292  
 293  // Table View
 294  .media-browser-table-head {
 295    .type {
 296      margin-left: 1px;
 297      &::before {
 298        display: none;
 299      }
 300    }
 301  }
 302  
 303  .media-browser-table {
 304    .size {
 305      width: 10%;
 306      text-align: right;
 307    }
 308    .dimension {
 309      width: 15%;
 310    }
 311    .created {
 312      width: 15%;
 313    }
 314    .modified {
 315      width: 15%;
 316    }
 317    .type {
 318      position: relative;
 319      z-index: 0;
 320      width: 49px;
 321      min-width: 49px;
 322      padding: .6rem 0;
 323      font-size: $table-item-icon-size;
 324      line-height: $table-item-height;
 325      text-align: center;
 326      background-color: $table-item-icon-bg;
 327      border-right: 1px solid rgba(0, 0, 0, .03);
 328      &::before, &::after {
 329        transition: all .2s cubic-bezier(.4, 0, .2, 1);
 330      }
 331      &::before {
 332        font-family: "Font Awesome 5 Free";
 333        color: $table-item-icon-color;
 334        .selected & {
 335          color: $table-item-icon-color-selected;
 336        }
 337      }
 338      &::after {
 339        position: absolute;
 340        top: -1px;
 341        right: 100%;
 342        bottom: -1px;
 343        left: 0;
 344        z-index: -1;
 345        content: "";
 346        background-color: $table-item-icon-bg-selected;
 347      }
 348      span {
 349        visibility: hidden;
 350      }
 351    }
 352  }
 353  
 354  .action-toggle {
 355    padding: 0;
 356    background: transparent;
 357    border: 0;
 358  }
 359  
 360  .selected {
 361    .type {
 362      &::before {
 363        color: #fff;
 364      }
 365      &::after {
 366        right: 0;
 367      }
 368    }
 369  }
 370  
 371  .type {
 372    &[data-type] {
 373      &::before {
 374        content: $icon-type-default;
 375      }
 376    }
 377    // Folder
 378    &[data-type=""] {
 379      &::before {
 380        content: $icon-type-folder;
 381      }
 382    }
 383    // Images
 384    &[data-type="jpg" i],
 385    &[data-type="png" i],
 386    &[data-type="gif" i],
 387    &[data-type="jpeg" i],
 388    &[data-type="tiff" i],
 389    &[data-type="bmp" i],
 390    &[data-type="svg" i],
 391    &[data-type="webp" i] {
 392      &::before {
 393        content: $icon-type-images;
 394      }
 395    }
 396    // Video
 397    &[data-type="mov" i],
 398    &[data-type="mkv" i],
 399    &[data-type="mp4" i],
 400    &[data-type="mpg" i],
 401    &[data-type="mpeg" i] {
 402      &::before {
 403        content: $icon-type-video;
 404      }
 405    }
 406    // Audio
 407    &[data-type="mp3" i],
 408    &[data-type="wav" i],
 409    &[data-type="raw" i],
 410    &[data-type="wma" i] {
 411      &::before {
 412        content: $icon-type-audio;
 413      }
 414    }
 415    // Docs
 416    &[data-type="doc" i],
 417    &[data-type="xls" i],
 418    &[data-type="pdf" i],
 419    &[data-type="txt" i] {
 420      &::before {
 421        content: $icon-type-docs;
 422      }
 423    }
 424    // Code
 425    &[data-type="html" i],
 426    &[data-type="htm" i] {
 427      &::before {
 428        content: $icon-type-code;
 429      }
 430    }
 431  }