framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
1 lines • 4.68 kB
CSS
:root{--f7-breadcrumbs-spacing:12px;--f7-breadcrumbs-padding:2px 0;--f7-breadcrumbs-icon-size:24px;--f7-breadcrumbs-separator-color:rgba(0, 0, 0, 0.35)}:root .dark,:root.dark{--f7-breadcrumbs-separator-color:rgba(255, 255, 255, 0.35)}.ios{--f7-breadcrumbs-item-bg-color:transparent;--f7-breadcrumbs-collapsed-border-radius:4px;--f7-breadcrumbs-collapsed-padding:0px 6px;--f7-breadcrumbs-separator-icon:'chevron_right_ios';--f7-breadcrumbs-font-size:17px;--f7-breadcrumbs-item-border-radius:0px;--f7-breadcrumbs-item-padding:0px;--f7-breadcrumbs-item-font-weight:normal;--f7-breadcrumbs-item-active-font-weight:600;--f7-breadcrumbs-item-color:rgba(0, 0, 0, 0.55);--f7-breadcrumbs-item-active-color:#000;--f7-breadcrumbs-collapsed-bg-color:rgba(0, 0, 0, 0.15);--f7-breadcrumbs-collapsed-color:rgba(0, 0, 0, 0.75)}.ios .dark,.ios.dark{--f7-breadcrumbs-item-color:rgba(255, 255, 255, 0.75);--f7-breadcrumbs-item-active-color:#fff;--f7-breadcrumbs-collapsed-bg-color:rgba(255, 255, 255, 0.15);--f7-breadcrumbs-collapsed-color:rgba(255, 255, 255, 0.75)}.md{--f7-breadcrumbs-collapsed-border-radius:8px;--f7-breadcrumbs-collapsed-padding:12px 8px;--f7-breadcrumbs-separator-icon:'chevron_right_md';--f7-breadcrumbs-font-size:14px;--f7-breadcrumbs-item-border-radius:8px;--f7-breadcrumbs-item-padding:4px 8px;--f7-breadcrumbs-item-font-weight:500;--f7-breadcrumbs-item-active-font-weight:500}.md,.md .dark,.md [class*=color-]{--f7-breadcrumbs-item-color:var(--f7-theme-color);--f7-breadcrumbs-item-bg-color:var(--f7-md-secondary-container);--f7-breadcrumbs-item-active-color:var(--f7-md-on-secondary-container);--f7-breadcrumbs-collapsed-color:var(--f7-theme-color);--f7-breadcrumbs-collapsed-bg-color:var(--f7-md-secondary-container)}.breadcrumbs{display:flex;align-items:center;justify-content:flex-start;font-size:var(--f7-breadcrumbs-font-size);overflow:auto;white-space:nowrap;padding:var(--f7-breadcrumbs-padding);scrollbar-width:none;scrollbar-color:transparent}.breadcrumbs::-webkit-scrollbar{-webkit-appearance:none;appearance:none;width:0px;display:none;opacity:0;background:0 0}.breadcrumbs::-webkit-scrollbar-track{box-shadow:none;background:0 0}.breadcrumbs::-webkit-scrollbar-thumb{background-color:transparent;outline:0;border-radius:9999px;position:relative}.breadcrumbs-collapsed,.breadcrumbs-item,.breadcrumbs-separator{flex-shrink:0;--f7-touch-ripple-color:transparent}.breadcrumbs-collapsed+.breadcrumbs-collapsed,.breadcrumbs-collapsed+.breadcrumbs-item,.breadcrumbs-collapsed+.breadcrumbs-separator,.breadcrumbs-item+.breadcrumbs-collapsed,.breadcrumbs-item+.breadcrumbs-item,.breadcrumbs-item+.breadcrumbs-separator,.breadcrumbs-separator+.breadcrumbs-collapsed,.breadcrumbs-separator+.breadcrumbs-item,.breadcrumbs-separator+.breadcrumbs-separator{margin-left:var(--f7-breadcrumbs-spacing)}.breadcrumbs-item{color:var(--f7-breadcrumbs-item-color);font-weight:var(--f7-breadcrumbs-item-font-weight);padding:var(--f7-breadcrumbs-item-padding);background-color:var(--f7-breadcrumbs-item-bg-color);display:flex;align-items:center;border-radius:var(--f7-breadcrumbs-item-border-radius)}.breadcrumbs-item .icon{font-size:var(--f7-breadcrumbs-icon-size);width:var(--f7-breadcrumbs-icon-size);height:var(--f7-breadcrumbs-icon-size)}.breadcrumbs-item a{color:inherit;--f7-touch-ripple-color:transparent}.breadcrumbs-item-active{color:var(--f7-breadcrumbs-item-active-color,var(--f7-breadcrumbs-item-color));font-weight:var(--f7-breadcrumbs-item-active-font-weight)}.breadcrumbs-separator{color:var(--f7-breadcrumbs-separator-color);height:24px;overflow:hidden;display:flex;align-items:center}.breadcrumbs-separator::after{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;content:var(--f7-breadcrumbs-separator-icon);width:12px}.ios .breadcrumbs-separator::after{font-size:12px;height:11px}.md .breadcrumbs-separator::after{font-size:18px;height:18px}.breadcrumbs-collapsed{display:flex;align-items:center;padding:var(--f7-breadcrumbs-collapsed-padding);background:var(--f7-breadcrumbs-collapsed-bg-color);min-height:1em;border-radius:var(--f7-breadcrumbs-collapsed-border-radius);cursor:pointer}.breadcrumbs-collapsed span,.breadcrumbs-collapsed::after,.breadcrumbs-collapsed::before{content:'';width:4px;height:4px;background:var(--f7-breadcrumbs-collapsed-color);border-radius:50%}.breadcrumbs-collapsed span{margin:0 3px}