feat(fab): Initial Implementation

google · Jul 29, 2016 · 1bb9b87 · 1bb9b87
1 parent 93c9b04
commit 1bb9b87
Show file tree

Hide file tree

Showing 8 changed files with 243 additions and 0 deletions.
diff --git a/demos/fab.html b/demos/fab.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2016 Google Inc. All rights reserved.
+  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
+      https://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>
+  <head>
+    <meta charset="utf-8">
+    <title>MDL FAB Demo</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <style>
+      /* Make the demo look a little bit better */
+      fieldset {
+        margin-bottom: 0.5rem;
+      }
+
+      fieldset .mdl-fab {
+        margin: 16px;
+      }
+
+      .app-fab--absolute.app-fab--absolute {
+        position: absolute;
+        bottom: 1rem;
+        right: 1rem;
+      }
+
+      @media(min-width: 1024px) {
+        .app-fab--absolute.app-fab--absolute {
+          bottom: 3rem;
+          right: 5rem;
+        }
+      }
+    </style>
+    <script src="assets/material-design-lite.css.js" charset="utf-8"></script>
+  </head>
+  <body>
+    <main>
+      <h1>MDL FAB</h1>
+
+      <button class="mdl-fab material-icons app-fab--absolute">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+          <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
+        </svg>
+      </button>
+
+      <section>
+        <fieldset>
+          <legend>Normal FABs</legend>
+          <button class="mdl-fab material-icons">
+            favorite_border
+          </button>
+          <button class="mdl-fab mdl-fab--mini material-icons">
+            favorite_border
+          </button>
+          <button class="mdl-fab mdl-fab--plain material-icons">
+            favorite_border
+          </button>
+          <button class="mdl-fab mdl-fab--mini mdl-fab--plain material-icons">
+            favorite_border
+          </button>
+        </fieldset>
+        <fieldset disabled>
+          <legend>Disabled FABs</legend>
+          <button class="mdl-fab material-icons">
+            favorite_border
+          </button>
+          <button class="mdl-fab mdl-fab--mini material-icons">
+            favorite_border
+          </button>
+          <button class="mdl-fab mdl-fab--plain material-icons">
+            favorite_border
+          </button>
+          <button class="mdl-fab mdl-fab--mini mdl-fab--plain material-icons">
+            favorite_border
+          </button>
+        </fieldset>
+      </section>
+    </main>
+    <script src="assets/material-design-lite.js" charset="utf-8"></script>
+  </body>
+</html>
diff --git a/demos/index.html b/demos/index.html
@@ -26,6 +26,7 @@
         <ul>
           <li><a href="button.html">Button</a></li>
           <li><a href="checkbox.html">Checkbox</a></li>
+          <li><a href="fab.html">FAB</a></li>
           <li><a href="radio.html">Radio</a></li>
           <li><a href="ripple.html">Ripple</a></li>
           <li><a href="typography.html">Typography</a></li>

diff --git a/packages/material-design-lite/material-design-lite.scss b/packages/material-design-lite/material-design-lite.scss
@@ -17,6 +17,7 @@
 @import "mdl-animation/mdl-animation";
 @import "mdl-button/mdl-button";
 @import "mdl-checkbox/mdl-checkbox";
+@import "mdl-fab/mdl-fab";
 @import "mdl-radio/mdl-radio";
 @import "mdl-ripple/mdl-ripple";
 @import "mdl-typography/mdl-typography";
diff --git a/packages/material-design-lite/package.json b/packages/material-design-lite/package.json
@@ -9,6 +9,7 @@
     "mdl-base": "^1.0.0",
     "mdl-button": "^1.0.0",
     "mdl-checkbox": "^1.0.0",
+    "mdl-fab": "^1.0.0",
     "mdl-radio": "^1.0.0",
     "mdl-ripple": "^1.0.0",
     "mdl-typography": "^1.0.0"

diff --git a/packages/mdl-fab/_variables.scss b/packages/mdl-fab/_variables.scss
@@ -0,0 +1,36 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * 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 Remove the shadow stuff here once https://github.com/google/material-design-lite/issues/4592 is done. */
+$mdl-shadow-key-umbra-opacity: .2;
+$mdl-shadow-key-penumbra-opacity: .14;
+$mdl-shadow-ambient-shadow-opacity: .12;
+
+@mixin mdl-focus-shadow() {
+  box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36);
+}
+
+@mixin mdl-shadow-4dp() {
+  box-shadow:
+    0 2px 4px -1px rgba(0, 0, 0, $mdl-shadow-key-umbra-opacity),
+    0 4px 5px 0 rgba(0, 0, 0, $mdl-shadow-key-penumbra-opacity),
+    0 1px 10px 0 rgba(0, 0, 0, $mdl-shadow-ambient-shadow-opacity);
+}
+
+/* @TODO Remove this internally once the theme base is in place. */
+:root {
+  --mdl-theme-color-accent: rgb(255, 64, 129);
+}
diff --git a/packages/mdl-fab/mdl-fab.scss b/packages/mdl-fab/mdl-fab.scss
@@ -0,0 +1,108 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * 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.
+ */
+
+@import "variables";
+
+.mdl-fab {
+  @include mdl-shadow-4dp;
+  display: inline-flex;
+  position: relative;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  padding: 0;
+  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--mdl-theme-color-accent);
+  color: white;
+  cursor: pointer;
+  overflow: hidden;
+  user-select: none;
+  box-sizing: border-box;
+  fill: currentColor;
+  -webkit-appearance: none;
+
+  &--mini {
+    width: 40px;
+    height: 40px;
+  }
+
+  &--plain {
+    background-color: white;
+    color: rgba(0, 0, 0, .87);
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition: opacity 120ms cubic-bezier(0, 0, .2, 1);
+    border-radius: inherit;
+    content: "";
+  }
+
+  &::before {
+    background: black;
+    opacity: 0;
+  }
+
+  &:focus::before {
+    opacity: .12;
+  }
+
+  &::after {
+    width: 100%;
+    height: 100%;
+    background: black;
+    opacity: 0;
+    overflow: hidden;
+  }
+
+  &:active::after {
+    opacity: .06;
+  }
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+
+  &:active {
+    @include mdl-focus-shadow;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+
+  /* stylelint-disable selector-no-type */
+  fieldset:disabled &,
+  &:disabled {
+    background-color: rgba(0, 0, 0, .12);
+    color: rgba(0, 0, 0, .26);
+    cursor: default;
+    pointer-events: none;
+  }
+}
diff --git a/packages/mdl-fab/package.json b/packages/mdl-fab/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "mdl-fab",
+  "description": "A simple FAB component provided by Material Design Lite",
+  "version": "1.0.0",
+  "license": "Apache-2.0"
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -78,6 +78,7 @@ module.exports = [{
     'mdl-animation': path.resolve('./packages/mdl-animation/mdl-animation.scss'),
     'mdl-button': path.resolve('./packages/mdl-button/mdl-button.scss'),
     'mdl-checkbox': path.resolve('./packages/mdl-checkbox/mdl-checkbox.scss'),
+    'mdl-fab': path.resolve('./packages/mdl-fab/mdl-fab.scss'),
     'mdl-ripple': path.resolve('./packages/mdl-ripple/mdl-ripple.scss'),
     'mdl-typography': path.resolve('./packages/mdl-typography/mdl-typography.scss')
   },