Skip to content

Commit

Permalink
Fixed #881
Browse files Browse the repository at this point in the history
  • Loading branch information
@YamiOdymel
YamiOdymel committed Dec 24, 2022
1 parent 5b4d156 commit f3ad84b
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 35 deletions.
38 changes: 26 additions & 12 deletions languages/en-us/components/rating.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,20 @@ Definitions:
<div class="star"></div>
</div>
- Title: Disabled
Anchor: Disabled
Description: 適合與「可供輸入」樣式使用，當使用者評分完之後便能停用並鎖定。這個狀態下使用者將無法與評分元件互動。
Since: 4.0.0
HTML: |
<div class="ts-rating is-input [[is-disabled]] is-red">
<input class="heart" type="radio" name="love" value="1" />
<input class="heart" type="radio" name="love" value="2" checked/>
<input class="heart" type="radio" name="love" value="3" />
<input class="heart" type="radio" name="love" value="4" />
<input class="heart" type="radio" name="love" value="5" />
</div>
- Title: Variations
Description:
Sections:
Expand Down Expand Up @@ -125,15 +139,15 @@ Definitions:
<div class="star"></div>
</div>
# - Title: 可供輸入的
# Anchor: Input
# Description: 可讓使用者以點擊的方式輸入評分數值。需要注意的是由於 CSS 技術問題，數值必須從大排序到小（反向排序）。
# Since: 4.0.0
# HTML: |
# <div class="ts-rating [[is-input]] is-yellow">
# <input class="star" type="radio" name="rating" value="5" />
# <input class="star" type="radio" name="rating" value="4" checked/>
# <input class="star" type="radio" name="rating" value="3" />
# <input class="star" type="radio" name="rating" value="2" />
# <input class="star" type="radio" name="rating" value="1" />
# </div>
- Title: Input
Anchor: Input
Description: 可讓使用者以點擊的方式輸入評分數值。
Since: 4.0.0
HTML: |
<div class="ts-rating [[is-input]] is-yellow">
<input class="star" type="radio" name="rating" value="1" />
<input class="star" type="radio" name="rating" value="2" checked/>
<input class="star" type="radio" name="rating" value="3" />
<input class="star" type="radio" name="rating" value="4" />
<input class="star" type="radio" name="rating" value="5" />
</div>
37 changes: 25 additions & 12 deletions languages/zh-tw/components/rating.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,19 @@ Definitions:
<div class="star"></div>
</div>
- Title: 停用的
Anchor: Disabled
Description: 適合與「可供輸入」樣式使用，當使用者評分完之後便能停用並鎖定。這個狀態下使用者將無法與評分元件互動。
Since: 4.0.0
HTML: |
<div class="ts-rating is-input [[is-disabled]] is-red">
<input class="heart" type="radio" name="love" value="1" />
<input class="heart" type="radio" name="love" value="2" checked/>
<input class="heart" type="radio" name="love" value="3" />
<input class="heart" type="radio" name="love" value="4" />
<input class="heart" type="radio" name="love" value="5" />
</div>
- Title: 外觀
Description:
Sections:
Expand Down Expand Up @@ -125,15 +138,15 @@ Definitions:
<div class="star"></div>
</div>
# - Title: 可供輸入的
# Anchor: Input
# Description: 可讓使用者以點擊的方式輸入評分數值。需要注意的是由於 CSS 技術問題，數值必須從大排序到小（反向排序）。
# Since: 4.0.0
# HTML: |
# <div class="ts-rating [[is-input]] is-yellow">
# <input class="star" type="radio" name="rating" value="5" />
# <input class="star" type="radio" name="rating" value="4" checked/>
# <input class="star" type="radio" name="rating" value="3" />
# <input class="star" type="radio" name="rating" value="2" />
# <input class="star" type="radio" name="rating" value="1" />
# </div>
- Title: 可供輸入的
Anchor: Input
Description: 可讓使用者以點擊的方式輸入評分數值。
Since: 4.0.0
HTML: |
<div class="ts-rating [[is-input]] is-yellow">
<input class="star" type="radio" name="rating" value="1" />
<input class="star" type="radio" name="rating" value="2" checked/>
<input class="star" type="radio" name="rating" value="3" />
<input class="star" type="radio" name="rating" value="4" />
<input class="star" type="radio" name="rating" value="5" />
</div>
27 changes: 16 additions & 11 deletions src/rating.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,24 +24,24 @@
.ts-rating :is(.star, .heart).is-active,
.ts-rating.is-input :is(.star, .heart):checked,
.ts-rating.is-input :is(.star, .heart):hover,
.ts-rating.is-input :is(.star, .heart):hover ~ :is(.star, .heart),
.ts-rating.is-input :is(.star, .heart):checked ~ :is(.star, .heart) {
.ts-rating.is-input :is(.star, .heart):has(~ :is(.star, .heart):hover),
.ts-rating.is-input :is(.star, .heart):has(~ :is(.star, .heart):checked) {
color: inherit;
}

.ts-rating.is-yellow :is(.star, .heart).is-active,
.ts-rating.is-yellow.is-input :is(.star, .heart):checked,
.ts-rating.is-yellow.is-input :is(.star, .heart):hover,
.ts-rating.is-yellow.is-input :is(.star, .heart):hover ~ :is(.star, .heart),
.ts-rating.is-yellow.is-input :is(.star, .heart):checked ~ :is(.star, .heart) {
.ts-rating.is-yellow.is-input :is(.star, .heart):has(~ :is(.star, .heart):hover),
.ts-rating.is-yellow.is-input :is(.star, .heart):has(~ :is(.star, .heart):checked) {
color: #e3c81b;
}

.ts-rating.is-red :is(.star, .heart).is-active,
.ts-rating.is-red.is-input :is(.star, .heart):checked,
.ts-rating.is-red.is-input :is(.star, .heart):hover,
.ts-rating.is-red.is-input :is(.star, .heart):hover ~ :is(.star, .heart),
.ts-rating.is-red.is-input :is(.star, .heart):checked ~ :is(.star, .heart) {
.ts-rating.is-red.is-input :is(.star, .heart):has(~ :is(.star, .heart):hover),
.ts-rating.is-red.is-input :is(.star, .heart):has(~ :is(.star, .heart):checked) {
color: #ff1100;
}

Expand Down Expand Up @@ -100,13 +100,17 @@
}

/**
* Input
* Disabled
*/

.ts-rating.is-input {
flex-direction: row-reverse;
.ts-rating.is-disabled {
pointer-events: none;
}

/**
* Input
*/

.ts-rating.is-input input {
appearance: none;
margin: 0;
Expand All @@ -115,8 +119,9 @@
transition: color 0.1s ease, opacity 0.1s ease;
}

.ts-rating.is-input input:hover:not(:focus) ~ input {
opacity: 0.8;
.ts-rating.is-input input:hover:not(:focus) ~ input,
.ts-rating.is-input input:hover:focus~input {
opacity: 0.7;
}

.ts-rating.is-input input:hover:not(:focus) {
Expand Down

0 comments on commit f3ad84b

Please sign in to comment.