@pi0/framework7/src/components/fab/fab-md.less

Full featured mobile HTML framework for building iOS & Android apps

.md {
  @import (multiple) '../../less/colors-md.less';
  @import (multiple) '../../less/vars-md.less';
  .fab > a, .fab-buttons a {
    background: @themeColor;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    color: #fff;
    .md-depth(3);
    &.active-state {
      background: darken(@themeColor, 8%);
    }
  }
  .fab[class*="fab-left"] {
    left: 15px;
  }
  .fab[class*="fab-right"] {
    right: 15px;
  }
  .fab[class*="-top"] {
    top: 15px;
  }
  .fab[class*="-bottom"] {
    bottom: 15px;
  }

  // Relation with navbar
  .navbar ~ * .fab[class*="-top"], .navbar ~ .fab[class*="-top"] {
    margin-top: @navbarSize;
  }

  @media (min-width: 768px) {
    .navbar ~ * .fab[class*="-top"], .navbar ~ .fab[class*="-top"] {
      margin-top: @navbarSizeTablet;
    }
  }
  // Relation with toolbar
  .toolbar:not(.toolbar-bottom-md):not(.messagebar) ~ * .fab[class*="-top"],
  .toolbar:not(.toolbar-bottom-md):not(.messagebar) ~ .fab[class*="-top"] {
    margin-top: @toolbarSize;
  }
  .tabbar-labels:not(.toolbar-bottom-md) ~ * .fab[class*="-top"], .tabbar-labels:not(.toolbar-bottom-md) ~ .fab[class*="-top"] {
    margin-top: @tabbarLabelsSize;
  }
  .navbar {
    + .toolbar:not(.toolbar-bottom-md):not(.messagebar) ~ * .fab[class*="-top"],
    + .toolbar:not(.toolbar-bottom-md):not(.messagebar) ~ .fab[class*="-top"] {
      margin-top: @toolbarSize + @navbarSize;
    }
    + .tabbar-labels:not(.toolbar-bottom-md) ~ * .fab[class*="-top"], + .tabbar-labels:not(.toolbar-bottom-md) ~ .fab[class*="-top"] {
      margin-top: @tabbarLabelsSize + @navbarSize;
    }
    @media (min-width: 768px) {
      + .toolbar:not(.toolbar-bottom-md):not(.messagebar) ~ * .fab[class*="-top"],
      + .toolbar:not(.toolbar-bottom-md):not(.messagebar) ~ .fab[class*="-top"] {
        margin-top: @toolbarSize + @navbarSizeTablet;
      }
      + .tabbar-labels:not(.toolbar-bottom-md) ~ * .fab[class*="-top"], + .tabbar-labels:not(.toolbar-bottom-md) ~ .fab[class*="-top"] {
        margin-top: @tabbarLabelsSize + @navbarSizeTablet;
      }
    }
  }
  // Bottom
  .toolbar-bottom-md ~ * .fab[class*="-bottom"],
  .toolbar-bottom-md ~ .fab[class*="-bottom"],
  .messagebar ~ * .fab[class*="-bottom"],
  .messagebar ~ .fab[class*="-bottom"] {
    margin-bottom: @toolbarSize;
  }
  .toolbar-bottom-md.tabbar-labels ~ * .fab[class*="-bottom"], .toolbar-bottom-md.tabbar-labels ~ .fab[class*="-bottom"] {
    margin-bottom: @tabbarLabelsSize;
  }

  .fab-morph {
    border-radius: 28px;
    background: @themeColor;
    .md-depth(3);
    > a {
      box-shadow: none;
      background: none !important;
    }
  }
  .color-theme-loop({
    .color-theme-@{colorThemeName} {
      .fab > a, .fab-buttons a, &.fab > a, &.fab-buttons a {
        background: @colorThemeValue;
        &.active-state {
          background: darken(@colorThemeValue, 8%);
        }
      }
      .fab-morph, &.fab-morph {
        background: @colorThemeValue;
      }
    }
  });
  .color-loop({
    .fab.color-@{colorName} > a,
    .fab.color-@{colorName} .fab-buttons > a,
    .fab-buttons.color-@{colorName} a,
    .fab > a.color-@{colorName},
    .fab .fab-buttons > a.color-@{colorName} {
      background: @colorValue;
      &.active-state {
        background: darken(@colorValue, 8%);
      }
    }
    .fab-morph.color-@{colorName} {
      background: @colorValue;
    }
  });
}