From 1b91f6f8841b8743366f3243a1503c3358112050 Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Mon, 11 Jan 2016 15:43:11 -0600 Subject: [PATCH] #815 menus/dropdowns are fundamentally working, a bit more to do. --- docs/_data/nav.yml | 3 +- docs/material-design/buttons.md | 36 +++-- .../{list-group.md => list-groups.md} | 2 +- docs/material-design/menus.md | 152 ++++++++++++++++++ docs/material-design/test.md | 59 ------- scss/_buttons.scss | 6 +- scss/_core.scss | 1 + scss/_dropdown.scss | 17 -- scss/_menu.scss | 124 ++++++++++++++ scss/_variables.scss | 4 + scss/mixins/_buttons.scss | 7 +- scss/variables/_menu.scss | 17 ++ 12 files changed, 329 insertions(+), 99 deletions(-) rename docs/material-design/{list-group.md => list-groups.md} (99%) create mode 100644 docs/material-design/menus.md delete mode 100644 scss/_dropdown.scss create mode 100644 scss/_menu.scss create mode 100644 scss/variables/_menu.scss diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml index 7b56da9c..0a367969 100644 --- a/docs/_data/nav.yml +++ b/docs/_data/nav.yml @@ -11,7 +11,8 @@ - title: Material Design pages: - title: Test - - title: List group + - title: List groups + - title: Menus - title: Navs - title: Buttons - title: Forms diff --git a/docs/material-design/buttons.md b/docs/material-design/buttons.md index c858106c..c3e5f923 100644 --- a/docs/material-design/buttons.md +++ b/docs/material-design/buttons.md @@ -64,7 +64,7 @@ group: material-design {% endexample %} -### Sizes +## Sizes {% example html %} @@ -149,25 +149,25 @@ Using `mdb-btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing e {% example html %} {% endexample %} @@ -175,22 +175,22 @@ Using `mdb-btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing e {% example html %}
{% endexample %} @@ -201,14 +201,16 @@ Using `mdb-btn-icon-sm` on the button, or using `btn-group-sm` on the enclosing {% example html %} {% endexample %} + + diff --git a/docs/material-design/list-group.md b/docs/material-design/list-groups.md similarity index 99% rename from docs/material-design/list-group.md rename to docs/material-design/list-groups.md index fba77abe..fff7c66a 100644 --- a/docs/material-design/list-group.md +++ b/docs/material-design/list-groups.md @@ -1,6 +1,6 @@ --- layout: docs -title: List group +title: List groups group: material-design --- diff --git a/docs/material-design/menus.md b/docs/material-design/menus.md new file mode 100644 index 00000000..b197958f --- /dev/null +++ b/docs/material-design/menus.md @@ -0,0 +1,152 @@ +--- +layout: docs +title: Menus +group: material-design +--- + +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + +Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdowns/), but these are also known as menus in the [Material Design specification](https://www.google.com/design/spec/components/menus.html#menus-specs). + +## Styles + +{% example html %} + +
+ + An .mdb-btn-icon +
+ + +
+
+ + +
+ + An .mdb-btn-fab-sm +
+ + +
+
+ + +
+ + An .mdb-btn-fab +
+ + +
+
+{% endexample %} + + +## Alignment + +### Lower left side +{% example html %} +
+ +
+ + + +
+ Separated link +
+
+{% endexample %} + +### Lower right side +{% example html %} +
+ +
+ + + +
+ Separated link +
+
+{% endexample %} + +### Top left side +{% example html %} +
+ +
+ + + +
+ Separated link +
+
+{% endexample %} + +### Top right side +{% example html %} +
+ +
+ + + +
+ Separated link +
+
+{% endexample %} + + + +## Widths + +### Minimum width + +{% example html %} +
+ +
+ + +
+
+{% endexample %} + + +### Maximum width + +{% example html %} +
+ +
+ + +
+
+{% endexample %} diff --git a/docs/material-design/test.md b/docs/material-design/test.md index 8195e305..206cbc98 100644 --- a/docs/material-design/test.md +++ b/docs/material-design/test.md @@ -4,65 +4,6 @@ title: Test group: material-design --- -## Collapse method for mdb-btn-icon and field {% example html %} -
- - - - -
- -{% endexample %} - - -{% highlight js %} - // clear field value once closed - $(function() { - $('#collapse-search').on('hidden.bs.collapse', function() { - $('#search').val('') - }) - }); -{% endhighlight %} - - -## Collapse on the left -{% example html %} -
- - - - -
-{% endexample %} - - - -## With label-placeholder -Perhaps this isn't worth doing, considering the context. we need to override the top calc to determine where this goes, or perhaps we should switch to a bottom calc for everything? -{% example html %} -
- - - - - -
{% endexample %} diff --git a/scss/_buttons.scss b/scss/_buttons.scss index ee4c55fd..b6f73151 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -97,7 +97,8 @@ width: $mdb-btn-fab-size; min-width: $mdb-btn-fab-size; height: $mdb-btn-fab-size; - margin: auto; + //margin: auto; + margin: 1px; // This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have. box-shadow: 0 1px 1.5px 0 $gray-lighter, 0 1px 1px 0 $gray-light; .ripple-container { @@ -123,8 +124,7 @@ width: $mdb-btn-icon-size; min-width: $mdb-btn-icon-size; height: $mdb-btn-icon-size; - margin-right: 0; - margin-left: 0; + margin: 0; color: inherit; &.mdb-btn-icon-sm, diff --git a/scss/_core.scss b/scss/_core.scss index cafc2771..60325f1a 100644 --- a/scss/_core.scss +++ b/scss/_core.scss @@ -22,6 +22,7 @@ @import "popover"; @import "cards"; @import "modal"; +@import "menu"; @import "themes"; @import "ripples"; diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss deleted file mode 100644 index 9d4ab6ca..00000000 --- a/scss/_dropdown.scss +++ /dev/null @@ -1,17 +0,0 @@ -// Dropdown buttons (mobile and desktop) https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons - -.dropdown-menu { - border: 0; - box-shadow: 0 2px 5px 0 $gray-light; - //.divider { - // background-color: rgba(229, 229, 229, 0.12); - //} - li { - position: relative; - overflow: hidden; - a:hover { - color: $brand-primary; - background-color: transparent; - } - } -} diff --git a/scss/_menu.scss b/scss/_menu.scss new file mode 100644 index 00000000..7c3b44ff --- /dev/null +++ b/scss/_menu.scss @@ -0,0 +1,124 @@ +// Menus https://www.google.com/design/spec/components/menus.html#menus-specs +// Dropdown buttons (mobile and desktop) https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons + +.dropdown { + + .dropdown-toggle { + + &.mdb-btn-icon, + &.mdb-btn-fab { + // remove the dropdown icon + &::after { + display: none; + } + + ~ .dropdown-menu { + &.dropdown-menu-top-left, + &.dropdown-menu-top-right { + bottom: $mdb-btn-icon-size; // push up the bottom of the menu the height of the button + } + } + } + + &.mdb-btn-fab-sm { + ~ .dropdown-menu { + &.dropdown-menu-top-left, + &.dropdown-menu-top-right { + bottom: $mdb-btn-fab-size-sm; // push up the bottom of the menu the height of the button + } + } + } + + &.mdb-btn-icon { + ~ .dropdown-menu { + // collapse some spacing + margin: 0; + } + } + + } +} + +.dropdown-menu { + + display: block; // utilize transition transform instead of flipping display + padding: .5rem 0; + border: 0; + opacity: 0; + transition: transform $menu-expand-duration $mdb-animation-curve-default, opacity $menu-fade-duration $mdb-animation-curve-default; + transform: scale(0); + transform-origin: 0 0; + will-change: transform; + @include shadow-2dp(); + + .open > & { + //z-index: 999; + opacity: 1; + transform: scale(1); + } + + &.dropdown-menu-right { + right: 0; + left: auto; + transform-origin: 100% 0; + } + + &.dropdown-menu-top-left { + top: auto; + bottom: 0; // needs to be overridden with the toggle-button height, see mdb-btn-icon above + transform-origin: 0 100%; + } + + &.dropdown-menu-top-right { + top: auto; + right: 0; + bottom: 0; // needs to be overridden with the toggle-button height, see mdb-btn-icon above + left: auto; + transform-origin: 100% 100%; + } + + + // https://www.google.com/design/spec/components/menus.html#menus-specs + .dropdown-item { + + display: flex; + + min-width: $mdb-menu-item-min-width; + max-width: $mdb-menu-item-max-width; + min-height: $mdb-menu-item-min-height; + + flex-flow: row wrap; + + padding-top: $mdb-menu-item-padding-top; + padding-right: $mdb-menu-item-padding-right; + padding-bottom: $mdb-menu-item-padding-bottom; + padding-left: $mdb-menu-item-padding-left; + + // FIXME: multi-line menu word wrapping doesn't work - see the maximum width example in menus.md + overflow: hidden; + line-height: $mdb-menu-line-height; + text-overflow: ellipsis; + word-wrap: break-word; + + + // Simple menus always maintain a 16dp margin (phone) or 24dp margin (tablet) to the left and right edges of the screen. + @include media-breakpoint-up(md) { + padding-right: $mdb-menu-item-padding-right-md; + padding-left: $mdb-menu-item-padding-left-md; + } + } + + // border: 0; + // box-shadow: 0 2px 5px 0 $gray-light; + // //.divider { + // // background-color: rgba(229, 229, 229, 0.12); + // //} + // li { + // position: relative; + // overflow: hidden; + // a:hover { + // color: $brand-primary; + // background-color: transparent; + // } + // } +} diff --git a/scss/_variables.scss b/scss/_variables.scss index 0503ca78..055ae429 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -38,6 +38,7 @@ $enable-flex: true; // +@import "variables/menu"; @import "variables/drawer"; $mdb-label-color-focus: $brand-primary !default; @@ -136,3 +137,6 @@ $mdb-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default; $mdb-animation-curve-default: $mdb-animation-curve-fast-out-slow-in !default; +// Menu +$menu-expand-duration: 0.3s !default; +$menu-fade-duration: 0.2s !default; diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 916f590a..3369af6c 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -33,7 +33,12 @@ } } - &.disabled, + // when it is an icon, kill the active bg on open dropdown + .open > &.dropdown-toggle.mdb-btn-icon { + background-color: $background; + } + + &.disabled, &:disabled { &:focus, &.focus { diff --git a/scss/variables/_menu.scss b/scss/variables/_menu.scss new file mode 100644 index 00000000..0d29f3eb --- /dev/null +++ b/scss/variables/_menu.scss @@ -0,0 +1,17 @@ +$mdb-menu-line-height: 1 !default; // makes it easier to use sizes to match spec + +$mdb-menu-item-min-width: 7rem !default; // Minimum width on mobile = 2 * 56dp = 112dp +$mdb-menu-item-max-width: 17.5rem !default; // Maximum width on mobile (in both portrait and landscape) = 5 * 56dp = 280dp +$mdb-menu-item-min-height: 3rem !default; // 48px + +$mdb-menu-item-padding-right: 1rem !default; +$mdb-menu-item-padding-bottom: 1.25rem !default; +$mdb-menu-item-padding-left: 1rem !default; + +$mdb-menu-item-padding-top: ($mdb-menu-item-min-height - $font-size-base - $mdb-menu-item-padding-bottom) !default; + +// md and up +$mdb-menu-item-padding-right-md: 1.5rem !default; +$mdb-menu-item-padding-left-md: 1.5rem !default; + +