Commit | Line | Data |
---|---|---|
b8eab696 | 1 | .messageTabMenu { |
1223c43c | 2 | // TODO: border: 1px solid $wcfContentBorder; |
b8eab696 AE |
3 | border-top-width: 0; |
4 | border-radius: 0 0 3px 3px; | |
b8eab696 AE |
5 | |
6 | > div, | |
7 | > fieldset{ | |
f2b50825 | 8 | background-color: $wcfContentBackground; |
b8eab696 AE |
9 | border-width: 0; |
10 | border-radius: 0; | |
1223c43c | 11 | // TODO: border-top: 1px solid $wcfContentBorder; |
b8eab696 AE |
12 | display: none; |
13 | padding: 15px 10px; | |
14 | position: static; | |
15 | ||
16 | &.active { | |
17 | display: block; | |
18 | } | |
19 | } | |
20 | ||
21 | > div { | |
22 | > nav { | |
f2b50825 | 23 | background-color: $wcfContentBackground; |
1223c43c | 24 | // TODO: border-bottom: 1px solid $wcfContentBorder; |
b8eab696 | 25 | margin: -14px -21px 14px -21px; |
f2b50825 | 26 | padding: $wcfGapTiny $wcfGapSmall; |
b8eab696 AE |
27 | |
28 | ul { | |
29 | display: inline-block; | |
30 | font-size: 0; | |
31 | white-space: nowrap; | |
32 | ||
33 | li { | |
34 | display: inline-block; | |
35 | outline: 0; | |
36 | vertical-align: baseline; | |
37 | ||
38 | &.active a, | |
39 | &.active a:hover { | |
1223c43c | 40 | color: $wcfButtonTextActive; |
b8eab696 AE |
41 | cursor: default; |
42 | } | |
43 | ||
44 | a { | |
f2b50825 | 45 | color: $wcfButtonText; |
b8eab696 | 46 | display: block; |
b8eab696 | 47 | outline: 0; |
f2b50825 | 48 | padding: 0 $wcfGapSmall; |
b8eab696 | 49 | |
945f563e AE |
50 | @extend .userSelectNone; |
51 | @extend .wcfFontSmall; | |
b8eab696 AE |
52 | |
53 | &:hover { | |
f2b50825 | 54 | color: $wcfButtonTextActive; |
b8eab696 AE |
55 | text-decoration: none; |
56 | } | |
57 | } | |
58 | ||
59 | &:not(:last-child) { | |
f2b50825 | 60 | padding-right: $wcfGapTiny; |
b8eab696 AE |
61 | } |
62 | ||
63 | &.dropdown > a { | |
64 | font-size: 1.0rem; | |
65 | padding: 4px 7px 2px; | |
66 | } | |
67 | } | |
68 | } | |
69 | } | |
70 | ||
71 | > div, | |
72 | > fieldset { | |
73 | border-top-width: 0; | |
74 | } | |
75 | } | |
76 | } | |
77 | ||
45433290 AE |
78 | .messageTabMenu + .innerError { |
79 | box-sizing: border-box; | |
80 | margin-top: -1px; | |
81 | width: 100%; | |
82 | } | |
83 | ||
b8eab696 | 84 | .messageTabMenuNavigation > ul { |
f2b50825 | 85 | background-color: $wcfContentBackground; |
b8eab696 AE |
86 | font-size: 0; |
87 | white-space: nowrap; | |
88 | ||
89 | > li { | |
90 | display: inline-block; | |
91 | ||
92 | > a { | |
1223c43c | 93 | // TODO: border-right: 1px solid $wcfContentBorder; |
b8eab696 | 94 | border-bottom: 1px solid transparent; |
f2b50825 | 95 | color: $wcfButtonText; |
b8eab696 AE |
96 | display: block; |
97 | font-size: 1rem; | |
b8eab696 AE |
98 | margin-bottom: -1px; |
99 | padding: 7px 14px 8px 14px; | |
100 | text-decoration: none; | |
101 | ||
1223c43c | 102 | @extend .userSelectNone; |
b8eab696 AE |
103 | |
104 | &:hover { | |
f2b50825 | 105 | color: $wcfContentLink; |
b8eab696 AE |
106 | } |
107 | ||
108 | > span.icon { | |
109 | display: none; | |
110 | } | |
111 | } | |
112 | ||
113 | &.active { | |
114 | > a { | |
f2b50825 AE |
115 | background-color: $wcfContentBackground; |
116 | color: $wcfContentLink; | |
b8eab696 AE |
117 | } |
118 | } | |
119 | } | |
120 | } | |
121 | ||
122 | @media only screen and (max-width: 800px) { | |
123 | .redactor-toolbar > li > a:hover { | |
124 | background-color: transparent !important; | |
125 | } | |
126 | ||
127 | .messageTabMenu { | |
128 | > nav > ul > li:not(.active) > a { | |
129 | > span.icon { | |
130 | display: block; | |
131 | } | |
132 | ||
133 | > span:not(.icon) { | |
134 | display: none; | |
135 | } | |
136 | } | |
137 | ||
138 | > div > nav { | |
f2b50825 | 139 | margin: ($wcfGapTiny - $wcfGapSmall) -$wcfGapSmall $wcfGapSmall -$wcfGapSmall; |
b8eab696 AE |
140 | } |
141 | } | |
142 | } | |
143 | ||
144 | /* fix for Firefox - fieldsets are set to display: table-column which cause an odd gap between the fieldset | |
145 | and the next element, similar to gaps with display: inline-block and font-size > 0 */ | |
146 | @-moz-document url-prefix() { | |
147 | fieldset + .messageTabMenu { | |
148 | margin-top: -3px; | |
149 | } | |
150 | } | |
151 | ||
152 | .uploadButton { | |
153 | overflow: hidden; | |
154 | position: relative; | |
155 | ||
156 | > input { | |
157 | left: -4px; | |
158 | opacity: 0; | |
159 | padding: 4px; | |
160 | position: absolute; | |
161 | top: -2px; | |
162 | } | |
163 | } |