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.

1 files changed, 48 insertions, 0 deletions

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. */
+}