.device-android { @tabLinkColor: rgba(255,255,255,.7); @red: #f44336; --f7-navbar-shadow-image: none; --f7-radio-active-color: @themeColor; --f7-toggle-active-color: @themeColor; --f7-range-bar-active-bg-color: @themeColor; --f7-range-knob-color: @themeColor; --f7-range-knob-size: 16px; --f7-link-highlight-color: transparent; --f7-touch-ripple-color: rgba(255,255,255,0.1); --f7-input-focused-border-color: @themeColor; --f7-label-focused-text-color: @themeColor; --f7-dialog-button-text-color: @themeColor; // Buttons .segmented { .decrement, .increment { display: flex; border: none; min-width: 40px; margin-left: 0; border-radius: 0; height: 32px; } label { color: @black; margin: 0 5px; line-height: 32px; } } .button { --f7-button-text-color: @themeColor; text-align: center; display: block; border-radius: 2px; line-height: 36px; box-sizing: border-box; appearance: none; background: 0 0; margin: 0; height: 36px; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; text-transform: uppercase; font-family: inherit; cursor: pointer; min-width: 64px; padding: 0 8px; position: relative; overflow: hidden; outline: 0; border: none; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .button-fill .list-button { background-color: @themeColor; color: @white; height: 36px; text-align: center; line-height: 36px; text-transform: uppercase; font-size: 14px; font-weight: 500; border-radius: 2px; margin: 20px 16px; } .button-raised .list-button { box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); } .button-red .list-button { background-color: @red; } // Tabs .tab-buttons { position: relative; display: flex; height: 100%; width: 100%; justify-content: space-between; .tab-link { justify-content: center; height: 100%; box-sizing: border-box; padding-left: 0; padding-right: 0; font-size: 14px; font-weight: 500; text-transform: uppercase; align-items: center; color: @tabLinkColor; i.icon { opacity: 0.5; } &.tab-link-active { color: @white; i.icon { opacity: 1; } } } .tab-link-highlight { --f7-tabbar-link-active-border-color: rgba(255,255,255,0.5); position: absolute; left: 0; bottom: 0; height: 3px; } } // List .list { li.no-indicator { .item-link { .item-inner:before { content: none; } } } .item-link { .item-inner { .item-after { color: @black; } } } &.inputs-list { .item-input { .item-inner { display: block; .item-label { width: 100%; font-size: 12px; } .item-input-wrap { margin-left: 0; } } } } .buttons { box-sizing: border-box; min-height: 48px; display: flex; justify-content: space-between; align-items: center; width: 100%; .item-content { width: 100%; .item-inner { padding-bottom: 0; padding-top: 0; .row { width: 100%; .button { flex: 1; font-size: 17px; margin-left: 5px; &:first-child { margin-left: 0; } &.active { color: @white; background-color: @themeColor; i.icon { background-color: @white; } } } } } } } } // Bullets and numbers .bullets, .numbers { .page-content { background: @white; } .row { justify-content: space-around; } ul { margin-top: 10px; } li { width: 70px; height: 70px; margin-right: 1px; border: 1px solid @gray; html.pixel-ratio-2 & { border: 0.5px solid @gray; } html.pixel-ratio-3 & { border: 0.33px solid @gray; } .thumb { width: 100%; height: 100%; background-color: @white; background-size: cover; label { width: 100%; text-align: center; position: absolute; top: 34%; } } } } .popover__titled { .list:last-child { li:last-child { a { border-radius: 0; } } } } }