You are here

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. .breadcrumb {
  13. margin: 16px 0;
  14. margin: 1rem 0;
  15. overflow: hidden;
  16. }
  17. .breadcrumb__title {
  18. font-size: inherit;
  19. line-height: inherit;
  20. }
  21. .has-title .breadcrumb__title {
  22. margin-right: 6px;
  23. margin-right: 0.375rem;
  24. display: inline-block;
  25. }
  26. .breadcrumb__title, .breadcrumb__list, .breadcrumb__list-item {
  27. margin: 0;
  28. padding: 0;
  29. }
  30. .breadcrumb__list {
  31. display: inline-block;
  32. }
  33. .breadcrumb__list-item {
  34. list-style: none;
  35. }
  36. .breadcrumb__list-item:before {
  37. font-family: inherit;
  38. content: "\00BB";
  39. display: inline-block;
  40. padding: 0;
  41. margin-right: 4px;
  42. margin-right: 0.25rem;
  43. text-align: center;
  44. }
  45. [dir="rtl"] .breadcrumb__list-item:before {
  46. -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  47. -webkit-transform: scale(-1, 1);
  48. -ms-transform: scale(-1, 1);
  49. transform: scale(-1, 1);
  50. }
  51. .fa-loaded .breadcrumb__list-item:before {
  52. font-family: FontAwesome, sans-serif;
  53. content: "";
  54. }
  55. [dir="rtl"] .fa-loaded .breadcrumb__list-item:before {
  56. -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  57. -webkit-transform: scale(-1, 1);
  58. -ms-transform: scale(-1, 1);
  59. transform: scale(-1, 1);
  60. }
  61. .breadcrumb__link {
  62. text-decoration: none;
  63. }
  64. .is-vertical .breadcrumb__title {
  65. display: block;
  66. }
  67. .is-vertical .breadcrumb__title:before, .is-vertical .breadcrumb__list-item:before {
  68. display: inline-block;
  69. text-align: left;
  70. margin-right: 7px;
  71. margin-right: 0.4375rem;
  72. }
  73. .is-horizontal .breadcrumb__title {
  74. display: inline-block;
  75. }
  76. .is-horizontal .breadcrumb__list-item {
  77. display: inline;
  78. }
  79. .is-horizontal .breadcrumb__list-item {
  80. margin-right: 6px;
  81. margin-right: 0.375rem;
  82. display: inline-block;
  83. }
  84. .is-horizontal .breadcrumb__list-item:first-child:before {
  85. display: none;
  86. }
  87. @media all and (max-width: 60em) {
  88. .no-js .breadcrumb__list-item:first-child:before {
  89. content: "";
  90. }
  91. }
  92. @media all and (min-width: 60.063em) {
  93. .no-js .breadcrumb__title, .no-js .breadcrumb__list, .no-js .breadcrumb__list-item {
  94. display: inline-block;
  95. }
  96. .no-js .breadcrumb__list-item:first-child:before {
  97. content: "";
  98. display: none;
  99. }
  100. }
  101. /*# sourceMappingURL=maps/breadcrumb.css.map */