diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2020-08-05 00:50:07 +0200 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2020-08-11 09:03:39 +0200 |
commit | 02c01341f4dae30ec6b81fcb644952393d73c4a8 (patch) | |
tree | aca3f2b118bb123457fd38724be68fe877504c75 /client/src/sass/include | |
parent | 766d13b4470de02d3d7bec94188260b89a356399 (diff) | |
download | PeerTube-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/include')
-rw-r--r-- | client/src/sass/include/_mixins.scss | 69 |
1 files changed, 0 insertions, 69 deletions
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; |