packages/pass/components/Form/Field/Control/ValueControl.scss

   1 @import '~@proton/styles/scss/lib';
   2
   3 .pass-value-control {
   4         background-color: var(--field-background-color);
   5
   6         &--standout {
   7                 background: linear-gradient(180deg, var(--interaction-norm-major-2) -850%, transparent 150%);
   8         }
   9
  10         &--value {
  11                 min-block-size: rem(20);
  12
  13                 & > *:last-child {
  14                         margin-block-end: 0;
  15                 }
  16         }
  17
  18         &--interactive {
  19                 transition: background-color 250ms;
  20
  21                 &:hover {
  22                         background-color: var(--interaction-default-hover);
  23                 }
  24
  25                 &:active {
  26                         background-color: var(--interaction-default-active);
  27                 }
  28
  29                 &:focus-visible {
  30                         z-index: 1;
  31                         outline: 1px solid var(--interaction-norm);
  32                 }
  33         }
  34 }