aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-08-05 00:50:07 +0200
committerChocobozzz <chocobozzz@cpy.re>2020-08-11 09:03:39 +0200
commit02c01341f4dae30ec6b81fcb644952393d73c4a8 (patch)
treeaca3f2b118bb123457fd38724be68fe877504c75 /client/src/sass
parent766d13b4470de02d3d7bec94188260b89a356399 (diff)
downloadPeerTube-02c01341f4dae30ec6b81fcb644952393d73c4a8.tar.gz
PeerTube-02c01341f4dae30ec6b81fcb644952393d73c4a8.tar.zst
PeerTube-02c01341f4dae30ec6b81fcb644952393d73c4a8.zip
add ng-select for templatable select options
- create select-tags component to replace ngx-chips - create select-options to factorize option selection in forms - create select-channel to simplify channel selection - refactor tags validation
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss1
-rw-r--r--client/src/sass/include/_mixins.scss69
-rw-r--r--client/src/sass/ng-select.scss29
3 files changed, 30 insertions, 69 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 30960393f..d2811d24a 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -13,6 +13,7 @@ $assets-path: '../../assets/';
13 13
14@import './bootstrap'; 14@import './bootstrap';
15@import './primeng-custom'; 15@import './primeng-custom';
16@import './ng-select.scss';
16 17
17[hidden] { 18[hidden] {
18 display: none !important; 19 display: none !important;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index e4c2dffa0..ae2b99a5b 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -807,75 +807,6 @@
807 } 807 }
808} 808}
809 809
810@mixin ng2-tags {
811 ::ng-deep {
812 .ng2-tag-input {
813 border: none !important;
814 }
815
816 .ng2-tags-container {
817 display: flex;
818 align-items: center;
819 border: 1px solid #C6C6C6;
820 border-radius: 3px;
821 padding: 5px !important;
822 height: max-content;
823
824 &:focus-within {
825 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
826 }
827 }
828
829 tag-input-form {
830 input {
831 height: 30px !important;
832 font-size: 12px !important;
833
834 background-color: pvar(--mainBackgroundColor) !important;
835 color: pvar(--mainForegroundColor) !important;
836 }
837 }
838
839 tag {
840 background-color: $grey-background-color !important;
841 color: #000 !important;
842 border-radius: 3px !important;
843 font-size: 12px !important;
844 height: 30px !important;
845 line-height: 30px !important;
846 margin: 0 5px 0 0 !important;
847 cursor: default !important;
848 padding: 0 8px 0 10px !important;
849
850 div {
851 height: 100% !important;
852 }
853 }
854
855 delete-icon {
856 cursor: pointer !important;
857 height: auto !important;
858 vertical-align: middle !important;
859 padding-left: 6px !important;
860
861 svg {
862 position: relative;
863 top: -1px;
864 height: auto !important;
865 vertical-align: middle !important;
866
867 path {
868 fill: pvar(--greyForegroundColor) !important;
869 }
870 }
871
872 &:hover {
873 transform: none !important;
874 }
875 }
876 }
877}
878
879@mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) { 810@mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) {
880 width: 95%; 811 width: 95%;
881 border-top: .05rem solid $color; 812 border-top: .05rem solid $color;
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
new file mode 100644
index 000000000..f836e203c
--- /dev/null
+++ b/client/src/sass/ng-select.scss
@@ -0,0 +1,29 @@
1@import '_variables';
2
3$ng-select-highlight: #f2690d;
4// $ng-select-primary-text: #333 !default;
5// $ng-select-disabled-text: #f9f9f9 !default;
6// $ng-select-border: #ccc !default;
7// $ng-select-border-radius: 4px !default;
8// $ng-select-bg: #ffffff !default;
9// $ng-select-selected: lighten($ng-select-highlight, 46) !default;
10// $ng-select-marke d: lighten($ng-select-highlight, 48) !default;
11$ng-select-box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
12// $ng-select-placeholder: lighten($ng-select-primary-text, 40) !default;
13$ng-select-height: 30px;
14// $ng-select-value-padding-left: 10px !default;
15// $ng-select-value-font-size: 0.9em !default;
16
17@import "~@ng-select/ng-select/scss/default.theme.scss";
18
19.ng-input {
20 font-size: .9em;
21}
22
23.ng-select {
24 &.ng-select-focused {
25 &:not(.ng-select-opened) > .ng-select-container {
26 border-color: #ccc !important;
27 }
28 }
29}