framework7/components/elevation/elevation.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Elevation === */
@elevations: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24;
.elevation-loop(@array, @i: 1) when (@i =< length(@array)) {
  @value: extract(@array, @i);
  .elevation-@{value} {
    .elevation(@value) !important;
  }
  .elevation-loop(@array, (@i + 1));
}
.elevation-loop(@elevations);

.elevation-hover-loop(@array, @i: 1) when (@i =< length(@array)) {
  @value: extract(@array, @i);
  .device-desktop .elevation-hover-@{value}:hover {
    .elevation(@value) !important;
  }
  .elevation-hover-loop(@array, (@i + 1));
}
.elevation-hover-loop(@elevations);

.elevation-pressed-loop(@array, @i: 1) when (@i =< length(@array)) {
  @value: extract(@array, @i);
  .active-state.elevation-pressed-@{value},
  .device-desktop .active-state.elevation-pressed-@{value} {
    .elevation(@value) !important;
  }
  .elevation-pressed-loop(@array, (@i + 1));
}
.elevation-pressed-loop(@elevations);

.elevation-transition-100 {
  transition-duration: 100ms;
  transition-property: box-shadow;
}
.elevation-transition,
.elevation-transition-200 {
  transition-duration: 200ms;
  transition-property: box-shadow;
}
.elevation-transition-300 {
  transition-duration: 300ms;
  transition-property: box-shadow;
}
.elevation-transition-400 {
  transition-duration: 400ms;
  transition-property: box-shadow;
}
.elevation-transition-500 {
  transition-duration: 500ms;
  transition-property: box-shadow;
}

& when (@includeIosTheme) {
  @import url('./elevation-ios.less');
}
& when (@includeMdTheme) {
  @import url('./elevation-md.less');
}