diff options
author | Chocobozzz <me@florianbigard.com> | 2019-01-16 16:05:40 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2019-01-17 10:38:18 +0100 |
commit | 457bb213b273a9b206cc5654eb085cede4e916ad (patch) | |
tree | 6b1a317872a4ca27b5d0dbe543452320b26aacff /client/src/app/shared/buttons/button.component.scss | |
parent | 848f499def54db2dd36437ef0dfb74dd5041c23b (diff) | |
download | PeerTube-457bb213b273a9b206cc5654eb085cede4e916ad.tar.gz PeerTube-457bb213b273a9b206cc5654eb085cede4e916ad.tar.zst PeerTube-457bb213b273a9b206cc5654eb085cede4e916ad.zip |
Refactor how we use icons
Inject them in an angular component so we can easily change their color
Diffstat (limited to 'client/src/app/shared/buttons/button.component.scss')
-rw-r--r-- | client/src/app/shared/buttons/button.component.scss | 34 |
1 files changed, 6 insertions, 28 deletions
diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss index 168102f09..be41669cd 100644 --- a/client/src/app/shared/buttons/button.component.scss +++ b/client/src/app/shared/buttons/button.component.scss | |||
@@ -3,41 +3,19 @@ | |||
3 | 3 | ||
4 | .action-button { | 4 | .action-button { |
5 | @include peertube-button-link; | 5 | @include peertube-button-link; |
6 | @include button-with-icon(21px, 0, -2px); | ||
6 | 7 | ||
7 | font-size: 15px; | 8 | font-size: 15px; |
8 | font-weight: $font-semibold; | 9 | font-weight: $font-semibold; |
9 | color: #585858; | 10 | color: $grey-foreground-color; |
10 | background-color: #E5E5E5; | 11 | background-color: $grey-background-color; |
11 | 12 | ||
12 | &:hover { | 13 | &:hover { |
13 | background-color: #EFEFEF; | 14 | background-color: $grey-background-hover-color; |
14 | } | 15 | } |
15 | 16 | ||
16 | .icon { | 17 | my-global-icon { |
17 | @include icon(21px); | 18 | @include apply-svg-color($grey-foreground-color); |
18 | |||
19 | position: relative; | ||
20 | top: -2px; | ||
21 | |||
22 | &.icon-edit { | ||
23 | background-image: url('../../../assets/images/global/edit-grey.svg'); | ||
24 | } | ||
25 | |||
26 | &.icon-delete-grey { | ||
27 | background-image: url('../../../assets/images/global/delete-grey.svg'); | ||
28 | } | ||
29 | |||
30 | &.icon-im-with-her { | ||
31 | background-image: url('../../../assets/images/global/im-with-her.svg'); | ||
32 | } | ||
33 | |||
34 | &.icon-tick { | ||
35 | background-image: url('../../../assets/images/global/tick.svg'); | ||
36 | } | ||
37 | |||
38 | &.icon-cross { | ||
39 | background-image: url('../../../assets/images/global/cross.svg'); | ||
40 | } | ||
41 | } | 19 | } |
42 | } | 20 | } |
43 | 21 | ||