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

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