Skip to content

Vaadin 8 | Styling

Jump to bottom
appreciated edited this page Jun 25, 2018 · 1 revision

SASS Variables

Variable name Default Value Description
$al-bar-height 64px Sets the height of the bar on the top
$al-bar-background-color #4285f4 Sets the background color of the bar on the top
$al-bar-font-color valo-font-color($al-bar-background-color) Sets the font color of the bar on the top
$al-bar-shadow 0px 2px 10px rgba(0, 0, 0, 0.5) Sets the shadow of the bar on the top
$al-bar-z-index 10 Sets the z-index of the bar on the top also the drawer will always recieve z-index + 1 on overlay
$al-drawer-shadow 2px 2px 20px rgba(0, 0, 0, 0.3) Sets the shadow of the drawer
$al-drawer-background-color lighten($v-background-color, 5%) Sets the background color of the drawer
$al-drawer-submenu-indention 0px Sets the padding of submenus in the drawer
$al-drawer-submenu-small-indention 0px Sets the padding of submenus in the small drawer
$al-drawer-submenu-background-color rgba(valo-font-color($al-drawer-background-color), 0.05) Sets the background color of submenus in the drawer
$al-drawer-font-color valo-font-color($al-drawer-background-color) Sets the font color in the drawer
$al-drawer-persistent-shadow 0px 0px 15px 0px rgba(0, 0, 0, 0.15) Sets the shadow for the persistent version of the drawer
$al-drawer-width 256px Sets the width of the drawer
$al-drawer-small-width 64px Sets the width for the small version of the drawer
$al-menu-button-badge-background-color $v-focus-color sets the background color for the badge navigation entries
$al-menu-button-badge-font-color valo-font-color($v-focus-color, 1.0) sets the font color for the badge in navigation entries
$al-menu-button-badge-border-radius 5px sets the border radius for the badges in navigation entries
$al-menu-disable-active-style false disables any styling by the material or default theme for active navigation entries
$al-menu-submenu-max-height 999px Sets the maximum height for submenus in the drawer
$al-menu-button-active-background-color rgba(valo-font-color($al-drawer-background-color), 0.1) sets the background color for active navigation entries
$al-menu-button-active-font-color $v-focus-color sets the font color for the active navigation entries
$al-menu-button-horizontal-padding round($v-unit-size/2.4) + round($v-border-radius/3) set the horizontal padding of menu elements
$al-menu-button-height 48px sets height of navigation elements
$al-menu-button-spacing round($v-unit-size/3) sets the spacing between navigation elements
$al-menu-section-padding round($v-unit-size) sets the padding between the TOP, DEFAULT and BOTTOM sections

Styling the Menu Button

Changing the preset iron-icon to another iron-icon via JavaScript

the available ones can befound here:

document.getElementById("toggle").setAttribute("icon", "tab");

Image icon or font icon via JS:

document.getElementById("toggle").setAttribute("icon", "");

then style the button either via JS & CSS:

document.getElementById("toggle").setAttribute("style", "background: red;");

Manipulate it via CSS:

// make the button icon transparent
paper-icon-button#toggle {
    --iron-icon-stroke-color: transparent;
    --iron-icon-fill-color: transparent;
}
// add your own image or icon
paper-icon-button#toggle:after {
    position: absolute;

     // for font icon 
    content: "a";
    text-align: center;
    line-height: 40px;

    // for image
    content: "";
    background: url("my/url/path/to/resource.jpg); 

    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
Clone this wiki locally