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

Full featured mobile HTML framework for building iOS & Android apps

.list-index{position:absolute;top:0;bottom:0;right:0;text-align:center;z-index:10;width:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.list-index:before{content:'';position:absolute;width:20px;top:0;right:100%;height:100%}.list-index ul{font-size:11px;font-weight:600;list-style:none;margin:0;padding:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;width:100%;position:relative}.list-index li{margin:0;padding:0;list-style:none;position:relative;height:14px;line-height:14px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:block;width:100%}.list-index .list-index-skip-placeholder:after{content:'';position:absolute;left:50%;top:50%;border-radius:50%}.list-index .list-index-label{position:absolute;bottom:0;right:100%;text-align:center;border-radius:50%;color:#fff;font-weight:500}.ios .list-index ul{color:#007aff}.ios .list-index .list-index-skip-placeholder:after{content:'';width:6px;height:6px;margin-left:-3px;margin-top:-3px;background:#007aff}.ios .list-index .list-index-label{margin-bottom:-22px;margin-right:15px;width:44px;height:44px;line-height:44px;border-radius:50%;background:#007aff;font-size:17px}.ios .list-index .list-index-label:before{position:absolute;width:100%;height:100%;border-radius:50% 0% 50% 50%;content:'';background-color:inherit;left:0;top:0;-webkit-transform:rotate(45deg);transform:rotate(45deg);z-index:-1}.ios .navbar~.list-index,.ios .navbar~.page>.list-index{top:44px}.ios .toolbar~* .page>.list-index,.ios .toolbar~.list-index,.ios .toolbar~.page>.list-index{bottom:44px}.ios .tabbar-labels~* .page>.list-index,.ios .tabbar-labels~.list-index,.ios .tabbar-labels~.page>.list-index{bottom:50px}@media (min-width:768px){.ios .tabbar-labels~* .page>.list-index,.ios .tabbar-labels~.list-index,.ios .tabbar-labels~.page>.list-index{bottom:56px}}.ios.device-iphone-x .toolbar~* .page>.list-index,.ios.device-iphone-x .toolbar~.list-index,.ios.device-iphone-x .toolbar~.page>.list-index{bottom:calc(44px + constant(safe-area-inset-bottom));bottom:calc(44px + env(safe-area-inset-bottom))}.ios.device-iphone-x .tabbar-labels~* .page>.list-index,.ios.device-iphone-x .tabbar-labels~.list-index,.ios.device-iphone-x .tabbar-labels~.page>.list-index{bottom:calc(50px + constant(safe-area-inset-bottom));bottom:calc(50px + env(safe-area-inset-bottom))}@media (min-width:768px){.ios.device-iphone-x .tabbar-labels~* .page>.list-index,.ios.device-iphone-x .tabbar-labels~.list-index,.ios.device-iphone-x .tabbar-labels~.page>.list-index{bottom:calc(56px + constant(safe-area-inset-bottom));bottom:calc(56px + env(safe-area-inset-bottom))}}.ios .color-theme-red .list-index ul,.ios .list-index.color-theme-red ul{color:#ff3b30}.ios .color-theme-red .list-index .list-index-label,.ios .color-theme-red .list-index .list-index-skip-placeholder:after,.ios .list-index.color-theme-red .list-index-label,.ios .list-index.color-theme-red .list-index-skip-placeholder:after{background-color:#ff3b30}.ios .color-theme-green .list-index ul,.ios .list-index.color-theme-green ul{color:#4cd964}.ios .color-theme-green .list-index .list-index-label,.ios .color-theme-green .list-index .list-index-skip-placeholder:after,.ios .list-index.color-theme-green .list-index-label,.ios .list-index.color-theme-green .list-index-skip-placeholder:after{background-color:#4cd964}.ios .color-theme-blue .list-index ul,.ios .list-index.color-theme-blue ul{color:#007aff}.ios .color-theme-blue .list-index .list-index-label,.ios .color-theme-blue .list-index .list-index-skip-placeholder:after,.ios .list-index.color-theme-blue .list-index-label,.ios .list-index.color-theme-blue .list-index-skip-placeholder:after{background-color:#007aff}.ios .color-theme-pink .list-index ul,.ios .list-index.color-theme-pink ul{color:#ff2d55}.ios .color-theme-pink .list-index .list-index-label,.ios .color-theme-pink .list-index .list-index-skip-placeholder:after,.ios .list-index.color-theme-pink .list-index-label,.ios .list-index.color-theme-pink .list-index-skip-placeholder:after{background-color:#ff2d55}.ios .color-theme-yellow .list-index ul,.ios .list-index.color-theme-yellow ul{color:#fc0}.ios .color-theme-yellow .list-index .list-index-label,.ios .color-theme-yellow .list-index .list-index-skip-placeholder:after,.ios .list-index.color-theme-yellow .list-index-label,.ios .list-index.color-theme-yellow .list-index-skip-placeholder:after{background-color:#fc0}.ios .color-theme-orange .list-index ul,.ios .list-index.color-theme-orange ul{color:#ff9500}.ios .color-theme-orange .list-index .list-index-label,.ios .color-theme-orange .list-index .list-index-skip-placeholder:after,.ios .list-index.color-theme-orange .list-index-label,.ios .list-index.color-theme-orange .list-index-skip-placeholder:after{background-color:#ff9500}.ios .color-theme-gray .list-index ul,.ios .list-index.color-theme-gray ul{color:#8e8e93}.ios .color-theme-gray .list-index .list-index-label,.ios .color-theme-gray .list-index .list-index-skip-placeholder:after,.ios .list-index.color-theme-gray .list-index-label,.ios .list-index.color-theme-gray .list-index-skip-placeholder:after{background-color:#8e8e93}.ios .color-theme-white .list-index ul,.ios .list-index.color-theme-white ul{color:#fff}.ios .color-theme-white .list-index .list-index-label,.ios .color-theme-white .list-index .list-index-skip-placeholder:after,.ios .list-index.color-theme-white .list-index-label,.ios .list-index.color-theme-white .list-index-skip-placeholder:after{background-color:#fff}.ios .color-theme-black .list-index ul,.ios .list-index.color-theme-black ul{color:#000}.ios .color-theme-black .list-index .list-index-label,.ios .color-theme-black .list-index .list-index-skip-placeholder:after,.ios .list-index.color-theme-black .list-index-label,.ios .list-index.color-theme-black .list-index-skip-placeholder:after{background-color:#000}.ios .list-index.color-red ul{color:#ff3b30}.ios .list-index.color-red .list-index-label,.ios .list-index.color-red .list-index-skip-placeholder:after{background-color:#ff3b30}.ios .list-index.color-green ul{color:#4cd964}.ios .list-index.color-green .list-index-label,.ios .list-index.color-green .list-index-skip-placeholder:after{background-color:#4cd964}.ios .list-index.color-blue ul{color:#007aff}.ios .list-index.color-blue .list-index-label,.ios .list-index.color-blue .list-index-skip-placeholder:after{background-color:#007aff}.ios .list-index.color-pink ul{color:#ff2d55}.ios .list-index.color-pink .list-index-label,.ios .list-index.color-pink .list-index-skip-placeholder:after{background-color:#ff2d55}.ios .list-index.color-yellow ul{color:#fc0}.ios .list-index.color-yellow .list-index-label,.ios .list-index.color-yellow .list-index-skip-placeholder:after{background-color:#fc0}.ios .list-index.color-orange ul{color:#ff9500}.ios .list-index.color-orange .list-index-label,.ios .list-index.color-orange .list-index-skip-placeholder:after{background-color:#ff9500}.ios .list-index.color-gray ul{color:#8e8e93}.ios .list-index.color-gray .list-index-label,.ios .list-index.color-gray .list-index-skip-placeholder:after{background-color:#8e8e93}.ios .list-index.color-white ul{color:#fff}.ios .list-index.color-white .list-index-label,.ios .list-index.color-white .list-index-skip-placeholder:after{background-color:#fff}.ios .list-index.color-black ul{color:#000}.ios .list-index.color-black .list-index-label,.ios .list-index.color-black .list-index-skip-placeholder:after{background-color:#000}.md .list-index ul{color:#2196f3}.md .list-index .list-index-skip-placeholder:after{content:'';width:4px;height:4px;margin-left:-2px;margin-top:-2px;background:#2196f3}.md .list-index .list-index-label{width:56px;height:56px;line-height:56px;border-radius:50% 50% 0 50%;background:#2196f3;font-size:20px}.md .navbar~.list-index{top:56px}@media (min-width:768px){.md .navbar~.list-index{top:64px}}.md .navbar~.subnavbar~.list-index,.md .navbar~.toolbar:not(.toolbar-bottom-md)~.list-index,.md .page-with-subnavbar .navbar~.list-index{top:104px}.md .navbar~.tabbar-labels:not(.toolbar-bottom-md)~.list-index{top:128px}.md .toolbar-bottom-md~* .page>.list-index,.md .toolbar-bottom-md~.page>.list-index{bottom:48px}.md .tabbar-labels.toolbar-bottom-md~* .page>.list-index,.md .tabbar-labels.toolbar-bottom-md~.list-index,.md .tabbar-labels.toolbar-bottom-md~.page>.list-index{bottom:56px}.md.device-iphone-x .toolbar-bottom-md~* .page>.list-index,.md.device-iphone-x .toolbar-bottom-md~.page>.list-index{bottom:calc(48px + constant(safe-area-inset-bottom));bottom:calc(48px + env(safe-area-inset-bottom))}.md.device-iphone-x .tabbar-labels.toolbar-bottom-md~* .page>.list-index,.md.device-iphone-x .tabbar-labels.toolbar-bottom-md~.list-index,.md.device-iphone-x .tabbar-labels.toolbar-bottom-md~.page>.list-index{bottom:calc(56px + constant(safe-area-inset-bottom));bottom:calc(56px + env(safe-area-inset-bottom))}.md .color-theme-red .list-index ul,.md .list-index.color-theme-red ul{color:#f44336}.md .color-theme-red .list-index .list-index-label,.md .color-theme-red .list-index .list-index-skip-placeholder:after,.md .list-index.color-theme-red .list-index-label,.md .list-index.color-theme-red .list-index-skip-placeholder:after{background-color:#f44336}.md .color-theme-green .list-index ul,.md .list-index.color-theme-green ul{color:#4caf50}.md .color-theme-green .list-index .list-index-label,.md .color-theme-green .list-index .list-index-skip-placeholder:after,.md .list-index.color-theme-green .list-index-label,.md .list-index.color-theme-green .list-index-skip-placeholder:after{background-color:#4caf50}.md .color-theme-blue .list-index ul,.md .list-index.color-theme-blue ul{color:#2196f3}.md .color-theme-blue .list-index .list-index-label,.md .color-theme-blue .list-index .list-index-skip-placeholder:after,.md .list-index.color-theme-blue .list-index-label,.md .list-index.color-theme-blue .list-index-skip-placeholder:after{background-color:#2196f3}.md .color-theme-pink .list-index ul,.md .list-index.color-theme-pink ul{color:#e91e63}.md .color-theme-pink .list-index .list-index-label,.md .color-theme-pink .list-index .list-index-skip-placeholder:after,.md .list-index.color-theme-pink .list-index-label,.md .list-index.color-theme-pink .list-index-skip-placeholder:after{background-color:#e91e63}.md .color-theme-yellow .list-index ul,.md .list-index.color-theme-yellow ul{color:#ffeb3b}.md .color-theme-yellow .list-index .list-index-label,.md .color-theme-yellow .list-index .list-index-skip-placeholder:after,.md .list-index.color-theme-yellow .list-index-label,.md .list-index.color-theme-yellow .list-index-skip-placeholder:after{background-color:#ffeb3b}.md .color-theme-orange .list-index ul,.md .list-index.color-theme-orange ul{color:#ff9800}.md .color-theme-orange .list-index .list-index-label,.md .color-theme-orange .list-index .list-index-skip-placeholder:after,.md .list-index.color-theme-orange .list-index-label,.md .list-index.color-theme-orange .list-index-skip-placeholder:after{background-color:#ff9800}.md .color-theme-gray .list-index ul,.md .list-index.color-theme-gray ul{color:#9e9e9e}.md .color-theme-gray .list-index .list-index-label,.md .color-theme-gray .list-index .list-index-skip-placeholder:after,.md .list-index.color-theme-gray .list-index-label,.md .list-index.color-theme-gray .list-index-skip-placeholder:after{background-color:#9e9e9e}.md .color-theme-white .list-index ul,.md .list-index.color-theme-white ul{color:#fff}.md .color-theme-white .list-index .list-index-label,.md .color-theme-white .list-index .list-index-skip-placeholder:after,.md .list-index.color-theme-white .list-index-label,.md .list-index.color-theme-white .list-index-skip-placeholder:after{background-color:#fff}.md .color-theme-black .list-index ul,.md .list-index.color-theme-black ul{color:#000}.md .color-theme-black .list-index .list-index-label,.md .color-theme-black .list-index .list-index-skip-placeholder:after,.md .list-index.color-theme-black .list-index-label,.md .list-index.color-theme-black .list-index-skip-placeholder:after{background-color:#000}.md .list-index.color-red ul{color:#f44336}.md .list-index.color-red .list-index-label,.md .list-index.color-red .list-index-skip-placeholder:after{background-color:#f44336}.md .list-index.color-green ul{color:#4caf50}.md .list-index.color-green .list-index-label,.md .list-index.color-green .list-index-skip-placeholder:after{background-color:#4caf50}.md .list-index.color-blue ul{color:#2196f3}.md .list-index.color-blue .list-index-label,.md .list-index.color-blue .list-index-skip-placeholder:after{background-color:#2196f3}.md .list-index.color-pink ul{color:#e91e63}.md .list-index.color-pink .list-index-label,.md .list-index.color-pink .list-index-skip-placeholder:after{background-color:#e91e63}.md .list-index.color-yellow ul{color:#ffeb3b}.md .list-index.color-yellow .list-index-label,.md .list-index.color-yellow .list-index-skip-placeholder:after{background-color:#ffeb3b}.md .list-index.color-orange ul{color:#ff9800}.md .list-index.color-orange .list-index-label,.md .list-index.color-orange .list-index-skip-placeholder:after{background-color:#ff9800}.md .list-index.color-gray ul{color:#9e9e9e}.md .list-index.color-gray .list-index-label,.md .list-index.color-gray .list-index-skip-placeholder:after{background-color:#9e9e9e}.md .list-index.color-white ul{color:#fff}.md .list-index.color-white .list-index-label,.md .list-index.color-white .list-index-skip-placeholder:after{background-color:#fff}.md .list-index.color-black ul{color:#000}.md .list-index.color-black .list-index-label,.md .list-index.color-black .list-index-skip-placeholder:after{background-color:#000}