framework7-without-localstorage
Version:
Full featured mobile HTML framework for building iOS & Android apps
77 lines (76 loc) • 3.21 kB
text/less
/* === Icons === */
i.icon {
display: inline-block;
vertical-align: middle;
background-size: 100% auto;
background-position: center;
background-repeat: no-repeat;
font-style: normal;
position: relative;
&.icon-back {
width: 12px;
height: 20px;
.encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='@{themeColor}'/></svg>");
}
&.icon-forward {
width: 12px;
height: 20px;
.encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='@{themeColor}'/></svg>");
}
&.icon-bars {
width: 21px;
height: 14px;
.encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 14'><path fill='@{themeColor}' d='M0,0h2v2H0V0z M4,0h17v1H4V0z M0,6h2v2H0V6z M4,6h17v1H4V6z M0,12h2v2H0V12z M4,12h17v1H4V12z'/></svg>");
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2ddpx) {
.encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26'><path fill='@{themeColor}' d='M0,0h4v4H0V0z M8,1h34v2H8V1z M0,11h4v4H0V11z M8,12h34v2H8V12z M0,22h4v4H0V22z M8,23h34v2H8V23z'/></svg>");
height: 13px;
}
}
&.icon-camera {
width: 25px;
height: 20px;
.encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 25 20'><path fill='#8C8D92' d='M13.3,5.5c-2.7,0-5,2.2-5,5s2.2,5,5,5c2.7,0,5-2.2,5-5S16,5.5,13.3,5.5z'/><path fill='#8C8D92' d='M22.8,1.8h-3.3c-0.2-1.3-1-1.8-2-1.8H8.1c-1,0-1.8,0.4-2,1.8H2.8C1.4,1.8,0,2.8,0,4.2v12.6 c0,1.4,1.4,2.5,2.8,2.5h20c1.4,0,2.2-1.1,2.2-2.5V4.2C25,2.8,24.2,1.8,22.8,1.8z M3.5,6.4C2.6,6.4,2,5.8,2,5c0-0.8,0.7-1.5,1.5-1.5 S5,4.1,5,5C5,5.8,4.3,6.4,3.5,6.4z M13.3,16.8c-3.5,0-6.3-2.7-6.3-6.2c0-3.3,2.5-6.2,5.7-6.2h1.2c3.2,0,5.7,2.9,5.7,6.2 C19.6,14.1,16.7,16.8,13.3,16.8z'/></svg>");
}
&.icon-f7 {
width: 29px;
height: 29px;
background-image: url("@{imgBaseUrl}/i-f7-ios.png");
border-radius: 6px;
}
&.icon-next, &.icon-prev {
width: 15px;
height: 15px;
}
&.icon-next {
.encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='@{themeColor}' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
}
&.icon-prev {
.encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='@{themeColor}' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
}
&.icon-plus {
width: 25px;
height: 25px;
font-size: 31px;
line-height: 20px;
text-align: center;
font-weight: 100;
}
}
.framework7-icons, .f7-icons {
.navbar &, .toolbar & {
font-size: 22px;
}
.tabbar &, .tabbar-labels & {
font-size: 25px;
}
.item-media & {
font-size: 29px;
}
.button & {
font-size: 22px;
}
.item-actions & {
font-size: 23px;
vertical-align: top;
}
}