Core: Fab Extended + Fab Labels

Author: nolimits4web

kitchen-sink/core/pages/fab.html

@@ -31,9 +31,18 @@
       <i class="icon material-icons md-only">close</i>
     </a>
     <div class="fab-buttons fab-buttons-top">
-      <a href="">1</a>
-      <a href="">2</a>
-      <a href="">3</a>
+      <a href="" class="fab-label-button">
+        <span>1</span>
+        <span class="fab-label">Action 1</span>
+      </a>
+      <a href="" class="fab-label-button">
+        <span>2</span>
+        <span class="fab-label">Action 2</span>
+      </a>
+      <a href="" class="fab-label-button">
+        <span>3</span>
+        <span class="fab-label">Third Action</span>
+      </a>
     </div>
   </div>
   <div class="fab fab-left-bottom">
@@ -43,7 +52,7 @@
       <i class="icon material-icons md-only">add</i>
       <i class="icon material-icons md-only">close</i>
     </a>
-    <div class="fab-buttons fab-buttons-right">
+    <div class="fab-buttons fab-buttons-top">
       <a href="">1</a>
       <a href="">2</a>
       <a href="">3</a>
@@ -76,6 +85,13 @@
       <a href="">4</a>
     </div>
   </div>
+  <div class="fab fab-extended fab-center-bottom">
+    <a href="#">
+      <i class="icon f7-icons ios-only">add</i>
+      <i class="icon material-icons md-only">add</i>
+      <div class="fab-text">Create</div>
+    </a>
+  </div>
   <div class="page-content">
     <div class="block">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias perferendis suscipit, commodi labore ipsa non quasi eum magnam neque ducimus! Quasi, numquam.</p>

src/core/components/fab/fab-ios.less

@@ -55,6 +55,24 @@
     }
   }
 
+  // Extended
+  .fab-extended {
+    min-width: 50px;
+    > a {
+      width: 100%;
+      height: 50px;
+      i {
+        left: 50px / 2;
+      }
+    }
+    i ~ .fab-text {
+      padding-left: 50px;
+    }
+  }
+  .fab-label {
+    box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
+  }
+
   .color-theme-loop({
     .color-theme-@{colorThemeName} {
       .fab > a, .fab-buttons a, &.fab > a, &.fab-buttons a {

src/core/components/fab/fab-md.less

@@ -81,6 +81,24 @@
       background: none !important;
     }
   }
+  // Extended
+  .fab-extended {
+    min-width: 48px;
+    > a {
+      height: 48px;
+      i {
+        left: 48px / 2;
+      }
+    }
+    i ~ .fab-text {
+      padding-left: 48px;
+    }
+  }
+  // Labels
+  .fab-label {
+    .elevation(3);
+  }
+
   .color-theme-loop({
     .color-theme-@{colorThemeName} {
       .fab > a, .fab-buttons a, &.fab > a, &.fab-buttons a {

src/core/components/fab/fab.less

@@ -201,6 +201,48 @@
   display: none;
 }
 
+// Extended
+.fab-extended {
+  width: auto;
+  > a {
+    width: 100% !important;
+  }
+}
+.fab-text {
+  padding-left: 20px;
+  padding-right: 20px;
+  box-sizing: border-box;
+  font-size: 14px;
+  text-transform: uppercase;
+}
+// Labels
+.fab-label-button {
+  overflow: visible !important;
+}
+.fab-label {
+  position: absolute;
+  top: 50%;
+  padding: 4px 8px;
+  border-radius: 4px;
+  background: #fff;
+  color: #666;
+  white-space: nowrap;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+.fab[class*="fab-right-"] {
+  .fab-label {
+    right: 100%;
+    margin-right: 8px;
+  }
+}
+.fab[class*="fab-left-"] {
+  .fab-label {
+    left: 100%;
+    margin-left: 8px;
+  }
+}
+
 & when (@includeIosTheme) {
   @import url('./fab-ios.less');
 }