Split

2026-01-11 19:18:40 +00:00 · 2015-12-18 17:40:32 +01:00 · 2015-12-18 17:40:32 +01:00 · 986dde0cc1
commit 986dde0cc1
parent a147a1f08c
22 changed files with 824 additions and 97 deletions
--- a/canvas.scss
+++ b/canvas.scss
@ -0,0 +1,7 @@
+@import "mixin", "color";
+
+canvas {
+    background: #fff;
+    bordeR: 1px solid #000;
+    user-select: none;
+}
--- a/chart/chart.css
+++ b/chart/chart.css
@ -0,0 +1,2 @@
+.chart {
+  background: #fff; }
--- a/chart/chart.scss
+++ b/chart/chart.scss
@ -1,12 +1,3 @@
-.axis path,
-.axis line {
-    fill: none;
-    stroke: #000;
-    shape-rendering: crispEdges;
-}
-
-.line {
-    fill: none;
-    stroke: steelblue;
-    stroke-width: 1.5px;
+.chart {
+    background: #fff;
 }
--- a/chart/chart_area.css
+++ b/chart/chart_area.css
@ -0,0 +1 @@
+/*# sourceMappingURL=chart_area.css.map */
--- a/chart/chart_bar.css
+++ b/chart/chart_bar.css
@ -0,0 +1 @@
+/*# sourceMappingURL=chart_bar.css.map */
--- a/chart/chart_line.css
+++ b/chart/chart_line.css
@ -0,0 +1,66 @@
+svg .axis {
+  font-size: 12px; }
+
+svg .title {
+  font-size: 25px; }
+
+svg .subtitle {
+  font-size: 12px; }
+
+svg .footer {
+  font-size: 12px; }
+
+svg .axis path,
+svg .axis line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges; }
+
+svg .line {
+  fill: none;
+  stroke: steelblue; }
+
+svg .tick > line {
+  opacity: 1; }
+
+svg rect.zoom-panel {
+  cursor: move;
+  fill: none;
+  pointer-events: all; }
+
+svg .dot {
+  stroke-width: 2px;
+  fill: #fff; }
+
+.dataPoint:hover {
+  cursor: pointer; }
+
+svg .dataPoint-dot {
+  stroke-width: 3px;
+  fill: #fff; }
+
+svg .dot:hover {
+  stroke-width: 3px;
+  fill: #000;
+  cursor: pointer; }
+
+.grid .tick {
+  stroke: lightgrey;
+  stroke-opacity: 0.7;
+  shape-rendering: crispEdges; }
+
+.grid path {
+  stroke-width: 0; }
+
+div.charttooltip {
+  color: #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  text-align: left;
+  padding: 5px;
+  font: 12px sans-serif;
+  background: #363636;
+  border: 0px;
+  border-radius: 3px;
+  pointer-events: none; }
--- a/chart/chart_line.scss
+++ b/chart/chart_line.scss
@ -1 +1,81 @@
+svg .axis {
+    font-size: 12px;
+}

+svg .title {
+    font-size: 25px;
+}
+
+svg .subtitle {
+    font-size: 12px;
+}
+
+svg .footer {
+    font-size: 12px;
+}
+
+svg .axis path,
+svg .axis line {
+    fill: none;
+    stroke: #000;
+    shape-rendering: crispEdges;
+}
+
+svg .line {
+    fill: none;
+    stroke: steelblue;
+}
+
+svg .tick > line {
+    opacity: 1;
+}
+
+svg rect.zoom-panel {
+    cursor: move;
+    fill: none;
+    pointer-events: all;
+}
+
+svg .dot {
+    stroke-width: 2px;
+    fill: #fff;
+}
+
+.dataPoint:hover {
+    cursor: pointer;
+}
+
+svg .dataPoint-dot {
+    stroke-width: 3px;
+    fill: #fff;
+}
+
+svg .dot:hover {
+    stroke-width: 3px;
+    fill: #000;
+
+    cursor: pointer;
+}
+
+.grid .tick {
+    stroke: lightgrey;
+    stroke-opacity: 0.7;
+    shape-rendering: crispEdges;
+}
+.grid path {
+    stroke-width: 0;
+}
+
+div.charttooltip {
+    color: #fff;
+    position: absolute;
+    top: 0;
+    left: 0;
+    text-align: left;
+    padding: 5px;
+    font: 12px sans-serif;
+    background: #363636;
+    border: 0px;
+    border-radius: 3px;
+    pointer-events: none;
+}
--- a/chart/chart_map.css
+++ b/chart/chart_map.css
@ -0,0 +1 @@
+/*# sourceMappingURL=chart_map.css.map */
--- a/chart/chart_pie.css
+++ b/chart/chart_pie.css
@ -0,0 +1 @@
+/*# sourceMappingURL=chart_pie.css.map */
--- a/chart/chart_radar.css
+++ b/chart/chart_radar.css
@ -0,0 +1 @@
+/*# sourceMappingURL=chart_radar.css.map */
--- a/input.css
+++ b/input.css
@ -0,0 +1,175 @@
+.ok {
+  color: #5cff56; }
+
+.warning {
+  color: #ff4b41; }
+
+.green {
+  background: #c0ffb4; }
+
+.red {
+  background: #ff7c70; }
+
+.blue {
+  background: #c1c8ff; }
+
+.orange {
+  background: #ffbf7c; }
+
+.lightblue {
+  background: #b5ffff; }
+
+.yellow {
+  background: #fffe97; }
+
+.purple {
+  background: #bfa5ff; }
+
+.pink {
+  background: #ffa6e3; }
+
+.grey {
+  background: #dcdcdc; }
+
+.darkred {
+  background: #d16059; }
+
+.darkgreen {
+  background: #77d17c; }
+
+.darkblue {
+  background: #7ba9d1; }
+
+input, select, textarea, .textarea {
+  border: 1px solid #b7b7b7; }
+
+select {
+  cursor: pointer; }
+
+progress {
+  height: 20px;
+  width: 100%;
+  min-width: 150px; }
+
+.textarea,
+textarea,
+select,
+input[type="password"],
+input[type="text"],
+input[type="datetime"],
+input[type="email"],
+input[type="date"],
+input[type="number"],
+input[type="datetime-local"] {
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  -ms-border-radius: 2px;
+  border-radius: 2px;
+  background-clip: padding-box;
+  color: #454545;
+  background: #fff;
+  width: 100%;
+  min-width: 70px;
+  font-size: 1.0em;
+  height: 2em;
+  line-height: 2em;
+  padding: 0 10px 0 10px;
+  border: solid 1px #dcdcdc;
+  transition: background 0.3s, border 0.3s;
+  box-shadow: inset 1px 1px 4px -2px #c5c5c5; }
+
+input[type="file"] {
+  border: solid 1px #dcdcdc;
+  width: 100%;
+  color: #454545; }
+
+input[placeholder], textarea {
+  font-family: 'FontAwesome', serif; }
+
+input:invalid {
+  transition: all 0.5s;
+  border: 1px solid #b85450; }
+
+select {
+  height: 2em;
+  line-height: 2em; }
+
+.textarea {
+  overflow: auto;
+  resize: both; }
+
+textarea, .textarea {
+  min-height: 100px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box; }
+
+span.check input[type="checkbox"], span.radio input[type="radio"] {
+  position: relative;
+  vertical-align: middle;
+  bottom: 1px;
+  margin-right: 5px;
+  cursor: pointer; }
+
+input[type="range"] {
+  border: none;
+  width: 100%;
+  min-width: 150px;
+  cursor: pointer; }
+
+.input {
+  width: 100%;
+  min-width: 120px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap; }
+  .input button {
+    -webkit-border-bottom-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+    -webkit-border-top-left-radius: 2px;
+    border-top-left-radius: 2px;
+    background-clip: padding-box;
+    -webkit-border-bottom-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    -webkit-border-top-right-radius: 0px;
+    border-top-right-radius: 0px;
+    background-clip: padding-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: inline-block;
+    background: #fff;
+    height: 2em;
+    font-size: 1em;
+    line-height: 2em;
+    padding: 0;
+    min-width: 40px;
+    border-left: solid 1px #dcdcdc;
+    border-top: solid 1px #dcdcdc;
+    border-bottom: solid 1px #dcdcdc;
+    border-right: none;
+    position: relative;
+    vertical-align: middle;
+    flex-grow: 0;
+    flex-shrink: 0; }
+    .input button:hover {
+      background: #fff; }
+  .input i {
+    position: relative;
+    vertical-align: middle; }
+  .input input {
+    -webkit-border-bottom-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    -webkit-border-top-left-radius: 0px;
+    border-top-left-radius: 0px;
+    background-clip: padding-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    font-size: 1em;
+    position: relative;
+    vertical-align: middle;
+    flex-grow: 1;
+    flex-shrink: 1; }
+
+/*# sourceMappingURL=input.css.map */
--- a/list.css
+++ b/list.css
@ -0,0 +1,71 @@
+.ok {
+  color: #5cff56; }
+
+.warning {
+  color: #ff4b41; }
+
+.green {
+  background: #c0ffb4; }
+
+.red {
+  background: #ff7c70; }
+
+.blue {
+  background: #c1c8ff; }
+
+.orange {
+  background: #ffbf7c; }
+
+.lightblue {
+  background: #b5ffff; }
+
+.yellow {
+  background: #fffe97; }
+
+.purple {
+  background: #bfa5ff; }
+
+.pink {
+  background: #ffa6e3; }
+
+.grey {
+  background: #dcdcdc; }
+
+.darkred {
+  background: #d16059; }
+
+.darkgreen {
+  background: #77d17c; }
+
+.darkblue {
+  background: #7ba9d1; }
+
+ul.default li {
+  margin: 5px 0 5px 0; }
+  ul.default li:first-child {
+    margin: 0 0 5px 0; }
+  ul.default li:last-child {
+    margin: 5px 0 0 0; }
+
+ul.boxed {
+  background: #fff;
+  padding: 5px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  border-radius: 3px;
+  background-clip: padding-box;
+  border: 1px solid #b7b7b7; }
+
+ul.boxed li {
+  margin: 5px 0 5px 0; }
+  ul.boxed li:first-child {
+    margin-top: 0; }
+  ul.boxed li:last-child {
+    margin-bottom: 0; }
+
+ul.h-list li {
+  display: inline-block;
+  margin: 5px 10px 5px 10px; }
+
+/*# sourceMappingURL=list.css.map */
--- a/list.css.map
+++ b/list.css.map
@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAKA,GAAI;EACA,KAAK,EAAE,OAAO;;AAGlB,QAAS;EACL,KAAK,EAAE,OAAO;;AAGlB,MAAO;EACH,UAAU,EAAE,OAAO;;AAGvB,IAAK;EACD,UAAU,EAAE,OAAO;;AAGvB,KAAM;EACF,UAAU,EAAE,OAAO;;AAGvB,OAAQ;EACJ,UAAU,EAAE,OAAO;;AAIvB,UAAW;EACP,UAAU,EAAE,OAAO;;AAGvB,OAAQ;EACJ,UAAU,EAAE,OAAO;;AAGvB,OAAQ;EACJ,UAAU,EAAE,OAAO;;AAGvB,KAAM;EACF,UAAU,EAAE,OAAO;;AAGvB,KAAM;EACF,UAAU,EAAE,OAAO;;AAGvB,QAAS;EACL,UAAU,EAAE,OAAO;;AAGvB,UAAW;EACP,UAAU,EAAE,OAAO;;AAGvB,SAAU;EACN,UAAU,EAAE,OAAO;;ACzDvB,aAAc;EACV,MAAM,EAAE,WAAW;EAEnB,yBAAc;IACV,MAAM,EAAE,SAAS;EAGrB,wBAAa;IACT,MAAM,EAAE,SAAS;;AAIzB,QAAS;EACL,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,GAAG;ECTZ,qBAAqB,EDUE,GAAG;ECT1B,kBAAkB,EDSK,GAAG;ECR1B,iBAAiB,EDQM,GAAG;ECP1B,aAAa,EDOU,GAAG;ECN1B,eAAe,EAAE,WAAW;EDO5B,MAAM,EAAE,iBAA+B;;AAG3C,WAAY;EACR,MAAM,EAAE,WAAW;EAEnB,uBAAc;IACV,UAAU,EAAE,CAAC;EAGjB,sBAAa;IACT,aAAa,EAAE,CAAC;;AAIxB,YAAa;EACT,OAAO,EAAE,YAAY;EAErB,MAAM,EAAE,iBAAiB",
+"sources": ["color.scss","list.scss","mixin.scss"],
+"names": [],
+"file": "list.css"
+}
--- a/list.scss
+++ b/list.scss
@ -30,3 +30,9 @@ ul.boxed li {
        margin-bottom: 0;
    }
 }
+
+ul.h-list li {
+    display: inline-block;
+
+    margin: 5px 10px 5px 10px;
+}
--- a/section.css
+++ b/section.css
@ -0,0 +1,86 @@
+.ok {
+  color: #5cff56; }
+
+.warning {
+  color: #ff4b41; }
+
+.green {
+  background: #c0ffb4; }
+
+.red {
+  background: #ff7c70; }
+
+.blue {
+  background: #c1c8ff; }
+
+.orange {
+  background: #ffbf7c; }
+
+.lightblue {
+  background: #b5ffff; }
+
+.yellow {
+  background: #fffe97; }
+
+.purple {
+  background: #bfa5ff; }
+
+.pink {
+  background: #ffa6e3; }
+
+.grey {
+  background: #dcdcdc; }
+
+.darkred {
+  background: #d16059; }
+
+.darkgreen {
+  background: #77d17c; }
+
+.darkblue {
+  background: #7ba9d1; }
+
+section.box {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 5px 0 0 5px;
+  display: inline-block; }
+
+.box .inner {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  border-radius: 3px;
+  background-clip: padding-box;
+  -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
+  -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
+  box-shadow: inset 1px 1px 0px 0px #ffffff;
+  border: 1px solid #b7b7b7;
+  background: #f5f5ff;
+  padding: 10px; }
+
+section h1 {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-box-shadow: 0px 1px 0px 0px #f1f1f1;
+  -webkit-box-shadow: 0px 1px 0px 0px #f1f1f1;
+  box-shadow: 0px 1px 0px 0px #f1f1f1;
+  font-size: 1.3em;
+  border-bottom: 1px solid #b7b7b7;
+  margin-bottom: 5px;
+  text-shadow: 1px 1px 1px #ffffff; }
+
+section h2 {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  font-size: 1.2em;
+  margin-bottom: 5px;
+  text-shadow: 1px 1px 1px #ffffff; }
+
+/*# sourceMappingURL=section.css.map */
--- a/section.css.map
+++ b/section.css.map
@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAKA,GAAI;EACA,KAAK,EAAE,OAAO;;AAGlB,QAAS;EACL,KAAK,EAAE,OAAO;;AAGlB,MAAO;EACH,UAAU,EAAE,OAAO;;AAGvB,IAAK;EACD,UAAU,EAAE,OAAO;;AAGvB,KAAM;EACF,UAAU,EAAE,OAAO;;AAGvB,OAAQ;EACJ,UAAU,EAAE,OAAO;;AAIvB,UAAW;EACP,UAAU,EAAE,OAAO;;AAGvB,OAAQ;EACJ,UAAU,EAAE,OAAO;;AAGvB,OAAQ;EACJ,UAAU,EAAE,OAAO;;AAGvB,KAAM;EACF,UAAU,EAAE,OAAO;;AAGvB,KAAM;EACF,UAAU,EAAE,OAAO;;AAGvB,QAAS;EACL,UAAU,EAAE,OAAO;;AAGvB,UAAW;EACP,UAAU,EAAE,OAAO;;AAGvB,SAAU;EACN,UAAU,EAAE,OAAO;;ACzDvB,WAAY;ECDR,eAAe,EDEK,UAAU;ECD9B,kBAAkB,EDCE,UAAU;ECA9B,UAAU,EDAU,UAAU;EAC9B,MAAM,EAAE,WAAW;EACnB,OAAO,EAAE,YAAY;;AAGzB,WAAY;ECPR,eAAe,EDQK,UAAU;ECP9B,kBAAkB,EDOE,UAAU;ECN9B,UAAU,EDMU,UAAU;ECF9B,qBAAqB,EDGE,GAAG;ECF1B,kBAAkB,EDEK,GAAG;ECD1B,iBAAiB,EDCM,GAAG;ECA1B,aAAa,EDAU,GAAG;ECC1B,eAAe,EAAE,WAAW;EAkF5B,eAAe,EAAE,6BAA4B;EAC7C,kBAAkB,EAAE,6BAA4B;EAChD,UAAU,EAAE,6BAA4B;EDnFxC,MAAM,EAAE,iBAA+B;EACvC,UAAU,EDVa,OAAO;ECW9B,OAAO,EAAE,IAAI;;AAGjB,UAAW;EChBP,eAAe,EDiBK,UAAU;EChB9B,kBAAkB,EDgBE,UAAU;ECf9B,UAAU,EDeU,UAAU;ECqE9B,eAAe,EAAE,uBAAsB;EACvC,kBAAkB,EAAE,uBAAsB;EAC1C,UAAU,EAAE,uBAAsB;EDrElC,SAAS,EAAE,KAAK;EAChB,aAAa,EAAE,iBAA+B;EAC9C,aAAa,EAAE,GAAG;EAClB,WAAW,EAAE,mBAAmB;;AAGpC,UAAW;ECzBP,eAAe,ED0BK,UAAU;ECzB9B,kBAAkB,EDyBE,UAAU;ECxB9B,UAAU,EDwBU,UAAU;EAC9B,SAAS,EAAE,KAAK;EAChB,aAAa,EAAE,GAAG;EAClB,WAAW,EAAE,mBAAmB",
+"sources": ["color.scss","section.scss","mixin.scss"],
+"names": [],
+"file": "section.css"
+}
--- a/styles.css
+++ b/styles.css
@ -669,6 +669,53 @@ p + p {
 .darkblue {
  background: #7ba9d1; }

+canvas {
+  background: #fff;
+  bordeR: 1px solid #000;
+  user-select: none; }
+
+.ok {
+  color: #5cff56; }
+
+.warning {
+  color: #ff4b41; }
+
+.green {
+  background: #c0ffb4; }
+
+.red {
+  background: #ff7c70; }
+
+.blue {
+  background: #c1c8ff; }
+
+.orange {
+  background: #ffbf7c; }
+
+.lightblue {
+  background: #b5ffff; }
+
+.yellow {
+  background: #fffe97; }
+
+.purple {
+  background: #bfa5ff; }
+
+.pink {
+  background: #ffa6e3; }
+
+.grey {
+  background: #dcdcdc; }
+
+.darkred {
+  background: #d16059; }
+
+.darkgreen {
+  background: #77d17c; }
+
+.darkblue {
+  background: #7ba9d1; }
+
 form li {
  margin: 5px 0 5px 0; }

@ -1619,6 +1666,10 @@ ul.boxed li {
  ul.boxed li:last-child {
    margin-bottom: 0; }

+ul.h-list li {
+  display: inline-block;
+  margin: 5px 10px 5px 10px; }
+
 .ok {
  color: #5cff56; }

@ -2028,12 +2079,16 @@ section h2 {
 .darkblue {
  background: #7ba9d1; }

-.tabular .tab-links {
+.tabular {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box; }
+  .tabular .tab-links {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px 0 4px 0; }
-.tabular .tab-links label {
+  .tabular .tab-links label {
    -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
    -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
    box-shadow: inset 1px 1px 0px 0px #ffffff;
@ -2056,7 +2111,7 @@ section h2 {
    text-shadow: 1px 1px 1px #ffffff;
    font-size: 0.9em;
    cursor: pointer; }
-.tabular .tab-links .active a, .tabular .tab-links label:hover {
+  .tabular .tab-links .active a, .tabular .tab-links label:hover {
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0, #f5f5ff 100);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(100, #f5f5ff));
@ -2064,15 +2119,15 @@ section h2 {
    background: -o-linear-gradient(top, #ffffff 0, #f5f5ff 100);
    background: -ms-linear-gradient(top, #ffffff 0, #f5f5ff 100);
    background: linear-gradient(to bottom, #ffffff 0, #f5f5ff 100); }
-.tabular .tab-links .active a {
+  .tabular .tab-links .active a {
    cursor: default; }
-.tabular .tab-links li {
+  .tabular .tab-links li {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    margin: 0 5px 0 0; }
-.tabular .tab-content {
+  .tabular .tab-content {
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
    background-clip: padding-box;
--- a/styles.css.map
+++ b/styles.css.map
--- a/styles.scss
+++ b/styles.scss
@ -1,3 +1,3 @@
@import "clean", "mixin", "default", "color", "size", "transformation", "alignment";
-@import "layout", "text", "tooltip", "spinner", "form", "icon", "image", "input", "accordion", "alert", "badge", "blockquote", "breadcrumb", "button", "link", "list", "nav", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag";
+@import "layout", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "badge", "blockquote", "breadcrumb", "button", "link", "list", "nav", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag";
@import "media";
--- a/tab.css
+++ b/tab.css
@ -0,0 +1,160 @@
+.ok {
+  color: #5cff56; }
+
+.warning {
+  color: #ff4b41; }
+
+.green {
+  background: #c0ffb4; }
+
+.red {
+  background: #ff7c70; }
+
+.blue {
+  background: #c1c8ff; }
+
+.orange {
+  background: #ffbf7c; }
+
+.lightblue {
+  background: #b5ffff; }
+
+.yellow {
+  background: #fffe97; }
+
+.purple {
+  background: #bfa5ff; }
+
+.pink {
+  background: #ffa6e3; }
+
+.grey {
+  background: #dcdcdc; }
+
+.darkred {
+  background: #d16059; }
+
+.darkgreen {
+  background: #77d17c; }
+
+.darkblue {
+  background: #7ba9d1; }
+
+.tabular {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box; }
+  .tabular .tab-links {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 5px 0 4px 0; }
+  .tabular .tab-links label {
+    -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
+    -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
+    box-shadow: inset 1px 1px 0px 0px #ffffff;
+    -webkit-border-top-right-radius: 3px;
+    border-top-right-radius: 3px;
+    -webkit-border-top-left-radius: 3px;
+    border-top-left-radius: 3px;
+    background-clip: padding-box;
+    border-top: 1px solid #b7b7b7;
+    border-left: 1px solid #b7b7b7;
+    border-right: 1px solid #b7b7b7;
+    background: #f5f5ff;
+    background: -moz-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #f5f5ff));
+    background: -webkit-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+    background: -o-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+    background: -ms-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+    background: linear-gradient(to bottom, #e0e3eb 0, #f5f5ff 100);
+    padding: 5px 10px 5px 10px;
+    text-shadow: 1px 1px 1px #ffffff;
+    font-size: 0.9em;
+    cursor: pointer; }
+  .tabular .tab-links .active a, .tabular .tab-links label:hover {
+    background: #ffffff;
+    background: -moz-linear-gradient(top, #ffffff 0, #f5f5ff 100);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(100, #f5f5ff));
+    background: -webkit-linear-gradient(top, #ffffff 0, #f5f5ff 100);
+    background: -o-linear-gradient(top, #ffffff 0, #f5f5ff 100);
+    background: -ms-linear-gradient(top, #ffffff 0, #f5f5ff 100);
+    background: linear-gradient(to bottom, #ffffff 0, #f5f5ff 100); }
+  .tabular .tab-links .active a {
+    cursor: default; }
+  .tabular .tab-links li {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: inline-block;
+    margin: 0 5px 0 0; }
+  .tabular .tab-content {
+    -webkit-border-bottom-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    background-clip: padding-box;
+    -webkit-border-bottom-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    background-clip: padding-box;
+    -webkit-border-top-right-radius: 3px;
+    border-top-right-radius: 3px;
+    background-clip: padding-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    background: #f5f5ff;
+    border: 1px solid #b7b7b7;
+    padding: 10px; }
+    .tabular .tab-content > input {
+      display: none; }
+    .tabular .tab-content input + div {
+      display: none; }
+    .tabular .tab-content input:checked + div {
+      display: inherit; }
+
+.tabular-2 .tab-links {
+  padding: 5px 0 0 0; }
+.tabular-2 .tab-links label {
+  -moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
+  -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
+  box-shadow: inset 1px 1px 0px 0px #ffffff;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  border-radius: 3px;
+  background-clip: padding-box;
+  border: 1px solid #b7b7b7;
+  background: #f5f5ff;
+  background: -moz-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #f5f5ff));
+  background: -webkit-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+  background: -o-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+  background: -ms-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
+  background: linear-gradient(to bottom, #e0e3eb 0, #f5f5ff 100);
+  padding: 5px 10px 5px 10px;
+  text-shadow: 1px 1px 1px #ffffff;
+  font-size: 0.9em;
+  cursor: pointer; }
+.tabular-2 .tab-links .active a, .tabular-2 .tab-links label:hover {
+  background: #ffffff;
+  background: -moz-linear-gradient(top, #ffffff 0, #f5f5ff 100);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(100, #f5f5ff));
+  background: -webkit-linear-gradient(top, #ffffff 0, #f5f5ff 100);
+  background: -o-linear-gradient(top, #ffffff 0, #f5f5ff 100);
+  background: -ms-linear-gradient(top, #ffffff 0, #f5f5ff 100);
+  background: linear-gradient(to bottom, #ffffff 0, #f5f5ff 100); }
+.tabular-2 .tab-links .active a {
+  cursor: default; }
+.tabular-2 .tab-links li {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0 5px 15px 0; }
+.tabular-2 .tab-content > input {
+  display: none; }
+.tabular-2 .tab-content input + div {
+  display: none; }
+.tabular-2 .tab-content input:checked + div {
+  display: inherit; }
+
+/*# sourceMappingURL=tab.css.map */
--- a/tab.css.map
+++ b/tab.css.map
@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["color.scss","tab.scss","mixin.scss"],
+"names": [],
+"file": "tab.css"
+}
--- a/tab.scss
+++ b/tab.scss
@ -1,6 +1,8 @@
@import "mixin", "color";

 .tabular {
+    @include box-sizing(border-box);
+
    .tab-links {
        @include box-sizing(border-box);
        padding: 5px 0 4px 0;