framework7/components/list-index/list-index-rtl.css

Full featured mobile HTML framework for building iOS & Android apps

:root{--f7-list-index-width:16px;--f7-list-index-font-size:11px;--f7-list-index-font-weight:600;--f7-list-index-item-height:14px;--f7-list-index-label-font-weight:500}.ios{--f7-list-index-label-text-color:#fff;--f7-list-index-label-size:44px;--f7-list-index-label-font-size:17px;--f7-list-index-skip-dot-size:6px}.md{--f7-list-index-label-size:56px;--f7-list-index-label-font-size:20px;--f7-list-index-skip-dot-size:4px}.md,.md .dark,.md [class*=color-]{--f7-list-index-label-bg-color:var(--f7-md-primary);--f7-list-index-label-text-color:var(--f7-md-on-primary)}.list-index{bottom:0;cursor:pointer;left:var(--f7-safe-area-left);position:absolute;text-align:center;top:0;-webkit-user-select:none;user-select:none;width:var(--f7-list-index-width);z-index:10}.list-index:before{content:"";height:100%;position:absolute;right:100%;top:0;width:20px}.list-index ul{align-items:center;color:var(--f7-list-index-text-color,var(--f7-theme-color));display:flex;flex-direction:column;font-size:var(--f7-list-index-font-size);font-weight:var(--f7-list-index-font-weight);height:100%;justify-content:center}.list-index li,.list-index ul{flex-shrink:0;list-style:none;margin:0;padding:0;position:relative;width:100%}.list-index li{display:block;height:var(--f7-list-index-item-height);line-height:var(--f7-list-index-item-height)}.list-index .list-index-skip-placeholder:after{background:var(--f7-list-index-text-color,var(--f7-theme-color));border-radius:50%;content:"";height:var(--f7-list-index-skip-dot-size);left:50%;margin-left:calc(var(--f7-list-index-skip-dot-size)*-1/2);margin-top:calc(var(--f7-list-index-skip-dot-size)*-1/2);position:absolute;top:50%;width:var(--f7-list-index-skip-dot-size)}.list-index .list-index-label{background-color:var(--f7-list-index-label-bg-color,var(--f7-theme-color));bottom:0;color:var(--f7-list-index-label-text-color);font-size:var(--f7-list-index-label-font-size);font-weight:var(--f7-list-index-label-font-weight);height:var(--f7-list-index-label-size);line-height:var(--f7-list-index-label-size);position:absolute;right:100%;text-align:center;width:var(--f7-list-index-label-size)}.navbars~.page>.list-index,.navbar~.list-index,.navbar~.page>.list-index{top:var(--f7-navbar-height)}.ios .navbars~.toolbar-top-ios .md .navbar~.toolbar-top-md~.list-index,.ios .navbar~.toolbar-top-ios~.list-index,.navbars~.toolbar-top~.list-index,.navbar~.toolbar-top~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-toolbar-height))}.ios .navbars~.toolbar-top-ios .md .navbar~.toolbar-top-md.tabbar-icons~.list-index,.ios .navbar~.toolbar-top-ios.tabbar-icons~.list-index,.navbars~.toolbar-top.tabbar-icons~.list-index,.navbar~.toolbar-top.tabbar-icons~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-tabbar-icons-height))}.navbars~.subnavbar~.list-index,.navbar~.subnavbar~.list-index,.page-with-subnavbar .navbar~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-subnavbar-height))}.ios .toolbar-bottom-ios~* .page>.list-index,.ios .toolbar-bottom-ios~.list-index,.ios .toolbar-bottom-ios~.page>.list-index,.md .toolbar-bottom-md~* .page>.list-index,.md .toolbar-bottom-md~.list-index,.md .toolbar-bottom-md~.page>.list-index,.toolbar-bottom~* .page>.list-index,.toolbar-bottom~.list-index,.toolbar-bottom~.page>.list-index{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom))}.ios .toolbar-bottom-ios.tabbar-icons~* .page>.list-index,.ios .toolbar-bottom-ios.tabbar-icons~.list-index,.ios .toolbar-bottom-ios.tabbar-icons~.page>.list-index,.md .toolbar-bottom-md.tabbar-icons~* .page>.list-index,.md .toolbar-bottom-md.tabbar-icons~.list-index,.md .toolbar-bottom-md.tabbar-icons~.page>.list-index,.toolbar-bottom.tabbar-icons~* .page>.list-index,.toolbar-bottom.tabbar-icons~.list-index,.toolbar-bottom.tabbar-icons~.page>.list-index{bottom:calc(var(--f7-tabbar-icons-height) + var(--f7-safe-area-bottom))}.ios .list-index .list-index-label{border-radius:50%;margin-bottom:calc(var(--f7-list-index-label-size)*-1/2);margin-right:calc(var(--f7-list-index-width) - 1px)}.ios .list-index .list-index-label:before{background-color:inherit;border-radius:50% 0 50% 50%;content:"";height:100%;left:0;position:absolute;top:0;transform:rotate(45deg);width:100%;z-index:-1}.md .list-index .list-index-label{border-radius:50% 50% 0 50%}