packages/components/containers/items/ItemCheckbox.scss

   1 @import '~@proton/styles/scss/lib';
   2
   3 :root {
   4         --item-checkbox-background-color: var(--background-strong);
   5         --item-checkbox-icon-text-color: inherit;
   6 }
   7
   8 .item-checkbox {
   9         & + .item-icon {
  10                 border: 0;
  11         }
  12
  13         // hidden fake check by default
  14         & + .item-icon > .item-icon-fakecheck {
  15                 display: none;
  16         }
  17
  18         @supports not selector(:focus-visible) {
  19                 &:focus + .item-icon {
  20                         box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
  21                 }
  22         }
  23
  24         @supports selector(:focus-visible) {
  25                 &:focus-visible + .item-icon {
  26                         box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
  27                 }
  28         }
  29
  30         &-label {
  31                 // increase click area by default
  32                 margin-block: -1em;
  33                 padding-block: 1em;
  34                 margin-inline-start: -1em;
  35                 padding-inline-start: 1em;
  36
  37                 .item-icon {
  38                         background-color: var(--item-checkbox-background-color);
  39                         color: var(--item-checkbox-icon-text-color);
  40                 }
  41         }
  42
  43         // hover state of checkbox
  44         &:hover + .item-icon,
  45         & + .item-icon:hover {
  46                 & > .item-abbr {
  47                         display: none;
  48                 }
  49
  50                 & > .item-icon-fakecheck {
  51                         display: flex;
  52                         transform: scale(1);
  53                 }
  54         }
  55
  56         // checked state
  57         &:checked + .item-icon {
  58                 background-color: var(--interaction-norm);
  59
  60                 & > .item-abbr {
  61                         display: none;
  62                 }
  63
  64                 & > .item-icon-fakecheck {
  65                         display: flex;
  66                         animation: anime-conversation-icon-in easing(ease-out-quint) 0.15s;
  67                 }
  68
  69                 @keyframes anime-conversation-icon-in {
  70                         0% {
  71                                 transform: scale(0);
  72                         }
  73
  74                         100% {
  75                                 transform: scale(1);
  76                         }
  77                 }
  78
  79                 .item-icon-fakecheck-icon {
  80                         fill: var(--interaction-norm-contrast);
  81                 }
  82         }
  83 }
  84
  85 .item-icon,
  86 .item-icon-compact:hover {
  87         .unread & {
  88                 background-color: var(--email-item-unread-icon-background-color);
  89                 color: var(--email-item-unread-icon-text-color);
  90         }
  91
  92         .read & {
  93                 background-color: var(--email-item-read-icon-background-color);
  94                 color: var(--email-item-read-icon-text-color);
  95         }
  96
  97         .item-is-selected & {
  98                 background-color: var(--email-item-selected-icon-background-color);
  99                 color: var(--email-item-selected-icon-text-color);
 100         }
 101 }
 102
 103 .item-icon-compact {
 104         inline-size: rem($conversation-icon-size);
 105         block-size: rem($conversation-icon-size);
 106         border-radius: 50%;
 107         font-size: rem(12);
 108         transition: background-color 0.25s ease-out;
 109
 110         .item-container-column & {
 111                 margin-block-start: em(-5); // to align with first line
 112         }
 113
 114         .item-container-row & {
 115                 margin-block: auto;
 116         }
 117
 118         .item-container--row & {
 119                 margin-inline-start: rem(-1);
 120                 margin-block: auto;
 121         }
 122
 123         .item-container--column & {
 124                 margin-inline-start: rem(-2);
 125                 margin-block: rem(-3);
 126         }
 127
 128         // for allowing hovering larger than fake circle
 129         &::after {
 130                 content: '';
 131                 position: absolute;
 132                 inset-block: rem(-2);
 133                 inset-inline: rem(-6);
 134         }
 135
 136         &::before {
 137                 content: '';
 138                 position: absolute;
 139                 inset-block: em(-6) em(-12);
 140                 inset-inline: em(-12);
 141                 z-index: 1;
 142         }
 143
 144         .checkbox-fakecheck {
 145                 margin: auto;
 146         }
 147 }