mirror of https://github.com/ElemeFE/element
update rate
Leopoldthecoder
parent
05e7ea8311
commit
33b54f4436
|
|
@ -4,6 +4,7 @@
|
|||
@import '../node_modules/purecss/build/menus.css';
|
||||
@import '../node_modules/highlight.js/styles/color-brewer.css';
|
||||
@import 'assets/styles/common.css';
|
||||
@import 'assets/styles/fonts/style.css';
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="icomoon" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||
<glyph unicode="" glyph-name="rate-face-off" d="M0 448c0 282.766 229.234 512 512 512s512-229.234 512-512c0-282.766-229.234-512-512-512s-512 229.234-512 512zM947.2 448c0 240.351-194.849 435.2-435.2 435.2s-435.2-194.849-435.2-435.2c0-240.351 194.849-435.2 435.2-435.2s435.2 194.849 435.2 435.2zM294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM361.143 281.6c-22.711 0-41.143-18.637-41.143-41.6s18.432-41.6 41.143-41.6h301.714c22.711 0 41.143 18.637 41.143 41.6s-18.432 41.6-41.143 41.6h-301.714z" />
|
||||
<glyph unicode="" glyph-name="rate-face-1" d="M512.001 960c-282.771 0-512.001-229.23-512.001-512.002 0-282.77 229.23-511.998 512.001-511.998 282.769 0 511.999 229.227 511.999 511.998s-229.23 512.002-511.999 512.002zM294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM694.529 181.197l-3.422 1.216c-56.15 27.872-116.388 42.047-178.882 42.047-64.556 0-125.611-14.316-181.515-42.45l-3.382-1.132c-2.102-0.628-4.945-1.529-8.489-1.529-20.554 0-37.239 18.29-37.239 40.734 0 10.655 4.571 21.361 12.114 29.399l-0.456 2.483 9.516 4.698c66.74 33.104 139.336 50.537 209.907 50.537 71.889 0 142.336-16.984 210.314-50.948 11.943-7.181 19.405-20.953 19.405-35.903 0-26.328-21.71-47.958-47.871-39.153z" />
|
||||
<glyph unicode="" glyph-name="rate-face-2" d="M512-64c-282.766 0-512 229.234-512 512s229.234 512 512 512c282.766 0 512-229.234 512-512s-229.234-512-512-512zM294.4 588.853v-51.307c0-28.482 22.923-51.147 51.2-51.147 28.474 0 51.2 22.899 51.2 51.147v51.307c0 28.482-22.923 51.147-51.2 51.147-28.474 0-51.2-22.899-51.2-51.147zM627.2 588.853v-51.307c0-28.482 22.923-51.147 51.2-51.147 28.474 0 51.2 22.899 51.2 51.147v51.307c0 28.482-22.923 51.147-51.2 51.147-28.474 0-51.2-22.899-51.2-51.147zM361.143 281.6c-22.711 0-41.143-18.637-41.143-41.6s18.432-41.6 41.143-41.6h301.714c22.711 0 41.143 18.637 41.143 41.6s-18.432 41.6-41.143 41.6h-301.714z" />
|
||||
<glyph unicode="" glyph-name="rate-face-3" d="M512.001 960c-282.77 0-512.001-229.23-512.001-511.999s229.23-512.001 512.001-512.001c282.77 0 511.999 229.23 511.999 511.999s-229.229 512.001-511.999 512.001zM817.495 305.565c-0.445-1.485-0.963-2.939-1.569-4.35-0.676-1.572-1.455-3.089-2.317-4.556-55.631-107.613-169.518-181.459-301.323-181.459-0.096 0-0.19 0.002-0.286 0.002s-0.19-0.002-0.286-0.002c-131.804 0-245.693 73.845-301.323 181.459-0.862 1.467-1.641 2.984-2.317 4.556-0.606 1.41-1.124 2.865-1.569 4.35-1.103 3.68-1.705 7.569-1.705 11.597 0 6.566 1.579 12.771 4.372 18.282 6.897 13.601 21.239 22.955 37.822 22.955s30.927-9.355 37.823-22.955h0.676c41.411-81.453 127.131-137.544 226.507-137.652 99.375 0.108 185.095 56.2 226.507 137.652h0.676c6.897 13.601 21.239 22.955 37.823 22.955s30.927-9.355 37.822-22.955c2.794-5.511 4.372-11.715 4.372-18.282 0-4.029-0.602-7.918-1.705-11.597zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307z" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,39 @@
|
|||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('assets/styles/fonts/icomoon.eot?h6xgdm');
|
||||
src: url('assets/styles/fonts/icomoon.eot?h6xgdm#iefix') format('embedded-opentype'),
|
||||
url('assets/styles/fonts/icomoon.ttf?h6xgdm') format('truetype'),
|
||||
url('assets/styles/fonts/icomoon.woff?h6xgdm') format('woff'),
|
||||
url('assets/styles/fonts/icomoon.svg?h6xgdm#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-rate-face-off:before {
|
||||
content: "\e900";
|
||||
}
|
||||
.icon-rate-face-1:before {
|
||||
content: "\e901";
|
||||
}
|
||||
.icon-rate-face-2:before {
|
||||
content: "\e902";
|
||||
}
|
||||
.icon-rate-face-3:before {
|
||||
content: "\e903";
|
||||
}
|
||||
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
value2: null,
|
||||
value3: null,
|
||||
value4: null,
|
||||
value5: 3.6
|
||||
value5: 3.7
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -31,11 +31,11 @@
|
|||
利用颜色对分数及情感倾向进行分级。分数可以被分为三个等级，对应的两个阈值可分别通过 `low-threshold` 和 `high-threshold` 设定。
|
||||
|
||||
<div class="demo-box demo-rate">
|
||||
<el-rate v-model="value2" multi-color></el-rate>
|
||||
<el-rate v-model="value2" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
|
||||
</div>
|
||||
|
||||
``` html
|
||||
<el-rate v-model="value2" multi-color></el-rate>
|
||||
<el-rate v-model="value2" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
|
||||
```
|
||||
|
||||
## 辅助文字
|
||||
|
|
@ -53,34 +53,45 @@
|
|||
## 其他 icon
|
||||
|
||||
<div class="demo-box demo-rate">
|
||||
<el-rate v-model="value4" smiley></el-rate>
|
||||
<el-rate v-model="value4" :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']" void-icon-class="icon-rate-face-off" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
|
||||
</div>
|
||||
|
||||
``` html
|
||||
<el-rate v-model="value4" smiley></el-rate>
|
||||
<el-rate
|
||||
v-model="value4"
|
||||
:icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
|
||||
void-icon-class="icon-rate-face-off"
|
||||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
||||
</el-rate>
|
||||
```
|
||||
|
||||
## 只读
|
||||
为组件设置 `disabled` 属性表示组件为只读，支持小数分值。此时若设置 `show-text`，则会在右侧显示目前的分值。可以提供 `text-template` 作为显示模板，模板为一个包含了 `{value}` 的字符串，`{value}` 会被解析为分值。
|
||||
|
||||
<div class="demo-box demo-rate">
|
||||
<el-rate v-model="value5" disabled show-text text-template="{value} 分"></el-rate>
|
||||
<el-rate v-model="value5" disabled show-text text-color="#ff9900" text-template="{value} 分"></el-rate>
|
||||
</div>
|
||||
|
||||
``` html
|
||||
<el-rate v-model="value5" disabled show-text text-template="{value} 分"></el-rate>
|
||||
<el-rate v-model="value5" disabled show-text text-color="#ff9900" text-template="{value} 分"></el-rate>
|
||||
```
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| v-model | 绑定值 | Number | | 0 |
|
||||
| max | 最大分值 | Number | | 5 |
|
||||
| multi-color | 是否根据分数等级区分颜色 | Boolean | | false |
|
||||
| lowThreshold | 低分和中等分数的界限值，值本身被划分在低分中 | Number | | 2 |
|
||||
| highThreshold | 高分和中等分数的界限值，值本身被划分在高分中 | Number | | 4 |
|
||||
| smiley | 是否使用 smiley icon | Boolean | | false |
|
||||
| disabled | 是否为只读 | Boolean | | false |
|
||||
| allow-half | 是否允许半选 | Boolean | | false |
|
||||
| low-threshold | 低分和中等分数的界限值，值本身被划分在低分中 | Number | | 2 |
|
||||
| high-threshold | 高分和中等分数的界限值，值本身被划分在高分中 | Number | | 4 |
|
||||
| colors | icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色 | Array | | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
|
||||
| void-color | 未选中 icon 的颜色 | String | | '#C6D1DE' |
|
||||
| disabled-void-color | 只读时未选中 icon 的颜色 | String | | '#EFF2F7' |
|
||||
| icon-classes | icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名 | Array | | ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'] |
|
||||
| void-icon-class | 未选中 icon 的类名 | String | | 'el-icon-star-off' |
|
||||
| disabled-void-icon-class | 只读时未选中 icon 的类名 | String | | 'el-icon-star-on' |
|
||||
| show-text | 是否显示辅助文字 | Boolean | | false |
|
||||
| text-color | 辅助文字的颜色 | String | | '1F2D3D' |
|
||||
| texts | 辅助文字数组 | Array | | ['极差', '失望', '一般', '满意', '惊喜'] |
|
||||
| text-template | 只读时的辅助文字模板 | String | | '{value}' |
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","angle-left","angle-right","truck"]
|
||||
["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","star-on","star-off"]
|
||||
Binary file not shown.
|
|
@ -1,19 +0,0 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="icomoon" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||
<glyph unicode="" glyph-name="rate-face-void" d="M0 448c0 282.766 229.234 512 512 512s512-229.234 512-512c0-282.766-229.234-512-512-512s-512 229.234-512 512zM947.2 448c0 240.351-194.849 435.2-435.2 435.2s-435.2-194.849-435.2-435.2c0-240.351 194.849-435.2 435.2-435.2s435.2 194.849 435.2 435.2zM294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM361.143 281.6c-22.711 0-41.143-18.637-41.143-41.6s18.432-41.6 41.143-41.6h301.714c22.711 0 41.143 18.637 41.143 41.6s-18.432 41.6-41.143 41.6h-301.714z" />
|
||||
<glyph unicode="" d="M512.001 960c-282.771 0-512.001-229.23-512.001-512.002 0-282.77 229.23-511.998 512.001-511.998 282.769 0 511.999 229.227 511.999 511.998s-229.23 512.002-511.999 512.002v0z" />
|
||||
<glyph unicode="" d="M294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM694.529 181.197l-3.422 1.216c-56.15 27.872-116.388 42.047-178.882 42.047-64.556 0-125.611-14.316-181.515-42.45l-3.382-1.132c-2.102-0.628-4.945-1.529-8.489-1.529-20.554 0-37.239 18.29-37.239 40.734 0 10.655 4.571 21.361 12.114 29.399l-0.456 2.483 9.516 4.698c66.74 33.104 139.336 50.537 209.907 50.537 71.889 0 142.336-16.984 210.314-50.948 11.943-7.181 19.405-20.953 19.405-35.903 0-26.328-21.71-47.958-47.871-39.153z" />
|
||||
<glyph unicode="" d="M512-64c-282.766 0-512 229.234-512 512s229.234 512 512 512c282.766 0 512-229.234 512-512s-229.234-512-512-512v0z" />
|
||||
<glyph unicode="" d="M294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM361.143 281.6c-22.711 0-41.143-18.637-41.143-41.6s18.432-41.6 41.143-41.6h301.714c22.711 0 41.143 18.637 41.143 41.6s-18.432 41.6-41.143 41.6h-301.714z" />
|
||||
<glyph unicode="" d="M512.001 960c-282.77 0-512.001-229.23-512.001-511.999s229.23-512.001 512.001-512.001c282.77 0 511.999 229.23 511.999 511.999s-229.229 512.001-511.999 512.001v0z" />
|
||||
<glyph unicode="" d="M817.495 305.565c-0.445-1.485-0.963-2.939-1.569-4.35-0.676-1.572-1.455-3.089-2.317-4.556-55.631-107.613-169.518-181.459-301.323-181.459-0.096 0-0.19 0.002-0.286 0.002s-0.19-0.002-0.286-0.002c-131.804 0-245.693 73.845-301.323 181.459-0.862 1.467-1.641 2.984-2.317 4.556-0.606 1.41-1.124 2.865-1.569 4.35-1.103 3.68-1.705 7.569-1.705 11.597 0 6.566 1.579 12.771 4.372 18.282 6.897 13.601 21.239 22.955 37.822 22.955s30.927-9.355 37.823-22.955h0.676c41.411-81.453 127.131-137.544 226.507-137.652 99.375 0.108 185.095 56.2 226.507 137.652h0.676c6.897 13.601 21.239 22.955 37.823 22.955s30.927-9.355 37.822-22.955c2.794-5.511 4.372-11.715 4.372-18.282 0-4.029-0.602-7.918-1.705-11.597zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307z" />
|
||||
<glyph unicode="" glyph-name="rate-star-void" d="M779.518 29.414c10.587-6.217 18.901-9.345 23.926-9.961-0.519 0.064-4.025-0.689-8.174-3.745-4.111-3.028-5.83-6.069-5.909-6.499 0.928 5.022 0.452 13.902-2.267 25.831l-48.871 214.449c-11.327 49.703 8.583 109.981 46.99 143.349l167.879 145.854c9.047 7.86 14.515 14.575 16.618 18.988-0.298-0.625-0.709-4.339 0.932-9.381 1.625-4.994 4.071-7.682 4.562-7.95-4.432 2.418-12.992 4.717-25.18 5.835l-223.357 20.487c-50.107 4.596-101.469 41.879-121.596 88.102l-87.917 201.902c-4.865 11.172-9.736 18.558-13.464 22.030 0.263-0.245 3.332-1.609 8.231-1.609s7.966 1.364 8.228 1.608c-3.729-3.473-8.599-10.858-13.464-22.029l-87.917-201.902c-20.245-46.493-71.405-83.498-121.596-88.102l-223.357-20.487c-12.361-1.134-21.058-3.451-25.573-5.895 0.491 0.266 2.985 2.987 4.647 8.087 1.682 5.159 1.254 8.952 0.946 9.593 2.149-4.476 7.719-11.291 16.911-19.277l167.879-145.854c38.555-33.497 58.274-93.837 46.99-143.349l-48.871-214.449c-2.708-11.883-3.172-20.709-2.242-25.684-0.086 0.458-1.816 3.501-5.91 6.501-4.101 3.005-7.542 3.743-8.025 3.684 5.004 0.611 13.26 3.712 23.753 9.874l192.138 112.831c43.815 25.73 107.277 25.631 150.924 0l192.138-112.831zM465.263 93.189l-192.138-112.831c-68.347-40.136-109.472-10.003-91.85 67.322l48.871 214.449c6.589 28.911-6.009 67.933-28.834 87.764l-167.879 145.854c-59.718 51.883-44.364 99.791 35.183 107.088l223.357 20.487c29.367 2.694 62.617 26.566 74.634 54.163l87.917 201.902c31.697 72.793 83.086 72.801 114.787 0l87.917-201.902c11.853-27.22 45.236-51.466 74.634-54.163l223.357-20.487c79.149-7.26 94.51-55.544 35.183-107.088l-167.879-145.854c-22.513-19.56-35.514-58.452-28.834-87.764l48.871-214.449c17.62-77.317-23.159-107.66-91.85-67.322l-192.138 112.831c-25.767 15.131-67.185 15.341-93.309 0z" />
|
||||
<glyph unicode="" glyph-name="rate-star" d="M558.572 93.189c-25.767 15.131-67.185 15.341-93.309 0l-192.138-112.831c-68.347-40.136-109.472-10.003-91.85 67.322l48.871 214.449c6.589 28.911-6.009 67.933-28.834 87.764l-167.879 145.854c-59.718 51.883-44.364 99.791 35.183 107.088l223.357 20.487c29.367 2.694 62.617 26.566 74.634 54.163l87.917 201.902c31.697 72.793 83.086 72.801 114.787 0l87.917-201.902c11.853-27.22 45.236-51.466 74.634-54.163l223.357-20.487c79.149-7.26 94.51-55.544 35.183-107.088l-167.879-145.854c-22.513-19.56-35.514-58.452-28.834-87.764l48.871-214.449c17.62-77.317-23.159-107.66-91.85-67.322l-192.138 112.831z" />
|
||||
</font></defs></svg>
|
||||
|
Before Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -3,55 +3,37 @@
|
|||
<span
|
||||
v-for="item in max"
|
||||
class="el-rate__item"
|
||||
@mouseenter="setCurrentValue(item)"
|
||||
@mousemove="setCurrentValue(item, $event)"
|
||||
@mouseleave="resetCurrentValue"
|
||||
@click="selectValue(item)"
|
||||
:style="{ cursor: disabled ? 'auto' : 'pointer' }">
|
||||
<i
|
||||
:class="[classes[item - 1], {'hover': hoverIndex === item}]"
|
||||
:class="[classes[item - 1], { 'hover': hoverIndex === item }]"
|
||||
class="el-rate__icon"
|
||||
:style="getIconStyle(item)">
|
||||
<span class="path1" v-if="smiley && item <= currentValue"></span>
|
||||
<span class="path2" v-if="smiley && item <= currentValue"></span>
|
||||
<i
|
||||
v-if="showDecimalIcon(item)"
|
||||
:class="decimalIconClass"
|
||||
:style="decimalStyle"
|
||||
class="el-rate__decimal">
|
||||
<span class="path1" v-if="smiley"></span>
|
||||
<span class="path2" v-if="smiley"></span>
|
||||
</i>
|
||||
</i>
|
||||
</span>
|
||||
<span v-if="showText" class="el-rate__text" :style="textStyle">{{ text }}</span>
|
||||
<span v-if="showText" class="el-rate__text" :style="{ color: textColor }">{{ text }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
const CLASS_MAP = {
|
||||
noSmiley: 'icon-rate-star',
|
||||
noSmileyVoid: 'icon-rate-star-void',
|
||||
smileyLow: 'icon-rate-face-gray',
|
||||
smileyMedium: 'icon-rate-face-yellow',
|
||||
smileyHigh: 'icon-rate-face-orange',
|
||||
smileyVoid: 'icon-rate-face-void'
|
||||
};
|
||||
const COLOR_MAP = {
|
||||
lowColor: '#99A9BF',
|
||||
mediumColor: '#F7BA2A',
|
||||
highColor: '#FF9900',
|
||||
voidColor: '#C6D1DE',
|
||||
disbaledVoidColor: '#EFF2F7'
|
||||
};
|
||||
import '../style.css';
|
||||
export default {
|
||||
name: 'el-rate',
|
||||
|
||||
data() {
|
||||
return {
|
||||
classMap: {},
|
||||
colorMap: {},
|
||||
classes: null,
|
||||
currentValue: 0,
|
||||
colors: null,
|
||||
pointerAtLeftHalf: false,
|
||||
currentValue: this.value,
|
||||
hoverIndex: -1
|
||||
};
|
||||
},
|
||||
|
|
@ -73,22 +55,50 @@
|
|||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
multiColor: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
colors: {
|
||||
type: Array,
|
||||
default() {
|
||||
return ['#F7BA2A', '#F7BA2A', '#F7BA2A'];
|
||||
}
|
||||
},
|
||||
smiley: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
voidColor: {
|
||||
type: String,
|
||||
default: '#C6D1DE'
|
||||
},
|
||||
disabledVoidColor: {
|
||||
type: String,
|
||||
default: '#EFF2F7'
|
||||
},
|
||||
iconClasses: {
|
||||
type: Array,
|
||||
default() {
|
||||
return ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'];
|
||||
}
|
||||
},
|
||||
voidIconClass: {
|
||||
type: String,
|
||||
default: 'el-icon-star-off'
|
||||
},
|
||||
disabledVoidIconClass: {
|
||||
type: String,
|
||||
default: 'el-icon-star-on'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
allowHalf: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showText: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '1f2d3d'
|
||||
},
|
||||
texts: {
|
||||
type: Array,
|
||||
default() {
|
||||
|
|
@ -105,27 +115,24 @@
|
|||
text() {
|
||||
let result = '';
|
||||
if (this.disabled) {
|
||||
result = this.textTemplate.replace('{value}', this.value);
|
||||
result = this.textTemplate.replace(/\{\s*value\s*\}/, this.value);
|
||||
} else {
|
||||
result = this.texts[this.currentValue - 1];
|
||||
result = this.texts[Math.ceil(this.currentValue) - 1];
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
textStyle() {
|
||||
let color = '';
|
||||
if (this.multiColor || this.smiley) {
|
||||
color = this.getValueFromMap(this.currentValue, COLOR_MAP);
|
||||
} else {
|
||||
color = COLOR_MAP.mediumColor;
|
||||
}
|
||||
return { color };
|
||||
},
|
||||
|
||||
decimalStyle() {
|
||||
let width = '';
|
||||
if (this.disabled) {
|
||||
width = `${ this.valueDecimal < 50 ? 0 : 50 }%`;
|
||||
}
|
||||
if (this.allowHalf) {
|
||||
width = '50%';
|
||||
}
|
||||
return {
|
||||
color: this.smiley ? '' : this.activeColor,
|
||||
width: this.valueDecimal + '%'
|
||||
color: this.activeColor,
|
||||
width
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -134,45 +141,34 @@
|
|||
},
|
||||
|
||||
decimalIconClass() {
|
||||
let className = '';
|
||||
if (!this.smiley) {
|
||||
className = CLASS_MAP.noSmiley;
|
||||
} else {
|
||||
className = this.getValueFromMap(this.value, CLASS_MAP);
|
||||
}
|
||||
return className;
|
||||
return this.getValueFromMap(this.value, this.classMap);
|
||||
},
|
||||
|
||||
voidClass() {
|
||||
const noSmileyVoidClass = this.disabled ? CLASS_MAP.noSmiley : CLASS_MAP.noSmileyVoid;
|
||||
return this.smiley ? CLASS_MAP.smileyVoid : noSmileyVoidClass;
|
||||
return this.disabled ? this.classMap.disabledVoidClass : this.classMap.voidClass;
|
||||
},
|
||||
|
||||
activeClass() {
|
||||
let className = '';
|
||||
if (this.smiley) {
|
||||
className = this.getValueFromMap(this.currentValue, CLASS_MAP);
|
||||
} else {
|
||||
className = CLASS_MAP.noSmiley;
|
||||
}
|
||||
return className;
|
||||
return this.getValueFromMap(this.currentValue, this.classMap);
|
||||
},
|
||||
|
||||
activeColor() {
|
||||
let color = '';
|
||||
if (!this.smiley) {
|
||||
if (this.multiColor) {
|
||||
color = this.getValueFromMap(this.currentValue, COLOR_MAP);
|
||||
} else {
|
||||
color = COLOR_MAP.mediumColor;
|
||||
}
|
||||
}
|
||||
return color;
|
||||
return this.getValueFromMap(this.currentValue, this.colorMap);
|
||||
},
|
||||
|
||||
classes() {
|
||||
let result = new Array(this.max);
|
||||
result.fill(this.activeClass, 0, this.currentValue).fill(this.voidClass, this.currentValue, this.max);
|
||||
let result = [];
|
||||
let i = 0;
|
||||
let threshold = this.currentValue;
|
||||
if (this.allowHalf && this.currentValue !== Math.floor(this.currentValue)) {
|
||||
threshold--;
|
||||
}
|
||||
for (; i < threshold; i++) {
|
||||
result.push(this.activeClass);
|
||||
}
|
||||
for (; i < this.max; i++) {
|
||||
result.push(this.voidClass);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
},
|
||||
|
|
@ -188,24 +184,25 @@
|
|||
getValueFromMap(value, map) {
|
||||
let result = '';
|
||||
if (value <= this.lowThreshold) {
|
||||
result = map.lowColor || map.smileyLow;
|
||||
result = map.lowColor || map.lowClass;
|
||||
} else if (value >= this.highThreshold) {
|
||||
result = map.highColor || map.smileyHigh;
|
||||
result = map.highColor || map.highClass;
|
||||
} else {
|
||||
result = map.mediumColor || map.smileyMedium;
|
||||
result = map.mediumColor || map.mediumClass;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
showDecimalIcon(item) {
|
||||
return this.disabled && this.valueDecimal > 0 && item - 1 < this.value && item > this.value;
|
||||
let showWhenDisabled = this.disabled && this.valueDecimal > 0 && item - 1 < this.value && item > this.value;
|
||||
let showWhenAllowHalf = this.allowHalf && this.pointerAtLeftHalf && ((item - 0.5).toString() === this.currentValue.toString());
|
||||
return showWhenDisabled || showWhenAllowHalf;
|
||||
},
|
||||
|
||||
getIconStyle(item) {
|
||||
const voidColor = this.disabled ? COLOR_MAP.disbaledVoidColor : COLOR_MAP.voidColor;
|
||||
const noSmileyColor = item <= this.currentValue ? this.activeColor : voidColor;
|
||||
const voidColor = this.disabled ? this.colorMap.disabledVoidColor : this.colorMap.voidColor;
|
||||
return {
|
||||
color: this.smiley ? '' : noSmileyColor
|
||||
color: item <= this.currentValue ? this.activeColor : voidColor
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -213,15 +210,30 @@
|
|||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
this.currentValue = value;
|
||||
this.$emit('input', value);
|
||||
if (this.allowHalf && this.pointerAtLeftHalf) {
|
||||
this.$emit('input', this.currentValue);
|
||||
} else {
|
||||
this.$emit('input', value);
|
||||
}
|
||||
},
|
||||
|
||||
setCurrentValue(value) {
|
||||
setCurrentValue(value, event) {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
this.currentValue = value;
|
||||
if (this.allowHalf) {
|
||||
let target = event.target;
|
||||
if (target.classList.contains('el-rate__item')) {
|
||||
target = target.querySelector('.el-rate__icon');
|
||||
}
|
||||
if (target.classList.contains('el-rate__decimal')) {
|
||||
target = target.parentNode;
|
||||
}
|
||||
this.pointerAtLeftHalf = event.offsetX * 2 <= target.clientWidth;
|
||||
this.currentValue = this.pointerAtLeftHalf ? value - 0.5 : value;
|
||||
} else {
|
||||
this.currentValue = value;
|
||||
}
|
||||
this.hoverIndex = value;
|
||||
},
|
||||
|
||||
|
|
@ -229,13 +241,32 @@
|
|||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
if (this.allowHalf) {
|
||||
this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
|
||||
}
|
||||
this.currentValue = this.value;
|
||||
this.hoverIndex = -1;
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.currentValue = this.value;
|
||||
if (!this.value) {
|
||||
this.$emit('input', 0);
|
||||
}
|
||||
this.classMap = {
|
||||
lowClass: this.iconClasses[0],
|
||||
mediumClass: this.iconClasses[1],
|
||||
highClass: this.iconClasses[2],
|
||||
voidClass: this.voidIconClass,
|
||||
disabledVoidClass: this.disabledVoidIconClass
|
||||
};
|
||||
this.colorMap = {
|
||||
lowColor: this.colors[0],
|
||||
mediumColor: this.colors[1],
|
||||
highColor: this.colors[2],
|
||||
voidColor: this.voidColor,
|
||||
disabledVoidColor: this.disabledVoidColor
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,60 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('fonts/icomoon.eot?q2cz0t');
|
||||
src: url('fonts/icomoon.eot?q2cz0t#iefix') format('embedded-opentype'),
|
||||
url('fonts/icomoon.ttf?q2cz0t') format('truetype'),
|
||||
url('fonts/icomoon.woff?q2cz0t') format('woff'),
|
||||
url('fonts/icomoon.svg?q2cz0t#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-rate-face-void:before {
|
||||
content: "\e900";
|
||||
}
|
||||
.icon-rate-face-gray .path1:before {
|
||||
content: "\e901";
|
||||
color: rgb(192, 204, 218);
|
||||
}
|
||||
.icon-rate-face-gray .path2:before {
|
||||
content: "\e902";
|
||||
color: rgb(132, 146, 166);
|
||||
}
|
||||
.icon-rate-face-yellow .path1:before {
|
||||
content: "\e903";
|
||||
color: rgb(247, 186, 42);
|
||||
}
|
||||
.icon-rate-face-yellow .path2:before {
|
||||
content: "\e904";
|
||||
color: rgb(172, 110, 2);
|
||||
}
|
||||
.icon-rate-face-orange .path1:before {
|
||||
content: "\e905";
|
||||
color: rgb(255, 153, 0);
|
||||
}
|
||||
.icon-rate-face-orange .path2:before {
|
||||
content: "\e906";
|
||||
color: rgb(173, 101, 0);
|
||||
}
|
||||
.icon-rate-star-void:before {
|
||||
content: "\e907";
|
||||
}
|
||||
.icon-rate-star:before {
|
||||
content: "\e908";
|
||||
}
|
||||
|
||||
|
|
@ -39,9 +39,8 @@
|
|||
<glyph unicode="" glyph-name="caret-bottom" d="M409.826 240.51c37.19-36.187 97.855-35.83 134.678 0l367.178 357.276c73.495 71.513 49.602 129.486-53.106 129.486h-762.822c-102.825 0-126.512-58.060-53.106-129.486l367.178-357.276z" />
|
||||
<glyph unicode="" glyph-name="edit" d="M84.186 243.909l-84.186-307.909 306.998 85.375 484.852 484.209-225.523 219.804-482.141-481.48zM755.070 913.917l-120.787-120.643 226.275-219.096 117.282 117.171c61.546 61.477 61.546 161.098 0 222.569-61.532 61.443-161.309 61.443-222.77 0z" />
|
||||
<glyph unicode="" glyph-name="caret-top" d="M409.826 700.266c37.19 36.187 97.855 35.83 134.678 0l367.178-357.276c73.495-71.513 49.602-129.486-53.106-129.486h-762.822c-102.825 0-126.512 58.060-53.106 129.486l367.178 357.276z" />
|
||||
<glyph unicode="" glyph-name="check" d="M361.151 322.144l482.718 482.718 120.68-120.68-603.398-603.398-301.699 301.699 120.68 120.68 181.019-181.019z" />
|
||||
<glyph unicode="" glyph-name="check" horiz-adv-x="1365" d="M569.942 138.091c-19.251 0-38.43 7.354-53.122 21.979l-300.554 300.519c-29.301 29.327-29.301 76.928 0 106.265 29.373 29.327 76.95 29.327 106.25 0l247.431-247.392 472.796 472.724c29.301 29.412 76.874 29.412 106.25 0 29.301-29.327 29.301-76.856 0-106.182l-525.913-525.94c-14.686-14.631-33.941-21.979-53.122-21.979v0z" />
|
||||
<glyph unicode="" glyph-name="minus" d="M78.769 526.769h866.462c43.503 0 78.769-35.266 78.769-78.769s-35.266-78.769-78.769-78.769h-866.462c-43.503 0-78.769 35.266-78.769 78.769s35.266 78.769 78.769 78.769z" />
|
||||
<glyph unicode="" glyph-name="truck" d="M794.624 593.76c-5.952 8.896-15.936 14.24-26.624 14.24h-32c-17.696 0-32-14.304-32-32v-192c0-17.696 14.304-32 32-32h128c17.696 0 32 14.304 32 32v48c0 6.304-1.888 12.512-5.376 17.76l-96 144zM864 384h-128v192h32l96-144v-48zM1007.872 469.248l-128 192c-17.856 26.784-47.744 42.752-79.872 42.752h-128v64c0 52.928-43.072 96-96 96h-480c-52.928 0-96-43.072-96-96v-352c0-52.928 43.072-96 96-96v0-96c0-52.928 43.072-96 96-96h36.544c14.304-55.072 64-96 123.488-96 59.424 0 109.12 40.928 123.424 96h169.024c14.304-55.072 64-96 123.488-96 59.424 0 109.12 40.928 123.424 96h36.608c52.928 0 96 43.072 96 96v192c0 19.008-5.568 37.44-16.128 53.248zM96 384c-17.664 0-32 14.304-32 32v352c0 17.696 14.336 32 32 32h480c17.696 0 32-14.304 32-32v-352c0-17.696-14.304-32-32-32h-480zM352.032 96c-35.36 0-64 28.672-64 64s28.64 64 64 64c35.328 0 64-28.672 64-64s-28.704-64-64-64zM768 96c-35.36 0-64 28.672-64 64s28.64 64 64 64c35.328 0 64-28.672 64-64s-28.672-64-64-64zM960 224c0-17.696-14.304-32-32-32h-36.576c-14.304 55.072-64 96-123.424 96-59.488 0-109.184-40.928-123.488-96h-169.024c-14.304 55.072-64 96-123.424 96-59.488 0-109.184-40.928-123.488-96h-36.576c-17.664 0-32 14.304-32 32v96h416c52.928 0 96 43.072 96 96v224h128c10.688 0 20.672-5.344 26.624-14.24l128-192c3.488-5.248 5.376-11.456 5.376-17.76v-192z" />
|
||||
<glyph unicode="" glyph-name="angle-left" horiz-adv-x="384" d="M384.002 164.382q0 8.578-6.598 15.176l-259.3 259.3 259.3 259.3q6.598 6.598 6.598 15.176t-6.598 15.176l-32.989 32.989q-6.598 6.598-15.176 6.598t-15.176-6.598l-307.466-307.466q-6.598-6.598-6.598-15.176t6.598-15.176l307.466-307.466q6.598-6.598 15.176-6.598t15.176 6.598l32.989 32.989q6.598 6.598 6.598 15.176z" />
|
||||
<glyph unicode="" glyph-name="angle-right" horiz-adv-x="347" d="M340 438.858q0-7.429-5.714-13.143l-266.286-266.286q-5.714-5.714-13.143-5.714t-13.143 5.714l-28.571 28.571q-5.714 5.714-5.714 13.143t5.714 13.143l224.571 224.571-224.571 224.571q-5.714 5.714-5.714 13.143t5.714 13.143l28.571 28.571q5.714 5.714 13.143 5.714t13.143-5.714l266.286-266.286q5.714-5.714 5.714-13.143z" />
|
||||
<glyph unicode="" glyph-name="star-off" horiz-adv-x="1084" d="M825.372 4.792c11.209-6.583 20.013-9.895 25.334-10.547-0.549 0.067-4.261-0.73-8.655-3.966-4.353-3.206-6.173-6.426-6.257-6.881 0.983 5.318 0.479 14.719-2.4 27.35l-51.746 227.064c-11.993 52.627 9.088 116.45 49.754 151.782l177.754 154.433c9.58 8.323 15.369 15.433 17.595 20.104-0.315-0.662-0.75-4.594 0.986-9.933 1.72-5.288 4.31-8.134 4.83-8.417-4.693 2.561-13.756 4.994-26.661 6.178l-236.495 21.693c-53.054 4.866-107.438 44.343-128.749 93.284l-93.089 213.779c-5.151 11.829-10.308 19.65-14.256 23.326 0.278-0.259 3.528-1.704 8.715-1.704s8.434 1.445 8.711 1.703c-3.948-3.677-9.105-11.497-14.256-23.325l-93.089-213.779c-21.436-49.228-75.606-88.41-128.749-93.284l-236.495-21.693c-13.088-1.2-22.296-3.654-27.077-6.242 0.519 0.281 3.16 3.163 4.921 8.563 1.781 5.463 1.327 9.479 1.001 10.157 2.276-4.739 8.173-11.955 17.906-20.411l177.754-154.433c40.823-35.468 61.701-99.357 49.754-151.782l-51.746-227.064c-2.867-12.582-3.359-21.928-2.374-27.194-0.091 0.485-1.923 3.707-6.257 6.883-4.342 3.182-7.986 3.963-8.497 3.9 5.298 0.647 14.039 3.93 25.15 10.455l203.441 119.468c46.392 27.243 113.588 27.139 159.802 0l203.441-119.468zM492.632 72.318l-203.441-119.468c-72.368-42.497-115.912-10.592-97.253 71.282l51.746 227.064c6.976 30.612-6.362 71.929-30.53 92.926l-177.754 154.433c-63.231 54.935-46.973 105.661 37.252 113.387l236.495 21.693c31.094 2.852 66.301 28.129 79.024 57.349l93.089 213.779c33.562 77.075 87.973 77.083 121.539 0l93.089-213.779c12.55-28.821 47.897-54.494 79.024-57.349l236.495-21.693c83.804-7.687 100.070-58.811 37.252-113.387l-177.754-154.433c-23.838-20.71-37.603-61.891-30.53-92.926l51.746-227.064c18.656-81.865-24.522-113.993-97.253-71.282l-203.441 119.468c-27.282 16.021-71.137 16.243-98.798 0z" />
|
||||
<glyph unicode="" glyph-name="star-on" horiz-adv-x="1084" d="M591.429 72.318c-27.282 16.021-71.137 16.243-98.798 0l-203.441-119.468c-72.368-42.497-115.912-10.592-97.253 71.282l51.746 227.064c6.976 30.612-6.362 71.929-30.53 92.926l-177.754 154.433c-63.231 54.935-46.973 105.661 37.252 113.387l236.495 21.693c31.094 2.852 66.301 28.129 79.024 57.349l93.089 213.779c33.562 77.075 87.973 77.083 121.539 0l93.089-213.779c12.55-28.821 47.897-54.494 79.024-57.349l236.495-21.693c83.804-7.687 100.070-58.811 37.252-113.387l-177.754-154.433c-23.838-20.71-37.603-61.891-30.53-92.926l51.746-227.064c18.656-81.865-24.522-113.993-97.253-71.282l-203.441 119.468z" />
|
||||
</font></defs></svg>
|
||||
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -1,9 +1,9 @@
|
|||
@font-face {
|
||||
font-family: 'element-icons';
|
||||
src:
|
||||
url('fonts/element-icons.ttf?deq2r7') format('truetype'),
|
||||
url('fonts/element-icons.woff?deq2r7') format('woff'),
|
||||
url('fonts/element-icons.svg?deq2r7#element-icons') format('svg');
|
||||
url('fonts/element-icons.ttf?ld8k1a') format('truetype'),
|
||||
url('fonts/element-icons.woff?ld8k1a') format('woff'),
|
||||
url('fonts/element-icons.svg?ld8k1a#element-icons') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -127,15 +127,12 @@
|
|||
.el-icon-minus:before {
|
||||
content: "\e921";
|
||||
}
|
||||
.el-icon-angle-left:before {
|
||||
content: "\f104";
|
||||
}
|
||||
.el-icon-angle-right:before {
|
||||
content: "\f105";
|
||||
}
|
||||
.el-icon-truck:before {
|
||||
.el-icon-star-off:before {
|
||||
content: "\e922";
|
||||
}
|
||||
.el-icon-star-on:before {
|
||||
content: "\e923";
|
||||
}
|
||||
|
||||
.el-icon-loading {
|
||||
animation: rotating 1s linear infinite;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
border-radius: 4px;
|
||||
transition: var(--border-transition-base);
|
||||
outline: none;
|
||||
font-size: inherit;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--input-placeholder-color);
|
||||
|
|
|
|||
|
|
@ -18,8 +18,9 @@
|
|||
font-size: 18px;
|
||||
margin-right: 6px;
|
||||
color: #C6D1DE;
|
||||
transition: .3s;
|
||||
&.hover {
|
||||
transform: scale(1.1);
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.path2 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue