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 AE |
7 | background-color: $wcfButtonBackground; |
8 | border: 1px solid $wcfButtonBorder; | |
ed8c9052 | 9 | color: $wcfButtonText; |
b8eab696 AE |
10 | cursor: pointer; |
11 | display: inline-block; | |
487db634 MW |
12 | outline: none; |
13 | padding: 4px 12px; | |
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 { | |
954d51cf | 21 | color: $wcfButtonText; |
b8eab696 AE |
22 | } |
23 | ||
f2b50825 | 24 | &.active, |
b8eab696 | 25 | &:hover { |
954d51cf AE |
26 | background-color: $wcfButtonBackgroundActive; |
27 | border-color: $wcfButtonBorderActive; | |
ed8c9052 | 28 | color: $wcfButtonTextActive; |
b8eab696 AE |
29 | |
30 | .icon { | |
954d51cf | 31 | color: $wcfButtonTextActive; |
b8eab696 AE |
32 | } |
33 | } | |
34 | ||
35 | &.small { | |
b8eab696 | 36 | padding: 4px 7px; |
945f563e | 37 | |
5908f54f | 38 | @include wcfFontSmall; |
b8eab696 AE |
39 | } |
40 | } | |
41 | ||
42 | button.buttonPrimary, | |
43 | input[type="button"].buttonPrimary, | |
44 | input[type="submit"], | |
ed8c9052 | 45 | .button.buttonPrimary, |
487db634 | 46 | a.button.buttonPrimary { // a.button is required to override link formatting, such as drop-down buttons |
f2b50825 AE |
47 | background-color: $wcfButtonPrimaryBackground; |
48 | border-color: $wcfButtonPrimaryBorder; | |
ed8c9052 | 49 | color: $wcfButtonPrimaryText; |
b8eab696 AE |
50 | |
51 | .icon { | |
f2b50825 | 52 | color: $wcfButtonPrimaryText; |
b8eab696 AE |
53 | } |
54 | ||
f2b50825 | 55 | &.active, |
b8eab696 | 56 | &:hover { |
f2b50825 AE |
57 | background-color: $wcfButtonPrimaryBackgroundActive; |
58 | border-color: $wcfButtonPrimaryBorderActive; | |
ed8c9052 | 59 | color: $wcfButtonPrimaryTextActive; |
b8eab696 AE |
60 | |
61 | .icon { | |
f2b50825 AE |
62 | color: $wcfButtonPrimaryTextActive; |
63 | } | |
64 | } | |
65 | } | |
66 | ||
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 AE |
75 | background-color: $wcfButtonBackgroundActive; |
76 | border-color: $wcfButtonBorderActive; | |
ed8c9052 | 77 | color: $wcfButtonTextActive; |
f2b50825 AE |
78 | |
79 | .icon { | |
80 | color: $wcfButtonTextActive; | |
81 | } | |
82 | } | |
83 | ||
84 | > button.buttonPrimary, | |
85 | > input[type="button"].buttonPrimary, | |
86 | > input[type="submit"], | |
ed8c9052 AE |
87 | > .button.buttonPrimary, |
88 | > a.button.buttonPrimary { | |
f2b50825 AE |
89 | background-color: $wcfButtonPrimaryBackgroundActive; |
90 | border-color: $wcfButtonPrimaryBorderActive; | |
ed8c9052 | 91 | color: $wcfButtonPrimaryTextActive; |
f2b50825 AE |
92 | |
93 | .icon { | |
94 | color: $wcfButtonPrimaryTextActive; | |
b8eab696 AE |
95 | } |
96 | } | |
b8eab696 AE |
97 | } |
98 | ||
99 | .buttonList { | |
5908f54f | 100 | @include inlineList; |
b8eab696 AE |
101 | |
102 | &.smallButtons .button { | |
b8eab696 | 103 | padding: 4px 7px; |
945f563e | 104 | |
5908f54f | 105 | @include wcfFontSmall; |
b8eab696 AE |
106 | } |
107 | ||
108 | /* members list */ | |
109 | &.letters { | |
110 | margin-bottom: -10px; | |
111 | ||
112 | > li { | |
113 | flex: 0 0 10%; | |
114 | margin-bottom: 10px; | |
115 | ||
116 | > a { | |
117 | display: block; | |
118 | text-align: center; | |
119 | } | |
120 | } | |
121 | } | |
122 | } | |
123 | ||
124 | .buttonGroupNavigation > ul { | |
5908f54f | 125 | @include inlineList; |
b8eab696 AE |
126 | } |
127 | ||
128 | .buttonGroup { | |
5908f54f | 129 | @include inlineList; |
b8eab696 AE |
130 | |
131 | > li { | |
132 | &:not(:last-child) { | |
1223c43c | 133 | // TODO: border-right: 1px solid $wcfContentBorder; |
b8eab696 AE |
134 | margin-right: 0; |
135 | } | |
136 | ||
137 | &:first-child .button { | |
66dba3c5 MW |
138 | border-top-left-radius: 3px; |
139 | border-bottom-left-radius: 3px; | |
b8eab696 AE |
140 | } |
141 | ||
142 | &:last-child .button { | |
66dba3c5 MW |
143 | border-top-right-radius: 3px; |
144 | border-bottom-right-radius: 3px; | |
b8eab696 AE |
145 | } |
146 | ||
147 | .button { | |
148 | border-radius: 0; | |
f2b50825 | 149 | border-width: 0; |
b8eab696 AE |
150 | } |
151 | } | |
152 | } |