Material
Material Theme for Vaadin 7 or 8
A Vaadin Theme based on the Material Design by Google, with a few small transitions. Heavily inspired by Angular and Materialize.
Further Information to get you started can be found in the Wiki
Notes:
- Variables can be found here
- I recommend to read some of the Material Design guidelines before you start using the Theme.
- The Theme is not a complete Implementation of Material Design
- If you are working with Vaadin Designer 1 or 2
You need help, miss a feature or found a bug? Create an issue on Github!
Sample code
$mat-background-color: #fafafa; // #fafafa for a light and #303030 for a dark theme $v-focus-color: #00BCD4; // (You can find colors at materialpalette.com) $v-focus-color is supposed to be your accent color // Note: " ... Using colors from the Material Design palette is optional. ... " @import "../material/material.scss"; @mixin mytheme { @include material; // Insert your own theme rules here }
//flat Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_FLAT); //flat primary Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_PRIMARY); //flat friendly Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_FRIENDLY); //flat danger Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_DANGER); //flat round Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_ROUND); //flat round primary Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_PRIMARY); //flat round friendly Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_FRIENDLY); //flat round danger Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_DANGER); //flat border Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_BORDER); //flat border primary Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_PRIMARY); //flat border friendly Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_FRIENDLY); //flat border danger Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_DANGER); //flat round border Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_BORDER); //flat round border primary Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_PRIMARY); //flat round border friendly Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_FRIENDLY); //flat round border danger Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_DANGER); //flat floating-action Button Button button = new Button(); button.setIcon(VaadinIcons.PLUS); button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_FLOATING_ACTION); //flat floating-action friendly Button Button button = new Button(); button.setIcon(VaadinIcons.PLUS); button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_FLOATING_ACTION + " " + MaterialTheme.BUTTON_FRIENDLY); //flat floating-action danger Button Button button = new Button(); button.setIcon(VaadinIcons.PLUS); button.addStyleName(MaterialTheme.BUTTON_FLAT + " " + MaterialTheme.BUTTON_FLOATING_ACTION + " " + MaterialTheme.BUTTON_DANGER);
HorizontalLayout card0 = new HorizontalLayout(); card0.addStyleName(MaterialTheme.CARD_0); HorizontalLayout card1 = new HorizontalLayout(); card1.addStyleName(MaterialTheme.CARD_1); HorizontalLayout card2 = new HorizontalLayout(); card2.addStyleName(MaterialTheme.CARD_2); HorizontalLayout card3 = new HorizontalLayout(); card3.addStyleName(MaterialTheme.CARD_3); HorizontalLayout card4 = new HorizontalLayout(); card4.addStyleName(MaterialTheme.CARD_4); HorizontalLayout card5 = new HorizontalLayout(); card5.addStyleName(MaterialTheme.CARD_5); HorizontalLayout hoverable = new HorizontalLayout(); hoverable.addStyleName(MaterialTheme.CARD_HOVERABLE);
// TextFields TextField textStandard = new TextField("Standard TextField"); TextField textBorderless = new TextField("Borderless TextField"); textBorderless.addStyleName("borderless"); TextField textFloating = new TextField("Floating TextField"); textFloating.addStyleName("floating"); // ComboBoxes ComboBox<String> comboStandard = new ComboBox<>("Standard ComboBox", Arrays.asList("One", "Two", "Three")); ComboBox<String> comboBorderless = new ComboBox<>("Borderless ComboBox", Arrays.asList("One", "Two", "Three")); comboBorderless.addStyleName("borderless"); ComboBox<String> comboFloating = new ComboBox<>("Floating ComboBox", Arrays.asList("One", "Two", "Three")); comboFloating.addStyleName("floating"); // DateFields DateField dateStandard = new DateField("Standard DateField"); DateField dateBorderless = new DateField("Borderless DateField"); dateBorderless.addStyleName("borderless"); DateField dateFloating = new DateField("Floating DateField"); dateFloating.addStyleName("floating");
// Button Button button = new Button("Click Me"); button.addStyleName(null); //primary Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_PRIMARY); //friendly Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_FRIENDLY); //danger Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_DANGER); //borderless Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_BORDERLESS); //borderless primary Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_BORDERLESS + " " + MaterialTheme.BUTTON_PRIMARY); //borderless friendly Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_BORDERLESS + " " + MaterialTheme.BUTTON_FRIENDLY); //borderless danger Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_BORDERLESS + " " + MaterialTheme.BUTTON_DANGER); //round Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_ROUND); //round primary Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_PRIMARY); //round friendly Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_FRIENDLY); //round danger Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_DANGER); //border Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_BORDER); //border primary Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_PRIMARY); //border friendly Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_FRIENDLY); //border danger Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_DANGER); //round border Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_BORDER); //round border primary Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_PRIMARY); //round border friendly Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_FRIENDLY); //round border danger Button Button button = new Button("Click Me"); button.addStyleName(MaterialTheme.BUTTON_ROUND + " " + MaterialTheme.BUTTON_BORDER + " " + MaterialTheme.BUTTON_DANGER); //floating-action Button Button button = new Button(); button.setIcon(VaadinIcons.PLUS); button.addStyleName(MaterialTheme.BUTTON_FLOATING_ACTION); //floating-action friendly Button Button button = new Button(); button.setIcon(VaadinIcons.PLUS); button.addStyleName(MaterialTheme.BUTTON_FLOATING_ACTION + " " + MaterialTheme.BUTTON_FRIENDLY); //floating-action danger Button Button button = new Button(); button.setIcon(VaadinIcons.PLUS); button.addStyleName(MaterialTheme.BUTTON_FLOATING_ACTION + " " + MaterialTheme.BUTTON_DANGER);
Links
- Source Code
- Issue Tracker
- Github
- Material Design - Cards
- Material Design - Buttons
- Wiki
- Material Design - Guidelines
- Discussion Forum
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
NOTICE: Buttons are now by default raised again
- fixes hover effect on buttons inside a v-component-group
- fixes text color in session v-notification
- fixes inconsistent v-button padding
- Released
- 2017-06-15
- Maturity
- BETA
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 7.3+
- Vaadin 8.0+
- Browser
- Firefox
- Google Chrome
- Microsoft Edge
Material - Vaadin Add-on Directory
Material Theme for Vaadin 7 or 8Issue Tracker
Github
Material Design - Cards
Material Design - Buttons
Wiki
Material Design - Guidelines
Discussion Forum
Material version 0.5.1
- removed unused variables
Material version 0.5.2
- added classes for cards and hoverable cards
Material version 0.5.3
- correct margin bug inside of panels
Material version 0.5.4
-tabsheet caption fix
Material version 0.5.5
- style "borderless" has no border anymore
- introduced "floating" as a new style for most input fields
- fixed windows top margin bug
Material version 0.5.6
- fixes bug #5: Active button style on mobile devices (Thanks @milomirtopic for reporting)
- added borderless error / success label
- NOTE: style "action" renamed to "floating-action"
Material version 0.5.7
* Fixes Issue #6 - Default ComboBox border always has focus
* Fixes Issue #7 - Issue #5 should also be applied to card-hoverable
Material version 0.5.8
- Introduced new Button variation "border”
Material version 0.5.9
- Introduced new variable $mat-background-color which is kind of similar to $v-background-color in the standard valo. It changes the appearance of the most components, and can be used to set a dark Material theme (Take a look at the updated example)
- v-slider handle size decreased
- Buttons inside of raised elements now keep their own elevation, it is up to the developer to use the correct buttons in a specific environment styles (See https://material.io/guidelines/components/buttons.html#buttons-style / Flat Buttons)
Material version 0.6.1
- Class "MaterialTheme" added to add styles easier (similar to the class "ValoTheme"). To see how to use them take a look at the code examples.
- __Button style "elevated" renamed to "floating"__
Material version 0.6.2
- changed the h1, h2 ... font sizes to mimic the material guidelines
Material version 0.6.3
bump Vaadin Version
Material version 0.7.0
NOTICE:
- the Default button styles were reverted - Buttons are now by default raised again
- The Code Examples and the images are currently not up-to-date, I will update them later.
Material version 0.7.1
NOTICE: Buttons are now by default raised again
- fixes hover effect on buttons inside a v-component-group
- fixes text color in session v-notification
- fixes inconsistent v-button padding
Material version 0.7.2
NOTICE: Buttons are now by default raised again
- added centered ripple effect to buttons
Material version 0.7.3
NOTICE:
- Buttons are now by default raised again
- Ripple effect on buttons was introduced
Feature:
- Added possiblity to add v-datefields, v-textfield and v-filterselect with a custom color ("custom")
Fixes:
- Style issues in v-reconnect-dialog
- Style issues in v-filterselect inside of a group
Material version 0.7.4
NOTICE:
- Buttons are now by default raised again
- Ripple effect on buttons was introduced
Feature:
- Added possiblity to add v-datefields, v-textfield and v-filterselect with a custom color ("custom")
Material version 0.7.5
NOTICE:
- Buttons are now by default raised again
- Ripple effect on buttons was introduced
Feature:
- Added possiblity to add v-datefields, v-textfield and v-filterselect with a custom color ("custom")
Material version 0.7.6
NOTICE:
- Buttons are now by default raised again
- Ripple effect on buttons and v-menubar was introduced
Feature:
- Added possiblity to add all buttons, v-menubar, v-datefields, v-textfield and v-filterselect with a custom color by adding the new style ("custom")
Material version 0.7.7
NOTICE:
- Buttons are now by default raised again
- Ripple effect on buttons and v-menubar was introduced
Feature:
- Added possiblity to add all buttons, v-menubar, v-datefields, v-textfield and v-filterselect with a custom color by adding the new style ("custom")
Material version 0.7.8
NOTICES:
- Buttons are now by default raised again
- Ripple effect on buttons and v-menubar was introduced
Feature:
- Added possiblity to add all buttons, v-menubar, v-datefields, v-textfield and v-filterselect with a custom color by adding the new style ("custom")
Material version 0.7.9
NOTICES:
- Buttons are now by default raised again
- Ripple effect for buttons, v-upload and v-menubar was introduced
Changelog:
- Added possiblity to add all buttons, v-menubar, v-datefields, v-textfield and v-filterselect with a custom color by adding the new style ("custom")
- Added all buttons styles for the Upload Component (an exception is floating-action which need to be renamed another name -> floating-action-upload)
Material version 0.8.1
NOTICES:
- Buttons are now by default raised again
- Ripple effect for buttons, v-upload and v-menubar was introduced
Changelog:
- material styling for v-tooltip added
- material styling for the datepicker added
Material version 0.8.2
NOTICES:
- Buttons are now by default raised again
- Ripple effect for buttons, v-upload and v-menubar was introduced
Changelog:
- v-button borderless hover style fix
- style fixes for accordion
- style fixes for twin-col
- v-button mobile style fix
- improved styling on colorpicker popup
- fixes v-button with "icon-align-top"
- fixes text alignment on v-button and v-upload with a width > default
Material version 0.8.3
NOTICES:
- Buttons are now by default raised again
- Ripple effect for buttons, v-upload and v-menubar was introduced
Changelog:
- v-textfield floating and custom focus fixes
- v-datefield custom style improvement
- v-textfield and v-datefield removed focus on read only
- v-menubar improved styling
Material version 0.8.4
NOTICES:
- Buttons are now by default raised again
- Ripple effect for buttons, v-upload and v-menubar was introduced
Changelog:
- ripple fix for default v-button and v-upload floating-action
- floating-action v-disabled elevation fix
- v-upload v-disabled style fixes
- v-button v-disabled style fixes
Material version 0.8.5
NOTICES:
- Buttons are now by default raised again
- Ripple effect for buttons, v-upload and v-menubar was introduced
- v-grid styling added
Changelog:
- v-table style fixes
- v-grid support added
Material version 0.8.6
- fixes style issues for v-colorpicker
- v-tabsheet style improvements
- v-checkbox style improvements
- v-grid style improvements
- v-inline-datefield style improvements
- v-accordion style improvements
Material version 0.8.7
- fixes for v-grid styles
Material version 0.8.8
- fixes for Issue #14 (wrong font-color in .v-tooltip) Thank you for reporting!
Material version 0.8.9
- fixes #15 by removing a styling issue for the valo menu
- overall improvements for the valo menu by adding ripple effects and shadows
- adds the proposed styling #16 enhancement for the v-grid by adding a border to last-frozen and a shadow for the grid header
- added new elevation shadow level 0.5 (stylename="z-depth-0-5" card stylename="card-0-5")
- added new elevation to the VaadinTheme class
Material version 0.9.0
- v-grid focus styling fixes
- v-grid material checkbox styling added
Material version 0.9.1
- Fixes Issue #17: The shadow of the Valo Menu is visible when the menu is closed
- Fixes Issue #18: Text Areas scroll is not working
Material version 0.9.2
- overflow fixes for twincol select and select
- increased shadow visibility for the mobile valo-menu
Material version 1.0.0
Special thanks @Dinu Mihnea
Additions:
- v-datefield button ripple
- v-component-group variations flat and material
- border-radius for v-tabsheet
- v-radiobutton animation
- shadow to v-table header
- String constants for new styles
- a reusable ripple style
- ripple effect for v-filter-select button, v-datefield button and v-tab-sheet tabs
- Merged pull request #22 Added more modern looking loading spinner
Further Improvements:
- v-accordion border
- v-slider styling
Fixes:
- v-checkbox style issues
- v-grid header shadow when using frozen columns
- margin on borderless v-component-group
- v-immediate upload
- ripple style issues
- v-datefield color style
- Merged pull request #21 Fixes overflow issues in twin-col-select
Material version 1.0.2
- added missing constant for InlineDateField
- fixing v-button link style
- v-label-spinner animation adapted to the new loading animation
- updated loading animation (increased size and decreased default spinner speed)
- a borderless v-table will now have no shadows in footer and header
- the loading indicator when switching the views on the default v-tabsheet is now visible again
- v-grid header style improvement when a scrollbar is visible
- v-grid removed shadow in a borderless grid
- borderless v-grid overflow issue fixed
Material version 1.0.3
Thanks again @DinuMihnea
Fixes Issue #24 improved hover background-color style on v-button
Fixes Issue #23 v-filter-select readonly focus issue
Material version 1.0.4
Thanks @DinuMihnea for the finding!
- fixes issue #25 | Grid horizontal scrollbar not properly displayed
Material version 1.0.5
- improved the calculation to determine an appropriate color for the ripple effect
- v-grid background issues in dark theme fixed
- added variable scrollbar color for chrome
- fixed hover button transparency
Material version 1.0.6
- allow progressbar to scale with unit size
- allow v-grid multiselect checkboxes to scale with the unit size
Material version 1.0.7
Additions:
- added height animation for v-accordion
- cursor: pointer for buttons and the styles "card-hoverable" and "ripple"
Fixes:
- fixes for style issue in .v-datefield .floating
- fixes for style issue in .v-filterselect .custom and .error
- fixes for style issue in .v-window-bottom-toolbar
- fixes style issue for .v-accordion
- fixes style issue with large vertical and horizontal splitpanel
- fixes style issue with borderless menubar with only one item
Material version 1.0.8
- fixes vertical caption alignment issue for v-upload
1.0.7:
Additions:
- added height animation for v-accordion
- cursor: pointer for buttons and the styles "card-hoverable" and "ripple"
Fixes style issues:
- .v-datefield .floating
- .v-filterselect .custom and .error
- .v-window-bottom-toolbar
- .v-accordion
- large vertical and horizontal splitpanel
- borderless menubar with only one item
Material version 1.0.9
- fixes issue #28 Selection Mode Grid
- fixes style issue for v-button icon align right
- v-panel padding corrected
- v-grid and v-table can now be customized via variables
- refactored variables
- improved focus color in grid
- improve visibility of borderless button hover effect on v-panel
- v-panel background color fix
- improved icon positioning for buttons with icon
Material version 1.1.0
- fixes style issue for v-button with icons
- added additional button style "no-border-radius"
- added support for button style "icon-only" with reduced padding
Material version 1.1.1
Fixes Issue #31 - Grid scrollbars in IE11
Material version 1.1.2
Fixes for Issue #30
Material version 1.1.3
* added new progressbar style progressbar-indeterminate (by DinuMihnea)
* added icons to notifications (by DinuMihnea)
* fixes issue #34 - in some cases the overflow in the grid is wrong calculated
Thank you @DinuMihnea
Material version 1.1.5
- styling for valo menu improved
Material version 1.1.6
- fixes styling issue of component groups with a textfield and a button
- fixing some grid styling issues that occur since Vaadin 8.1.7 in the checkboxes
- fix #36 | It is not possible to remove the grid header without removing the drop shadow thanks @evrenism for reporting
Material version 1.1.7
- fixes issue #37 | "floating-action" does not scale with v-unit-size
- fixes issue #38 | Accordion styling is broken bug
Material version 1.1.8
Fixes issue #39 | improve support for SVG icons for buttons with the "floating-action" style - thanks for reporting @evrenism
Material version 1.2.0
Issues closed:
- #45 Hamburger menu for column hiding in grid is not visible | Thanks for reporting @OSchwark
- #42 Deactivate Ink effects | Thanks for reporting @TiBiscuit07
- #41 Upload Non-immediate mode component style broken | Thanks for reporting @galcyurio
Styling improvements:
- improved grid sidebar styling