├── .gitignore ├── README.md ├── backend ├── handler │ └── handler.go └── main.go ├── dist ├── assets │ ├── _layout.scss │ ├── css │ │ ├── material-grid.css │ │ ├── material-grid.min.css │ │ ├── material.amber-blue.min.css │ │ ├── material.amber-cyan.min.css │ │ ├── material.amber-deep_orange.min.css │ │ ├── material.amber-deep_purple.min.css │ │ ├── material.amber-green.min.css │ │ ├── material.amber-indigo.min.css │ │ ├── material.amber-light_blue.min.css │ │ ├── material.amber-light_green.min.css │ │ ├── material.amber-lime.min.css │ │ ├── material.amber-orange.min.css │ │ ├── material.amber-pink.min.css │ │ ├── material.amber-purple.min.css │ │ ├── material.amber-red.min.css │ │ ├── material.amber-teal.min.css │ │ ├── material.amber-yellow.min.css │ │ ├── material.blue-amber.min.css │ │ ├── material.blue-cyan.min.css │ │ ├── material.blue-deep_orange.min.css │ │ ├── material.blue-deep_purple.min.css │ │ ├── material.blue-green.min.css │ │ ├── material.blue-indigo.min.css │ │ ├── material.blue-light_blue.min.css │ │ ├── material.blue-light_green.min.css │ │ ├── material.blue-lime.min.css │ │ ├── material.blue-orange.min.css │ │ ├── material.blue-pink.min.css │ │ ├── material.blue-purple.min.css │ │ ├── material.blue-red.min.css │ │ ├── material.blue-teal.min.css │ │ ├── material.blue-yellow.min.css │ │ ├── material.blue_grey-amber.min.css │ │ ├── material.blue_grey-blue.min.css │ │ ├── material.blue_grey-cyan.min.css │ │ ├── material.blue_grey-deep_orange.min.css │ │ ├── material.blue_grey-deep_purple.min.css │ │ ├── material.blue_grey-green.min.css │ │ ├── material.blue_grey-indigo.min.css │ │ ├── material.blue_grey-light_blue.min.css │ │ ├── material.blue_grey-light_green.min.css │ │ ├── material.blue_grey-lime.min.css │ │ ├── material.blue_grey-orange.min.css │ │ ├── material.blue_grey-pink.min.css │ │ ├── material.blue_grey-purple.min.css │ │ ├── material.blue_grey-red.min.css │ │ ├── material.blue_grey-teal.min.css │ │ ├── material.blue_grey-yellow.min.css │ │ ├── material.brown-amber.min.css │ │ ├── material.brown-blue.min.css │ │ ├── material.brown-cyan.min.css │ │ ├── material.brown-deep_orange.min.css │ │ ├── material.brown-deep_purple.min.css │ │ ├── material.brown-green.min.css │ │ ├── material.brown-indigo.min.css │ │ ├── material.brown-pink.min.css │ │ ├── material.brown-purple.min.css │ │ ├── material.brown-red.min.css │ │ ├── material.brown-teal.min.css │ │ ├── material.brown-yellow.min.css │ │ ├── material.css │ │ ├── material.cyan-amber.min.css │ │ ├── material.cyan-blue.min.css │ │ ├── material.cyan-deep_orange.min.css │ │ ├── material.cyan-deep_purple.min.css │ │ ├── material.cyan-green.min.css │ │ ├── material.cyan-indigo.min.css │ │ ├── material.cyan-light_blue.min.css │ │ ├── material.cyan-light_green.min.css │ │ ├── material.cyan-lime.min.css │ │ ├── material.cyan-orange.min.css │ │ ├── material.cyan-pink.min.css │ │ ├── material.cyan-purple.min.css │ │ ├── material.cyan-red.min.css │ │ ├── material.cyan-teal.min.css │ │ ├── material.cyan-yellow.min.css │ │ ├── material.deep_orange-amber.min.css │ │ ├── material.deep_orange-blue.min.css │ │ ├── material.deep_orange-cyan.min.css │ │ ├── material.deep_orange-deep_purple.min.css │ │ ├── material.deep_orange-green.min.css │ │ ├── material.deep_orange-indigo.min.css │ │ ├── material.deep_orange-light_blue.min.css │ │ ├── material.deep_orange-light_green.min.css │ │ ├── material.deep_orange-lime.min.css │ │ ├── material.deep_orange-orange.min.css │ │ ├── material.deep_orange-pink.min.css │ │ ├── material.deep_orange-purple.min.css │ │ ├── material.deep_orange-red.min.css │ │ ├── material.deep_orange-teal.min.css │ │ ├── material.deep_orange-yellow.min.css │ │ ├── material.deep_purple-amber.min.css │ │ ├── material.deep_purple-blue.min.css │ │ ├── material.deep_purple-cyan.min.css │ │ ├── material.deep_purple-deep_orange.min.css │ │ ├── material.deep_purple-green.min.css │ │ ├── material.deep_purple-indigo.min.css │ │ ├── material.deep_purple-light_blue.min.css │ │ ├── material.deep_purple-light_green.min.css │ │ ├── material.deep_purple-lime.min.css │ │ ├── material.deep_purple-orange.min.css │ │ ├── material.deep_purple-pink.min.css │ │ ├── material.deep_purple-purple.min.css │ │ ├── material.deep_purple-red.min.css │ │ ├── material.deep_purple-teal.min.css │ │ ├── material.deep_purple-yellow.min.css │ │ ├── material.green-amber.min.css │ │ ├── material.green-blue.min.css │ │ ├── material.green-cyan.min.css │ │ ├── material.green-deep_orange.min.css │ │ ├── material.green-deep_purple.min.css │ │ ├── material.green-indigo.min.css │ │ ├── material.green-light_blue.min.css │ │ ├── material.green-light_green.min.css │ │ ├── material.green-lime.min.css │ │ ├── material.green-orange.min.css │ │ ├── material.green-pink.min.css │ │ ├── material.green-purple.min.css │ │ ├── material.green-red.min.css │ │ ├── material.green-teal.min.css │ │ ├── material.green-yellow.min.css │ │ ├── material.grey-amber.min.css │ │ ├── material.grey-blue.min.css │ │ ├── material.grey-cyan.min.css │ │ ├── material.grey-deep_orange.min.css │ │ ├── material.grey-deep_purple.min.css │ │ ├── material.grey-green.min.css │ │ ├── material.grey-indigo.min.css │ │ ├── material.grey-light_blue.min.css │ │ ├── material.grey-light_green.min.css │ │ ├── material.grey-lime.min.css │ │ ├── material.grey-orange.min.css │ │ ├── material.grey-pink.min.css │ │ ├── material.grey-purple.min.css │ │ ├── material.grey-red.min.css │ │ ├── material.grey-teal.min.css │ │ ├── material.grey-yellow.min.css │ │ ├── material.indigo-amber.min.css │ │ ├── material.indigo-blue.min.css │ │ ├── material.indigo-cyan.min.css │ │ ├── material.indigo-deep_orange.min.css │ │ ├── material.indigo-deep_purple.min.css │ │ ├── material.indigo-green.min.css │ │ ├── material.indigo-light_blue.min.css │ │ ├── material.indigo-light_green.min.css │ │ ├── material.indigo-lime.min.css │ │ ├── material.indigo-orange.min.css │ │ ├── material.indigo-pink.min.css │ │ ├── material.indigo-purple.min.css │ │ ├── material.indigo-red.min.css │ │ ├── material.indigo-teal.min.css │ │ ├── material.indigo-yellow.min.css │ │ ├── material.light_blue-amber.min.css │ │ ├── material.light_blue-blue.min.css │ │ ├── material.light_blue-cyan.min.css │ │ ├── material.light_blue-deep_orange.min.css │ │ ├── material.light_blue-deep_purple.min.css │ │ ├── material.light_blue-green.min.css │ │ ├── material.light_blue-indigo.min.css │ │ ├── material.light_blue-light_green.min.css │ │ ├── material.light_blue-lime.min.css │ │ ├── material.light_blue-orange.min.css │ │ ├── material.light_blue-pink.min.css │ │ ├── material.light_blue-purple.min.css │ │ ├── material.light_blue-red.min.css │ │ ├── material.light_blue-teal.min.css │ │ ├── material.light_blue-yellow.min.css │ │ ├── material.light_green-amber.min.css │ │ ├── material.light_green-blue.min.css │ │ ├── material.light_green-cyan.min.css │ │ ├── material.light_green-deep_orange.min.css │ │ ├── material.light_green-deep_purple.min.css │ │ ├── material.light_green-green.min.css │ │ ├── material.light_green-indigo.min.css │ │ ├── material.light_green-light_blue.min.css │ │ ├── material.light_green-lime.min.css │ │ ├── material.light_green-orange.min.css │ │ ├── material.light_green-pink.min.css │ │ ├── material.light_green-purple.min.css │ │ ├── material.light_green-red.min.css │ │ ├── material.light_green-teal.min.css │ │ ├── material.light_green-yellow.min.css │ │ ├── material.lime-amber.min.css │ │ ├── material.lime-blue.min.css │ │ ├── material.lime-cyan.min.css │ │ ├── material.lime-deep_orange.min.css │ │ ├── material.lime-deep_purple.min.css │ │ ├── material.lime-green.min.css │ │ ├── material.lime-indigo.min.css │ │ ├── material.lime-light_blue.min.css │ │ ├── material.lime-light_green.min.css │ │ ├── material.lime-orange.min.css │ │ ├── material.lime-pink.min.css │ │ ├── material.lime-purple.min.css │ │ ├── material.lime-red.min.css │ │ ├── material.lime-teal.min.css │ │ ├── material.lime-yellow.min.css │ │ ├── material.min.css │ │ ├── material.min.css.map │ │ ├── material.orange-cyan.min.css │ │ ├── material.orange-deep_orange.min.css │ │ ├── material.orange-deep_purple.min.css │ │ ├── material.orange-green.min.css │ │ ├── material.orange-indigo.min.css │ │ ├── material.orange-light_blue.min.css │ │ ├── material.orange-light_green.min.css │ │ ├── material.orange-lime.min.css │ │ ├── material.orange-pink.min.css │ │ ├── material.orange-purple.min.css │ │ ├── material.orange-red.min.css │ │ ├── material.orange-teal.min.css │ │ ├── material.orange-yellow.min.css │ │ ├── material.pink-amber.min.css │ │ ├── material.pink-blue.min.css │ │ ├── material.pink-cyan.min.css │ │ ├── material.pink-deep_orange.min.css │ │ ├── material.pink-deep_purple.min.css │ │ ├── material.pink-green.min.css │ │ ├── material.pink-indigo.min.css │ │ ├── material.pink-light_blue.min.css │ │ ├── material.pink-light_green.min.css │ │ ├── material.pink-lime.min.css │ │ ├── material.pink-orange.min.css │ │ ├── material.pink-purple.min.css │ │ ├── material.pink-red.min.css │ │ ├── material.pink-teal.min.css │ │ ├── material.pink-yellow.min.css │ │ ├── material.purple-amber.min.css │ │ ├── material.purple-blue.min.css │ │ ├── material.purple-cyan.min.css │ │ ├── material.purple-deep_orange.min.css │ │ ├── material.purple-deep_purple.min.css │ │ ├── material.purple-green.min.css │ │ ├── material.purple-indigo.min.css │ │ ├── material.purple-light_blue.min.css │ │ ├── material.purple-light_green.min.css │ │ ├── material.purple-lime.min.css │ │ ├── material.purple-orange.min.css │ │ ├── material.purple-pink.min.css │ │ ├── material.purple-red.min.css │ │ ├── material.purple-teal.min.css │ │ ├── material.purple-yellow.min.css │ │ ├── material.red-amber.min.css │ │ ├── material.red-blue.min.css │ │ ├── material.red-cyan.min.css │ │ ├── material.red-deep_orange.min.css │ │ ├── material.red-deep_purple.min.css │ │ ├── material.red-green.min.css │ │ ├── material.red-indigo.min.css │ │ ├── material.red-light_blue.min.css │ │ ├── material.red-light_green.min.css │ │ ├── material.red-lime.min.css │ │ ├── material.red-orange.min.css │ │ ├── material.red-pink.min.css │ │ ├── material.red-purple.min.css │ │ ├── material.red-teal.min.css │ │ ├── material.red-yellow.min.css │ │ ├── material.teal-amber.min.css │ │ ├── material.teal-blue.min.css │ │ ├── material.teal-cyan.min.css │ │ ├── material.teal-deep_orange.min.css │ │ ├── material.teal-deep_purple.min.css │ │ ├── material.teal-green.min.css │ │ ├── material.teal-indigo.min.css │ │ ├── material.teal-light_blue.min.css │ │ ├── material.teal-light_green.min.css │ │ ├── material.teal-lime.min.css │ │ ├── material.teal-orange.min.css │ │ ├── material.teal-pink.min.css │ │ ├── material.teal-purple.min.css │ │ ├── material.teal-red.min.css │ │ ├── material.teal-yellow.min.css │ │ ├── material.yellow-amber.min.css │ │ ├── material.yellow-blue.min.css │ │ ├── material.yellow-cyan.min.css │ │ ├── material.yellow-deep_orange.min.css │ │ ├── material.yellow-deep_purple.min.css │ │ ├── material.yellow-green.min.css │ │ ├── material.yellow-indigo.min.css │ │ ├── material.yellow-light_blue.min.css │ │ ├── material.yellow-light_green.min.css │ │ ├── material.yellow-lime.min.css │ │ ├── material.yellow-orange.min.css │ │ ├── material.yellow-pink.min.css │ │ ├── material.yellow-purple.min.css │ │ ├── material.yellow-red.min.css │ │ └── material.yellow-teal.min.css │ ├── layout-patch.diff │ ├── material-grid.css │ ├── material-grid.min.css │ ├── material.css │ ├── material.js │ ├── material.min.css │ ├── material.min.css.map │ ├── material.min.js │ ├── material.min.js.map │ ├── react-star-rating.min.css │ └── styles.css ├── bundle.js └── index.html ├── package.json ├── src ├── components │ ├── fetch-data.js │ ├── login.js │ └── not-found.js ├── layout.js ├── main.js ├── pageLogin.js ├── pageSecured.js ├── pageUnsecured.js ├── pageUserDetails.js └── state │ ├── api-data.js │ ├── index.js │ └── user.js ├── ssl ├── 509.go ├── cert.pem ├── certpem.pem ├── generate_cert.go ├── private.key ├── privategob.key ├── public.key ├── publickgob.key └── rsa.go └── video-poster.png /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | backend/gin-bin 3 | node_modules 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This repo is a demonstration / sketch for a react+redux frontend with a golang API backend that demonstrates: 2 | 3 | * Use of higher-level components to protect pages in the frontend that require authorization 4 | * react-mdl for the design 5 | * React router to route stuff 6 | * Redux and redux-thunk for state management 7 | * Multiple redux reducers using `combineReducers` 8 | * UI handling for long running API calls 9 | * [JWT](http://jwt.io/) signing for authenticating API calls 10 | * Proper handling for CORS in Gorilla mux 11 | * Setting headers with `fetch` API 12 | * An npm `scripts` based build approach with support for watchify and gin 13 | 14 | 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. 15 | 16 | This video provides an overview of the app: 17 | 18 | [![react+redux frontend / golang backend](video-poster.png)](https://youtu.be/yp7UqOfNTZ4) 19 | 20 | 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!* 21 | 22 | ## To run it 23 | 24 | First, you need a working Golang environment (1.5+) 25 | * Clone the repo 26 | * `npm install` 27 | * `npm run frontend` 28 | * `go get` to download the go packages 29 | 30 | Open your browser to `localhost:8000/dist` 31 | 32 | ## What's Missing 33 | 34 | I should also add this stuff 35 | 36 | * Godeps support 37 | * Encryption / HTTPS support for the API 38 | * Encryption for the JWT token 39 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /backend/main.go: -------------------------------------------------------------------------------- 1 | package main 2 | 3 | import ( 4 | "encoding/json" 5 | "errors" 6 | "fmt" 7 | "io/ioutil" 8 | "log" 9 | "math/rand" 10 | "net/http" 11 | "strconv" 12 | "time" 13 | 14 | jwt "github.com/dgrijalva/jwt-go" 15 | "github.com/gorilla/mux" 16 | "github.com/odewahn/react-golang-auth/backend/handler" 17 | ) 18 | 19 | // Creds holds the credentials we send back 20 | type Creds struct { 21 | Status string 22 | APIKey string 23 | AccountType string 24 | Email string 25 | AuthToken string 26 | IsLoggedIn bool 27 | } 28 | 29 | func myLookupKey(key string) []byte { 30 | return []byte(key) 31 | } 32 | 33 | func hasValidToken(jwtToken, key string) bool { 34 | ret := false 35 | token, err := jwt.Parse(jwtToken, func(token *jwt.Token) (interface{}, error) { 36 | // Don't forget to validate the alg is what you expect: 37 | if _, ok := token.Method.(*jwt.SigningMethodHMAC); !ok { 38 | return nil, fmt.Errorf("Unexpected signing method: %v", token.Header["alg"]) 39 | } 40 | return myLookupKey(key), nil 41 | }) 42 | 43 | if err == nil && token.Valid { 44 | ret = true 45 | } 46 | return ret 47 | } 48 | 49 | // GetCredentials determines if the username and password is valid 50 | // This is where logic would go to validate and return account info 51 | func GetCredentials(env *handler.Env, username, password string) Creds { 52 | credentials := Creds{ 53 | Status: "UNAUTHORIZED", 54 | APIKey: "", 55 | AccountType: "", 56 | Email: "", 57 | AuthToken: "", 58 | IsLoggedIn: false, 59 | } 60 | if (username == "admin") && (password == "admin") { 61 | credentials.Status = "OK" 62 | credentials.APIKey = "12345" 63 | credentials.AccountType = "admin" 64 | credentials.Email = "admin@example.com" 65 | credentials.IsLoggedIn = true 66 | // Now create a JWT for user 67 | // Create the token 68 | token := jwt.New(jwt.SigningMethodHS256) 69 | // Set some claims 70 | token.Claims["sub"] = username 71 | token.Claims["iss"] = "example.com" 72 | token.Claims["exp"] = time.Now().Add(time.Hour * 72).Unix() 73 | var err error 74 | credentials.AuthToken, err = token.SignedString([]byte(env.Secret)) 75 | if err != nil { 76 | log.Println(err) 77 | } 78 | } 79 | return credentials 80 | } 81 | 82 | // FakeData provides some fake data for testing... 83 | func FakeData(env *handler.Env, w http.ResponseWriter, r *http.Request) error { 84 | 85 | // If this is an OPTION method, then we don't do anything since it's just 86 | // validating the preflight info 87 | if r.Method == "OPTIONS" { 88 | return nil 89 | } 90 | 91 | // Validate the API call 92 | secret := r.Header.Get("x-authentication") 93 | isValid := hasValidToken(secret, env.Secret) 94 | if !isValid { 95 | return handler.StatusError{401, errors.New("Invalid authorization token")} 96 | } 97 | 98 | // If we get here, then we've got a valid call. So, go ahead and 99 | // process the request. In this instance, all we want to do 100 | // is pass back a list of integers that is N items long 101 | N, err := strconv.Atoi(r.FormValue("N")) 102 | if err != nil { 103 | N = 10 104 | } 105 | 106 | // Create N random integers 107 | rand.Seed(time.Now().UTC().UnixNano()) 108 | var data []int 109 | for i := 0; i < N; i++ { 110 | data = append(data, rand.Intn(100)) 111 | } 112 | 113 | time.Sleep(1 * time.Second) // just for fun, pause a bit 114 | 115 | // return the results 116 | out, _ := json.MarshalIndent(&data, "", " ") 117 | fmt.Fprintf(w, string(out)) 118 | return nil 119 | } 120 | 121 | // Login captures the data posted to the /login route 122 | func Login(env *handler.Env, w http.ResponseWriter, r *http.Request) error { 123 | dat, _ := ioutil.ReadAll(r.Body) // Read the body of the POST request 124 | // Unmarshall this into a map 125 | var params map[string]string 126 | json.Unmarshal(dat, ¶ms) 127 | 128 | credentials := GetCredentials(env, params["Username"], params["Password"]) 129 | 130 | out, _ := json.MarshalIndent(&credentials, "", " ") 131 | fmt.Fprintf(w, string(out)) 132 | 133 | return nil 134 | } 135 | 136 | func main() { 137 | // Initialise our app-wide environment data we'll send to the handler 138 | env := &handler.Env{ 139 | Secret: "biscuits and gravy", 140 | } 141 | 142 | r := mux.NewRouter() 143 | 144 | // Test this with 145 | // curl -v -X POST -d "{\"username\":\"odewahn\", \"password\":\"password\"}" --header "X-Authentication: eddieTheYeti" localhost:3000/login 146 | r.Handle("/login", handler.Handler{env, Login}).Methods("POST", "OPTIONS") 147 | 148 | //This returns some fake data 149 | r.Handle("/data", handler.Handler{env, FakeData}).Methods("GET", "OPTIONS") 150 | 151 | port := "3001" // this is the gin port, but the app port is exposed at 3000 152 | http.ListenAndServe(":"+port, r) 153 | 154 | } 155 | -------------------------------------------------------------------------------- /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/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/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-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.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-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/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} -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /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 | "immutable": "^3.7.6", 15 | "history": "^1.17.0", 16 | "react": "^0.14.7", 17 | "react-dom": "^0.14.3", 18 | "react-mdl": "^1.4.1", 19 | "react-redux": "^4.0.6", 20 | "react-router": "^2.0.1", 21 | "redux": "^3.0.5", 22 | "redux-thunk": "^1.0.3" 23 | }, 24 | "devDependencies": { 25 | "local-web-server": "^1.2.1", 26 | "babel-preset-es2015": "^6.3.13", 27 | "babel-preset-react": "^6.3.13", 28 | "babelify": "^7.2.0", 29 | "browserify": "^12.0.1", 30 | "reactify": "^1.1.1", 31 | "watchify": "^3.6.1" 32 | }, 33 | "browserify": { 34 | "transform": [ 35 | [ 36 | "babelify", 37 | { 38 | "presets": [ 39 | "es2015", 40 | "react" 41 | ] 42 | } 43 | ] 44 | ] 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /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 | 25 |
26 | ) 27 | } 28 | }) 29 | -------------------------------------------------------------------------------- /src/components/login.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Textfield, Button, Cell} from 'react-mdl'; 3 | import {setUserFieldValue, login} from '../state/user' 4 | 5 | export const LoginForm = React.createClass({ 6 | setField: function(e) { 7 | this.props.dispatch(setUserFieldValue(e.target.name, e.target.value)) 8 | }, 9 | handleSubmit: function() { 10 | this.props.dispatch(login(this.props.User.toJS())) 11 | }, 12 | render: function() { 13 | return ( 14 |
15 | 22 |
23 | 30 |
31 | 32 |
33 | ) 34 | } 35 | }) 36 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/layout.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {connect} from 'react-redux' 3 | import {Layout, Header, Navigation, Icon, Content, Grid, Cell} from 'react-mdl'; 4 | import {Link} from 'react-router' 5 | 6 | const main = React.createClass({ 7 | logout: function() { 8 | this.props.dispatch({type: "logout"}) 9 | }, 10 | render: function () { 11 | return ( 12 | 13 |
14 | 15 | Home 16 | Data 17 | 18 | {this.props.User.toJS().IsLoggedIn === true 19 | ?
20 | {this.props.User.toJS().Email} 21 | {'\u0020\u0020'} 22 | logout 23 |
24 | : login 25 | } 26 |
27 | 28 | 29 | {this.props.children} 30 | 31 | 32 | 33 | ); 34 | } 35 | }); 36 | 37 | //Map the local state directly to the state tree in the combined reducer. 38 | export const AppLayout = connect((state) => state)(main); 39 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | // Import react-router 5 | import { Router, Route} 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 {LoginPage} from './pageLogin' 16 | import {UserDetails} from './pageUserDetails' 17 | import {UnsecuredPage} from './pageUnsecured' 18 | import {SecuredPage} from './pageSecured' 19 | import NotFound from './components/not-found'; 20 | 21 | 22 | // create a store that has redux-thunk middleware enabled 23 | // https://github.com/gaearon/redux-thunk 24 | // https://github.com/rackt/redux/issues/291 25 | const createStoreWithMiddleware = applyMiddleware(thunk)(createStore); 26 | const store = createStoreWithMiddleware(reducer); 27 | 28 | // Try to make a higher level component to handle authenticated requests 29 | export function requireAuthentication(Component, LoginPage) { 30 | class AuthenticatedComponent extends React.Component { 31 | render() { 32 | return ( 33 |
34 | {this.props.User.toJS().IsLoggedIn === true 35 | ? 36 | : 37 | } 38 |
39 | ) 40 | } 41 | } 42 | return connect((state) => state)(AuthenticatedComponent) 43 | } 44 | 45 | // Define all the routes 46 | const routes = ( 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | ) 55 | 56 | ReactDOM.render( 57 | 58 | {routes} 59 | , 60 | document.getElementById('app')); 61 | -------------------------------------------------------------------------------- /src/pageLogin.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import {connect} from 'react-redux' 4 | 5 | import {Grid, Cell} from 'react-mdl'; 6 | 7 | import {LoginForm} from './components/login' 8 | 9 | const main = React.createClass({ 10 | render: function() { 11 | return ( 12 |
13 | 14 | 15 | 16 |
17 | ) 18 | } 19 | }); 20 | 21 | //Map the local state directly to the state tree in the combined reducer. 22 | export const LoginPage = connect((state) => state)(main); 23 | -------------------------------------------------------------------------------- /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 | 22 |

    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 | -------------------------------------------------------------------------------- /src/pageUnsecured.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import {connect} from 'react-redux' 4 | 5 | import {Grid, Cell} from 'react-mdl'; 6 | 7 | 8 | 9 | const main = React.createClass({ 10 | render: function() { 11 | return ( 12 | 13 |

    Welcome!

    14 | This is an unsecured page that does not require a login. 15 | You might use this as a welcome page, help, etc. 16 |     17 | ) 18 | } 19 | }); 20 | 21 | //Map the local state directly to the state tree in the combined reducer. 22 | export const UnsecuredPage = connect((state) => state)(main); 23 | -------------------------------------------------------------------------------- /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:
    14 | Username: {this.props.User.get("Username")}
    15 | Email: {this.props.User.get("Email")}
    16 | API Key: {this.props.User.get("APIKey")}
    17 | Auth Token: {this.props.User.get("AuthToken")}
    18 |     19 | ) 20 | } 21 | }); 22 | 23 | //Map the local state directly to the state tree in the combined reducer. 24 | export const UserDetails = connect((state) => state)(main); 25 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | Username: "", 11 | Password: "", 12 | IsLoggedIn: false, 13 | AccountType: "", 14 | AuthToken: "", 15 | Email: "" 16 | }) 17 | 18 | const fetchProjectMetadataURL = 'http://localhost:3000/project' 19 | 20 | /********************************************************************* 21 | || The reducer 22 | *********************************************************************/ 23 | export default function(state = INITIAL_STATE, action) { 24 | switch (action.type) { 25 | case "setUserFieldValue": 26 | return state.set(action.key, action.value) 27 | case "setUserCredentials": 28 | return state.merge(action.credentials) 29 | case "logout": 30 | return state.set("IsLoggedIn", false) 31 | } 32 | return state; 33 | } 34 | 35 | /********************************************************************* 36 | || Allowed Actions 37 | *********************************************************************/ 38 | 39 | // Sets a field value 40 | export function setUserFieldValue(key, value) { 41 | return({ 42 | type: "setUserFieldValue", 43 | key: key, 44 | value: value 45 | }) 46 | } 47 | 48 | // Deletes the container record at the given index 49 | export function login(creds) { 50 | var request = { 51 | method: 'POST', 52 | body: JSON.stringify(creds), 53 | headers: { 54 | "x-authentication": "my little friend" 55 | } 56 | } 57 | return dispatch => { 58 | fetch("http://localhost:3000/login", request) 59 | .then( response => response.json()) 60 | .then( json => { 61 | console.log(json) 62 | dispatch({type:"setUserCredentials", credentials: json}) 63 | }) 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /ssl/509.go: -------------------------------------------------------------------------------- 1 | package main 2 | 3 | import ( 4 | "crypto/rand" 5 | "crypto/rsa" 6 | "crypto/x509" 7 | "crypto/x509/pkix" 8 | "encoding/gob" 9 | "encoding/pem" 10 | "fmt" 11 | "io/ioutil" 12 | "math/big" 13 | "os" 14 | "time" 15 | ) 16 | 17 | func main() { 18 | 19 | // ok, lets populate the certificate with some data 20 | // not all fields in Certificate will be populated 21 | // see Certificate structure at 22 | // http://golang.org/pkg/crypto/x509/#Certificate 23 | template := &x509.Certificate{ 24 | IsCA: true, 25 | BasicConstraintsValid: true, 26 | SubjectKeyId: []byte{1, 2, 3}, 27 | SerialNumber: big.NewInt(1234), 28 | Subject: pkix.Name{ 29 | Country: []string{"Earth"}, 30 | Organization: []string{"Mother Nature"}, 31 | }, 32 | NotBefore: time.Now(), 33 | NotAfter: time.Now().AddDate(5, 5, 5), 34 | // see http://golang.org/pkg/crypto/x509/#KeyUsage 35 | ExtKeyUsage: []x509.ExtKeyUsage{x509.ExtKeyUsageClientAuth, x509.ExtKeyUsageServerAuth}, 36 | KeyUsage: x509.KeyUsageDigitalSignature | x509.KeyUsageCertSign, 37 | } 38 | 39 | // generate private key 40 | privatekey, err := rsa.GenerateKey(rand.Reader, 2048) 41 | 42 | if err != nil { 43 | fmt.Println(err) 44 | } 45 | 46 | publickey := &privatekey.PublicKey 47 | 48 | // create a self-signed certificate. template = parent 49 | var parent = template 50 | cert, err := x509.CreateCertificate(rand.Reader, template, parent, publickey, privatekey) 51 | 52 | if err != nil { 53 | fmt.Println(err) 54 | } 55 | 56 | // save private key 57 | pkey := x509.MarshalPKCS1PrivateKey(privatekey) 58 | ioutil.WriteFile("private.key", pkey, 0777) 59 | fmt.Println("private key saved to private.key") 60 | 61 | // save public key 62 | pubkey, _ := x509.MarshalPKIXPublicKey(publickey) 63 | ioutil.WriteFile("public.key", pubkey, 0777) 64 | fmt.Println("public key saved to public.key") 65 | 66 | // save cert 67 | ioutil.WriteFile("cert.pem", cert, 0777) 68 | fmt.Println("certificate saved to cert.pem") 69 | 70 | // these are the files save with encoding/gob style 71 | privkeyfile, _ := os.Create("privategob.key") 72 | privkeyencoder := gob.NewEncoder(privkeyfile) 73 | privkeyencoder.Encode(privatekey) 74 | privkeyfile.Close() 75 | 76 | pubkeyfile, _ := os.Create("publickgob.key") 77 | pubkeyencoder := gob.NewEncoder(pubkeyfile) 78 | pubkeyencoder.Encode(publickey) 79 | pubkeyfile.Close() 80 | 81 | // this will create plain text PEM file. 82 | pemfile, _ := os.Create("certpem.pem") 83 | var pemkey = &pem.Block{ 84 | Type: "RSA PRIVATE KEY", 85 | Bytes: x509.MarshalPKCS1PrivateKey(privatekey)} 86 | pem.Encode(pemfile, pemkey) 87 | pemfile.Close() 88 | 89 | } 90 | -------------------------------------------------------------------------------- /ssl/cert.pem: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/odewahn/react-golang-auth/246cad7aee35df6538d5c75af7b086e23086bb3e/ssl/cert.pem -------------------------------------------------------------------------------- /ssl/certpem.pem: -------------------------------------------------------------------------------- 1 | -----BEGIN RSA PRIVATE KEY----- 2 | MIIEpAIBAAKCAQEAxYM1Hbg3Gy8nZIkYTe5bNjgqQByi5Iw0VssYqLVvGJh+EbCQ 3 | Bl2g7scQswkwTmstvTNZ3WIqTn2sJON3VGvyiCqYc6lM6cm+CPzbKhpiMY2UXOKS 4 | OVjytn+mLEKWDrpzJrWIhhWKpzzXZnzqMXvDiVM4C1wd5djMpn3Ps4a5h+KkfszG 5 | jNqfSWKlgbvyKqDY9TQ4+kH4Sgojtmvni6mJUpBvFmqbecnUQ9V41NILhqP/2XE8 6 | ag/ZwXA0FqtwiuwTOqI+KHly4xEuSqZURM2hc20vSICHhSc04zZNl31ok7xGMofK 7 | 2XqBh+xEVmSp+MwP4PLCcTeskq4VEmF6x8hFJwIDAQABAoIBAQC84+Jkbcylvs7Z 8 | oxMPVKj+jXA6qChQkpVrfAg1MG7zAsNuf4D91YUXVmFuF5ePJ4kyrG2A/2SedCmx 9 | jaiNoD7uYm4yDvNzknCff9LJzTmjUldVDYnyNlLIngN5yKRhqYZ+upW6Rde4YMNP 10 | TJ9ce5RhPKkYlBwzuMbfYurEMlA01qewZDIGKQMNpv527SA4qgms1V2Pw8PdyNvS 11 | 8rWSgF7p/a3B1lU80kmmSuHIiSNZnpQSyl6+g27Aq9O7QixJNfD9vwm0DX/63JOT 12 | j+NwTzMb9DQAbPuaXanmMlnAzm6Rh+Fvf6FjRq7X+nElBMNM8DhAOHwu/sSk85pl 13 | z+0OQeMhAoGBAMz4fVXA35YbNlvfYTKBrF/lyDFzc65NLNibf2iG2+DYPIjG54Ai 14 | 7Id6dHmaWDEkuX+XYDkmxbBYsNzCU7TBJnqQdImJd+MeAdXbjA6L/LLobaQ3+LQP 15 | TTbZgywEH7vCeU/EbtO0U536GmMupAClxK7S+BiygwOkqEP3WRpLGcNbAoGBAPav 16 | Ym6Mgu4pq/PFLCPN97bv1Ab7mce8JYy8VTRIqdbmmOEy4zobcfMByrQXpdXcp81q 17 | tJUbxomn5koM570MeIVjH96Y3cPSNbJ0rRLDT4mLgeurJjkFHT0JqoFBHqVJJ/XL 18 | oM/sDOLwSJ6UhezPQ875jbxr4FlhmL8+DUhtuGslAoGAR04e1Ak//wlCdN2WA6sG 19 | 22mlpkZitP1WH5igzy0zKtou3OpNOM9td4gLIw6lpZsACToRGHC7jyibhoD3+8bB 20 | 6xt73yj6kwEqZEp3Q8xBQcAH/HwYQhOcqfsrXdGldH0oFK7iWzW9bRTHvz9HgI4q 21 | iSMNehIH7+mFO/e9gJ8lvEcCgYEAzxskOsgBTM7zrK/HhS/xX0cu7cXisAxIQkYE 22 | CudOoDvt8nP0zd4o5uqEMnsAIfMldpK1ldJB92RdNaJsFQ4ZSXOVWB9jYHpl1rOa 23 | cvxDFKlppGCGsKyYhZxN6EKx5fbrc7NICgiWMRmm/myXm9/PgD+IPb8cFi6YPUdt 24 | g3eKs3kCgYAFFnl8qVSX1TpLbFJcwtmvdSV1mgwP9nXuB00JopCvoAZR/NyibD0Z 25 | hV4tcJip5cpJ6CY+CJeritcnhiQmP6Qxqmwh7Cx+54bBeYaKIMmAqDNzJfbLJwn5 26 | 1M9XceBv+j3D3nSPsYmY+7Jey8ZCqWYGXax2ao33Of37GbOgK7aJ5g== 27 | -----END RSA PRIVATE KEY----- 28 | -------------------------------------------------------------------------------- /ssl/generate_cert.go: -------------------------------------------------------------------------------- 1 | // Copyright 2009 The Go Authors. All rights reserved. 2 | // Use of this source code is governed by a BSD-style 3 | // license that can be found in the LICENSE file. 4 | 5 | // +build ignore 6 | 7 | // Generate a self-signed X.509 certificate for a TLS server. Outputs to 8 | // 'cert.pem' and 'key.pem' and will overwrite existing files. 9 | 10 | package main 11 | 12 | import ( 13 | "crypto/ecdsa" 14 | "crypto/elliptic" 15 | "crypto/rand" 16 | "crypto/rsa" 17 | "crypto/x509" 18 | "crypto/x509/pkix" 19 | "encoding/pem" 20 | "flag" 21 | "fmt" 22 | "log" 23 | "math/big" 24 | "net" 25 | "os" 26 | "strings" 27 | "time" 28 | ) 29 | 30 | var ( 31 | host = flag.String("host", "", "Comma-separated hostnames and IPs to generate a certificate for") 32 | validFrom = flag.String("start-date", "", "Creation date formatted as Jan 1 15:04:05 2011") 33 | validFor = flag.Duration("duration", 365*24*time.Hour, "Duration that certificate is valid for") 34 | isCA = flag.Bool("ca", false, "whether this cert should be its own Certificate Authority") 35 | rsaBits = flag.Int("rsa-bits", 2048, "Size of RSA key to generate. Ignored if --ecdsa-curve is set") 36 | ecdsaCurve = flag.String("ecdsa-curve", "", "ECDSA curve to use to generate a key. Valid values are P224, P256, P384, P521") 37 | ) 38 | 39 | func publicKey(priv interface{}) interface{} { 40 | switch k := priv.(type) { 41 | case *rsa.PrivateKey: 42 | return &k.PublicKey 43 | case *ecdsa.PrivateKey: 44 | return &k.PublicKey 45 | default: 46 | return nil 47 | } 48 | } 49 | 50 | func pemBlockForKey(priv interface{}) *pem.Block { 51 | switch k := priv.(type) { 52 | case *rsa.PrivateKey: 53 | return &pem.Block{Type: "RSA PRIVATE KEY", Bytes: x509.MarshalPKCS1PrivateKey(k)} 54 | case *ecdsa.PrivateKey: 55 | b, err := x509.MarshalECPrivateKey(k) 56 | if err != nil { 57 | fmt.Fprintf(os.Stderr, "Unable to marshal ECDSA private key: %v", err) 58 | os.Exit(2) 59 | } 60 | return &pem.Block{Type: "EC PRIVATE KEY", Bytes: b} 61 | default: 62 | return nil 63 | } 64 | } 65 | 66 | func main() { 67 | flag.Parse() 68 | 69 | if len(*host) == 0 { 70 | log.Fatalf("Missing required --host parameter") 71 | } 72 | 73 | var priv interface{} 74 | var err error 75 | switch *ecdsaCurve { 76 | case "": 77 | priv, err = rsa.GenerateKey(rand.Reader, *rsaBits) 78 | case "P224": 79 | priv, err = ecdsa.GenerateKey(elliptic.P224(), rand.Reader) 80 | case "P256": 81 | priv, err = ecdsa.GenerateKey(elliptic.P256(), rand.Reader) 82 | case "P384": 83 | priv, err = ecdsa.GenerateKey(elliptic.P384(), rand.Reader) 84 | case "P521": 85 | priv, err = ecdsa.GenerateKey(elliptic.P521(), rand.Reader) 86 | default: 87 | fmt.Fprintf(os.Stderr, "Unrecognized elliptic curve: %q", *ecdsaCurve) 88 | os.Exit(1) 89 | } 90 | if err != nil { 91 | log.Fatalf("failed to generate private key: %s", err) 92 | } 93 | 94 | var notBefore time.Time 95 | if len(*validFrom) == 0 { 96 | notBefore = time.Now() 97 | } else { 98 | notBefore, err = time.Parse("Jan 2 15:04:05 2006", *validFrom) 99 | if err != nil { 100 | fmt.Fprintf(os.Stderr, "Failed to parse creation date: %s\n", err) 101 | os.Exit(1) 102 | } 103 | } 104 | 105 | notAfter := notBefore.Add(*validFor) 106 | 107 | serialNumberLimit := new(big.Int).Lsh(big.NewInt(1), 128) 108 | serialNumber, err := rand.Int(rand.Reader, serialNumberLimit) 109 | if err != nil { 110 | log.Fatalf("failed to generate serial number: %s", err) 111 | } 112 | 113 | template := x509.Certificate{ 114 | SerialNumber: serialNumber, 115 | Subject: pkix.Name{ 116 | Organization: []string{"Acme Co"}, 117 | }, 118 | NotBefore: notBefore, 119 | NotAfter: notAfter, 120 | 121 | KeyUsage: x509.KeyUsageKeyEncipherment | x509.KeyUsageDigitalSignature, 122 | ExtKeyUsage: []x509.ExtKeyUsage{x509.ExtKeyUsageServerAuth}, 123 | BasicConstraintsValid: true, 124 | } 125 | 126 | hosts := strings.Split(*host, ",") 127 | for _, h := range hosts { 128 | if ip := net.ParseIP(h); ip != nil { 129 | template.IPAddresses = append(template.IPAddresses, ip) 130 | } else { 131 | template.DNSNames = append(template.DNSNames, h) 132 | } 133 | } 134 | 135 | if *isCA { 136 | template.IsCA = true 137 | template.KeyUsage |= x509.KeyUsageCertSign 138 | } 139 | 140 | derBytes, err := x509.CreateCertificate(rand.Reader, &template, &template, publicKey(priv), priv) 141 | if err != nil { 142 | log.Fatalf("Failed to create certificate: %s", err) 143 | } 144 | 145 | certOut, err := os.Create("cert.pem") 146 | if err != nil { 147 | log.Fatalf("failed to open cert.pem for writing: %s", err) 148 | } 149 | pem.Encode(certOut, &pem.Block{Type: "CERTIFICATE", Bytes: derBytes}) 150 | certOut.Close() 151 | log.Print("written cert.pem\n") 152 | 153 | keyOut, err := os.OpenFile("key.pem", os.O_WRONLY|os.O_CREATE|os.O_TRUNC, 0600) 154 | if err != nil { 155 | log.Print("failed to open key.pem for writing:", err) 156 | return 157 | } 158 | pem.Encode(keyOut, pemBlockForKey(priv)) 159 | keyOut.Close() 160 | log.Print("written key.pem\n") 161 | } 162 | -------------------------------------------------------------------------------- /ssl/private.key: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/odewahn/react-golang-auth/246cad7aee35df6538d5c75af7b086e23086bb3e/ssl/private.key -------------------------------------------------------------------------------- /ssl/privategob.key: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/odewahn/react-golang-auth/246cad7aee35df6538d5c75af7b086e23086bb3e/ssl/privategob.key -------------------------------------------------------------------------------- /ssl/public.key: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/odewahn/react-golang-auth/246cad7aee35df6538d5c75af7b086e23086bb3e/ssl/public.key -------------------------------------------------------------------------------- /ssl/publickgob.key: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/odewahn/react-golang-auth/246cad7aee35df6538d5c75af7b086e23086bb3e/ssl/publickgob.key -------------------------------------------------------------------------------- /ssl/rsa.go: -------------------------------------------------------------------------------- 1 | package main 2 | 3 | import ( 4 | "crypto/rand" 5 | "crypto/rsa" 6 | "crypto/x509" 7 | "encoding/gob" 8 | "encoding/pem" 9 | "fmt" 10 | "os" 11 | ) 12 | 13 | func main() { 14 | 15 | // generate private key 16 | privatekey, err := rsa.GenerateKey(rand.Reader, 1024) 17 | 18 | if err != nil { 19 | fmt.Println(err.Error) 20 | os.Exit(1) 21 | } 22 | 23 | var publickey *rsa.PublicKey 24 | publickey = &privatekey.PublicKey 25 | 26 | // save private and public key separately 27 | privatekeyfile, err := os.Create("private.key") 28 | if err != nil { 29 | fmt.Println(err) 30 | os.Exit(1) 31 | } 32 | privatekeyencoder := gob.NewEncoder(privatekeyfile) 33 | privatekeyencoder.Encode(privatekey) 34 | privatekeyfile.Close() 35 | 36 | publickeyfile, err := os.Create("public.key") 37 | if err != nil { 38 | fmt.Println(err) 39 | os.Exit(1) 40 | } 41 | 42 | publickeyencoder := gob.NewEncoder(publickeyfile) 43 | publickeyencoder.Encode(publickey) 44 | publickeyfile.Close() 45 | 46 | // save PEM file 47 | pemfile, err := os.Create("private.pem") 48 | 49 | if err != nil { 50 | fmt.Println(err) 51 | os.Exit(1) 52 | } 53 | 54 | // http://golang.org/pkg/encoding/pem/#Block 55 | var pemkey = &pem.Block{ 56 | Type: "RSA PRIVATE KEY", 57 | Bytes: x509.MarshalPKCS1PrivateKey(privatekey)} 58 | 59 | err = pem.Encode(pemfile, pemkey) 60 | 61 | if err != nil { 62 | fmt.Println(err) 63 | os.Exit(1) 64 | } 65 | 66 | pemfile.Close() 67 | 68 | } 69 | -------------------------------------------------------------------------------- /video-poster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/odewahn/react-golang-auth/246cad7aee35df6538d5c75af7b086e23086bb3e/video-poster.png --------------------------------------------------------------------------------