375addba93dab4c3cb3e6f1cd27a1028e39af0a8
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / scaffold / _topbar.scss
1 //
2 // Topbar
3 // ======
4 //
5
6 //
7 // Variables
8 //
9 $topbar-bg: $scaffold-topbar-bg;
10 $topbar-color: $scaffold-topbar-color;
11 $topbar-height: $scaffold-topbar-height;
12 $topbar-zindex: $scaffold-topbar-zindex;
13 $topbar-workspace-bg: #6d860d;
14 $topbar-toolbar-bg: $scaffold-topbar-toolbar-bg;
15 $topbar-toolbar-color: $scaffold-topbar-toolbar-color;
16 $topbar-button-bg: $topbar-toolbar-bg;
17 $topbar-button-hover-bg: lighten($topbar-button-bg, 3%);
18 $topbar-button-active-bg: $scaffold-modulemenu-bg;
19 $topbar-button-width: 40px;
20 $toolbar-item-padding-vertical: 9px;
21 $toolbar-item-padding-horizontal: 15px;
22
23 //
24 // Component
25 //
26 .topbar {
27 background-color: inherit;
28 position: relative;
29 height: $topbar-height;
30
31 a {
32 color: inherit;
33 text-decoration: none;
34 }
35 }
36
37 //
38 // Buttons
39 //
40 .topbar-button {
41 position: absolute;
42 top: 0;
43 display: inline-block;
44 border: 0;
45 background-color: $topbar-button-bg;
46 height: $topbar-height;
47 width: $topbar-button-width;
48
49 &:hover {
50 background-color: $topbar-button-hover-bg;
51 }
52
53 &.topbar-button-modulemenu {
54 left: 0;
55
56 @media (min-width: $scaffold-breakpoint) {
57 background-color: $topbar-button-active-bg;
58 }
59 }
60
61 &.topbar-button-navigationcomponent {
62 left: $topbar-button-width;
63 }
64
65 &.topbar-button-toolbar {
66 right: $topbar-button-width;
67 }
68
69 &.topbar-button-search {
70 right: 0;
71 }
72 }
73
74 .scaffold-modulemenu-expanded {
75 .topbar-button.topbar-button-modulemenu {
76 background-color: $topbar-button-active-bg;
77 }
78 }
79
80 .scaffold-content-navigation-expanded {
81 .topbar-button-navigationcomponent {
82 background-color: $topbar-button-active-bg;
83 }
84 }
85
86 .scaffold-toolbar-expanded {
87 @media (max-width: $scaffold-breakpoint-max) {
88 .toolbar-item-search {
89 display: none;
90 }
91 }
92
93 .topbar-button-toolbar {
94 background-color: $topbar-button-active-bg;
95 }
96 }
97
98 .scaffold-search-expanded {
99 @media (max-width: $scaffold-breakpoint-max) {
100 .toolbar-item {
101 display: none;
102 }
103
104 .toolbar-item-search {
105 display: block;
106 width: 100%;
107 }
108 }
109
110 .topbar-button-search {
111 background-color: $topbar-button-active-bg;
112 }
113 }
114
115 .topbar-button-toolbar,
116 .topbar-button-search {
117 display: block;
118 }
119
120 @media (min-width: $scaffold-breakpoint) {
121 .topbar-button-toolbar,
122 .topbar-button-search {
123 display: none;
124 }
125 }
126
127 //
128 // Header
129 //
130 .topbar-header {
131 padding-left: $topbar-button-width * 2;
132
133 @media (max-width: $scaffold-breakpoint-max) {
134 padding-right: ($topbar-button-width * 2) !important;
135 }
136 }
137
138 .topbar-header-site {
139 overflow: hidden;
140 position: relative;
141 max-width: 100%;
142 height: $topbar-height;
143 line-height: $topbar-height;
144 padding-left: 1em;
145 padding-right: 1em;
146 white-space: nowrap;
147
148 &:before,
149 &:after {
150 display: block;
151 content: '';
152 position: absolute;
153 top: 0;
154 bottom: 0;
155 width: 1em;
156 }
157
158 &:before {
159 right: 0;
160 background: $topbar-bg;
161 }
162
163 &:after {
164 right: 1em;
165 background: linear-gradient(to right, transparentize($topbar-bg, 1) 0%, transparentize($topbar-bg, 0) 100%);
166 }
167 }
168
169 .typo3-in-workspace {
170 .topbar-header-site {
171 background-color: $topbar-workspace-bg;
172
173 &:before {
174 background: $topbar-workspace-bg;
175 }
176
177 &:after {
178 background: linear-gradient(to right, transparentize($topbar-workspace-bg, 1) 0%, transparentize($topbar-workspace-bg, 0) 100%);
179 }
180 }
181 }
182
183 .topbar-header-site-logo {
184 height: $topbar-height;
185 display: none;
186 padding-right: 0.5em;
187
188 @media (min-width: 320px) {
189 display: inline-block;
190 }
191 }
192
193 .topbar-header-site-title {
194 line-height: 1.2em;
195 display: inline-block;
196 vertical-align: middle;
197 }
198
199 .topbar-header-site-name {
200 display: block;
201 }
202
203 .topbar-header-site-version {
204 opacity: 0.5;
205 }