breadcrumbs.less 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. /* === Breadcrumbs === */
  2. @import './breadcrumbs-vars.less';
  3. .breadcrumbs {
  4. display: flex;
  5. align-items: center;
  6. justify-content: flex-start;
  7. font-size: var(--f7-breadcrumbs-font-size);
  8. overflow: auto;
  9. white-space: nowrap;
  10. padding: var(--f7-breadcrumbs-padding);
  11. &::-webkit-scrollbar {
  12. display: none;
  13. opacity: 0;
  14. }
  15. }
  16. .breadcrumbs-separator,
  17. .breadcrumbs-item,
  18. .breadcrumbs-collapsed {
  19. flex-shrink: 0;
  20. --f7-touch-ripple-color: transparent !important;
  21. & + & {
  22. margin-left: var(--f7-breadcrumbs-spacing);
  23. }
  24. }
  25. .breadcrumbs-item {
  26. color: var(--f7-breadcrumbs-item-color);
  27. font-weight: var(--f7-breadcrumbs-item-font-weight);
  28. padding: var(--f7-breadcrumbs-item-padding);
  29. background-color: var(--f7-breadcrumbs-item-bg-color);
  30. display: flex;
  31. align-items: center;
  32. .icon {
  33. font-size: var(--f7-breadcrumbs-icon-size);
  34. width: var(--f7-breadcrumbs-icon-size);
  35. height: var(--f7-breadcrumbs-icon-size);
  36. }
  37. a {
  38. color: inherit;
  39. --f7-touch-ripple-color: transparent !important;
  40. }
  41. &-active {
  42. color: var(--f7-breadcrumbs-item-active-color, var(--f7-breadcrumbs-item-color));
  43. font-weight: var(--f7-breadcrumbs-item-active-font-weight);
  44. }
  45. }
  46. .breadcrumbs-separator {
  47. color: var(--f7-breadcrumbs-separator-color);
  48. height: 24px;
  49. overflow: hidden;
  50. display: flex;
  51. align-items: center;
  52. &::after {
  53. .core-icons-font();
  54. content: var(--f7-breadcrumbs-separator-icon);
  55. width: 12px;
  56. }
  57. .ios &::after {
  58. font-size: 12px;
  59. height: 11px;
  60. }
  61. .md &::after {
  62. font-size: 18px;
  63. height: 18px;
  64. }
  65. .aurora &::after {
  66. font-size: 12px;
  67. height: 11px;
  68. }
  69. }
  70. .breadcrumbs-collapsed {
  71. display: flex;
  72. align-items: center;
  73. padding: 0 6px;
  74. background: var(--f7-breadcrumbs-collapsed-bg-color);
  75. height: 1em;
  76. border-radius: 4px;
  77. cursor: pointer;
  78. &::before,
  79. &::after,
  80. span {
  81. content: '';
  82. width: 4px;
  83. height: 4px;
  84. background: var(--f7-breadcrumbs-collapsed-color);
  85. border-radius: 50%;
  86. }
  87. span {
  88. margin: 0 3px;
  89. }
  90. }
  91. .if-ios-theme({
  92. @import './breadcrumbs-ios.less';
  93. });
  94. .if-md-theme({
  95. @import './breadcrumbs-md.less';
  96. });
  97. .if-aurora-theme({
  98. @import './breadcrumbs-aurora.less';
  99. });