Temp

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

apps/accessibility/css/dark.scss

@@ -21,6 +21,9 @@ $color-box-shadow: transparentize(darken($color-main-background, 70%), 0.5);
 $color-border: lighten($color-main-background, 7%);
 $color-border-dark: lighten($color-main-background, 14%);
 
+// Ripple effect
+$color-ripple: rgba(255, 255, 255, .4);
+
 #app-navigation > ul > li > a:first-child,
 #app-navigation > ul > li > ul > li > a:first-child,
 #contactsmenu-menu a,

core/css/css-variables.scss

@@ -44,6 +44,8 @@
 
 	--color-border: #{$color-border};
 	--color-border-dark: #{$color-border-dark};
+	--color-ripple: #{$color-ripple};
+	
 	--border-radius: #{$border-radius};
 	--border-radius-large: #{$border-radius-large};
 	--border-radius-pill: #{$border-radius-pill};
@@ -58,3 +60,4 @@
 
 	--header-height: #{$header-height};
 }
+

core/css/inputs.scss

@@ -24,7 +24,7 @@ $default-height: 34px;
 
 /* Simple selector to allow easy overriding */
 select,
-button,
+button:not(.button-vue),
 input,
 textarea,
 div[contenteditable=true],
@@ -43,7 +43,7 @@ div[contenteditable=false] {
 /* Default global values */
 div.select2-drop .select2-search input, // TODO: REMOVE WHEN DROPPING SELECT2
 select,
-button, .button,
+button:not(.button-vue), .button:not(.button-vue),
 input:not([type='range']),
 textarea,
 div[contenteditable=true],
@@ -168,8 +168,8 @@ input {
 
 /* 'Click' inputs */
 select,
-button, .button,
-input[type='button'],
+button:not(.button-vue), .button:not(.button-vue),
+input[type='button']:not(.button-vue),
 input[type='submit'],
 input[type='reset'] {
 	padding: 6px 16px;
@@ -184,7 +184,7 @@ input[type='reset'] {
 	}
 }
 select,
-button, .button {
+button:not(.button-vue), .button:not(.button-vue) {
 	* {
 		cursor: pointer;
 	}
@@ -197,8 +197,8 @@ button, .button {
 }
 
 /* Buttons */
-button, .button,
-input[type='button'],
+button:not(.button-vue), .button:not(.button-vue),
+input[type='button']:not(.button-vue),
 input[type='submit'],
 input[type='reset'] {
 	font-weight: bold;
@@ -215,7 +215,7 @@ input[type='reset'] {
 		color: #fff !important;
 	}
 }
-button, .button {
+button:not(.button-vue), .button:not(.button-vue) {
 	> span {
 		/* icon position inside buttons */
 		&[class^='icon-'],

core/css/variables.scss

@@ -81,6 +81,12 @@ $color-box-shadow: transparentize(nc-darken($color-main-background, 70%), 0.5) !
 $color-border: nc-darken($color-main-background, 7%) !default;
 // darker border like inputs or very visible elements
 $color-border-dark: nc-darken($color-main-background, 14%) !default;
+
+// Ripple effect
+$color-ripple: nc-darken($color-main-background, 30%);
+$color-ripple-primary: nc-lighten($color-primary-active, 20%);
+
+
 $border-radius: 3px !default;
 $border-radius-large: 10px !default;
 // Pill-style button, value is large so big buttons also have correct roundness