init repo

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

@@ -0,0 +1,156 @@
+/*
+ *  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;
+        }
+      }
+    }
+  }
+}