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