table_beet 0.0.1

data/lib/table_beet/formatters/html_template/data/scss/_mixins.scss

@@ -0,0 +1,197 @@
+// =============================================
+//        SCSS mixins by Gary Hepting 
+//          Last Updated:2013-1-21
+// =============================================
+
+
+
+
+// ====================
+//   custom functions
+// ====================
+
+// convert x,y to approximate degrees
+@function degrees($x, $y) {
+  @if ($x gt 0) {
+    @if ($y gt 0) {
+      @return 45;
+    } @elseif ($y == 0) {
+      @return 90;
+    } @else {
+      @return 315;
+    }
+  } @elseif ($x lt 0) {
+    @if ($y gt 0) {
+      @return 135;
+    } @elseif ($y == 0) {
+      @return 270;
+    } @else {
+      @return 225;
+    }
+  } @else {
+    @return 0;
+  }
+}
+
+// strip unit of measurement from a value
+@function numericvalue($val){
+  $unit: unit($val);
+  $number: $val / ($val * 0 + 1);
+  @return $number;
+}
+
+// ====================
+//      utilities
+// ====================
+
+// inline image with fallback support for IE 7-
+@mixin data-image($file) {
+  background-image:url('../images/#{$file}');       // fallback
+  background-image:inline-image($file);             // data URI
+  *background-image:url('../images/#{$file}');      // IE7- hack
+}
+
+// // vertical gradient with support for IE 6-8 & 10
+// @mixin vertical-gradient($startColor, $endColor) {
+//   background:$endColor;
+//   @include background-image(linear-gradient($startColor, $endColor));
+//   @include filter-gradient($startColor, $endColor);
+// }
+
+// // horizontal gradient with support for IE 6-8 & 10
+// @mixin horizontal-gradient($startColor, $endColor) {
+//   background:$endColor;
+//   @include background-image(linear-gradient(left, $startColor, $endColor));
+//   @include filter-gradient($startColor, $endColor, 1);
+// }
+
+// vertical gradient
+@mixin gradient($startColor:$white, $endColor:$gray-2) {
+  background:$startColor; // fallback
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}',GradientType=0 ); // IE 6-8
+  background:-ms-linear-gradient(top, $startColor 0%, $endColor 100%); // IE 10+
+  background:-o-linear-gradient(top, $startColor 0%, $endColor 100%); // Opera
+  background:-moz-linear-gradient(top, $startColor 0%, $endColor 100%); // Firefox
+  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $endColor));  // Webkit (Safari, Chrome, other)
+  background:-webkit-linear-gradient(top, $startColor 0%, $endColor 100%);  // Webkit (Safari, Chrome, other)
+  background:linear-gradient(to bottom, $startColor 0%, $endColor 100%);
+}
+
+// box shadow
+@mixin drop-shadow($color:rgba(0,0,0,0.2), $blur:0, $x:0, $y:0) { // color, blur, x, y
+  -ms-box-shadow:$x $y $blur $color; // IE10+
+  @if ($x == 0 and $y == 0) { // non directional glow
+    filter: Glow(color=#{ie-hex-str($color)},strength=#{numericvalue($blur)});
+    -ms-filter: glow(color=#{ie-hex-str($color)},strength=#{numericvalue($blur)});
+  } @else {
+    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=#{numericvalue($blur)}, Direction=#{degrees($x, $y)}, Color='#{ie-hex-str($color)}')"; // IE8
+    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=#{numericvalue($blur)}, Direction=#{degrees($x, $y)}, Color='#{ie-hex-str($color)}'); // IE7-
+  }
+  -o-box-shadow:$x $y $blur $color; // Opera
+  -moz-box-shadow:$x $y $blur $color; // Firefox
+  -webkit-box-shadow:$x $y $blur $color; // Webkit (Safari, Chrome, other)
+  box-shadow:$x $y $blur $color;
+}
+// filter drop shadow
+@mixin filter-shadow($color:rgba(0,0,0,0.2), $blur:0, $x:0, $y:0) { // color, blur, x, y
+  -ms-filter: drop-shadow($x $y $blur $color); // IE9+
+  -o-filter: drop-shadow($x $y $blur $color); // Opera
+  -moz-filter: drop-shadow($x $y $blur $color); // Firefox
+  -webkit-filter: drop-shadow($x $y $blur $color); // Webkit (Safari, Chrome, other)
+  filter: drop-shadow($x $y $blur $color);
+}
+
+// inner box shadow
+@mixin inner-shadow($color, $blur:0, $x:0, $y:0) { // color, blur, x, y
+  -ms-box-shadow:inset $x $y $blur $color; // IE10+
+  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=#{$blur}, Direction=135, Color='#{ie-hex-str($color)}')"; // IE8
+  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=#{$blur}, Direction=135, Color='#{ie-hex-str($color)}'); // IE7-
+  -o-box-shadow:inset $x $y $blur $color; // Opera
+  -moz-box-shadow:inset $x $y $blur $color; // Firefox
+  -webkit-box-shadow:inset $x $y $blur $color; // Webkit (Safari, Chrome, other)
+  box-shadow:inset $x $y $blur $color;
+}
+
+// transition
+@mixin transition($transition:all 0.2s) {
+  -ms-transition:$transition; // IE10+
+  -o-transition:$transition; // Opera
+  -moz-transition:$transition; // Firefox
+  -webkit-transition:$transition; // Webkit (Safari, Chrome, other)
+  transition:$transition;
+}
+
+// border radius
+@mixin rounded($radius:4px) {
+  -ms-border-radius:$radius; // IE10+
+  -o-border-radius:$radius; // Opera
+  -moz-border-radius:$radius; // Firefox
+  -webkit-border-radius:$radius; // Webkit (Safari, Chrome, other)
+  border-radius:$radius;
+}
+
+// rotate
+@mixin rotate($deg:0deg){
+  -ms-transform:rotate($deg); // IE10+
+  -o-transform:rotate($deg); // Opera
+  -moz-transform:rotate($deg); // Firefox
+  -webkit-transform:rotate($deg); // Webkit (Safari, Chrome, other)
+  transform:rotate($deg);
+}
+
+// scale
+@mixin scale($scale:0){
+  -ms-transform:scale($scale); // IE10+
+  -o-transform:scale($scale); // Opera
+  -moz-transform:scale($scale); // Firefox
+  -webkit-transform:scale($scale); // Webkit (Safari, Chrome, other)
+  transform:scale($scale);
+}
+
+// translate
+@mixin translate($x:0, $y:0){
+  -ms-transform:translate($x,$y); // IE10+
+  -o-transform:translate($x,$y); // Opera
+  -moz-transform:translate($x,$y); // Firefox
+  -webkit-transform:translate($x,$y); // Webkit (Safari, Chrome, other)
+  transform:translate($x,$y);
+}
+
+// transform (translate, rotate & scale)
+@mixin transform($x:0, $y:0, $scale:0, $deg:0deg){
+  -ms-transform:translate($x,$y) rotate($deg) scale($scale); // IE10+
+  -o-transform:translate($x,$y) rotate($deg) scale($scale); // Opera
+  -moz-transform:translate($x,$y) rotate($deg) scale($scale); // Firefox
+  -webkit-transform:translate($x,$y) rotate($deg) scale($scale); // Webkit (Safari, Chrome, other)
+  transform:translate($x,$y) rotate($deg) scale($scale);
+}
+
+// transform origin
+@mixin transform-origin($x:0, $y:0){
+  -ms-transform-origin:$x $y; // IE10+
+  -o-transform-origin:$x $y; // Opera
+  -moz-transform-origin:$x $y; // Firefox
+  -webkit-transform-origin:$x $y; // Webkit (Safari, Chrome, other)
+  transform-origin:$x $y;
+}
+
+
+
+
+// ====================
+//       fonts 
+// ====================
+
+// font stacks
+@mixin font-stack($primaryFont:"", $secondaryFont:"", $fallbackFonts:"Arial, Helvetica, Geneva, sans-serif") {
+  /* might add inline-font-files() at some point */
+  @if $secondaryFont != "" {
+    font-family:#{$primaryFont}, #{$secondaryFont}, #{$fallbackFonts};
+  } @else {
+    @if $primaryFont != "" {
+      font-family:#{$primaryFont}, #{$fallbackFonts};
+    } @else {
+      font-family:#{$fallbackFonts};
+    }
+  }
+}

data/lib/table_beet/formatters/html_template/data/scss/_mobile-reset.scss

@@ -0,0 +1,11 @@
+// ===================================
+//       GroundworkCSS Components
+// ===================================
+
+
+
+
+.ios, .android {
+  // disable font size overrides (on iOS devices)
+  -webkit-text-size-adjust:none;
+}

data/lib/table_beet/formatters/html_template/data/scss/_modals.scss

@@ -0,0 +1,101 @@
+// ===================================
+//             Modals
+// ===================================
+
+
+
+
+// .modal-ready {
+//   body, div.modal {
+//     @include transition(0.25s all ease-out);
+//   }
+//   #overlay {
+//     @include transition(0.2s all ease-in);
+//   }
+// }
+
+.modal-active {
+  body {
+    overflow:hidden;
+  }
+  .container {
+    // -webkit-filter:blur(3px);
+    // -moz-filter:blur(3px);
+    // -ms-filter:blur(3px);
+    // -o-filter:blur(3px);
+    // filter:blur(3px);
+  }
+  #overlay {
+    visibility:visible;
+    opacity:1;
+  }
+  div.modal.active {
+    visibility:visible;
+    opacity:1;
+  }
+}
+
+#overlay {
+  visibility:hidden;
+  opacity:0;
+  position:fixed;
+  top:0;
+  left:0;
+  bottom:0;
+  right:0;
+  z-index:98;
+  width:100%;
+  height:100%;
+  @include inner-shadow(#000, 200px, 0, 0);
+  @include gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.9));
+}
+
+div.modal {
+  visibility:hidden;
+  opacity:0;
+  position:fixed;
+  top:10%;
+  left:10%;
+  z-index:99;
+  max-width:80%;
+  max-height:80%;
+  overflow:hidden;
+  padding:10px;
+  background:#222;
+  background:rgba(0,0,0,0.4);
+  @include drop-shadow(rgb(50,50,50), 50px, 0, 0);
+  @include rounded($radius);
+  &.iframe {
+    overflow:hidden;
+    width:80%;
+    height:80%;
+  }
+  .modal-content {
+    position:relative;
+    overflow:auto;
+    width:100%;
+    height:100%;
+    background:#fff;
+    padding:25px;
+    @include rounded($radius);
+  }
+  .close, .fullscreen {
+    position:absolute;
+    z-index:100;
+    font-size:1.25em;
+    top:10px;
+    right:10px;
+    padding:5px;
+    cursor:pointer;
+    color:#888;
+    background:#fff;
+    @include rounded($radius);
+    &:hover, &:focus {
+      color:black;
+    }
+  }
+  .fullscreen {
+    right:auto;
+    left:10px;
+  }
+}

data/lib/table_beet/formatters/html_template/data/scss/_navigation.scss

@@ -0,0 +1,284 @@
+// ===================================
+//             Navigation
+// ===================================
+
+
+
+
+nav {
+  ul {
+    display:block;
+    list-style:none;
+    margin:0;
+    padding:0;
+    li {
+      display:block;
+      position:relative;
+      a, a:visited {
+        display:block;
+        width:100%;
+        word-wrap:break-word;
+        padding:0.25em 1em;
+        background:$button-color;
+        border:1px solid $border-color;
+        color:$button-text;
+        font-weight:bold;
+        font-size:1em;
+        text-decoration:none;
+        text-align:center;
+        cursor:pointer;
+        line-height:1.5;
+        @include transition(background-color 0.25s ease-out);
+        &:hover, &:focus {
+          background:$button-active;
+          border:1px solid $border-color;
+          text-decoration:none;
+        }
+        &.active {
+          &:hover, &:focus {
+            background:$button-active;
+          }
+        }
+      }
+      &.menu {
+        > a {
+          &:after {
+            content:'\f0d7'; // \f0c9
+            display: inline-block;
+            width: 1.1em;
+            margin-left:0.25em;
+            font-family: FontAwesome;
+            font-weight: normal;
+            font-style: normal;
+            font-size:1.1em;
+            text-decoration: inherit;
+            -webkit-font-smoothing: antialiased;
+            line-height: normal;
+            vertical-align: baseline;
+            background-image: none;
+            background-position: 0% 0%;
+            background-repeat: repeat;
+            margin-top: 0;
+          }
+        }
+      }
+      &.on {
+        a {
+          border-bottom-right-radius:0 !important;
+          border-bottom-left-radius:0 !important;
+        }
+        ul {
+          display:block !important;
+        }
+      }
+      &:first-child {
+        a, a:visited {
+          @include rounded($radius $radius 0 0);
+        }
+      }
+      &:last-child {
+        a, a:visited {
+          @include rounded(0 0 $radius $radius);
+        }
+      }
+    }
+    ul {
+      display:none;
+      position:absolute;
+      left:100%;
+      top:-1px;
+      width:auto;
+      z-index:99;
+      li {
+        a, a:visited {
+          @include rounded(0 !important);
+          background:lighten($button-color, 5%);
+          &:hover, &:active {
+            background:lighten($button-active, 5%);
+          }
+        }
+        &:first-child {
+          a, a:visited {
+            @include rounded(0 $radius 0 0 !important);
+          }
+        }
+        &:last-child {
+          a, a:visited {
+            @include rounded(0 0 $radius $radius !important);
+          }
+        }
+      }
+    }
+    // horizontal grid navigation
+    &.row {
+      li {
+        a, a:visited {
+          @include rounded(0);
+        }
+        &:first-child {
+          a, a:visited {
+            @include rounded($radius 0 0 $radius);
+          }
+        }
+        &:last-child {
+          a, a:visited {
+            @include rounded(0 $radius $radius 0);
+          }
+        }
+      }
+      ul {
+        display:none;
+        position:absolute;
+        left:auto;
+        top:auto;
+        min-width:100%;
+        z-index:99;
+        li {
+          a, a:visited {
+            @include rounded(0 !important);
+          }
+          &:last-child {
+            a, a:visited {
+              @include rounded(0 0 $radius $radius !important);
+            }
+          }
+        }
+      }
+    }
+  }
+  // horizontal inline navigation
+  &.inline {
+    width:auto;
+    ul {
+      font-size:0;
+      @include rounded($radius);
+      li {
+        font-size:$font-size;
+        display:inline-block;
+        white-space-collapse:discard;
+        float:none;
+        a, a:visited {
+
+        }
+        &:first-child {
+          a, a:visited {
+            @include rounded($radius 0 0 $radius);
+          }
+        }
+        &:last-child {
+          a, a:visited {
+            @include rounded(0 $radius $radius 0);
+          }
+        }
+        ul {
+          display:none;
+          position:absolute;
+          left:auto;
+          top:auto;
+          min-width:100%;
+          z-index:99;
+          li {
+            display:block;
+            a, a:visited {
+              @include rounded(0 !important);
+            }
+            &:last-child {
+              a, a:visited {
+                @include rounded(0 0 $radius $radius !important);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  // pagination
+  &.pagination {
+    ul {
+      margin:10px auto;
+      display:block;
+      list-style-type:none;
+      text-align:center;
+      li {
+        display:inline-block;
+        @include rounded(4px);
+        padding:0 3px 0 2px;
+        min-width:29px;
+        text-align:center;
+        a {
+          display:block;
+          font-size:1em;
+          line-height:1.5;
+          font-weight:bold;
+          color:$button-text;
+          text-decoration:none;
+          padding:0 3px;
+          @include rounded(4px);
+          &:hover, &:focus {
+            background:$button-active;
+            color:$button-text;
+          }
+        }
+        &.active {
+          a {
+            background:lighten(gray, 15%);
+            border-color:gray;
+            color:lighten(gray, 35%);
+            text-decoration:none;
+            &:hover, &:focus {
+              background:lighten(gray, 15%);
+              border-color:gray;
+              color:lighten(gray, 35%);
+            }
+          }
+        }
+        &.prev, &.next {
+          a {
+            padding:0 4px;
+            background:$button-color;
+            color:#fff;
+            &:hover, &:focus {
+              background:$button-active;
+            }
+          }
+        }
+        &.disabled {
+          a {
+            background:lighten(gray, 15%);
+            border-color:gray;
+            color:lighten(gray, 35%);
+            text-decoration:none;
+            &:hover, &:focus {
+              background:lighten(gray, 15%);
+              border-color:gray;
+              color:lighten(gray, 35%);
+            }
+          }
+        }
+        &:first-child {
+          a, a:visited {
+            @include rounded($radius);
+          }
+        }
+        &:last-child {
+          a, a:visited {
+            @include rounded($radius);
+          }
+        }
+      }
+    }
+  }
+}
+.no-js {
+  nav {
+    ul {
+      li.menu {
+        &:hover, &:focus {
+          ul {
+            display:block !important;
+          }
+        }
+      }
+    }
+  }
+}