diff options
| author |  Benjamin Barenblat <benjamin@barenblat.name> | 2016-11-05 17:39:41 -0400 |
|---|---|---|
| committer | Benjamin Barenblat <benjamin@barenblat.name> | 2016-11-05 17:39:41 -0400 |
| commit | 43dca1d076bdea10473f61dd53ddcd7e43fa5b55 (patch) | |
| tree | 3cca7a8859786110c064d75da0c71970aa3f4864 /material | |
| parent | 9e4a75fe23afd82dd4556c73be654366f47bad00 (diff) | |
Begin writing a custom Material Design library
Stop using Material Design Lite, as its execution model doesn’t play
well with Ur/Web’s functional-reactive page generation. Start building
a Material Design library more closely tailored to uGTD and Ur/Web.
Diffstat (limited to 'material')
| -rw-r--r-- | material/lib.urp | 3 | ||||
| -rw-r--r-- | material/material.css | 48 | ||||
| -rw-r--r-- | material/material.ur | 42 | ||||
| -rw-r--r-- | material/material.urs | 18 |
4 files changed, 111 insertions, 0 deletions
diff --git a/material/lib.urp b/material/lib.urp new file mode 100644 index 0000000..0f75854 --- /dev/null +++ b/material/lib.urp @@ -0,0 +1,3 @@ +file /material.css material.css + +material
\ No newline at end of file diff --git a/material/material.css b/material/material.css new file mode 100644 index 0000000..5a20eda --- /dev/null +++ b/material/material.css @@ -0,0 +1,48 @@ +/* Copyright 2016 Benjamin Barenblat + +Licensed under the Apache License, Version 2.0 (the “License”); you may not use +this file except in compliance with the License. You may obtain a copy of the +License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed +under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR +CONDITIONS OF ANY KIND, either express or implied. See the License for the +specific language governing permissions and limitations under the License. */ + +html, body { + margin: 0; + padding: 0; + background: #fafafa; + font-family: Roboto; +} + +.Material_AppBar_bar { + background: #9c27b0; + height: 56px; + box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.34); /* 4dp */ + display: flex; +} + +/* Aggressively align text to baseline by pretending it’s a drop cap +(http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/). */ +.Material_AppBar_title { + line-height: 0px; +} +.Material_AppBar_title:after { + display: inline-block; + height: 100%; + content: ""; +} + +.Material_AppBar_title { + margin: auto auto 20px 14px; + font-size: 20px; + font-weight: 500; + color: #fff; + white-space: nowrap; + overflow: visible; + /* We can’t use text-overflow because line-height got set to zero for baseline + adjustment. */ +} diff --git a/material/material.ur b/material/material.ur new file mode 100644 index 0000000..3787355 --- /dev/null +++ b/material/material.ur @@ -0,0 +1,42 @@ +(* Copyright 2015 Google Inc. +Copyright 2016 Benjamin Barenblat + +Licensed under the Apache License, Version 2.0 (the “License”); you may not use +this file except in compliance with the License. You may obtain a copy of the +License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed +under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR +CONDITIONS OF ANY KIND, either express or implied. See the License for the +specific language governing permissions and limitations under the License. *) + +(* TODO(bbaren): Support attributes in the arguments. *) +fun page p = <xml> + <head> + <link rel="stylesheet" href="/material.css" /> + + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + + (* Disable tap highlight on IE. *) + <meta name="msapplication-tap-highlight" content="no" /> + + (* Color the status bar on mobile devices. *) + <meta name="theme-color" content="#9c27b0" /> + + {p.Head} + </head> + <body>{p.Body}</body> +</xml> + +structure AppBar = struct + style bar + style title + + fun make t = <xml> + <header class={bar}> + <h1 class={title}>{[t]}</h1> + </header> + </xml> +end diff --git a/material/material.urs b/material/material.urs new file mode 100644 index 0000000..fe50869 --- /dev/null +++ b/material/material.urs @@ -0,0 +1,18 @@ +(* Copyright 2016 Benjamin Barenblat + +Licensed under the Apache License, Version 2.0 (the “License”); you may not use +this file except in compliance with the License. You may obtain a copy of the +License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed +under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR +CONDITIONS OF ANY KIND, either express or implied. See the License for the +specific language governing permissions and limitations under the License. *) + +val page : {Head : xhead, Body : xbody} -> page + +structure AppBar : sig + val make : string (* app title *) -> xbody +end |