You are here

Home » API reference » AT Tools 8

breadcrumb.css in AT Tools 8 

@charset "UTF-8";
/**
 * Breadcrumbs
 * Breadcrumbs leverage AT's responsive lists JS feature. This sets a class if
 * the list is too wide for it's container. This allows us to dynamically change
 * the design of the breadcrumbs if they are too wide. We use media queries as a
 * no-js fallback.
 ============================================================================ */
.block-breadcrumbs:not(.has-title) {
  margin: 0;
}

.breadcrumb {
  margin: 16px 0;
  margin: 1rem 0;
  overflow: hidden;
}
.breadcrumb__title {
  font-size: inherit;
  line-height: inherit;
}
.has-title .breadcrumb__title {
  margin-right: 6px;
  margin-right: 0.375rem;
  display: inline-block;
}
.breadcrumb__title, .breadcrumb__list, .breadcrumb__list-item {
  margin: 0;
  padding: 0;
}
.breadcrumb__list {
  display: inline-block;
}
.breadcrumb__list-item {
  list-style: none;
}
.breadcrumb__list-item:before {
  font-family: inherit;
  content: "\00BB";
  display: inline-block;
  padding: 0;
  margin-right: 4px;
  margin-right: 0.25rem;
  text-align: center;
}
[dir="rtl"] .breadcrumb__list-item:before {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.fa-loaded .breadcrumb__list-item:before {
  font-family: FontAwesome, sans-serif;
  content: "";
}
[dir="rtl"] .fa-loaded .breadcrumb__list-item:before {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.breadcrumb__link {
  text-decoration: none;
}
.is-vertical .breadcrumb__title {
  display: block;
}
.is-vertical .breadcrumb__title:before, .is-vertical .breadcrumb__list-item:before {
  display: inline-block;
  text-align: left;
  margin-right: 7px;
  margin-right: 0.4375rem;
}
.is-horizontal .breadcrumb__title {
  display: inline-block;
}
.is-horizontal .breadcrumb__list-item {
  display: inline;
}
.is-horizontal .breadcrumb__list-item {
  margin-right: 6px;
  margin-right: 0.375rem;
  display: inline-block;
}
.is-horizontal .breadcrumb__list-item:first-child:before {
  display: none;
}
@media all and (max-width: 60em) {
  .no-js .breadcrumb__list-item:first-child:before {
    content: "";
  }
}
@media all and (min-width: 60.063em) {
  .no-js .breadcrumb__title, .no-js .breadcrumb__list, .no-js .breadcrumb__list-item {
    display: inline-block;
  }
  .no-js .breadcrumb__list-item:first-child:before {
    content: "";
    display: none;
  }
}

/*# sourceMappingURL=maps/breadcrumb.css.map */

File

at_theme_generator/starterkits/starterkit/styles/css/components/breadcrumb.css
View source 
  1. @charset "UTF-8";

  2. /**

  3.  * Breadcrumbs

  4.  * Breadcrumbs leverage AT's responsive lists JS feature. This sets a class if

  5.  * the list is too wide for it's container. This allows us to dynamically change

  6.  * the design of the breadcrumbs if they are too wide. We use media queries as a

  7.  * no-js fallback.

  8.  ============================================================================ */

  9. .block-breadcrumbs:not(.has-title) {

  10.   margin: 0;

  11. }

  12. 

  13. .breadcrumb {

  14.   margin: 16px 0;

  15.   margin: 1rem 0;

  16.   overflow: hidden;

  17. }

  18. .breadcrumb__title {

  19.   font-size: inherit;

  20.   line-height: inherit;

  21. }

  22. .has-title .breadcrumb__title {

  23.   margin-right: 6px;

  24.   margin-right: 0.375rem;

  25.   display: inline-block;

  26. }

  27. .breadcrumb__title, .breadcrumb__list, .breadcrumb__list-item {

  28.   margin: 0;

  29.   padding: 0;

  30. }

  31. .breadcrumb__list {

  32.   display: inline-block;

  33. }

  34. .breadcrumb__list-item {

  35.   list-style: none;

  36. }

  37. .breadcrumb__list-item:before {

  38.   font-family: inherit;

  39.   content: "\00BB";

  40.   display: inline-block;

  41.   padding: 0;

  42.   margin-right: 4px;

  43.   margin-right: 0.25rem;

  44.   text-align: center;

  45. }

  46. [dir="rtl"] .breadcrumb__list-item:before {

  47.   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";

  48.   -webkit-transform: scale(-1, 1);

  49.   -ms-transform: scale(-1, 1);

  50.   transform: scale(-1, 1);

  51. }

  52. .fa-loaded .breadcrumb__list-item:before {

  53.   font-family: FontAwesome, sans-serif;

  54.   content: "";

  55. }

  56. [dir="rtl"] .fa-loaded .breadcrumb__list-item:before {

  57.   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";

  58.   -webkit-transform: scale(-1, 1);

  59.   -ms-transform: scale(-1, 1);

  60.   transform: scale(-1, 1);

  61. }

  62. .breadcrumb__link {

  63.   text-decoration: none;

  64. }

  65. .is-vertical .breadcrumb__title {

  66.   display: block;

  67. }

  68. .is-vertical .breadcrumb__title:before, .is-vertical .breadcrumb__list-item:before {

  69.   display: inline-block;

  70.   text-align: left;

  71.   margin-right: 7px;

  72.   margin-right: 0.4375rem;

  73. }

  74. .is-horizontal .breadcrumb__title {

  75.   display: inline-block;

  76. }

  77. .is-horizontal .breadcrumb__list-item {

  78.   display: inline;

  79. }

  80. .is-horizontal .breadcrumb__list-item {

  81.   margin-right: 6px;

  82.   margin-right: 0.375rem;

  83.   display: inline-block;

  84. }

  85. .is-horizontal .breadcrumb__list-item:first-child:before {

  86.   display: none;

  87. }

  88. @media all and (max-width: 60em) {

  89.   .no-js .breadcrumb__list-item:first-child:before {

  90.     content: "";

  91.   }

  92. }

  93. @media all and (min-width: 60.063em) {

  94.   .no-js .breadcrumb__title, .no-js .breadcrumb__list, .no-js .breadcrumb__list-item {

  95.     display: inline-block;

  96.   }

  97.   .no-js .breadcrumb__list-item:first-child:before {

  98.     content: "";

  99.     display: none;

  100.   }

  101. }

  102. 

  103. /*# sourceMappingURL=maps/breadcrumb.css.map */