packages/drive-store/components/FileBrowser/FileBrowser.scss

   1 @import '~@proton/styles/scss/lib';
   2
   3 .file-browser-header-checkbox-cell,
   4 .file-browser-list-checkbox-cell {
   5         position: relative; // Because of .expand-click-area
   6         padding-inline: 1em;
   7         inline-size: calc(#{rem(16)} + 2em);
   8 }
   9
  10 .file-browser-header-sort-cell {
  11         margin: -0.5em;
  12 }
  13
  14 .file-browser-table {
  15         th {
  16                 block-size: rem(44); // set height for thead as well
  17         }
  18 }
  19
  20 .file-browser-table .filebrowser-list-header-name-cell,
  21 .file-browser-table .filebrowser-list-device-name-cell {
  22         padding-inline-start: 1em;
  23 }
  24
  25 // in this case, we can remove focus, that is visible via selected row
  26 .file-browser-list-item {
  27         &:focus,
  28         &:focus-visible {
  29                 outline: 0;
  30         }
  31 }
  32
  33 .file-browser--options-focus {
  34         background-color: var(--button-hover-background-color);
  35         color: var(--button-hover-text-color);
  36 }
  37
  38 .file-browser-grid-item {
  39         position: relative;
  40         background-color: var(--background-norm);
  41         overflow: hidden;
  42
  43         &:hover,
  44         &:focus {
  45                 background-color: var(--background-weak);
  46         }
  47
  48         &:focus-visible {
  49                 outline: 0; // not needed, provided by file-browser-grid-item--highlight
  50         }
  51 }
  52
  53 .file-browser-grid-item.file-browser-grid-item--highlight {
  54         background-color: var(--background-strong);
  55 }
  56
  57 .file-browser-grid-item--thumbnail {
  58         inline-size: 100%;
  59         block-size: 100%;
  60         object-fit: cover;
  61 }
  62
  63 .file-browser-grid-item--container {
  64         position: relative;
  65 }
  66
  67 .file-browser-grid-item--select {
  68         position: absolute;
  69         inset-block-start: 0.2em;
  70         inset-inline-start: 0.2em;
  71 }
  72
  73 .file-browser-grid-item--file-name {
  74         position: relative;
  75         inline-size: 100%;
  76         block-size: rem(42);
  77         line-height: rem(42);
  78
  79         // On the side is small options button.
  80         padding-block: 0;
  81         padding-inline: rem(40);
  82 }
  83
  84 .file-browser-grid-view--signature-icon {
  85         position: absolute;
  86         inset-inline-start: rem(4);
  87         block-size: 100%;
  88 }
  89
  90 .file-browser-grid-view--options {
  91         position: absolute;
  92         inset-inline-end: rem(4);
  93         inset-block-end: rem(8);
  94 }
  95
  96 .file-browser-list--context-menu-column {
  97         inline-size: rem(48); // To fit one small icon + spacing around.
  98 }
  99
 100 .file-browser-list--icon-column {
 101         &#{&} {
 102                 padding-block: 0;
 103         }
 104 }
 105
 106 .file-browser-list-item--thumbnail {
 107         block-size: 1rem;
 108         inline-size: 1rem;
 109         border-radius: 25%;
 110         object-fit: cover;
 111 }
 112
 113 // Disable drag on image to properly propagate event for drag & drop of item itself.
 114 .file-browser-grid-item--thumbnail,
 115 .file-browser-list-item--thumbnail {
 116         -webkit-user-drag: none;
 117         -khtml-user-drag: none;
 118         -moz-user-drag: none;
 119         -o-user-drag: none;
 120         user-drag: none; // stylelint-disable-line property-no-unknown
 121 }
 122
 123 .file-browser-list-item--invitation .file-browser-list-item--icon,
 124 .file-browser-grid-item--invitation .file-browser-grid-item--icon {
 125         filter: grayscale(100%);
 126 }
 127
 128 .file-browser-list-item--accept-decline-cell {
 129         inline-size: calc(100% / 6);
 130 }
 131
 132 .file-browser-list-item--decline {
 133         display: none;
 134 }
 135
 136 // This is the size where Accept / Decline buttons can fit in the list view
 137 @include media('>=#{em(1280, 16)}') {
 138         body:not(.drawer-is-open) {
 139                 .file-browser-list-item--accept-decline-cell {
 140                         inline-size: calc(100% / 6 + 3rem);
 141                 }
 142
 143                 .file-browser-list-item--decline {
 144                         display: block;
 145                 }
 146
 147                 .file-browser-list-item--invitation .file-browser-list--context-menu-column {
 148                         display: none;
 149                 }
 150         }
 151 }