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: "FreeSans", 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 }