]> BookStack Code Mirror - bookstack/blob - resources/assets/sass/styles.scss
Update search.js
[bookstack] / resources / assets / sass / styles.scss
1 @import "reset";
2 @import "variables";
3 @import "fonts";
4 @import "mixins";
5 @import "html";
6 @import "text";
7 @import "grid";
8 @import "blocks";
9 @import "buttons";
10 @import "tables";
11 @import "forms";
12 @import "animations";
13 @import "tinymce";
14 @import "codemirror";
15 @import "components";
16 @import "header";
17 @import "lists";
18 @import "pages";
19
20 [v-cloak], [v-show] {
21   display: none; opacity: 0;
22   animation-name: none !important;
23 }
24
25
26 [ng\:cloak], [ng-cloak], .ng-cloak {
27   display: none !important;
28   user-select: none;
29 }
30
31 [ng-click] {
32   cursor: pointer;
33 }
34
35 // Jquery Sortable Styles
36 .dragged {
37   position: absolute;
38   opacity: 0.5;
39   z-index: 2000;
40 }
41 body.dragging, body.dragging * {
42   cursor: move !important;
43 }
44
45 // User Avatar Images
46 .avatar {
47   border-radius: 100%;
48   background-color: #EEE;
49   width: 30px;
50   height: 30px;
51   &.med {
52     width: 40px;
53     height: 40px;
54   }
55   &.large {
56     width: 80px;
57     height: 80px;
58   }
59   &.huge {
60     width: 120px;
61     height: 120px;
62   }
63   &.square {
64     border-radius: 3px;
65   }
66 }
67
68 // System wide notifications
69 .notification {
70   position: fixed;
71   top: 0;
72   right: 0;
73   margin: $-xl*2 $-xl;
74   padding: $-l $-xl;
75   background-color: #EEE;
76   border-radius: 3px;
77   box-shadow: $bs-med;
78   z-index: 999999;
79   display: block;
80   cursor: pointer;
81   max-width: 480px;
82   i, span {
83     display: table-cell;
84   }
85   i {
86     font-size: 2em;
87     padding-right: $-l;
88   }
89   span {
90     vertical-align: middle;
91   }
92   &.pos {
93     background-color: $positive;
94     color: #EEE;
95   }
96   &.neg {
97     background-color: $negative;
98     color: #EEE;
99   }
100   &.warning {
101     background-color: $secondary;
102     color: #EEE;
103   }
104 }
105
106 // Loading icon
107 $loadingSize: 10px;
108 .loading-container {
109   position: relative;
110   display: block;
111   height: $loadingSize;
112   margin: $-xl auto;
113   > div {
114     width: $loadingSize;
115     height: $loadingSize;
116     border-radius: $loadingSize;
117     display: inline-block;
118     vertical-align: top;
119     transform: translate3d(0, 0, 0);
120     animation-name: loadingBob;
121     animation-duration: 1.4s;
122     animation-iteration-count: infinite;
123     animation-timing-function: cubic-bezier(.62, .28, .23, .99);
124     margin-right: 4px;
125     background-color: $color-page;
126     animation-delay: 0.3s;
127   }
128   > div:first-child {
129       left: -($loadingSize+$-xs);
130       background-color: $color-book;
131       animation-delay: 0s;
132   }
133   > div:last-child {
134     left: $loadingSize+$-xs;
135     background-color: $color-chapter;
136     animation-delay: 0.6s;
137   }
138 }
139
140
141 // Search results
142 .search-results > h3 a {
143   font-size: 0.66em;
144   color: $primary;
145   padding-left: $-m;
146   i {
147     padding-right: $-s;
148   }
149 }
150
151 // Back to top link
152 $btt-size: 40px;
153 #back-to-top {
154   background-color: $primary;
155   position: fixed;
156   bottom: $-m;
157   right: $-l;
158   padding: $-xs $-s;
159   cursor: pointer;
160   color: #FFF;
161   width: $btt-size;
162   height: $btt-size;
163   border-radius: $btt-size;
164   transition: all ease-in-out 180ms;
165   opacity: 0;
166   z-index: 999;
167   overflow: hidden;
168   &:hover {
169     width: $btt-size*3.4;
170     opacity: 1 !important;
171     span {
172       display: inline-block;
173     }
174   }
175   .inner {
176     width: $btt-size*3.4;
177   }
178   i {
179     margin: 0;
180     font-size: 28px;
181     padding: 0 $-s 0 0;
182   }
183   span {
184     line-height: 12px;
185     position: relative;
186     top: -5px;
187   }
188 }
189
190 .contained-search-box {
191   display: flex;
192   input, button {
193     border-radius: 0;
194     border: 1px solid #DDD;
195     margin-left: -1px;
196   }
197   input {
198     flex: 5;
199     &:focus, &:active {
200       outline: 0;
201     }
202   }
203   button {
204     width: 60px;
205   }
206   button i {
207     padding: 0;
208   }
209   button.cancel.active {
210     background-color: $negative;
211     color: #EEE;
212   }
213 }
214
215 .entity-selector {
216   border: 1px solid #DDD;
217   border-radius: 3px;
218   overflow: hidden;
219   font-size: 0.8em;
220   input[type="text"] {
221     width: 100%;
222     display: block;
223     border-radius: 0;
224     border: 0;
225     border-bottom: 1px solid #DDD;
226     font-size: 16px;
227     padding: $-s $-m;
228   }
229   .entity-list {
230     overflow-y: scroll;
231     height: 400px;
232     background-color: #EEEEEE;
233   }
234   .loading {
235     height: 400px;
236     padding-top: $-l;
237   }
238   .entity-list > p {
239     text-align: center;
240     padding-top: $-l;
241     font-size: 1.333em;
242   }
243   .entity-list > div {
244     padding-left: $-m;
245     padding-right: $-m;
246     background-color: #FFF;
247     transition: all ease-in-out 120ms;
248     cursor: pointer;
249   }
250 }
251
252 .entity-list-item.selected {
253   h3, i, p ,a, span {
254     color: #EEE;
255   }
256 }
257
258 .center-box {
259   margin: $-xl auto 0 auto;
260   padding: $-m $-xxl $-xl $-xxl;
261   width: 420px;
262   max-width: 100%;
263   display: inline-block;
264   text-align: left;
265   vertical-align: top;
266   //border: 1px solid #DDD;
267   input {
268     width: 100%;
269   }
270   &.login {
271     background-color: #EEE;
272     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
273     border: 1px solid #DDD;
274   }
275 }
276
277
278