Settings to vuejs

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

1 files changed, 180 insertions, 3 deletions

diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 7509575f9e5..a1a4b15fdd5 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -67,6 +67,13 @@ div[contenteditable=true],
 		cursor: default;
 		opacity: 0.5;
 	}
+    &:required {
+        box-shadow: none;
+    }
+    &:invalid {
+        box-shadow: none !important;
+        border-color: $color-error;
+    }
 	/* Primary action button, use sparingly */
 	&.primary {
 		background-color: $color-primary-element;
@@ -216,7 +223,8 @@ input {
 			margin-left: -8px !important;
 			border-left-color: transparent !important;
 			border-radius: 0 $border-radius $border-radius 0 !important;
-			background-clip: padding-box; /* Avoid background under border */
+			background-clip: padding-box;
+			/* Avoid background under border */
 			background-color: $color-main-background !important;
 			opacity: 1;
 			width: 34px;
@@ -227,6 +235,7 @@ input {
 				background-image: url('../img/actions/confirm-fade.svg?v=2') !important;
 			}
 		}
+
 		/* only show confirm borders if input is not focused */
 		&:not(:active):not(:hover):not(:focus){
 			+ .icon-confirm {
@@ -244,14 +253,19 @@ input {
 		&:active,
 		&:hover,
 		&:focus {
+            &:invalid {
+                + .icon-confirm {
+                    border-color: $color-error;
+                }
+            }
 			+ .icon-confirm {
 				border-color: $color-primary-element !important;
 				border-left-color: transparent !important;
-				z-index: 2; /* above previous input */
+                /* above previous input */
+				z-index: 2;
 			}
 		}
 	}
-
 }
 
 
@@ -606,6 +620,169 @@ input {
 	}
 }
 
+
+/* Vue multiselect */
+.multiselect.multiselect-vue {
+    margin: 1px 2px;
+    padding: 0 !important;
+    display: inline-block;
+    min-width: 160px;
+    width: 160px;
+    position: relative;
+    background-color: $color-main-background;
+    &.multiselect--active {
+        /* Opened: force display the input */
+        input.multiselect__input {
+            opacity: 1 !important;
+        }
+    }
+    &.multiselect--disabled {
+        background-color: nc-darken($color-main-background, 8%);
+    }
+    .multiselect__tags {
+        display: flex;
+        flex-wrap: nowrap;
+        overflow: hidden;
+        border: 1px solid nc-darken($color-main-background, 14%);
+        cursor: pointer;
+        position: relative;
+        border-radius: 3px;
+        height: 38px;
+        /* tag wrapper */
+        .multiselect__tags-wrap {
+            align-items: center;
+            display: inline-flex;
+            overflow: hidden;
+            max-width: 100%;
+            position: relative;
+            padding: 3px 5px;
+            /* no tags or simple select? Show input directly
+			   input is used to display single value */
+            &:empty ~ input.multiselect__input {
+                opacity: 1 !important;
+                /* hide default empty text, show input instead */
+                + span:not(.multiselect__single) {
+                    display: none;
+                }
+            }
+            /* selected tag */
+            .multiselect__tag {
+                flex: 0 0 auto;
+                line-height: 20px;
+                padding: 1px 5px;
+                background-image: none;
+                color: nc-lighten($color-main-text, 33%);
+                border: 1px solid nc-darken($color-main-background, 14%);
+                display: inline-flex;
+                align-items: center;
+                border-radius: 3px;
+                margin-right: 5px;
+            }
+        }
+        /* Single select default value */
+        .multiselect__single {
+            padding: 8px 10px;
+            flex: 0 0 100%;
+            z-index: 5;
+            background-color: $color-main-background;
+            cursor: pointer;
+        }
+        /* displayed text if tag limit reached */
+        .multiselect__strong {
+            flex: 0 0 auto;
+            line-height: 20px;
+            color: nc-lighten($color-main-text, 33%);
+            display: inline-flex;
+            align-items: center;
+	        opacity: .7;
+        }
+        /* default multiselect input for search and placeholder */
+        input.multiselect__input {
+            width: 100% !important;
+            position: absolute !important;
+            margin: 0;
+            opacity: 0;
+            /* let's leave it on top of tags but hide it */
+            height: 100%;
+            border: none;
+            /* override hide to force show the placeholder */
+            display: block !important;
+        }
+    }
+    /* results wrapper */
+    .multiselect__content-wrapper {
+        position: absolute;
+        width: 100%;
+        margin-top: -1px;
+        border: 1px solid nc-darken($color-main-background, 14%);
+        background: $color-main-background;
+        z-index: 50;
+        .multiselect__content {
+            width: 100%;
+            padding: 5px 0;
+        }
+        li {
+            padding: 5px;
+            position: relative;
+            display: flex;
+            align-items: center;
+            background-color: transparent;
+            &,
+            span {
+                cursor: pointer;
+            }
+            > span {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                height: 20px;
+                margin: 0;
+                min-height: 1em;
+                -webkit-touch-callout: none;
+                -webkit-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+                display: inline-flex;
+                align-items: center;
+                background-color: transparent !important;
+                color: nc-lighten($color-main-text, 33%);
+                width: 100%;
+                /* selected checkmark icon */
+                &::before {
+                    content: ' ';
+                    background-image: url('../img/actions/checkmark.svg?v=1');
+                    background-repeat: no-repeat;
+                    background-position: center;
+                    min-width: 16px;
+                    min-height: 16px;
+                    display: block;
+                    opacity: 0.5;
+                    margin-right: 5px;
+                    visibility: hidden;
+                }
+                /* add the prop tag-placeholder="create" to add the +
+				 * icon on top of an unknown-and-ready-to-be-created entry
+				 */
+                &[data-select='create'] {
+                    &::before {
+                        background-image: url('../img/actions/add.svg?v=1');
+                        visibility: visible;
+                    }
+                }
+                &.multiselect__option--highlight {
+                    color: $color-main-text;
+                }
+                &.multiselect__option--selected {
+                    &::before {
+                        visibility: visible;
+                    }
+                }
+            }
+        }
+    }
+}
+
 /* Progressbar */
 progress {
 	display: block;