Skip to content

Commit 1477825

Browse files
skjnldsvskjnldsv
committed
Settings vue 2
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
1 parent f6f8cd3 commit 1477825

21 files changed

Lines changed: 1358 additions & 369 deletions

File tree

‎core/css/inputs.scss‎

Lines changed: 170 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -535,9 +535,44 @@ input {
535535
.v-select {
536536
margin: 3px 3px 3px 0;
537537
display: inline-block;
538+
min-width: 160px;
539+
width: 160px;
540+
.open-indicator {
541+
/* center indicator */
542+
transform: translateY(-50%);
543+
bottom: 0 !important;
544+
&, &::before {
545+
width: 20px !important;
546+
height: 20px !important;
547+
}
548+
&::before {
549+
border: none !important;
550+
transform: none !important;
551+
background: url('../img/actions/triangle-s.svg') no-repeat center center !important;
552+
}
553+
}
554+
&.open .open-indicator{
555+
&::before {
556+
transform: rotate(180deg) !important;
557+
}
558+
}
538559
.dropdown-toggle {
539560
display: flex !important;
540-
flex-wrap: wrap;
561+
flex-wrap: nowrap;
562+
overflow-x: hidden;
563+
border-color: nc-darken($color-main-background, 14%) !important;
564+
cursor: pointer;
565+
padding: 3px 5px !important;
566+
.selected-tag-wrap {
567+
flex: 0 0 auto; /* do not shrink or grow */
568+
align-items: center;
569+
display: inline-flex;
570+
padding: 0 !important;
571+
}
572+
.placeholder {
573+
display: flex;
574+
align-items: center;
575+
}
541576
.selected-tag {
542577
line-height: 20px;
543578
padding-left: 5px;
@@ -548,12 +583,16 @@ input {
548583
display: inline-flex;
549584
align-items: center;
550585
.close {
586+
margin: 0;
551587
margin-left: 3px;
552588
}
553589
}
554590
}
555591
.dropdown-menu {
556592
padding: 0;
593+
border-color: nc-darken($color-main-background, 14%) !important;
594+
max-height: 400px;
595+
overflow-y: scroll;
557596
li {
558597
padding: 5px;
559598
position: relative;
@@ -579,6 +618,7 @@ input {
579618
align-items: center;
580619
background-color: transparent !important;
581620
color: inherit !important;
621+
width: 100%;
582622
&::before {
583623
content: ' ';
584624
background-image: url('../img/actions/checkmark.svg?v=1');
@@ -596,8 +636,6 @@ input {
596636
color: $color-main-text;
597637
}
598638
&.active > a {
599-
background-color: nc-darken($color-main-background, 3%);
600-
color: $color-main-text;
601639
&::before {
602640
visibility: visible;
603641
}
@@ -606,6 +644,135 @@ input {
606644
}
607645
}
608646

647+
/* Vue multiselect */
648+
.multiselect.multiselect-vue {
649+
margin: 1px 2px;
650+
padding: 0 !important;
651+
display: inline-block;
652+
min-width: 160px;
653+
width: 160px;
654+
position: relative;
655+
background-color: $color-main-background;
656+
&.multiselect--active {
657+
input.multiselect__input {
658+
opacity: 1 !important;
659+
}
660+
}
661+
.multiselect__tags {
662+
display: flex;
663+
flex-wrap: nowrap;
664+
overflow: hidden;
665+
border: 1px solid nc-darken($color-main-background, 14%);
666+
cursor: pointer;
667+
position: relative;
668+
border-radius: 3px;
669+
height: 38px;
670+
.multiselect__tags-wrap {
671+
align-items: center;
672+
display: inline-flex;
673+
overflow: hidden;
674+
max-width: 100%;
675+
position: relative;
676+
padding: 3px 5px;
677+
.multiselect__tag {
678+
flex: 0 0 auto;
679+
line-height: 20px;
680+
padding: 1px 5px;
681+
background-image: none;
682+
color: nc-lighten($color-main-text, 33%);
683+
border: 1px solid nc-darken($color-main-background, 14%);
684+
display: inline-flex;
685+
align-items: center;
686+
border-radius: 3px;
687+
margin-right: 5px;
688+
}
689+
/* no tags or simple select? Show input directly
690+
input is used to display single value */
691+
&:empty ~ input.multiselect__input {
692+
opacity: 1 !important;
693+
}
694+
}
695+
input.multiselect__input {
696+
width: 100% !important;
697+
position: absolute !important;
698+
margin: 0;
699+
opacity: 0; /* let's leave it on top of tags but hide it */
700+
height: 100%;
701+
border: none;
702+
}
703+
}
704+
.multiselect__content-wrapper {
705+
position: absolute;
706+
width: 100%;
707+
margin-top: -4px;
708+
border: 1px solid nc-darken($color-main-background, 14%);
709+
background: $color-main-background;
710+
z-index: 50;
711+
.multiselect__content {
712+
width: 100%;
713+
padding: 5px 0;
714+
}
715+
li {
716+
padding: 5px;
717+
position: relative;
718+
display: flex;
719+
align-items: center;
720+
background-color: transparent;
721+
&, span {
722+
cursor: pointer;
723+
}
724+
> span {
725+
white-space: nowrap;
726+
overflow: hidden;
727+
text-overflow: ellipsis;
728+
height: 20px;
729+
margin: 0;
730+
min-height: 1em;
731+
-webkit-touch-callout: none;
732+
-webkit-user-select: none;
733+
-moz-user-select: none;
734+
-ms-user-select: none;
735+
user-select: none;
736+
display: inline-flex;
737+
align-items: center;
738+
background-color: transparent !important;
739+
color: nc-lighten($color-main-text, 33%);
740+
width: 100%;
741+
&::before {
742+
content: ' ';
743+
background-image: url('../img/actions/checkmark.svg?v=1');
744+
background-repeat: no-repeat;
745+
background-position: center;
746+
min-width: 16px;
747+
min-height: 16px;
748+
display: block;
749+
opacity: 0.5;
750+
margin-right: 5px;
751+
visibility: hidden;
752+
}
753+
/* add the prop tag-placeholder="create" to add the +
754+
* icon on top of an unknown and ready-to-be-created entry
755+
*/
756+
&[data-select='create'] {
757+
&::before {
758+
background-image: url('../img/actions/add.svg?v=1');
759+
visibility: visible;
760+
}
761+
}
762+
&.multiselect__option--highlight {
763+
color: $color-main-text;
764+
}
765+
&.multiselect__option--selected {
766+
&::before {
767+
visibility: visible;
768+
}
769+
}
770+
}
771+
}
772+
}
773+
}
774+
775+
609776
/* Progressbar */
610777
progress {
611778
display: block;

0 commit comments

Comments
 (0)