Disable style override on vue-select elements

- Disable style override on NcActionButton with `:not(.action-button)`
  due to increased specificity over scoped Vue styles when only
  `:not([class^="vs__"])` is added

Signed-off-by: Christopher Ng <chrng8@gmail.com>

1 files changed, 61 insertions, 32 deletions

diff --git a/core/css/inputs.css b/core/css/inputs.css
index 82e1a96ac7d..636d10a50ad 100644
--- a/core/css/inputs.css
+++ b/core/css/inputs.css
@@ -83,7 +83,7 @@ input, textarea, select, button, div[contenteditable=true], div[contenteditable=
 
 /* Simple selector to allow easy overriding */
 select,
-button:not(.button-vue),
+button:not(.button-vue):not(.action-button):not([class^=vs__]),
 input,
 textarea,
 div[contenteditable=true],
@@ -107,7 +107,8 @@ div.select2-drop .select2-search input,
 input[type=submit],
 input[type=button],
 input[type=reset],
-button:not(.button-vue), .button,
+button:not(.button-vue):not(.action-button):not([class^=vs__]),
+.button,
 .pager li a {
   margin: 3px 3px 3px 0;
   padding: 7px 14px;
@@ -131,9 +132,12 @@ input[type=button]:not(:disabled):not(.primary).active,
 input[type=reset]:not(:disabled):not(.primary):hover,
 input[type=reset]:not(:disabled):not(.primary):focus,
 input[type=reset]:not(:disabled):not(.primary).active,
-button:not(.button-vue):not(:disabled):not(.primary):hover,
-button:not(.button-vue):not(:disabled):not(.primary):focus,
-button:not(.button-vue):not(:disabled):not(.primary).active, .button:not(:disabled):not(.primary):hover, .button:not(:disabled):not(.primary):focus, .button:not(:disabled):not(.primary).active,
+button:not(.button-vue):not(.action-button):not([class^=vs__]):not(:disabled):not(.primary):hover,
+button:not(.button-vue):not(.action-button):not([class^=vs__]):not(:disabled):not(.primary):focus,
+button:not(.button-vue):not(.action-button):not([class^=vs__]):not(:disabled):not(.primary).active,
+.button:not(:disabled):not(.primary):hover,
+.button:not(:disabled):not(.primary):focus,
+.button:not(:disabled):not(.primary).active,
 .pager li a:not(:disabled):not(.primary):hover,
 .pager li a:not(:disabled):not(.primary):focus,
 .pager li a:not(:disabled):not(.primary).active {
@@ -145,7 +149,8 @@ div.select2-drop .select2-search input:not(:disabled):not(.primary):active,
 input[type=submit]:not(:disabled):not(.primary):active,
 input[type=button]:not(:disabled):not(.primary):active,
 input[type=reset]:not(:disabled):not(.primary):active,
-button:not(.button-vue):not(:disabled):not(.primary):active, .button:not(:disabled):not(.primary):active,
+button:not(.button-vue):not(.action-button):not([class^=vs__]):not(:disabled):not(.primary):active,
+.button:not(:disabled):not(.primary):active,
 .pager li a:not(:disabled):not(.primary):active {
   outline: none;
   background-color: var(--color-main-background);
@@ -155,7 +160,8 @@ div.select2-drop .select2-search input:not(:disabled):not(.primary):focus-visibl
 input[type=submit]:not(:disabled):not(.primary):focus-visible,
 input[type=button]:not(:disabled):not(.primary):focus-visible,
 input[type=reset]:not(:disabled):not(.primary):focus-visible,
-button:not(.button-vue):not(:disabled):not(.primary):focus-visible, .button:not(:disabled):not(.primary):focus-visible,
+button:not(.button-vue):not(.action-button):not([class^=vs__]):not(:disabled):not(.primary):focus-visible,
+.button:not(:disabled):not(.primary):focus-visible,
 .pager li a:not(:disabled):not(.primary):focus-visible {
   box-shadow: 0 0 0 2px var(--color-primary);
 }
@@ -163,7 +169,8 @@ div.select2-drop .select2-search input:disabled,
 input[type=submit]:disabled,
 input[type=button]:disabled,
 input[type=reset]:disabled,
-button:not(.button-vue):disabled, .button:disabled,
+button:not(.button-vue):not(.action-button):not([class^=vs__]):disabled,
+.button:disabled,
 .pager li a:disabled {
   background-color: var(--color-background-dark);
   color: var(--color-main-text);
@@ -174,7 +181,8 @@ div.select2-drop .select2-search input:required,
 input[type=submit]:required,
 input[type=button]:required,
 input[type=reset]:required,
-button:not(.button-vue):required, .button:required,
+button:not(.button-vue):not(.action-button):not([class^=vs__]):required,
+.button:required,
 .pager li a:required {
   box-shadow: none;
 }
@@ -182,7 +190,8 @@ div.select2-drop .select2-search input:user-invalid,
 input[type=submit]:user-invalid,
 input[type=button]:user-invalid,
 input[type=reset]:user-invalid,
-button:not(.button-vue):user-invalid, .button:user-invalid,
+button:not(.button-vue):not(.action-button):not([class^=vs__]):user-invalid,
+.button:user-invalid,
 .pager li a:user-invalid {
   box-shadow: 0 0 0 2px var(--color-error) !important;
 }
@@ -190,7 +199,8 @@ div.select2-drop .select2-search input.primary,
 input[type=submit].primary,
 input[type=button].primary,
 input[type=reset].primary,
-button:not(.button-vue).primary, .button.primary,
+button:not(.button-vue):not(.action-button):not([class^=vs__]).primary,
+.button.primary,
 .pager li a.primary {
   background-color: var(--color-primary-element);
   border-color: var(--color-primary-element);
@@ -205,8 +215,10 @@ button:not(.button-vue).primary, .button.primary,
 #header input[type=button].primary,
 #body-login :not(.body-login-container) input[type=reset].primary,
 #header input[type=reset].primary,
-#body-login :not(.body-login-container) button:not(.button-vue).primary,
-#header button:not(.button-vue).primary, #body-login :not(.body-login-container) .button.primary, #header .button.primary,
+#body-login :not(.body-login-container) button:not(.button-vue):not(.action-button):not([class^=vs__]).primary,
+#header button:not(.button-vue):not(.action-button):not([class^=vs__]).primary,
+#body-login :not(.body-login-container) .button.primary,
+#header .button.primary,
 #body-login :not(.body-login-container) .pager li a.primary,
 #header .pager li a.primary {
   border-color: var(--color-primary-text);
@@ -221,9 +233,12 @@ input[type=button].primary:not(:disabled):active,
 input[type=reset].primary:not(:disabled):hover,
 input[type=reset].primary:not(:disabled):focus,
 input[type=reset].primary:not(:disabled):active,
-button:not(.button-vue).primary:not(:disabled):hover,
-button:not(.button-vue).primary:not(:disabled):focus,
-button:not(.button-vue).primary:not(:disabled):active, .button.primary:not(:disabled):hover, .button.primary:not(:disabled):focus, .button.primary:not(:disabled):active,
+button:not(.button-vue):not(.action-button):not([class^=vs__]).primary:not(:disabled):hover,
+button:not(.button-vue):not(.action-button):not([class^=vs__]).primary:not(:disabled):focus,
+button:not(.button-vue):not(.action-button):not([class^=vs__]).primary:not(:disabled):active,
+.button.primary:not(:disabled):hover,
+.button.primary:not(:disabled):focus,
+.button.primary:not(:disabled):active,
 .pager li a.primary:not(:disabled):hover,
 .pager li a.primary:not(:disabled):focus,
 .pager li a.primary:not(:disabled):active {
@@ -237,8 +252,10 @@ input[type=button].primary:not(:disabled):focus,
 input[type=button].primary:not(:disabled):focus-visible,
 input[type=reset].primary:not(:disabled):focus,
 input[type=reset].primary:not(:disabled):focus-visible,
-button:not(.button-vue).primary:not(:disabled):focus,
-button:not(.button-vue).primary:not(:disabled):focus-visible, .button.primary:not(:disabled):focus, .button.primary:not(:disabled):focus-visible,
+button:not(.button-vue):not(.action-button):not([class^=vs__]).primary:not(:disabled):focus,
+button:not(.button-vue):not(.action-button):not([class^=vs__]).primary:not(:disabled):focus-visible,
+.button.primary:not(:disabled):focus,
+.button.primary:not(:disabled):focus-visible,
 .pager li a.primary:not(:disabled):focus,
 .pager li a.primary:not(:disabled):focus-visible {
   box-shadow: 0 0 0 2px var(--color-main-text);
@@ -247,7 +264,8 @@ div.select2-drop .select2-search input.primary:not(:disabled):active,
 input[type=submit].primary:not(:disabled):active,
 input[type=button].primary:not(:disabled):active,
 input[type=reset].primary:not(:disabled):active,
-button:not(.button-vue).primary:not(:disabled):active, .button.primary:not(:disabled):active,
+button:not(.button-vue):not(.action-button):not([class^=vs__]).primary:not(:disabled):active,
+.button.primary:not(:disabled):active,
 .pager li a.primary:not(:disabled):active {
   color: var(--color-primary-text-dark);
 }
@@ -255,7 +273,8 @@ div.select2-drop .select2-search input.primary:disabled,
 input[type=submit].primary:disabled,
 input[type=button].primary:disabled,
 input[type=reset].primary:disabled,
-button:not(.button-vue).primary:disabled, .button.primary:disabled,
+button:not(.button-vue):not(.action-button):not([class^=vs__]).primary:disabled,
+.button.primary:disabled,
 .pager li a.primary:disabled {
   background-color: var(--color-primary-element);
   color: var(--color-primary-text-dark);
@@ -308,7 +327,8 @@ input[type=time] {
 
 /* 'Click' inputs */
 select,
-button:not(.button-vue), .button,
+button:not(.button-vue):not(.action-button):not([class^=vs__]),
+.button,
 input[type=button],
 input[type=submit],
 input[type=reset] {
@@ -321,14 +341,15 @@ input[type=reset] {
   background-color: var(--color-background-dark);
 }
 select:disabled,
-button:not(.button-vue):disabled, .button:disabled,
+button:not(.button-vue):not(.action-button):not([class^=vs__]):disabled,
+.button:disabled,
 input[type=button]:disabled,
 input[type=submit]:disabled,
 input[type=reset]:disabled {
   cursor: default;
 }
 
-input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(.select2-input):not(.action-input__input),
+input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(.select2-input):not(.action-input__input):not(.action-button):not([class^=vs__]),
 select,
 div[contenteditable=true],
 textarea {
@@ -344,7 +365,7 @@ textarea {
   text-overflow: ellipsis;
   cursor: pointer;
 }
-input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(.select2-input):not(.action-input__input):not(:disabled):hover, input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(.select2-input):not(.action-input__input):not(:disabled):focus, input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(.select2-input):not(.action-input__input):not(:disabled):active,
+input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(.select2-input):not(.action-input__input):not(.action-button):not([class^=vs__]):not(:disabled):hover, input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(.select2-input):not(.action-input__input):not(.action-button):not([class^=vs__]):not(:disabled):focus, input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(.select2-input):not(.action-input__input):not(.action-button):not([class^=vs__]):not(:disabled):active,
 select:not(:disabled):hover,
 select:not(:disabled):focus,
 select:not(:disabled):active,
@@ -356,7 +377,7 @@ textarea:not(:disabled):focus,
 textarea:not(:disabled):active {
   border-color: var(--color-primary-element);
 }
-input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(.select2-input):not(.action-input__input):not(:disabled):focus,
+input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(.select2-input):not(.action-input__input):not(.action-button):not([class^=vs__]):not(:disabled):focus,
 select:not(:disabled):focus,
 div[contenteditable=true]:not(:disabled):focus,
 textarea:not(:disabled):focus {
@@ -382,16 +403,19 @@ select {
 }
 
 select *,
-button:not(.button-vue) *, .button * {
+button:not(.button-vue):not(.action-button):not([class^=vs__]) *,
+.button * {
   cursor: pointer;
 }
 select:disabled *,
-button:not(.button-vue):disabled *, .button:disabled * {
+button:not(.button-vue):not(.action-button):not([class^=vs__]):disabled *,
+.button:disabled * {
   cursor: default;
 }
 
 /* Buttons */
-button:not(.button-vue), .button,
+button:not(.button-vue):not(.action-button):not([class^=vs__]),
+.button,
 input[type=button],
 input[type=submit],
 input[type=reset] {
@@ -399,13 +423,15 @@ input[type=reset] {
   border-radius: var(--border-radius-pill);
   /* Get rid of the inside dotted line in Firefox */
 }
-button:not(.button-vue)::-moz-focus-inner, .button::-moz-focus-inner,
+button:not(.button-vue):not(.action-button):not([class^=vs__])::-moz-focus-inner,
+.button::-moz-focus-inner,
 input[type=button]::-moz-focus-inner,
 input[type=submit]::-moz-focus-inner,
 input[type=reset]::-moz-focus-inner {
   border: 0;
 }
-button:not(.button-vue).error, .button.error,
+button:not(.button-vue):not(.action-button):not([class^=vs__]).error,
+.button.error,
 input[type=button].error,
 input[type=submit].error,
 input[type=reset].error {
@@ -414,10 +440,13 @@ input[type=reset].error {
   color: #fff !important;
 }
 
-button:not(.button-vue):not(.action-button) > span, .button > span {
+button:not(.button-vue):not(.action-button):not([class^=vs__]) > span,
+.button > span {
   /* icon position inside buttons */
 }
-button:not(.button-vue):not(.action-button) > span[class^=icon-], button:not(.button-vue):not(.action-button) > span[class*=" icon-"], .button > span[class^=icon-], .button > span[class*=" icon-"] {
+button:not(.button-vue):not(.action-button):not([class^=vs__]) > span[class^=icon-], button:not(.button-vue):not(.action-button):not([class^=vs__]) > span[class*=" icon-"],
+.button > span[class^=icon-],
+.button > span[class*=" icon-"] {
   display: inline-block;
   vertical-align: text-bottom;
   opacity: 0.5;