packages/pass/styles/_fields.scss

   1 @import '~@proton/styles/scss/lib/config';
   2
   3 .placeholder-danger::placeholder {
   4         color: var(--signal-danger);
   5 }
   6
   7 // _input.scss override
   8 .input {
   9         border-color: var(--border-weak);
  10 }
  11
  12 .field,
  13 .field-icon-container {
  14         border-color: var(--border-norm);
  15 }
  16
  17 .field-two-container:has(input:placeholder-shown, textarea:placeholder-shown) {
  18         label,
  19         label > span {
  20                 color: var(--text-norm);
  21         }
  22 }
  23
  24 // _checkbox.scss override
  25 .checkbox-fakecheck,
  26 .radio-fakeradio {
  27         border-color: var(--border-norm);
  28
  29         &:hover {
  30                 background-color: var(--background-weak);
  31         }
  32 }
  33
  34 .checkbox-input[disabled] + .checkbox-fakecheck,
  35 .checkbox-input[disabled] + .radio-fakeradio {
  36         background-color: var(--background-weak);
  37 }
  38
  39 .pass-checkbox {
  40         &--unset {
  41                 span.checkbox-fakecheck {
  42                         margin-inline-start: 0 !important;
  43                 }
  44         }
  45 }
  46
  47 textarea {
  48         margin: 0;
  49         outline: none;
  50         padding: 0;
  51         resize: none;
  52 }
  53
  54 // Toggle component
  55 .toggle-label {
  56         .toggle-container {
  57                 transition: background-color 0.2s;
  58
  59                 &::after {
  60                         border: 1px solid var(--border-norm);
  61                 }
  62
  63                 &::before {
  64                         background-color: var(--interaction-weak-major-3);
  65                 }
  66
  67                 &:hover::before {
  68                         background-color: var(--interaction-norm);
  69                 }
  70
  71                 &.toggle-container--checked {
  72                         background-color: var(--interaction-weak);
  73
  74                         &::after {
  75                                 border: none;
  76                         }
  77
  78                         &::before {
  79                                 background-color: var(--interaction-norm);
  80                         }
  81
  82                         &:hover {
  83                                 &::before {
  84                                         background-color: var(--interaction-norm-major-1);
  85                                 }
  86                         }
  87
  88                         &.toggle-container--loading {
  89                                 background-color: var(--interaction-weak-major-1);
  90
  91                                 &::before {
  92                                         background-color: var(--interaction-weak-major-3);
  93                                 }
  94                         }
  95                 }
  96         }
  97
  98         .toggle-container-text {
  99                 svg {
 100                         color: var(--interaction-norm);
 101
 102                         &:not(.circle-loader) {
 103                                 display: none;
 104                         }
 105                 }
 106         }
 107 }
 108
 109 // Slider component
 110 .slider {
 111         &.slider-small {
 112                 block-size: rem(4);
 113         }
 114
 115         .slider-rail {
 116                 background-color: var(--interaction-norm-minor-1);
 117         }
 118
 119         span.slider-thumb {
 120                 block-size: rem(24);
 121                 inline-size: rem(24);
 122                 border-radius: rem(12);
 123                 background-color: white;
 124                 color: white;
 125         }
 126 }
 127
 128 // Slider.scss override
 129 // Something fishy happening here with the order of the css loading into the dom.
 130 // It's only in pass (or maybe only in the extension) for some reason, maybe something
 131 // to do with the webpack config. In any case, this gets overwritten by the word-break
 132 // defined in the tooltip.
 133 .slider-thumb-tooltip {
 134         word-break: initial !important;
 135 }