Commit | Line | Data |
---|---|---|
b8eab696 AE |
1 | button, |
2 | input[type="button"], | |
3 | input[type="reset"], | |
4 | input[type="submit"], | |
ed8c9052 AE |
5 | .button, |
6 | a.button { | |
954d51cf AE |
7 | background-color: $wcfButtonBackground; |
8 | border: 1px solid $wcfButtonBorder; | |
b8eab696 | 9 | border-radius: 3px; |
ed8c9052 | 10 | color: $wcfButtonText; |
b8eab696 AE |
11 | cursor: pointer; |
12 | display: inline-block; | |
13 | padding: 5px 10px; | |
b8eab696 AE |
14 | |
15 | .icon { | |
954d51cf | 16 | color: $wcfButtonText; |
b8eab696 AE |
17 | } |
18 | ||
f2b50825 | 19 | &.active, |
b8eab696 | 20 | &:hover { |
954d51cf AE |
21 | background-color: $wcfButtonBackgroundActive; |
22 | border-color: $wcfButtonBorderActive; | |
ed8c9052 | 23 | color: $wcfButtonTextActive; |
b8eab696 AE |
24 | |
25 | .icon { | |
954d51cf | 26 | color: $wcfButtonTextActive; |
b8eab696 AE |
27 | } |
28 | } | |
29 | ||
30 | &.small { | |
b8eab696 | 31 | padding: 4px 7px; |
945f563e AE |
32 | |
33 | @extend .wcfFontSmall; | |
b8eab696 AE |
34 | } |
35 | } | |
36 | ||
37 | button.buttonPrimary, | |
38 | input[type="button"].buttonPrimary, | |
39 | input[type="submit"], | |
ed8c9052 AE |
40 | .button.buttonPrimary, |
41 | a.button.buttonPrimary { | |
f2b50825 AE |
42 | background-color: $wcfButtonPrimaryBackground; |
43 | border-color: $wcfButtonPrimaryBorder; | |
ed8c9052 | 44 | color: $wcfButtonPrimaryText; |
b8eab696 AE |
45 | |
46 | .icon { | |
f2b50825 | 47 | color: $wcfButtonPrimaryText; |
b8eab696 AE |
48 | } |
49 | ||
f2b50825 | 50 | &.active, |
b8eab696 | 51 | &:hover { |
f2b50825 AE |
52 | background-color: $wcfButtonPrimaryBackgroundActive; |
53 | border-color: $wcfButtonPrimaryBorderActive; | |
ed8c9052 | 54 | color: $wcfButtonPrimaryTextActive; |
b8eab696 AE |
55 | |
56 | .icon { | |
f2b50825 AE |
57 | color: $wcfButtonPrimaryTextActive; |
58 | } | |
59 | } | |
60 | } | |
61 | ||
62 | /* force active state for buttons toggling a dropdown */ | |
63 | .dropdownOpen { | |
64 | > button, | |
65 | > input[type="button"], | |
66 | > input[type="reset"], | |
67 | > input[type="submit"], | |
ed8c9052 AE |
68 | > .button, |
69 | > a.button { | |
f2b50825 AE |
70 | background-color: $wcfButtonBackgroundActive; |
71 | border-color: $wcfButtonBorderActive; | |
ed8c9052 | 72 | color: $wcfButtonTextActive; |
f2b50825 AE |
73 | |
74 | .icon { | |
75 | color: $wcfButtonTextActive; | |
76 | } | |
77 | } | |
78 | ||
79 | > button.buttonPrimary, | |
80 | > input[type="button"].buttonPrimary, | |
81 | > input[type="submit"], | |
ed8c9052 AE |
82 | > .button.buttonPrimary, |
83 | > a.button.buttonPrimary { | |
f2b50825 AE |
84 | background-color: $wcfButtonPrimaryBackgroundActive; |
85 | border-color: $wcfButtonPrimaryBorderActive; | |
ed8c9052 | 86 | color: $wcfButtonPrimaryTextActive; |
f2b50825 AE |
87 | |
88 | .icon { | |
89 | color: $wcfButtonPrimaryTextActive; | |
b8eab696 AE |
90 | } |
91 | } | |
b8eab696 AE |
92 | } |
93 | ||
94 | .buttonList { | |
954d51cf | 95 | @extend .inlineList; |
b8eab696 AE |
96 | |
97 | &.smallButtons .button { | |
b8eab696 | 98 | padding: 4px 7px; |
945f563e AE |
99 | |
100 | @extend .wcfFontSmall; | |
b8eab696 AE |
101 | } |
102 | ||
103 | /* members list */ | |
104 | &.letters { | |
105 | margin-bottom: -10px; | |
106 | ||
107 | > li { | |
108 | flex: 0 0 10%; | |
109 | margin-bottom: 10px; | |
110 | ||
111 | > a { | |
112 | display: block; | |
113 | text-align: center; | |
114 | } | |
115 | } | |
116 | } | |
117 | } | |
118 | ||
119 | .buttonGroupNavigation > ul { | |
954d51cf | 120 | @extend .inlineList; |
b8eab696 AE |
121 | } |
122 | ||
123 | .buttonGroup { | |
954d51cf | 124 | @extend .inlineList; |
b8eab696 AE |
125 | |
126 | > li { | |
127 | &:not(:last-child) { | |
1223c43c | 128 | // TODO: border-right: 1px solid $wcfContentBorder; |
b8eab696 AE |
129 | margin-right: 0; |
130 | } | |
131 | ||
132 | &:first-child .button { | |
f2b50825 | 133 | border-radius: 3px 0 0 3px; |
b8eab696 AE |
134 | } |
135 | ||
136 | &:last-child .button { | |
f2b50825 | 137 | border-radius: 0 3px 3px 0; |
b8eab696 AE |
138 | } |
139 | ||
140 | .button { | |
141 | border-radius: 0; | |
f2b50825 | 142 | border-width: 0; |
b8eab696 AE |
143 | } |
144 | } | |
145 | } |