├── .gitignore
├── video-poster.png
├── src
├── components
│ ├── not-found.js
│ └── fetch-data.js
├── pageWelcome.js
├── pageUserDetails.js
├── state
│ ├── index.js
│ ├── user.js
│ └── api-data.js
├── pageSecured.js
├── layout.js
└── main.js
├── dist
├── assets
│ ├── react-star-rating.min.css
│ ├── styles.css
│ ├── layout-patch.diff
│ ├── material-grid.min.css
│ ├── css
│ │ ├── material-grid.min.css
│ │ └── material-grid.css
│ ├── _layout.scss
│ ├── material-grid.css
│ └── material.min.js
└── index.html
├── package.json
├── README.md
└── backend
├── handler
└── handler.go
└── main.go
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | backend/gin-bin
3 | node_modules
4 | .env
5 |
--------------------------------------------------------------------------------
/video-poster.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/odewahn/react-golang-auth0/HEAD/video-poster.png
--------------------------------------------------------------------------------
/src/components/not-found.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | module.exports = React.createClass({
4 | render: function() {
5 | return (
6 |
7 |
PAGE NOT FOUND
8 |
9 | )
10 | }
11 | })
12 |
--------------------------------------------------------------------------------
/dist/assets/react-star-rating.min.css:
--------------------------------------------------------------------------------
1 | .rsr,.rsr-root{display:inline-block;vertical-align:middle}.rsr,.rsr-root,.rsr__caption{vertical-align:middle}.rsr--editing:hover{cursor:pointer}.rsr{position:relative;color:#e3e3e3;overflow:hidden}.rsr__stars{position:absolute;left:0;top:0;white-space:nowrap;overflow:hidden;color:#F5A71B;-webkit-transition:all 10ms;-moz-transition:all 10ms;transition:all 10ms}.rsr__caption{font-size:1.25em;margin-right:.5em}.rsr--disabled .rsr-container:hover{cursor:not-allowed}
--------------------------------------------------------------------------------
/src/pageWelcome.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import {connect} from 'react-redux'
4 |
5 | import {Grid, Cell} from 'react-mdl';
6 |
7 | const main = React.createClass({
8 | render: function() {
9 | return (
10 |
11 | Welcome!
12 | This is an unsecured page that does not require a login.
13 | You might use this as a welcome page, help, etc.
14 | |
15 | )
16 | }
17 | });
18 |
19 | //Map the local state directly to the state tree in the combined reducer.
20 | export const WelcomePage = connect((state) => state)(main);
21 |
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/src/pageUserDetails.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import {connect} from 'react-redux'
4 |
5 | import {Grid, Cell} from 'react-mdl';
6 |
7 |
8 | const main = React.createClass({
9 | render: function() {
10 | return (
11 |
12 | User Profile
13 | This page should always require a login, and has all the info from the API:Email : {this.props.User.get("Email")} Id : {this.props.User.get("UserId")}Auth Token : {this.props.User.get("AuthToken")} |
18 | )
19 | }
20 | });
21 |
22 | //Map the local state directly to the state tree in the combined reducer.
23 | export const UserDetails = connect((state) => state)(main);
24 |
--------------------------------------------------------------------------------
/src/state/index.js:
--------------------------------------------------------------------------------
1 | /*********************************************************************
2 | || Import required modules
3 | *********************************************************************/
4 | import {combineReducers} from 'redux'
5 | import {fromJS} from 'immutable'
6 |
7 |
8 | import User from './user'
9 | import Data from './api-data'
10 |
11 |
12 | /*
13 | The combineReducer function put all the reuders into a plain
14 | old javascript object, so when you go to access it, you use regular
15 | JS notation, not immutable. The nodes, though, are still all immutable. See
16 | this discussion on stackoverflow for a better explanation:
17 |
18 | - http://stackoverflow.com/questions/32674767/redux-reducers-initializing-same-state-key
19 | */
20 | export default combineReducers({
21 | User,
22 | Data
23 | })
24 |
--------------------------------------------------------------------------------
/src/pageSecured.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import {connect} from 'react-redux'
4 |
5 | import {Grid, Cell} from 'react-mdl';
6 |
7 | import {FetchDataForm} from './components/fetch-data'
8 |
9 | const main = React.createClass({
10 | render: function() {
11 | let data = this.props.Data.get("Data").map(x => {
12 | return (
13 | {x}
14 | )
15 | })
16 | return (
17 |
18 |
19 | Secured Page
20 | You have to be logged in to view this page!
21 | Your Data
23 |
24 | {data}
25 |
26 | |
27 |
28 | )
29 | }
30 | });
31 |
32 | //Map the local state directly to the state tree in the combined reducer.
33 | export const SecuredPage = connect((state) => state)(main);
34 |
--------------------------------------------------------------------------------
/dist/assets/styles.css:
--------------------------------------------------------------------------------
1 | .block {
2 | padding: 20px;
3 | }
4 |
5 | .discoverList {
6 | width: 100%;
7 | height: 100%;
8 | padding: 5px;
9 | }
10 |
11 | .discoverItem {
12 | padding: 5px;
13 | margin-bottom: 20px;
14 | }
15 |
16 | .current-directory {
17 | padding: 5px;
18 | }
19 |
20 | .current-directory button {
21 | margin-left: 15px;
22 | }
23 |
24 | .launchpad select {
25 | margin-right: 15px;
26 | }
27 |
28 | .avatar {
29 | width: 48px;
30 | height: 48px;
31 | border-radius: 24px;
32 | }
33 |
34 | .hostlistSelector {
35 | border: 1px solid lightblue;
36 | height: 100px;
37 | display: flex;
38 | align-items: center;
39 | justify-content: center;
40 | }
41 |
42 | .cert {
43 | width: 90%;
44 | font-size: 0.6em
45 | }
46 |
47 | .discoverSearchBar {
48 | padding: 5px;
49 | background: #ebebeb;
50 | border-radius: 5px;
51 | width: 100%
52 | }
53 |
54 | .runningContainer {
55 | padding: 5px;
56 | width: 100%;
57 | }
58 |
--------------------------------------------------------------------------------
/src/components/fetch-data.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {Textfield, Button, Spinner} from 'react-mdl';
3 | import {setDataFieldValue, fetchData} from '../state/api-data'
4 |
5 | export const FetchDataForm = React.createClass({
6 | handleClick: function() {
7 | this.props.dispatch(fetchData(this.props.User.get("AuthToken"), this.props.Data.get("N")))
8 | },
9 | setField: function(e) {
10 | this.props.dispatch(setDataFieldValue(e.target.name, e.target.value))
11 | },
12 | render: function() {
13 | return (
14 |
15 |
21 |
22 | Fetch
23 | {this.props.Data.toJS().Loading === true ?
25 |
26 | )
27 | }
28 | })
29 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "golang-react",
3 | "author": "Andrew Odewahn",
4 | "version": "0.0.1",
5 | "description": "",
6 | "main": "",
7 | "scripts": {
8 | "frontend": "npm run watch & npm run backend & npm run serve",
9 | "watch": "watchify -o dist/bundle.js src/main.js -dv",
10 | "serve": "python -m SimpleHTTPServer",
11 | "backend": "cd backend; gin"
12 | },
13 | "dependencies": {
14 | "auth0-lock": "^9.0.1",
15 | "history": "^1.17.0",
16 | "immutable": "^3.7.6",
17 | "react": "^0.14.7",
18 | "react-dom": "^0.14.3",
19 | "react-mdl": "^1.4.1",
20 | "react-redux": "^4.0.6",
21 | "react-router": "^2.0.1",
22 | "redux": "^3.0.5",
23 | "redux-thunk": "^1.0.3"
24 | },
25 | "devDependencies": {
26 | "local-web-server": "^1.2.1",
27 | "babel-preset-es2015": "^6.3.13",
28 | "babel-preset-react": "^6.3.13",
29 | "babelify": "^7.2.0",
30 | "browserify": "^12.0.1",
31 | "reactify": "^1.1.1",
32 | "watchify": "^3.6.1"
33 | },
34 | "browserify": {
35 | "transform": [
36 | [
37 | "babelify",
38 | {
39 | "presets": [
40 | "es2015",
41 | "react"
42 | ]
43 | }
44 | ]
45 | ]
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/layout.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {connect} from 'react-redux'
3 | import {Layout, Header, Navigation, Icon, Content, Grid, Cell, Button} from 'react-mdl';
4 | import {Link} from 'react-router'
5 | import {auth0Login} from './state/user'
6 |
7 | const main = React.createClass({
8 | logout: function() {
9 | this.props.dispatch({type: "logout"})
10 | },
11 | login: function() {
12 | this.props.dispatch(auth0Login())
13 | },
14 | render: function () {
15 | return (
16 |
17 |
31 |
32 |
33 | {this.props.children}
34 |
35 |
36 |
37 | );
38 | }
39 | });
40 |
41 | //Map the local state directly to the state tree in the combined reducer.
42 | export const AppLayout = connect((state) => state)(main);
43 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This repo is a demonstration / sketch for a react+redux frontend with a golang API backend that demonstrates:
2 |
3 | * How to use Auth0 and react to log in
4 | * Use of higher-level components to protect pages in the frontend that require authorization
5 | * react-mdl for the design
6 | * React router to route stuff
7 | * Redux and redux-thunk for state management
8 | * Multiple redux reducers using `combineReducers`
9 | * UI handling for long running API calls
10 | * [JWT](http://jwt.io/) signing for authenticating API calls
11 | * Proper handling for CORS in Gorilla mux
12 | * Setting headers with `fetch` API
13 | * An npm `scripts` based build approach with support for watchify and gin
14 |
15 | I set it up to server as a micro-lab for working with various authentication options. It took me a lot of research to get all the tiny details right (especially the CORS, JWT, and react login stuff), so I thought I'd share it.
16 |
17 | This video provides an overview of the app:
18 |
19 | [](https://youtu.be/yp7UqOfNTZ4)
20 |
21 | If there is interest, I'll make another post / video with more detail on how things work. *So, if you want to see that, star the repo!*
22 |
23 | ## To run it
24 |
25 | First, you need a working Golang environment (1.5+)
26 | * Clone the repo
27 | * `npm install`
28 | * `npm run frontend`
29 | * `go get` to download the go packages
30 |
31 | Open your browser to `localhost:8000/dist`
32 |
33 | ## What's Missing
34 |
35 | I should also add this stuff
36 |
37 | * Godeps support
38 | * Encryption / HTTPS support for the API
39 | * Encryption for the JWT token
40 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | // Import react-router
5 | import { Router, Route, browserHistory} from 'react-router'
6 |
7 | // Import redux stuff
8 | import {createStore, applyMiddleware} from 'redux';
9 | import reducer from './state/index'
10 | import thunk from 'redux-thunk'
11 | import {Provider, connect} from 'react-redux';
12 |
13 | // Import my app-specific pages
14 | import {AppLayout} from './layout';
15 | import {UserDetails} from './pageUserDetails'
16 | import {WelcomePage} from './pageWelcome'
17 | import {SecuredPage} from './pageSecured'
18 | import NotFound from './components/not-found';
19 |
20 |
21 | // create a store that has redux-thunk middleware enabled
22 | // https://github.com/gaearon/redux-thunk
23 | // https://github.com/rackt/redux/issues/291
24 | const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
25 | const store = createStoreWithMiddleware(reducer);
26 |
27 | // Try to make a higher level component to handle authenticated requests
28 | export function requireAuthentication(Component, DefaultComponent) {
29 | class AuthenticatedComponent extends React.Component {
30 | render() {
31 | return (
32 |
33 | {this.props.User.get("IsLoggedIn") === true
34 | ?
38 | )
39 | }
40 | }
41 | return connect((state) => state)(AuthenticatedComponent)
42 | }
43 |
44 | // Define all the routes
45 | const routes = (
46 |
47 |
53 | )
54 |
55 | ReactDOM.render(
56 |
57 | {routes}
58 | ,
59 | document.getElementById('app'));
60 |
--------------------------------------------------------------------------------
/src/state/user.js:
--------------------------------------------------------------------------------
1 | /*********************************************************************
2 | || Import required modules
3 | *********************************************************************/
4 | import {fromJS, Map} from 'immutable'
5 |
6 | /*********************************************************************
7 | || Define the state tree
8 | *********************************************************************/
9 | export const INITIAL_STATE = fromJS({
10 | IsLoggedIn: false,
11 | UserId: "",
12 | AccountType: "",
13 | AuthToken: "",
14 | Email: ""
15 | })
16 |
17 | /*********************************************************************
18 | || The reducer
19 | *********************************************************************/
20 | export default function(state = INITIAL_STATE, action) {
21 | switch (action.type) {
22 | case "setUserCredentials":
23 | return state.merge(action.credentials)
24 | case "logout":
25 | return state.set("IsLoggedIn", false)
26 | }
27 | return state;
28 | }
29 |
30 | /*********************************************************************
31 | || Allowed Actions
32 | *********************************************************************/
33 |
34 | // Handle Authentication for Autho0 per
35 | // https://auth0.com/blog/2016/01/04/secure-your-react-and-redux-app-with-jwt-authentication/
36 | export function auth0Login() {
37 | const lock = new Auth0Lock('gcSxq9GfpUdVWNIvYiOsP7rh1s8u6ftA', 'odewahn.auth0.com');
38 | return dispatch => {
39 |
40 | lock.show((err, profile, token) => {
41 | if(err) {
42 | console.log("there was an error!")
43 | //dispatch(lockError(err))
44 | return
45 | }
46 | dispatch({
47 | type: "setUserCredentials",
48 | credentials: {
49 | IsLoggedIn: true,
50 | Email: profile.email,
51 | UserId: profile.user_id,
52 | AuthToken: token
53 | }
54 | })
55 | console.log("profile is", profile)
56 | console.log("token is", token)
57 | //localStorage.setItem('profile', JSON.stringify(profile))
58 | //localStorage.setItem('id_token', token)
59 | //dispatch(lockSuccess(profile, token))
60 | })
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/backend/handler/handler.go:
--------------------------------------------------------------------------------
1 | // This package is based on this great article about error handling with golang headers
2 | // https://elithrar.github.io/article/http-handler-error-handling-revisited/
3 |
4 | package handler
5 |
6 | import (
7 | "log"
8 | "net/http"
9 | )
10 |
11 | // Env holds application-wide configuration.
12 | type Env struct {
13 | Secret string
14 | }
15 |
16 | // Error represents a handler error. It provides methods for a HTTP status
17 | // code and embeds the built-in error interface.
18 | type Error interface {
19 | error
20 | Status() int
21 | }
22 |
23 | // StatusError represents an error with an associated HTTP status code.
24 | type StatusError struct {
25 | Code int
26 | Err error
27 | }
28 |
29 | // Allows StatusError to satisfy the error interface.
30 | func (se StatusError) Error() string {
31 | return se.Err.Error()
32 | }
33 |
34 | // Status returns our HTTP status code.
35 | func (se StatusError) Status() int {
36 | return se.Code
37 | }
38 |
39 | // The Handler struct that takes a configured Env and a function matching
40 | // our useful signature.
41 | type Handler struct {
42 | *Env
43 | H func(e *Env, w http.ResponseWriter, r *http.Request) error
44 | }
45 |
46 | // ServeHTTP allows our Handler type to satisfy http.Handler.
47 | // See:
48 | // https://annevankesteren.nl/2015/02/same-origin-policy
49 | // http://stackoverflow.com/questions/22972066/how-to-handle-preflight-cors-requests-on-a-go-server
50 | func (h Handler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
51 | w.Header().Set("Content-Type", "application/json")
52 | w.Header().Set("Access-Control-Allow-Origin", "*")
53 | w.Header().Set("Access-Control-Allow-Headers", "x-authentication")
54 |
55 | err := h.H(h.Env, w, r)
56 | if err != nil {
57 | switch e := err.(type) {
58 | case Error:
59 | // We can retrieve the status here and write out a specific
60 | // HTTP status code.
61 | log.Printf("HTTP %d - %s", e.Status(), e)
62 | http.Error(w, e.Error(), e.Status())
63 | default:
64 | // Any error types we don't specifically look out for default
65 | // to serving a HTTP 500
66 | http.Error(w, http.StatusText(http.StatusInternalServerError),
67 | http.StatusInternalServerError)
68 | }
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/state/api-data.js:
--------------------------------------------------------------------------------
1 | /*********************************************************************
2 | || Import required modules
3 | *********************************************************************/
4 | import {fromJS, Map} from 'immutable'
5 |
6 | /*********************************************************************
7 | || Define the state tree
8 | *********************************************************************/
9 | export const INITIAL_STATE = fromJS({
10 | Loading: false,
11 | N: "10",
12 | Data: []
13 | })
14 |
15 | const fetchDataURL = 'http://localhost:3000/data'
16 |
17 | /*********************************************************************
18 | || The reducer
19 | *********************************************************************/
20 | export default function(state = INITIAL_STATE, action) {
21 | switch (action.type) {
22 | case "setDataFieldValue":
23 | return state.set(action.key, action.value)
24 | case "setData":
25 | return state.set("Data", action.data)
26 | .set("Loading", false)
27 | case "setDataLoading":
28 | return state.set("Loading", true)
29 | }
30 | return state;
31 | }
32 |
33 | /*********************************************************************
34 | || Allowed Actions
35 | *********************************************************************/
36 |
37 | // Convert a structure into a query string
38 | // http://stackoverflow.com/questions/1714786/querystring-encoding-of-a-javascript-object
39 | function serialize(obj) {
40 | var str = [];
41 | for(var p in obj)
42 | if (obj.hasOwnProperty(p)) {
43 | str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
44 | }
45 | return str.join("&");
46 | };
47 |
48 | // Sets a field value
49 | export function setDataFieldValue(key, value) {
50 | return({
51 | type: "setDataFieldValue",
52 | key: key,
53 | value: value
54 | })
55 | }
56 |
57 | // Deletes the container record at the given index
58 | export function fetchData(key, n) {
59 | var request = {
60 | method: 'GET',
61 | headers: {
62 | "x-authentication": key
63 | }
64 | }
65 | return dispatch => {
66 | // Set the data loading flag
67 | dispatch({type: "setDataLoading"})
68 | // Perform the fetch
69 | fetch(fetchDataURL + "?" + serialize({N: n}), request)
70 | .then( response => response.json())
71 | .then( json => {
72 | dispatch({type:"setData", data: json})
73 | })
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/backend/main.go:
--------------------------------------------------------------------------------
1 | package main
2 |
3 | import (
4 | "encoding/base64"
5 | "encoding/json"
6 | "errors"
7 | "fmt"
8 | "log"
9 | "math/rand"
10 | "net/http"
11 | "os"
12 | "strconv"
13 | "time"
14 |
15 | jwt "github.com/dgrijalva/jwt-go"
16 | "github.com/gorilla/mux"
17 | "github.com/joho/godotenv"
18 | "github.com/odewahn/react-golang-auth/backend/handler"
19 | )
20 |
21 | func myLookupKey(key string) []byte {
22 | decoded, err := base64.URLEncoding.DecodeString(key)
23 | if err != nil {
24 | return nil
25 | }
26 | return []byte(decoded)
27 | }
28 |
29 | func hasValidToken(jwtToken, key string) bool {
30 | ret := false
31 | token, err := jwt.Parse(jwtToken, func(token *jwt.Token) (interface{}, error) {
32 | // Don't forget to validate the alg is what you expect:
33 | if _, ok := token.Method.(*jwt.SigningMethodHMAC); !ok {
34 | return nil, fmt.Errorf("Unexpected signing method: %v", token.Header["alg"])
35 | }
36 | log.Println("token is", token)
37 | return myLookupKey(key), nil
38 | })
39 |
40 | if err == nil && token.Valid {
41 | ret = true
42 | }
43 | return ret
44 | }
45 |
46 | // FakeData provides some fake data for testing...
47 | func FakeData(env *handler.Env, w http.ResponseWriter, r *http.Request) error {
48 |
49 | // If this is an OPTION method, then we don't do anything since it's just
50 | // validating the preflight info
51 | if r.Method == "OPTIONS" {
52 | return nil
53 | }
54 |
55 | // Validate the API call
56 | secret := r.Header.Get("x-authentication")
57 | log.Println("header key is:", secret)
58 |
59 | isValid := hasValidToken(secret, env.Secret)
60 | if !isValid {
61 | return handler.StatusError{401, errors.New("Invalid authorization token")}
62 | }
63 |
64 | // If we get here, then we've got a valid call. So, go ahead and
65 | // process the request. In this instance, all we want to do
66 | // is pass back a list of integers that is N items long
67 | N, err := strconv.Atoi(r.FormValue("N"))
68 | if err != nil {
69 | N = 10
70 | }
71 |
72 | // Create N random integers
73 | rand.Seed(time.Now().UTC().UnixNano())
74 | var data []int
75 | for i := 0; i < N; i++ {
76 | data = append(data, rand.Intn(100))
77 | }
78 |
79 | time.Sleep(1 * time.Second) // just for fun, pause a bit
80 |
81 | // return the results
82 | out, _ := json.MarshalIndent(&data, "", " ")
83 | fmt.Fprintf(w, string(out))
84 | return nil
85 | }
86 |
87 | func main() {
88 |
89 | // Initialise our app-wide environment data we'll send to the handler
90 | err := godotenv.Load()
91 | if err != nil {
92 | log.Fatal("Error loading .env file")
93 | }
94 |
95 | log.Println("Key is: ", os.Getenv("AUTH0_CLIENT_SECRET"))
96 | env := &handler.Env{
97 | Secret: os.Getenv("AUTH0_CLIENT_SECRET"),
98 | }
99 |
100 | r := mux.NewRouter()
101 |
102 | //This returns some fake data
103 | r.Handle("/data", handler.Handler{env, FakeData}).Methods("GET", "OPTIONS")
104 |
105 | port := "3001" // this is the gin port, but the app port is exposed at 3000
106 | http.ListenAndServe(":"+port, r)
107 |
108 | }
109 |
--------------------------------------------------------------------------------
/dist/assets/layout-patch.diff:
--------------------------------------------------------------------------------
1 | From 66e3be5dfe73119dbccd2e8d56969d214da2e1ca Mon Sep 17 00:00:00 2001
2 | From: Tommy Leunen
3 | Date: Sat, 6 Feb 2016 11:59:55 -0500
4 | Subject: [PATCH] updates Layout so mdl-layout is the root element (fixes
5 | #1356)
6 |
7 | ---
8 | src/layout/_layout.scss | 36 ++++++++++++++++++------------------
9 | src/layout/layout.js | 17 +++++++++--------
10 | 2 files changed, 27 insertions(+), 26 deletions(-)
11 |
12 | diff --git a/src/layout/_layout.scss b/src/layout/_layout.scss
13 | index de8fc0c..4ca5645 100644
14 | --- a/src/layout/_layout.scss
15 | +++ b/src/layout/_layout.scss
16 | @@ -39,14 +39,9 @@
17 |
18 | // Main layout class.
19 | .mdl-layout {
20 | + position: absolute;
21 | width: 100%;
22 | height: 100%;
23 | - display: flex;
24 | - flex-direction: column;
25 | - overflow-y: auto;
26 | - overflow-x: hidden;
27 | - position: relative;
28 | - -webkit-overflow-scrolling: touch;
29 | }
30 |
31 | // Utility classes for screen sizes.
32 | @@ -58,10 +53,15 @@
33 | display: none;
34 | }
35 |
36 | -.mdl-layout__container {
37 | - position: absolute;
38 | +.mdl-layout__inner-container {
39 | width: 100%;
40 | height: 100%;
41 | + display: flex;
42 | + flex-direction: column;
43 | + overflow-y: auto;
44 | + overflow-x: hidden;
45 | + position: relative;
46 | + -webkit-overflow-scrolling: touch;
47 | }
48 |
49 |
50 | @@ -166,7 +166,7 @@
51 | }
52 |
53 | @media screen and (min-width: $layout-screen-size-threshold + 1px) {
54 | - .mdl-layout--fixed-drawer > & {
55 | + .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
56 | transform: translateX(0);
57 | }
58 | }
59 | @@ -214,7 +214,7 @@
60 | }
61 |
62 | @media screen and (min-width: $layout-screen-size-threshold + 1px) {
63 | - .mdl-layout--fixed-drawer > & {
64 | + .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
65 | display: none;
66 | }
67 |
68 | @@ -255,13 +255,13 @@
69 | min-height: $layout-mobile-header-height;
70 | }
71 |
72 | - .mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > & {
73 | + .mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > .mdl-layout__inner-container > & {
74 | margin-left: $layout-drawer-width;
75 | width: calc(100% - #{$layout-drawer-width});
76 | }
77 |
78 | @media screen and (min-width: $layout-screen-size-threshold + 1px) {
79 | - .mdl-layout--fixed-drawer > & {
80 | + .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
81 | .mdl-layout__header-row {
82 | padding-left: 40px;
83 | }
84 | @@ -309,7 +309,7 @@
85 | display: none;
86 | }
87 |
88 | - .mdl-layout--fixed-header > & {
89 | + .mdl-layout--fixed-header > .mdl-layout__inner-container > & {
90 | display: flex;
91 | }
92 | }
93 | @@ -450,20 +450,20 @@
94 | z-index: 1;
95 | -webkit-overflow-scrolling: touch;
96 |
97 | - .mdl-layout--fixed-drawer > & {
98 | + .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
99 | margin-left: $layout-drawer-width;
100 | }
101 |
102 | - .mdl-layout__container.has-scrolling-header & {
103 | + .mdl-layout.has-scrolling-header & {
104 | overflow: visible;
105 | }
106 |
107 | @media screen and (max-width: $layout-screen-size-threshold) {
108 | - .mdl-layout--fixed-drawer > & {
109 | + .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
110 | margin-left: 0;
111 | }
112 |
113 | - .mdl-layout__container.has-scrolling-header & {
114 | + .mdl-layout.has-scrolling-header & {
115 | overflow-y: auto;
116 | overflow-x: hidden;
117 | }
118 | @@ -532,7 +532,7 @@
119 | flex-shrink: 0;
120 | overflow: hidden;
121 |
122 | - .mdl-layout__container > & {
123 | + .mdl-layout > .mdl-layout__inner-container > & {
124 | position: absolute;
125 | top: 0;
126 | left: 0;
127 | diff --git a/src/layout/layout.js b/src/layout/layout.js
128 | index e3030a4..c31c8dd 100644
129 | --- a/src/layout/layout.js
130 | +++ b/src/layout/layout.js
131 | @@ -83,7 +83,7 @@
132 | * @private
133 | */
134 | MaterialLayout.prototype.CssClasses_ = {
135 | - CONTAINER: 'mdl-layout__container',
136 | + INNER_CONTAINER: 'mdl-layout__inner-container',
137 | HEADER: 'mdl-layout__header',
138 | DRAWER: 'mdl-layout__drawer',
139 | CONTENT: 'mdl-layout__content',
140 | @@ -278,12 +278,6 @@
141 | */
142 | MaterialLayout.prototype.init = function() {
143 | if (this.element_) {
144 | - var container = document.createElement('div');
145 | - container.classList.add(this.CssClasses_.CONTAINER);
146 | - this.element_.parentElement.insertBefore(container, this.element_);
147 | - this.element_.parentElement.removeChild(this.element_);
148 | - container.appendChild(this.element_);
149 | -
150 | var directChildren = this.element_.childNodes;
151 | var numChildren = directChildren.length;
152 | for (var c = 0; c < numChildren; c++) {
153 | @@ -333,7 +327,7 @@
154 | } else if (this.header_.classList.contains(
155 | this.CssClasses_.HEADER_SCROLL)) {
156 | mode = this.Mode_.SCROLL;
157 | - container.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER);
158 | + this.element_.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER);
159 | }
160 |
161 | if (mode === this.Mode_.STANDARD) {
162 | @@ -486,6 +480,13 @@
163 | }
164 | }
165 |
166 | + var innerContainer = document.createElement('div');
167 | + innerContainer.classList.add(this.CssClasses_.INNER_CONTAINER);
168 | + while (this.element_.firstChild) {
169 | + innerContainer.appendChild(this.element_.firstChild);
170 | + }
171 | + this.element_.appendChild(innerContainer);
172 | +
173 | this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
174 | }
175 | };
176 | --
177 | 2.2.1
178 |
179 |
--------------------------------------------------------------------------------
/dist/assets/material-grid.min.css:
--------------------------------------------------------------------------------
1 | /**
2 | * material-design-lite - Material Design Components in CSS, JS and HTML
3 | * @version v1.1.1
4 | * @license Apache-2.0
5 | * @copyright 2015 Google, Inc.
6 | * @link https://github.com/google/material-design-lite
7 | */
8 | .mdl-grid{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;margin:0 auto;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.mdl-grid.mdl-grid--no-spacing{padding:0}.mdl-cell{box-sizing:border-box}.mdl-cell--top{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.mdl-cell--middle{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.mdl-cell--bottom{-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.mdl-cell--stretch{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch}.mdl-grid.mdl-grid--no-spacing>.mdl-cell{margin:0}.mdl-cell--order-1{-webkit-order:1;-ms-flex-order:1;order:1}.mdl-cell--order-2{-webkit-order:2;-ms-flex-order:2;order:2}.mdl-cell--order-3{-webkit-order:3;-ms-flex-order:3;order:3}.mdl-cell--order-4{-webkit-order:4;-ms-flex-order:4;order:4}.mdl-cell--order-5{-webkit-order:5;-ms-flex-order:5;order:5}.mdl-cell--order-6{-webkit-order:6;-ms-flex-order:6;order:6}.mdl-cell--order-7{-webkit-order:7;-ms-flex-order:7;order:7}.mdl-cell--order-8{-webkit-order:8;-ms-flex-order:8;order:8}.mdl-cell--order-9{-webkit-order:9;-ms-flex-order:9;order:9}.mdl-cell--order-10{-webkit-order:10;-ms-flex-order:10;order:10}.mdl-cell--order-11{-webkit-order:11;-ms-flex-order:11;order:11}.mdl-cell--order-12{-webkit-order:12;-ms-flex-order:12;order:12}@media (max-width:479px){.mdl-grid{padding:8px}.mdl-cell{margin:8px;width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell{width:100%}.mdl-cell--hide-phone{display:none!important}.mdl-cell--order-1-phone.mdl-cell--order-1-phone{-webkit-order:1;-ms-flex-order:1;order:1}.mdl-cell--order-2-phone.mdl-cell--order-2-phone{-webkit-order:2;-ms-flex-order:2;order:2}.mdl-cell--order-3-phone.mdl-cell--order-3-phone{-webkit-order:3;-ms-flex-order:3;order:3}.mdl-cell--order-4-phone.mdl-cell--order-4-phone{-webkit-order:4;-ms-flex-order:4;order:4}.mdl-cell--order-5-phone.mdl-cell--order-5-phone{-webkit-order:5;-ms-flex-order:5;order:5}.mdl-cell--order-6-phone.mdl-cell--order-6-phone{-webkit-order:6;-ms-flex-order:6;order:6}.mdl-cell--order-7-phone.mdl-cell--order-7-phone{-webkit-order:7;-ms-flex-order:7;order:7}.mdl-cell--order-8-phone.mdl-cell--order-8-phone{-webkit-order:8;-ms-flex-order:8;order:8}.mdl-cell--order-9-phone.mdl-cell--order-9-phone{-webkit-order:9;-ms-flex-order:9;order:9}.mdl-cell--order-10-phone.mdl-cell--order-10-phone{-webkit-order:10;-ms-flex-order:10;order:10}.mdl-cell--order-11-phone.mdl-cell--order-11-phone{-webkit-order:11;-ms-flex-order:11;order:11}.mdl-cell--order-12-phone.mdl-cell--order-12-phone{-webkit-order:12;-ms-flex-order:12;order:12}.mdl-cell--1-col,.mdl-cell--1-col-phone.mdl-cell--1-col-phone{width:calc(25% - 16px)}.mdl-grid--no-spacing>.mdl-cell--1-col,.mdl-grid--no-spacing>.mdl-cell--1-col-phone.mdl-cell--1-col-phone{width:25%}.mdl-cell--2-col,.mdl-cell--2-col-phone.mdl-cell--2-col-phone{width:calc(50% - 16px)}.mdl-grid--no-spacing>.mdl-cell--2-col,.mdl-grid--no-spacing>.mdl-cell--2-col-phone.mdl-cell--2-col-phone{width:50%}.mdl-cell--3-col,.mdl-cell--3-col-phone.mdl-cell--3-col-phone{width:calc(75% - 16px)}.mdl-grid--no-spacing>.mdl-cell--3-col,.mdl-grid--no-spacing>.mdl-cell--3-col-phone.mdl-cell--3-col-phone{width:75%}.mdl-cell--4-col,.mdl-cell--4-col-phone.mdl-cell--4-col-phone,.mdl-cell--5-col{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--4-col,.mdl-grid--no-spacing>.mdl-cell--4-col-phone.mdl-cell--4-col-phone{width:100%}.mdl-cell--5-col-phone.mdl-cell--5-col-phone{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--5-col,.mdl-grid--no-spacing>.mdl-cell--5-col-phone.mdl-cell--5-col-phone{width:100%}.mdl-cell--6-col,.mdl-cell--6-col-phone.mdl-cell--6-col-phone,.mdl-cell--7-col{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--6-col,.mdl-grid--no-spacing>.mdl-cell--6-col-phone.mdl-cell--6-col-phone{width:100%}.mdl-cell--7-col-phone.mdl-cell--7-col-phone{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--7-col,.mdl-grid--no-spacing>.mdl-cell--7-col-phone.mdl-cell--7-col-phone{width:100%}.mdl-cell--8-col,.mdl-cell--8-col-phone.mdl-cell--8-col-phone,.mdl-cell--9-col{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--8-col,.mdl-grid--no-spacing>.mdl-cell--8-col-phone.mdl-cell--8-col-phone{width:100%}.mdl-cell--9-col-phone.mdl-cell--9-col-phone{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--9-col,.mdl-grid--no-spacing>.mdl-cell--9-col-phone.mdl-cell--9-col-phone{width:100%}.mdl-cell--10-col,.mdl-cell--10-col-phone.mdl-cell--10-col-phone,.mdl-cell--11-col{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--10-col,.mdl-grid--no-spacing>.mdl-cell--10-col-phone.mdl-cell--10-col-phone{width:100%}.mdl-cell--11-col-phone.mdl-cell--11-col-phone{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--11-col,.mdl-grid--no-spacing>.mdl-cell--11-col-phone.mdl-cell--11-col-phone{width:100%}.mdl-cell--12-col,.mdl-cell--12-col-phone.mdl-cell--12-col-phone{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--12-col,.mdl-grid--no-spacing>.mdl-cell--12-col-phone.mdl-cell--12-col-phone{width:100%}.mdl-cell--1-offset,.mdl-cell--1-offset-phone.mdl-cell--1-offset-phone{margin-left:calc(25% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset-phone.mdl-cell--1-offset-phone{margin-left:25%}.mdl-cell--2-offset,.mdl-cell--2-offset-phone.mdl-cell--2-offset-phone{margin-left:calc(50% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset-phone.mdl-cell--2-offset-phone{margin-left:50%}.mdl-cell--3-offset,.mdl-cell--3-offset-phone.mdl-cell--3-offset-phone{margin-left:calc(75% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset-phone.mdl-cell--3-offset-phone{margin-left:75%}}@media (min-width:480px) and (max-width:839px){.mdl-grid{padding:8px}.mdl-cell{margin:8px;width:calc(50% - 16px)}.mdl-grid--no-spacing>.mdl-cell{width:50%}.mdl-cell--hide-tablet{display:none!important}.mdl-cell--order-1-tablet.mdl-cell--order-1-tablet{-webkit-order:1;-ms-flex-order:1;order:1}.mdl-cell--order-2-tablet.mdl-cell--order-2-tablet{-webkit-order:2;-ms-flex-order:2;order:2}.mdl-cell--order-3-tablet.mdl-cell--order-3-tablet{-webkit-order:3;-ms-flex-order:3;order:3}.mdl-cell--order-4-tablet.mdl-cell--order-4-tablet{-webkit-order:4;-ms-flex-order:4;order:4}.mdl-cell--order-5-tablet.mdl-cell--order-5-tablet{-webkit-order:5;-ms-flex-order:5;order:5}.mdl-cell--order-6-tablet.mdl-cell--order-6-tablet{-webkit-order:6;-ms-flex-order:6;order:6}.mdl-cell--order-7-tablet.mdl-cell--order-7-tablet{-webkit-order:7;-ms-flex-order:7;order:7}.mdl-cell--order-8-tablet.mdl-cell--order-8-tablet{-webkit-order:8;-ms-flex-order:8;order:8}.mdl-cell--order-9-tablet.mdl-cell--order-9-tablet{-webkit-order:9;-ms-flex-order:9;order:9}.mdl-cell--order-10-tablet.mdl-cell--order-10-tablet{-webkit-order:10;-ms-flex-order:10;order:10}.mdl-cell--order-11-tablet.mdl-cell--order-11-tablet{-webkit-order:11;-ms-flex-order:11;order:11}.mdl-cell--order-12-tablet.mdl-cell--order-12-tablet{-webkit-order:12;-ms-flex-order:12;order:12}.mdl-cell--1-col,.mdl-cell--1-col-tablet.mdl-cell--1-col-tablet{width:calc(12.5% - 16px)}.mdl-grid--no-spacing>.mdl-cell--1-col,.mdl-grid--no-spacing>.mdl-cell--1-col-tablet.mdl-cell--1-col-tablet{width:12.5%}.mdl-cell--2-col,.mdl-cell--2-col-tablet.mdl-cell--2-col-tablet{width:calc(25% - 16px)}.mdl-grid--no-spacing>.mdl-cell--2-col,.mdl-grid--no-spacing>.mdl-cell--2-col-tablet.mdl-cell--2-col-tablet{width:25%}.mdl-cell--3-col,.mdl-cell--3-col-tablet.mdl-cell--3-col-tablet{width:calc(37.5% - 16px)}.mdl-grid--no-spacing>.mdl-cell--3-col,.mdl-grid--no-spacing>.mdl-cell--3-col-tablet.mdl-cell--3-col-tablet{width:37.5%}.mdl-cell--4-col,.mdl-cell--4-col-tablet.mdl-cell--4-col-tablet{width:calc(50% - 16px)}.mdl-grid--no-spacing>.mdl-cell--4-col,.mdl-grid--no-spacing>.mdl-cell--4-col-tablet.mdl-cell--4-col-tablet{width:50%}.mdl-cell--5-col,.mdl-cell--5-col-tablet.mdl-cell--5-col-tablet{width:calc(62.5% - 16px)}.mdl-grid--no-spacing>.mdl-cell--5-col,.mdl-grid--no-spacing>.mdl-cell--5-col-tablet.mdl-cell--5-col-tablet{width:62.5%}.mdl-cell--6-col,.mdl-cell--6-col-tablet.mdl-cell--6-col-tablet{width:calc(75% - 16px)}.mdl-grid--no-spacing>.mdl-cell--6-col,.mdl-grid--no-spacing>.mdl-cell--6-col-tablet.mdl-cell--6-col-tablet{width:75%}.mdl-cell--7-col,.mdl-cell--7-col-tablet.mdl-cell--7-col-tablet{width:calc(87.5% - 16px)}.mdl-grid--no-spacing>.mdl-cell--7-col,.mdl-grid--no-spacing>.mdl-cell--7-col-tablet.mdl-cell--7-col-tablet{width:87.5%}.mdl-cell--8-col,.mdl-cell--8-col-tablet.mdl-cell--8-col-tablet,.mdl-cell--9-col{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--8-col,.mdl-grid--no-spacing>.mdl-cell--8-col-tablet.mdl-cell--8-col-tablet{width:100%}.mdl-cell--9-col-tablet.mdl-cell--9-col-tablet{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--9-col,.mdl-grid--no-spacing>.mdl-cell--9-col-tablet.mdl-cell--9-col-tablet{width:100%}.mdl-cell--10-col,.mdl-cell--10-col-tablet.mdl-cell--10-col-tablet,.mdl-cell--11-col{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--10-col,.mdl-grid--no-spacing>.mdl-cell--10-col-tablet.mdl-cell--10-col-tablet{width:100%}.mdl-cell--11-col-tablet.mdl-cell--11-col-tablet{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--11-col,.mdl-grid--no-spacing>.mdl-cell--11-col-tablet.mdl-cell--11-col-tablet{width:100%}.mdl-cell--12-col,.mdl-cell--12-col-tablet.mdl-cell--12-col-tablet{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--12-col,.mdl-grid--no-spacing>.mdl-cell--12-col-tablet.mdl-cell--12-col-tablet{width:100%}.mdl-cell--1-offset,.mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet{margin-left:calc(12.5% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet{margin-left:12.5%}.mdl-cell--2-offset,.mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet{margin-left:calc(25% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet{margin-left:25%}.mdl-cell--3-offset,.mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet{margin-left:calc(37.5% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet{margin-left:37.5%}.mdl-cell--4-offset,.mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet{margin-left:calc(50% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--4-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet{margin-left:50%}.mdl-cell--5-offset,.mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet{margin-left:calc(62.5% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--5-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet{margin-left:62.5%}.mdl-cell--6-offset,.mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet{margin-left:calc(75% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--6-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet{margin-left:75%}.mdl-cell--7-offset,.mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet{margin-left:calc(87.5% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--7-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet{margin-left:87.5%}}@media (min-width:840px){.mdl-grid{padding:8px}.mdl-cell{margin:8px;width:calc(33.3333333333% - 16px)}.mdl-grid--no-spacing>.mdl-cell{width:33.3333333333%}.mdl-cell--hide-desktop{display:none!important}.mdl-cell--order-1-desktop.mdl-cell--order-1-desktop{-webkit-order:1;-ms-flex-order:1;order:1}.mdl-cell--order-2-desktop.mdl-cell--order-2-desktop{-webkit-order:2;-ms-flex-order:2;order:2}.mdl-cell--order-3-desktop.mdl-cell--order-3-desktop{-webkit-order:3;-ms-flex-order:3;order:3}.mdl-cell--order-4-desktop.mdl-cell--order-4-desktop{-webkit-order:4;-ms-flex-order:4;order:4}.mdl-cell--order-5-desktop.mdl-cell--order-5-desktop{-webkit-order:5;-ms-flex-order:5;order:5}.mdl-cell--order-6-desktop.mdl-cell--order-6-desktop{-webkit-order:6;-ms-flex-order:6;order:6}.mdl-cell--order-7-desktop.mdl-cell--order-7-desktop{-webkit-order:7;-ms-flex-order:7;order:7}.mdl-cell--order-8-desktop.mdl-cell--order-8-desktop{-webkit-order:8;-ms-flex-order:8;order:8}.mdl-cell--order-9-desktop.mdl-cell--order-9-desktop{-webkit-order:9;-ms-flex-order:9;order:9}.mdl-cell--order-10-desktop.mdl-cell--order-10-desktop{-webkit-order:10;-ms-flex-order:10;order:10}.mdl-cell--order-11-desktop.mdl-cell--order-11-desktop{-webkit-order:11;-ms-flex-order:11;order:11}.mdl-cell--order-12-desktop.mdl-cell--order-12-desktop{-webkit-order:12;-ms-flex-order:12;order:12}.mdl-cell--1-col,.mdl-cell--1-col-desktop.mdl-cell--1-col-desktop{width:calc(8.3333333333% - 16px)}.mdl-grid--no-spacing>.mdl-cell--1-col,.mdl-grid--no-spacing>.mdl-cell--1-col-desktop.mdl-cell--1-col-desktop{width:8.3333333333%}.mdl-cell--2-col,.mdl-cell--2-col-desktop.mdl-cell--2-col-desktop{width:calc(16.6666666667% - 16px)}.mdl-grid--no-spacing>.mdl-cell--2-col,.mdl-grid--no-spacing>.mdl-cell--2-col-desktop.mdl-cell--2-col-desktop{width:16.6666666667%}.mdl-cell--3-col,.mdl-cell--3-col-desktop.mdl-cell--3-col-desktop{width:calc(25% - 16px)}.mdl-grid--no-spacing>.mdl-cell--3-col,.mdl-grid--no-spacing>.mdl-cell--3-col-desktop.mdl-cell--3-col-desktop{width:25%}.mdl-cell--4-col,.mdl-cell--4-col-desktop.mdl-cell--4-col-desktop{width:calc(33.3333333333% - 16px)}.mdl-grid--no-spacing>.mdl-cell--4-col,.mdl-grid--no-spacing>.mdl-cell--4-col-desktop.mdl-cell--4-col-desktop{width:33.3333333333%}.mdl-cell--5-col,.mdl-cell--5-col-desktop.mdl-cell--5-col-desktop{width:calc(41.6666666667% - 16px)}.mdl-grid--no-spacing>.mdl-cell--5-col,.mdl-grid--no-spacing>.mdl-cell--5-col-desktop.mdl-cell--5-col-desktop{width:41.6666666667%}.mdl-cell--6-col,.mdl-cell--6-col-desktop.mdl-cell--6-col-desktop{width:calc(50% - 16px)}.mdl-grid--no-spacing>.mdl-cell--6-col,.mdl-grid--no-spacing>.mdl-cell--6-col-desktop.mdl-cell--6-col-desktop{width:50%}.mdl-cell--7-col,.mdl-cell--7-col-desktop.mdl-cell--7-col-desktop{width:calc(58.3333333333% - 16px)}.mdl-grid--no-spacing>.mdl-cell--7-col,.mdl-grid--no-spacing>.mdl-cell--7-col-desktop.mdl-cell--7-col-desktop{width:58.3333333333%}.mdl-cell--8-col,.mdl-cell--8-col-desktop.mdl-cell--8-col-desktop{width:calc(66.6666666667% - 16px)}.mdl-grid--no-spacing>.mdl-cell--8-col,.mdl-grid--no-spacing>.mdl-cell--8-col-desktop.mdl-cell--8-col-desktop{width:66.6666666667%}.mdl-cell--9-col,.mdl-cell--9-col-desktop.mdl-cell--9-col-desktop{width:calc(75% - 16px)}.mdl-grid--no-spacing>.mdl-cell--9-col,.mdl-grid--no-spacing>.mdl-cell--9-col-desktop.mdl-cell--9-col-desktop{width:75%}.mdl-cell--10-col,.mdl-cell--10-col-desktop.mdl-cell--10-col-desktop{width:calc(83.3333333333% - 16px)}.mdl-grid--no-spacing>.mdl-cell--10-col,.mdl-grid--no-spacing>.mdl-cell--10-col-desktop.mdl-cell--10-col-desktop{width:83.3333333333%}.mdl-cell--11-col,.mdl-cell--11-col-desktop.mdl-cell--11-col-desktop{width:calc(91.6666666667% - 16px)}.mdl-grid--no-spacing>.mdl-cell--11-col,.mdl-grid--no-spacing>.mdl-cell--11-col-desktop.mdl-cell--11-col-desktop{width:91.6666666667%}.mdl-cell--12-col,.mdl-cell--12-col-desktop.mdl-cell--12-col-desktop{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--12-col,.mdl-grid--no-spacing>.mdl-cell--12-col-desktop.mdl-cell--12-col-desktop{width:100%}.mdl-cell--1-offset,.mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop{margin-left:calc(8.3333333333% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop{margin-left:8.3333333333%}.mdl-cell--2-offset,.mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop{margin-left:calc(16.6666666667% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop{margin-left:16.6666666667%}.mdl-cell--3-offset,.mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop{margin-left:calc(25% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop{margin-left:25%}.mdl-cell--4-offset,.mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop{margin-left:calc(33.3333333333% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--4-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop{margin-left:33.3333333333%}.mdl-cell--5-offset,.mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop{margin-left:calc(41.6666666667% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--5-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop{margin-left:41.6666666667%}.mdl-cell--6-offset,.mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop{margin-left:calc(50% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--6-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop{margin-left:50%}.mdl-cell--7-offset,.mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop{margin-left:calc(58.3333333333% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--7-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop{margin-left:58.3333333333%}.mdl-cell--8-offset,.mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop{margin-left:calc(66.6666666667% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--8-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop{margin-left:66.6666666667%}.mdl-cell--9-offset,.mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop{margin-left:calc(75% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--9-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop{margin-left:75%}.mdl-cell--10-offset,.mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop{margin-left:calc(83.3333333333% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--10-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop{margin-left:83.3333333333%}.mdl-cell--11-offset,.mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop{margin-left:calc(91.6666666667% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--11-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop{margin-left:91.6666666667%}}
--------------------------------------------------------------------------------
/dist/assets/css/material-grid.min.css:
--------------------------------------------------------------------------------
1 | /**
2 | * material-design-lite - Material Design Components in CSS, JS and HTML
3 | * @version v1.1.1
4 | * @license Apache-2.0
5 | * @copyright 2015 Google, Inc.
6 | * @link https://github.com/google/material-design-lite
7 | */
8 | .mdl-grid{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;margin:0 auto;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.mdl-grid.mdl-grid--no-spacing{padding:0}.mdl-cell{box-sizing:border-box}.mdl-cell--top{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.mdl-cell--middle{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.mdl-cell--bottom{-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.mdl-cell--stretch{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch}.mdl-grid.mdl-grid--no-spacing>.mdl-cell{margin:0}.mdl-cell--order-1{-webkit-order:1;-ms-flex-order:1;order:1}.mdl-cell--order-2{-webkit-order:2;-ms-flex-order:2;order:2}.mdl-cell--order-3{-webkit-order:3;-ms-flex-order:3;order:3}.mdl-cell--order-4{-webkit-order:4;-ms-flex-order:4;order:4}.mdl-cell--order-5{-webkit-order:5;-ms-flex-order:5;order:5}.mdl-cell--order-6{-webkit-order:6;-ms-flex-order:6;order:6}.mdl-cell--order-7{-webkit-order:7;-ms-flex-order:7;order:7}.mdl-cell--order-8{-webkit-order:8;-ms-flex-order:8;order:8}.mdl-cell--order-9{-webkit-order:9;-ms-flex-order:9;order:9}.mdl-cell--order-10{-webkit-order:10;-ms-flex-order:10;order:10}.mdl-cell--order-11{-webkit-order:11;-ms-flex-order:11;order:11}.mdl-cell--order-12{-webkit-order:12;-ms-flex-order:12;order:12}@media (max-width:479px){.mdl-grid{padding:8px}.mdl-cell{margin:8px;width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell{width:100%}.mdl-cell--hide-phone{display:none!important}.mdl-cell--order-1-phone.mdl-cell--order-1-phone{-webkit-order:1;-ms-flex-order:1;order:1}.mdl-cell--order-2-phone.mdl-cell--order-2-phone{-webkit-order:2;-ms-flex-order:2;order:2}.mdl-cell--order-3-phone.mdl-cell--order-3-phone{-webkit-order:3;-ms-flex-order:3;order:3}.mdl-cell--order-4-phone.mdl-cell--order-4-phone{-webkit-order:4;-ms-flex-order:4;order:4}.mdl-cell--order-5-phone.mdl-cell--order-5-phone{-webkit-order:5;-ms-flex-order:5;order:5}.mdl-cell--order-6-phone.mdl-cell--order-6-phone{-webkit-order:6;-ms-flex-order:6;order:6}.mdl-cell--order-7-phone.mdl-cell--order-7-phone{-webkit-order:7;-ms-flex-order:7;order:7}.mdl-cell--order-8-phone.mdl-cell--order-8-phone{-webkit-order:8;-ms-flex-order:8;order:8}.mdl-cell--order-9-phone.mdl-cell--order-9-phone{-webkit-order:9;-ms-flex-order:9;order:9}.mdl-cell--order-10-phone.mdl-cell--order-10-phone{-webkit-order:10;-ms-flex-order:10;order:10}.mdl-cell--order-11-phone.mdl-cell--order-11-phone{-webkit-order:11;-ms-flex-order:11;order:11}.mdl-cell--order-12-phone.mdl-cell--order-12-phone{-webkit-order:12;-ms-flex-order:12;order:12}.mdl-cell--1-col,.mdl-cell--1-col-phone.mdl-cell--1-col-phone{width:calc(25% - 16px)}.mdl-grid--no-spacing>.mdl-cell--1-col,.mdl-grid--no-spacing>.mdl-cell--1-col-phone.mdl-cell--1-col-phone{width:25%}.mdl-cell--2-col,.mdl-cell--2-col-phone.mdl-cell--2-col-phone{width:calc(50% - 16px)}.mdl-grid--no-spacing>.mdl-cell--2-col,.mdl-grid--no-spacing>.mdl-cell--2-col-phone.mdl-cell--2-col-phone{width:50%}.mdl-cell--3-col,.mdl-cell--3-col-phone.mdl-cell--3-col-phone{width:calc(75% - 16px)}.mdl-grid--no-spacing>.mdl-cell--3-col,.mdl-grid--no-spacing>.mdl-cell--3-col-phone.mdl-cell--3-col-phone{width:75%}.mdl-cell--4-col,.mdl-cell--4-col-phone.mdl-cell--4-col-phone,.mdl-cell--5-col{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--4-col,.mdl-grid--no-spacing>.mdl-cell--4-col-phone.mdl-cell--4-col-phone{width:100%}.mdl-cell--5-col-phone.mdl-cell--5-col-phone{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--5-col,.mdl-grid--no-spacing>.mdl-cell--5-col-phone.mdl-cell--5-col-phone{width:100%}.mdl-cell--6-col,.mdl-cell--6-col-phone.mdl-cell--6-col-phone,.mdl-cell--7-col{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--6-col,.mdl-grid--no-spacing>.mdl-cell--6-col-phone.mdl-cell--6-col-phone{width:100%}.mdl-cell--7-col-phone.mdl-cell--7-col-phone{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--7-col,.mdl-grid--no-spacing>.mdl-cell--7-col-phone.mdl-cell--7-col-phone{width:100%}.mdl-cell--8-col,.mdl-cell--8-col-phone.mdl-cell--8-col-phone,.mdl-cell--9-col{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--8-col,.mdl-grid--no-spacing>.mdl-cell--8-col-phone.mdl-cell--8-col-phone{width:100%}.mdl-cell--9-col-phone.mdl-cell--9-col-phone{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--9-col,.mdl-grid--no-spacing>.mdl-cell--9-col-phone.mdl-cell--9-col-phone{width:100%}.mdl-cell--10-col,.mdl-cell--10-col-phone.mdl-cell--10-col-phone,.mdl-cell--11-col{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--10-col,.mdl-grid--no-spacing>.mdl-cell--10-col-phone.mdl-cell--10-col-phone{width:100%}.mdl-cell--11-col-phone.mdl-cell--11-col-phone{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--11-col,.mdl-grid--no-spacing>.mdl-cell--11-col-phone.mdl-cell--11-col-phone{width:100%}.mdl-cell--12-col,.mdl-cell--12-col-phone.mdl-cell--12-col-phone{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--12-col,.mdl-grid--no-spacing>.mdl-cell--12-col-phone.mdl-cell--12-col-phone{width:100%}.mdl-cell--1-offset,.mdl-cell--1-offset-phone.mdl-cell--1-offset-phone{margin-left:calc(25% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset-phone.mdl-cell--1-offset-phone{margin-left:25%}.mdl-cell--2-offset,.mdl-cell--2-offset-phone.mdl-cell--2-offset-phone{margin-left:calc(50% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset-phone.mdl-cell--2-offset-phone{margin-left:50%}.mdl-cell--3-offset,.mdl-cell--3-offset-phone.mdl-cell--3-offset-phone{margin-left:calc(75% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset-phone.mdl-cell--3-offset-phone{margin-left:75%}}@media (min-width:480px) and (max-width:839px){.mdl-grid{padding:8px}.mdl-cell{margin:8px;width:calc(50% - 16px)}.mdl-grid--no-spacing>.mdl-cell{width:50%}.mdl-cell--hide-tablet{display:none!important}.mdl-cell--order-1-tablet.mdl-cell--order-1-tablet{-webkit-order:1;-ms-flex-order:1;order:1}.mdl-cell--order-2-tablet.mdl-cell--order-2-tablet{-webkit-order:2;-ms-flex-order:2;order:2}.mdl-cell--order-3-tablet.mdl-cell--order-3-tablet{-webkit-order:3;-ms-flex-order:3;order:3}.mdl-cell--order-4-tablet.mdl-cell--order-4-tablet{-webkit-order:4;-ms-flex-order:4;order:4}.mdl-cell--order-5-tablet.mdl-cell--order-5-tablet{-webkit-order:5;-ms-flex-order:5;order:5}.mdl-cell--order-6-tablet.mdl-cell--order-6-tablet{-webkit-order:6;-ms-flex-order:6;order:6}.mdl-cell--order-7-tablet.mdl-cell--order-7-tablet{-webkit-order:7;-ms-flex-order:7;order:7}.mdl-cell--order-8-tablet.mdl-cell--order-8-tablet{-webkit-order:8;-ms-flex-order:8;order:8}.mdl-cell--order-9-tablet.mdl-cell--order-9-tablet{-webkit-order:9;-ms-flex-order:9;order:9}.mdl-cell--order-10-tablet.mdl-cell--order-10-tablet{-webkit-order:10;-ms-flex-order:10;order:10}.mdl-cell--order-11-tablet.mdl-cell--order-11-tablet{-webkit-order:11;-ms-flex-order:11;order:11}.mdl-cell--order-12-tablet.mdl-cell--order-12-tablet{-webkit-order:12;-ms-flex-order:12;order:12}.mdl-cell--1-col,.mdl-cell--1-col-tablet.mdl-cell--1-col-tablet{width:calc(12.5% - 16px)}.mdl-grid--no-spacing>.mdl-cell--1-col,.mdl-grid--no-spacing>.mdl-cell--1-col-tablet.mdl-cell--1-col-tablet{width:12.5%}.mdl-cell--2-col,.mdl-cell--2-col-tablet.mdl-cell--2-col-tablet{width:calc(25% - 16px)}.mdl-grid--no-spacing>.mdl-cell--2-col,.mdl-grid--no-spacing>.mdl-cell--2-col-tablet.mdl-cell--2-col-tablet{width:25%}.mdl-cell--3-col,.mdl-cell--3-col-tablet.mdl-cell--3-col-tablet{width:calc(37.5% - 16px)}.mdl-grid--no-spacing>.mdl-cell--3-col,.mdl-grid--no-spacing>.mdl-cell--3-col-tablet.mdl-cell--3-col-tablet{width:37.5%}.mdl-cell--4-col,.mdl-cell--4-col-tablet.mdl-cell--4-col-tablet{width:calc(50% - 16px)}.mdl-grid--no-spacing>.mdl-cell--4-col,.mdl-grid--no-spacing>.mdl-cell--4-col-tablet.mdl-cell--4-col-tablet{width:50%}.mdl-cell--5-col,.mdl-cell--5-col-tablet.mdl-cell--5-col-tablet{width:calc(62.5% - 16px)}.mdl-grid--no-spacing>.mdl-cell--5-col,.mdl-grid--no-spacing>.mdl-cell--5-col-tablet.mdl-cell--5-col-tablet{width:62.5%}.mdl-cell--6-col,.mdl-cell--6-col-tablet.mdl-cell--6-col-tablet{width:calc(75% - 16px)}.mdl-grid--no-spacing>.mdl-cell--6-col,.mdl-grid--no-spacing>.mdl-cell--6-col-tablet.mdl-cell--6-col-tablet{width:75%}.mdl-cell--7-col,.mdl-cell--7-col-tablet.mdl-cell--7-col-tablet{width:calc(87.5% - 16px)}.mdl-grid--no-spacing>.mdl-cell--7-col,.mdl-grid--no-spacing>.mdl-cell--7-col-tablet.mdl-cell--7-col-tablet{width:87.5%}.mdl-cell--8-col,.mdl-cell--8-col-tablet.mdl-cell--8-col-tablet,.mdl-cell--9-col{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--8-col,.mdl-grid--no-spacing>.mdl-cell--8-col-tablet.mdl-cell--8-col-tablet{width:100%}.mdl-cell--9-col-tablet.mdl-cell--9-col-tablet{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--9-col,.mdl-grid--no-spacing>.mdl-cell--9-col-tablet.mdl-cell--9-col-tablet{width:100%}.mdl-cell--10-col,.mdl-cell--10-col-tablet.mdl-cell--10-col-tablet,.mdl-cell--11-col{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--10-col,.mdl-grid--no-spacing>.mdl-cell--10-col-tablet.mdl-cell--10-col-tablet{width:100%}.mdl-cell--11-col-tablet.mdl-cell--11-col-tablet{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--11-col,.mdl-grid--no-spacing>.mdl-cell--11-col-tablet.mdl-cell--11-col-tablet{width:100%}.mdl-cell--12-col,.mdl-cell--12-col-tablet.mdl-cell--12-col-tablet{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--12-col,.mdl-grid--no-spacing>.mdl-cell--12-col-tablet.mdl-cell--12-col-tablet{width:100%}.mdl-cell--1-offset,.mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet{margin-left:calc(12.5% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet{margin-left:12.5%}.mdl-cell--2-offset,.mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet{margin-left:calc(25% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet{margin-left:25%}.mdl-cell--3-offset,.mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet{margin-left:calc(37.5% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet{margin-left:37.5%}.mdl-cell--4-offset,.mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet{margin-left:calc(50% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--4-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet{margin-left:50%}.mdl-cell--5-offset,.mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet{margin-left:calc(62.5% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--5-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet{margin-left:62.5%}.mdl-cell--6-offset,.mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet{margin-left:calc(75% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--6-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet{margin-left:75%}.mdl-cell--7-offset,.mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet{margin-left:calc(87.5% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--7-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet{margin-left:87.5%}}@media (min-width:840px){.mdl-grid{padding:8px}.mdl-cell{margin:8px;width:calc(33.3333333333% - 16px)}.mdl-grid--no-spacing>.mdl-cell{width:33.3333333333%}.mdl-cell--hide-desktop{display:none!important}.mdl-cell--order-1-desktop.mdl-cell--order-1-desktop{-webkit-order:1;-ms-flex-order:1;order:1}.mdl-cell--order-2-desktop.mdl-cell--order-2-desktop{-webkit-order:2;-ms-flex-order:2;order:2}.mdl-cell--order-3-desktop.mdl-cell--order-3-desktop{-webkit-order:3;-ms-flex-order:3;order:3}.mdl-cell--order-4-desktop.mdl-cell--order-4-desktop{-webkit-order:4;-ms-flex-order:4;order:4}.mdl-cell--order-5-desktop.mdl-cell--order-5-desktop{-webkit-order:5;-ms-flex-order:5;order:5}.mdl-cell--order-6-desktop.mdl-cell--order-6-desktop{-webkit-order:6;-ms-flex-order:6;order:6}.mdl-cell--order-7-desktop.mdl-cell--order-7-desktop{-webkit-order:7;-ms-flex-order:7;order:7}.mdl-cell--order-8-desktop.mdl-cell--order-8-desktop{-webkit-order:8;-ms-flex-order:8;order:8}.mdl-cell--order-9-desktop.mdl-cell--order-9-desktop{-webkit-order:9;-ms-flex-order:9;order:9}.mdl-cell--order-10-desktop.mdl-cell--order-10-desktop{-webkit-order:10;-ms-flex-order:10;order:10}.mdl-cell--order-11-desktop.mdl-cell--order-11-desktop{-webkit-order:11;-ms-flex-order:11;order:11}.mdl-cell--order-12-desktop.mdl-cell--order-12-desktop{-webkit-order:12;-ms-flex-order:12;order:12}.mdl-cell--1-col,.mdl-cell--1-col-desktop.mdl-cell--1-col-desktop{width:calc(8.3333333333% - 16px)}.mdl-grid--no-spacing>.mdl-cell--1-col,.mdl-grid--no-spacing>.mdl-cell--1-col-desktop.mdl-cell--1-col-desktop{width:8.3333333333%}.mdl-cell--2-col,.mdl-cell--2-col-desktop.mdl-cell--2-col-desktop{width:calc(16.6666666667% - 16px)}.mdl-grid--no-spacing>.mdl-cell--2-col,.mdl-grid--no-spacing>.mdl-cell--2-col-desktop.mdl-cell--2-col-desktop{width:16.6666666667%}.mdl-cell--3-col,.mdl-cell--3-col-desktop.mdl-cell--3-col-desktop{width:calc(25% - 16px)}.mdl-grid--no-spacing>.mdl-cell--3-col,.mdl-grid--no-spacing>.mdl-cell--3-col-desktop.mdl-cell--3-col-desktop{width:25%}.mdl-cell--4-col,.mdl-cell--4-col-desktop.mdl-cell--4-col-desktop{width:calc(33.3333333333% - 16px)}.mdl-grid--no-spacing>.mdl-cell--4-col,.mdl-grid--no-spacing>.mdl-cell--4-col-desktop.mdl-cell--4-col-desktop{width:33.3333333333%}.mdl-cell--5-col,.mdl-cell--5-col-desktop.mdl-cell--5-col-desktop{width:calc(41.6666666667% - 16px)}.mdl-grid--no-spacing>.mdl-cell--5-col,.mdl-grid--no-spacing>.mdl-cell--5-col-desktop.mdl-cell--5-col-desktop{width:41.6666666667%}.mdl-cell--6-col,.mdl-cell--6-col-desktop.mdl-cell--6-col-desktop{width:calc(50% - 16px)}.mdl-grid--no-spacing>.mdl-cell--6-col,.mdl-grid--no-spacing>.mdl-cell--6-col-desktop.mdl-cell--6-col-desktop{width:50%}.mdl-cell--7-col,.mdl-cell--7-col-desktop.mdl-cell--7-col-desktop{width:calc(58.3333333333% - 16px)}.mdl-grid--no-spacing>.mdl-cell--7-col,.mdl-grid--no-spacing>.mdl-cell--7-col-desktop.mdl-cell--7-col-desktop{width:58.3333333333%}.mdl-cell--8-col,.mdl-cell--8-col-desktop.mdl-cell--8-col-desktop{width:calc(66.6666666667% - 16px)}.mdl-grid--no-spacing>.mdl-cell--8-col,.mdl-grid--no-spacing>.mdl-cell--8-col-desktop.mdl-cell--8-col-desktop{width:66.6666666667%}.mdl-cell--9-col,.mdl-cell--9-col-desktop.mdl-cell--9-col-desktop{width:calc(75% - 16px)}.mdl-grid--no-spacing>.mdl-cell--9-col,.mdl-grid--no-spacing>.mdl-cell--9-col-desktop.mdl-cell--9-col-desktop{width:75%}.mdl-cell--10-col,.mdl-cell--10-col-desktop.mdl-cell--10-col-desktop{width:calc(83.3333333333% - 16px)}.mdl-grid--no-spacing>.mdl-cell--10-col,.mdl-grid--no-spacing>.mdl-cell--10-col-desktop.mdl-cell--10-col-desktop{width:83.3333333333%}.mdl-cell--11-col,.mdl-cell--11-col-desktop.mdl-cell--11-col-desktop{width:calc(91.6666666667% - 16px)}.mdl-grid--no-spacing>.mdl-cell--11-col,.mdl-grid--no-spacing>.mdl-cell--11-col-desktop.mdl-cell--11-col-desktop{width:91.6666666667%}.mdl-cell--12-col,.mdl-cell--12-col-desktop.mdl-cell--12-col-desktop{width:calc(100% - 16px)}.mdl-grid--no-spacing>.mdl-cell--12-col,.mdl-grid--no-spacing>.mdl-cell--12-col-desktop.mdl-cell--12-col-desktop{width:100%}.mdl-cell--1-offset,.mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop{margin-left:calc(8.3333333333% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop{margin-left:8.3333333333%}.mdl-cell--2-offset,.mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop{margin-left:calc(16.6666666667% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop{margin-left:16.6666666667%}.mdl-cell--3-offset,.mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop{margin-left:calc(25% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop{margin-left:25%}.mdl-cell--4-offset,.mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop{margin-left:calc(33.3333333333% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--4-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop{margin-left:33.3333333333%}.mdl-cell--5-offset,.mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop{margin-left:calc(41.6666666667% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--5-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop{margin-left:41.6666666667%}.mdl-cell--6-offset,.mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop{margin-left:calc(50% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--6-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop{margin-left:50%}.mdl-cell--7-offset,.mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop{margin-left:calc(58.3333333333% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--7-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop{margin-left:58.3333333333%}.mdl-cell--8-offset,.mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop{margin-left:calc(66.6666666667% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--8-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop{margin-left:66.6666666667%}.mdl-cell--9-offset,.mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop{margin-left:calc(75% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--9-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop{margin-left:75%}.mdl-cell--10-offset,.mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop{margin-left:calc(83.3333333333% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--10-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop{margin-left:83.3333333333%}.mdl-cell--11-offset,.mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop{margin-left:calc(91.6666666667% + 8px)}.mdl-grid.mdl-grid--no-spacing>.mdl-cell--11-offset,.mdl-grid.mdl-grid--no-spacing>.mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop{margin-left:91.6666666667%}}
--------------------------------------------------------------------------------
/dist/assets/_layout.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2015 Google Inc. All Rights Reserved.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | @import "~material-design-lite/src/variables";
18 | @import "~material-design-lite/src/mixins";
19 |
20 | // Navigation classes. Only used here for now, but we may at some point move
21 | // this to its own component.
22 | .mdl-navigation {
23 | display: flex;
24 | flex-wrap: nowrap;
25 | box-sizing: border-box;
26 | }
27 |
28 | .mdl-navigation__link {
29 | color: $layout-text-color;
30 | text-decoration: none;
31 | margin: 0;
32 | @include typo-body-1(true);
33 |
34 | // Align icons inside link with text
35 | & .material-icons {
36 | vertical-align: middle;
37 | }
38 | }
39 |
40 | // Main layout class.
41 | .mdl-layout {
42 | position: absolute;
43 | width: 100%;
44 | height: 100%;
45 | }
46 |
47 | // Utility classes for screen sizes.
48 | .mdl-layout.is-small-screen .mdl-layout--large-screen-only {
49 | display: none;
50 | }
51 |
52 | .mdl-layout:not(.is-small-screen) .mdl-layout--small-screen-only {
53 | display: none;
54 | }
55 |
56 | .mdl-layout__inner-container {
57 | width: 100%;
58 | height: 100%;
59 | display: flex;
60 | flex-direction: column;
61 | overflow-y: auto;
62 | overflow-x: hidden;
63 | position: relative;
64 | -webkit-overflow-scrolling: touch;
65 | }
66 |
67 |
68 | // Optional utility classes for formatting special blocks in this component.
69 | .mdl-layout__title,
70 | .mdl-layout-title {
71 | display: block;
72 | position: relative;
73 |
74 | @include typo-title();
75 | font-weight: 400;
76 | box-sizing: border-box;
77 | }
78 |
79 | .mdl-layout-spacer {
80 | flex-grow: 1;
81 | }
82 |
83 |
84 | // Drawer.
85 | .mdl-layout__drawer {
86 | display: flex;
87 | flex-direction: column;
88 | flex-wrap: nowrap;
89 |
90 | width: $layout-drawer-width;
91 | height: 100%;
92 | max-height: 100%;
93 |
94 | position: absolute;
95 | top: 0;
96 | left: 0;
97 |
98 | @include shadow-2dp();
99 |
100 | box-sizing: border-box;
101 | border-right: 1px solid $layout-drawer-border-color;
102 | background: $layout-drawer-bg-color;
103 |
104 | // Transform offscreen.
105 | transform: translateX(-$layout-drawer-width - 10px);
106 | transform-style: preserve-3d;
107 | will-change: transform;
108 |
109 | @include material-animation-default();
110 | transition-property: transform;
111 |
112 | color: $layout-text-color;
113 |
114 | overflow: visible;
115 | overflow-y: auto;
116 |
117 | z-index: 5;
118 |
119 | &.is-visible {
120 | transform: translateX(0);
121 | & ~ .mdl-layout__content.mdl-layout__content {
122 | overflow: hidden;
123 | }
124 | }
125 |
126 | & > * {
127 | flex-shrink: 0;
128 | }
129 |
130 | & > .mdl-layout__title,
131 | & > .mdl-layout-title {
132 | line-height: $layout-desktop-header-height;
133 | padding-left: $layout-header-desktop-indent;
134 |
135 | @media screen and (max-width: $layout-screen-size-threshold) {
136 | line-height: $layout-mobile-header-height;
137 | padding-left: $layout-header-mobile-indent;
138 | }
139 | }
140 |
141 | & .mdl-navigation {
142 | flex-direction: column;
143 | align-items: stretch;
144 | padding-top: 16px;
145 |
146 | & .mdl-navigation__link {
147 | display: block;
148 | flex-shrink: 0;
149 | padding: 16px $layout-header-desktop-indent;
150 | margin: 0;
151 | color: $layout-drawer-navigation-color;
152 |
153 | @media screen and (max-width: $layout-screen-size-threshold) {
154 | padding: 16px $layout-header-mobile-indent;
155 | }
156 |
157 | &:hover {
158 | background-color: $layout-nav-color;
159 | }
160 |
161 | &--current {
162 | background-color: $layout-drawer-navigation-link-active-background;
163 | color: $layout-drawer-navigation-link-active-color;
164 | }
165 | }
166 | }
167 |
168 | @media screen and (min-width: $layout-screen-size-threshold + 1px) {
169 | .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
170 | transform: translateX(0);
171 | }
172 | }
173 | }
174 |
175 |
176 | // Drawer button.
177 | // TODO(sgomes): Replace with an icon button when we have that component.
178 | .mdl-layout__drawer-button {
179 | display: block;
180 |
181 | position: absolute;
182 | height: $layout-drawer-button-desktop-size;
183 | width: $layout-drawer-button-desktop-size;
184 | border: 0;
185 |
186 | flex-shrink: 0;
187 |
188 | overflow: hidden;
189 | text-align: center;
190 | cursor: pointer;
191 | font-size: 26px;
192 | line-height: $layout-drawer-button-desktop-size + 2;
193 | font-family: Helvetica, Arial, sans-serif;
194 | margin: 10px 12px;
195 | top: 0;
196 | left: 0;
197 | color: $layout-header-text-color;
198 |
199 | z-index: 4;
200 |
201 | .mdl-layout__header & {
202 | position: absolute;
203 | color: $layout-header-text-color;
204 | background-color: inherit;
205 |
206 | @media screen and (max-width: $layout-screen-size-threshold) {
207 | margin: 4px;
208 | }
209 | }
210 |
211 | @media screen and (max-width: $layout-screen-size-threshold) {
212 | margin: 4px;
213 | color: rgba(0, 0, 0, 0.5);
214 | }
215 |
216 | @media screen and (min-width: $layout-screen-size-threshold + 1px) {
217 | .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
218 | display: none;
219 | }
220 |
221 | .mdl-layout--no-desktop-drawer-button & {
222 | display: none;
223 | }
224 | }
225 |
226 | .mdl-layout--no-drawer-button & {
227 | display: none;
228 | }
229 | }
230 |
231 | .mdl-layout__header {
232 | display: flex;
233 | flex-direction: column;
234 | flex-wrap: nowrap;
235 | justify-content: flex-start;
236 | box-sizing: border-box;
237 | flex-shrink: 0;
238 |
239 | width: 100%;
240 | margin: 0;
241 | padding: 0;
242 | border: none;
243 | min-height: $layout-desktop-header-height;
244 | max-height: 1000px;
245 | z-index: 3;
246 |
247 | background-color: $layout-header-bg-color;
248 | color: $layout-header-text-color;
249 |
250 | @include shadow-2dp();
251 | @include material-animation-default();
252 | transition-property: max-height, box-shadow;
253 |
254 | @media screen and (max-width: $layout-screen-size-threshold) {
255 | min-height: $layout-mobile-header-height;
256 | }
257 |
258 | .mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > .mdl-layout__inner-container > & {
259 | margin-left: $layout-drawer-width;
260 | width: calc(100% - #{$layout-drawer-width});
261 | }
262 |
263 | @media screen and (min-width: $layout-screen-size-threshold + 1px) {
264 | .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
265 | .mdl-layout__header-row {
266 | padding-left: 40px;
267 | }
268 | }
269 | }
270 |
271 | & > .mdl-layout-icon {
272 | position: absolute;
273 | left: $layout-header-desktop-indent;
274 | top: ($layout-desktop-header-height - $layout-header-icon-size) / 2;
275 | height: $layout-header-icon-size;
276 | width: $layout-header-icon-size;
277 | overflow: hidden;
278 | z-index: 3;
279 | display: block;
280 |
281 | @media screen and (max-width: $layout-screen-size-threshold) {
282 | left: $layout-header-mobile-indent;
283 | top: ($layout-mobile-header-height - $layout-header-icon-size) / 2;
284 | }
285 | }
286 |
287 | .mdl-layout.has-drawer & > .mdl-layout-icon {
288 | display: none;
289 | }
290 |
291 | &.is-compact {
292 | max-height: $layout-desktop-header-height;
293 |
294 | @media screen and (max-width: $layout-screen-size-threshold) {
295 | max-height: $layout-mobile-header-height;
296 | }
297 | }
298 |
299 | &.is-compact.has-tabs {
300 | height: $layout-desktop-header-height + $layout-tab-bar-height;
301 |
302 | @media screen and (max-width: $layout-screen-size-threshold) {
303 | min-height: $layout-mobile-header-height + $layout-tab-bar-height;
304 | }
305 | }
306 |
307 | @media screen and (max-width: $layout-screen-size-threshold) {
308 | & {
309 | display: none;
310 | }
311 |
312 | .mdl-layout--fixed-header > .mdl-layout__inner-container > & {
313 | display: flex;
314 | }
315 | }
316 | }
317 |
318 | .mdl-layout__header--transparent.mdl-layout__header--transparent {
319 | background-color: transparent;
320 | box-shadow: none;
321 | }
322 |
323 | .mdl-layout__header--seamed {
324 | box-shadow: none;
325 | }
326 |
327 | .mdl-layout__header--scroll {
328 | box-shadow: none;
329 | }
330 |
331 | .mdl-layout__header--waterfall {
332 | box-shadow: none;
333 | overflow: hidden;
334 |
335 | &.is-casting-shadow {
336 | @include shadow-2dp();
337 | }
338 |
339 | &.mdl-layout__header--waterfall-hide-top {
340 | justify-content: flex-end;
341 | }
342 | }
343 |
344 | .mdl-layout__header-row {
345 | display: flex;
346 | flex-direction: row;
347 | flex-wrap: nowrap;
348 | flex-shrink: 0;
349 | box-sizing: border-box;
350 | align-self: stretch;
351 | align-items: center;
352 | height: $layout-header-desktop-row-height;
353 | margin: 0;
354 | padding: 0 $layout-header-desktop-indent 0 $layout-header-desktop-baseline;
355 |
356 | .mdl-layout--no-drawer-button & {
357 | padding-left: $layout-header-desktop-indent;
358 | }
359 |
360 | @media screen and (min-width: $layout-screen-size-threshold + 1px) {
361 | .mdl-layout--no-desktop-drawer-button & {
362 | padding-left: $layout-header-desktop-indent;
363 | }
364 | }
365 |
366 | @media screen and (max-width: $layout-screen-size-threshold) {
367 | height: $layout-header-mobile-row-height;
368 | padding: 0 $layout-header-mobile-indent 0 $layout-header-mobile-baseline;
369 |
370 | .mdl-layout--no-drawer-button & {
371 | padding-left: $layout-header-mobile-indent;
372 | }
373 | }
374 |
375 | & > * {
376 | flex-shrink: 0;
377 | }
378 |
379 | .mdl-layout__header--scroll & {
380 | width: 100%;
381 | }
382 |
383 | & .mdl-navigation {
384 | margin: 0;
385 | padding: 0;
386 | height: $layout-header-desktop-row-height;
387 | flex-direction: row;
388 | align-items: center;
389 |
390 | @media screen and (max-width: $layout-screen-size-threshold) {
391 | height: $layout-header-mobile-row-height;
392 | }
393 | }
394 |
395 | & .mdl-navigation__link {
396 | display: block;
397 | color: $layout-header-text-color;
398 | line-height: $layout-header-desktop-row-height;
399 | padding: 0 24px;
400 |
401 | @media screen and (max-width: $layout-screen-size-threshold) {
402 | line-height: $layout-header-mobile-row-height;
403 | padding: 0 $layout-header-mobile-indent;
404 | }
405 | }
406 | }
407 |
408 | // Obfuscator.
409 | .mdl-layout__obfuscator {
410 | background-color: transparent;
411 | position: absolute;
412 | top: 0;
413 | left: 0;
414 | height: 100%;
415 | width: 100%;
416 | z-index: 4;
417 | visibility: hidden;
418 | transition-property: background-color;
419 | @include material-animation-default();
420 |
421 | &.is-visible {
422 | background-color: rgba(0, 0, 0, 0.5);
423 | visibility: visible;
424 | }
425 |
426 | @supports (pointer-events: auto) {
427 | background-color: rgba(0, 0, 0, 0.5);
428 | opacity: 0;
429 | transition-property: opacity;
430 | visibility: visible;
431 | pointer-events: none;
432 | &.is-visible {
433 | pointer-events: auto;
434 | opacity: 1;
435 | }
436 | }
437 | }
438 |
439 |
440 | // Content.
441 | .mdl-layout__content {
442 | // Fix IE10 bug.
443 | -ms-flex: 0 1 auto;
444 |
445 | position: relative;
446 | display: inline-block;
447 | overflow-y: auto;
448 | overflow-x: hidden;
449 | flex-grow: 1;
450 | z-index: 1;
451 | -webkit-overflow-scrolling: touch;
452 |
453 | .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
454 | margin-left: $layout-drawer-width;
455 | }
456 |
457 | .mdl-layout.has-scrolling-header & {
458 | overflow: visible;
459 | }
460 |
461 | @media screen and (max-width: $layout-screen-size-threshold) {
462 | .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
463 | margin-left: 0;
464 | }
465 |
466 | .mdl-layout.has-scrolling-header & {
467 | overflow-y: auto;
468 | overflow-x: hidden;
469 | }
470 | }
471 | }
472 |
473 | // Tabs.
474 | .mdl-layout__tab-bar {
475 | height: $layout-tab-bar-height * 2;
476 | margin: 0;
477 | width: calc(100% -
478 | #{(($layout-header-desktop-baseline - $layout-tab-desktop-padding) * 2)});
479 | padding: 0 0 0
480 | ($layout-header-desktop-baseline - $layout-tab-desktop-padding);
481 | display: flex;
482 | background-color: $layout-header-bg-color;
483 | overflow-y: hidden;
484 | overflow-x: scroll;
485 |
486 | &::-webkit-scrollbar {
487 | display: none;
488 | }
489 |
490 | .mdl-layout--no-drawer-button & {
491 | padding-left: $layout-header-desktop-indent - $layout-tab-desktop-padding;
492 | width: calc(100% -
493 | #{(($layout-header-desktop-indent - $layout-tab-desktop-padding) * 2)});
494 | }
495 |
496 | @media screen and (min-width: $layout-screen-size-threshold + 1px) {
497 | .mdl-layout--no-desktop-drawer-button & {
498 | padding-left: $layout-header-desktop-indent - $layout-tab-desktop-padding;
499 | width: calc(100% -
500 | #{(($layout-header-desktop-indent - $layout-tab-desktop-padding) * 2)});
501 | }
502 | }
503 |
504 | @media screen and (max-width: $layout-screen-size-threshold) {
505 | width: calc(100% -
506 | #{($layout-header-mobile-baseline - $layout-tab-mobile-padding)});
507 | padding: 0 0 0
508 | ($layout-header-mobile-baseline - $layout-tab-mobile-padding);
509 |
510 | .mdl-layout--no-drawer-button & {
511 | width: calc(100% -
512 | #{(($layout-header-mobile-indent - $layout-tab-mobile-padding) * 2)});
513 | padding-left: $layout-header-mobile-indent - $layout-tab-mobile-padding;
514 | }
515 | }
516 |
517 | .mdl-layout--fixed-tabs & {
518 | padding: 0;
519 | overflow: hidden;
520 | width: 100%;
521 | }
522 | }
523 |
524 | .mdl-layout__tab-bar-container {
525 | position: relative;
526 | height: $layout-tab-bar-height;
527 | width: 100%;
528 | border: none;
529 | margin: 0;
530 | z-index: 2;
531 | flex-grow: 0;
532 | flex-shrink: 0;
533 | overflow: hidden;
534 |
535 | .mdl-layout > .mdl-layout__inner-container > & {
536 | position: absolute;
537 | top: 0;
538 | left: 0;
539 | }
540 | }
541 |
542 | .mdl-layout__tab-bar-button {
543 | display: inline-block;
544 | position: absolute;
545 | top: 0;
546 | height: $layout-tab-bar-height;
547 | width: $layout-header-desktop-baseline - $layout-tab-desktop-padding;
548 | z-index: 4;
549 | text-align: center;
550 | background-color: $layout-header-bg-color;
551 | color: transparent;
552 | cursor: pointer;
553 | user-select: none;
554 |
555 | .mdl-layout--no-desktop-drawer-button &,
556 | .mdl-layout--no-drawer-button & {
557 | width: $layout-header-desktop-indent - $layout-tab-desktop-padding;
558 |
559 | & .material-icons {
560 | position: relative;
561 | left: ($layout-header-desktop-indent - $layout-tab-desktop-padding - 24px) / 2;
562 | }
563 | }
564 |
565 | @media screen and (max-width: $layout-screen-size-threshold) {
566 | display: none;
567 | width: $layout-header-mobile-baseline - $layout-tab-mobile-padding;
568 | }
569 |
570 | .mdl-layout--fixed-tabs & {
571 | display: none;
572 | }
573 |
574 | & .material-icons {
575 | line-height: $layout-tab-bar-height;
576 | }
577 |
578 | &.is-active {
579 | color: $layout-header-text-color;
580 | }
581 | }
582 |
583 | .mdl-layout__tab-bar-left-button {
584 | left: 0;
585 | }
586 |
587 | .mdl-layout__tab-bar-right-button {
588 | right: 0;
589 | }
590 |
591 | .mdl-layout__tab {
592 | margin: 0;
593 | border: none;
594 | padding: 0 $layout-tab-desktop-padding 0 $layout-tab-desktop-padding;
595 |
596 | float: left;
597 | position: relative;
598 | display: block;
599 | flex-grow: 0;
600 | flex-shrink: 0;
601 |
602 | text-decoration: none;
603 | height: $layout-tab-bar-height;
604 | line-height: $layout-tab-bar-height;
605 |
606 | text-align: center;
607 | font-weight: 500;
608 | font-size: $layout-tab-font-size;
609 | text-transform: uppercase;
610 |
611 | color: $layout-header-tab-text-color;
612 | overflow: hidden;
613 |
614 | @media screen and (max-width: $layout-screen-size-threshold) {
615 | padding: 0 $layout-tab-mobile-padding 0 $layout-tab-mobile-padding;
616 | }
617 |
618 | .mdl-layout--fixed-tabs & {
619 | float: none;
620 | flex-grow: 1;
621 | padding: 0;
622 | }
623 |
624 | .mdl-layout.is-upgraded &.is-active {
625 | color: $layout-header-text-color;
626 | }
627 |
628 | .mdl-layout.is-upgraded &.is-active::after {
629 | height: $layout-tab-highlight-thickness;
630 | width: 100%;
631 | display: block;
632 | content: " ";
633 | bottom: 0;
634 | left: 0;
635 | position: absolute;
636 | background: $layout-header-tab-highlight;
637 | animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;
638 | transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
639 | }
640 |
641 | & .mdl-layout__tab-ripple-container {
642 | display: block;
643 | position: absolute;
644 | height: 100%;
645 | width: 100%;
646 | left: 0;
647 | top: 0;
648 | z-index: 1;
649 | overflow: hidden;
650 |
651 | & .mdl-ripple {
652 | background-color: $layout-header-text-color;
653 | }
654 | }
655 | }
656 |
657 | .mdl-layout__tab-panel {
658 | display: block;
659 |
660 | .mdl-layout.is-upgraded & {
661 | display: none;
662 | }
663 |
664 | .mdl-layout.is-upgraded &.is-active {
665 | display: block;
666 | }
667 | }
668 |
--------------------------------------------------------------------------------
/dist/assets/material-grid.css:
--------------------------------------------------------------------------------
1 | /**
2 | * material-design-lite - Material Design Components in CSS, JS and HTML
3 | * @version v1.1.1
4 | * @license Apache-2.0
5 | * @copyright 2015 Google, Inc.
6 | * @link https://github.com/google/material-design-lite
7 | */
8 | /**
9 | * Copyright 2015 Google Inc. All Rights Reserved.
10 | *
11 | * Licensed under the Apache License, Version 2.0 (the "License");
12 | * you may not use this file except in compliance with the License.
13 | * You may obtain a copy of the License at
14 | *
15 | * http://www.apache.org/licenses/LICENSE-2.0
16 | *
17 | * Unless required by applicable law or agreed to in writing, software
18 | * distributed under the License is distributed on an "AS IS" BASIS,
19 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
20 | * See the License for the specific language governing permissions and
21 | * limitations under the License.
22 | */
23 | /* Material Design Lite Grid*/
24 | /**
25 | * Copyright 2015 Google Inc. All Rights Reserved.
26 | *
27 | * Licensed under the Apache License, Version 2.0 (the "License");
28 | * you may not use this file except in compliance with the License.
29 | * You may obtain a copy of the License at
30 | *
31 | * http://www.apache.org/licenses/LICENSE-2.0
32 | *
33 | * Unless required by applicable law or agreed to in writing, software
34 | * distributed under the License is distributed on an "AS IS" BASIS,
35 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
36 | * See the License for the specific language governing permissions and
37 | * limitations under the License.
38 | */
39 | /*------------------------------------* $CONTENTS
40 | \*------------------------------------*/
41 | /**
42 | * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
43 | * -----Typography
44 | * -----Colors
45 | * -----Textfield
46 | * -----Switch
47 | * -----Spinner
48 | * -----Radio
49 | * -----Menu
50 | * -----List
51 | * -----Layout
52 | * -----Icon toggles
53 | * -----Footer
54 | * -----Column
55 | * -----Checkbox
56 | * -----Card
57 | * -----Button
58 | * -----Animation
59 | * -----Progress
60 | * -----Badge
61 | * -----Shadows
62 | * -----Grid
63 | * -----Data table
64 | * -----Dialog
65 | * -----Snackbar
66 | *
67 | * Even though all variables have the `!default` directive, most of them
68 | * should not be changed as they are dependent one another. This can cause
69 | * visual distortions (like alignment issues) that are hard to track down
70 | * and fix.
71 | */
72 | /* ========== TYPOGRAPHY ========== */
73 | /* We're splitting fonts into "preferred" and "performance" in order to optimize
74 | page loading. For important text, such as the body, we want it to load
75 | immediately and not wait for the web font load, whereas for other sections,
76 | such as headers and titles, we're OK with things taking a bit longer to load.
77 | We do have some optional classes and parameters in the mixins, in case you
78 | definitely want to make sure you're using the preferred font and don't mind
79 | the performance hit.
80 | We should be able to improve on this once CSS Font Loading L3 becomes more
81 | widely available.
82 | */
83 | /* ========== COLORS ========== */
84 | /**
85 | *
86 | * Material design color palettes.
87 | * @see http://www.google.com/design/spec/style/color.html
88 | *
89 | **/
90 | /**
91 | * Copyright 2015 Google Inc. All Rights Reserved.
92 | *
93 | * Licensed under the Apache License, Version 2.0 (the "License");
94 | * you may not use this file except in compliance with the License.
95 | * You may obtain a copy of the License at
96 | *
97 | * http://www.apache.org/licenses/LICENSE-2.0
98 | *
99 | * Unless required by applicable law or agreed to in writing, software
100 | * distributed under the License is distributed on an "AS IS" BASIS,
101 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
102 | * See the License for the specific language governing permissions and
103 | * limitations under the License.
104 | */
105 | /* ========== Color Palettes ========== */
106 | /* colors.scss */
107 | /**
108 | * Copyright 2015 Google Inc. All Rights Reserved.
109 | *
110 | * Licensed under the Apache License, Version 2.0 (the "License");
111 | * you may not use this file except in compliance with the License.
112 | * You may obtain a copy of the License at
113 | *
114 | * http://www.apache.org/licenses/LICENSE-2.0
115 | *
116 | * Unless required by applicable law or agreed to in writing, software
117 | * distributed under the License is distributed on an "AS IS" BASIS,
118 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
119 | * See the License for the specific language governing permissions and
120 | * limitations under the License.
121 | */
122 | /* ========== IMAGES ========== */
123 | /* ========== Color & Themes ========== */
124 | /* ========== Typography ========== */
125 | /* ========== Components ========== */
126 | /* ========== Standard Buttons ========== */
127 | /* ========== Icon Toggles ========== */
128 | /* ========== Radio Buttons ========== */
129 | /* ========== Ripple effect ========== */
130 | /* ========== Layout ========== */
131 | /* ========== Content Tabs ========== */
132 | /* ========== Checkboxes ========== */
133 | /* ========== Switches ========== */
134 | /* ========== Spinner ========== */
135 | /* ========== Text fields ========== */
136 | /* ========== Card ========== */
137 | /* ========== Sliders ========== */
138 | /* ========== Progress ========== */
139 | /* ========== List ========== */
140 | /* ========== Item ========== */
141 | /* ========== Dropdown menu ========== */
142 | /* ========== Tooltips ========== */
143 | /* ========== Footer ========== */
144 | /* TEXTFIELD */
145 | /* SWITCH */
146 | /* SPINNER */
147 | /* RADIO */
148 | /* MENU */
149 | /* LIST */
150 | /* LAYOUT */
151 | /* ICON TOGGLE */
152 | /* FOOTER */
153 | /*mega-footer*/
154 | /*mini-footer*/
155 | /* CHECKBOX */
156 | /* CARD */
157 | /* Card dimensions */
158 | /* Cover image */
159 | /* BUTTON */
160 | /**
161 | *
162 | * Dimensions
163 | *
164 | */
165 | /* ANIMATION */
166 | /* PROGRESS */
167 | /* BADGE */
168 | /* SHADOWS */
169 | /* GRID */
170 | /* DATA TABLE */
171 | /* DIALOG */
172 | /* SNACKBAR */
173 | /* TOOLTIP */
174 | /**
175 | * Copyright 2015 Google Inc. All Rights Reserved.
176 | *
177 | * Licensed under the Apache License, Version 2.0 (the "License");
178 | * you may not use this file except in compliance with the License.
179 | * You may obtain a copy of the License at
180 | *
181 | * http://www.apache.org/licenses/LICENSE-2.0
182 | *
183 | * Unless required by applicable law or agreed to in writing, software
184 | * distributed under the License is distributed on an "AS IS" BASIS,
185 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
186 | * See the License for the specific language governing permissions and
187 | * limitations under the License.
188 | */
189 | /* Typography */
190 | /* Shadows */
191 | /* Animations */
192 | /* Dialog */
193 | /**
194 | * Copyright 2015 Google Inc. All Rights Reserved.
195 | *
196 | * Licensed under the Apache License, Version 2.0 (the "License");
197 | * you may not use this file except in compliance with the License.
198 | * You may obtain a copy of the License at
199 | *
200 | * http://www.apache.org/licenses/LICENSE-2.0
201 | *
202 | * Unless required by applicable law or agreed to in writing, software
203 | * distributed under the License is distributed on an "AS IS" BASIS,
204 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
205 | * See the License for the specific language governing permissions and
206 | * limitations under the License.
207 | */
208 | /*
209 | * NOTE: Some rules here are applied using duplicate selectors.
210 | * This is on purpose to increase their specificity when applied.
211 | * For example: `.mdl-cell--1-col-phone.mdl-cell--1-col-phone`
212 | */
213 | /**
214 | * Copyright 2015 Google Inc. All Rights Reserved.
215 | *
216 | * Licensed under the Apache License, Version 2.0 (the "License");
217 | * you may not use this file except in compliance with the License.
218 | * You may obtain a copy of the License at
219 | *
220 | * http://www.apache.org/licenses/LICENSE-2.0
221 | *
222 | * Unless required by applicable law or agreed to in writing, software
223 | * distributed under the License is distributed on an "AS IS" BASIS,
224 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
225 | * See the License for the specific language governing permissions and
226 | * limitations under the License.
227 | */
228 | /*------------------------------------* $CONTENTS
229 | \*------------------------------------*/
230 | /**
231 | * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
232 | * -----Typography
233 | * -----Colors
234 | * -----Textfield
235 | * -----Switch
236 | * -----Spinner
237 | * -----Radio
238 | * -----Menu
239 | * -----List
240 | * -----Layout
241 | * -----Icon toggles
242 | * -----Footer
243 | * -----Column
244 | * -----Checkbox
245 | * -----Card
246 | * -----Button
247 | * -----Animation
248 | * -----Progress
249 | * -----Badge
250 | * -----Shadows
251 | * -----Grid
252 | * -----Data table
253 | * -----Dialog
254 | * -----Snackbar
255 | *
256 | * Even though all variables have the `!default` directive, most of them
257 | * should not be changed as they are dependent one another. This can cause
258 | * visual distortions (like alignment issues) that are hard to track down
259 | * and fix.
260 | */
261 | /* ========== TYPOGRAPHY ========== */
262 | /* We're splitting fonts into "preferred" and "performance" in order to optimize
263 | page loading. For important text, such as the body, we want it to load
264 | immediately and not wait for the web font load, whereas for other sections,
265 | such as headers and titles, we're OK with things taking a bit longer to load.
266 | We do have some optional classes and parameters in the mixins, in case you
267 | definitely want to make sure you're using the preferred font and don't mind
268 | the performance hit.
269 | We should be able to improve on this once CSS Font Loading L3 becomes more
270 | widely available.
271 | */
272 | /* ========== COLORS ========== */
273 | /**
274 | *
275 | * Material design color palettes.
276 | * @see http://www.google.com/design/spec/style/color.html
277 | *
278 | **/
279 | /**
280 | * Copyright 2015 Google Inc. All Rights Reserved.
281 | *
282 | * Licensed under the Apache License, Version 2.0 (the "License");
283 | * you may not use this file except in compliance with the License.
284 | * You may obtain a copy of the License at
285 | *
286 | * http://www.apache.org/licenses/LICENSE-2.0
287 | *
288 | * Unless required by applicable law or agreed to in writing, software
289 | * distributed under the License is distributed on an "AS IS" BASIS,
290 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
291 | * See the License for the specific language governing permissions and
292 | * limitations under the License.
293 | */
294 | /* ========== Color Palettes ========== */
295 | /* colors.scss */
296 | /**
297 | * Copyright 2015 Google Inc. All Rights Reserved.
298 | *
299 | * Licensed under the Apache License, Version 2.0 (the "License");
300 | * you may not use this file except in compliance with the License.
301 | * You may obtain a copy of the License at
302 | *
303 | * http://www.apache.org/licenses/LICENSE-2.0
304 | *
305 | * Unless required by applicable law or agreed to in writing, software
306 | * distributed under the License is distributed on an "AS IS" BASIS,
307 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
308 | * See the License for the specific language governing permissions and
309 | * limitations under the License.
310 | */
311 | /* ========== IMAGES ========== */
312 | /* ========== Color & Themes ========== */
313 | /* ========== Typography ========== */
314 | /* ========== Components ========== */
315 | /* ========== Standard Buttons ========== */
316 | /* ========== Icon Toggles ========== */
317 | /* ========== Radio Buttons ========== */
318 | /* ========== Ripple effect ========== */
319 | /* ========== Layout ========== */
320 | /* ========== Content Tabs ========== */
321 | /* ========== Checkboxes ========== */
322 | /* ========== Switches ========== */
323 | /* ========== Spinner ========== */
324 | /* ========== Text fields ========== */
325 | /* ========== Card ========== */
326 | /* ========== Sliders ========== */
327 | /* ========== Progress ========== */
328 | /* ========== List ========== */
329 | /* ========== Item ========== */
330 | /* ========== Dropdown menu ========== */
331 | /* ========== Tooltips ========== */
332 | /* ========== Footer ========== */
333 | /* TEXTFIELD */
334 | /* SWITCH */
335 | /* SPINNER */
336 | /* RADIO */
337 | /* MENU */
338 | /* LIST */
339 | /* LAYOUT */
340 | /* ICON TOGGLE */
341 | /* FOOTER */
342 | /*mega-footer*/
343 | /*mini-footer*/
344 | /* CHECKBOX */
345 | /* CARD */
346 | /* Card dimensions */
347 | /* Cover image */
348 | /* BUTTON */
349 | /**
350 | *
351 | * Dimensions
352 | *
353 | */
354 | /* ANIMATION */
355 | /* PROGRESS */
356 | /* BADGE */
357 | /* SHADOWS */
358 | /* GRID */
359 | /* DATA TABLE */
360 | /* DIALOG */
361 | /* SNACKBAR */
362 | /* TOOLTIP */
363 | .mdl-grid {
364 | display: -webkit-flex;
365 | display: -ms-flexbox;
366 | display: flex;
367 | -webkit-flex-flow: row wrap;
368 | -ms-flex-flow: row wrap;
369 | flex-flow: row wrap;
370 | margin: 0 auto 0 auto;
371 | -webkit-align-items: stretch;
372 | -ms-flex-align: stretch;
373 | align-items: stretch; }
374 | .mdl-grid.mdl-grid--no-spacing {
375 | padding: 0; }
376 |
377 | .mdl-cell {
378 | box-sizing: border-box; }
379 |
380 | .mdl-cell--top {
381 | -webkit-align-self: flex-start;
382 | -ms-flex-item-align: start;
383 | align-self: flex-start; }
384 |
385 | .mdl-cell--middle {
386 | -webkit-align-self: center;
387 | -ms-flex-item-align: center;
388 | align-self: center; }
389 |
390 | .mdl-cell--bottom {
391 | -webkit-align-self: flex-end;
392 | -ms-flex-item-align: end;
393 | align-self: flex-end; }
394 |
395 | .mdl-cell--stretch {
396 | -webkit-align-self: stretch;
397 | -ms-flex-item-align: stretch;
398 | align-self: stretch; }
399 |
400 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell {
401 | margin: 0; }
402 |
403 | .mdl-cell--order-1 {
404 | -webkit-order: 1;
405 | -ms-flex-order: 1;
406 | order: 1; }
407 |
408 | .mdl-cell--order-2 {
409 | -webkit-order: 2;
410 | -ms-flex-order: 2;
411 | order: 2; }
412 |
413 | .mdl-cell--order-3 {
414 | -webkit-order: 3;
415 | -ms-flex-order: 3;
416 | order: 3; }
417 |
418 | .mdl-cell--order-4 {
419 | -webkit-order: 4;
420 | -ms-flex-order: 4;
421 | order: 4; }
422 |
423 | .mdl-cell--order-5 {
424 | -webkit-order: 5;
425 | -ms-flex-order: 5;
426 | order: 5; }
427 |
428 | .mdl-cell--order-6 {
429 | -webkit-order: 6;
430 | -ms-flex-order: 6;
431 | order: 6; }
432 |
433 | .mdl-cell--order-7 {
434 | -webkit-order: 7;
435 | -ms-flex-order: 7;
436 | order: 7; }
437 |
438 | .mdl-cell--order-8 {
439 | -webkit-order: 8;
440 | -ms-flex-order: 8;
441 | order: 8; }
442 |
443 | .mdl-cell--order-9 {
444 | -webkit-order: 9;
445 | -ms-flex-order: 9;
446 | order: 9; }
447 |
448 | .mdl-cell--order-10 {
449 | -webkit-order: 10;
450 | -ms-flex-order: 10;
451 | order: 10; }
452 |
453 | .mdl-cell--order-11 {
454 | -webkit-order: 11;
455 | -ms-flex-order: 11;
456 | order: 11; }
457 |
458 | .mdl-cell--order-12 {
459 | -webkit-order: 12;
460 | -ms-flex-order: 12;
461 | order: 12; }
462 |
463 | @media (max-width: 479px) {
464 | .mdl-grid {
465 | padding: 8px; }
466 | .mdl-cell {
467 | margin: 8px;
468 | width: calc(100% - 16px); }
469 | .mdl-grid--no-spacing > .mdl-cell {
470 | width: 100%; }
471 | .mdl-cell--hide-phone {
472 | display: none !important; }
473 | .mdl-cell--order-1-phone.mdl-cell--order-1-phone {
474 | -webkit-order: 1;
475 | -ms-flex-order: 1;
476 | order: 1; }
477 | .mdl-cell--order-2-phone.mdl-cell--order-2-phone {
478 | -webkit-order: 2;
479 | -ms-flex-order: 2;
480 | order: 2; }
481 | .mdl-cell--order-3-phone.mdl-cell--order-3-phone {
482 | -webkit-order: 3;
483 | -ms-flex-order: 3;
484 | order: 3; }
485 | .mdl-cell--order-4-phone.mdl-cell--order-4-phone {
486 | -webkit-order: 4;
487 | -ms-flex-order: 4;
488 | order: 4; }
489 | .mdl-cell--order-5-phone.mdl-cell--order-5-phone {
490 | -webkit-order: 5;
491 | -ms-flex-order: 5;
492 | order: 5; }
493 | .mdl-cell--order-6-phone.mdl-cell--order-6-phone {
494 | -webkit-order: 6;
495 | -ms-flex-order: 6;
496 | order: 6; }
497 | .mdl-cell--order-7-phone.mdl-cell--order-7-phone {
498 | -webkit-order: 7;
499 | -ms-flex-order: 7;
500 | order: 7; }
501 | .mdl-cell--order-8-phone.mdl-cell--order-8-phone {
502 | -webkit-order: 8;
503 | -ms-flex-order: 8;
504 | order: 8; }
505 | .mdl-cell--order-9-phone.mdl-cell--order-9-phone {
506 | -webkit-order: 9;
507 | -ms-flex-order: 9;
508 | order: 9; }
509 | .mdl-cell--order-10-phone.mdl-cell--order-10-phone {
510 | -webkit-order: 10;
511 | -ms-flex-order: 10;
512 | order: 10; }
513 | .mdl-cell--order-11-phone.mdl-cell--order-11-phone {
514 | -webkit-order: 11;
515 | -ms-flex-order: 11;
516 | order: 11; }
517 | .mdl-cell--order-12-phone.mdl-cell--order-12-phone {
518 | -webkit-order: 12;
519 | -ms-flex-order: 12;
520 | order: 12; }
521 | .mdl-cell--1-col,
522 | .mdl-cell--1-col-phone.mdl-cell--1-col-phone {
523 | width: calc(25% - 16px); }
524 | .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
525 | .mdl-cell--1-col-phone.mdl-cell--1-col-phone {
526 | width: 25%; }
527 | .mdl-cell--2-col,
528 | .mdl-cell--2-col-phone.mdl-cell--2-col-phone {
529 | width: calc(50% - 16px); }
530 | .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
531 | .mdl-cell--2-col-phone.mdl-cell--2-col-phone {
532 | width: 50%; }
533 | .mdl-cell--3-col,
534 | .mdl-cell--3-col-phone.mdl-cell--3-col-phone {
535 | width: calc(75% - 16px); }
536 | .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
537 | .mdl-cell--3-col-phone.mdl-cell--3-col-phone {
538 | width: 75%; }
539 | .mdl-cell--4-col,
540 | .mdl-cell--4-col-phone.mdl-cell--4-col-phone {
541 | width: calc(100% - 16px); }
542 | .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
543 | .mdl-cell--4-col-phone.mdl-cell--4-col-phone {
544 | width: 100%; }
545 | .mdl-cell--5-col,
546 | .mdl-cell--5-col-phone.mdl-cell--5-col-phone {
547 | width: calc(100% - 16px); }
548 | .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
549 | .mdl-cell--5-col-phone.mdl-cell--5-col-phone {
550 | width: 100%; }
551 | .mdl-cell--6-col,
552 | .mdl-cell--6-col-phone.mdl-cell--6-col-phone {
553 | width: calc(100% - 16px); }
554 | .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
555 | .mdl-cell--6-col-phone.mdl-cell--6-col-phone {
556 | width: 100%; }
557 | .mdl-cell--7-col,
558 | .mdl-cell--7-col-phone.mdl-cell--7-col-phone {
559 | width: calc(100% - 16px); }
560 | .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
561 | .mdl-cell--7-col-phone.mdl-cell--7-col-phone {
562 | width: 100%; }
563 | .mdl-cell--8-col,
564 | .mdl-cell--8-col-phone.mdl-cell--8-col-phone {
565 | width: calc(100% - 16px); }
566 | .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
567 | .mdl-cell--8-col-phone.mdl-cell--8-col-phone {
568 | width: 100%; }
569 | .mdl-cell--9-col,
570 | .mdl-cell--9-col-phone.mdl-cell--9-col-phone {
571 | width: calc(100% - 16px); }
572 | .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
573 | .mdl-cell--9-col-phone.mdl-cell--9-col-phone {
574 | width: 100%; }
575 | .mdl-cell--10-col,
576 | .mdl-cell--10-col-phone.mdl-cell--10-col-phone {
577 | width: calc(100% - 16px); }
578 | .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
579 | .mdl-cell--10-col-phone.mdl-cell--10-col-phone {
580 | width: 100%; }
581 | .mdl-cell--11-col,
582 | .mdl-cell--11-col-phone.mdl-cell--11-col-phone {
583 | width: calc(100% - 16px); }
584 | .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
585 | .mdl-cell--11-col-phone.mdl-cell--11-col-phone {
586 | width: 100%; }
587 | .mdl-cell--12-col,
588 | .mdl-cell--12-col-phone.mdl-cell--12-col-phone {
589 | width: calc(100% - 16px); }
590 | .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
591 | .mdl-cell--12-col-phone.mdl-cell--12-col-phone {
592 | width: 100%; }
593 | .mdl-cell--1-offset,
594 | .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
595 | margin-left: calc(25% + 8px); }
596 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
597 | .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
598 | margin-left: 25%; }
599 | .mdl-cell--2-offset,
600 | .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
601 | margin-left: calc(50% + 8px); }
602 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
603 | .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
604 | margin-left: 50%; }
605 | .mdl-cell--3-offset,
606 | .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
607 | margin-left: calc(75% + 8px); }
608 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
609 | .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
610 | margin-left: 75%; } }
611 |
612 | @media (min-width: 480px) and (max-width: 839px) {
613 | .mdl-grid {
614 | padding: 8px; }
615 | .mdl-cell {
616 | margin: 8px;
617 | width: calc(50% - 16px); }
618 | .mdl-grid--no-spacing > .mdl-cell {
619 | width: 50%; }
620 | .mdl-cell--hide-tablet {
621 | display: none !important; }
622 | .mdl-cell--order-1-tablet.mdl-cell--order-1-tablet {
623 | -webkit-order: 1;
624 | -ms-flex-order: 1;
625 | order: 1; }
626 | .mdl-cell--order-2-tablet.mdl-cell--order-2-tablet {
627 | -webkit-order: 2;
628 | -ms-flex-order: 2;
629 | order: 2; }
630 | .mdl-cell--order-3-tablet.mdl-cell--order-3-tablet {
631 | -webkit-order: 3;
632 | -ms-flex-order: 3;
633 | order: 3; }
634 | .mdl-cell--order-4-tablet.mdl-cell--order-4-tablet {
635 | -webkit-order: 4;
636 | -ms-flex-order: 4;
637 | order: 4; }
638 | .mdl-cell--order-5-tablet.mdl-cell--order-5-tablet {
639 | -webkit-order: 5;
640 | -ms-flex-order: 5;
641 | order: 5; }
642 | .mdl-cell--order-6-tablet.mdl-cell--order-6-tablet {
643 | -webkit-order: 6;
644 | -ms-flex-order: 6;
645 | order: 6; }
646 | .mdl-cell--order-7-tablet.mdl-cell--order-7-tablet {
647 | -webkit-order: 7;
648 | -ms-flex-order: 7;
649 | order: 7; }
650 | .mdl-cell--order-8-tablet.mdl-cell--order-8-tablet {
651 | -webkit-order: 8;
652 | -ms-flex-order: 8;
653 | order: 8; }
654 | .mdl-cell--order-9-tablet.mdl-cell--order-9-tablet {
655 | -webkit-order: 9;
656 | -ms-flex-order: 9;
657 | order: 9; }
658 | .mdl-cell--order-10-tablet.mdl-cell--order-10-tablet {
659 | -webkit-order: 10;
660 | -ms-flex-order: 10;
661 | order: 10; }
662 | .mdl-cell--order-11-tablet.mdl-cell--order-11-tablet {
663 | -webkit-order: 11;
664 | -ms-flex-order: 11;
665 | order: 11; }
666 | .mdl-cell--order-12-tablet.mdl-cell--order-12-tablet {
667 | -webkit-order: 12;
668 | -ms-flex-order: 12;
669 | order: 12; }
670 | .mdl-cell--1-col,
671 | .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
672 | width: calc(12.5% - 16px); }
673 | .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
674 | .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
675 | width: 12.5%; }
676 | .mdl-cell--2-col,
677 | .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
678 | width: calc(25% - 16px); }
679 | .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
680 | .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
681 | width: 25%; }
682 | .mdl-cell--3-col,
683 | .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
684 | width: calc(37.5% - 16px); }
685 | .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
686 | .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
687 | width: 37.5%; }
688 | .mdl-cell--4-col,
689 | .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
690 | width: calc(50% - 16px); }
691 | .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
692 | .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
693 | width: 50%; }
694 | .mdl-cell--5-col,
695 | .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
696 | width: calc(62.5% - 16px); }
697 | .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
698 | .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
699 | width: 62.5%; }
700 | .mdl-cell--6-col,
701 | .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
702 | width: calc(75% - 16px); }
703 | .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
704 | .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
705 | width: 75%; }
706 | .mdl-cell--7-col,
707 | .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
708 | width: calc(87.5% - 16px); }
709 | .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
710 | .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
711 | width: 87.5%; }
712 | .mdl-cell--8-col,
713 | .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
714 | width: calc(100% - 16px); }
715 | .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
716 | .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
717 | width: 100%; }
718 | .mdl-cell--9-col,
719 | .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
720 | width: calc(100% - 16px); }
721 | .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
722 | .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
723 | width: 100%; }
724 | .mdl-cell--10-col,
725 | .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
726 | width: calc(100% - 16px); }
727 | .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
728 | .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
729 | width: 100%; }
730 | .mdl-cell--11-col,
731 | .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
732 | width: calc(100% - 16px); }
733 | .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
734 | .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
735 | width: 100%; }
736 | .mdl-cell--12-col,
737 | .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
738 | width: calc(100% - 16px); }
739 | .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
740 | .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
741 | width: 100%; }
742 | .mdl-cell--1-offset,
743 | .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
744 | margin-left: calc(12.5% + 8px); }
745 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
746 | .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
747 | margin-left: 12.5%; }
748 | .mdl-cell--2-offset,
749 | .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
750 | margin-left: calc(25% + 8px); }
751 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
752 | .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
753 | margin-left: 25%; }
754 | .mdl-cell--3-offset,
755 | .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
756 | margin-left: calc(37.5% + 8px); }
757 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
758 | .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
759 | margin-left: 37.5%; }
760 | .mdl-cell--4-offset,
761 | .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
762 | margin-left: calc(50% + 8px); }
763 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing >
764 | .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
765 | margin-left: 50%; }
766 | .mdl-cell--5-offset,
767 | .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
768 | margin-left: calc(62.5% + 8px); }
769 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing >
770 | .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
771 | margin-left: 62.5%; }
772 | .mdl-cell--6-offset,
773 | .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
774 | margin-left: calc(75% + 8px); }
775 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing >
776 | .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
777 | margin-left: 75%; }
778 | .mdl-cell--7-offset,
779 | .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
780 | margin-left: calc(87.5% + 8px); }
781 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing >
782 | .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
783 | margin-left: 87.5%; } }
784 |
785 | @media (min-width: 840px) {
786 | .mdl-grid {
787 | padding: 8px; }
788 | .mdl-cell {
789 | margin: 8px;
790 | width: calc(33.3333333333% - 16px); }
791 | .mdl-grid--no-spacing > .mdl-cell {
792 | width: 33.3333333333%; }
793 | .mdl-cell--hide-desktop {
794 | display: none !important; }
795 | .mdl-cell--order-1-desktop.mdl-cell--order-1-desktop {
796 | -webkit-order: 1;
797 | -ms-flex-order: 1;
798 | order: 1; }
799 | .mdl-cell--order-2-desktop.mdl-cell--order-2-desktop {
800 | -webkit-order: 2;
801 | -ms-flex-order: 2;
802 | order: 2; }
803 | .mdl-cell--order-3-desktop.mdl-cell--order-3-desktop {
804 | -webkit-order: 3;
805 | -ms-flex-order: 3;
806 | order: 3; }
807 | .mdl-cell--order-4-desktop.mdl-cell--order-4-desktop {
808 | -webkit-order: 4;
809 | -ms-flex-order: 4;
810 | order: 4; }
811 | .mdl-cell--order-5-desktop.mdl-cell--order-5-desktop {
812 | -webkit-order: 5;
813 | -ms-flex-order: 5;
814 | order: 5; }
815 | .mdl-cell--order-6-desktop.mdl-cell--order-6-desktop {
816 | -webkit-order: 6;
817 | -ms-flex-order: 6;
818 | order: 6; }
819 | .mdl-cell--order-7-desktop.mdl-cell--order-7-desktop {
820 | -webkit-order: 7;
821 | -ms-flex-order: 7;
822 | order: 7; }
823 | .mdl-cell--order-8-desktop.mdl-cell--order-8-desktop {
824 | -webkit-order: 8;
825 | -ms-flex-order: 8;
826 | order: 8; }
827 | .mdl-cell--order-9-desktop.mdl-cell--order-9-desktop {
828 | -webkit-order: 9;
829 | -ms-flex-order: 9;
830 | order: 9; }
831 | .mdl-cell--order-10-desktop.mdl-cell--order-10-desktop {
832 | -webkit-order: 10;
833 | -ms-flex-order: 10;
834 | order: 10; }
835 | .mdl-cell--order-11-desktop.mdl-cell--order-11-desktop {
836 | -webkit-order: 11;
837 | -ms-flex-order: 11;
838 | order: 11; }
839 | .mdl-cell--order-12-desktop.mdl-cell--order-12-desktop {
840 | -webkit-order: 12;
841 | -ms-flex-order: 12;
842 | order: 12; }
843 | .mdl-cell--1-col,
844 | .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
845 | width: calc(8.3333333333% - 16px); }
846 | .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
847 | .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
848 | width: 8.3333333333%; }
849 | .mdl-cell--2-col,
850 | .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
851 | width: calc(16.6666666667% - 16px); }
852 | .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
853 | .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
854 | width: 16.6666666667%; }
855 | .mdl-cell--3-col,
856 | .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
857 | width: calc(25% - 16px); }
858 | .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
859 | .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
860 | width: 25%; }
861 | .mdl-cell--4-col,
862 | .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
863 | width: calc(33.3333333333% - 16px); }
864 | .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
865 | .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
866 | width: 33.3333333333%; }
867 | .mdl-cell--5-col,
868 | .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
869 | width: calc(41.6666666667% - 16px); }
870 | .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
871 | .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
872 | width: 41.6666666667%; }
873 | .mdl-cell--6-col,
874 | .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
875 | width: calc(50% - 16px); }
876 | .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
877 | .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
878 | width: 50%; }
879 | .mdl-cell--7-col,
880 | .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
881 | width: calc(58.3333333333% - 16px); }
882 | .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
883 | .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
884 | width: 58.3333333333%; }
885 | .mdl-cell--8-col,
886 | .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
887 | width: calc(66.6666666667% - 16px); }
888 | .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
889 | .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
890 | width: 66.6666666667%; }
891 | .mdl-cell--9-col,
892 | .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
893 | width: calc(75% - 16px); }
894 | .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
895 | .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
896 | width: 75%; }
897 | .mdl-cell--10-col,
898 | .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
899 | width: calc(83.3333333333% - 16px); }
900 | .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
901 | .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
902 | width: 83.3333333333%; }
903 | .mdl-cell--11-col,
904 | .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
905 | width: calc(91.6666666667% - 16px); }
906 | .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
907 | .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
908 | width: 91.6666666667%; }
909 | .mdl-cell--12-col,
910 | .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
911 | width: calc(100% - 16px); }
912 | .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
913 | .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
914 | width: 100%; }
915 | .mdl-cell--1-offset,
916 | .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
917 | margin-left: calc(8.3333333333% + 8px); }
918 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
919 | .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
920 | margin-left: 8.3333333333%; }
921 | .mdl-cell--2-offset,
922 | .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
923 | margin-left: calc(16.6666666667% + 8px); }
924 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
925 | .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
926 | margin-left: 16.6666666667%; }
927 | .mdl-cell--3-offset,
928 | .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
929 | margin-left: calc(25% + 8px); }
930 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
931 | .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
932 | margin-left: 25%; }
933 | .mdl-cell--4-offset,
934 | .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
935 | margin-left: calc(33.3333333333% + 8px); }
936 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing >
937 | .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
938 | margin-left: 33.3333333333%; }
939 | .mdl-cell--5-offset,
940 | .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
941 | margin-left: calc(41.6666666667% + 8px); }
942 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing >
943 | .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
944 | margin-left: 41.6666666667%; }
945 | .mdl-cell--6-offset,
946 | .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
947 | margin-left: calc(50% + 8px); }
948 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing >
949 | .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
950 | margin-left: 50%; }
951 | .mdl-cell--7-offset,
952 | .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
953 | margin-left: calc(58.3333333333% + 8px); }
954 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing >
955 | .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
956 | margin-left: 58.3333333333%; }
957 | .mdl-cell--8-offset,
958 | .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
959 | margin-left: calc(66.6666666667% + 8px); }
960 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--8-offset, .mdl-grid.mdl-grid--no-spacing >
961 | .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
962 | margin-left: 66.6666666667%; }
963 | .mdl-cell--9-offset,
964 | .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
965 | margin-left: calc(75% + 8px); }
966 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--9-offset, .mdl-grid.mdl-grid--no-spacing >
967 | .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
968 | margin-left: 75%; }
969 | .mdl-cell--10-offset,
970 | .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
971 | margin-left: calc(83.3333333333% + 8px); }
972 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--10-offset, .mdl-grid.mdl-grid--no-spacing >
973 | .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
974 | margin-left: 83.3333333333%; }
975 | .mdl-cell--11-offset,
976 | .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
977 | margin-left: calc(91.6666666667% + 8px); }
978 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--11-offset, .mdl-grid.mdl-grid--no-spacing >
979 | .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
980 | margin-left: 91.6666666667%; } }
981 |
--------------------------------------------------------------------------------
/dist/assets/css/material-grid.css:
--------------------------------------------------------------------------------
1 | /**
2 | * material-design-lite - Material Design Components in CSS, JS and HTML
3 | * @version v1.1.1
4 | * @license Apache-2.0
5 | * @copyright 2015 Google, Inc.
6 | * @link https://github.com/google/material-design-lite
7 | */
8 | /**
9 | * Copyright 2015 Google Inc. All Rights Reserved.
10 | *
11 | * Licensed under the Apache License, Version 2.0 (the "License");
12 | * you may not use this file except in compliance with the License.
13 | * You may obtain a copy of the License at
14 | *
15 | * http://www.apache.org/licenses/LICENSE-2.0
16 | *
17 | * Unless required by applicable law or agreed to in writing, software
18 | * distributed under the License is distributed on an "AS IS" BASIS,
19 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
20 | * See the License for the specific language governing permissions and
21 | * limitations under the License.
22 | */
23 | /* Material Design Lite Grid*/
24 | /**
25 | * Copyright 2015 Google Inc. All Rights Reserved.
26 | *
27 | * Licensed under the Apache License, Version 2.0 (the "License");
28 | * you may not use this file except in compliance with the License.
29 | * You may obtain a copy of the License at
30 | *
31 | * http://www.apache.org/licenses/LICENSE-2.0
32 | *
33 | * Unless required by applicable law or agreed to in writing, software
34 | * distributed under the License is distributed on an "AS IS" BASIS,
35 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
36 | * See the License for the specific language governing permissions and
37 | * limitations under the License.
38 | */
39 | /*------------------------------------* $CONTENTS
40 | \*------------------------------------*/
41 | /**
42 | * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
43 | * -----Typography
44 | * -----Colors
45 | * -----Textfield
46 | * -----Switch
47 | * -----Spinner
48 | * -----Radio
49 | * -----Menu
50 | * -----List
51 | * -----Layout
52 | * -----Icon toggles
53 | * -----Footer
54 | * -----Column
55 | * -----Checkbox
56 | * -----Card
57 | * -----Button
58 | * -----Animation
59 | * -----Progress
60 | * -----Badge
61 | * -----Shadows
62 | * -----Grid
63 | * -----Data table
64 | * -----Dialog
65 | * -----Snackbar
66 | *
67 | * Even though all variables have the `!default` directive, most of them
68 | * should not be changed as they are dependent one another. This can cause
69 | * visual distortions (like alignment issues) that are hard to track down
70 | * and fix.
71 | */
72 | /* ========== TYPOGRAPHY ========== */
73 | /* We're splitting fonts into "preferred" and "performance" in order to optimize
74 | page loading. For important text, such as the body, we want it to load
75 | immediately and not wait for the web font load, whereas for other sections,
76 | such as headers and titles, we're OK with things taking a bit longer to load.
77 | We do have some optional classes and parameters in the mixins, in case you
78 | definitely want to make sure you're using the preferred font and don't mind
79 | the performance hit.
80 | We should be able to improve on this once CSS Font Loading L3 becomes more
81 | widely available.
82 | */
83 | /* ========== COLORS ========== */
84 | /**
85 | *
86 | * Material design color palettes.
87 | * @see http://www.google.com/design/spec/style/color.html
88 | *
89 | **/
90 | /**
91 | * Copyright 2015 Google Inc. All Rights Reserved.
92 | *
93 | * Licensed under the Apache License, Version 2.0 (the "License");
94 | * you may not use this file except in compliance with the License.
95 | * You may obtain a copy of the License at
96 | *
97 | * http://www.apache.org/licenses/LICENSE-2.0
98 | *
99 | * Unless required by applicable law or agreed to in writing, software
100 | * distributed under the License is distributed on an "AS IS" BASIS,
101 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
102 | * See the License for the specific language governing permissions and
103 | * limitations under the License.
104 | */
105 | /* ========== Color Palettes ========== */
106 | /* colors.scss */
107 | /**
108 | * Copyright 2015 Google Inc. All Rights Reserved.
109 | *
110 | * Licensed under the Apache License, Version 2.0 (the "License");
111 | * you may not use this file except in compliance with the License.
112 | * You may obtain a copy of the License at
113 | *
114 | * http://www.apache.org/licenses/LICENSE-2.0
115 | *
116 | * Unless required by applicable law or agreed to in writing, software
117 | * distributed under the License is distributed on an "AS IS" BASIS,
118 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
119 | * See the License for the specific language governing permissions and
120 | * limitations under the License.
121 | */
122 | /* ========== IMAGES ========== */
123 | /* ========== Color & Themes ========== */
124 | /* ========== Typography ========== */
125 | /* ========== Components ========== */
126 | /* ========== Standard Buttons ========== */
127 | /* ========== Icon Toggles ========== */
128 | /* ========== Radio Buttons ========== */
129 | /* ========== Ripple effect ========== */
130 | /* ========== Layout ========== */
131 | /* ========== Content Tabs ========== */
132 | /* ========== Checkboxes ========== */
133 | /* ========== Switches ========== */
134 | /* ========== Spinner ========== */
135 | /* ========== Text fields ========== */
136 | /* ========== Card ========== */
137 | /* ========== Sliders ========== */
138 | /* ========== Progress ========== */
139 | /* ========== List ========== */
140 | /* ========== Item ========== */
141 | /* ========== Dropdown menu ========== */
142 | /* ========== Tooltips ========== */
143 | /* ========== Footer ========== */
144 | /* TEXTFIELD */
145 | /* SWITCH */
146 | /* SPINNER */
147 | /* RADIO */
148 | /* MENU */
149 | /* LIST */
150 | /* LAYOUT */
151 | /* ICON TOGGLE */
152 | /* FOOTER */
153 | /*mega-footer*/
154 | /*mini-footer*/
155 | /* CHECKBOX */
156 | /* CARD */
157 | /* Card dimensions */
158 | /* Cover image */
159 | /* BUTTON */
160 | /**
161 | *
162 | * Dimensions
163 | *
164 | */
165 | /* ANIMATION */
166 | /* PROGRESS */
167 | /* BADGE */
168 | /* SHADOWS */
169 | /* GRID */
170 | /* DATA TABLE */
171 | /* DIALOG */
172 | /* SNACKBAR */
173 | /* TOOLTIP */
174 | /**
175 | * Copyright 2015 Google Inc. All Rights Reserved.
176 | *
177 | * Licensed under the Apache License, Version 2.0 (the "License");
178 | * you may not use this file except in compliance with the License.
179 | * You may obtain a copy of the License at
180 | *
181 | * http://www.apache.org/licenses/LICENSE-2.0
182 | *
183 | * Unless required by applicable law or agreed to in writing, software
184 | * distributed under the License is distributed on an "AS IS" BASIS,
185 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
186 | * See the License for the specific language governing permissions and
187 | * limitations under the License.
188 | */
189 | /* Typography */
190 | /* Shadows */
191 | /* Animations */
192 | /* Dialog */
193 | /**
194 | * Copyright 2015 Google Inc. All Rights Reserved.
195 | *
196 | * Licensed under the Apache License, Version 2.0 (the "License");
197 | * you may not use this file except in compliance with the License.
198 | * You may obtain a copy of the License at
199 | *
200 | * http://www.apache.org/licenses/LICENSE-2.0
201 | *
202 | * Unless required by applicable law or agreed to in writing, software
203 | * distributed under the License is distributed on an "AS IS" BASIS,
204 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
205 | * See the License for the specific language governing permissions and
206 | * limitations under the License.
207 | */
208 | /*
209 | * NOTE: Some rules here are applied using duplicate selectors.
210 | * This is on purpose to increase their specificity when applied.
211 | * For example: `.mdl-cell--1-col-phone.mdl-cell--1-col-phone`
212 | */
213 | /**
214 | * Copyright 2015 Google Inc. All Rights Reserved.
215 | *
216 | * Licensed under the Apache License, Version 2.0 (the "License");
217 | * you may not use this file except in compliance with the License.
218 | * You may obtain a copy of the License at
219 | *
220 | * http://www.apache.org/licenses/LICENSE-2.0
221 | *
222 | * Unless required by applicable law or agreed to in writing, software
223 | * distributed under the License is distributed on an "AS IS" BASIS,
224 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
225 | * See the License for the specific language governing permissions and
226 | * limitations under the License.
227 | */
228 | /*------------------------------------* $CONTENTS
229 | \*------------------------------------*/
230 | /**
231 | * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
232 | * -----Typography
233 | * -----Colors
234 | * -----Textfield
235 | * -----Switch
236 | * -----Spinner
237 | * -----Radio
238 | * -----Menu
239 | * -----List
240 | * -----Layout
241 | * -----Icon toggles
242 | * -----Footer
243 | * -----Column
244 | * -----Checkbox
245 | * -----Card
246 | * -----Button
247 | * -----Animation
248 | * -----Progress
249 | * -----Badge
250 | * -----Shadows
251 | * -----Grid
252 | * -----Data table
253 | * -----Dialog
254 | * -----Snackbar
255 | *
256 | * Even though all variables have the `!default` directive, most of them
257 | * should not be changed as they are dependent one another. This can cause
258 | * visual distortions (like alignment issues) that are hard to track down
259 | * and fix.
260 | */
261 | /* ========== TYPOGRAPHY ========== */
262 | /* We're splitting fonts into "preferred" and "performance" in order to optimize
263 | page loading. For important text, such as the body, we want it to load
264 | immediately and not wait for the web font load, whereas for other sections,
265 | such as headers and titles, we're OK with things taking a bit longer to load.
266 | We do have some optional classes and parameters in the mixins, in case you
267 | definitely want to make sure you're using the preferred font and don't mind
268 | the performance hit.
269 | We should be able to improve on this once CSS Font Loading L3 becomes more
270 | widely available.
271 | */
272 | /* ========== COLORS ========== */
273 | /**
274 | *
275 | * Material design color palettes.
276 | * @see http://www.google.com/design/spec/style/color.html
277 | *
278 | **/
279 | /**
280 | * Copyright 2015 Google Inc. All Rights Reserved.
281 | *
282 | * Licensed under the Apache License, Version 2.0 (the "License");
283 | * you may not use this file except in compliance with the License.
284 | * You may obtain a copy of the License at
285 | *
286 | * http://www.apache.org/licenses/LICENSE-2.0
287 | *
288 | * Unless required by applicable law or agreed to in writing, software
289 | * distributed under the License is distributed on an "AS IS" BASIS,
290 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
291 | * See the License for the specific language governing permissions and
292 | * limitations under the License.
293 | */
294 | /* ========== Color Palettes ========== */
295 | /* colors.scss */
296 | /**
297 | * Copyright 2015 Google Inc. All Rights Reserved.
298 | *
299 | * Licensed under the Apache License, Version 2.0 (the "License");
300 | * you may not use this file except in compliance with the License.
301 | * You may obtain a copy of the License at
302 | *
303 | * http://www.apache.org/licenses/LICENSE-2.0
304 | *
305 | * Unless required by applicable law or agreed to in writing, software
306 | * distributed under the License is distributed on an "AS IS" BASIS,
307 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
308 | * See the License for the specific language governing permissions and
309 | * limitations under the License.
310 | */
311 | /* ========== IMAGES ========== */
312 | /* ========== Color & Themes ========== */
313 | /* ========== Typography ========== */
314 | /* ========== Components ========== */
315 | /* ========== Standard Buttons ========== */
316 | /* ========== Icon Toggles ========== */
317 | /* ========== Radio Buttons ========== */
318 | /* ========== Ripple effect ========== */
319 | /* ========== Layout ========== */
320 | /* ========== Content Tabs ========== */
321 | /* ========== Checkboxes ========== */
322 | /* ========== Switches ========== */
323 | /* ========== Spinner ========== */
324 | /* ========== Text fields ========== */
325 | /* ========== Card ========== */
326 | /* ========== Sliders ========== */
327 | /* ========== Progress ========== */
328 | /* ========== List ========== */
329 | /* ========== Item ========== */
330 | /* ========== Dropdown menu ========== */
331 | /* ========== Tooltips ========== */
332 | /* ========== Footer ========== */
333 | /* TEXTFIELD */
334 | /* SWITCH */
335 | /* SPINNER */
336 | /* RADIO */
337 | /* MENU */
338 | /* LIST */
339 | /* LAYOUT */
340 | /* ICON TOGGLE */
341 | /* FOOTER */
342 | /*mega-footer*/
343 | /*mini-footer*/
344 | /* CHECKBOX */
345 | /* CARD */
346 | /* Card dimensions */
347 | /* Cover image */
348 | /* BUTTON */
349 | /**
350 | *
351 | * Dimensions
352 | *
353 | */
354 | /* ANIMATION */
355 | /* PROGRESS */
356 | /* BADGE */
357 | /* SHADOWS */
358 | /* GRID */
359 | /* DATA TABLE */
360 | /* DIALOG */
361 | /* SNACKBAR */
362 | /* TOOLTIP */
363 | .mdl-grid {
364 | display: -webkit-flex;
365 | display: -ms-flexbox;
366 | display: flex;
367 | -webkit-flex-flow: row wrap;
368 | -ms-flex-flow: row wrap;
369 | flex-flow: row wrap;
370 | margin: 0 auto 0 auto;
371 | -webkit-align-items: stretch;
372 | -ms-flex-align: stretch;
373 | align-items: stretch; }
374 | .mdl-grid.mdl-grid--no-spacing {
375 | padding: 0; }
376 |
377 | .mdl-cell {
378 | box-sizing: border-box; }
379 |
380 | .mdl-cell--top {
381 | -webkit-align-self: flex-start;
382 | -ms-flex-item-align: start;
383 | align-self: flex-start; }
384 |
385 | .mdl-cell--middle {
386 | -webkit-align-self: center;
387 | -ms-flex-item-align: center;
388 | align-self: center; }
389 |
390 | .mdl-cell--bottom {
391 | -webkit-align-self: flex-end;
392 | -ms-flex-item-align: end;
393 | align-self: flex-end; }
394 |
395 | .mdl-cell--stretch {
396 | -webkit-align-self: stretch;
397 | -ms-flex-item-align: stretch;
398 | align-self: stretch; }
399 |
400 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell {
401 | margin: 0; }
402 |
403 | .mdl-cell--order-1 {
404 | -webkit-order: 1;
405 | -ms-flex-order: 1;
406 | order: 1; }
407 |
408 | .mdl-cell--order-2 {
409 | -webkit-order: 2;
410 | -ms-flex-order: 2;
411 | order: 2; }
412 |
413 | .mdl-cell--order-3 {
414 | -webkit-order: 3;
415 | -ms-flex-order: 3;
416 | order: 3; }
417 |
418 | .mdl-cell--order-4 {
419 | -webkit-order: 4;
420 | -ms-flex-order: 4;
421 | order: 4; }
422 |
423 | .mdl-cell--order-5 {
424 | -webkit-order: 5;
425 | -ms-flex-order: 5;
426 | order: 5; }
427 |
428 | .mdl-cell--order-6 {
429 | -webkit-order: 6;
430 | -ms-flex-order: 6;
431 | order: 6; }
432 |
433 | .mdl-cell--order-7 {
434 | -webkit-order: 7;
435 | -ms-flex-order: 7;
436 | order: 7; }
437 |
438 | .mdl-cell--order-8 {
439 | -webkit-order: 8;
440 | -ms-flex-order: 8;
441 | order: 8; }
442 |
443 | .mdl-cell--order-9 {
444 | -webkit-order: 9;
445 | -ms-flex-order: 9;
446 | order: 9; }
447 |
448 | .mdl-cell--order-10 {
449 | -webkit-order: 10;
450 | -ms-flex-order: 10;
451 | order: 10; }
452 |
453 | .mdl-cell--order-11 {
454 | -webkit-order: 11;
455 | -ms-flex-order: 11;
456 | order: 11; }
457 |
458 | .mdl-cell--order-12 {
459 | -webkit-order: 12;
460 | -ms-flex-order: 12;
461 | order: 12; }
462 |
463 | @media (max-width: 479px) {
464 | .mdl-grid {
465 | padding: 8px; }
466 | .mdl-cell {
467 | margin: 8px;
468 | width: calc(100% - 16px); }
469 | .mdl-grid--no-spacing > .mdl-cell {
470 | width: 100%; }
471 | .mdl-cell--hide-phone {
472 | display: none !important; }
473 | .mdl-cell--order-1-phone.mdl-cell--order-1-phone {
474 | -webkit-order: 1;
475 | -ms-flex-order: 1;
476 | order: 1; }
477 | .mdl-cell--order-2-phone.mdl-cell--order-2-phone {
478 | -webkit-order: 2;
479 | -ms-flex-order: 2;
480 | order: 2; }
481 | .mdl-cell--order-3-phone.mdl-cell--order-3-phone {
482 | -webkit-order: 3;
483 | -ms-flex-order: 3;
484 | order: 3; }
485 | .mdl-cell--order-4-phone.mdl-cell--order-4-phone {
486 | -webkit-order: 4;
487 | -ms-flex-order: 4;
488 | order: 4; }
489 | .mdl-cell--order-5-phone.mdl-cell--order-5-phone {
490 | -webkit-order: 5;
491 | -ms-flex-order: 5;
492 | order: 5; }
493 | .mdl-cell--order-6-phone.mdl-cell--order-6-phone {
494 | -webkit-order: 6;
495 | -ms-flex-order: 6;
496 | order: 6; }
497 | .mdl-cell--order-7-phone.mdl-cell--order-7-phone {
498 | -webkit-order: 7;
499 | -ms-flex-order: 7;
500 | order: 7; }
501 | .mdl-cell--order-8-phone.mdl-cell--order-8-phone {
502 | -webkit-order: 8;
503 | -ms-flex-order: 8;
504 | order: 8; }
505 | .mdl-cell--order-9-phone.mdl-cell--order-9-phone {
506 | -webkit-order: 9;
507 | -ms-flex-order: 9;
508 | order: 9; }
509 | .mdl-cell--order-10-phone.mdl-cell--order-10-phone {
510 | -webkit-order: 10;
511 | -ms-flex-order: 10;
512 | order: 10; }
513 | .mdl-cell--order-11-phone.mdl-cell--order-11-phone {
514 | -webkit-order: 11;
515 | -ms-flex-order: 11;
516 | order: 11; }
517 | .mdl-cell--order-12-phone.mdl-cell--order-12-phone {
518 | -webkit-order: 12;
519 | -ms-flex-order: 12;
520 | order: 12; }
521 | .mdl-cell--1-col,
522 | .mdl-cell--1-col-phone.mdl-cell--1-col-phone {
523 | width: calc(25% - 16px); }
524 | .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
525 | .mdl-cell--1-col-phone.mdl-cell--1-col-phone {
526 | width: 25%; }
527 | .mdl-cell--2-col,
528 | .mdl-cell--2-col-phone.mdl-cell--2-col-phone {
529 | width: calc(50% - 16px); }
530 | .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
531 | .mdl-cell--2-col-phone.mdl-cell--2-col-phone {
532 | width: 50%; }
533 | .mdl-cell--3-col,
534 | .mdl-cell--3-col-phone.mdl-cell--3-col-phone {
535 | width: calc(75% - 16px); }
536 | .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
537 | .mdl-cell--3-col-phone.mdl-cell--3-col-phone {
538 | width: 75%; }
539 | .mdl-cell--4-col,
540 | .mdl-cell--4-col-phone.mdl-cell--4-col-phone {
541 | width: calc(100% - 16px); }
542 | .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
543 | .mdl-cell--4-col-phone.mdl-cell--4-col-phone {
544 | width: 100%; }
545 | .mdl-cell--5-col,
546 | .mdl-cell--5-col-phone.mdl-cell--5-col-phone {
547 | width: calc(100% - 16px); }
548 | .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
549 | .mdl-cell--5-col-phone.mdl-cell--5-col-phone {
550 | width: 100%; }
551 | .mdl-cell--6-col,
552 | .mdl-cell--6-col-phone.mdl-cell--6-col-phone {
553 | width: calc(100% - 16px); }
554 | .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
555 | .mdl-cell--6-col-phone.mdl-cell--6-col-phone {
556 | width: 100%; }
557 | .mdl-cell--7-col,
558 | .mdl-cell--7-col-phone.mdl-cell--7-col-phone {
559 | width: calc(100% - 16px); }
560 | .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
561 | .mdl-cell--7-col-phone.mdl-cell--7-col-phone {
562 | width: 100%; }
563 | .mdl-cell--8-col,
564 | .mdl-cell--8-col-phone.mdl-cell--8-col-phone {
565 | width: calc(100% - 16px); }
566 | .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
567 | .mdl-cell--8-col-phone.mdl-cell--8-col-phone {
568 | width: 100%; }
569 | .mdl-cell--9-col,
570 | .mdl-cell--9-col-phone.mdl-cell--9-col-phone {
571 | width: calc(100% - 16px); }
572 | .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
573 | .mdl-cell--9-col-phone.mdl-cell--9-col-phone {
574 | width: 100%; }
575 | .mdl-cell--10-col,
576 | .mdl-cell--10-col-phone.mdl-cell--10-col-phone {
577 | width: calc(100% - 16px); }
578 | .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
579 | .mdl-cell--10-col-phone.mdl-cell--10-col-phone {
580 | width: 100%; }
581 | .mdl-cell--11-col,
582 | .mdl-cell--11-col-phone.mdl-cell--11-col-phone {
583 | width: calc(100% - 16px); }
584 | .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
585 | .mdl-cell--11-col-phone.mdl-cell--11-col-phone {
586 | width: 100%; }
587 | .mdl-cell--12-col,
588 | .mdl-cell--12-col-phone.mdl-cell--12-col-phone {
589 | width: calc(100% - 16px); }
590 | .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
591 | .mdl-cell--12-col-phone.mdl-cell--12-col-phone {
592 | width: 100%; }
593 | .mdl-cell--1-offset,
594 | .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
595 | margin-left: calc(25% + 8px); }
596 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
597 | .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
598 | margin-left: 25%; }
599 | .mdl-cell--2-offset,
600 | .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
601 | margin-left: calc(50% + 8px); }
602 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
603 | .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
604 | margin-left: 50%; }
605 | .mdl-cell--3-offset,
606 | .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
607 | margin-left: calc(75% + 8px); }
608 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
609 | .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
610 | margin-left: 75%; } }
611 |
612 | @media (min-width: 480px) and (max-width: 839px) {
613 | .mdl-grid {
614 | padding: 8px; }
615 | .mdl-cell {
616 | margin: 8px;
617 | width: calc(50% - 16px); }
618 | .mdl-grid--no-spacing > .mdl-cell {
619 | width: 50%; }
620 | .mdl-cell--hide-tablet {
621 | display: none !important; }
622 | .mdl-cell--order-1-tablet.mdl-cell--order-1-tablet {
623 | -webkit-order: 1;
624 | -ms-flex-order: 1;
625 | order: 1; }
626 | .mdl-cell--order-2-tablet.mdl-cell--order-2-tablet {
627 | -webkit-order: 2;
628 | -ms-flex-order: 2;
629 | order: 2; }
630 | .mdl-cell--order-3-tablet.mdl-cell--order-3-tablet {
631 | -webkit-order: 3;
632 | -ms-flex-order: 3;
633 | order: 3; }
634 | .mdl-cell--order-4-tablet.mdl-cell--order-4-tablet {
635 | -webkit-order: 4;
636 | -ms-flex-order: 4;
637 | order: 4; }
638 | .mdl-cell--order-5-tablet.mdl-cell--order-5-tablet {
639 | -webkit-order: 5;
640 | -ms-flex-order: 5;
641 | order: 5; }
642 | .mdl-cell--order-6-tablet.mdl-cell--order-6-tablet {
643 | -webkit-order: 6;
644 | -ms-flex-order: 6;
645 | order: 6; }
646 | .mdl-cell--order-7-tablet.mdl-cell--order-7-tablet {
647 | -webkit-order: 7;
648 | -ms-flex-order: 7;
649 | order: 7; }
650 | .mdl-cell--order-8-tablet.mdl-cell--order-8-tablet {
651 | -webkit-order: 8;
652 | -ms-flex-order: 8;
653 | order: 8; }
654 | .mdl-cell--order-9-tablet.mdl-cell--order-9-tablet {
655 | -webkit-order: 9;
656 | -ms-flex-order: 9;
657 | order: 9; }
658 | .mdl-cell--order-10-tablet.mdl-cell--order-10-tablet {
659 | -webkit-order: 10;
660 | -ms-flex-order: 10;
661 | order: 10; }
662 | .mdl-cell--order-11-tablet.mdl-cell--order-11-tablet {
663 | -webkit-order: 11;
664 | -ms-flex-order: 11;
665 | order: 11; }
666 | .mdl-cell--order-12-tablet.mdl-cell--order-12-tablet {
667 | -webkit-order: 12;
668 | -ms-flex-order: 12;
669 | order: 12; }
670 | .mdl-cell--1-col,
671 | .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
672 | width: calc(12.5% - 16px); }
673 | .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
674 | .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
675 | width: 12.5%; }
676 | .mdl-cell--2-col,
677 | .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
678 | width: calc(25% - 16px); }
679 | .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
680 | .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
681 | width: 25%; }
682 | .mdl-cell--3-col,
683 | .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
684 | width: calc(37.5% - 16px); }
685 | .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
686 | .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
687 | width: 37.5%; }
688 | .mdl-cell--4-col,
689 | .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
690 | width: calc(50% - 16px); }
691 | .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
692 | .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
693 | width: 50%; }
694 | .mdl-cell--5-col,
695 | .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
696 | width: calc(62.5% - 16px); }
697 | .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
698 | .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
699 | width: 62.5%; }
700 | .mdl-cell--6-col,
701 | .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
702 | width: calc(75% - 16px); }
703 | .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
704 | .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
705 | width: 75%; }
706 | .mdl-cell--7-col,
707 | .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
708 | width: calc(87.5% - 16px); }
709 | .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
710 | .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
711 | width: 87.5%; }
712 | .mdl-cell--8-col,
713 | .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
714 | width: calc(100% - 16px); }
715 | .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
716 | .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
717 | width: 100%; }
718 | .mdl-cell--9-col,
719 | .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
720 | width: calc(100% - 16px); }
721 | .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
722 | .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
723 | width: 100%; }
724 | .mdl-cell--10-col,
725 | .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
726 | width: calc(100% - 16px); }
727 | .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
728 | .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
729 | width: 100%; }
730 | .mdl-cell--11-col,
731 | .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
732 | width: calc(100% - 16px); }
733 | .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
734 | .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
735 | width: 100%; }
736 | .mdl-cell--12-col,
737 | .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
738 | width: calc(100% - 16px); }
739 | .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
740 | .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
741 | width: 100%; }
742 | .mdl-cell--1-offset,
743 | .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
744 | margin-left: calc(12.5% + 8px); }
745 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
746 | .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
747 | margin-left: 12.5%; }
748 | .mdl-cell--2-offset,
749 | .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
750 | margin-left: calc(25% + 8px); }
751 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
752 | .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
753 | margin-left: 25%; }
754 | .mdl-cell--3-offset,
755 | .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
756 | margin-left: calc(37.5% + 8px); }
757 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
758 | .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
759 | margin-left: 37.5%; }
760 | .mdl-cell--4-offset,
761 | .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
762 | margin-left: calc(50% + 8px); }
763 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing >
764 | .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
765 | margin-left: 50%; }
766 | .mdl-cell--5-offset,
767 | .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
768 | margin-left: calc(62.5% + 8px); }
769 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing >
770 | .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
771 | margin-left: 62.5%; }
772 | .mdl-cell--6-offset,
773 | .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
774 | margin-left: calc(75% + 8px); }
775 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing >
776 | .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
777 | margin-left: 75%; }
778 | .mdl-cell--7-offset,
779 | .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
780 | margin-left: calc(87.5% + 8px); }
781 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing >
782 | .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
783 | margin-left: 87.5%; } }
784 |
785 | @media (min-width: 840px) {
786 | .mdl-grid {
787 | padding: 8px; }
788 | .mdl-cell {
789 | margin: 8px;
790 | width: calc(33.3333333333% - 16px); }
791 | .mdl-grid--no-spacing > .mdl-cell {
792 | width: 33.3333333333%; }
793 | .mdl-cell--hide-desktop {
794 | display: none !important; }
795 | .mdl-cell--order-1-desktop.mdl-cell--order-1-desktop {
796 | -webkit-order: 1;
797 | -ms-flex-order: 1;
798 | order: 1; }
799 | .mdl-cell--order-2-desktop.mdl-cell--order-2-desktop {
800 | -webkit-order: 2;
801 | -ms-flex-order: 2;
802 | order: 2; }
803 | .mdl-cell--order-3-desktop.mdl-cell--order-3-desktop {
804 | -webkit-order: 3;
805 | -ms-flex-order: 3;
806 | order: 3; }
807 | .mdl-cell--order-4-desktop.mdl-cell--order-4-desktop {
808 | -webkit-order: 4;
809 | -ms-flex-order: 4;
810 | order: 4; }
811 | .mdl-cell--order-5-desktop.mdl-cell--order-5-desktop {
812 | -webkit-order: 5;
813 | -ms-flex-order: 5;
814 | order: 5; }
815 | .mdl-cell--order-6-desktop.mdl-cell--order-6-desktop {
816 | -webkit-order: 6;
817 | -ms-flex-order: 6;
818 | order: 6; }
819 | .mdl-cell--order-7-desktop.mdl-cell--order-7-desktop {
820 | -webkit-order: 7;
821 | -ms-flex-order: 7;
822 | order: 7; }
823 | .mdl-cell--order-8-desktop.mdl-cell--order-8-desktop {
824 | -webkit-order: 8;
825 | -ms-flex-order: 8;
826 | order: 8; }
827 | .mdl-cell--order-9-desktop.mdl-cell--order-9-desktop {
828 | -webkit-order: 9;
829 | -ms-flex-order: 9;
830 | order: 9; }
831 | .mdl-cell--order-10-desktop.mdl-cell--order-10-desktop {
832 | -webkit-order: 10;
833 | -ms-flex-order: 10;
834 | order: 10; }
835 | .mdl-cell--order-11-desktop.mdl-cell--order-11-desktop {
836 | -webkit-order: 11;
837 | -ms-flex-order: 11;
838 | order: 11; }
839 | .mdl-cell--order-12-desktop.mdl-cell--order-12-desktop {
840 | -webkit-order: 12;
841 | -ms-flex-order: 12;
842 | order: 12; }
843 | .mdl-cell--1-col,
844 | .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
845 | width: calc(8.3333333333% - 16px); }
846 | .mdl-grid--no-spacing > .mdl-cell--1-col, .mdl-grid--no-spacing >
847 | .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
848 | width: 8.3333333333%; }
849 | .mdl-cell--2-col,
850 | .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
851 | width: calc(16.6666666667% - 16px); }
852 | .mdl-grid--no-spacing > .mdl-cell--2-col, .mdl-grid--no-spacing >
853 | .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
854 | width: 16.6666666667%; }
855 | .mdl-cell--3-col,
856 | .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
857 | width: calc(25% - 16px); }
858 | .mdl-grid--no-spacing > .mdl-cell--3-col, .mdl-grid--no-spacing >
859 | .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
860 | width: 25%; }
861 | .mdl-cell--4-col,
862 | .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
863 | width: calc(33.3333333333% - 16px); }
864 | .mdl-grid--no-spacing > .mdl-cell--4-col, .mdl-grid--no-spacing >
865 | .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
866 | width: 33.3333333333%; }
867 | .mdl-cell--5-col,
868 | .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
869 | width: calc(41.6666666667% - 16px); }
870 | .mdl-grid--no-spacing > .mdl-cell--5-col, .mdl-grid--no-spacing >
871 | .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
872 | width: 41.6666666667%; }
873 | .mdl-cell--6-col,
874 | .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
875 | width: calc(50% - 16px); }
876 | .mdl-grid--no-spacing > .mdl-cell--6-col, .mdl-grid--no-spacing >
877 | .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
878 | width: 50%; }
879 | .mdl-cell--7-col,
880 | .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
881 | width: calc(58.3333333333% - 16px); }
882 | .mdl-grid--no-spacing > .mdl-cell--7-col, .mdl-grid--no-spacing >
883 | .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
884 | width: 58.3333333333%; }
885 | .mdl-cell--8-col,
886 | .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
887 | width: calc(66.6666666667% - 16px); }
888 | .mdl-grid--no-spacing > .mdl-cell--8-col, .mdl-grid--no-spacing >
889 | .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
890 | width: 66.6666666667%; }
891 | .mdl-cell--9-col,
892 | .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
893 | width: calc(75% - 16px); }
894 | .mdl-grid--no-spacing > .mdl-cell--9-col, .mdl-grid--no-spacing >
895 | .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
896 | width: 75%; }
897 | .mdl-cell--10-col,
898 | .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
899 | width: calc(83.3333333333% - 16px); }
900 | .mdl-grid--no-spacing > .mdl-cell--10-col, .mdl-grid--no-spacing >
901 | .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
902 | width: 83.3333333333%; }
903 | .mdl-cell--11-col,
904 | .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
905 | width: calc(91.6666666667% - 16px); }
906 | .mdl-grid--no-spacing > .mdl-cell--11-col, .mdl-grid--no-spacing >
907 | .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
908 | width: 91.6666666667%; }
909 | .mdl-cell--12-col,
910 | .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
911 | width: calc(100% - 16px); }
912 | .mdl-grid--no-spacing > .mdl-cell--12-col, .mdl-grid--no-spacing >
913 | .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
914 | width: 100%; }
915 | .mdl-cell--1-offset,
916 | .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
917 | margin-left: calc(8.3333333333% + 8px); }
918 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--1-offset, .mdl-grid.mdl-grid--no-spacing >
919 | .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
920 | margin-left: 8.3333333333%; }
921 | .mdl-cell--2-offset,
922 | .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
923 | margin-left: calc(16.6666666667% + 8px); }
924 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--2-offset, .mdl-grid.mdl-grid--no-spacing >
925 | .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
926 | margin-left: 16.6666666667%; }
927 | .mdl-cell--3-offset,
928 | .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
929 | margin-left: calc(25% + 8px); }
930 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--3-offset, .mdl-grid.mdl-grid--no-spacing >
931 | .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
932 | margin-left: 25%; }
933 | .mdl-cell--4-offset,
934 | .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
935 | margin-left: calc(33.3333333333% + 8px); }
936 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--4-offset, .mdl-grid.mdl-grid--no-spacing >
937 | .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
938 | margin-left: 33.3333333333%; }
939 | .mdl-cell--5-offset,
940 | .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
941 | margin-left: calc(41.6666666667% + 8px); }
942 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--5-offset, .mdl-grid.mdl-grid--no-spacing >
943 | .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
944 | margin-left: 41.6666666667%; }
945 | .mdl-cell--6-offset,
946 | .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
947 | margin-left: calc(50% + 8px); }
948 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--6-offset, .mdl-grid.mdl-grid--no-spacing >
949 | .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
950 | margin-left: 50%; }
951 | .mdl-cell--7-offset,
952 | .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
953 | margin-left: calc(58.3333333333% + 8px); }
954 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--7-offset, .mdl-grid.mdl-grid--no-spacing >
955 | .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
956 | margin-left: 58.3333333333%; }
957 | .mdl-cell--8-offset,
958 | .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
959 | margin-left: calc(66.6666666667% + 8px); }
960 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--8-offset, .mdl-grid.mdl-grid--no-spacing >
961 | .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
962 | margin-left: 66.6666666667%; }
963 | .mdl-cell--9-offset,
964 | .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
965 | margin-left: calc(75% + 8px); }
966 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--9-offset, .mdl-grid.mdl-grid--no-spacing >
967 | .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
968 | margin-left: 75%; }
969 | .mdl-cell--10-offset,
970 | .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
971 | margin-left: calc(83.3333333333% + 8px); }
972 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--10-offset, .mdl-grid.mdl-grid--no-spacing >
973 | .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
974 | margin-left: 83.3333333333%; }
975 | .mdl-cell--11-offset,
976 | .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
977 | margin-left: calc(91.6666666667% + 8px); }
978 | .mdl-grid.mdl-grid--no-spacing > .mdl-cell--11-offset, .mdl-grid.mdl-grid--no-spacing >
979 | .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
980 | margin-left: 91.6666666667%; } }
981 |
--------------------------------------------------------------------------------
/dist/assets/material.min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * material-design-lite - Material Design Components in CSS, JS and HTML
3 | * @version v1.1.1
4 | * @license Apache-2.0
5 | * @copyright 2015 Google, Inc.
6 | * @link https://github.com/google/material-design-lite
7 | */
8 | !function(){"use strict";function e(e,t){if(e){if(t.element_.classList.contains(t.CssClasses_.MDL_JS_RIPPLE_EFFECT)){var s=document.createElement("span");s.classList.add(t.CssClasses_.MDL_RIPPLE_CONTAINER),s.classList.add(t.CssClasses_.MDL_JS_RIPPLE_EFFECT);var i=document.createElement("span");i.classList.add(t.CssClasses_.MDL_RIPPLE),s.appendChild(i),e.appendChild(s)}e.addEventListener("click",function(s){s.preventDefault();var i=e.href.split("#")[1],n=t.element_.querySelector("#"+i);t.resetTabState_(),t.resetPanelState_(),e.classList.add(t.CssClasses_.ACTIVE_CLASS),n.classList.add(t.CssClasses_.ACTIVE_CLASS)})}}function t(e,t,s,i){function n(){var n=e.href.split("#")[1],a=i.content_.querySelector("#"+n);i.resetTabState_(t),i.resetPanelState_(s),e.classList.add(i.CssClasses_.IS_ACTIVE),a.classList.add(i.CssClasses_.IS_ACTIVE)}if(i.tabBar_.classList.contains(i.CssClasses_.JS_RIPPLE_EFFECT)){var a=document.createElement("span");a.classList.add(i.CssClasses_.RIPPLE_CONTAINER),a.classList.add(i.CssClasses_.JS_RIPPLE_EFFECT);var l=document.createElement("span");l.classList.add(i.CssClasses_.RIPPLE),a.appendChild(l),e.appendChild(a)}e.addEventListener("click",function(t){"#"===e.getAttribute("href").charAt(0)&&(t.preventDefault(),n())}),e.show=n,e.addEventListener("click",function(n){n.preventDefault();var a=e.href.split("#")[1],l=i.content_.querySelector("#"+a);i.resetTabState_(t),i.resetPanelState_(s),e.classList.add(i.CssClasses_.IS_ACTIVE),l.classList.add(i.CssClasses_.IS_ACTIVE)})}var s={upgradeDom:function(e,t){},upgradeElement:function(e,t){},upgradeElements:function(e){},upgradeAllRegistered:function(){},registerUpgradedCallback:function(e,t){},register:function(e){},downgradeElements:function(e){}};s=function(){function e(e,t){for(var s=0;s_;_++){if(r=l[_],!r)throw new Error("Unable to find a registered component for the given class.");a.push(r.className),i.setAttribute("data-upgraded",a.join(","));var C=new r.classConstructor(i);C[p]=r,c.push(C);for(var u=0,E=r.callbacks.length;E>u;u++)r.callbacks[u](i);r.widget&&(i[r.className]=C);var m=document.createEvent("Events");m.initEvent("mdl-componentupgraded",!0,!0),i.dispatchEvent(m)}}function a(e){Array.isArray(e)||(e="function"==typeof e.item?Array.prototype.slice.call(e):[e]);for(var t,s=0,i=e.length;i>s;s++)t=e[s],t instanceof HTMLElement&&(n(t),t.children.length>0&&a(t.children))}function l(t){var s="undefined"==typeof t.widget&&"undefined"==typeof t.widget,i=!0;s||(i=t.widget||t.widget);var n={classConstructor:t.constructor||t.constructor,className:t.classAsString||t.classAsString,cssClass:t.cssClass||t.cssClass,widget:i,callbacks:[]};if(h.forEach(function(e){if(e.cssClass===n.cssClass)throw new Error("The provided cssClass has already been registered: "+e.cssClass);if(e.className===n.className)throw new Error("The provided className has already been registered")}),t.constructor.prototype.hasOwnProperty(p))throw new Error("MDL component classes must not have "+p+" defined as a property.");var a=e(t.classAsString,n);a||h.push(n)}function o(t,s){var i=e(t);i&&i.callbacks.push(s)}function r(){for(var e=0;e0&&this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)&&(e.keyCode===this.Keycodes_.UP_ARROW?(e.preventDefault(),t[t.length-1].focus()):e.keyCode===this.Keycodes_.DOWN_ARROW&&(e.preventDefault(),t[0].focus()))}},d.prototype.handleItemKeyboardEvent_=function(e){if(this.element_&&this.container_){var t=this.element_.querySelectorAll("."+this.CssClasses_.ITEM+":not([disabled])");if(t&&t.length>0&&this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)){var s=Array.prototype.slice.call(t).indexOf(e.target);if(e.keyCode===this.Keycodes_.UP_ARROW)e.preventDefault(),s>0?t[s-1].focus():t[t.length-1].focus();else if(e.keyCode===this.Keycodes_.DOWN_ARROW)e.preventDefault(),t.length>s+1?t[s+1].focus():t[0].focus();else if(e.keyCode===this.Keycodes_.SPACE||e.keyCode===this.Keycodes_.ENTER){e.preventDefault();var i=new MouseEvent("mousedown");e.target.dispatchEvent(i),i=new MouseEvent("mouseup"),e.target.dispatchEvent(i),e.target.click()}else e.keyCode===this.Keycodes_.ESCAPE&&(e.preventDefault(),this.hide())}}},d.prototype.handleItemClick_=function(e){e.target.hasAttribute("disabled")?e.stopPropagation():(this.closing_=!0,window.setTimeout(function(e){this.hide(),this.closing_=!1}.bind(this),this.Constant_.CLOSE_TIMEOUT))},d.prototype.applyClip_=function(e,t){this.element_.classList.contains(this.CssClasses_.UNALIGNED)?this.element_.style.clip="":this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)?this.element_.style.clip="rect(0 "+t+"px 0 "+t+"px)":this.element_.classList.contains(this.CssClasses_.TOP_LEFT)?this.element_.style.clip="rect("+e+"px 0 "+e+"px 0)":this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)?this.element_.style.clip="rect("+e+"px "+t+"px "+e+"px "+t+"px)":this.element_.style.clip=""},d.prototype.removeAnimationEndListener_=function(e){e.target.classList.remove(d.prototype.CssClasses_.IS_ANIMATING)},d.prototype.addAnimationEndListener_=function(){this.element_.addEventListener("transitionend",this.removeAnimationEndListener_),this.element_.addEventListener("webkitTransitionEnd",this.removeAnimationEndListener_)},d.prototype.show=function(e){if(this.element_&&this.container_&&this.outline_){var t=this.element_.getBoundingClientRect().height,s=this.element_.getBoundingClientRect().width;this.container_.style.width=s+"px",this.container_.style.height=t+"px",this.outline_.style.width=s+"px",this.outline_.style.height=t+"px";for(var i=this.Constant_.TRANSITION_DURATION_SECONDS*this.Constant_.TRANSITION_DURATION_FRACTION,n=this.element_.querySelectorAll("."+this.CssClasses_.ITEM),a=0;a0&&this.showSnackbar(this.queuedNotifications_.shift())},C.prototype.cleanup_=function(){this.element_.classList.remove(this.cssClasses_.ACTIVE),setTimeout(function(){this.element_.setAttribute("aria-hidden","true"),this.textElement_.textContent="",Boolean(this.actionElement_.getAttribute("aria-hidden"))||(this.setActionHidden_(!0),this.actionElement_.textContent="",this.actionElement_.removeEventListener("click",this.actionHandler_)),this.actionHandler_=void 0,this.message_=void 0,this.actionText_=void 0,this.active=!1,this.checkQueue_()}.bind(this),this.Constant_.ANIMATION_LENGTH)},C.prototype.setActionHidden_=function(e){e?this.actionElement_.setAttribute("aria-hidden","true"):this.actionElement_.removeAttribute("aria-hidden")},s.register({constructor:C,classAsString:"MaterialSnackbar",cssClass:"mdl-js-snackbar",widget:!0});var u=function(e){this.element_=e,this.init()};window.MaterialSpinner=u,u.prototype.Constant_={MDL_SPINNER_LAYER_COUNT:4},u.prototype.CssClasses_={MDL_SPINNER_LAYER:"mdl-spinner__layer",MDL_SPINNER_CIRCLE_CLIPPER:"mdl-spinner__circle-clipper",MDL_SPINNER_CIRCLE:"mdl-spinner__circle",MDL_SPINNER_GAP_PATCH:"mdl-spinner__gap-patch",MDL_SPINNER_LEFT:"mdl-spinner__left",MDL_SPINNER_RIGHT:"mdl-spinner__right"},u.prototype.createLayer=function(e){var t=document.createElement("div");t.classList.add(this.CssClasses_.MDL_SPINNER_LAYER),t.classList.add(this.CssClasses_.MDL_SPINNER_LAYER+"-"+e);var s=document.createElement("div");s.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER),s.classList.add(this.CssClasses_.MDL_SPINNER_LEFT);var i=document.createElement("div");i.classList.add(this.CssClasses_.MDL_SPINNER_GAP_PATCH);var n=document.createElement("div");n.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER),n.classList.add(this.CssClasses_.MDL_SPINNER_RIGHT);for(var a=[s,i,n],l=0;l=this.maxRows&&e.preventDefault()},L.prototype.onFocus_=function(e){this.element_.classList.add(this.CssClasses_.IS_FOCUSED)},L.prototype.onBlur_=function(e){this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},L.prototype.onReset_=function(e){this.updateClasses_()},L.prototype.updateClasses_=function(){this.checkDisabled(),this.checkValidity(),this.checkDirty(),this.checkFocus()},L.prototype.checkDisabled=function(){this.input_.disabled?this.element_.classList.add(this.CssClasses_.IS_DISABLED):this.element_.classList.remove(this.CssClasses_.IS_DISABLED)},L.prototype.checkDisabled=L.prototype.checkDisabled,L.prototype.checkFocus=function(){Boolean(this.element_.querySelector(":focus"))?this.element_.classList.add(this.CssClasses_.IS_FOCUSED):this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},L.prototype.checkFocus=L.prototype.checkFocus,L.prototype.checkValidity=function(){this.input_.validity&&(this.input_.validity.valid?this.element_.classList.remove(this.CssClasses_.IS_INVALID):this.element_.classList.add(this.CssClasses_.IS_INVALID))},L.prototype.checkValidity=L.prototype.checkValidity,L.prototype.checkDirty=function(){this.input_.value&&this.input_.value.length>0?this.element_.classList.add(this.CssClasses_.IS_DIRTY):this.element_.classList.remove(this.CssClasses_.IS_DIRTY)},L.prototype.checkDirty=L.prototype.checkDirty,L.prototype.disable=function(){this.input_.disabled=!0,this.updateClasses_()},L.prototype.disable=L.prototype.disable,L.prototype.enable=function(){this.input_.disabled=!1,this.updateClasses_()},L.prototype.enable=L.prototype.enable,L.prototype.change=function(e){this.input_.value=e||"",this.updateClasses_()},L.prototype.change=L.prototype.change,L.prototype.init=function(){if(this.element_&&(this.label_=this.element_.querySelector("."+this.CssClasses_.LABEL),this.input_=this.element_.querySelector("."+this.CssClasses_.INPUT),this.input_)){this.input_.hasAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE)&&(this.maxRows=parseInt(this.input_.getAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE),10),isNaN(this.maxRows)&&(this.maxRows=this.Constant_.NO_MAX_ROWS)),this.boundUpdateClassesHandler=this.updateClasses_.bind(this),this.boundFocusHandler=this.onFocus_.bind(this),this.boundBlurHandler=this.onBlur_.bind(this),this.boundResetHandler=this.onReset_.bind(this),this.input_.addEventListener("input",this.boundUpdateClassesHandler),this.input_.addEventListener("focus",this.boundFocusHandler),this.input_.addEventListener("blur",this.boundBlurHandler),this.input_.addEventListener("reset",this.boundResetHandler),this.maxRows!==this.Constant_.NO_MAX_ROWS&&(this.boundKeyDownHandler=this.onKeyDown_.bind(this),this.input_.addEventListener("keydown",this.boundKeyDownHandler));var e=this.element_.classList.contains(this.CssClasses_.IS_INVALID);this.updateClasses_(),this.element_.classList.add(this.CssClasses_.IS_UPGRADED),e&&this.element_.classList.add(this.CssClasses_.IS_INVALID),this.input_.hasAttribute("autofocus")&&(this.element_.focus(),this.checkFocus())}},s.register({constructor:L,classAsString:"MaterialTextfield",cssClass:"mdl-js-textfield",widget:!0});var I=function(e){this.element_=e,this.init()};window.MaterialTooltip=I,I.prototype.Constant_={},I.prototype.CssClasses_={IS_ACTIVE:"is-active",BOTTOM:"mdl-tooltip--bottom",LEFT:"mdl-tooltip--left",RIGHT:"mdl-tooltip--right",TOP:"mdl-tooltip--top"},I.prototype.handleMouseEnter_=function(e){var t=e.target.getBoundingClientRect(),s=t.left+t.width/2,i=t.top+t.height/2,n=-1*(this.element_.offsetWidth/2),a=-1*(this.element_.offsetHeight/2);this.element_.classList.contains(this.CssClasses_.LEFT)||this.element_.classList.contains(this.CssClasses_.RIGHT)?(s=t.width/2,0>i+a?(this.element_.style.top=0,this.element_.style.marginTop=0):(this.element_.style.top=i+"px",this.element_.style.marginTop=a+"px")):0>s+n?(this.element_.style.left=0,this.element_.style.marginLeft=0):(this.element_.style.left=s+"px",this.element_.style.marginLeft=n+"px"),this.element_.classList.contains(this.CssClasses_.TOP)?this.element_.style.top=t.top-this.element_.offsetHeight-10+"px":this.element_.classList.contains(this.CssClasses_.RIGHT)?this.element_.style.left=t.left+t.width+10+"px":this.element_.classList.contains(this.CssClasses_.LEFT)?this.element_.style.left=t.left-this.element_.offsetWidth-10+"px":this.element_.style.top=t.top+t.height+10+"px",this.element_.classList.add(this.CssClasses_.IS_ACTIVE)},I.prototype.handleMouseLeave_=function(){this.element_.classList.remove(this.CssClasses_.IS_ACTIVE)},I.prototype.init=function(){if(this.element_){var e=this.element_.getAttribute("for");e&&(this.forElement_=document.getElementById(e)),this.forElement_&&(this.forElement_.hasAttribute("tabindex")||this.forElement_.setAttribute("tabindex","0"),this.boundMouseEnterHandler=this.handleMouseEnter_.bind(this),this.boundMouseLeaveHandler=this.handleMouseLeave_.bind(this),this.forElement_.addEventListener("mouseenter",this.boundMouseEnterHandler,!1),this.forElement_.addEventListener("touchend",this.boundMouseEnterHandler,!1),this.forElement_.addEventListener("mouseleave",this.boundMouseLeaveHandler,!1),window.addEventListener("touchstart",this.boundMouseLeaveHandler))}},s.register({constructor:I,classAsString:"MaterialTooltip",cssClass:"mdl-tooltip"});var f=function(e){this.element_=e,this.init()};window.MaterialLayout=f,f.prototype.Constant_={MAX_WIDTH:"(max-width: 1024px)",TAB_SCROLL_PIXELS:100,MENU_ICON:"",CHEVRON_LEFT:"chevron_left",CHEVRON_RIGHT:"chevron_right"},f.prototype.Keycodes_={ENTER:13,ESCAPE:27,SPACE:32},f.prototype.Mode_={STANDARD:0,SEAMED:1,WATERFALL:2,SCROLL:3},f.prototype.CssClasses_={INNER_CONTAINER:"mdl-layout__inner-container",HEADER:"mdl-layout__header",DRAWER:"mdl-layout__drawer",CONTENT:"mdl-layout__content",DRAWER_BTN:"mdl-layout__drawer-button",ICON:"material-icons",JS_RIPPLE_EFFECT:"mdl-js-ripple-effect",RIPPLE_CONTAINER:"mdl-layout__tab-ripple-container",RIPPLE:"mdl-ripple",RIPPLE_IGNORE_EVENTS:"mdl-js-ripple-effect--ignore-events",HEADER_SEAMED:"mdl-layout__header--seamed",HEADER_WATERFALL:"mdl-layout__header--waterfall",HEADER_SCROLL:"mdl-layout__header--scroll",FIXED_HEADER:"mdl-layout--fixed-header",OBFUSCATOR:"mdl-layout__obfuscator",TAB_BAR:"mdl-layout__tab-bar",TAB_CONTAINER:"mdl-layout__tab-bar-container",TAB:"mdl-layout__tab",TAB_BAR_BUTTON:"mdl-layout__tab-bar-button",TAB_BAR_LEFT_BUTTON:"mdl-layout__tab-bar-left-button",TAB_BAR_RIGHT_BUTTON:"mdl-layout__tab-bar-right-button",PANEL:"mdl-layout__tab-panel",HAS_DRAWER:"has-drawer",HAS_TABS:"has-tabs",HAS_SCROLLING_HEADER:"has-scrolling-header",CASTING_SHADOW:"is-casting-shadow",IS_COMPACT:"is-compact",IS_SMALL_SCREEN:"is-small-screen",IS_DRAWER_OPEN:"is-visible",IS_ACTIVE:"is-active",IS_UPGRADED:"is-upgraded",IS_ANIMATING:"is-animating",ON_LARGE_SCREEN:"mdl-layout--large-screen-only",ON_SMALL_SCREEN:"mdl-layout--small-screen-only"},f.prototype.contentScrollHandler_=function(){if(!this.header_.classList.contains(this.CssClasses_.IS_ANIMATING)){var e=!this.element_.classList.contains(this.CssClasses_.IS_SMALL_SCREEN)||this.element_.classList.contains(this.CssClasses_.FIXED_HEADER);this.content_.scrollTop>0&&!this.header_.classList.contains(this.CssClasses_.IS_COMPACT)?(this.header_.classList.add(this.CssClasses_.CASTING_SHADOW),this.header_.classList.add(this.CssClasses_.IS_COMPACT),e&&this.header_.classList.add(this.CssClasses_.IS_ANIMATING)):this.content_.scrollTop<=0&&this.header_.classList.contains(this.CssClasses_.IS_COMPACT)&&(this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW),this.header_.classList.remove(this.CssClasses_.IS_COMPACT),e&&this.header_.classList.add(this.CssClasses_.IS_ANIMATING))}},f.prototype.keyboardEventHandler_=function(e){e.keyCode===this.Keycodes_.ESCAPE&&this.toggleDrawer()},f.prototype.screenSizeHandler_=function(){this.screenSizeMediaQuery_.matches?this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN):(this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN),this.drawer_&&(this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN),this.obfuscator_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN)))},f.prototype.drawerToggleHandler_=function(e){if(e&&"keydown"===e.type){if(e.keyCode!==this.Keycodes_.SPACE&&e.keyCode!==this.Keycodes_.ENTER)return;e.preventDefault()}this.toggleDrawer()},f.prototype.headerTransitionEndHandler_=function(){this.header_.classList.remove(this.CssClasses_.IS_ANIMATING)},f.prototype.headerClickHandler_=function(){this.header_.classList.contains(this.CssClasses_.IS_COMPACT)&&(this.header_.classList.remove(this.CssClasses_.IS_COMPACT),this.header_.classList.add(this.CssClasses_.IS_ANIMATING))},f.prototype.resetTabState_=function(e){for(var t=0;ti;i++){var n=e[i];n.classList&&n.classList.contains(this.CssClasses_.HEADER)&&(this.header_=n),n.classList&&n.classList.contains(this.CssClasses_.DRAWER)&&(this.drawer_=n),n.classList&&n.classList.contains(this.CssClasses_.CONTENT)&&(this.content_=n)}window.addEventListener("pageshow",function(e){e.persisted&&(this.element_.style.overflowY="hidden",requestAnimationFrame(function(){this.element_.style.overflowY=""}.bind(this)))}.bind(this),!1),this.header_&&(this.tabBar_=this.header_.querySelector("."+this.CssClasses_.TAB_BAR));var a=this.Mode_.STANDARD;if(this.header_&&(this.header_.classList.contains(this.CssClasses_.HEADER_SEAMED)?a=this.Mode_.SEAMED:this.header_.classList.contains(this.CssClasses_.HEADER_WATERFALL)?(a=this.Mode_.WATERFALL,this.header_.addEventListener("transitionend",this.headerTransitionEndHandler_.bind(this)),this.header_.addEventListener("click",this.headerClickHandler_.bind(this))):this.header_.classList.contains(this.CssClasses_.HEADER_SCROLL)&&(a=this.Mode_.SCROLL,this.element_.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER)),a===this.Mode_.STANDARD?(this.header_.classList.add(this.CssClasses_.CASTING_SHADOW),this.tabBar_&&this.tabBar_.classList.add(this.CssClasses_.CASTING_SHADOW)):a===this.Mode_.SEAMED||a===this.Mode_.SCROLL?(this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW),this.tabBar_&&this.tabBar_.classList.remove(this.CssClasses_.CASTING_SHADOW)):a===this.Mode_.WATERFALL&&(this.content_.addEventListener("scroll",this.contentScrollHandler_.bind(this)),this.contentScrollHandler_())),this.drawer_){var l=this.element_.querySelector("."+this.CssClasses_.DRAWER_BTN);if(!l){l=document.createElement("div"),l.setAttribute("aria-expanded","false"),l.setAttribute("role","button"),l.setAttribute("tabindex","0"),l.classList.add(this.CssClasses_.DRAWER_BTN);var o=document.createElement("i");o.classList.add(this.CssClasses_.ICON),o.innerHTML=this.Constant_.MENU_ICON,l.appendChild(o)}this.drawer_.classList.contains(this.CssClasses_.ON_LARGE_SCREEN)?l.classList.add(this.CssClasses_.ON_LARGE_SCREEN):this.drawer_.classList.contains(this.CssClasses_.ON_SMALL_SCREEN)&&l.classList.add(this.CssClasses_.ON_SMALL_SCREEN),l.addEventListener("click",this.drawerToggleHandler_.bind(this)),l.addEventListener("keydown",this.drawerToggleHandler_.bind(this)),this.element_.classList.add(this.CssClasses_.HAS_DRAWER),this.element_.classList.contains(this.CssClasses_.FIXED_HEADER)?this.header_.insertBefore(l,this.header_.firstChild):this.element_.insertBefore(l,this.content_);var r=document.createElement("div");r.classList.add(this.CssClasses_.OBFUSCATOR),this.element_.appendChild(r),r.addEventListener("click",this.drawerToggleHandler_.bind(this)),this.obfuscator_=r,this.drawer_.addEventListener("keydown",this.keyboardEventHandler_.bind(this)),this.drawer_.setAttribute("aria-hidden","true")}if(this.screenSizeMediaQuery_=window.matchMedia(this.Constant_.MAX_WIDTH),this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this)),this.screenSizeHandler_(),this.header_&&this.tabBar_){this.element_.classList.add(this.CssClasses_.HAS_TABS);var _=document.createElement("div");_.classList.add(this.CssClasses_.TAB_CONTAINER),this.header_.insertBefore(_,this.tabBar_),this.header_.removeChild(this.tabBar_);var d=document.createElement("div");d.classList.add(this.CssClasses_.TAB_BAR_BUTTON),d.classList.add(this.CssClasses_.TAB_BAR_LEFT_BUTTON);var h=document.createElement("i");h.classList.add(this.CssClasses_.ICON),h.textContent=this.Constant_.CHEVRON_LEFT,d.appendChild(h),d.addEventListener("click",function(){this.tabBar_.scrollLeft-=this.Constant_.TAB_SCROLL_PIXELS}.bind(this));var c=document.createElement("div");c.classList.add(this.CssClasses_.TAB_BAR_BUTTON),c.classList.add(this.CssClasses_.TAB_BAR_RIGHT_BUTTON);var p=document.createElement("i");p.classList.add(this.CssClasses_.ICON),p.textContent=this.Constant_.CHEVRON_RIGHT,c.appendChild(p),c.addEventListener("click",function(){this.tabBar_.scrollLeft+=this.Constant_.TAB_SCROLL_PIXELS}.bind(this)),_.appendChild(d),_.appendChild(this.tabBar_),_.appendChild(c);var C=function(){this.tabBar_.scrollLeft>0?d.classList.add(this.CssClasses_.IS_ACTIVE):d.classList.remove(this.CssClasses_.IS_ACTIVE),this.tabBar_.scrollLeft0)return;this.setFrameCount(1);var i,n,a=e.currentTarget.getBoundingClientRect();if(0===e.clientX&&0===e.clientY)i=Math.round(a.width/2),n=Math.round(a.height/2);else{var l=e.clientX?e.clientX:e.touches[0].clientX,o=e.clientY?e.clientY:e.touches[0].clientY;i=Math.round(l-a.left),n=Math.round(o-a.top)}this.setRippleXY(i,n),this.setRippleStyles(!0),window.requestAnimationFrame(this.animFrameHandler.bind(this))}},y.prototype.upHandler_=function(e){e&&2!==e.detail&&window.setTimeout(function(){this.rippleElement_.classList.remove(this.CssClasses_.IS_VISIBLE)}.bind(this),0)},y.prototype.init=function(){if(this.element_){var e=this.element_.classList.contains(this.CssClasses_.RIPPLE_CENTER);this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT_IGNORE_EVENTS)||(this.rippleElement_=this.element_.querySelector("."+this.CssClasses_.RIPPLE),this.frameCount_=0,this.rippleSize_=0,this.x_=0,this.y_=0,this.ignoringMouseDown_=!1,this.boundDownHandler=this.downHandler_.bind(this),this.element_.addEventListener("mousedown",this.boundDownHandler),this.element_.addEventListener("touchstart",this.boundDownHandler),this.boundUpHandler=this.upHandler_.bind(this),this.element_.addEventListener("mouseup",this.boundUpHandler),this.element_.addEventListener("mouseleave",this.boundUpHandler),this.element_.addEventListener("touchend",this.boundUpHandler),this.element_.addEventListener("blur",this.boundUpHandler),this.getFrameCount=function(){return this.frameCount_},this.setFrameCount=function(e){this.frameCount_=e},this.getRippleElement=function(){return this.rippleElement_},this.setRippleXY=function(e,t){this.x_=e,this.y_=t},this.setRippleStyles=function(t){if(null!==this.rippleElement_){var s,i,n,a="translate("+this.x_+"px, "+this.y_+"px)";t?(i=this.Constant_.INITIAL_SCALE,n=this.Constant_.INITIAL_SIZE):(i=this.Constant_.FINAL_SCALE,n=this.rippleSize_+"px",e&&(a="translate("+this.boundWidth/2+"px, "+this.boundHeight/2+"px)")),s="translate(-50%, -50%) "+a+i,this.rippleElement_.style.webkitTransform=s,this.rippleElement_.style.msTransform=s,this.rippleElement_.style.transform=s,t?this.rippleElement_.classList.remove(this.CssClasses_.IS_ANIMATING):this.rippleElement_.classList.add(this.CssClasses_.IS_ANIMATING)}},this.animFrameHandler=function(){this.frameCount_-- >0?window.requestAnimationFrame(this.animFrameHandler.bind(this)):this.setRippleStyles(!1)})}},s.register({constructor:y,classAsString:"MaterialRipple",cssClass:"mdl-js-ripple-effect",widget:!1})}();
10 | //# sourceMappingURL=material.min.js.map
11 |
--------------------------------------------------------------------------------