toloframework/ker/mod/tfw.view.floating-button.css

Javascript/HTML/CSS compiler for Firefox OS or nodewebkit apps using modules in the nodejs style.

button.tfw-view-floating-button {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 56px;
  border-radius: 100%;
  margin: 0;
  transition: transform .3s;
  transform: scale(1);
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  transition: all .2s;
  border: none;
}

button.tfw-view-floating-button.hide {
  transition: transform .3s;
  transform: scale(0);
}

button.tfw-view-floating-button.disabled {
  filter: saturate(0);
  transition: all .2s;
}

button.tfw-view-floating-button.disabled > svg.tfw-view-icon.view {
  opacity: .5;
}

button.tfw-view-floating-button > svg.tfw-view-icon.view {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -12px -12px;
}

button.tfw-view-floating-button.small {
  width: 40px;
  height: 40px;
}

@media (max-width: 460px) {
  button.tfw-view-floating-button {
    width: 40px;
    height: 40px;
  }
}