framework7/components/fab/fab-ios.less

Full featured mobile HTML framework for building iOS & Android apps

.ios {
  .fab > a,
  .fab-buttons a {
    .ios-glass-backdrop();
    box-shadow: var(--f7-glass-shadow-fab);
    &.active-state {
      transition-duration: 0ms;
      background-color: var(--f7-fab-pressed-bg-color, var(--f7-theme-color-shade));
    }
  }
  &,
  [class*='color-'] {
    --f7-fab-pressed-bg-color: var(--f7-theme-color-shade);
    --f7-fab-bg-color: var(--f7-theme-color);
    --f7-glass-shadow-fab:
      inset -3px -3px 0px -3.5px #fff, inset 3px 3px 0px -3.5px #fff,
      inset 0px 0px 0px 0.5px rgba(255, 255, 255, 0.5),
      inset 3px 3px 10px -2px color-mix(in oklab, var(--f7-theme-color) 100%, black),
      inset -3px -3px 10px -2px color-mix(in oklab, var(--f7-theme-color) 100%, black),
      inset 0 0 5px 1px #fff, 0 0 15px 4px rgba(0, 0, 0, 0.2);
  }
  &.dark,
  .dark {
    &,
    [class*='color-'] {
      --f7-fab-bg-color: color-mix(in oklab, var(--f7-theme-color-shade) 50%, transparent 0%);
      --f7-glass-shadow-fab:
        inset 3px 3px 0px -3.5px var(--f7-theme-color),
        inset -3px -3px 0px -3.5px var(--f7-theme-color),
        inset -0.5px -0.5px 0px rgba(255, 255, 255, 0.5),
        inset 0.5px 0.5px 0px rgba(255, 255, 255, 0.1),
        inset -3px 3px 0px -3.5px rgba(255, 255, 255, 0.25),
        inset 0px -5px 0px -3.5px color-mix(in oklab, var(--f7-theme-color) 50%, transparent 10%),
        inset 0px -5px 5px color-mix(in oklab, var(--f7-theme-color) 50%, transparent 10%),
        0 0 15px 4px rgba(0, 0, 0, 0.2);
    }
  }
}