add bootstrap local
[ryf-theme.git] / css / drupal-bootstrap.css
1 /**
2 * Alert styling.
3 */
4 .alert-sm {
5 padding: 5px 10px;
6 }
7 .alert a {
8 font-weight: bold;
9 }
10 .alert-success a,
11 .alert-success a:hover,
12 .alert-success a:focus {
13 color: #2b542c;
14 }
15 .alert-info a,
16 .alert-info a:hover,
17 .alert-info a:focus {
18 color: #245269;
19 }
20 .alert-warning a,
21 .alert-warning a:hover,
22 .alert-warning a:focus {
23 color: #66512c;
24 }
25 .alert-danger a,
26 .alert-danger a:hover,
27 .alert-danger a:focus {
28 color: #843534;
29 }
30 /**
31 * AJAX (throbber) styling.
32 */
33 @keyframes glyphicon-spin {
34 0% {
35 transform: rotate(0deg);
36 }
37 100% {
38 transform: rotate(359deg);
39 }
40 }
41 .glyphicon-spin {
42 display: inline-block;
43 animation: glyphicon-spin 1s infinite linear;
44 }
45 a .glyphicon-spin {
46 display: inline-block;
47 text-decoration: none;
48 }
49 html.js .btn .ajax-throbber {
50 margin-left: 0.5em;
51 margin-right: -0.25em;
52 }
53 html.js .form-item .input-group-addon .glyphicon {
54 color: #777777;
55 opacity: 0.5;
56 transition: 150ms color, 150ms opacity;
57 }
58 html.js .form-item .input-group-addon .glyphicon.glyphicon-spin {
59 color: #337ab7;
60 opacity: 1;
61 }
62 html.js .form-item .input-group-addon .input-group-addon {
63 background-color: #ffffff;
64 }
65 html.js .ajax-new-content:empty {
66 display: none !important;
67 }
68 /**
69 * @file
70 * Visual styles for fields.
71 */
72 .field--label {
73 font-weight: bold;
74 }
75 .field--label-inline .field--label,
76 .field--label-inline .field--items {
77 float: left;
78 /*LTR*/
79 }
80 .field--label-inline .field--label,
81 .field--label-inline > .field--item,
82 .field--label-inline .field--items {
83 padding-right: 0.5em;
84 }
85 [dir="rtl"] .field--label-inline .field--label,
86 [dir="rtl"] .field--label-inline .field--items {
87 padding-left: 0.5em;
88 padding-right: 0;
89 float: right;
90 /*RTL*/
91 }
92 .field--label-inline .field--label::after {
93 content: ':';
94 }
95 /**
96 * File (and Image Widget) styles.
97 */
98 .file {
99 display: table;
100 font-size: 75%;
101 font-weight: 700;
102 margin: 5px 0;
103 width: 100%;
104 }
105 .file > span {
106 background: #fff;
107 color: #337ab7;
108 border-bottom: 1px solid #ccc;
109 border-top: 1px solid #ccc;
110 }
111 .file > span:first-child {
112 border-left: 1px solid #ccc;
113 }
114 .file > span:last-child {
115 border-right: 1px solid #ccc;
116 }
117 .file > .tabledrag-changed {
118 background: #fcf8e3;
119 border-radius: 0;
120 color: #8a6d3b;
121 display: table-cell;
122 padding: 0 1em;
123 top: 0;
124 vertical-align: middle;
125 border-left: 1px solid inherit;
126 }
127 .file > .tabledrag-changed,
128 .file > .tabledrag-changed:last-child {
129 border: 1px solid #f7e1b5;
130 }
131 .file-icon {
132 display: table-cell;
133 font-size: 150%;
134 padding: 0.25em 0.5em;
135 text-align: center;
136 vertical-align: middle;
137 }
138 .file-link {
139 display: table-cell;
140 vertical-align: middle;
141 width: 100%;
142 }
143 .file-link a,
144 .file-link a:hover,
145 .file-link a:focus,
146 .file-link a:active {
147 color: inherit;
148 }
149 .file-size {
150 display: table-cell;
151 padding: 0 1em;
152 text-align: right;
153 white-space: pre;
154 vertical-align: middle;
155 }
156 .image-widget.row {
157 overflow: hidden;
158 }
159 /**
160 * Filter styles.
161 */
162 .filter-wrapper {
163 background-color: #fff;
164 border: 1px solid #ddd;
165 border-top: 0;
166 border-radius: 0 0 4px 4px;
167 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
168 margin-bottom: 0;
169 padding: 10px;
170 height: 51px;
171 }
172 .filter-help {
173 float: right;
174 line-height: 1;
175 margin: 0.5em 0 0;
176 }
177 .nav.nav-tabs.filter-formats {
178 margin-bottom: 15px;
179 }
180 /**
181 * Form styles.
182 */
183 table .checkbox.form-no-label,
184 table .radio.form-no-label {
185 margin-bottom: 0;
186 margin-top: 0;
187 }
188 .select-wrapper {
189 display: inline-block;
190 position: relative;
191 width: 100%;
192 }
193 .form-inline .select-wrapper {
194 width: auto;
195 }
196 .input-group .select-wrapper {
197 display: table-cell;
198 }
199 .input-group .select-wrapper:first-child .form-control:first-child {
200 border-top-left-radius: 4px;
201 border-bottom-left-radius: 4px;
202 }
203 .input-group .select-wrapper:last-child .form-control:first-child {
204 border-top-right-radius: 4px;
205 border-bottom-right-radius: 4px;
206 }
207 .select-wrapper select {
208 -webkit-appearance: none;
209 -moz-appearance: none;
210 appearance: none;
211 line-height: 1;
212 padding-right: 2em;
213 }
214 .select-wrapper select::-ms-expand {
215 opacity: 0;
216 }
217 .select-wrapper:after {
218 color: #337ab7;
219 content: '▼';
220 font-style: normal;
221 font-weight: 400;
222 line-height: 1;
223 margin-top: -0.5em;
224 padding-right: 0.5em;
225 pointer-events: none;
226 position: absolute;
227 right: 0;
228 top: 50%;
229 z-index: 10;
230 }
231 .has-glyphicons .select-wrapper:after {
232 -webkit-font-smoothing: antialiased;
233 -moz-osx-font-smoothing: grayscale;
234 content: '\e114';
235 display: inline-block;
236 font-family: 'Glyphicons Halflings';
237 }
238 .has-error .select-wrapper:after {
239 color: #a94442;
240 }
241 .has-success .select-wrapper:after {
242 color: #3c763d;
243 }
244 .has-warning .select-wrapper:after {
245 color: #8a6d3b;
246 }
247 .form-required:after {
248 background-image: url('../images/required.svg');
249 background-size: 10px 7px;
250 content: "";
251 display: inline-block;
252 vertical-align: super;
253 line-height: 1;
254 height: 7px;
255 width: 10px;
256 }
257 .form-actions .btn,
258 .form-actions .btn-group {
259 margin-right: 10px;
260 }
261 .form-actions .btn-group .btn {
262 margin-right: 0;
263 }
264 /**
265 * Icon styles.
266 */
267 a.icon-before .glyphicon,
268 a .glyphicon.icon-before {
269 margin-right: 0.25em;
270 }
271 a.icon-after .glyphicon,
272 a .glyphicon.icon-after {
273 margin-left: 0.25em;
274 }
275 .btn.icon-before .glyphicon,
276 .btn .glyphicon.icon-before {
277 margin-left: -0.25em;
278 margin-right: 0.25em;
279 }
280 .btn.icon-after .glyphicon,
281 .btn .glyphicon.icon-after {
282 margin-left: 0.25em;
283 margin-right: -0.25em;
284 }
285 /**
286 * Navbar styling.
287 */
288 body {
289 position: relative;
290 }
291 body.navbar-is-static-top {
292 margin-top: 0;
293 }
294 body.navbar-is-fixed-top {
295 margin-top: 65px;
296 }
297 body.navbar-is-fixed-bottom {
298 padding-bottom: 65px;
299 }
300 @media screen and (min-width: 768px) {
301 body {
302 margin-top: 15px;
303 }
304 }
305 @media screen and (max-width: 767px) {
306 body.toolbar-vertical.navbar-is-fixed-top .toolbar-bar,
307 body.toolbar-vertical.navbar-is-fixed-bottom .toolbar-bar {
308 position: fixed;
309 }
310 body.toolbar-vertical.navbar-is-fixed-top header,
311 body.toolbar-vertical.navbar-is-fixed-bottom header {
312 z-index: 500;
313 }
314 body.toolbar-vertical.navbar-is-fixed-top header {
315 top: 39px;
316 }
317 }
318 @media screen and (min-width: 768px) {
319 .navbar.container {
320 max-width: 720px;
321 }
322 }
323 @media screen and (min-width: 992px) {
324 .navbar.container {
325 max-width: 940px;
326 }
327 }
328 @media screen and (min-width: 1200px) {
329 .navbar.container {
330 max-width: 1140px;
331 }
332 }
333 .navbar .logo {
334 margin-right: -15px;
335 padding-left: 15px;
336 padding-right: 15px;
337 }
338 @media screen and (min-width: 768px) {
339 .navbar .logo {
340 margin-right: 0;
341 padding-left: 0;
342 }
343 }
344 /**
345 * Node styling.
346 */
347 .is-unpublished {
348 background-color: #fff4f4;
349 }
350 .node-preview-container {
351 margin-top: -15px;
352 }
353 .node-preview-form-select {
354 padding: 15px;
355 }
356 /**
357 * Panel styling.
358 */
359 .panel-title {
360 display: block;
361 margin: -10px -15px;
362 padding: 10px 15px;
363 }
364 .panel-title,
365 .panel-title:hover,
366 .panel-title:focus,
367 .panel-title:hover:focus {
368 color: inherit;
369 }
370 .panel-title:focus,
371 .panel-title:hover {
372 text-decoration: none;
373 }
374 /**
375 * Progress bar styles.
376 */
377 .progress-wrapper {
378 margin-bottom: 15px;
379 }
380 .progress-wrapper:last-child .progress {
381 margin-bottom: 5px;
382 }
383 .progress-wrapper .message {
384 font-weight: 700;
385 margin-bottom: 5px;
386 }
387 .progress-wrapper .percentage,
388 .progress-wrapper .progress-label {
389 font-size: 12px;
390 }
391 .progress-wrapper .progress-bar {
392 min-width: 2em;
393 }
394 /**
395 * Table drag styles.
396 */
397 .tabledrag-toggle-weight {
398 float: right;
399 margin: 1px 2px 1px 10px;
400 }
401 .tabledrag-changed-warning {
402 margin: 0;
403 overflow: hidden;
404 }
405 .tabledrag-handle {
406 color: #777777;
407 cursor: move;
408 float: left;
409 font-size: 125%;
410 line-height: 1;
411 margin: -10px 0 0 -10px;
412 padding: 10px;
413 }
414 .tabledrag-handle:hover,
415 .tabledrag-handle:focus {
416 color: #337ab7;
417 }
418 .indentation {
419 float: left;
420 /* LTR */
421 height: 1.7em;
422 margin: -0.4em 0.2em -0.4em -0.4em;
423 /* LTR */
424 padding: 0.42em 0 0.42em 0.6em;
425 /* LTR */
426 width: 20px;
427 }
428 [dir="rtl"] .indentation {
429 float: right;
430 margin: -0.4em -0.4em -0.4em 0.2em;
431 padding: 0.42em 0.6em 0.42em 0;
432 }
433 /**
434 * Tabs and local action styles.
435 */
436 .local-actions {
437 margin: 10px 0 10px -5px;
438 }
439 .tabs--secondary {
440 margin: 10px 0 5px;
441 }
442 /**
443 * Missing Bootstrap 2 tab styling.
444 * @see http://stackoverflow.com/questions/18432577/stacked-tabs-in-bootstrap-3
445 * @see http://bootply.com/74926
446 */
447 .tabbable {
448 margin-bottom: 20px;
449 }
450 .tabs-below > .nav-tabs,
451 .tabs-left > .nav-tabs,
452 .tabs-right > .nav-tabs {
453 border-bottom: 0;
454 }
455 .tabs-below > .nav-tabs .summary,
456 .tabs-left > .nav-tabs .summary,
457 .tabs-right > .nav-tabs .summary {
458 color: #777777;
459 font-size: 12px;
460 }
461 .tab-pane > .panel-heading {
462 display: none;
463 }
464 .tab-content > .active {
465 display: block;
466 }
467 .tabs-below > .nav-tabs {
468 border-top: 1px solid #ddd;
469 }
470 .tabs-below > .nav-tabs > li {
471 margin-top: -1px;
472 margin-bottom: 0;
473 }
474 .tabs-below > .nav-tabs > li > a {
475 border-radius: 0 0 4px 4px;
476 }
477 .tabs-below > .nav-tabs > li > a:hover,
478 .tabs-below > .nav-tabs > li > a:focus {
479 border-top-color: #ddd;
480 border-bottom-color: transparent;
481 }
482 .tabs-below > .nav-tabs > .active > a,
483 .tabs-below > .nav-tabs > .active > a:hover,
484 .tabs-below > .nav-tabs > .active > a:focus {
485 border-color: transparent #ddd #ddd #ddd;
486 }
487 .tabs-left > .nav-tabs,
488 .tabs-right > .nav-tabs {
489 padding-bottom: 20px;
490 width: 220px;
491 }
492 .tabs-left > .nav-tabs > li,
493 .tabs-right > .nav-tabs > li {
494 float: none;
495 }
496 .tabs-left > .nav-tabs > li:focus,
497 .tabs-right > .nav-tabs > li:focus {
498 outline: 0;
499 }
500 .tabs-left > .nav-tabs > li > a,
501 .tabs-right > .nav-tabs > li > a {
502 margin-right: 0;
503 margin-bottom: 3px;
504 }
505 .tabs-left > .nav-tabs > li > a:focus,
506 .tabs-right > .nav-tabs > li > a:focus {
507 outline: 0;
508 }
509 .tabs-left > .tab-content,
510 .tabs-right > .tab-content {
511 border-radius: 0 4px 4px 4px;
512 border: 1px solid #ddd;
513 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
514 overflow: hidden;
515 padding: 10px 15px;
516 }
517 .tabs-left > .nav-tabs {
518 float: left;
519 margin-right: -1px;
520 }
521 .tabs-left > .nav-tabs > li > a {
522 border-radius: 4px 0 0 4px;
523 }
524 .tabs-left > .nav-tabs > li > a:hover,
525 .tabs-left > .nav-tabs > li > a:focus {
526 border-color: #eeeeee #ddd #eeeeee #eeeeee;
527 }
528 .tabs-left > .nav-tabs > .active > a,
529 .tabs-left > .nav-tabs > .active > a:hover,
530 .tabs-left > .nav-tabs > .active > a:focus {
531 border-color: #ddd transparent #ddd #ddd;
532 box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.05);
533 }
534 .tabs-right > .nav-tabs {
535 float: right;
536 margin-left: -1px;
537 }
538 .tabs-right > .nav-tabs > li > a {
539 border-radius: 0 4px 4px 0;
540 }
541 .tabs-right > .nav-tabs > li > a:hover,
542 .tabs-right > .nav-tabs > li > a:focus {
543 border-color: #eeeeee #eeeeee #eeeeee #ddd;
544 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
545 }
546 .tabs-right > .nav-tabs > .active > a,
547 .tabs-right > .nav-tabs > .active > a:hover,
548 .tabs-right > .nav-tabs > .active > a:focus {
549 border-color: #ddd #ddd #ddd transparent;
550 }
551 /**
552 * Toolbar module styling.
553 */
554 body.toolbar-fixed .toolbar-oriented .toolbar-bar {
555 z-index: 1031;
556 }
557 body.toolbar-fixed .navbar-fixed-top {
558 top: 39px;
559 }
560 body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open .navbar-fixed-top {
561 top: 79px;
562 }
563 body.toolbar-fixed.toolbar-vertical.toolbar-tray-open .navbar-fixed-top {
564 left: 240px;
565 }
566 body.toolbar-fixed.toolbar-vertical.toolbar-tray-open.toolbar-fixed {
567 margin-left: 240px;
568 }
569 body.toolbar-fixed.toolbar-vertical.toolbar-tray-open.toolbar-fixed .toolbar-tray {
570 padding-bottom: 40px;
571 }
572 body.toolbar-fixed.toolbar-vertical.toolbar-tray-open.toolbar-fixed .toolbar-tray,
573 body.toolbar-fixed.toolbar-vertical.toolbar-tray-open.toolbar-fixed .toolbar-tray > .toolbar-lining:before {
574 width: 240px;
575 }
576 body.toolbar-loading {
577 margin-top: 0;
578 }
579 body.toolbar-loading.toolbar {
580 margin-bottom: 15px;
581 }
582 /**
583 * jQuery UI autocomplete widget style overrides.
584 *
585 * @todo Remove once jQuery UI is no longer used?
586 */
587 .ui-autocomplete {
588 background: #fff;
589 background-clip: padding-box;
590 border: 1px solid #ccc;
591 border: 1px solid rgba(0, 0, 0, 0.15);
592 border-radius: 4px;
593 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
594 color: inherit;
595 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
596 font-size: 14px;
597 list-style: none;
598 min-width: 160px;
599 padding: 5px 0;
600 text-align: left;
601 z-index: 1000;
602 }
603 .ui-autocomplete .ui-menu-item {
604 border: 0;
605 border-radius: 0;
606 clear: both;
607 color: #333333;
608 cursor: pointer;
609 display: block;
610 font-weight: normal;
611 line-height: 1.42857143;
612 margin: 0;
613 outline: 0;
614 padding: 3px 20px;
615 text-decoration: none;
616 white-space: nowrap;
617 }
618 .ui-autocomplete .ui-menu-item.ui-state-hover {
619 background: #f5f5f5;
620 color: #262626;
621 }
622 .ui-autocomplete .ui-menu-item.ui-state-active,
623 .ui-autocomplete .ui-menu-item.ui-state-focus {
624 background: #337ab7;
625 color: #fff;
626 }
627 ol,
628 ul {
629 padding-left: 1.5em;
630 }
631 .popover ol:last-child,
632 .popover ul:last-child {
633 margin-bottom: 0;
634 }
635 .page-header {
636 margin-top: 0;
637 }
638 .footer {
639 margin-top: 45px;
640 padding-top: 35px;
641 padding-bottom: 36px;
642 border-top: 1px solid #E5E5E5;
643 }
644 p:last-child,
645 .form-group:last-child,
646 .panel:last-child {
647 margin-bottom: 0;
648 }
649 .region-help > .glyphicon {
650 font-size: 18px;
651 float: left;
652 margin: -0.05em 0.5em 0 0;
653 }
654 .region-help .block {
655 overflow: hidden;
656 }
657 .help-block,
658 .control-group .help-inline {
659 color: #777777;
660 font-size: 12px;
661 margin: 5px 0 10px;
662 padding: 0;
663 }
664 .help-block:first-child,
665 .control-group .help-inline:first-child {
666 margin-top: 0;
667 }