feat(fab): Initial Implementation

google · Jul 27, 2016 · 8084ee1 · 8084ee1
1 parent 42acbf7
commit 8084ee1
Show file tree

Hide file tree

Showing 9 changed files with 190 additions and 1 deletion.
diff --git a/demos/fab.html b/demos/fab.html
@@ -0,0 +1,69 @@
+<!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;
+      }
+    </style>
+    <script src="assets/material-design-lite.css.js" charset="utf-8"></script>
+  </head>
+  <body>
+    <main>
+      <h1>MDL FAB</h1>
+      <section>
+        <fieldset>
+          <legend>Normal FABs</legend>
+          <button class="mdl-fab">
+            <i class="material-icons mdl-fab__icon">favorite_border</i>
+          </button>
+          <button class="mdl-fab mdl-fab--mini">
+            <i class="material-icons mdl-fab__icon">favorite_border</i>
+          </button>
+          <button class="mdl-fab mdl-fab--plain">
+            <i class="material-icons mdl-fab__icon">favorite_border</i>
+          </button>
+          <button class="mdl-fab mdl-fab--mini mdl-fab--plain">
+            <i class="material-icons mdl-fab__icon">favorite_border</i>
+          </button>
+        </fieldset>
+        <fieldset disabled>
+          <legend>Disabled FABs</legend>
+          <button class="mdl-fab">
+            <i class="material-icons mdl-fab__icon">favorite_border</i>
+          </button>
+          <button class="mdl-fab mdl-fab--mini">
+            <i class="material-icons mdl-fab__icon">favorite_border</i>
+          </button>
+          <button class="mdl-fab mdl-fab--plain">
+            <i class="material-icons mdl-fab__icon">favorite_border</i>
+          </button>
+          <button class="mdl-fab mdl-fab--mini mdl-fab--plain">
+            <i class="material-icons mdl-fab__icon">favorite_border</i>
+          </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
@@ -25,6 +25,7 @@
       <nav>
         <ul>
           <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>
         </ul>

diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "lerna": "2.0.0-beta.18",
     "node-sass": "^3.7.0",
     "npm-run-all": "^2.3.0",
+    "postcss-custom-properties": "^5.0.1",
     "postcss-loader": "^0.9.1",
     "raw-loader": "^0.5.1",
     "sass-loader": "^3.2.0",

diff --git a/packages/material-design-lite/material-design-lite.scss b/packages/material-design-lite/material-design-lite.scss
@@ -16,5 +16,6 @@
 
 @import "mdl-animation/mdl-animation";
 @import "mdl-checkbox/mdl-checkbox";
+@import "mdl-fab/index";
 @import "mdl-radio/mdl-radio";
 @import "mdl-ripple/mdl-ripple";
diff --git a/packages/material-design-lite/package.json b/packages/material-design-lite/package.json
@@ -8,6 +8,7 @@
     "mdl-auto-init": "^1.0.0",
     "mdl-base-component": "^1.0.0",
     "mdl-checkbox": "^1.0.0",
+    "mdl-fab": "^1.0.0",
     "mdl-radio": "^1.0.0",
     "mdl-ripple": "^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);
+}
+
+:root {
+  --mdl-accent-color: rgb(255, 64, 129);
+  --mdl-button-active-shade: rgba(0, 0, 0, .12);
+}
diff --git a/packages/mdl-fab/index.scss b/packages/mdl-fab/index.scss
@@ -0,0 +1,73 @@
+/**
+ * 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 {
+  box-sizing: border-box;
+  display: inline-block;
+  width: 56px;
+  height: 56px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--mdl-accent-color);
+  color: white;
+  text-align: center;
+  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
+  cursor: pointer;
+  overflow: hidden;
+  user-select: none;
+
+  &__icon {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  &--plain {
+    background-color: #fafafa;
+    color: black;
+  }
+
+  &--mini {
+    width: 40px;
+    height: 40px;
+  }
+
+  &:active {
+    @include mdl-shadow-4dp;
+    outline: transparent;
+  }
+
+  &:focus:not(:active) {
+    @include mdl-focus-shadow;
+    outline: transparent;
+
+    .mdl-fab__icon {
+      background-color: var(--mdl-button-active-shade);
+    }
+  }
+
+  /* stylelint-disable selector-no-type */
+  &:disabled,
+  fieldset:disabled & {
+    cursor: default;
+  }
+}
diff --git a/packages/mdl-fab/package.json b/packages/mdl-fab/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "mdl-fab",
+  "version": "1.0.0",
+  "license": "Apache 2.0"
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -74,6 +74,7 @@ module.exports = [{
         './packages/material-design-lite/material-design-lite.scss'),
     'mdl-animation': path.resolve('./packages/mdl-animation/mdl-animation.scss'),
     'mdl-checkbox': path.resolve('./packages/mdl-checkbox/mdl-checkbox.scss'),
+    'mdl-fab': path.resolve('./packages/mdl-fab/index.scss'),
     'mdl-ripple': path.resolve('./packages/mdl-ripple/mdl-ripple.scss')
   },
   output: {
@@ -101,7 +102,8 @@ module.exports = [{
   },
   postcss: function() {
     return [
-      require('autoprefixer')
+      require('autoprefixer'),
+      require('postcss-custom-properties')
     ];
   }
 }];