@pi0/framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
87 lines (86 loc) • 5.02 kB
text/less
.md {
@import (multiple) '../../less/colors-md.less';
.icon-back {
width: 24px;
height: 24px;
}
.icon-forward {
width: 24px;
height: 24px;
}
.icon-next, .icon-prev {
width: 24px;
height: 24px;
}
.list .icon {
color: #737373;
}
.list .material-icons {
font-size: 24px;
width: 24px;
height: 24px;
}
.ltr({
.icon-back {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z' fill='#ffffff'/></svg>");
}
.icon-forward {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z' fill='#ffffff'/></svg>");
}
.icon-next {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='#ffffff' width='24' height='24' viewBox='0 0 24 24'><path d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}
.icon-prev {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='#ffffff' width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}
});
.rtl({
.icon-forward {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z' fill='#ffffff'/></svg>");
}
.icon-back {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z' fill='#ffffff'/></svg>");
}
.icon-prev {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='#ffffff' width='24' height='24' viewBox='0 0 24 24'><path d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}
.icon-next {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='#ffffff' width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}
});
.color-theme-loop({
.ltr({
.icon-back.color-@{colorThemeName}, a.link .color-@{colorThemeName} .icon-back {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z' fill='@{colorThemeValue}'/></svg>");
}
.icon-forward.color-@{colorThemeName}, a.link .color-@{colorThemeName} .icon-forward {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z' fill='@{colorThemeValue}'/></svg>");
}
.icon-next.color-@{colorThemeName}, a.link .color-@{colorThemeName} .icon-next {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='@{colorThemeValue}' width='24' height='24' viewBox='0 0 24 24'><path d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}
.icon-prev.color-@{colorThemeName}, a.link .color-@{colorThemeName} .icon-prev {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='@{colorThemeValue}' width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}
});
.rtl({
.icon-forward.color-@{colorThemeName}, a.link .color-@{colorThemeName} .icon-forward {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z' fill='@{colorThemeValue}'/></svg>");
}
.icon-back.color-@{colorThemeName}, a.link .color-@{colorThemeName} .icon-back {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z' fill='@{colorThemeValue}'/></svg>");
}
.icon-prev.color-@{colorThemeName}, a.link .color-@{colorThemeName} .icon-prev {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='@{colorThemeValue}' width='24' height='24' viewBox='0 0 24 24'><path d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}
.icon-next.color-@{colorThemeName}, a.link .color-@{colorThemeName} .icon-next {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='@{colorThemeValue}' width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}
});
});
.color-loop({
.icon.color-@{colorName} {
color: @colorValue;
}
});
}