Commit | Line | Data |
---|---|---|
b8eab696 | 1 | .messageTabMenu { |
299eb8b4 | 2 | > .messageTabMenuContent { |
b8eab696 | 3 | display: none; |
b8eab696 AE |
4 | |
5 | &.active { | |
299eb8b4 | 6 | background-color: $wcfContentBackground; |
b8eab696 | 7 | display: block; |
299eb8b4 | 8 | margin-top: 0; |
b8eab696 AE |
9 | } |
10 | } | |
11 | ||
299eb8b4 AE |
12 | // prevent double formatting with nested tab menus |
13 | &:not(.messageTabMenuContent) > .messageTabMenuContent.active { | |
14 | border: 1px solid $wcfContentBorderInner; | |
15 | border-top-width: 0; | |
16 | padding: 20px; | |
17 | } | |
18 | ||
19 | // sub tab menu | |
20 | &.messageTabMenuContent > nav { | |
21 | border-bottom: 1px solid $wcfContentBorderInner; | |
22 | margin: -20px -20px 20px -20px; | |
23 | padding: 5px 20px; | |
24 | ||
25 | > ul { | |
5908f54f | 26 | @include inlineList; |
299eb8b4 AE |
27 | |
28 | > li { | |
29 | outline: 0; | |
b8eab696 | 30 | |
299eb8b4 AE |
31 | &:not(:last-child) { |
32 | margin-right: 20px; | |
33 | } | |
34 | ||
35 | &.active > a { | |
36 | color: $wcfContentLinkActive; | |
37 | } | |
38 | ||
39 | > a { | |
40 | display: block; | |
b8eab696 | 41 | outline: 0; |
b8eab696 | 42 | |
5908f54f AE |
43 | @include userSelectNone; |
44 | @include wcfFontSmall; | |
b8eab696 AE |
45 | } |
46 | } | |
47 | } | |
b8eab696 AE |
48 | } |
49 | } | |
50 | ||
45433290 | 51 | .messageTabMenu + .innerError { |
bf5372fc | 52 | margin-top: -1px; // TODO |
45433290 AE |
53 | width: 100%; |
54 | } | |
55 | ||
bf5372fc | 56 | .messageTabMenuNavigation { |
bf5372fc | 57 | > ul { |
299eb8b4 AE |
58 | background-color: $wcfContentBackground; |
59 | border: 1px solid $wcfContentBorderInner; | |
60 | border-top-width: 0; | |
b8eab696 | 61 | |
5908f54f | 62 | @include inlineList; |
bf5372fc AE |
63 | |
64 | > li { | |
299eb8b4 AE |
65 | border-right: 1px solid $wcfContentBorderInner; |
66 | ||
bf5372fc | 67 | &:not(:last-child) { |
299eb8b4 AE |
68 | margin-right: 0; |
69 | } | |
70 | ||
71 | &.active > a { | |
72 | color: $wcfContentLinkActive; | |
73 | position: relative; | |
74 | ||
75 | &::after { | |
76 | border-bottom: 1px solid $wcfContentBackground; | |
77 | bottom: -1px; | |
78 | content: ""; | |
79 | display: block; | |
80 | left: 0; | |
81 | position: absolute; | |
82 | right: 0; | |
83 | } | |
b8eab696 AE |
84 | } |
85 | ||
b8eab696 | 86 | > a { |
bf5372fc | 87 | display: block; |
299eb8b4 | 88 | padding: 10px 20px; |
bf5372fc | 89 | |
5908f54f | 90 | @include userSelectNone; |
bf5372fc AE |
91 | |
92 | > span.icon { | |
93 | display: none; | |
94 | } | |
b8eab696 AE |
95 | } |
96 | } | |
97 | } | |
bf5372fc AE |
98 | |
99 | > span { | |
299eb8b4 | 100 | display: none; |
bf5372fc | 101 | } |
b8eab696 AE |
102 | } |
103 | ||
431e4cb4 | 104 | @include small-screen-only { |
b8eab696 AE |
105 | .messageTabMenu { |
106 | > nav > ul > li:not(.active) > a { | |
107 | > span.icon { | |
108 | display: block; | |
109 | } | |
110 | ||
111 | > span:not(.icon) { | |
112 | display: none; | |
113 | } | |
114 | } | |
115 | ||
116 | > div > nav { | |
bf5372fc | 117 | // TODO: margin: ($wcfGapTiny - $wcfGapSmall) -$wcfGapSmall $wcfGapSmall -$wcfGapSmall; |
b8eab696 AE |
118 | } |
119 | } | |
120 | } | |
121 | ||
122 | /* fix for Firefox - fieldsets are set to display: table-column which cause an odd gap between the fieldset | |
123 | and the next element, similar to gaps with display: inline-block and font-size > 0 */ | |
124 | @-moz-document url-prefix() { | |
125 | fieldset + .messageTabMenu { | |
126 | margin-top: -3px; | |
127 | } | |
128 | } | |
129 | ||
130 | .uploadButton { | |
131 | overflow: hidden; | |
132 | position: relative; | |
133 | ||
134 | > input { | |
135 | left: -4px; | |
136 | opacity: 0; | |
137 | padding: 4px; | |
138 | position: absolute; | |
139 | top: -2px; | |
140 | } | |
141 | } |