New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update styles to reflect changes in new Material Design guidelines #189

Open
sesemaya opened this Issue May 11, 2018 · 2 comments

Comments

Projects
None yet
3 participants
@sesemaya
Contributor

sesemaya commented May 11, 2018

Google just unveiled the next stage for Material Design and updated its stylistic guidelines. Some of the changes may require changes to daemonite-material in order to stay up to date. These changes will be listed here as a ship list for a future release (probably v4.2).

New Material guidelines vs previous guidelines.

General changes

  • Increase default border radius from 2px to 4px
  • New overlay specs
  • Update default danger, success and warning colours
  • Update typography

Individual component changes

  • Check new specs for the following components:
  • App bars (.navbar)
  • Buttons (.btn)
  • Cards (.card)
  • Chips (.chip)
  • Data tables (.table)
  • Dialogs (.modal)
  • Lists (.list-group and .expansion-panel)
  • Menus (.dropdown-menu and .menu)
  • Navigation drawers (.navdrawer)
  • Progress indicators (.progress)
  • Selection controls (.custom-control)
  • Sliders (.custom-range)
  • Snackbars (.snackbar)
  • Tabs (.nav-tabs)
  • Text fields (.form-control)
  • Tooltips (.tooltip)

App bars (bottom and top)

  • Dense app bar
  • Extended app bar
  • Is inset FAB easy to implement?

Banners

  • New component (banner probably can translate to Bootstrap's .jumbotron)

Buttons

  • Outlined button

Buttons: floating action button

  • Extended FAB

Chips

  • Outlined chip
  • States (i.e. .chip-danger, .chip-success, .chip-warning, etc.)

Dialogs

  • Scrolling dialog

Navigation drawers

  • Bottom drawer

Progress indicators

  • Determinate circular progress indicator

Text fields

  • Outlined text field

This list is not complete yet.

@gamul

This comment has been minimized.

gamul commented Jun 13, 2018

Hi!
Thank you for great job!
When you are planning to release this enhancements?

@ondraczsk

This comment has been minimized.

ondraczsk commented Jun 21, 2018

I remake this material design to new M design- here is an example: http://ondrovywebovky.tk

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment