packages/pass/styles/_button.scss

   1 a {
   2         text-decoration: none;
   3
   4         &:hover {
   5                 text-decoration: underline;
   6         }
   7 }
   8
   9 .button {
  10         padding-block: 0.5rem;
  11         padding-inline: 0.75rem;
  12
  13         &.button-small {
  14                 padding-block: 0.375rem;
  15                 padding-inline: 0.5rem;
  16         }
  17 }
  18
  19 .button-solid-norm,
  20 .button-solid-weak,
  21 .button-solid-danger,
  22 .button-outline-norm,
  23 .button-outline-weak,
  24 .button-outline-danger,
  25 .button-solid-success,
  26 .button-promotion {
  27         align-items: center;
  28         display: flex;
  29         justify-content: center;
  30         block-size: 2.25rem;
  31
  32         &.button-for-icon {
  33                 inline-size: 2.25rem;
  34         }
  35
  36         &.button-fluid {
  37                 block-size: unset;
  38         }
  39
  40         &.button-small {
  41                 block-size: 2rem;
  42
  43                 &.button-for-icon {
  44                         inline-size: 2rem;
  45                 }
  46         }
  47
  48         &.button-xs {
  49                 block-size: 1.5rem;
  50
  51                 &.button-for-icon {
  52                         inline-size: 1.5rem;
  53                         padding: 0.25em;
  54                 }
  55         }
  56 }
  57
  58 .button-for-icon {
  59         padding: 0.5rem;
  60
  61         &.button-small {
  62                 padding: 0.375rem;
  63         }
  64 }
  65
  66 // Pill outline buttons
  67 .button.button-outline-norm.button-pill {
  68         --button-default-text-color: var(--interaction-norm-major-1);
  69         --button-hover-text-color: var(--interaction-norm-major-2);
  70         --button-active-text-color: var(--interaction-norm-major-3);
  71 }
  72
  73 .button-solid-weak {
  74         --button-default-text-color: var(--interaction-norm);
  75         --button-hover-text-color: var(--interaction-norm);
  76         --button-active-text-color: var(--interaction-norm);
  77 }