web-apps/apps/documenteditor/mobile/resources/sass/_application-dataview.scss

/*
 *  Application dataview
 */

@mixin iconview-create-icon($cls, $index, $iconsize) {
  .x-dataview-item .icon.#{$cls}-#{$index} {
    background-position: 0 -1 * $index * $iconsize;
  }

  .x-dataview-item {
    &.x-item-selected,
    &.x-item-pressed {
      .icon.#{$cls}-#{$index} {
        background-position: -1 * $iconsize -1 * $index * $iconsize;
      }
    }
  }
}

@mixin bullet-icon($index) {
  @include iconview-create-icon(bullet, $index, $bullet-icon-size);
}

@mixin numbering-icon($index) {
  @include iconview-create-icon(numbering, $index, $numbering-icon-size);
}

@mixin outline-icon($index) {
  @include iconview-create-icon(outline, $index, $outline-icon-size);
}

.x-dataview {
  &.icon-view {
    .x-dataview-inner.x-scroll-scroller {
      width: auto !important;
      height: auto !important;

      .x-dataview-container {
        margin-top: 12px;
        margin-left: 12px;
      }
    }

    .x-dataview-item {
      display: inline-block;

      &.x-item-pressed,
      &.x-item-selected {
        .item-inner {
          @include background-image(linear-gradient(top, color_stops(lighten($list-active-color, 5%), darken($list-active-color, 10%))));
          @include color-by-background($list-active-color);
        }
      }

      .item-inner {
        display: inline-block;
        width: 77px;
        height: 77px;
        border: 1px solid darken($base-color, 6%);
        background: lighten($base-color, 100%);
        margin: -1px;

        &.top-left {
          @include border-top-left-radius($form-fieldset-radius);
        }

        &.top-right {
          @include border-top-right-radius($form-fieldset-radius);
        }

        &.bottom-left {
          @include border-bottom-left-radius($form-fieldset-radius);
        }

        &.bottom-right {
          @include border-bottom-right-radius($form-fieldset-radius);
        }
      }
    }

    &.bullets {
      @include bullet-icon(0);
      @include bullet-icon(1);
      @include bullet-icon(2);
      @include bullet-icon(3);
      @include bullet-icon(4);
      @include bullet-icon(5);
      @include bullet-icon(6);
      @include bullet-icon(7);

      .item-inner {
        .text {
          margin-top: 1.4em;
          text-align: center;
        }

        .icon {
          width: $bullet-icon-size;
          height: $bullet-icon-size;
          margin: 1.4em auto;
          background-image: url($icons-bullets-image);
          background-size: $bullet-icon-image-width $bullet-icon-image-height;
        }
      }
    }

    &.numbering {
      @include numbering-icon(0);
      @include numbering-icon(1);
      @include numbering-icon(2);
      @include numbering-icon(3);
      @include numbering-icon(4);
      @include numbering-icon(5);
      @include numbering-icon(6);
      @include numbering-icon(7);

      .item-inner {
        .text {
          position: relative;
          top: 1.4em;
          text-align: center;
        }

        .icon {
          width: $numbering-icon-size;
          height: $numbering-icon-size;
          margin: 0 auto;
          background-image: url($icons-numbering-image);
          background-size: $numbering-icon-image-width $numbering-icon-image-height;
        }
      }
    }

    &.outline {
      @include outline-icon(0);
      @include outline-icon(1);
      @include outline-icon(2);

      .item-inner {
        .text {
          position: relative;
          top: 1.4em;
          text-align: center;
        }

        .icon {
          width: $outline-icon-size;
          height: $outline-icon-size;
          margin: 0 auto;
          background-image: url($icons-outline-image);
          background-size: $outline-icon-image-width $outline-icon-image-height;
        }
      }
    }
  }
}