applications/drive/src/app/components/TransferManager/TransferManager.scss

   1 @use 'sass:map';
   2 @import '~@proton/styles/scss/lib';
   3
   4 .transfers-manager {
   5         inline-size: 100%;
   6         position: relative;
   7         z-index: map.get($z-indexes, 'transfer-manager');
   8         box-shadow: var(--shadow-lifted);
   9         color: var(--text-norm);
  10         transition: 0.15s cubic-bezier(0.22, 1, 0.36, 1);
  11         background: var(--background-norm);
  12
  13         @include media('height<=xsmall') {
  14                 max-block-size: 100%;
  15         }
  16
  17         @include media('<=small') {
  18                 inset-inline-start: 0;
  19                 inset-block-end: 0;
  20         }
  21
  22         @include media('>small') {
  23                 margin-inline-end: inherit;
  24
  25                 // Make rounded border for both manager and header to not include
  26                 // background color of the manager in the corner.
  27                 &,
  28                 &-heading {
  29                         border-start-start-radius: var(--border-radius-md);
  30                         border-start-end-radius: 0;
  31                         border-end-start-radius: 0;
  32                         border-end-end-radius: 0;
  33                 }
  34         }
  35
  36         &-heading {
  37                 background: var(--background-strong);
  38                 color: var(--text-norm);
  39         }
  40
  41         &-heading-tooltip {
  42                 align-self: stretch;
  43                 justify-content: stretch;
  44                 align-items: stretch;
  45
  46                 &--isDisabled {
  47                         pointer-events: none;
  48                 }
  49         }
  50
  51         &-list {
  52                 background-color: var(--background-norm);
  53                 color: var(--text-norm);
  54                 transition: inherit;
  55                 block-size: 100%;
  56                 margin-block-start: -0.5em;
  57         }
  58
  59         &--minimized &-list,
  60         &--minimized &-list-placeholder {
  61                 max-block-size: 0;
  62                 visibility: hidden;
  63         }
  64
  65         &--minimized {
  66                 @include media('height<=xsmall') {
  67                         max-block-size: initial;
  68                         block-size: initial;
  69                 }
  70         }
  71
  72         &-list-item {
  73                 display: grid;
  74                 grid-template-rows: 1fr auto;
  75                 grid-template-areas: 'name size status controls' 'progress progress progress progress';
  76                 gap: 1em;
  77                 align-items: center;
  78                 block-size: 5em; // To avoid height blinking on status changing
  79                 @extend .border-bottom;
  80
  81                 @include media('<=small') {
  82                         grid-template-columns: 4fr minmax(5em, 2fr) 2.5em minmax(4.5em, 1fr);
  83                 }
  84
  85                 @include media('>small') {
  86                         grid-template-columns: 4fr 2.5fr minmax(6em, 2fr) minmax(4.5em, 1fr);
  87                 }
  88
  89                 @include media('height>xsmall') {
  90                         &:last-child {
  91                                 border-block-end: none;
  92                         }
  93                 }
  94
  95                 @each $place in (name, size, status, controls, progress) {
  96                         &-#{$place} {
  97                                 grid-area: $place;
  98                         }
  99
 100                         @if $place != controls and $place != progress {
 101                                 &--canceled &-#{$place} {
 102                                         opacity: 0.5;
 103                                 }
 104                         }
 105                 }
 106
 107                 &-icon {
 108                         @include media('<=#{em(420, 16)}') {
 109                                 display: none;
 110                         }
 111                 }
 112
 113                 &-status {
 114                         white-space: nowrap;
 115                         font-variant-numeric: tabular-nums;
 116
 117                         @include media('<=small') {
 118                                 svg {
 119                                         margin: 0;
 120                                 }
 121                         }
 122                 }
 123
 124                 &-size {
 125                         white-space: nowrap;
 126                         font-variant-numeric: tabular-nums;
 127                 }
 128
 129                 &-controls-button {
 130                         padding: 0.375em;
 131
 132                         & + & {
 133                                 margin-inline-start: 0.5em;
 134                         }
 135                 }
 136
 137                 .transfers-manager-list-item-controls-button {
 138                         opacity: 0;
 139                         will-change: opacity;
 140                 }
 141
 142                 &:hover {
 143                         .transfers-manager-list-item-controls-button {
 144                                 opacity: 1;
 145                         }
 146                 }
 147         }
 148
 149         &-toolbar {
 150                 background-color: var(--background-weak);
 151         }
 152
 153         &-list-placeholder {
 154                 background-color: var(--background-norm);
 155         }
 156
 157         &-controls {
 158                 display: grid;
 159                 grid-template-columns: minmax(min-content, 1fr) auto;
 160                 grid-template-areas: 'status controls';
 161                 column-gap: 1em;
 162                 align-items: center;
 163                 block-size: 2em;
 164         }
 165
 166         &-header-buttons {
 167                 position: absolute;
 168                 inset-inline-end: 0;
 169         }
 170 }