I am using Vaadin 8.4.3
I have my main msptheme.sccs file with some css.
// If you edit this file you need to compile the theme. See README.md for details.
// Global variable overrides. Must be declared before importing Valo.
// Defines the plaintext font size, weight and family. Font size affects general component sizing.
//$v-font-size: 16px;
//$v-font-weight: 300;
//$v-font-family: "Open Sans", sans-serif;
$v-layout-margin-top: 15px;
$v-layout-margin-left: 15px;
$v-layout-margin-right: 15px;
$v-layout-margin-bottom: 15px;
// Defines the border used by all components.
//$v-border: 1px solid (v-shade 0.7);
//$v-border-radius: 4px;
// Affects the color of some component elements, e.g Button, Panel title, etc
//$v-background-color: hsl(210, 0%, 98%);
// Affects the color of content areas, e.g Panel and Window content, TextField input etc
//$v-app-background-color: $v-background-color;
// Affects the visual appearance of all components
//$v-gradient: v-linear 8%;
//$v-bevel-depth: 30%;
//$v-shadow-opacity: 5%;
// Defines colors for indicating status (focus, success, failure)
//$v-focus-color: valo-focus-color(); // Calculates a suitable color automatically
//$v-friendly-color: #2c9720;
//$v-error-indicator-color: #ed473b;
// For more information, see: https://vaadin.com/book/-/page/themes.valo.html
// Example variants can be copy/pasted from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples
@import "../valo/valo.scss";
@mixin msptheme {
@include valo;
// Insert your own theme rules here
//Formatted code
.v-grid-row.select_blue .v-grid-cell {
background-color: #a8c9ff;
}
.v-grid-row-stripe.select_blue .v-grid-cell {
background-color: #a8c9ff;
}
.v-grid-row.inactive_row .v-grid-cell {
background-color: #d8d8d8;
}
.v-grid-row-stripe.inactive_row .v-grid-cell {
background-color: #d8d8d8;
}
//End Formatted code
.v-menubar-UserMenu .v-menubar-menuitem {
font-weight: bold;
font-size: 14px;
color: #fff;
}
.v-menubar-UserMenu .v-menubar-menuitem:hover {
color: #fff;
}
.v-menubar-UserMenu .v-menubar-menuitem-selected {
background: transparent;
color: #2d7ddf;
}
.v-menubar-menuitem-selected-UserMenu:hover {
background: #2d7ddf;
color: transparent;
}
.v-menubar-UserMenu .v-menubar-menuitem-selected:hover {
color: #2d7ddf;
background: transparent;
}
.v-menubar-subMenu-UserMenu .v-menubar-menuitem {
font-size: 14px;
color: #808080;
}
.v-menubar-subMenu-UserMenu .v-menubar-menuitem:hover {
color: #2d7ddf;
}
.v-grid-row.selection-checkbox-disabled {
td:first-child {
background-color: #d8d8d8;
pointer-events: none;
}
}
.v-grid-row.selection-checkbox-disabled .v-grid-cell {
background-color: #d8d8d8;
color: #808080;
}
.v-menubar-menuitem-caption.mbwhite {
color: white;
}
.login_blue {
background-color: #0B4566;
}
.header_grey {
background-color: #3c3f41;
//background-color: #575757;
}
.font_blue_header {
color: #2b78d1;
}
.vmenu_item {
color: #2d7ddf;
}
.vmenu_item_active {
border-left: 2px solid #2d7ddf;
}
.vmenu_item_inactive {
border-left: 2px solid transparent;
}
.hmenu_item {
color: white;
}
.hmenu_item_active {
border-bottom: 2px solid white;
}
.hmenu_item_inactive {
border-bottom: 2px solid transparent;
}
.invis::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
::-webkit-scrollbar {
background: transparent; /* optional: just make scrollbar invisible */
}
.wrapLine{
word-break: break-word;
word-wrap: break-word; /* IE */
white-space: -moz-pre-wrap; /* Firefox */
}
.background_light_blue {
background-color: #DBDFE5;
}
.box_shadow_standard {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.spacer_grey {
border-bottom: 1px solid #ccc;
}
.separator {
border-top: 1px solid #ccc;
}
.separator_vertical {
border-left: 1px solid #545454;
}
.label_module {
background-color: #DAE8FC;
}
.label_addon {
background-color: #D5E8D4;
}
.module {
background-color: #DAE8FC;
}
.plugin {
background-color: #D5E8D4;
}
.font_blue {
color: #04839e;
}
.font_white {
color: white;
}
.font_grey {
color: #808080;
}
.font_bold_blue_14 {
font-weight: bold;
color: #04839e;
font-size: 14px;
}
.font_bold_grey_14 {
font-weight: bold;
color: #808080;
font-size: 14px;
}
.font_bold_red_14{
font-weight: bold;
color: #D53811;
font-size: 14px;
}
...............................
There is also grid style code in this file and i want to create another file and paste there the grid style css.
I created gridStyle.scss
// If you edit this file you need to compile the theme. See README.md for details.
// Global variable overrides. Must be declared before importing Valo.
// Defines the plaintext font size, weight and family. Font size affects general component sizing.
//$v-font-size: 16px;
//$v-font-weight: 300;
//$v-font-family: "Open Sans", sans-serif;
$v-layout-margin-top: 15px;
$v-layout-margin-left: 15px;
$v-layout-margin-right: 15px;
$v-layout-margin-bottom: 15px;
// Defines the border used by all components.
//$v-border: 1px solid (v-shade 0.7);
//$v-border-radius: 4px;
// Affects the color of some component elements, e.g Button, Panel title, etc
//$v-background-color: hsl(210, 0%, 98%);
// Affects the color of content areas, e.g Panel and Window content, TextField input etc
//$v-app-background-color: $v-background-color;
// Affects the visual appearance of all components
//$v-gradient: v-linear 8%;
//$v-bevel-depth: 30%;
//$v-shadow-opacity: 5%;
// Defines colors for indicating status (focus, success, failure)
//$v-focus-color: valo-focus-color(); // Calculates a suitable color automatically
//$v-friendly-color: #2c9720;
//$v-error-indicator-color: #ed473b;
// For more information, see: https://vaadin.com/book/-/page/themes.valo.html
// Example variants can be copy/pasted from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples
@import "../valo/valo.scss";
@mixin gridStyle {
@include valo;
.v-grid {
position: relative;
}
.v-grid-scroller {
position: absolute;
z-index: 1;
outline: none;
box-sizing: border-box;
}
.v-grid-scroller-horizontal {
left: 0;
right: 0;
bottom: 0;
overflow-y: hidden;
-ms-overflow-y: hidden;
}
.v-grid-scroller-vertical {
right: 0;
top: 0;
bottom: 0;
overflow-x: hidden;
-ms-overflow-x: hidden;
}
.v-grid-scroller-vertical, .v-grid-scroller-horizontal {
border: 0px solid #d4d4d4;
}
}
And this is my styles.scss
@import "msptheme.scss";
@import "addons.scss";
@import "gridStyle.scss";
// This file prefixes all rules with the theme name to avoid causing conflicts with other themes.
// The actual styles should be defined in msptheme.scss
.msptheme {
@include addons;
@include msptheme;
@include gridStyle;
}
But there is something wrong with the coloring. Not all colors are showing.
Is this the correct way to do it?