136 lines
2.4 KiB
SCSS
136 lines
2.4 KiB
SCSS
@mixin icon-style(
|
|
$icon-name,
|
|
$width: 20px,
|
|
$height: 20px,
|
|
$size: 100% 100%,
|
|
$position: center center,
|
|
$img-type: 'png'
|
|
) {
|
|
background-image: url('@/assets/img/icon/#{$icon-name}.#{$img-type}') !important;
|
|
background-repeat: no-repeat !important;
|
|
background-size: $size !important;
|
|
background-position: $position !important;
|
|
width: $width !important;
|
|
height: $height !important;
|
|
|
|
&:hover {
|
|
background-image: url('@/assets/img/icon/#{$icon-name}_hover.#{$img-type}') !important;
|
|
}
|
|
&:active {
|
|
background-image: url('@/assets/img/icon/#{$icon-name}_active.#{$img-type}') !important;
|
|
height: $height - 2px !important;
|
|
}
|
|
&:disabled {
|
|
background-image: url('@/assets/img/icon/#{$icon-name}_disabled.#{$img-type}') !important;
|
|
}
|
|
}
|
|
|
|
.icon-reset {
|
|
@include icon-style('reset');
|
|
}
|
|
|
|
.icon-set {
|
|
@include icon-style('set');
|
|
}
|
|
|
|
.icon-prev {
|
|
@include icon-style('prev', 16px, 16px);
|
|
}
|
|
|
|
.icon-next {
|
|
@include icon-style('next', 16px, 16px);
|
|
}
|
|
|
|
.icon-dropdown {
|
|
@include icon-style('dropdown', 16px, 16px);
|
|
}
|
|
|
|
.icon-search {
|
|
@include icon-style('search');
|
|
}
|
|
|
|
.icon-increase {
|
|
@include icon-style('increase');
|
|
}
|
|
|
|
.icon-reduce {
|
|
@include icon-style('reduce');
|
|
}
|
|
|
|
.icon-plus {
|
|
@include icon-style('plus');
|
|
}
|
|
|
|
.icon-detail {
|
|
@include icon-style('detail');
|
|
}
|
|
|
|
.icon-home {
|
|
@include icon-style('home');
|
|
}
|
|
|
|
.icon-reflesh {
|
|
@include icon-style('reflesh');
|
|
}
|
|
|
|
.icon-update {
|
|
@include icon-style('update');
|
|
}
|
|
|
|
.icon-share {
|
|
@include icon-style('share');
|
|
}
|
|
|
|
.icon-import {
|
|
@include icon-style('import');
|
|
}
|
|
|
|
.icon-menu-drug {
|
|
@include icon-style('menu/drug', 20px, 20px, auto 100%);
|
|
}
|
|
|
|
.icon-menu-specificity {
|
|
@include icon-style('menu/specificity', 20px, 20px, auto 100%);
|
|
}
|
|
|
|
.icon-menu-favourite {
|
|
@include icon-style('menu/favourite', 20px, 20px, auto 100%);
|
|
}
|
|
|
|
.icon-menu-recommend {
|
|
@include icon-style('menu/recommend', 20px, 20px, auto 100%);
|
|
}
|
|
|
|
.icon-menu-set {
|
|
@include icon-style('menu/set', 20px, 20px, auto 100%);
|
|
}
|
|
|
|
.icon-max {
|
|
@include icon-style('max');
|
|
}
|
|
|
|
.icon-min {
|
|
@include icon-style('min');
|
|
}
|
|
|
|
.icon-exchange {
|
|
@include icon-style('exchange', 22px, 20px, auto 100%, center center, svg);
|
|
}
|
|
|
|
|
|
.icon-increase-little {
|
|
@include icon-style('increase', 16px, 16px);
|
|
}
|
|
|
|
.icon-reduce-little {
|
|
@include icon-style('reduce', 16px, 16px);
|
|
}
|
|
|
|
.icon-max-little {
|
|
@include icon-style('max', 16px, 16px);
|
|
}
|
|
|
|
.icon-min-little {
|
|
@include icon-style('min', 16px, 16px);
|
|
}
|