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