packages/pass/components/Onboarding/OnboardingModal.scss

   1 .pass-onboarding-modal {
   2         /* Hide elements we don't need */
   3         .stepper-labels,
   4         .stepper-item-connector,
   5         .modal-two-header-actions .vr,
   6         .radio-fakeradio {
   7                 display: none;
   8         }
   9
  10         /* Customize stepper look */
  11         .stepper {
  12                 position: absolute;
  13                 inset-block-start: 2.35rem;
  14                 pointer-events: none;
  15
  16                 &-item {
  17                         max-inline-size: 2rem;
  18
  19                         &-dot {
  20                                 inline-size: 100%;
  21                                 block-size: 0.25rem;
  22                                 border-radius: 1.5rem;
  23                                 background-color: var(--interaction-weak);
  24                         }
  25
  26                         &--active .stepper-item-dot {
  27                                 opacity: 1;
  28                                 background-color: var(--interaction-norm);
  29                         }
  30                 }
  31         }
  32
  33         /* Align modal header */
  34         .modal-two-header-actions {
  35                 inline-size: 100%;
  36                 justify-content: end;
  37         }
  38
  39         /* Customize radio selectors */
  40         &--radio {
  41                 :checked ~ .pass-onboarding-modal--option,
  42                 .pass-onboarding-modal--option:hover {
  43                         background-color: var(--interaction-norm-minor-2);
  44                 }
  45         }
  46
  47         /* Style auto-lock control */
  48         &--lock {
  49                 & > .field-two-container {
  50                         display: flex;
  51                         justify-content: space-between;
  52                         align-items: center;
  53
  54                         .field-two-label-container {
  55                                 margin: 0;
  56                         }
  57                 }
  58         }
  59
  60         &--group,
  61         &--skip {
  62                 color: var(--interaction-norm);
  63         }
  64 }