Commit | Line | Data |
---|---|---|
b8eab696 AE |
1 | button, |
2 | input[type="button"], | |
3 | input[type="reset"], | |
4 | input[type="submit"], | |
ed8c9052 | 5 | .button, |
487db634 | 6 | a.button { // a.button is required to override link formatting, such as drop-down buttons |
954d51cf | 7 | background-color: $wcfButtonBackground; |
7967ab19 | 8 | border-radius: 2px; |
95cc4d01 | 9 | border-width: 0; |
ed8c9052 | 10 | color: $wcfButtonText; |
b8eab696 AE |
11 | cursor: pointer; |
12 | display: inline-block; | |
487db634 | 13 | outline: none; |
95cc4d01 | 14 | padding: 6px 12px; |
7540e2d5 | 15 | text-decoration: none; |
487db634 MW |
16 | |
17 | // input elements do not inherit font family, size and line-height from body | |
18 | font-family: $wcfFontFamily; | |
5908f54f AE |
19 | @include wcfFontDefault; |
20 | @include wcfLineHeight; | |
b8eab696 | 21 | |
a5956329 AE |
22 | // removes UA styling enforced by Safari on iOS |
23 | -webkit-appearance: none; | |
24 | ||
67b6b44e AE |
25 | @include userSelectNone; |
26 | ||
b8eab696 | 27 | .icon { |
7035df9a | 28 | color: inherit; |
b8eab696 AE |
29 | } |
30 | ||
f2b50825 | 31 | &.active, |
b8eab696 | 32 | &:hover { |
954d51cf | 33 | background-color: $wcfButtonBackgroundActive; |
ed8c9052 | 34 | color: $wcfButtonTextActive; |
7540e2d5 | 35 | text-decoration: none; |
b8eab696 AE |
36 | } |
37 | ||
38 | &.small { | |
b8eab696 | 39 | padding: 4px 7px; |
945f563e | 40 | |
5908f54f | 41 | @include wcfFontSmall; |
b8eab696 AE |
42 | } |
43 | } | |
44 | ||
45 | button.buttonPrimary, | |
46 | input[type="button"].buttonPrimary, | |
47 | input[type="submit"], | |
ed8c9052 | 48 | .button.buttonPrimary, |
95cc4d01 | 49 | a.button.buttonPrimary { // a.button is required to override link formatting, such as dropdown buttons |
f2b50825 | 50 | background-color: $wcfButtonPrimaryBackground; |
ed8c9052 | 51 | color: $wcfButtonPrimaryText; |
b8eab696 | 52 | |
f2b50825 | 53 | &.active, |
b8eab696 | 54 | &:hover { |
f2b50825 | 55 | background-color: $wcfButtonPrimaryBackgroundActive; |
ed8c9052 | 56 | color: $wcfButtonPrimaryTextActive; |
f2b50825 AE |
57 | } |
58 | } | |
59 | ||
63d349a3 AE |
60 | /* disabled state */ |
61 | button, | |
62 | input[type="button"], | |
63 | input[type="reset"], | |
64 | input[type="submit"], | |
65 | .button, | |
66 | a.button { | |
67 | &:disabled, | |
68 | &.disabled { | |
69 | background-color: $wcfButtonDisabledBackground !important; | |
63d349a3 AE |
70 | color: $wcfButtonDisabledText !important; |
71 | cursor: not-allowed !important; | |
72 | } | |
73 | } | |
74 | ||
f2b50825 AE |
75 | /* force active state for buttons toggling a dropdown */ |
76 | .dropdownOpen { | |
77 | > button, | |
78 | > input[type="button"], | |
79 | > input[type="reset"], | |
80 | > input[type="submit"], | |
ed8c9052 AE |
81 | > .button, |
82 | > a.button { | |
f2b50825 | 83 | background-color: $wcfButtonBackgroundActive; |
ed8c9052 | 84 | color: $wcfButtonTextActive; |
f2b50825 AE |
85 | } |
86 | ||
87 | > button.buttonPrimary, | |
88 | > input[type="button"].buttonPrimary, | |
89 | > input[type="submit"], | |
ed8c9052 AE |
90 | > .button.buttonPrimary, |
91 | > a.button.buttonPrimary { | |
f2b50825 | 92 | background-color: $wcfButtonPrimaryBackgroundActive; |
ed8c9052 | 93 | color: $wcfButtonPrimaryTextActive; |
b8eab696 | 94 | } |
b8eab696 AE |
95 | } |
96 | ||
97 | .buttonList { | |
5908f54f | 98 | @include inlineList; |
b8eab696 AE |
99 | |
100 | &.smallButtons .button { | |
95cc4d01 | 101 | padding: 5px 7px; |
945f563e | 102 | |
5908f54f | 103 | @include wcfFontSmall; |
b8eab696 AE |
104 | } |
105 | ||
106 | /* members list */ | |
107 | &.letters { | |
108 | margin-bottom: -10px; | |
109 | ||
110 | > li { | |
111 | flex: 0 0 10%; | |
112 | margin-bottom: 10px; | |
113 | ||
114 | > a { | |
115 | display: block; | |
116 | text-align: center; | |
117 | } | |
118 | } | |
119 | } | |
120 | } | |
121 | ||
122 | .buttonGroupNavigation > ul { | |
5908f54f | 123 | @include inlineList; |
b8eab696 AE |
124 | } |
125 | ||
126 | .buttonGroup { | |
5908f54f | 127 | @include inlineList; |
b8eab696 AE |
128 | |
129 | > li { | |
130 | &:not(:last-child) { | |
1223c43c | 131 | // TODO: border-right: 1px solid $wcfContentBorder; |
b8eab696 AE |
132 | margin-right: 0; |
133 | } | |
134 | ||
135 | &:first-child .button { | |
7967ab19 AE |
136 | border-top-left-radius: 2px; |
137 | border-bottom-left-radius: 2px; | |
b8eab696 AE |
138 | } |
139 | ||
140 | &:last-child .button { | |
7967ab19 AE |
141 | border-top-right-radius: 2px; |
142 | border-bottom-right-radius: 2px; | |
b8eab696 AE |
143 | } |
144 | ||
145 | .button { | |
146 | border-radius: 0; | |
f2b50825 | 147 | border-width: 0; |
b8eab696 AE |
148 | } |
149 | } | |
150 | } |