aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-06-10 10:18:44 +0200
committerChocobozzz <me@florianbigard.com>2022-06-10 10:18:44 +0200
commitbffee1d538aa7b51b78d646a0d372b352c073cd8 (patch)
tree333f368fa9dc7682eb25d3a72a1cfab43b558724 /client/src/sass
parenta3d7aadb6dee3c23828672ddcc1227f412674e22 (diff)
downloadPeerTube-bffee1d538aa7b51b78d646a0d372b352c073cd8.tar.gz
PeerTube-bffee1d538aa7b51b78d646a0d372b352c073cd8.tar.zst
PeerTube-bffee1d538aa7b51b78d646a0d372b352c073cd8.zip
Fix classic select and ng select css inconsistency
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/include/_mixins.scss15
-rw-r--r--client/src/sass/include/_variables.scss1
-rw-r--r--client/src/sass/ng-select.scss10
3 files changed, 17 insertions, 9 deletions
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index a0bdfb3dc..3c5aa6cdf 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -91,7 +91,7 @@
91 width: $width; 91 width: $width;
92 color: pvar(--inputForegroundColor); 92 color: pvar(--inputForegroundColor);
93 background-color: pvar(--inputBackgroundColor); 93 background-color: pvar(--inputBackgroundColor);
94 border: 1px solid #C6C6C6; 94 border: 1px solid $input-border-color;
95 border-radius: 3px; 95 border-radius: 3px;
96 font-size: 15px; 96 font-size: 15px;
97 97
@@ -150,7 +150,7 @@
150 &.disabled { 150 &.disabled {
151 cursor: default; 151 cursor: default;
152 color: #fff; 152 color: #fff;
153 background-color: #C6C6C6; 153 background-color: $input-border-color;
154 } 154 }
155 155
156 my-global-icon { 156 my-global-icon {
@@ -180,7 +180,7 @@
180 &.disabled { 180 &.disabled {
181 cursor: default; 181 cursor: default;
182 color: pvar(--mainColor); 182 color: pvar(--mainColor);
183 background-color: #C6C6C6; 183 background-color: $input-border-color;
184 } 184 }
185 185
186 my-global-icon { 186 my-global-icon {
@@ -396,10 +396,9 @@
396 select { 396 select {
397 padding: 0 35px 0 12px; 397 padding: 0 35px 0 12px;
398 position: relative; 398 position: relative;
399 border: 1px solid #C6C6C6; 399 border: 1px solid $input-border-color;
400 background: transparent none; 400 background: transparent none;
401 appearance: none; 401 appearance: none;
402 cursor: pointer;
403 height: $button-height; 402 height: $button-height;
404 text-overflow: ellipsis; 403 text-overflow: ellipsis;
405 color: pvar(--mainForegroundColor); 404 color: pvar(--mainForegroundColor);
@@ -460,7 +459,7 @@
460 top: 0; 459 top: 0;
461 width: 18px; 460 width: 18px;
462 height: 18px; 461 height: 18px;
463 border: 1px solid #C6C6C6; 462 border: 1px solid $input-border-color;
464 border-radius: 100%; 463 border-radius: 100%;
465 background: #fff; 464 background: #fff;
466 } 465 }
@@ -507,7 +506,7 @@
507 width: 18px; 506 width: 18px;
508 min-width: 18px; 507 min-width: 18px;
509 height: 18px; 508 height: 18px;
510 border: $border-width solid #C6C6C6; 509 border: $border-width solid $input-border-color;
511 border-radius: 3px; 510 border-radius: 3px;
512 vertical-align: middle; 511 vertical-align: middle;
513 cursor: pointer; 512 cursor: pointer;
@@ -670,7 +669,7 @@
670 margin-bottom: 20px; 669 margin-bottom: 20px;
671 670
672 @if $separator { 671 @if $separator {
673 border-bottom: 1px solid #C6C6C6; 672 border-bottom: 1px solid $input-border-color;
674 } 673 }
675 674
676 @media screen and (max-width: $small-view) { 675 @media screen and (max-width: $small-view) {
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index fd1b137dc..e46b96d8a 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -84,6 +84,7 @@ $theater-bottom-space: 115px;
84$input-foreground-color: $fg-color; 84$input-foreground-color: $fg-color;
85$input-background-color: $bg-color; 85$input-background-color: $bg-color;
86$input-placeholder-color: #898989; 86$input-placeholder-color: #898989;
87$input-border-color: #C6C6C6;
87 88
88$textarea-foreground-color: $fg-color; 89$textarea-foreground-color: $fg-color;
89$textarea-background-color: $bg-color; 90$textarea-background-color: $bg-color;
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 97e61e068..b1b82b573 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -4,7 +4,7 @@
4$ng-select-highlight: #f2690d; 4$ng-select-highlight: #f2690d;
5// $ng-select-primary-text: #333 !default; 5// $ng-select-primary-text: #333 !default;
6// $ng-select-disabled-text: #f9f9f9 !default; 6// $ng-select-disabled-text: #f9f9f9 !default;
7// $ng-select-border: #ccc !default; 7$ng-select-border: $input-border-color;
8// $ng-select-border-radius: 4px !default; 8// $ng-select-border-radius: 4px !default;
9// $ng-select-bg: #ffffff !default; 9// $ng-select-bg: #ffffff !default;
10// $ng-select-selected: lighten($ng-select-highlight, 46) !default; 10// $ng-select-selected: lighten($ng-select-highlight, 46) !default;
@@ -46,6 +46,14 @@ $ng-select-value-font-size: 15px;
46 @include padding-right(12px); 46 @include padding-right(12px);
47 } 47 }
48 48
49 .ng-arrow {
50 border-color: #000 transparent transparent !important;
51 }
52
53 &.ng-select-opened .ng-arrow {
54 border-color: transparent transparent #000 !important;
55 }
56
49 &.ng-select-single .ng-value-container .ng-value { 57 &.ng-select-single .ng-value-container .ng-value {
50 color: pvar(--inputForegroundColor); 58 color: pvar(--inputForegroundColor);
51 59