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 }
  61
  62 .file-browser-grid-item--container {
  63         position: relative;
  64 }
  65
  66 .file-browser-grid-item--select {
  67         position: absolute;
  68         inset-block-start: 0.2em;
  69         inset-inline-start: 0.2em;
  70 }
  71
  72 .file-browser-grid-item--file-name {
  73         position: relative;
  74         inline-size: 100%;
  75         block-size: rem(42);
  76         line-height: rem(42);
  77
  78         // On the side is small options button.
  79         padding-block: 0;
  80         padding-inline: rem(40);
  81 }
  82
  83 .file-browser-grid-view--signature-icon {
  84         position: absolute;
  85         inset-inline-start: rem(4);
  86         block-size: 100%;
  87 }
  88
  89 .file-browser-grid-view--options {
  90         position: absolute;
  91         inset-inline-end: rem(4);
  92         inset-block-end: rem(8);
  93 }
  94
  95 .file-browser-list--context-menu-column {
  96         inline-size: rem(48); // To fit one small icon + spacing around.
  97 }
  98
  99 .file-browser-list--icon-column {
 100         &#{&} {
 101                 padding-block: 0;
 102         }
 103 }
 104
 105 .file-browser-list-item--thumbnail {
 106         block-size: 1rem;
 107         inline-size: 1rem;
 108         border-radius: 25%;
 109         object-fit: cover;
 110 }
 111
 112 // Disable drag on image to properly propagate event for drag & drop of item itself.
 113 .file-browser-grid-item--thumbnail,
 114 .file-browser-list-item--thumbnail {
 115         -webkit-user-drag: none;
 116         -khtml-user-drag: none;
 117         -moz-user-drag: none;
 118         -o-user-drag: none;
 119         user-drag: none; // stylelint-disable-line property-no-unknown
 120 }
 121
 122 .file-browser-list-item--invitation .file-browser-list-item--icon,
 123 .file-browser-grid-item--invitation .file-browser-grid-item--icon {
 124         filter: grayscale(100%);
 125 }
 126
 127 .file-browser-list-item--accept-decline-cell {
 128         inline-size: calc(100% / 6);
 129 }
 130
 131 .file-browser-list-item--decline {
 132         display: none;
 133 }
 134
 135 // This is the size where Accept / Decline buttons can fit in the list view
 136 @include media('>=#{em(1280, 16)}') {
 137         body:not(.drawer-is-open) {
 138                 .file-browser-list-item--accept-decline-cell {
 139                         inline-size: calc(100% / 6 + 3rem);
 140                 }
 141
 142                 .file-browser-list-item--decline {
 143                         display: block;
 144                 }
 145
 146                 .file-browser-list-item--invitation .file-browser-list--context-menu-column {
 147                         display: none;
 148                 }
 149         }
 150 }