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