From 887927c317df95fe91f6525223f3f8579dec7ccf Mon Sep 17 00:00:00 2001 From: Thomas Burleson Date: Thu, 3 Dec 2015 22:48:02 -0600 Subject: [PATCH 1/5] update(docs, layout): fix breakpoints, documentation, and gettingStarted * update component custom mediaQueries to be consistent with ranges defined for Layout mediaQueries * update `hide` API for mediaQueries * fix hide SCSS and component mediaQuery(s) * fix mixins for gt-lg and xl * fix flex-order with negative ordering; support -20 to 20 Fixes #5646. Fixes #6056. Fixes #5576. --- docs/app/css/style.css | 9 + docs/app/js/app.js | 27 +- docs/app/partials/getting-started.tmpl.html | 96 +++-- docs/app/partials/layout-alignment.tmpl.html | 87 +++-- ...id.tmpl.html => layout-children.tmpl.html} | 253 ++++++++---- docs/app/partials/layout-container.tmpl.html | 134 +++++-- .../partials/layout-introduction.tmpl.html | 364 ++++++++++++++++++ docs/app/partials/layout-options.tmpl.html | 179 ++++----- package.json | 2 +- src/components/autocomplete/autocomplete.scss | 2 + src/components/bottomSheet/bottom-sheet.scss | 5 +- src/components/button/button.scss | 1 + src/components/chips/chips.scss | 1 + .../chips/demoContactChips/style.scss | 3 +- src/components/dialog/dialog.scss | 4 +- src/components/menu/menu.scss | 2 + src/components/toast/toast.scss | 4 +- src/components/toolbar/toolbar.scss | 6 +- .../services/layout/layout.attributes.scss | 41 +- src/core/services/layout/layout.js | 14 +- src/core/services/layout/layout.scss | 42 +- 21 files changed, 952 insertions(+), 324 deletions(-) rename docs/app/partials/{layout-grid.tmpl.html => layout-children.tmpl.html} (51%) create mode 100644 docs/app/partials/layout-introduction.tmpl.html diff --git a/docs/app/css/style.css b/docs/app/css/style.css index 106d228043..7b21db7411 100644 --- a/docs/app/css/style.css +++ b/docs/app/css/style.css @@ -874,3 +874,12 @@ table.attributes tr td:last-child { table.md-api-table tr td:first-child { font-weight: bold; } + + +.layout_note { + font-size: 0.9em; + margin: -5px 40px 0px 20px; + color: rgb(1, 57, 114); + background-color: rgba(156, 204, 101,0.4); + padding: 20px; +} diff --git a/docs/app/js/app.js b/docs/app/js/app.js index fddd7247e1..d6a6e67c66 100644 --- a/docs/app/js/app.js +++ b/docs/app/js/app.js @@ -22,7 +22,7 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES, } }) .when('/layout/', { - redirectTo: '/layout/container' + redirectTo: '/layout/introduction' }) .when('/demo/', { redirectTo: DEMOS[0].url @@ -248,23 +248,32 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES, $location, $rootScope, $http, $wind name: 'Layout', type: 'toggle', pages: [{ - name: 'Container Elements', + name: 'Introduction', + id: 'layoutIntro', + url: 'layout/introduction' + } + ,{ + name: 'Layout Containers', id: 'layoutContainers', url: 'layout/container' - },{ - name: 'Layout System', + } + ,{ + name: 'Layout Children', id: 'layoutGrid', - url: 'layout/grid' - },{ + url: 'layout/children' + } + ,{ name: 'Child Alignment', id: 'layoutAlign', url: 'layout/alignment' - },{ + } + ,{ name: 'Options', id: 'layoutOptions', url: 'layout/options' - },{ - name: 'Tips & Tricks', // Possibly rename to Troubleshooting + } + ,{ + name: 'Troubleshooting', // Possibly rename to Troubleshooting id: 'layoutTips', url: 'layout/tips' }] diff --git a/docs/app/partials/getting-started.tmpl.html b/docs/app/partials/getting-started.tmpl.html index 7aa17f4a24..7dccbacf55 100644 --- a/docs/app/partials/getting-started.tmpl.html +++ b/docs/app/partials/getting-started.tmpl.html @@ -1,38 +1,84 @@
-

New to Angular.js? Before getting into Angular Material, it might be helpful to - read about the framework.

+

New to Angular.js? Before getting into Angular Material, it might be helpful to: +

-

How do I start?

+

+

How do I start with Angular Material?

+ title="Link opens in a new window">Use the Github Starter Project -

Including Angular Material and its dependencies

-
    -
  • Using Bower
    • -
  • Using a CDN (example below)
    • +
  • Use 'Edit on CodePen' button on any of our Demos
    + +
    • + +
  • Easily build a Material application from scratch (below)
- -
+ + +

Now just you add your Angular Material components and other HTML content to your Blank starter app.

+
+
-

Include Optional Dependencies

+

Our CodePen Community

- Angular Material integrates with some additional libraries which you may optionally include: + You can also visit our CodePen Community online to explore more Angular Material samples and ideas.

+
+ + + +
+ + +

+ +
+ +

Installing the Angular Material Libraries

+ +
+ You can install the Angular Material library (and it's dependent library) in your local project using either + NPM, JSPM, or Bower. + +

+ Angular Material also integrates with some additional, optional libraries which you may elect to include: +

+
  • ngMessages @@ -49,14 +95,18 @@

    Include Optional Dependencies

+
+
+

Unsupported Integrations

- Angular Material v1.0 has a few known integration issues with the following libraries: + Angular Material v1.0 has a few known integration issues with the following libraries. + These libraries are not compatible for dual-use with Angular Material:

  • - ngTouchs - - This module interferes with ngMaterial's click, tap, and swipe support for touch-enabled devices. + ngTouch + - This Angular.js Touch module interferes with ngMaterial's click, tap, and swipe support for touch-enabled devices.
  • diff --git a/docs/app/partials/layout-alignment.tmpl.html b/docs/app/partials/layout-alignment.tmpl.html index c9c4cc3a9e..702b660f6a 100644 --- a/docs/app/partials/layout-alignment.tmpl.html +++ b/docs/app/partials/layout-alignment.tmpl.html @@ -4,47 +4,72 @@ The layout-align attribute takes two words. The first word says how the children will be aligned in the layout's direction, and the second word says how the children will be aligned perpendicular to the layout's direction.

    -

    Only one word is required for the attribute. For example, layout="row" layout-align="center" would make the elements center horizontally and use the default behavior vertically.

    +

    Only one word is required for the attribute. + For example, layout="row" layout-align="center" would make the elements + center horizontally and use the default behavior vertically.

    layout="column" layout-align="center end" would make children align along the center vertically and along the end (right) horizontally.

    + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - -
    APISets child alignments within the layout container
    layout-alignSets default alignment unless overridden by another breakpoint.
    layout-alignSets child alignment.
    layout-align-smSets child alignment on devices less than 600px wide.
    layout-align-gt-smSets child alignment on devices greater than 600px wide.
    layout-align-mdSets child alignment on devices between 600px and 960px wide.
    layout-align-gt-mdSets child alignment on devices greater than 960px wide. -
    layout-align-lgSets child alignment on devices between 960px and 1200px wide.
    layout-align-gt-lgSets child alignment on devices greater than 1200px wide.
    + layout-align-xs + width < 600px + + + layout-align-gt-xs + width >= 600px + + + layout-align-sm + 600px <= width < 960px + + + layout-align-gt-sm + width >= 960px + + + layout-align-md + 960px <= width < 1280px + + + layout-align-gt-md + width >= 1280px + + + layout-align-lg + 1280px <= width < 1920px + + + layout-align-gt-lg + width >= 1920/b>px + + + layout-align-xl + width >= 1920px + + + +
    +

    - See below for more examples: + Below is an interactive demo that let's you explore the visual results of the different settings:

    -
    diff --git a/docs/app/partials/layout-grid.tmpl.html b/docs/app/partials/layout-children.tmpl.html similarity index 51% rename from docs/app/partials/layout-grid.tmpl.html rename to docs/app/partials/layout-children.tmpl.html index 04e921be4c..dd3f9b530d 100644 --- a/docs/app/partials/layout-grid.tmpl.html +++ b/docs/app/partials/layout-children.tmpl.html @@ -1,29 +1,32 @@
    +

    Children within a Layout Container

    +

    - To customize the size and position of elements in a layout, use the - flex, flex-order, and flex-offset attributes. + To customize the size and position of elements in a layout container, use the + flex, flex-order, and flex-offset attributes on the container's child elements:

    -
    - [flex] +
    + [flex="20"]
    -
    - [flex] +
    + [flex="70"]
    -
    +
    [flex]
    +

    Add the flex attribute to a layout's child element and the element will flex (grow or shrink) to fit the area unused by other elements. flex defines how the element will ajust its size with respect to its - parent container and the other other elements within the container. + parent container and the other other elements within the container.

    @@ -54,19 +57,45 @@ +

    A layout child's flex attribute can be given an integer value from 0-100. - The element will stretch to the percentage of available space matching the value. -

    - Currently, the flex attribute value is restricted to multiples of five and 33 or 66. -
    - For example: flex="5", flex="20", flex="33", flex="50", flex="66", flex="75", ... flex="100". + The element will stretch to the percentage of available space matching the value. Currently, the flex + attribute value is restricted to multiples of five, 33 or 66.

    + +

    For example: flex="5", flex="20", flex="33", flex="50", flex="66", flex="75", ... flex="100".

    + + + +
    +
    + flex 33% on mobile,
    and 66% on gt-sm devices. +
    +
    + flex 66% on mobile,
    and 33% on gt-sm devices. +
    +
    +     +     + +

    See the layout options page for more information on responsive flex attributes like hide-sm and layout-wrap used in the above examples.

    +
    +
    +
    + +

    Additional Flex Values

    + +

    + There are additional flex values provided by Angular Material to improve flexibility and to make the API + easier to understand. +

    +
    @@ -95,10 +124,7 @@ -

    - There are additional flex values provided by Angular Material to improve flexibility and to make the API - easier to understand. -

    + @@ -122,6 +148,18 @@
    flex
    + +
    +
    +
    + +

    Ordering HTML Elements

    + +

    + Add the flex-order attribute to a layout child to set its + order position within the layout container. Any integer value from -20 to 20 is accepted. +

    +
    @@ -142,50 +180,81 @@
    -

    - Add the flex-order attribute to a layout child to set its - position within the layout. Any value from -9 to 9 is accepted. -

    + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - -
    APIDevice width when breakpoint overrides default
    flex-orderSets default layout order unless overridden by another breakpoint.
    flex-orderSets element order.
    flex-order-smSets element order on devices less than 600px wide.
    flex-order-gt-smSets element order on devices greater than 600px wide.
    flex-order-mdSets element order on devices between 600px and 960px wide.
    flex-order-gt-mdSets element order on devices greater than 960px wide. -
    flex-order-lgSets element order on devices between 960px and 1200px wide.
    flex-order-gt-lgSets element order on devices greater than 1200px wide.
    + flex-order-xs + width < 600px + + + flex-order-gt-xs + width >= 600px + + + flex-order-sm + 600px <= width < 960px + + + flex-order-gt-sm + width >= 960px + + + flex-order-md + 960px <= width < 1280px + + + flex-order-gt-md + width >= 1280px + + + flex-order-lg + 1280px <= width < 1920px + + + flex-order-gt-lg + width >= 1920/b>px + + + flex-order-xl + width >= 1920px + + + +

    See the layout options page for more information on attributes like hide, hide-gt-md, and show-gt-md used in the above examples.

    +
    +
    +
    + +

    Add Offsets to the Preceding HTML Elements

    + +

    + Add the flex-offset attribute to a layout child to set its + offset percentage within the layout container. Values must be multiples + of 5 or 33 / 66. These offsets establish a margin-left + with respect to the preceding element or the containers left boundary. +

    +
    -
    - [flex offset="33"] +
    + [flex-offset="15"] + [flex="66"]
    [flex] @@ -193,40 +262,56 @@
    -

    - Add the flex-offset attribute to a layout child to set its - offset percentage within the layout. Values must be multiples - of 5 or 33 / 66. -

    + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - -
    APIDevice width when breakpoint overrides default
    flex-offsetSets default margin-left offset (%-based) unless overridden by another breakpoint.
    flex-offsetSets element offset.
    flex-offset-smSets element offset on devices less than 600px wide.
    flex-offset-gt-smSets element offset on devices greater than 600px wide.
    flex-offset-mdSets element offset on devices between 600px and 960px wide.
    flex-offset-gt-mdSets element offset on devices greater than 960px wide. -
    flex-offset-lgSets element offset on devices between 960px and 1200px wide.
    flex-offset-gt-lgSets element offset on devices greater than 1200px wide.
    + flex-offset-xs + width < 600px + + + flex-offset-gt-xs + width >= 600px + + + flex-offset-sm + 600px <= width < 960px + + + flex-offset-gt-sm + width >= 960px + + + flex-offset-md + 960px <= width < 1280px + + + flex-offset-gt-md + width >= 1280px + + + flex-offset-lg + 1280px <= width < 1920px + + + flex-offset-gt-lg + width >= 1920/b>px + + + flex-offset-xl + width >= 1920px + + + +
    diff --git a/docs/app/partials/layout-container.tmpl.html b/docs/app/partials/layout-container.tmpl.html index 2552b5218d..634400a2c4 100644 --- a/docs/app/partials/layout-container.tmpl.html +++ b/docs/app/partials/layout-container.tmpl.html @@ -1,28 +1,11 @@
    -

    Overview

    -

    - Angular Material's responsive CSS layout is built on - flexbox. -

    +

    Layout and Containers

    - The layout system is based upon element attributes rather than CSS classes. - Attributes provide an easy way to set a value (eg. layout="row") and - help us separate concerns: attributes define layout, and classes define styling. -

    -

    - - Note: Due to performance problems related to attribute selectors in IE11, our attributes are converted - to class selectors at runtime. You should continue to use layout attribute selectors in your code. - -

    - -

    Layout Attribute

    -

    - Use the layout attribute on an element to arrange its children + Use the layout attribute on an container element to arrange specify the layout direction for its children: horizontally in a row (layout="row") or vertically in a column (layout="column"). - Row layout is the default if you specify the layout attribute without a value. + Note that row the default layout direction if you specify the layout attribute without a value.

    @@ -36,6 +19,8 @@

    Layout Attribute

    +
    +
    @@ -50,6 +35,111 @@

    Layout Attribute

    - See the layout options page for information on responsive layouts and other options. + Note that layout only affects the flow direction for that container's immediate children. +

    + +
    + +
    +

    Layouts and Responsive Breakpoints

    + +

    + As discussed in Layout Introduction page you can + make your layout change depending upon the device view size by using breakpoint alias suffices. +

    + +

    + To make your layout automatically change depending upon the device screen size, use one to the following layout + APIs to set the layout direction for devices with view widths:

    -
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    APIDevice width when breakpoint overrides default
    layoutSets default layout direction unless overridden by another breakpoint.
    layout-xswidth < 600px
    layout-gt-xswidth >= 600px
    layout-sm600px <= width < 960px
    layout-gt-smwidth >= 960px
    layout-md960px <= width < 1280px
    layout-gt-mdwidth >= 1280px
    layout-lg1280px <= width < 1920px
    layout-gt-lgwidth >= 1920/b>px
    layout-xlwidth >= 1920px
    +
    + +

    + +

    + + +

    + For the demo below, as you shrink your browser window width notice the flow direction changes to column + for mobile devices (xs). And as you expand it will reset to row + for gt-sm view sizes. + +

    + + + +
    +
    + I'm above on mobile, and to the left on larger devices. +
    +
    + I'm below on mobile, and to the right on larger devices. +
    +
    +     +     + + + +

    + See the Layout Options page for more options such as padding, alignments, etc. +

    + + + +
    + diff --git a/docs/app/partials/layout-introduction.tmpl.html b/docs/app/partials/layout-introduction.tmpl.html new file mode 100644 index 0000000000..bacb97a723 --- /dev/null +++ b/docs/app/partials/layout-introduction.tmpl.html @@ -0,0 +1,364 @@ +
    + +

    Overview

    +

    + Angular Material's Layout features are purposed as syntactic HTML/CSS sugar to allow developers + to easily and intuitively create responsive HTML layouts... built using modern + flexbox specifications and features. For developers, this + Layout API is simply a list of HTML attributes (aka directives) that can be used on HTML containers and elements. +

    + + +

    + Using HTML Attributes as the API provides an easy way to set a value (eg. layout="row") and + helps with separation of concerns: Attributes define layout while and CSS classes assign styling. +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    HTML Markup APIAllowed values (raw or interpolated)
    layoutrow | column
    flex integer (increments of 5 for 0%->100%)
    flex-orderinteger values from -20 to 20
    flex-offsetinteger (increments of 5 for 0%->100%, 100%/3, 200%/3)
    layout-alignstart|center|end|space-around|space-between start|center|end|stretch
    layout-fill
    layout-wrap
    layout-nowrap
    layout-margin
    layout-padding
    show
    hide
    + + +

    And if we use Breakpoints as specified in Material Design:

    +

    +

    + + +

    We can associate breakpoints with mediaQuery definitions using breakpoint alias(es):

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    BreakpointMediaQuery (pixel range)
    xs'(max-width: 599px)'
    gt-xs'(min-width: 600px)'
    sm'(min-width: 600px) and (max-width: 959px)'
    gt-sm'(min-width: 960px)'
    md'(min-width: 960px) and (max-width: 1279px)'
    gt-md'(min-width: 1280px)'
    lg'(min-width: 1280px) and (max-width: 1919px)'
    gt-lg'(min-width: 1920px)'
    xl'(min-width: 1920px)'
    + +
    +
    +

    + API with Responsive Breakpoints +

    + +

    Now we can combine the breakpoint alias with the Layout API to easily support Responsive breakpoints + with our simple Layout markup convention. The alias is simply used as suffix extensions to the Layout + API keyword. +
    e.g. +

    + +

    + This notation results in, for example, the following table for the layout and flex APIs: +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    layout APIflex APIActivates when device
    layoutflexSets default layout direction & flex unless overridden by another breakpoint.
    layout-xsflex-xswidth < 600px
    layout-gt-xsflex-gt-xswidth >= 600px
    layout-smflex-sm600px <= width < 960px
    layout-gt-smflex-gt-smwidth >= 960px
    layout-mdflex-md960px <= width < 1280px
    layout-gt-mdflex-gt-mdwidth >= 1280px
    layout-lgflex-lg1280px <= width < 1920px
    layout-gt-lgflex-gt-lgwidth >= 1920/b>px
    layout-xlflex-xlwidth >= 1920px
    + +

    Below is an example usage of the Responsive Layout API:

    + + +
    + +
    +
    + +
    +
    +
    + +
    +
    + +
    +     + +
    + +

    + This Layout API means that developers no longer have to worry about the details of FlexBox styling. + The developer uses the Layout HTML API to specify intention and the Layout engine handles all the issues of CSS flexbox styling. +

    + +

    + The Layout engine will even report console warnings for Layout conflicts and issues that are not automatically resolved. +

    + + +

    +
    +
    + +

    Under-the-Hood

    + +

    + Due to performance problems when using Attribute Selectors with IE10 and IE11 browsers, our attributes are + dynamically converted to class selectors at runtime. And the Layout CSS classNames and styles have been each been + predefined in the angular-material.css stylesheet. +

    + +

    + This means the HTML design-time markup is not affected. Developers should continue to use Layout attribute selectors in the HTML + markup. Yet it also worthwhile see how this transformation works under-the-hood: +

    + +

    + Consider the simply use of the layout and flex attributes (API): +

    + + +
    + +
    + +
    First item in row
    +
    Second item in row
    + +
    +
    + +
    First item in column
    +
    Second item in column
    + +
    + +
    +     + + +

    + At runtime, these attributes are transformed to CSS classnames. +

    + + +
    + +
    + +
    First item in row
    +
    Second item in row
    + +
    +
    + +
    First item in column
    +
    Second item in column
    + +
    + +
    +     + +

    + Using the style classes above defined in angular-material.css +

    + + + + .flex { + -webkit-flex: 1 1 0%; + -ms-flex: 1 1 0%; + flex: 1 1 0%; + box-sizing: border-box; + } + .flex-20 { + -webkit-flex: 1 1 20%; + -ms-flex: 1 1 20%; + flex: 1 1 20%; + max-width: 20%; + max-height: 100%; + box-sizing: border-box; + } + + .layout-row .flex-33 { + -webkit-flex: 1 1 33%; + -ms-flex: 1 1 33%; + flex: 1 1 33%; + box-sizing: border-box; + } + + .layout-row .flex-66 { + -webkit-flex: 1 1 66%; + -ms-flex: 1 1 66%; + flex: 1 1 66%; + box-sizing: border-box; + } + + + .layout-row .flex-33 { + max-width: calc(100% / 3); + max-height: 100%; + } + + .layout-row .flex-66 { + max-width: calc(200% / 3); + max-height: 100%; + } + + .layout-column .flex-33 { + max-width: 100%; + max-height: calc(100% / 3); + } + + .layout-column .flex-66 { + max-width: 100%; + max-height: calc(200% / 3); + } + + +
    diff --git a/docs/app/partials/layout-options.tmpl.html b/docs/app/partials/layout-options.tmpl.html index 6af5cda68c..5ffa7d7be4 100644 --- a/docs/app/partials/layout-options.tmpl.html +++ b/docs/app/partials/layout-options.tmpl.html @@ -22,38 +22,62 @@

    + + + + + + - + + + + + + + + + - + - + - + - + - + - + + + + +
    APIActivates when device
    layoutSets the default layout on all devices.Sets default layout direction unless overridden by another breakpoint.
    layout-xswidth < 600px
    layout-gt-xswidth >= 600px
    layout-smSets the layout on devices less than 600px wide (phones).600px <= width < 960px
    layout-gt-smSets the layout on devices greater than 600px wide (bigger than phones).width >= 960px
    layout-mdSets the layout on devices between 600px and 960px wide (tablets in portrait).960px <= width < 1280px
    layout-gt-mdSets the layout on devices greater than 960px wide (bigger than tablets in portrait).width >= 1280px
    layout-lgSets the layout on devices between 960 and 1200px wide (tablets in landscape).1280px <= width < 1920px
    layout-gt-lgSets the layout on devices greater than 1200px wide (computers and large screens).width >= 1920/b>px
    layout-xlwidth >= 1920px


    +
    +
    + +

    Layout Margin, Padding, Wrap and Fill

    +
    + @@ -73,16 +97,17 @@

    - layout-margin adds margin around each flex child. It also adds a margin to the layout container itself. + layout-margin adds margin around each flex child. It also adds a margin to the layout + container itself.
    - layout-padding adds padding inside each flex child. It also adds padding to the layout container itself. + layout-padding adds padding inside each flex child. It also adds padding to the layout + container itself.
    layout-fill forces the layout element to fill its parent container.

    -
    -
    +

    Here is a non-trivial group of flex elements using layout-wrap

    @@ -97,77 +122,36 @@
    +

    - layout-wrap allows flex children to wrap within the container if the elements use more than 100%. + layout-wrap allows flex children to wrap within the container if the elements use more + than 100%.



    +
    +
    - - -
    -
    - I flex to one-third of the space on mobile, and two-thirds on other devices. -
    -
    - I flex to two-thirds of the space on mobile, and one-third on other devices. -
    -
    -     -     - -

    - See the Layout System page for a basic explanation - of flex and offset attributes. -

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    flexSets flex.
    flex-smSets flex on devices less than 600px wide.
    flex-gt-smSets flex on devices greater than 600px wide.
    flex-mdSets flex on devices between 600px and 960px wide..
    flex-gt-mdSets flex on devices greater than 960px wide. -
    flex-lgSets flex on devices between 960px and 1200px.
    flex-gt-lgSets flex on devices greater than 1200px wide.
    +

    Show & Hide

    -
    +

    Use the show hide APIs to responsively show or hide elements

    - Hidden on small and shown on larger devices. + Only show on gt-sm devices.
    - Shown on small and hidden on larger devices. + Shown on small and medium.
    + Hidden on gt-sm devices.
    -
    - Shown on small and medium size devices. +
    + Shown on small and medium size devices.
    + Hidden on gt-md devices.
    Shown on medium size devices only. @@ -180,62 +164,59 @@
    + + + + + + + - - + + + + + + + + - + + - + + - + + - + - + + - - - - - - - - - - - - - - - - - - - - - - - - + + - - + + +
    hide (display: none)show (negates hide)Activates when:
    hidedisplay: nonehide-xsshow-xswidth < 600px
    hide-gt-xsshow-gt-xswidth >= 600px
    hide-smdisplay: none on devices less than 600px wide.show-sm600px <= width < 960px
    hide-gt-smdisplay: none on devices greater than 600px wide.hide-gt-smwidth >= 960px
    hide-mddisplay: none on devices between 600px and 960px wide.show-md960px <= width < 1280px
    hide-gt-mddisplay: none on devices greater than 960px wide. + show-gt-mdwidth >= 1280px
    hide-lgdisplay: none on devices between 960px and 1200px.show-lg1280px <= width < 1920px
    hide-gt-lgdisplay: none on devices greater than 1200px wide.
    showNegates hide.
    show-smNegates hide on devices less than 600px wide.
    show-gt-smNegates hide on devices greater than 600px wide.
    show-mdNegates hide on devices between 600px and 960px wide..
    show-gt-mdNegates hide on devices greater than 960px wide. -
    show-lgNegates hide on devices between 960px and 1200px.show-gt-lgwidth >= 1920/b>px
    show-gt-lgNegates hide on devices greater than 1200px wide.hide-xlshow-xlwidth >= 1920px
    +
    diff --git a/package.json b/package.json index 05ac1d005d..6efcf67e30 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "dgeni-packages": "^0.10.3", "esprima": "^1.2.2", "glob": "~4.0.2", - "gulp": "^3.8.11", + "gulp": "^3.9.0", "gulp-autoprefixer": "^1.0.1", "gulp-concat": "^2.2.0", "gulp-connect": "^2.2.0", diff --git a/src/components/autocomplete/autocomplete.scss b/src/components/autocomplete/autocomplete.scss index abe8ef5fe8..14371b9207 100644 --- a/src/components/autocomplete/autocomplete.scss +++ b/src/components/autocomplete/autocomplete.scss @@ -181,6 +181,7 @@ md-autocomplete { } } } + // IE Only @media screen and (-ms-high-contrast: active) { $border-color: #fff; @@ -230,6 +231,7 @@ md-autocomplete { } } +// IE Only @media screen and (-ms-high-contrast: active) { md-autocomplete, .md-autocomplete-suggestions { diff --git a/src/components/bottomSheet/bottom-sheet.scss b/src/components/bottomSheet/bottom-sheet.scss index 4c0d40f19a..8dbf774943 100644 --- a/src/components/bottomSheet/bottom-sheet.scss +++ b/src/components/bottomSheet/bottom-sheet.scss @@ -125,11 +125,11 @@ md-bottom-sheet { @include grid-items-per-row(3, true); } - @media screen and (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md) { + @media screen and (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) { @include grid-items-per-row(4); } - @media screen and (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg) { + @media screen and (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) { @include grid-items-per-row(6); } @@ -178,6 +178,7 @@ md-bottom-sheet { } } +// IE only @media screen and (-ms-high-contrast: active) { md-bottom-sheet { border: 1px solid #fff; diff --git a/src/components/button/button.scss b/src/components/button/button.scss index bbb4592c0e..25a22bf58f 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -224,6 +224,7 @@ button.md-button::-moz-focus-inner { border-radius: 0px 2px 2px 0px; } } +// IE only @media screen and (-ms-high-contrast: active) { .md-button.md-raised, .md-button.md-fab { diff --git a/src/components/chips/chips.scss b/src/components/chips/chips.scss index 73fd29ed96..67143b3140 100644 --- a/src/components/chips/chips.scss +++ b/src/components/chips/chips.scss @@ -183,6 +183,7 @@ $contact-chip-name-width: rem(12) !default; } } } +// IE only @media screen and (-ms-high-contrast: active) { .md-chip-input-container, md-chip { diff --git a/src/components/chips/demoContactChips/style.scss b/src/components/chips/demoContactChips/style.scss index f221e2c0fd..a0f1089fa0 100644 --- a/src/components/chips/demoContactChips/style.scss +++ b/src/components/chips/demoContactChips/style.scss @@ -33,7 +33,8 @@ md-content.autocomplete { overflow: hidden; } } - @media (min-width: 900px) { + + @media screen and (min-width: 960px) { float: left; width: 33%; } diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss index 24c3cd4242..5e76b64e98 100644 --- a/src/components/dialog/dialog.scss +++ b/src/components/dialog/dialog.scss @@ -120,10 +120,10 @@ md-dialog { } } -@media (max-width: $layout-breakpoint-sm) { +@media (max-width: $layout-breakpoint-sm - 1) { md-dialog.md-dialog-fullscreen { min-height: 100%; min-width: 100%; border-radius: 0; } -} \ No newline at end of file +} diff --git a/src/components/menu/menu.scss b/src/components/menu/menu.scss index 0c8eb9e258..8e9ca525d5 100644 --- a/src/components/menu/menu.scss +++ b/src/components/menu/menu.scss @@ -139,6 +139,7 @@ md-toolbar { } } } + @media (min-width: $layout-breakpoint-sm) { md-menu-content { min-width: 96px; @@ -149,3 +150,4 @@ md-toolbar { } } } + diff --git a/src/components/toast/toast.scss b/src/components/toast/toast.scss index e628decaa5..ae12de6590 100644 --- a/src/components/toast/toast.scss +++ b/src/components/toast/toast.scss @@ -88,7 +88,7 @@ md-toast { } } -@media (max-width: $layout-breakpoint-sm) { +@media (max-width: $layout-breakpoint-sm - 1) { md-toast { left: 0; right: 0; @@ -157,4 +157,4 @@ md-toast { // While animating, set the toast parent's overflow to hidden so scrollbars do not appear .md-toast-animating { overflow: hidden !important; -} \ No newline at end of file +} diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss index a100f35770..5a0d717f7f 100644 --- a/src/components/toolbar/toolbar.scss +++ b/src/components/toolbar/toolbar.scss @@ -132,8 +132,7 @@ md-toolbar { } // Handle mobile portrait -@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm) and - (orientation: portrait) { +@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: portrait) { md-toolbar { min-height: $toolbar-height-mobile-portrait; } @@ -145,8 +144,7 @@ md-toolbar { } // Handle mobile landscape -@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm) and - (orientation: landscape) { +@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: landscape) { md-toolbar { min-height: $toolbar-height-mobile-landscape; } diff --git a/src/core/services/layout/layout.attributes.scss b/src/core/services/layout/layout.attributes.scss index 3b034dc916..16ec7148c1 100644 --- a/src/core/services/layout/layout.attributes.scss +++ b/src/core/services/layout/layout.attributes.scss @@ -41,7 +41,7 @@ $layout-breakpoint-lg: 1920px !default; } } - @for $i from 0 through 19 { + @for $i from -20 through 20 { $order : ''; $suffix : ''; @@ -421,11 +421,14 @@ $layout-breakpoint-lg: 1920px !default; @media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) { // SMALL SCREEN - [hide-sm], [hide] { - &:not([show-sm]):not([show]) { + [hide-sm], [hide-gt-xs] { + &:not([show-gt-xs]):not([show-sm]):not([show]) { display: none; } } + [hide-sm]:not([show-sm]):not([show]) { + display: none; + } @include layouts_for_breakpoint(sm); } @@ -437,14 +440,14 @@ $layout-breakpoint-lg: 1920px !default; @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) { // MEDIUM SCREEN - [hide], [hide-gt-sm] { - &:not([show-gt-sm]):not([show-md]):not([show]) { + [hide], [hide-gt-xs], [hide-gt-sm] { + &:not([show-gt-xs]):not([show-gt-sm]):not([show-md]):not([show]) { + display: none; + } + } + [hide-md]:not([show-md]):not([show]) { display: none; } - } - [hide-md]:not([show-md]):not([show]) { - display: none; - } @include layouts_for_breakpoint(md); } @@ -455,8 +458,8 @@ $layout-breakpoint-lg: 1920px !default; @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) { // LARGE SCREEN - [hide], [hide-gt-sm], [hide-gt-md] { - &:not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]) { + [hide],[hide-gt-xs], [hide-gt-sm], [hide-gt-md] { + &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]) { display: none; } } @@ -469,18 +472,18 @@ $layout-breakpoint-lg: 1920px !default; @media (min-width: $layout-breakpoint-lg) { // BIGGER THAN LARGE SCREEN - [hide-gt-sm], [hide-gt-md], [hide-gt-lg], [hide] { - &:not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]):not([show-xl]):not([show]) { + @include layouts_for_breakpoint(gt-lg); + @include layouts_for_breakpoint(xl); + + // BIGGER THAN LARGE SCREEN + [hide], [hide-gt-xs], [hide-gt-sm], [hide-gt-md], [hide-gt-lg] { + &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]):not([show-xl]):not([show]) { display: none; } } - [hide-xl]:not([show-xl]):not([show]) { + [hide-xl]:not([show-xl]):not([show-gt-lg]):not([show]) { display: none; } - - - // BIGGER THAN LARGE SCREEN - @include layouts_for_breakpoint(gt-lg); - @include layouts_for_breakpoint(xl); } + diff --git a/src/core/services/layout/layout.js b/src/core/services/layout/layout.js index 3c983e83f7..07c0229fb4 100644 --- a/src/core/services/layout/layout.js +++ b/src/core/services/layout/layout.js @@ -458,17 +458,21 @@ return found; } - function extractAlignAxis(config) { + function extractAlignAxis(attrValue) { var axis = { main : "start", cross: "stretch" }, values; - config = (config || ""); - if ( config.indexOf("-") == 0 ) config = "none" + config; + attrValue = (attrValue || ""); + if ( attrValue.indexOf("-") == 0 ) { + // For missing main-axis values + attrValue = "none" + attrValue; + } - values = config.toLowerCase().trim().replace(WHITESPACE, "-").split("-"); - if ( values[0] === "space" ) { + values = attrValue.toLowerCase().trim().replace(WHITESPACE, "-").split("-"); + if ( values.length && (values[0] === "space") ) { + // for main-axis values of "space-around" or "space-between" values = [ values[0]+"-"+values[1],values[2] ]; } diff --git a/src/core/services/layout/layout.scss b/src/core/services/layout/layout.scss index 853566fe18..cea340ae8e 100644 --- a/src/core/services/layout/layout.scss +++ b/src/core/services/layout/layout.scss @@ -31,7 +31,7 @@ } } - @for $i from 0 through 19 { + @for $i from -20 through 20 { $order : ''; $suffix : ''; @@ -47,6 +47,7 @@ } } } + @mixin offset-for-name($sizes:null) { @if $sizes == null { $sizes : ''; } @@ -443,12 +444,15 @@ } @media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) { - // SMALL SCREEN - .hide-sm, .hide { - &:not(.show-sm):not(.show) { + .hide, .hide-gt-xs { + &:not(.show-gt-xs):not(.show-sm):not(.show) { display: none; } } + .hide-sm:not(.show-sm):not(.show) { + display: none; + } + @include layouts_for_breakpoint(sm); } @@ -460,8 +464,8 @@ @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) { // MEDIUM SCREEN - .hide, .hide-gt-sm { - &:not(.show-gt-sm):not(.show-md):not(.show) { + .hide, .hide-gt-xs, .hide-gt-sm { + &:not(.show-gt-xs):not(.show-gt-sm):not(.show-md):not(.show) { display: none; } } @@ -478,32 +482,30 @@ @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) { // LARGE SCREEN - .hide, .hide-gt-sm, .hide-gt-md { - &:not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) { - display: none; - } - } - .hide-lg:not(.show-lg):not(.show) { + .hide,.hide-gt-xs, .hide-gt-sm, .hide-gt-md { + &:not(.show-gt-xs):not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) { display: none; } + } + .hide-lg:not(.show-lg):not(.show) { + display: none; + } @include layouts_for_breakpoint(lg); } @media (min-width: $layout-breakpoint-lg) { + @include layouts_for_breakpoint(gt-lg); + @include layouts_for_breakpoint(xl); + // BIGGER THAN LARGE SCREEN - .hide-gt-sm, .hide-gt-md, .hide-gt-lg, .hide { - &:not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show-xl):not(.show) { + .hide, .hide-gt-xs, .hide-gt-sm, .hide-gt-md, .hide-gt-lg { + &:not(.show-gt-xs):not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show-xl):not(.show) { display: none; } } - .hide-xl:not(.show-xl):not(.show) { + .hide-xl:not(.show-xl):not(.show-gt-lg):not(.show) { display: none; } - - // BIGGER THAN LARGE SCREEN - @include layouts_for_breakpoint(gt-lg); - @include layouts_for_breakpoint(xl); } - From 8f142c146680775c0916ae4324890d682381116e Mon Sep 17 00:00:00 2001 From: Thomas Burleson Date: Fri, 4 Dec 2015 10:52:07 -0600 Subject: [PATCH 2/5] fix(layout): RTE with $log injection Fixes #6057. --- src/core/services/layout/layout.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/core/services/layout/layout.js b/src/core/services/layout/layout.js index 07c0229fb4..5b902a9085 100644 --- a/src/core/services/layout/layout.js +++ b/src/core/services/layout/layout.js @@ -265,7 +265,8 @@ * any attribute value */ function attributeWithoutValue(className) { - return ['$interpolate', function(_$interpolate_, _$log_) { + return ['$mdUtil', '$interpolate', "$log", function(_$mdUtil_, _$interpolate_, _$log_) { + $mdUtil = _$mdUtil_; $interpolate = _$interpolate_; $log = _$log_; From fed8831c60192cf287dcaf9e64ab0ede9d030a03 Mon Sep 17 00:00:00 2001 From: Thomas Burleson Date: Fri, 4 Dec 2015 11:01:03 -0600 Subject: [PATCH 3/5] update(layout): remove validateAttributeUsage from non-observables Currently `validateAttributeUsage( )` is only used for the `flex` API, so remove its use from the non-observable APIs --- src/core/services/layout/layout.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/core/services/layout/layout.js b/src/core/services/layout/layout.js index 5b902a9085..efa5525d21 100644 --- a/src/core/services/layout/layout.js +++ b/src/core/services/layout/layout.js @@ -277,8 +277,6 @@ if (config.enabled) { // immediately replace static (non-interpolated) invalid values... - validateAttributeUsage(className, attr, element, $log); - validateAttributeValue( className, getNormalizedAttrValue(className, attr, ""), buildUpdateFn(element, className, attr) From f8f735a695331b6cfff2ab1445827832228bc378 Mon Sep 17 00:00:00 2001 From: Thomas Burleson Date: Fri, 4 Dec 2015 11:47:41 -0600 Subject: [PATCH 4/5] fix(demo): workarounds for layout=column issues wrapper div for `

    ` tags min-height for `

    ` Fixes #5962. --- .../menu/demoMenuPositionModes/index.html | 14 ++++++++------ src/components/menu/demoMenuWidth/index.html | 8 +++++--- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/menu/demoMenuPositionModes/index.html b/src/components/menu/demoMenuPositionModes/index.html index 63c5feb174..d293547f07 100644 --- a/src/components/menu/demoMenuPositionModes/index.html +++ b/src/components/menu/demoMenuPositionModes/index.html @@ -1,10 +1,12 @@
    -
    -

    Position Mode Demos

    -

    The md-position-mode attribute can be used to specify the positioning along the x and y axis.

    -
    -

    Target-Based Position Modes

    -
    +
    +
    +

    Position Mode Demos

    +

    The md-position-mode attribute can be used to specify the positioning along the x and y axis.

    +
    +

    Target-Based Position Modes

    +
    +

    Target Mode Positioning (default)

    diff --git a/src/components/menu/demoMenuWidth/index.html b/src/components/menu/demoMenuWidth/index.html index 528c427e0d..f031614db6 100644 --- a/src/components/menu/demoMenuWidth/index.html +++ b/src/components/menu/demoMenuWidth/index.html @@ -1,8 +1,10 @@ -
    -
    +
    +
    +

    Different Widths

    md-menu-content may specify a width attribute which will follow the official spec.

    -
    +
    +

    Wide menu (width=6)

    From 87b54081a6feef2020da315296706615decbfc55 Mon Sep 17 00:00:00 2001 From: Thomas Burleson Date: Fri, 4 Dec 2015 14:27:48 -0600 Subject: [PATCH 5/5] update(docs): add imrpovemetns based on review feedback --- docs/app/js/app.js | 2 +- docs/app/partials/getting-started.tmpl.html | 16 ++++---- docs/app/partials/layout-alignment.tmpl.html | 8 ++-- docs/app/partials/layout-children.tmpl.html | 31 +++++++++------- docs/app/partials/layout-container.tmpl.html | 12 +++--- .../partials/layout-introduction.tmpl.html | 37 ++++++++++++------- docs/app/partials/layout-options.tmpl.html | 12 +++--- 7 files changed, 67 insertions(+), 51 deletions(-) diff --git a/docs/app/js/app.js b/docs/app/js/app.js index d6a6e67c66..51d7e07b8e 100644 --- a/docs/app/js/app.js +++ b/docs/app/js/app.js @@ -273,7 +273,7 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES, $location, $rootScope, $http, $wind url: 'layout/options' } ,{ - name: 'Troubleshooting', // Possibly rename to Troubleshooting + name: 'Troubleshooting', id: 'layoutTips', url: 'layout/tips' }] diff --git a/docs/app/partials/getting-started.tmpl.html b/docs/app/partials/getting-started.tmpl.html index 7dccbacf55..50fef1cd01 100644 --- a/docs/app/partials/getting-started.tmpl.html +++ b/docs/app/partials/getting-started.tmpl.html @@ -1,6 +1,6 @@
    -

    New to Angular.js? Before getting into Angular Material, it might be helpful to: +

    New to Angular? Before getting into Angular Material, it might be helpful to: