1 files changed, 272 insertions, 0 deletions
diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss
new file mode 100644
index 0000000000..ed068a5efc
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/grid/grid.scss
@@ -0,0 +1,272 @@
+$v-grid-border: 1px solid #ddd !default;
+$v-grid-cell-vertical-border: $v-grid-border !default;
+$v-grid-cell-horizontal-border: $v-grid-cell-vertical-border !default;
+$v-grid-cell-focused-border: 1px solid !default;
+$v-grid-header-border: $v-grid-border !default;
+$v-grid-footer-border: $v-grid-header-border !default;
+
+$v-grid-row-height: round($v-font-size * 1.5) !default;
+$v-grid-row-background-color: #fff !default;
+$v-grid-row-stripe-background-color: darken($v-grid-row-background-color, 5%) !default;
+$v-grid-row-selected-background-color: darken($v-grid-row-background-color, 25%) !default;
+$v-grid-row-focused-background-color: null !default;
+
+$v-grid-header-row-height: null !default;
+$v-grid-header-font-size: $v-font-size !default;
+$v-grid-header-background-color: $v-grid-row-background-color !default;
+
+$v-grid-footer-row-height: $v-grid-header-row-height !default;
+$v-grid-footer-font-size: $v-grid-header-font-size !default;
+$v-grid-footer-background-color: $v-grid-header-background-color !default;
+
+$v-grid-cell-padding-horizontal: 5px !default;
+
+$v-grid-editor-background-color: $v-grid-row-background-color !default;
+
+
+@import "../escalator/escalator";
+
+
+@mixin base-grid($primaryStyleName: v-grid) {
+
+  @include base-escalator($primaryStyleName: $primaryStyleName, $background-color: $v-grid-row-background-color);
+
+  .#{$primaryStyleName} {
+    outline: none;
+  }
+
+  .#{$primaryStyleName}-scroller-vertical,
+  .#{$primaryStyleName}-scroller-horizontal {
+    border: $v-grid-border;
+  }
+
+  .#{$primaryStyleName}-scroller-vertical {
+    border-left: none;
+  }
+
+  .#{$primaryStyleName}-scroller-horizontal {
+    border-top: none;
+  }
+
+  .#{$primaryStyleName}-tablewrapper {
+    border: $v-grid-border;
+  }
+
+  // Common cell styles
+
+  .#{$primaryStyleName}-cell {
+    background-color: $v-grid-row-background-color;
+    padding: 0 $v-grid-cell-padding-horizontal;
+    line-height: $v-grid-row-height;
+    text-overflow: ellipsis;
+
+    > * {
+      line-height: $v-line-height;
+      vertical-align: middle;
+    }
+
+    // Force div elements to inline-blocks by default to enable vertical centering
+    > div {
+      display: inline-block;
+    }
+
+    &.frozen {
+      @include box-shadow(1px 0 2px rgba(0,0,0,.1));
+      border-right: $v-grid-cell-vertical-border;
+
+      @if $v-grid-cell-vertical-border and $v-grid-cell-vertical-border != none {
+        + th,
+        + td {
+          border-left: none;
+        }
+      }
+    }
+  }
+
+  // Rows
+
+  .#{$primaryStyleName}-row > td {
+    border-left: $v-grid-cell-vertical-border;
+    border-bottom: $v-grid-cell-horizontal-border;
+
+    &:first-child {
+      border-left: none;
+    }
+  }
+
+  .#{$primaryStyleName}-row-stripe > td {
+    background-color: $v-grid-row-stripe-background-color;
+  }
+
+  .#{$primaryStyleName}-row-selected > td {
+    background: $v-grid-row-selected-background-color;
+  }
+
+  .#{$primaryStyleName}-row-focused > td {
+    background-color: $v-grid-row-focused-background-color;
+  }
+
+  // Header
+
+  .#{$primaryStyleName}-header {
+    th {
+      position: relative;
+      background-color: $v-grid-header-background-color;
+      font-size: $v-grid-header-font-size;
+      font-weight: inherit;
+      border-left: $v-grid-header-border;
+      border-bottom: $v-grid-header-border;
+      line-height: $v-grid-header-row-height;
+      text-align: left;
+
+      &:first-child {
+        border-left: none;
+      }
+    }
+
+    .sort-asc,
+    .sort-desc {
+      padding-right: round($v-grid-header-font-size * 1.2) + $v-grid-cell-padding-horizontal;
+
+      &:after {
+        font-family: FontAwesome, sans-serif;
+        content: "\f0de" " " attr(sort-order);
+        position: absolute;
+        right: $v-grid-cell-padding-horizontal;
+        font-size: round($v-grid-header-font-size * 0.85);
+      }
+    }
+
+    .sort-desc:after {
+      content: "\f0dd" " " attr(sort-order);
+    }
+  }
+
+  // Footer
+
+  .#{$primaryStyleName}-footer {
+    td {
+      background-color: $v-grid-footer-background-color;
+      font-size: $v-grid-footer-font-size;
+      font-weight: inherit;
+      border-left: $v-grid-footer-border;
+      border-top: $v-grid-footer-border;
+      border-bottom: none;
+      line-height: $v-grid-footer-row-height;
+
+      &:first-child {
+        border-left: none;
+      }
+    }
+  }
+
+  // Decorative elements
+
+  .#{$primaryStyleName}-header-deco {
+    border-top: $v-grid-header-border;
+    border-right: $v-grid-header-border;
+    background-color: $v-grid-header-background-color;
+  }
+
+  .#{$primaryStyleName}-footer-deco {
+    border-bottom: $v-grid-footer-border;
+    border-right: $v-grid-footer-border;
+    background-color: $v-grid-footer-background-color;
+  }
+
+  .#{$primaryStyleName}-horizontal-scrollbar-deco {
+    background-color: $v-grid-footer-background-color;
+    border: $v-grid-footer-border;
+    border-top: none;
+  }
+
+  // Focused cell style (common for all cells)
+
+  .#{$primaryStyleName}-cell-focused {
+    position: relative;
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border: $v-grid-cell-focused-border;
+      display: none;
+      pointer-events: none;
+    }
+    
+    // IE 8-10 apply "pointer-events" only to SVG elements. 
+    // Using an empty SVG instead of an empty text node makes IE
+    // obey the "pointer-events: none" and forwards click events 
+    // to the underlying element. The data decodes to:
+    // <svg xmlns="http://www.w3.org/2000/svg"></svg>
+    .ie8 &:before,
+    .ie9 &:before,
+    .ie10 &:before {
+      content: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==);
+    } 
+  }
+
+  .#{$primaryStyleName}:focus .#{$primaryStyleName}-cell-focused:before {
+    display: block;
+  }
+
+  .#{$primaryStyleName}.v-disabled:focus .#{$primaryStyleName}-cell-focused:before {
+    // Disabled Grid should not show cell focus outline
+    display: none;
+  }
+
+  // Editor
+
+  .#{$primaryStyleName}-editor {
+    // TODO should be fixed in offset calculations
+    margin-top: -1px;
+    position: absolute;
+    overflow-y: visible;
+    background: $v-grid-editor-background-color;
+    @include box-shadow(0 0 10px 1px rgba(0,0,0,.3));
+
+    > div {
+      position: absolute;
+      @include box-sizing(border-box);
+      border-left: $v-grid-cell-vertical-border;
+
+      &:first-child {
+        border-left: none;
+      }
+
+      .v-textfield,
+      .v-datefield,
+      .v-filterselect {
+        min-width: 100%;
+        max-width: 100%;
+        min-height: 100%;
+        max-height: 100%;
+        border: none;
+        border-radius: 0;
+      }
+
+      .v-textfield-focus,
+      .v-filterselect-focus input {
+        position: relative;
+        z-index: 1;
+      }
+    }
+  }
+
+  .#{$primaryStyleName}-editor-save,
+  .#{$primaryStyleName}-editor-cancel {
+    position: absolute;
+    // TODO remove the inline size from the widgets
+    width: auto !important;
+    height: auto !important;
+  }
+
+  // Renderers
+
+  .#{$primaryStyleName}-cell > .v-progressbar {
+    width: 100%;
+  }
+}