table_beet 0.0.1

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

@@ -0,0 +1,80 @@
+// ===================================
+//             Tables
+// ===================================
+
+
+
+
+table {
+  border:1px solid $border-color;
+  width:100%;
+  max-width:100%;
+  padding:0;
+  margin:0;
+  font-size:1em;
+  &.responsive {
+    table-layout:fixed;
+  }
+  // styles for cells
+  th, td {
+    padding:$gutter;
+    background:darken(white, 1%);
+    white-space:normal;
+    word-wrap:break-word;
+    text-align:left;
+  }
+  td {
+    font-size:0.9em;
+  }
+  // every other row
+  tr:nth-child(even) {
+    th, td {
+      background:darken(white, 5%);
+    }
+  }
+  // styles for thead
+  thead {
+    tr {
+      th {
+        font-size:1.1em;
+        font-weight:bold;
+      }
+      th, td {
+        background:$button-color;
+        color:$button-text;
+      }
+      td {
+        font-weight:normal;
+      }
+    }
+  }
+  tr {
+    td {
+
+    }
+  }
+  // styles for tbody
+  tbody {
+    tr {
+      th {
+        font-size:0.9em;
+      }
+      td {
+        
+      }
+    }
+  }
+  // styles for tfoot
+  tfoot {
+    tr {
+      th {
+        font-size:1em;
+      }
+      td {
+        background:lighten(gray, 37.5%);
+        color:darken(gray, 15%);
+        font-size:0.8em;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,137 @@
+// ===================================
+//         GroundworkCSS Tabs
+// ===================================
+
+
+
+
+.tabs {
+  position:relative;
+  > ul {
+    display:block;
+    width:100%;
+    margin:0;
+    padding:0;
+    list-style:none;
+    &:after {
+      content:'';
+      display:block;
+      clear:both;
+    }
+    li {
+      display:block;
+      float:left;
+      margin:0 2px;
+      &.pull-right  { float:right; }
+      &.pull-left   { float:left; }
+      &:first-child {
+        margin-left:0;
+        a {
+          &:before {
+            display:none;
+          }
+        }
+      }
+      a {
+        display:block;
+        position:relative;
+        width:100%;
+        word-wrap:break-word;
+        padding:0.25em 1em;
+        background:$button-color;
+        border:1px solid $button-color;
+        color:$button-text;
+        font-weight:bold;
+        font-size:1em;
+        text-decoration:none;
+        text-align:center;
+        cursor:pointer;
+        line-height:1.5;
+        height:2em;
+        @include transition(background-color 0.25s ease-out);
+        @include rounded($radius $radius 0 0);
+        &:hover, &:focus {
+          background:$button-active;
+          border:1px solid $button-active;
+          color:$button-text;
+          text-decoration:none;
+          &:before {
+            box-shadow:2px 1px 0 $button-active;
+          }
+          &:after {
+            box-shadow:-2px 1px 0 $button-active;
+          }
+        }
+        &.active, &.active:hover, &.active:focus {
+          background:$button-active;
+          border:1px solid $button-active;
+          color:$button-text;
+          z-index:2;
+          @include filter-shadow(rgba(0,0,0,0.25), 5px, 0, 0);
+          &:before {
+            box-shadow:2px 1px 0 $button-active;
+          }
+          &:after {
+            box-shadow:-2px 1px 0 $button-active;
+          }
+        }
+        &.disabled {
+          background:lighten(gray, 15%);
+          color:lighten(gray, 35%);
+          cursor:not-allowed;
+          border-color:lighten(gray, 15%);
+          &:before {
+            box-shadow:2px 1px 0 lighten(gray, 15%);
+          }
+          &:after {
+            box-shadow:-2px 1px 0 lighten(gray, 15%);
+          }
+          &:hover, &:focus {
+            background:lighten(gray, 15%);
+            border:1px solid lighten(gray, 15%);
+            color:lighten(gray, 35%);
+            &:before {
+              box-shadow:2px 1px 0 lighten(gray, 15%);
+            }
+            &:after {
+              box-shadow:-2px 1px 0 lighten(gray, 15%);
+            }
+          }
+        }
+        &:before, &:after {
+          position:absolute;
+          bottom:-1px;
+          width:6px;
+          height:6px;
+          content:'';
+        }
+        &:before {
+          left:-6px;
+          border-bottom-right-radius:6px;
+          border-width:0 1px 1px 0;
+          box-shadow:2px 1px 0 $button-color;
+        }
+        &:after {
+          right:-6px;
+          border-bottom-left-radius:6px;
+          border-width:0 0 1px 1px;
+          box-shadow:-2px 1px 0 $button-color;
+        }
+      }
+    }
+  }
+  > div {
+    display:none;
+    padding:$gutter * 2;
+    *:first-child {
+      margin-top:0;
+    }
+    *:last-child {
+      margin-bottom:0;
+    }
+    &.active {
+      display:block;
+      border:1px solid $button-active;
+    }
+  }
+}

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

@@ -0,0 +1,161 @@
+// ===================================
+//             Tooltips
+// ===================================
+
+
+
+
+.tooltip:not([title]):not([role~=tooltip]) {
+  position:relative;
+  padding:5px 15px;
+  background:$button-color;
+  border:1px solid $border-color;
+  @include rounded($radius);
+  @include filter-shadow(rgba(0,0,0,0.15), 8px, 3px, 3px); // color, blur, x, y
+  font-size:13px;
+  color:$button-text;
+  &:after {
+    content:'';
+    display:block;
+    position:absolute;
+    margin-top:5px;
+    width:0;
+    height:0;
+    border-top:6px solid $button-color;
+    border-right:6px solid transparent;
+    border-left:6px solid transparent;
+  }
+  &:before {
+    content:'';
+    display:block;
+    position:absolute;
+    bottom:-7px;
+    left:12px;
+    border-top:6px solid $border-color;
+    border-right:9px solid transparent;
+    border-left:9px solid transparent;
+  }
+  a.close {
+    display:block;
+    width:17px;
+    height:17px;
+    line-height:17px;
+    padding:0;
+    margin:0 -10px 5px 5px;
+    text-align:center;
+    float:right;
+    color:$button-text;
+    border:1px solid lighten($button-color, 15%);
+    background:white;
+    text-decoration:none;
+    font-size:12px;
+    @include rounded($radius / 2);
+    i {
+      color:inherit;
+    }
+  }
+}
+#tooltip {
+  display:block;
+  max-width:640px;
+  position:absolute;
+  z-index:97;
+  padding:5px 15px;
+  background:$button-color;
+  border:1px solid $border-color;
+  @include rounded($radius);
+  @include filter-shadow(rgba(0,0,0,0.15), 8px, 3px, 3px); // color, blur, x, y
+  font-size:13px;
+  text-transform:normal;
+  color:$button-text;
+  &:after, &:before {
+    content:'';
+    position:absolute;
+    z-index:98;
+    width:0;
+    height:0;
+  }
+  &:after {
+    z-index:99;
+  }
+  &.top.right {
+    &:after {
+      top:auto;
+      right:12px;
+      bottom:-6px;
+      left:auto;
+      border-top:6px solid $button-color;
+      border-right:6px solid transparent;
+      border-left:6px solid transparent;
+    }
+    &:before {
+      top:auto;
+      right:10px;
+      bottom:-7px;
+      left:auto;
+      border-top:6px solid $border-color;
+      border-right:8px solid transparent;
+      border-left:8px solid transparent;
+    }
+  }
+  &.top.left {
+    &:after {
+      top:auto;
+      right:auto;
+      bottom:-6px;
+      left:12px;
+      border-top:6px solid $button-color;
+      border-right:6px solid transparent;
+      border-left:6px solid transparent;
+    }
+    &:before {
+      top:auto;
+      right:auto;
+      bottom:-7px;
+      left:10px;
+      border-top:6px solid $border-color;
+      border-right:8px solid transparent;
+      border-left:8px solid transparent;
+    }
+  }
+  &.bottom.right {
+    &:after {
+      top:-6px;
+      right:12px;
+      bottom:auto;
+      left:auto;
+      border-right:6px solid transparent;
+      border-bottom:6px solid $button-color;
+      border-left:6px solid transparent;
+    }
+    &:before {
+      top:-7px;
+      right:10px;
+      bottom:auto;
+      left:auto;
+      border-right:8px solid transparent;
+      border-bottom:6px solid $border-color;
+      border-left:8px solid transparent;
+    }
+  }
+  &.bottom.left {
+    &:after {
+      top:-6px;
+      right:auto;
+      bottom:auto;
+      left:12px;
+      border-right:6px solid transparent;
+      border-bottom:6px solid $button-color;
+      border-left:6px solid transparent;
+    }
+    &:before {
+      top:-7px;
+      right:auto;
+      bottom:auto;
+      left:10px;
+      border-right:8px solid transparent;
+      border-bottom:6px solid $border-color;
+      border-left:8px solid transparent;
+    }
+  }
+}

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

@@ -0,0 +1,263 @@
+// ===================================
+//      GroundworkCSS Typography
+// ===================================
+
+
+
+
+body {
+  font-family:$font-family;
+  font-size:$font-size;
+  line-height:1.2;
+  color:$font-color;
+}
+::selection {
+  background:$selection-color;
+  color:$selection-text;
+}
+::-moz-selection {
+  background:$selection-color;
+  color:$selection-text;
+}
+// * {
+//   outline:none;
+//   &:focus {
+//     @include filter-shadow(rgba(0,0,0,0.35), 15px, 0, 0);
+//   }
+// }
+a, a:visited {
+  color:$link-color;
+  @include transition(color 0.25s);
+  &:hover, &:focus {
+    text-decoration:underline;
+  }
+}
+h1.heading {
+  font-size:3em;
+  text-shadow:0 0 5px rgba(0,0,0,0.25);
+  a, a:visited {
+    color:$font-color;
+    text-decoration:none;
+    a:hover, a:focus {
+      color:$font-color;
+      text-decoration:none;
+    }
+  }
+  sup {
+    font-size:0.35em;
+  }
+  .logo {
+    display:inline-block;
+    width:1em;
+    height:1em;
+    position:relative;
+    top:0.1em;
+    background:transparent url('../images/groundwork-logo.svg') bottom right no-repeat;
+    background-size:100% 100%;
+    text-indent:-9999em;
+    overflow:hidden;
+    @include filter-shadow(rgba(0,0,0,0.25), 5px, 0, 0); // color, blur, x, y
+  }
+}
+h1, h2, h3, h4, h5, h6 {
+  @include font-stack('Average Sans');
+  line-height:1.1;
+  margin-bottom:15px;
+}
+h1 {
+  font-weight:200;
+  font-size:$font-size * 2.3333333333;
+}
+h2 {
+  font-weight:200;
+  font-size:$font-size * 2;
+}
+h3 {
+  font-weight:500;
+  font-size:$font-size * 1.5;
+}
+h4 {
+  font-weight:500;
+  font-size:$font-size * 1.3333333333;
+}
+h5 {
+  font-weight:900;
+  font-size:$font-size * 1.1666666667;
+}
+h6 {
+  font-weight:900;
+  font-size:$font-size * 1.1666666667;
+  text-transform:uppercase;
+}
+p, ul, ol, dl {
+  margin-bottom:10px;
+  font-weight:normal;
+  font-size:1em;
+  line-height:1.6;
+}
+ul, ol {
+  margin-left:20px;
+}
+ul {
+  list-style-type:circle;
+}
+ul.list {
+  list-style:none;
+  margin-left:0;
+  li {
+    &:before {
+      content:'\f00c';
+      display: inline-block;
+      width: 1.1em;
+      margin-right: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;
+    }
+  }
+}
+ol.list {
+  counter-reset:li;
+  list-style:none;
+  margin-left:1.5em;
+}
+ol.list > li {
+    position:relative;
+    padding:2px 6px 0;
+}
+ol.list > li:before {
+    content:counter(li);
+    counter-increment:li;
+    position:absolute;
+    top:2px;
+    left:-2em;
+    width:2em;
+    text-align:center;
+    padding:2px;
+    font-size:0.8em;
+    color:$background-color;
+    background:$font-color;
+    font-weight:bold;
+    @include rounded(4px);
+}
+dl {
+  dt {
+    font-weight:bold;
+  }
+  dd {
+    padding-left:1em;
+    margin-bottom:$gutter;
+  }
+}
+blockquote {
+  padding:1.3em 4em 1em;
+  color:$font-color;
+  font-size:$font-size*1.15;
+  font-weight:bold;
+  line-height:1.4;
+  position:relative;
+  z-index:0;
+  &:before {
+    content:'\201C';
+    color:darken($background-color, 20%);
+    font-size:6em;
+    display:block;
+    position:absolute;
+    top:-0.15em;
+    left:0.1em;
+    z-index:-1;
+  }
+  &:after {
+    content:'\201D';
+    color:darken($background-color, 20%);
+    font-size:6em;
+    display:block;
+    position:absolute;
+    top:-0.15em;
+    right:0.1em;
+    z-index:-1;
+  }
+}
+cite {
+  display:block;
+  position:relative;
+  left:-1em;
+  margin-top:0.25em;
+  font-size:0.95em;
+  font-weight:normal;
+  font-style:normal;
+  color:lighten($font-color, 15%);
+  &:before {
+    content:'\2014';
+  }
+}
+small, .small { font-size:0.8em; }
+big, .big, .large { font-size:1.5em; }
+em, .italic { font-style:italic; }
+b, strong, .bold, .strong { font-weight:900; }
+sup { font-size:0.8em; }
+sub { font-size:0.8em; }
+
+code {
+	color:       white;
+	white-space: pre-wrap;
+	word-wrap:   break-word;
+	min-height:  1em;
+	display:     inline-block;
+	color:       white;
+	background:  lighten(gray, 5%);
+	border:      none;
+	padding:     0 0.3em;
+	margin:      0 0.2em;
+	font-weight: normal;
+	line-height: inherit;
+}
+
+pre {
+	color:         white;
+	background:    #050505;
+	font-size:     0.9em;
+	padding:       0.5em;
+	display:       block;
+  margin-bottom:$gutter;
+	border-left:   2.5em solid gray;
+	counter-reset: linenumber;
+	code {
+		background: inherit;
+		margin:     0;
+		padding:    0;
+		&:before {
+			text-align:        right;
+			color:             white;
+			width:             2em;
+			display:           inline-block;
+			counter-increment: linenumber;
+			content:           counter(linenumber) ".";
+			position:          absolute;
+			left:              1.2em;
+		}
+	}
+}
+
+.error, .invalid {
+  color:$error-color;
+}
+.success, .valid {
+  color:$success-color;
+}
+// responsive headings
+.js {
+  .responsive {
+    @include transition(font 0.25s);
+    white-space:nowrap;
+  }
+}

data/lib/table_beet/formatters/html_template/data/scss/_ui-elements.scss

@@ -0,0 +1,10 @@
+// ===================================
+//             UI Elements
+// ===================================
+
+
+
+
+// ui elements
+@import "messages";
+@import "callouts";