]> BookStack Code Mirror - bookstack/blob - resources/assets/sass/_header.scss
Update PageRepo.php
[bookstack] / resources / assets / sass / _header.scss
1 /**
2  * Includes the main navigation header and the faded toolbar.
3  */
4
5 header {
6   display: block;
7   z-index: 2;
8   top: 0;
9   background-color: $primary-dark;
10   color: #fff;
11   .padded {
12     padding: $-m;
13   }
14   border-bottom: 1px solid #DDD;
15   //margin-bottom: $-l;
16   .links {
17     display: inline-block;
18     vertical-align: top;
19     margin-right: $-xl;
20     @include smaller-than($screen-md) {
21       margin-right: $-m;
22     }
23   }
24   .links a {
25     display: inline-block;
26     padding: $-l;
27     color: #FFF;
28     &:last-child {
29       padding-right: 0;
30     }
31     @include smaller-than($screen-md) {
32       padding: $-l $-s;
33     }
34   }
35   .avatar, .user-name {
36     display: inline-block;
37   }
38   .avatar {
39     //margin-top: (45px/2);
40     width: 30px;
41     height: 30px;
42   }
43   .user-name {
44     vertical-align: top;
45     padding-top: $-l;
46     display: inline-block;
47     cursor: pointer;
48     > * {
49       vertical-align: top;
50     }
51     > span, > i {
52       padding-left: $-xs;
53       display: inline-block;
54     }
55     > span {
56       padding-top: $-xxs;
57     }
58     > i {
59       padding-top: $-xs*1.2;
60     }
61     @include smaller-than($screen-md) {
62       padding-left: $-xs;
63       .name {
64         display: none;
65       }
66       i {
67         font-size: 2em;
68         padding-left: 0;
69         padding-top: 0;
70       }
71     }
72   }
73   @include smaller-than($screen-md) {
74     text-align: center;
75     .float.right {
76       float: none;
77     }
78   }
79   @include smaller-than($screen-sm) {
80     .links a {
81       padding: $-s;
82     }
83     form.search-box {
84       margin-top: 0;
85     }
86     .user-name {
87       padding-top: $-s;
88     }
89   }
90 }
91
92 form.search-box {
93   margin-top: $-l *0.9;
94   display: inline-block;
95   position: relative;
96   text-align: left;
97   input {
98     background-color: transparent;
99     border-radius: 24px;
100     border: 2px solid #EEE;
101     color: #EEE;
102     padding-left: $-m;
103     padding-right: $-l;
104     outline: 0;
105   }
106   button {
107     vertical-align: top;
108     margin-left: -$-l;
109     color: #FFF;
110     top: 6px;
111     right: 4px;
112     display: inline-block;
113     position: absolute;
114     &:hover {
115       color: #FFF;
116     }
117   }
118 }
119
120 .logo {
121   display: inline-block;
122   &:hover {
123     color: #FFF;
124     text-decoration: none;
125   }
126 }
127 .logo-text {
128   display: inline-block;
129   font-size: 1.8em;
130   color: #fff;
131   font-weight: 400;
132   padding: $-l $-l $-l 0;
133   vertical-align: top;
134   line-height: 1;
135 }
136 .logo-image {
137   margin: $-m $-s $-m 0;
138   vertical-align: top;
139   height: 43px;
140 }
141
142 .dropdown-container {
143   display: inline-block;
144   vertical-align: top;
145   position: relative;
146 }
147
148 .dropdown-container ul {
149   display: none;
150   position: absolute;
151   z-index: 999;
152   top: 0;
153   list-style: none;
154   right: 0;
155   margin: $-m 0;
156   background-color: #FFFFFF;
157   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
158   border-radius: 1px;
159   border: 1px solid #EEE;
160   min-width: 180px;
161   padding: $-xs 0;
162   color: #555;
163   text-align: left !important;
164   &.wide {
165     min-width: 220px;
166   }
167   .text-muted {
168     color: #999;
169   }
170   a {
171     display: block;
172     padding: $-xs $-m;
173     color: #555;
174     &:hover {
175       text-decoration: none;
176       background-color: #EEE;
177     }
178     i {
179       margin-right: $-m;
180       padding-right: 0;
181       display: inline;
182       width: 22px;
183     }
184   }
185   li.border-bottom {
186     border-bottom: 1px solid #DDD;
187   }
188 }
189
190 .breadcrumbs span.sep {
191   color: #aaa;
192   padding: 0 $-xs;
193 }
194
195 .faded {
196   a, button, span, span > div {
197     color: #666;
198   }
199   .text-button {
200     opacity: 0.5;
201     transition: all ease-in-out 120ms;
202     &:hover {
203       opacity: 1;
204       text-decoration: none;
205     }
206   }
207 }
208
209 .faded-small {
210   color: #000;
211   font-size: 0.9em;
212   background-color: $primary-faded;
213 }
214
215 .breadcrumbs .text-button, .action-buttons .text-button {
216   display: inline-block;
217   padding: $-s;
218   &:last-child {
219     padding-right: 0;
220   }
221 }
222 .action-buttons {
223   text-align: right;
224   &.text-left {
225     text-align: left;
226     .text-button {
227       padding-right: $-m;
228       padding-left: 0;
229     }
230   }
231 }
232
233 .setting-nav {
234   text-align: center;
235   a {
236     padding: $-m;
237     display: inline-block;
238     color: #666;
239     &.selected {
240       border-bottom: 2px solid $primary;
241     }
242   }
243 }