aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-01-16 16:05:40 +0100
committerChocobozzz <me@florianbigard.com>2019-01-17 10:38:18 +0100
commit457bb213b273a9b206cc5654eb085cede4e916ad (patch)
tree6b1a317872a4ca27b5d0dbe543452320b26aacff /client/src/sass
parent848f499def54db2dd36437ef0dfb74dd5041c23b (diff)
downloadPeerTube-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/sass')
-rw-r--r--client/src/sass/application.scss9
-rw-r--r--client/src/sass/include/_mixins.scss49
-rw-r--r--client/src/sass/include/_variables.scss9
3 files changed, 45 insertions, 22 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 2356f9837..37837bfc0 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -23,7 +23,7 @@ body {
23 // now beware node-sass requires interpolation 23 // now beware node-sass requires interpolation
24 // for css custom properties #{$var} 24 // for css custom properties #{$var}
25 --mainColor: #{$orange-color}; 25 --mainColor: #{$orange-color};
26 --mainHoverColor: #{$orange-hoover-color}; 26 --mainHoverColor: #{$orange-hover-color};
27 --mainBackgroundColor: #{$bg-color}; 27 --mainBackgroundColor: #{$bg-color};
28 --mainForegroundColor: #{$fg-color}; 28 --mainForegroundColor: #{$fg-color};
29 --menuBackgroundColor: #{$menu-background}; 29 --menuBackgroundColor: #{$menu-background};
@@ -229,13 +229,12 @@ label {
229 font-weight: $font-semibold; 229 font-weight: $font-semibold;
230 } 230 }
231 231
232 .close { 232 my-global-icon {
233 @include icon(24px); 233 @include icon(24px);
234 234
235 position: relative; 235 position: relative;
236 top: 3px; 236 top: 3px;
237 float: right; 237 float: right;
238 background-image: url('../assets/images/global/cross.svg');
239 238
240 margin: 0; 239 margin: 0;
241 padding: 0; 240 padding: 0;
@@ -324,7 +323,7 @@ ngb-tabset.bootstrap {
324table { 323table {
325 .action-button-edit, .action-button-delete { 324 .action-button-edit, .action-button-delete {
326 &:hover, &:active, &:focus, &[disabled], &.disabled { 325 &:hover, &:active, &:focus, &[disabled], &.disabled {
327 background-color: $grey-color !important; 326 background-color: $grey-background-color !important;
328 } 327 }
329 } 328 }
330} 329}
@@ -389,4 +388,4 @@ table {
389 } 388 }
390 } 389 }
391 } 390 }
392} \ No newline at end of file 391}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index d6f391a45..1da240db8 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -55,6 +55,18 @@
55 hyphens: auto; 55 hyphens: auto;
56} 56}
57 57
58@mixin apply-svg-color ($color) {
59 /deep/ svg {
60 path[fill="#000000"], g[fill="#000000"], rect[fill="#000000"] {
61 fill: $color;
62 }
63
64 path[stroke="#000000"], g[stroke="#000000"], rect[stroke="#000000"] {
65 stroke: $color;
66 }
67 }
68}
69
58@mixin peertube-input-text($width) { 70@mixin peertube-input-text($width) {
59 display: inline-block; 71 display: inline-block;
60 height: $button-height; 72 height: $button-height;
@@ -110,22 +122,30 @@
110 color: #fff; 122 color: #fff;
111 background-color: #C6C6C6; 123 background-color: #C6C6C6;
112 } 124 }
125
126 my-global-icon {
127 @include apply-svg-color(#fff)
128 }
113} 129}
114 130
115@mixin grey-button { 131@mixin grey-button {
116 &, &:active, &:focus { 132 &, &:active, &:focus {
117 background-color: $grey-color; 133 background-color: $grey-background-color;
118 color: #585858; 134 color: $grey-foreground-color;
119 } 135 }
120 136
121 &:hover, &:active, &:focus, &[disabled], &.disabled { 137 &:hover, &:active, &:focus, &[disabled], &.disabled {
122 color: #585858; 138 color: $grey-foreground-color;
123 background-color: $grey-hoover-color; 139 background-color: $grey-background-hover-color;
124 } 140 }
125 141
126 &[disabled], &.disabled { 142 &[disabled], &.disabled {
127 cursor: default; 143 cursor: default;
128 } 144 }
145
146 my-global-icon {
147 @include apply-svg-color($grey-foreground-color)
148 }
129} 149}
130 150
131@mixin peertube-button { 151@mixin peertube-button {
@@ -148,6 +168,15 @@
148 @include peertube-button; 168 @include peertube-button;
149} 169}
150 170
171@mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
172 my-global-icon {
173 position: relative;
174 width: $width;
175 margin-right: $margin-right;
176 top: $top;
177 }
178}
179
151@mixin peertube-button-file ($width) { 180@mixin peertube-button-file ($width) {
152 position: relative; 181 position: relative;
153 overflow: hidden; 182 overflow: hidden;
@@ -455,18 +484,10 @@
455 } 484 }
456} 485}
457 486
458@mixin create-button ($imageUrl) { 487@mixin create-button {
459 @include peertube-button-link; 488 @include peertube-button-link;
460 @include orange-button; 489 @include orange-button;
461 490 @include button-with-icon(20px, 5px, -1px);
462 .icon.icon-add {
463 @include icon(20px);
464
465 position: relative;
466 top: -1px;
467 margin-right: 5px;
468 background-image: url($imageUrl);
469 }
470} 491}
471 492
472@mixin row-blocks { 493@mixin row-blocks {
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index fdf33b12a..3780b7501 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -6,10 +6,13 @@ $font-regular: 400;
6$font-semibold: 600; 6$font-semibold: 600;
7$font-bold: 700; 7$font-bold: 700;
8 8
9$grey-color: #E5E5E5; 9$grey-background-color: #E5E5E5;
10$grey-hoover-color: #EFEFEF;; 10$grey-background-hover-color: #EFEFEF;
11$grey-foreground-color: #585858;
12$grey-foreground-hover-color: #303030;
13
11$orange-color: #F1680D; 14$orange-color: #F1680D;
12$orange-hoover-color: #F97D46; 15$orange-hover-color: #F97D46;
13 16
14$bg-color: #fff; 17$bg-color: #fff;
15$fg-color: #000; 18$fg-color: #000;