Vaadin 8: Anpassen der Tastenfarbe

Question

Ich möchte die grüne Farbe von der Valo "freundlich" -Taste ändern, aber ich scheiterte. Ich habe wie in Vaadin Upload Button, CSS to change its color (same styles as Button)? beschrieben, aber ich glaube, ich habe etwas verpasst.

Vom styles.css kopiert ich die

.mytheme .v-button-friendly { 
height: 37px; 
padding: 0 16px; 
color: #eaf4e9; 
font-weight: 400; 


border-radius: 4px; 
border: 1px solid #227719; 
border-top-color: #257d1a; 
border-bottom-color: #1e6b15; 
background-color: #2c9720; 
background-image: -webkit-linear-gradient(top, #2f9f22 2%, #26881b 98%); 
background-image: linear-gradient(to bottom,#2f9f22 2%, #26881b 98%); 
-webkit-box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05); 
box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05); 
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05); 
} 

zum mytheme.scss und verändert nur die Farbe. mytheme.scss sieht nun wie folgt aus:

@import "../valo/valo.scss"; 

@mixin mytheme { 
    @include valo; 

.v-button-sgcgreen { 
height: 37px; 
padding: 0 16px; 
color: #006666; 
font-weight: 400; 


border-radius: 4px; 
border: 1px solid #227719; 
border-top-color: #257d1a; 
border-bottom-color: #1e6b15; 
background-color: #006666; 
background-image: -webkit-linear-gradient(top, #2f9f22 2%, #26881b 98%); 
background-image: linear-gradient(to bottom,#2f9f22 2%, #26881b 98%); 
-webkit-box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05); 
box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05); 
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05); 
} 
} 

und es wird bis zum Ende der styles.css Datei hinzugefügt als .mytheme .v-button-sgcgreen {....}

I Legen Sie den Stil für die Schaltfläche als

Button showAllProbesBtn = new Button("Show all"); 
showAllProbesBtn.addStyleName("sgcgreen"); 

Aber die Schaltfläche ist standardmäßig grau und hat nicht die angegebene Farbe.

Was fehlt mir? Vielen Dank für Ihre Hilfe!

Edit:

Es scheint, was ich tat, richtig ist, aber eben nicht direkt angezeigt. Obwohl ich Maven clean mehrmals installiert habe und den Tomcat neu gestartet habe, erschien die richtige Farbe erst, nachdem ich etwas anderes im Code geändert habe.

Wo wird der Stil zwischengespeichert? Was muss ich tun, um Stiländerungen in Eclipse und in Chrome sofort zu sehen?

Answer 1

Ich empfehle, dass Sie die Valo-Variable v-friendly-color ändern (siehe Valo theme doc). Beispiel mytheme.scss:

// overwrite Valo variables 
$v-friendly-color: #0000F0; 

// Import valo after setting the parameters 
@import "../valo/valo"; 

@mixin goidentity { 
    @include valo; 
} 

Das Thema Valo wird dann die Farbe nehmen Sie festlegen. Kein Problem mit CSS-Stilen. Ich weiß jedoch nicht, ob diese Farbvariable an anderer Stelle im Thema verwendet wird. Dies könnte andere Stile als nur die Schaltfläche "freundlich" beeinflussen.