Set border to the grid (Vaadin 7.4.9) - grid

Question

I need to add border to the columns in grid.
In my webapp I have addons.scss, mytheme.scss, styles.scss and styles.css. How i can add this new borders into my grid?
My grid code -
#Override
protected void init(VaadinRequest vaadinRequest) {
Grid grid = new Grid();
IndexedContainer container = new IndexedContainer();
grid.setContainerDataSource(container);
container.addContainerProperty("September", String.class, null);
container.addContainerProperty("Person1", Integer.class, 0);
container.addContainerProperty("Person2", Integer.class, 0);
container.addContainerProperty("Person3", Integer.class, 0);
container.addContainerProperty("Person4", Integer.class, 0);
container.addContainerProperty("Person5", Integer.class, 0);
container.addContainerProperty("Person6", Integer.class, 0);
container.addContainerProperty("Person7", Integer.class, 0);
container.addContainerProperty("Person8", Integer.class, 0);
Grid.HeaderRow row = grid.addHeaderRowAt(0);
Grid.HeaderRow row2 = grid.addHeaderRowAt(1);
String[] Group1 = {"Person3", "Person4", "Person1", "Person2"};
String[] Group2 = {"Person7", "Person8", "Person5", "Person6"};
String[] Group3 = {"Person3", "Person4"};
String[] Group4 = {"Person1", "Person2"};
String[] Group5 = {"Person7", "Person8"};
String[] Group6 = {"Person5", "Person6"};
row.join(Group1).setText("Čerpacia stanica");
row.join(Group2).setText("Panos");
row2.join(Group3).setText("TPP");
row2.join(Group4).setText("Brigada");
row2.join(Group5).setText("TPP");
row2.join(Group6).setText("Brigada");
container.addItem(1);
Item item = container.getItem(1);
item.getItemProperty("September").setValue("1.9.2017 Piatok");
...
//This is from your post
grid.setCellStyleGenerator(new Grid.CellStyleGenerator() {
#Override
public String getStyle(Grid.CellReference cellReference) {
if ("TPP".equals(cellReference.getPropertyId()) ||
"Brigáda".equals(cellReference.getPropertyId())) {
return "right-and-left-border";
else {
return null;
}
}
});
}
There is class that i have in my webapp folder.
Mytheme.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;
// 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 mytheme {
#include valo;
.mytheme .v-grid-cell
{
font-size: 5px;
overflow: visible;
}
//I insert this code here
.v-grid-cell.right-and-left-border {
border-left: solid 2px black;
border-right: solid 2px black;
}
// Insert your own theme rules here
}
There is code from styles.scss
#import "mytheme.scss";
#import "addons.scss";
// This file prefixes all rules with the theme name to avoid causing conflicts with other themes.
// The actual styles should be defined in mytheme.scss
.mytheme {
#include addons;
#include mytheme;
}
This is class addons.scss
/* This file is automatically managed and will be overwritten from time to time. */
/* Do not manually edit this file. */
/* Import and include this mixin into your project theme to include the addon themes */
#mixin addons {
}
And styles.css have 13000 lines ...
After insert your code into mytheme.scss and grid set style method into my java code, then i recompiled the project. But when i refresh the page, all is the same.
--
Now I want update some styles in my theme. E.G
.mytheme .v-grid-row > td, .mytheme .v-grid-editor-cells > div {
font-size: 15px;
border-left: 1px solid #d4d4d4;
border-bottom: 1px solid #d4d4d4;
}
and i want have some new styles
.mytheme .v-grid-row > td, .mytheme .v-grid-editor-cells > div {
text-align: center;
font-weight: bold;
font-size: 10px;
border-left: 1px solid #d4d4d4;
border-bottom: 1px solid #d4d4d4;
}
Where do I save it? Thanks again :)