wcfsetup/install/files/style/ui/button.scss

   1 button {
   2         all: unset;
   3
   4         box-sizing: border-box;
   5         min-width: 0;
   6         -webkit-user-select: none;
   7         user-select: none;
   8
   9         &:focus-visible {
  10                 outline: 5px auto -webkit-focus-ring-color;
  11         }
  12
  13         &:not([disabled]) {
  14                 cursor: pointer;
  15         }
  16 }
  17
  18 input[type="button"],
  19 input[type="reset"],
  20 input[type="submit"],
  21 .button,
  22 a.button {
  23         // a.button is required to override link formatting, such as drop-down buttons
  24         align-items: center;
  25         background-color: var(--wcfButtonBackground);
  26         border-radius: var(--wcfBorderRadius);
  27         border-width: 0;
  28         color: var(--wcfButtonText);
  29         // `0.25em` is the average width of a space that previously separated elements.
  30         column-gap: 0.25em;
  31         cursor: pointer;
  32         display: inline-flex;
  33         font-weight: 400;
  34         justify-content: center;
  35         margin: 0;
  36         padding: 8px 18px;
  37         text-align: center;
  38         text-decoration: none;
  39
  40         // input elements do not inherit font family, size and line-height from body
  41         font-family: var(--wcfFontFamily);
  42         @include wcfFontDefault;
  43         @include wcfLineHeight;
  44
  45         // removes UA styling enforced by Safari on iOS
  46         -webkit-appearance: none;
  47
  48         @include userSelectNone;
  49
  50         .icon {
  51                 color: inherit;
  52         }
  53
  54         &.active {
  55                 background-color: var(--wcfButtonBackgroundActive);
  56                 color: var(--wcfButtonTextActive);
  57                 text-decoration: none;
  58         }
  59
  60         &.small {
  61                 padding: 6px 8px;
  62
  63                 @include wcfFontSmall;
  64         }
  65
  66         small {
  67                 color: inherit;
  68         }
  69 }
  70
  71 @media (pointer: coarse) {
  72         input[type="button"],
  73         input[type="reset"],
  74         input[type="submit"],
  75         .button,
  76         a.button {
  77                 padding: 10px 18px;
  78
  79                 &.small {
  80                         padding: 8px;
  81                 }
  82         }
  83 }
  84
  85 input[type="button"].buttonPrimary,
  86 input[type="submit"],
  87 .button.buttonPrimary,
  88 a.button.buttonPrimary {
  89         // a.button is required to override link formatting, such as dropdown buttons
  90         background-color: var(--wcfButtonPrimaryBackground);
  91         color: var(--wcfButtonPrimaryText);
  92
  93         &.active {
  94                 background-color: var(--wcfButtonPrimaryBackgroundActive);
  95                 color: var(--wcfButtonPrimaryTextActive);
  96         }
  97 }
  98
  99 /* hover states are only applied to non-touch devices to avoid "leftover" hover states after taps */
 100 html:not(.touch) {
 101         input[type="button"],
 102         input[type="reset"],
 103         input[type="submit"],
 104         .button,
 105         a.button {
 106                 &:hover {
 107                         background-color: var(--wcfButtonBackgroundActive);
 108                         color: var(--wcfButtonTextActive);
 109                         text-decoration: none;
 110                 }
 111         }
 112
 113         input[type="button"].buttonPrimary,
 114         input[type="submit"],
 115         .button.buttonPrimary,
 116         a.button.buttonPrimary {
 117                 // a.button is required to override link formatting, such as dropdown buttons
 118                 &:hover {
 119                         background-color: var(--wcfButtonPrimaryBackgroundActive);
 120                         color: var(--wcfButtonPrimaryTextActive);
 121                 }
 122         }
 123 }
 124
 125 /* disabled state */
 126 input[type="button"],
 127 input[type="reset"],
 128 input[type="submit"],
 129 .button,
 130 a.button {
 131         &:disabled,
 132         &.disabled {
 133                 background-color: var(--wcfButtonDisabledBackground) !important;
 134                 color: var(--wcfButtonDisabledText) !important;
 135                 cursor: not-allowed !important;
 136                 pointer-events: none;
 137         }
 138 }
 139
 140 /* force active state for buttons toggling a dropdown */
 141 .dropdownOpen {
 142         > input[type="button"],
 143         > input[type="reset"],
 144         > input[type="submit"],
 145         > .button,
 146         > a.button {
 147                 background-color: var(--wcfButtonBackgroundActive);
 148                 color: var(--wcfButtonTextActive);
 149         }
 150
 151         > input[type="button"].buttonPrimary,
 152         > input[type="submit"],
 153         > .button.buttonPrimary,
 154         > a.button.buttonPrimary {
 155                 background-color: var(--wcfButtonPrimaryBackgroundActive);
 156                 color: var(--wcfButtonPrimaryTextActive);
 157         }
 158 }
 159
 160 .buttonList {
 161         @include inlineList;
 162
 163         &.smallButtons .button {
 164                 padding: 6px 8px;
 165
 166                 @include wcfFontSmall;
 167         }
 168
 169         /* members list */
 170         &.letters {
 171                 margin-bottom: -10px;
 172
 173                 > li {
 174                         flex: 0 0 auto;
 175                         margin-bottom: 10px;
 176                         width: 10%;
 177
 178                         &.lettersReset {
 179                                 width: auto;
 180                         }
 181
 182                         > a {
 183                                 display: block;
 184                                 min-width: -moz-min-content;
 185                                 min-width: -webkit-min-content;
 186                                 min-width: min-content;
 187                                 text-align: center;
 188                         }
 189                 }
 190         }
 191 }
 192
 193 .buttonList.iconList a {
 194         color: var(--wcfButtonText);
 195 }
 196
 197 .buttonGroupNavigation > ul {
 198         @include inlineList;
 199 }
 200
 201 .buttonGroup {
 202         margin-bottom: -1px;
 203
 204         @include inlineList;
 205
 206         > li {
 207                 display: flex;
 208                 margin-bottom: 1px;
 209
 210                 &:not(:last-child) {
 211                         margin-right: 1px;
 212                 }
 213
 214                 &:first-child .button {
 215                         border-top-left-radius: var(--wcfBorderRadius);
 216                         border-bottom-left-radius: var(--wcfBorderRadius);
 217                 }
 218
 219                 &:last-child .button {
 220                         border-top-right-radius: var(--wcfBorderRadius);
 221                         border-bottom-right-radius: var(--wcfBorderRadius);
 222                 }
 223
 224                 .button {
 225                         border-radius: 0;
 226                         border-width: 0;
 227                 }
 228         }
 229 }