mirror of
https://github.com/Karaka-Management/cssOMS.git
synced 2026-01-11 11:18:39 +00:00
Improve layouts
This commit is contained in:
parent
1d826e1e85
commit
1021e185e7
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,6 +1,6 @@
|
|||
/* Global */
|
||||
$font-stack: arial, serif;
|
||||
$font-color: #000;
|
||||
$font-color: #676a6c;
|
||||
$reverse-font-color: #fff;
|
||||
$font-size: 1rem;
|
||||
$font-size-smaller: 0.9rem;
|
||||
|
|
@ -109,10 +109,10 @@ $blockquote-border-radius: $default-border-radius;
|
|||
|
||||
/* Breadcrumbs */
|
||||
$breadcrumb-font-size: 12px;
|
||||
$breadcrumb-padding: 10px;
|
||||
$breadcrumb-padding: 10px 10px 10px 20px;
|
||||
|
||||
$breadcrumb-border: $default-border;
|
||||
$breadcrumb-border-radius: $default-border-radius;
|
||||
$breadcrumb-border-radius: 3px;
|
||||
$breadcrumb-border-color: $default-border-color;
|
||||
|
||||
$breadcrumb-inactive-background: $content-background-color;
|
||||
|
|
@ -195,4 +195,4 @@ $pre-padding: $default-padding;
|
|||
$tag-border: $default-border;
|
||||
$tag-border-color: $default-border-color;
|
||||
$tag-color: $reverse-font-color;
|
||||
$tag-font-size: 0.7rem;
|
||||
$tag-font-size: 0.6rem;
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
background: -o-linear-gradient(top, #fff 0, #fff 100);
|
||||
background: -ms-linear-gradient(top, #fff 0, #fff 100);
|
||||
background: linear-gradient(to bottom, #fff 0, #fff 100);
|
||||
color: #000; }
|
||||
color: #676a6c; }
|
||||
.ac-container > input:checked + label + section {
|
||||
display: inherit; }
|
||||
.ac-container > input + label + section {
|
||||
|
|
|
|||
33
article.css
33
article.css
|
|
@ -20,8 +20,26 @@
|
|||
/* tag */
|
||||
article {
|
||||
background: #fff;
|
||||
padding: 5px;
|
||||
margin: 0; }
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
font-size: 0.9rem; }
|
||||
article h1, article h2, article h3, article h4, article h5, article h6 {
|
||||
font-weight: bold; }
|
||||
article h1 {
|
||||
font-size: 1.5rem; }
|
||||
article h2 {
|
||||
font-size: 1.3rem; }
|
||||
article h3 {
|
||||
font-size: 1.1rem; }
|
||||
article h4, article h5, article h6 {
|
||||
font-size: 1rem; }
|
||||
article pre {
|
||||
margin: 1rem 0 1rem 0; }
|
||||
article pre code {
|
||||
background: none; }
|
||||
article code {
|
||||
padding: 3px;
|
||||
background: #f1f1f1; }
|
||||
article a {
|
||||
color: #8ea4ff;
|
||||
border-bottom: 1px dotted #8ea4ff; }
|
||||
|
|
@ -30,16 +48,23 @@ article {
|
|||
article p {
|
||||
line-height: 1.5em; }
|
||||
article ol, article ul {
|
||||
margin-left: 30px; }
|
||||
margin: 0.5rem 0 0.5rem 3rem; }
|
||||
article ul {
|
||||
list-style: disc; }
|
||||
article li {
|
||||
margin: 0.3rem 0 0.3rem 0; }
|
||||
article blockquote {
|
||||
margin: 10px 0 10px 0; }
|
||||
article blockquote p:last-child {
|
||||
margin-bottom: 0; }
|
||||
article img {
|
||||
display: block;
|
||||
margin: 0 auto; }
|
||||
article table {
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #999; }
|
||||
border: 1px solid #999;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1rem; }
|
||||
article table th, article table td {
|
||||
padding: 5px;
|
||||
border: 1px solid #999; }
|
||||
|
|
|
|||
50
article.scss
50
article.scss
|
|
@ -2,8 +2,43 @@
|
|||
|
||||
article {
|
||||
background: $article-background;
|
||||
padding: $article-padding;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: bold;
|
||||
//padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
h4, h5, h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 1rem 0 1rem 0;
|
||||
|
||||
code {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 3px;
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $article-link-color;
|
||||
|
|
@ -19,13 +54,17 @@ article {
|
|||
}
|
||||
|
||||
ol, ul {
|
||||
margin-left: 30px;
|
||||
margin: 0.5rem 0 0.5rem 3rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0.3rem 0 0.3rem 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 10px 0 10px 0;
|
||||
|
||||
|
|
@ -34,9 +73,16 @@ article {
|
|||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: $article-table-border solid $article-table-border-color;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
th, td {
|
||||
padding: 5px;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
.crumbs-1 li {
|
||||
background: #f5f5ff;
|
||||
border: 1px solid #d6d6d6;
|
||||
padding: 10px;
|
||||
padding: 10px 10px 10px 20px;
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
height: 0;
|
||||
border-top: 18px solid transparent;
|
||||
border-bottom: 17px solid transparent;
|
||||
border-left: 14px solid #d6d6d6;
|
||||
border-left: 14px solid #f5f5ff;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -18px;
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
height: 0;
|
||||
border-top: 18px solid transparent;
|
||||
border-bottom: 17px solid transparent;
|
||||
border-left: 14px solid $breadcrumb-border-color;
|
||||
border-left: 14px solid $content-background-color;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -18px;
|
||||
|
|
|
|||
|
|
@ -23,4 +23,7 @@ canvas {
|
|||
border: 1px solid #d6d6d6;
|
||||
user-select: none; }
|
||||
|
||||
canvas.chart {
|
||||
width: 100%; }
|
||||
|
||||
/*# sourceMappingURL=canvas.css.map */
|
||||
|
|
|
|||
|
|
@ -5,3 +5,7 @@ canvas {
|
|||
border: $canvas-border solid $canvas-border-color;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
canvas.chart {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
.chart {
|
||||
background: #fff; }
|
||||
|
||||
.day {
|
||||
fill: #fff;
|
||||
stroke: #ccc;
|
||||
}
|
||||
|
||||
.month {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.RdYlGn .q0-11{fill:rgb(165,0,38)}
|
||||
.RdYlGn .q1-11{fill:rgb(215,48,39)}
|
||||
.RdYlGn .q2-11{fill:rgb(244,109,67)}
|
||||
.RdYlGn .q3-11{fill:rgb(253,174,97)}
|
||||
.RdYlGn .q4-11{fill:rgb(254,224,139)}
|
||||
.RdYlGn .q5-11{fill:rgb(255,255,191)}
|
||||
.RdYlGn .q6-11{fill:rgb(217,239,139)}
|
||||
.RdYlGn .q7-11{fill:rgb(166,217,106)}
|
||||
.RdYlGn .q8-11{fill:rgb(102,189,99)}
|
||||
.RdYlGn .q9-11{fill:rgb(26,152,80)}
|
||||
.RdYlGn .q10-11{fill:rgb(0,104,55)}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
.chart {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
svg {
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.day {
|
||||
fill: #fff;
|
||||
stroke: #ccc;
|
||||
}
|
||||
|
||||
.month {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.RdYlGn .q0-11{fill:rgb(165,0,38)}
|
||||
.RdYlGn .q1-11{fill:rgb(215,48,39)}
|
||||
.RdYlGn .q2-11{fill:rgb(244,109,67)}
|
||||
.RdYlGn .q3-11{fill:rgb(253,174,97)}
|
||||
.RdYlGn .q4-11{fill:rgb(254,224,139)}
|
||||
.RdYlGn .q5-11{fill:rgb(255,255,191)}
|
||||
.RdYlGn .q6-11{fill:rgb(217,239,139)}
|
||||
.RdYlGn .q7-11{fill:rgb(166,217,106)}
|
||||
.RdYlGn .q8-11{fill:rgb(102,189,99)}
|
||||
.RdYlGn .q9-11{fill:rgb(26,152,80)}
|
||||
.RdYlGn .q10-11{fill:rgb(0,104,55)}
|
||||
|
|
@ -1 +0,0 @@
|
|||
/*# sourceMappingURL=chart_area.css.map */
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
svg .area {
|
||||
fill: steelblue;
|
||||
}
|
||||
|
||||
svg .stacked {
|
||||
fill: steelblue;
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
svg .positive rect {
|
||||
fill: darkolivegreen;
|
||||
}
|
||||
svg .negative rect {
|
||||
fill: crimson;
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
svg .positive rect {
|
||||
fill: darkolivegreen;
|
||||
}
|
||||
svg .negative rect {
|
||||
fill: crimson;
|
||||
}
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
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; }
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
/*# sourceMappingURL=chart_map.css.map */
|
||||
|
|
@ -1 +0,0 @@
|
|||
|
||||
|
|
@ -1 +0,0 @@
|
|||
/*# sourceMappingURL=chart_pie.css.map */
|
||||
|
|
@ -1 +0,0 @@
|
|||
|
||||
|
|
@ -1 +0,0 @@
|
|||
/*# sourceMappingURL=chart_radar.css.map */
|
||||
|
|
@ -1 +0,0 @@
|
|||
|
||||
16
clean.css
16
clean.css
|
|
@ -8,25 +8,25 @@
|
|||
color: #d16059; }
|
||||
|
||||
.green {
|
||||
background: #61BD6D; }
|
||||
background: #42bd41; }
|
||||
|
||||
.red {
|
||||
background: #D14841; }
|
||||
background: #d01715; }
|
||||
|
||||
.blue {
|
||||
background: #2C82C9; }
|
||||
background: #5778fd; }
|
||||
|
||||
.orange {
|
||||
background: #FBA026; }
|
||||
|
||||
.lightblue {
|
||||
background: #54ACD2; }
|
||||
background: #03a9f5; }
|
||||
|
||||
.yellow {
|
||||
background: #FAC51C; }
|
||||
background: #ffeb3c; }
|
||||
|
||||
.purple {
|
||||
background: #553982; }
|
||||
background: #673bb7; }
|
||||
|
||||
.pink {
|
||||
background: #ffa6e3; }
|
||||
|
|
@ -38,10 +38,10 @@
|
|||
background: #B8312F; }
|
||||
|
||||
.darkgreen {
|
||||
background: #41A85F; }
|
||||
background: #009788; }
|
||||
|
||||
.darkblue {
|
||||
background: #2969B0; }
|
||||
background: #3f51b5; }
|
||||
|
||||
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, nav, section, iframe, label {
|
||||
margin: 0;
|
||||
|
|
|
|||
16
color.css
16
color.css
|
|
@ -8,25 +8,25 @@
|
|||
color: #d16059; }
|
||||
|
||||
.green {
|
||||
background: #61BD6D; }
|
||||
background: #42bd41; }
|
||||
|
||||
.red {
|
||||
background: #D14841; }
|
||||
background: #d01715; }
|
||||
|
||||
.blue {
|
||||
background: #2C82C9; }
|
||||
background: #5778fd; }
|
||||
|
||||
.orange {
|
||||
background: #FBA026; }
|
||||
|
||||
.lightblue {
|
||||
background: #54ACD2; }
|
||||
background: #03a9f5; }
|
||||
|
||||
.yellow {
|
||||
background: #FAC51C; }
|
||||
background: #ffeb3c; }
|
||||
|
||||
.purple {
|
||||
background: #553982; }
|
||||
background: #673bb7; }
|
||||
|
||||
.pink {
|
||||
background: #ffa6e3; }
|
||||
|
|
@ -38,9 +38,9 @@
|
|||
background: #B8312F; }
|
||||
|
||||
.darkgreen {
|
||||
background: #41A85F; }
|
||||
background: #009788; }
|
||||
|
||||
.darkblue {
|
||||
background: #2969B0; }
|
||||
background: #3f51b5; }
|
||||
|
||||
/*# sourceMappingURL=color.css.map */
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
}
|
||||
|
||||
@each $tuple in
|
||||
'green' #61BD6D, 'red' #D14841, 'blue' #2C82C9,
|
||||
'orange' #FBA026, 'lightblue' #54ACD2, 'yellow' #FAC51C, 'purple' #553982, 'pink' #ffa6e3, 'grey' #dcdcdc,
|
||||
'darkred' #B8312F, 'darkgreen' #41A85F, 'darkblue' #2969B0 {
|
||||
'green' #42bd41, 'red' #d01715, 'blue' #5778fd,
|
||||
'orange' #FBA026, 'lightblue' #03a9f5, 'yellow' #ffeb3c, 'purple' #673bb7, 'pink' #ffa6e3, 'grey' #dcdcdc,
|
||||
'darkred' #B8312F, 'darkgreen' #009788, 'darkblue' #3f51b5 {
|
||||
.#{nth($tuple, 1)} {
|
||||
background: #{nth($tuple, 2)};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ input[type="datetime-local"] {
|
|||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: #000;
|
||||
color: #676a6c;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
|
|
@ -105,7 +105,7 @@ input[type="file"] {
|
|||
border: solid 1rem #fff;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
color: #000;
|
||||
color: #676a6c;
|
||||
padding: 10px;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
|
|
|
|||
16
layout.css
16
layout.css
|
|
@ -8,25 +8,25 @@
|
|||
color: #d16059; }
|
||||
|
||||
.green {
|
||||
background: #61BD6D; }
|
||||
background: #42bd41; }
|
||||
|
||||
.red {
|
||||
background: #D14841; }
|
||||
background: #d01715; }
|
||||
|
||||
.blue {
|
||||
background: #2C82C9; }
|
||||
background: #5778fd; }
|
||||
|
||||
.orange {
|
||||
background: #FBA026; }
|
||||
|
||||
.lightblue {
|
||||
background: #54ACD2; }
|
||||
background: #03a9f5; }
|
||||
|
||||
.yellow {
|
||||
background: #FAC51C; }
|
||||
background: #ffeb3c; }
|
||||
|
||||
.purple {
|
||||
background: #553982; }
|
||||
background: #673bb7; }
|
||||
|
||||
.pink {
|
||||
background: #ffa6e3; }
|
||||
|
|
@ -38,10 +38,10 @@
|
|||
background: #B8312F; }
|
||||
|
||||
.darkgreen {
|
||||
background: #41A85F; }
|
||||
background: #009788; }
|
||||
|
||||
.darkblue {
|
||||
background: #2969B0; }
|
||||
background: #3f51b5; }
|
||||
|
||||
.ipt-wrap {
|
||||
display: table;
|
||||
|
|
|
|||
28
nav.css
28
nav.css
|
|
@ -47,22 +47,28 @@
|
|||
display: inherit; }
|
||||
#nav-side input + ul > li:nth-child(n+2) {
|
||||
display: none; }
|
||||
#nav-side > li li {
|
||||
border-top: 1px solid #505050;
|
||||
border-bottom: 1px solid #252525;
|
||||
#nav-side label {
|
||||
display: block;
|
||||
padding: 7px 0 7px 7px;
|
||||
cursor: pointer; }
|
||||
#nav-side > li {
|
||||
color: #fff; }
|
||||
#nav-side > li li:not(:first-child) {
|
||||
background: #444; }
|
||||
#nav-side > li li:first-child {
|
||||
border-bottom: 1px solid #252525; }
|
||||
#nav-side > li li:first-child {
|
||||
padding: 7px 0 7px 7px; }
|
||||
#nav-side > li li a {
|
||||
#nav-side > li a {
|
||||
display: block;
|
||||
padding: 7px 0 7px 7px; }
|
||||
#nav-side > li li a:hover {
|
||||
#nav-side > li a:hover {
|
||||
color: #252525;
|
||||
background: #FBA026; }
|
||||
#nav-side > li li {
|
||||
border-top: 1px solid #505050;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #252525; }
|
||||
#nav-side > li li:not(:first-child) {
|
||||
background: #444; }
|
||||
#nav-side > li li:hover {
|
||||
color: #252525;
|
||||
background: #FBA026;
|
||||
border-top: 1px solid #ffc06e; }
|
||||
#nav-side li:last-child li:last-child {
|
||||
border-bottom: none; }
|
||||
#nav-side .max, #nav-side .min {
|
||||
|
|
|
|||
40
nav.scss
40
nav.scss
|
|
@ -50,32 +50,40 @@
|
|||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
padding: 7px 0 7px 7px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
> li {
|
||||
//border-bottom: 1px solid #252525;
|
||||
color: #fff;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 7px 0 7px 7px;
|
||||
|
||||
&:hover {
|
||||
color: #252525;
|
||||
background: $default-highlighter;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
border-top: 1px solid #505050;
|
||||
border-bottom: 1px solid #252525;
|
||||
color: #fff;
|
||||
|
||||
&:not(:first-child) {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-bottom: 1px solid #252525;
|
||||
}
|
||||
border-bottom: 1px solid #252525;
|
||||
|
||||
&:first-child {
|
||||
padding: 7px 0 7px 7px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 7px 0 7px 7px;
|
||||
|
||||
&:hover {
|
||||
color: #252525;
|
||||
background: $default-highlighter;
|
||||
}
|
||||
&:hover {
|
||||
color: #252525;
|
||||
background: $default-highlighter;
|
||||
border-top: 1px solid rgb(255, 192, 110);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
/* pre */
|
||||
/* tag */
|
||||
.meter {
|
||||
height: 20px;
|
||||
height: 15px;
|
||||
/* Can be anything */
|
||||
position: relative;
|
||||
background: none !important; }
|
||||
|
|
@ -77,6 +77,9 @@
|
|||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
|
||||
background-image: -webkit-linear-gradient(#f0a3a3, #f42323); }
|
||||
|
||||
.noanimation > span > span, .noanimation > span:after {
|
||||
-webkit-animation: none; }
|
||||
|
||||
.nostripes > span > span, .nostripes > span:after {
|
||||
-webkit-animation: none;
|
||||
background-image: none; }
|
||||
|
|
@ -159,7 +162,6 @@
|
|||
display: none; }
|
||||
|
||||
.progress-radial {
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
position: relative;
|
||||
width: 70px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
.meter {
|
||||
height: 20px; /* Can be anything */
|
||||
height: 15px; /* Can be anything */
|
||||
position: relative;
|
||||
background: none !important;
|
||||
|
||||
|
|
@ -84,6 +84,10 @@
|
|||
background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
|
||||
}
|
||||
|
||||
.noanimation > span > span, .noanimation > span:after {
|
||||
-webkit-animation: none;
|
||||
}
|
||||
|
||||
.nostripes > span > span, .nostripes > span:after {
|
||||
-webkit-animation: none;
|
||||
background-image: none;
|
||||
|
|
@ -181,7 +185,6 @@
|
|||
}
|
||||
|
||||
.progress-radial {
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
position: relative;
|
||||
width: 70px;
|
||||
|
|
|
|||
31
section.css
31
section.css
|
|
@ -22,7 +22,6 @@
|
|||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
margin-top: 0.3rem;
|
||||
overflow-x: auto; }
|
||||
.box .inner {
|
||||
|
|
@ -43,20 +42,30 @@ section.box {
|
|||
box-shadow: 0px 1px 0px 0px #f1f1f1;
|
||||
border: 1px solid #d6d6d6;
|
||||
background: #fff; }
|
||||
section.box.green {
|
||||
border-top: 3px solid #42bd41; }
|
||||
section.box.red {
|
||||
border-top: 3px solid #d01715; }
|
||||
section.box.blue {
|
||||
border-top: 3px solid #5778fd; }
|
||||
section.box.orange {
|
||||
border-top: 3px solid #FBA026; }
|
||||
section.box.red {
|
||||
section.box.lightblue {
|
||||
border-top: 3px solid #03a9f5; }
|
||||
section.box.yellow {
|
||||
border-top: 3px solid #ffeb3c; }
|
||||
section.box.purple {
|
||||
border-top: 3px solid #673bb7; }
|
||||
section.box.pink {
|
||||
border-top: 3px solid #ffa6e3; }
|
||||
section.box.grey {
|
||||
border-top: 3px solid #dcdcdc; }
|
||||
section.box.darkred {
|
||||
border-top: 3px solid #B8312F; }
|
||||
section.box.green {
|
||||
border-top: 3px solid #41A85F; }
|
||||
section.box.blue {
|
||||
border-top: 3px solid #2C82C9; }
|
||||
section.box.purple {
|
||||
border-top: 3px solid #553982; }
|
||||
section.box.darkgreen {
|
||||
border-top: 3px solid #009788; }
|
||||
section.box.darkblue {
|
||||
border-top: 3px solid #2969B0; }
|
||||
section.box.purple {
|
||||
border-top: 3px solid #553982; }
|
||||
border-top: 3px solid #3f51b5; }
|
||||
|
||||
section header > h1 {
|
||||
margin: 10px 10px 0 10px;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.box {
|
||||
@include box-sizing(border-box);
|
||||
display: inline-block;
|
||||
//display: inline-block;
|
||||
margin-top: 0.3rem;
|
||||
overflow-x: auto;
|
||||
|
||||
|
|
@ -23,8 +23,9 @@ section.box {
|
|||
background: $content-box-background-color;
|
||||
|
||||
@each $tuple in
|
||||
'orange' #FBA026, 'red' #B8312F, 'green' #41A85F,
|
||||
'blue' #2C82C9, 'purple' #553982, 'darkblue' #2969B0, 'purple' #553982 {
|
||||
'green' #42bd41, 'red' #d01715, 'blue' #5778fd,
|
||||
'orange' #FBA026, 'lightblue' #03a9f5, 'yellow' #ffeb3c, 'purple' #673bb7, 'pink' #ffa6e3, 'grey' #dcdcdc,
|
||||
'darkred' #B8312F, 'darkgreen' #009788, 'darkblue' #3f51b5 {
|
||||
&.#{nth($tuple, 1)} {
|
||||
border-top: 3px solid #{nth($tuple, 2)};
|
||||
}
|
||||
|
|
|
|||
164
spinner.css
164
spinner.css
|
|
@ -25,23 +25,20 @@
|
|||
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
|
||||
.spinner-2 {
|
||||
text-align: center; }
|
||||
|
||||
.spinner-2 > div {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #333;
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
animation: sk-bouncedelay 1.4s infinite ease-in-out both; }
|
||||
|
||||
.spinner-2 .bounce1 {
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s; }
|
||||
|
||||
.spinner-2 .bounce2 {
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s; }
|
||||
.spinner-2 > div {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #333;
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
animation: sk-bouncedelay 1.4s infinite ease-in-out both; }
|
||||
.spinner-2 .bounce1 {
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s; }
|
||||
.spinner-2 .bounce2 {
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s; }
|
||||
|
||||
@-webkit-keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% {
|
||||
|
|
@ -56,139 +53,6 @@
|
|||
-webkit-transform: scale(1);
|
||||
transform: scale(1); } }
|
||||
.spinner-3 {
|
||||
margin: 50px auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative; }
|
||||
|
||||
.spinner-3 .sk-circle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0; }
|
||||
|
||||
.spinner-3 .sk-circle:before {
|
||||
content: '';
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 15%;
|
||||
height: 15%;
|
||||
background-color: #333;
|
||||
border-radius: 100%;
|
||||
-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
|
||||
animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; }
|
||||
|
||||
.spinner-3 .sk-circle2 {
|
||||
-webkit-transform: rotate(30deg);
|
||||
-ms-transform: rotate(30deg);
|
||||
transform: rotate(30deg); }
|
||||
|
||||
.spinner-3 .sk-circle3 {
|
||||
-webkit-transform: rotate(60deg);
|
||||
-ms-transform: rotate(60deg);
|
||||
transform: rotate(60deg); }
|
||||
|
||||
.spinner-3 .sk-circle4 {
|
||||
-webkit-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg); }
|
||||
|
||||
.spinner-3 .sk-circle5 {
|
||||
-webkit-transform: rotate(120deg);
|
||||
-ms-transform: rotate(120deg);
|
||||
transform: rotate(120deg); }
|
||||
|
||||
.spinner-3 .sk-circle6 {
|
||||
-webkit-transform: rotate(150deg);
|
||||
-ms-transform: rotate(150deg);
|
||||
transform: rotate(150deg); }
|
||||
|
||||
.spinner-3 .sk-circle7 {
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg); }
|
||||
|
||||
.spinner-3 .sk-circle8 {
|
||||
-webkit-transform: rotate(210deg);
|
||||
-ms-transform: rotate(210deg);
|
||||
transform: rotate(210deg); }
|
||||
|
||||
.spinner-3 .sk-circle9 {
|
||||
-webkit-transform: rotate(240deg);
|
||||
-ms-transform: rotate(240deg);
|
||||
transform: rotate(240deg); }
|
||||
|
||||
.spinner-3 .sk-circle10 {
|
||||
-webkit-transform: rotate(270deg);
|
||||
-ms-transform: rotate(270deg);
|
||||
transform: rotate(270deg); }
|
||||
|
||||
.spinner-3 .sk-circle11 {
|
||||
-webkit-transform: rotate(300deg);
|
||||
-ms-transform: rotate(300deg);
|
||||
transform: rotate(300deg); }
|
||||
|
||||
.spinner-3 .sk-circle12 {
|
||||
-webkit-transform: rotate(330deg);
|
||||
-ms-transform: rotate(330deg);
|
||||
transform: rotate(330deg); }
|
||||
|
||||
.spinner-3 .sk-circle2:before {
|
||||
-webkit-animation-delay: -1.1s;
|
||||
animation-delay: -1.1s; }
|
||||
|
||||
.spinner-3 .sk-circle3:before {
|
||||
-webkit-animation-delay: -1s;
|
||||
animation-delay: -1s; }
|
||||
|
||||
.spinner-3 .sk-circle4:before {
|
||||
-webkit-animation-delay: -0.9s;
|
||||
animation-delay: -0.9s; }
|
||||
|
||||
.spinner-3 .sk-circle5:before {
|
||||
-webkit-animation-delay: -0.8s;
|
||||
animation-delay: -0.8s; }
|
||||
|
||||
.spinner-3 .sk-circle6:before {
|
||||
-webkit-animation-delay: -0.7s;
|
||||
animation-delay: -0.7s; }
|
||||
|
||||
.spinner-3 .sk-circle7:before {
|
||||
-webkit-animation-delay: -0.6s;
|
||||
animation-delay: -0.6s; }
|
||||
|
||||
.spinner-3 .sk-circle8:before {
|
||||
-webkit-animation-delay: -0.5s;
|
||||
animation-delay: -0.5s; }
|
||||
|
||||
.spinner-3 .sk-circle9:before {
|
||||
-webkit-animation-delay: -0.4s;
|
||||
animation-delay: -0.4s; }
|
||||
|
||||
.spinner-3 .sk-circle10:before {
|
||||
-webkit-animation-delay: -0.3s;
|
||||
animation-delay: -0.3s; }
|
||||
|
||||
.spinner-3 .sk-circle11:before {
|
||||
-webkit-animation-delay: -0.2s;
|
||||
animation-delay: -0.2s; }
|
||||
|
||||
.spinner-3 .sk-circle12:before {
|
||||
-webkit-animation-delay: -0.1s;
|
||||
animation-delay: -0.1s; }
|
||||
|
||||
@-webkit-keyframes sk-circleFadeDelay {
|
||||
0%, 39%, 100% {
|
||||
opacity: 0; }
|
||||
40% {
|
||||
opacity: 1; } }
|
||||
@keyframes sk-circleFadeDelay {
|
||||
0%, 39%, 100% {
|
||||
opacity: 0; }
|
||||
40% {
|
||||
opacity: 1; } }
|
||||
.spinner-4 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 50px auto;
|
||||
|
|
|
|||
200
spinner.scss
200
spinner.scss
|
|
@ -27,31 +27,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
// --------------
|
||||
|
||||
.spinner-2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spinner-2 > div {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #333;
|
||||
> div {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #333;
|
||||
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
}
|
||||
.bounce1 {
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.spinner-2 .bounce1 {
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.spinner-2 .bounce2 {
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s;
|
||||
.bounce2 {
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-bouncedelay {
|
||||
|
|
@ -69,169 +67,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// ------------
|
||||
|
||||
.spinner-3 {
|
||||
margin: 50px auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle:before {
|
||||
content: '';
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 15%;
|
||||
height: 15%;
|
||||
background-color: #333;
|
||||
border-radius: 100%;
|
||||
-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
|
||||
animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle2 {
|
||||
-webkit-transform: rotate(30deg);
|
||||
-ms-transform: rotate(30deg);
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle3 {
|
||||
-webkit-transform: rotate(60deg);
|
||||
-ms-transform: rotate(60deg);
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle4 {
|
||||
-webkit-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle5 {
|
||||
-webkit-transform: rotate(120deg);
|
||||
-ms-transform: rotate(120deg);
|
||||
transform: rotate(120deg);
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle6 {
|
||||
-webkit-transform: rotate(150deg);
|
||||
-ms-transform: rotate(150deg);
|
||||
transform: rotate(150deg);
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle7 {
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle8 {
|
||||
-webkit-transform: rotate(210deg);
|
||||
-ms-transform: rotate(210deg);
|
||||
transform: rotate(210deg);
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle9 {
|
||||
-webkit-transform: rotate(240deg);
|
||||
-ms-transform: rotate(240deg);
|
||||
transform: rotate(240deg);
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle10 {
|
||||
-webkit-transform: rotate(270deg);
|
||||
-ms-transform: rotate(270deg);
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle11 {
|
||||
-webkit-transform: rotate(300deg);
|
||||
-ms-transform: rotate(300deg);
|
||||
transform: rotate(300deg);
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle12 {
|
||||
-webkit-transform: rotate(330deg);
|
||||
-ms-transform: rotate(330deg);
|
||||
transform: rotate(330deg);
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle2:before {
|
||||
-webkit-animation-delay: -1.1s;
|
||||
animation-delay: -1.1s;
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle3:before {
|
||||
-webkit-animation-delay: -1s;
|
||||
animation-delay: -1s;
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle4:before {
|
||||
-webkit-animation-delay: -0.9s;
|
||||
animation-delay: -0.9s;
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle5:before {
|
||||
-webkit-animation-delay: -0.8s;
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle6:before {
|
||||
-webkit-animation-delay: -0.7s;
|
||||
animation-delay: -0.7s;
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle7:before {
|
||||
-webkit-animation-delay: -0.6s;
|
||||
animation-delay: -0.6s;
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle8:before {
|
||||
-webkit-animation-delay: -0.5s;
|
||||
animation-delay: -0.5s;
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle9:before {
|
||||
-webkit-animation-delay: -0.4s;
|
||||
animation-delay: -0.4s;
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle10:before {
|
||||
-webkit-animation-delay: -0.3s;
|
||||
animation-delay: -0.3s;
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle11:before {
|
||||
-webkit-animation-delay: -0.2s;
|
||||
animation-delay: -0.2s;
|
||||
}
|
||||
|
||||
.spinner-3 .sk-circle12:before {
|
||||
-webkit-animation-delay: -0.1s;
|
||||
animation-delay: -0.1s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-circleFadeDelay {
|
||||
0%, 39%, 100% { opacity: 0; }
|
||||
40% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes sk-circleFadeDelay {
|
||||
0%, 39%, 100% { opacity: 0; }
|
||||
40% { opacity: 1; }
|
||||
}
|
||||
|
||||
// -------------
|
||||
|
||||
.spinner-4 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 50px auto;
|
||||
|
|
|
|||
532
styles.css
532
styles.css
|
|
@ -28,25 +28,25 @@
|
|||
color: #d16059; }
|
||||
|
||||
.green {
|
||||
background: #61BD6D; }
|
||||
background: #42bd41; }
|
||||
|
||||
.red {
|
||||
background: #D14841; }
|
||||
background: #d01715; }
|
||||
|
||||
.blue {
|
||||
background: #2C82C9; }
|
||||
background: #5778fd; }
|
||||
|
||||
.orange {
|
||||
background: #FBA026; }
|
||||
|
||||
.lightblue {
|
||||
background: #54ACD2; }
|
||||
background: #03a9f5; }
|
||||
|
||||
.yellow {
|
||||
background: #FAC51C; }
|
||||
background: #ffeb3c; }
|
||||
|
||||
.purple {
|
||||
background: #553982; }
|
||||
background: #673bb7; }
|
||||
|
||||
.pink {
|
||||
background: #ffa6e3; }
|
||||
|
|
@ -58,10 +58,10 @@
|
|||
background: #B8312F; }
|
||||
|
||||
.darkgreen {
|
||||
background: #41A85F; }
|
||||
background: #009788; }
|
||||
|
||||
.darkblue {
|
||||
background: #2969B0; }
|
||||
background: #3f51b5; }
|
||||
|
||||
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, nav, section, iframe, label {
|
||||
margin: 0;
|
||||
|
|
@ -167,25 +167,25 @@ pre {
|
|||
color: #d16059; }
|
||||
|
||||
.green {
|
||||
background: #61BD6D; }
|
||||
background: #42bd41; }
|
||||
|
||||
.red {
|
||||
background: #D14841; }
|
||||
background: #d01715; }
|
||||
|
||||
.blue {
|
||||
background: #2C82C9; }
|
||||
background: #5778fd; }
|
||||
|
||||
.orange {
|
||||
background: #FBA026; }
|
||||
|
||||
.lightblue {
|
||||
background: #54ACD2; }
|
||||
background: #03a9f5; }
|
||||
|
||||
.yellow {
|
||||
background: #FAC51C; }
|
||||
background: #ffeb3c; }
|
||||
|
||||
.purple {
|
||||
background: #553982; }
|
||||
background: #673bb7; }
|
||||
|
||||
.pink {
|
||||
background: #ffa6e3; }
|
||||
|
|
@ -197,10 +197,10 @@ pre {
|
|||
background: #B8312F; }
|
||||
|
||||
.darkgreen {
|
||||
background: #41A85F; }
|
||||
background: #009788; }
|
||||
|
||||
.darkblue {
|
||||
background: #2969B0; }
|
||||
background: #3f51b5; }
|
||||
|
||||
.wf-100 {
|
||||
width: 100%; }
|
||||
|
|
@ -3228,8 +3228,26 @@ pre {
|
|||
/* tag */
|
||||
article {
|
||||
background: #fff;
|
||||
padding: 5px;
|
||||
margin: 0; }
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
font-size: 0.9rem; }
|
||||
article h1, article h2, article h3, article h4, article h5, article h6 {
|
||||
font-weight: bold; }
|
||||
article h1 {
|
||||
font-size: 1.5rem; }
|
||||
article h2 {
|
||||
font-size: 1.3rem; }
|
||||
article h3 {
|
||||
font-size: 1.1rem; }
|
||||
article h4, article h5, article h6 {
|
||||
font-size: 1rem; }
|
||||
article pre {
|
||||
margin: 1rem 0 1rem 0; }
|
||||
article pre code {
|
||||
background: none; }
|
||||
article code {
|
||||
padding: 3px;
|
||||
background: #f1f1f1; }
|
||||
article a {
|
||||
color: #8ea4ff;
|
||||
border-bottom: 1px dotted #8ea4ff; }
|
||||
|
|
@ -3238,16 +3256,23 @@ article {
|
|||
article p {
|
||||
line-height: 1.5em; }
|
||||
article ol, article ul {
|
||||
margin-left: 30px; }
|
||||
margin: 0.5rem 0 0.5rem 3rem; }
|
||||
article ul {
|
||||
list-style: disc; }
|
||||
article li {
|
||||
margin: 0.3rem 0 0.3rem 0; }
|
||||
article blockquote {
|
||||
margin: 10px 0 10px 0; }
|
||||
article blockquote p:last-child {
|
||||
margin-bottom: 0; }
|
||||
article img {
|
||||
display: block;
|
||||
margin: 0 auto; }
|
||||
article table {
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #999; }
|
||||
border: 1px solid #999;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1rem; }
|
||||
article table th, article table td {
|
||||
padding: 5px;
|
||||
border: 1px solid #999; }
|
||||
|
|
@ -3264,25 +3289,25 @@ article {
|
|||
color: #d16059; }
|
||||
|
||||
.green {
|
||||
background: #61BD6D; }
|
||||
background: #42bd41; }
|
||||
|
||||
.red {
|
||||
background: #D14841; }
|
||||
background: #d01715; }
|
||||
|
||||
.blue {
|
||||
background: #2C82C9; }
|
||||
background: #5778fd; }
|
||||
|
||||
.orange {
|
||||
background: #FBA026; }
|
||||
|
||||
.lightblue {
|
||||
background: #54ACD2; }
|
||||
background: #03a9f5; }
|
||||
|
||||
.yellow {
|
||||
background: #FAC51C; }
|
||||
background: #ffeb3c; }
|
||||
|
||||
.purple {
|
||||
background: #553982; }
|
||||
background: #673bb7; }
|
||||
|
||||
.pink {
|
||||
background: #ffa6e3; }
|
||||
|
|
@ -3294,10 +3319,10 @@ article {
|
|||
background: #B8312F; }
|
||||
|
||||
.darkgreen {
|
||||
background: #41A85F; }
|
||||
background: #009788; }
|
||||
|
||||
.darkblue {
|
||||
background: #2969B0; }
|
||||
background: #3f51b5; }
|
||||
|
||||
.ipt-wrap {
|
||||
display: table;
|
||||
|
|
@ -3409,23 +3434,20 @@ p {
|
|||
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
|
||||
.spinner-2 {
|
||||
text-align: center; }
|
||||
|
||||
.spinner-2 > div {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #333;
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
animation: sk-bouncedelay 1.4s infinite ease-in-out both; }
|
||||
|
||||
.spinner-2 .bounce1 {
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s; }
|
||||
|
||||
.spinner-2 .bounce2 {
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s; }
|
||||
.spinner-2 > div {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #333;
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
animation: sk-bouncedelay 1.4s infinite ease-in-out both; }
|
||||
.spinner-2 .bounce1 {
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s; }
|
||||
.spinner-2 .bounce2 {
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s; }
|
||||
|
||||
@-webkit-keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% {
|
||||
|
|
@ -3440,139 +3462,6 @@ p {
|
|||
-webkit-transform: scale(1);
|
||||
transform: scale(1); } }
|
||||
.spinner-3 {
|
||||
margin: 50px auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative; }
|
||||
|
||||
.spinner-3 .sk-circle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0; }
|
||||
|
||||
.spinner-3 .sk-circle:before {
|
||||
content: '';
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 15%;
|
||||
height: 15%;
|
||||
background-color: #333;
|
||||
border-radius: 100%;
|
||||
-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
|
||||
animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; }
|
||||
|
||||
.spinner-3 .sk-circle2 {
|
||||
-webkit-transform: rotate(30deg);
|
||||
-ms-transform: rotate(30deg);
|
||||
transform: rotate(30deg); }
|
||||
|
||||
.spinner-3 .sk-circle3 {
|
||||
-webkit-transform: rotate(60deg);
|
||||
-ms-transform: rotate(60deg);
|
||||
transform: rotate(60deg); }
|
||||
|
||||
.spinner-3 .sk-circle4 {
|
||||
-webkit-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg); }
|
||||
|
||||
.spinner-3 .sk-circle5 {
|
||||
-webkit-transform: rotate(120deg);
|
||||
-ms-transform: rotate(120deg);
|
||||
transform: rotate(120deg); }
|
||||
|
||||
.spinner-3 .sk-circle6 {
|
||||
-webkit-transform: rotate(150deg);
|
||||
-ms-transform: rotate(150deg);
|
||||
transform: rotate(150deg); }
|
||||
|
||||
.spinner-3 .sk-circle7 {
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg); }
|
||||
|
||||
.spinner-3 .sk-circle8 {
|
||||
-webkit-transform: rotate(210deg);
|
||||
-ms-transform: rotate(210deg);
|
||||
transform: rotate(210deg); }
|
||||
|
||||
.spinner-3 .sk-circle9 {
|
||||
-webkit-transform: rotate(240deg);
|
||||
-ms-transform: rotate(240deg);
|
||||
transform: rotate(240deg); }
|
||||
|
||||
.spinner-3 .sk-circle10 {
|
||||
-webkit-transform: rotate(270deg);
|
||||
-ms-transform: rotate(270deg);
|
||||
transform: rotate(270deg); }
|
||||
|
||||
.spinner-3 .sk-circle11 {
|
||||
-webkit-transform: rotate(300deg);
|
||||
-ms-transform: rotate(300deg);
|
||||
transform: rotate(300deg); }
|
||||
|
||||
.spinner-3 .sk-circle12 {
|
||||
-webkit-transform: rotate(330deg);
|
||||
-ms-transform: rotate(330deg);
|
||||
transform: rotate(330deg); }
|
||||
|
||||
.spinner-3 .sk-circle2:before {
|
||||
-webkit-animation-delay: -1.1s;
|
||||
animation-delay: -1.1s; }
|
||||
|
||||
.spinner-3 .sk-circle3:before {
|
||||
-webkit-animation-delay: -1s;
|
||||
animation-delay: -1s; }
|
||||
|
||||
.spinner-3 .sk-circle4:before {
|
||||
-webkit-animation-delay: -0.9s;
|
||||
animation-delay: -0.9s; }
|
||||
|
||||
.spinner-3 .sk-circle5:before {
|
||||
-webkit-animation-delay: -0.8s;
|
||||
animation-delay: -0.8s; }
|
||||
|
||||
.spinner-3 .sk-circle6:before {
|
||||
-webkit-animation-delay: -0.7s;
|
||||
animation-delay: -0.7s; }
|
||||
|
||||
.spinner-3 .sk-circle7:before {
|
||||
-webkit-animation-delay: -0.6s;
|
||||
animation-delay: -0.6s; }
|
||||
|
||||
.spinner-3 .sk-circle8:before {
|
||||
-webkit-animation-delay: -0.5s;
|
||||
animation-delay: -0.5s; }
|
||||
|
||||
.spinner-3 .sk-circle9:before {
|
||||
-webkit-animation-delay: -0.4s;
|
||||
animation-delay: -0.4s; }
|
||||
|
||||
.spinner-3 .sk-circle10:before {
|
||||
-webkit-animation-delay: -0.3s;
|
||||
animation-delay: -0.3s; }
|
||||
|
||||
.spinner-3 .sk-circle11:before {
|
||||
-webkit-animation-delay: -0.2s;
|
||||
animation-delay: -0.2s; }
|
||||
|
||||
.spinner-3 .sk-circle12:before {
|
||||
-webkit-animation-delay: -0.1s;
|
||||
animation-delay: -0.1s; }
|
||||
|
||||
@-webkit-keyframes sk-circleFadeDelay {
|
||||
0%, 39%, 100% {
|
||||
opacity: 0; }
|
||||
40% {
|
||||
opacity: 1; } }
|
||||
@keyframes sk-circleFadeDelay {
|
||||
0%, 39%, 100% {
|
||||
opacity: 0; }
|
||||
40% {
|
||||
opacity: 1; } }
|
||||
.spinner-4 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 50px auto;
|
||||
|
|
@ -3620,6 +3509,9 @@ canvas {
|
|||
border: 1px solid #d6d6d6;
|
||||
user-select: none; }
|
||||
|
||||
canvas.chart {
|
||||
width: 100%; }
|
||||
|
||||
/* Global */
|
||||
/* Content Container */
|
||||
/* Content box */
|
||||
|
|
@ -3863,7 +3755,7 @@ input[type="datetime-local"] {
|
|||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: #000;
|
||||
color: #676a6c;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
|
|
@ -3928,7 +3820,7 @@ input[type="file"] {
|
|||
border: solid 1rem #fff;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
color: #000;
|
||||
color: #676a6c;
|
||||
padding: 10px;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
|
|
@ -4067,7 +3959,7 @@ select.plain {
|
|||
background: -o-linear-gradient(top, #fff 0, #fff 100);
|
||||
background: -ms-linear-gradient(top, #fff 0, #fff 100);
|
||||
background: linear-gradient(to bottom, #fff 0, #fff 100);
|
||||
color: #000; }
|
||||
color: #676a6c; }
|
||||
.ac-container > input:checked + label + section {
|
||||
display: inherit; }
|
||||
.ac-container > input + label + section {
|
||||
|
|
@ -4222,7 +4114,7 @@ blockquote {
|
|||
.crumbs-1 li {
|
||||
background: #f5f5ff;
|
||||
border: 1px solid #d6d6d6;
|
||||
padding: 10px;
|
||||
padding: 10px 10px 10px 20px;
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
|
|
@ -4244,7 +4136,7 @@ blockquote {
|
|||
height: 0;
|
||||
border-top: 18px solid transparent;
|
||||
border-bottom: 17px solid transparent;
|
||||
border-left: 14px solid #d6d6d6;
|
||||
border-left: 14px solid #f5f5ff;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -18px;
|
||||
|
|
@ -4510,22 +4402,28 @@ ul.h-list li {
|
|||
display: inherit; }
|
||||
#nav-side input + ul > li:nth-child(n+2) {
|
||||
display: none; }
|
||||
#nav-side > li li {
|
||||
border-top: 1px solid #505050;
|
||||
border-bottom: 1px solid #252525;
|
||||
#nav-side label {
|
||||
display: block;
|
||||
padding: 7px 0 7px 7px;
|
||||
cursor: pointer; }
|
||||
#nav-side > li {
|
||||
color: #fff; }
|
||||
#nav-side > li li:not(:first-child) {
|
||||
background: #444; }
|
||||
#nav-side > li li:first-child {
|
||||
border-bottom: 1px solid #252525; }
|
||||
#nav-side > li li:first-child {
|
||||
padding: 7px 0 7px 7px; }
|
||||
#nav-side > li li a {
|
||||
#nav-side > li a {
|
||||
display: block;
|
||||
padding: 7px 0 7px 7px; }
|
||||
#nav-side > li li a:hover {
|
||||
#nav-side > li a:hover {
|
||||
color: #252525;
|
||||
background: #FBA026; }
|
||||
#nav-side > li li {
|
||||
border-top: 1px solid #505050;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #252525; }
|
||||
#nav-side > li li:not(:first-child) {
|
||||
background: #444; }
|
||||
#nav-side > li li:hover {
|
||||
color: #252525;
|
||||
background: #FBA026;
|
||||
border-top: 1px solid #ffc06e; }
|
||||
#nav-side li:last-child li:last-child {
|
||||
border-bottom: none; }
|
||||
#nav-side .max, #nav-side .min {
|
||||
|
|
@ -4721,7 +4619,7 @@ main {
|
|||
/* pre */
|
||||
/* tag */
|
||||
.meter {
|
||||
height: 20px;
|
||||
height: 15px;
|
||||
/* Can be anything */
|
||||
position: relative;
|
||||
background: none !important; }
|
||||
|
|
@ -4779,6 +4677,9 @@ main {
|
|||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
|
||||
background-image: -webkit-linear-gradient(#f0a3a3, #f42323); }
|
||||
|
||||
.noanimation > span > span, .noanimation > span:after {
|
||||
-webkit-animation: none; }
|
||||
|
||||
.nostripes > span > span, .nostripes > span:after {
|
||||
-webkit-animation: none;
|
||||
background-image: none; }
|
||||
|
|
@ -4861,7 +4762,6 @@ main {
|
|||
display: none; }
|
||||
|
||||
.progress-radial {
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
position: relative;
|
||||
width: 70px;
|
||||
|
|
@ -4904,7 +4804,6 @@ main {
|
|||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
margin-top: 0.3rem;
|
||||
overflow-x: auto; }
|
||||
.box .inner {
|
||||
|
|
@ -4925,20 +4824,30 @@ section.box {
|
|||
box-shadow: 0px 1px 0px 0px #f1f1f1;
|
||||
border: 1px solid #d6d6d6;
|
||||
background: #fff; }
|
||||
section.box.green {
|
||||
border-top: 3px solid #42bd41; }
|
||||
section.box.red {
|
||||
border-top: 3px solid #d01715; }
|
||||
section.box.blue {
|
||||
border-top: 3px solid #5778fd; }
|
||||
section.box.orange {
|
||||
border-top: 3px solid #FBA026; }
|
||||
section.box.red {
|
||||
section.box.lightblue {
|
||||
border-top: 3px solid #03a9f5; }
|
||||
section.box.yellow {
|
||||
border-top: 3px solid #ffeb3c; }
|
||||
section.box.purple {
|
||||
border-top: 3px solid #673bb7; }
|
||||
section.box.pink {
|
||||
border-top: 3px solid #ffa6e3; }
|
||||
section.box.grey {
|
||||
border-top: 3px solid #dcdcdc; }
|
||||
section.box.darkred {
|
||||
border-top: 3px solid #B8312F; }
|
||||
section.box.green {
|
||||
border-top: 3px solid #41A85F; }
|
||||
section.box.blue {
|
||||
border-top: 3px solid #2C82C9; }
|
||||
section.box.purple {
|
||||
border-top: 3px solid #553982; }
|
||||
section.box.darkgreen {
|
||||
border-top: 3px solid #009788; }
|
||||
section.box.darkblue {
|
||||
border-top: 3px solid #2969B0; }
|
||||
section.box.purple {
|
||||
border-top: 3px solid #553982; }
|
||||
border-top: 3px solid #3f51b5; }
|
||||
|
||||
section header > h1 {
|
||||
margin: 10px 10px 0 10px;
|
||||
|
|
@ -4974,103 +4883,87 @@ section > h2 {
|
|||
/* pagination */
|
||||
/* pre */
|
||||
/* tag */
|
||||
.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: 0.3rem 0 0 0.3rem; }
|
||||
.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;
|
||||
border-top: 1px solid #b7b7b7;
|
||||
border-left: 1px solid #b7b7b7;
|
||||
border-right: 1px solid #b7b7b7;
|
||||
background: #f5f5ff;
|
||||
background: -moz-linear-gradient(top, #e0e3eb 0, #ffffff 100);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #ffffff));
|
||||
background: -webkit-linear-gradient(top, #e0e3eb 0, #ffffff 100);
|
||||
background: -o-linear-gradient(top, #e0e3eb 0, #ffffff 100);
|
||||
background: -ms-linear-gradient(top, #e0e3eb 0, #ffffff 100);
|
||||
background: linear-gradient(to bottom, #e0e3eb 0, #ffffff 100);
|
||||
padding: 5px 10px 5px 10px;
|
||||
text-shadow: 1px 1px 1px #ffffff;
|
||||
.tab .tab-links {
|
||||
padding: 0.3rem 0 0 0.3rem; }
|
||||
.tab .tab-links label {
|
||||
text-shadow: 1px 1px 1px #fff;
|
||||
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 {
|
||||
.tab .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 {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
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; }
|
||||
.tab .tab-links li {
|
||||
display: inline-block; }
|
||||
.tab .tab-content > input {
|
||||
display: none; }
|
||||
.tab .tab-content input + div {
|
||||
display: none; }
|
||||
.tab .tab-content input:checked + div {
|
||||
display: inherit; }
|
||||
|
||||
.tabular-2 .tab-links {
|
||||
padding: 0.3rem 0 0 0.3rem; }
|
||||
.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;
|
||||
border: 1px solid #b7b7b7;
|
||||
background: #f5f5ff;
|
||||
background: -moz-linear-gradient(top, #e0e3eb 0, #ffffff 100);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #ffffff));
|
||||
background: -webkit-linear-gradient(top, #e0e3eb 0, #ffffff 100);
|
||||
background: -o-linear-gradient(top, #e0e3eb 0, #ffffff 100);
|
||||
background: -ms-linear-gradient(top, #e0e3eb 0, #ffffff 100);
|
||||
background: linear-gradient(to bottom, #e0e3eb 0, #ffffff 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 {
|
||||
.tab-1 .tab-links {
|
||||
margin: 0;
|
||||
border-bottom: 1px solid #b7b7b7; }
|
||||
.tab-1 .tab-links label {
|
||||
padding: 5px 10px 1px 10px;
|
||||
background: none;
|
||||
overflow: auto; }
|
||||
.tab-1 .tab-links .active, .tab-1 .tab-links .active label {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #fff; }
|
||||
.tab-1 .tab-links .active label {
|
||||
border-top: 1px solid #b7b7b7;
|
||||
border-left: 1px solid #b7b7b7;
|
||||
border-right: 1px solid #b7b7b7; }
|
||||
.tab-1 .tab-links li {
|
||||
margin: 0 5px 0 0; }
|
||||
.tab-1 .tab-content {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
background: #fff;
|
||||
border-left: 1px solid #b7b7b7;
|
||||
border-right: 1px solid #b7b7b7;
|
||||
border-bottom: 1px solid #b7b7b7;
|
||||
padding: 10px; }
|
||||
.tab-1.left {
|
||||
display: flex; }
|
||||
.tab-1.left .tab-links {
|
||||
margin: 0;
|
||||
border: none; }
|
||||
.tab-1.left .tab-links li {
|
||||
display: block;
|
||||
margin-bottom: 20px; }
|
||||
.tab-1.left .tab-links label {
|
||||
padding-bottom: 5px; }
|
||||
.tab-1.left .tab-links .active label {
|
||||
border-bottom: 1px solid #b7b7b7; }
|
||||
.tab-1.left .tab-content {
|
||||
width: 100%;
|
||||
border-top: 1px solid #b7b7b7; }
|
||||
|
||||
.tab-2 .tab-links label {
|
||||
padding: 5px 10px 5px 10px;
|
||||
-moz-box-shadow: inset 1px 1px 0px 0px #fff;
|
||||
-webkit-box-shadow: inset 1px 1px 0px 0px #fff;
|
||||
box-shadow: inset 1px 1px 0px 0px #fff;
|
||||
border: 1px solid #b7b7b7;
|
||||
background: #f5f5ff;
|
||||
background: -moz-linear-gradient(top, #e0e3eb 0, #fff 100);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #fff));
|
||||
background: -webkit-linear-gradient(top, #e0e3eb 0, #fff 100);
|
||||
background: -o-linear-gradient(top, #e0e3eb 0, #fff 100);
|
||||
background: -ms-linear-gradient(top, #e0e3eb 0, #fff 100);
|
||||
background: linear-gradient(to bottom, #e0e3eb 0, #fff 100); }
|
||||
.tab-2 .tab-links li {
|
||||
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; }
|
||||
.tab-2 .tab-links .active a, .tab-2 .tab-links label:hover {
|
||||
background: #fff;
|
||||
background: -moz-linear-gradient(top, #fff 0, #f5f5ff 100);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100, #f5f5ff));
|
||||
background: -webkit-linear-gradient(top, #fff 0, #f5f5ff 100);
|
||||
background: -o-linear-gradient(top, #fff 0, #f5f5ff 100);
|
||||
background: -ms-linear-gradient(top, #fff 0, #f5f5ff 100);
|
||||
background: linear-gradient(to bottom, #fff 0, #f5f5ff 100); }
|
||||
|
||||
/* Global */
|
||||
/* Content Container */
|
||||
|
|
@ -5105,22 +4998,30 @@ table .sort-asc, table .sort-desc {
|
|||
color: #fff; }
|
||||
.table thead {
|
||||
color: #fff; }
|
||||
.table.green caption, .table.green thead {
|
||||
background: #42bd41; }
|
||||
.table.red caption, .table.red thead {
|
||||
background: #d01715; }
|
||||
.table.blue caption, .table.blue thead {
|
||||
background: #5778fd; }
|
||||
.table.orange caption, .table.orange thead {
|
||||
background: #FBA026; }
|
||||
.table.red caption, .table.red thead {
|
||||
.table.lightblue caption, .table.lightblue thead {
|
||||
background: #03a9f5; }
|
||||
.table.yellow caption, .table.yellow thead {
|
||||
background: #ffeb3c; }
|
||||
.table.purple caption, .table.purple thead {
|
||||
background: #673bb7; }
|
||||
.table.pink caption, .table.pink thead {
|
||||
background: #ffa6e3; }
|
||||
.table.grey caption, .table.grey thead {
|
||||
background: #dcdcdc; }
|
||||
.table.darkred caption, .table.darkred thead {
|
||||
background: #B8312F; }
|
||||
.table.green caption, .table.green thead {
|
||||
background: #41A85F; }
|
||||
.table.white caption, .table.white thead {
|
||||
background: #fff; }
|
||||
.table.blue caption, .table.blue thead {
|
||||
background: #2C82C9; }
|
||||
.table.purple caption, .table.purple thead {
|
||||
background: #553982; }
|
||||
.table.darkgreen caption, .table.darkgreen thead {
|
||||
background: #009788; }
|
||||
.table.darkblue caption, .table.darkblue thead {
|
||||
background: #2969B0; }
|
||||
.table.purple caption, .table.purple thead {
|
||||
background: #553982; }
|
||||
background: #3f51b5; }
|
||||
|
||||
table.table {
|
||||
-moz-box-sizing: border-box;
|
||||
|
|
@ -5246,13 +5147,16 @@ table.list td {
|
|||
/* pagination */
|
||||
/* pre */
|
||||
/* tag */
|
||||
.tag {
|
||||
span.tag {
|
||||
cursor: pointer;
|
||||
border: 1px solid #d6d6d6;
|
||||
padding: 5px 10px 5px 10px;
|
||||
font-size: 0.7rem;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box;
|
||||
padding: 4px 6px 4px 6px;
|
||||
font-size: 0.6rem;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
line-height: 1rem; }
|
||||
display: inline-block; }
|
||||
|
||||
/*# sourceMappingURL=styles.css.map */
|
||||
|
|
|
|||
162
tab.css
162
tab.css
|
|
@ -18,102 +18,86 @@
|
|||
/* pagination */
|
||||
/* pre */
|
||||
/* tag */
|
||||
.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: 0.3rem 0 0 0.3rem; }
|
||||
.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;
|
||||
border-top: 1px solid #b7b7b7;
|
||||
border-left: 1px solid #b7b7b7;
|
||||
border-right: 1px solid #b7b7b7;
|
||||
background: #f5f5ff;
|
||||
background: -moz-linear-gradient(top, #e0e3eb 0, #ffffff 100);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #ffffff));
|
||||
background: -webkit-linear-gradient(top, #e0e3eb 0, #ffffff 100);
|
||||
background: -o-linear-gradient(top, #e0e3eb 0, #ffffff 100);
|
||||
background: -ms-linear-gradient(top, #e0e3eb 0, #ffffff 100);
|
||||
background: linear-gradient(to bottom, #e0e3eb 0, #ffffff 100);
|
||||
padding: 5px 10px 5px 10px;
|
||||
text-shadow: 1px 1px 1px #ffffff;
|
||||
.tab .tab-links {
|
||||
padding: 0.3rem 0 0 0.3rem; }
|
||||
.tab .tab-links label {
|
||||
text-shadow: 1px 1px 1px #fff;
|
||||
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 {
|
||||
.tab .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 {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
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; }
|
||||
.tab .tab-links li {
|
||||
display: inline-block; }
|
||||
.tab .tab-content > input {
|
||||
display: none; }
|
||||
.tab .tab-content input + div {
|
||||
display: none; }
|
||||
.tab .tab-content input:checked + div {
|
||||
display: inherit; }
|
||||
|
||||
.tabular-2 .tab-links {
|
||||
padding: 0.3rem 0 0 0.3rem; }
|
||||
.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;
|
||||
border: 1px solid #b7b7b7;
|
||||
background: #f5f5ff;
|
||||
background: -moz-linear-gradient(top, #e0e3eb 0, #ffffff 100);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #ffffff));
|
||||
background: -webkit-linear-gradient(top, #e0e3eb 0, #ffffff 100);
|
||||
background: -o-linear-gradient(top, #e0e3eb 0, #ffffff 100);
|
||||
background: -ms-linear-gradient(top, #e0e3eb 0, #ffffff 100);
|
||||
background: linear-gradient(to bottom, #e0e3eb 0, #ffffff 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 {
|
||||
.tab-1 .tab-links {
|
||||
margin: 0;
|
||||
border-bottom: 1px solid #b7b7b7; }
|
||||
.tab-1 .tab-links label {
|
||||
padding: 5px 10px 1px 10px;
|
||||
background: none;
|
||||
overflow: auto; }
|
||||
.tab-1 .tab-links .active, .tab-1 .tab-links .active label {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #fff; }
|
||||
.tab-1 .tab-links .active label {
|
||||
border-top: 1px solid #b7b7b7;
|
||||
border-left: 1px solid #b7b7b7;
|
||||
border-right: 1px solid #b7b7b7; }
|
||||
.tab-1 .tab-links li {
|
||||
margin: 0 5px 0 0; }
|
||||
.tab-1 .tab-content {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
background: #fff;
|
||||
border-left: 1px solid #b7b7b7;
|
||||
border-right: 1px solid #b7b7b7;
|
||||
border-bottom: 1px solid #b7b7b7;
|
||||
padding: 10px; }
|
||||
.tab-1.left {
|
||||
display: flex; }
|
||||
.tab-1.left .tab-links {
|
||||
margin: 0;
|
||||
border: none; }
|
||||
.tab-1.left .tab-links li {
|
||||
display: block;
|
||||
margin-bottom: 20px; }
|
||||
.tab-1.left .tab-links label {
|
||||
padding-bottom: 5px; }
|
||||
.tab-1.left .tab-links .active label {
|
||||
border-bottom: 1px solid #b7b7b7; }
|
||||
.tab-1.left .tab-content {
|
||||
width: 100%;
|
||||
border-top: 1px solid #b7b7b7; }
|
||||
|
||||
.tab-2 .tab-links label {
|
||||
padding: 5px 10px 5px 10px;
|
||||
-moz-box-shadow: inset 1px 1px 0px 0px #fff;
|
||||
-webkit-box-shadow: inset 1px 1px 0px 0px #fff;
|
||||
box-shadow: inset 1px 1px 0px 0px #fff;
|
||||
border: 1px solid #b7b7b7;
|
||||
background: #f5f5ff;
|
||||
background: -moz-linear-gradient(top, #e0e3eb 0, #fff 100);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #fff));
|
||||
background: -webkit-linear-gradient(top, #e0e3eb 0, #fff 100);
|
||||
background: -o-linear-gradient(top, #e0e3eb 0, #fff 100);
|
||||
background: -ms-linear-gradient(top, #e0e3eb 0, #fff 100);
|
||||
background: linear-gradient(to bottom, #e0e3eb 0, #fff 100); }
|
||||
.tab-2 .tab-links li {
|
||||
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; }
|
||||
.tab-2 .tab-links .active a, .tab-2 .tab-links label:hover {
|
||||
background: #fff;
|
||||
background: -moz-linear-gradient(top, #fff 0, #f5f5ff 100);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100, #f5f5ff));
|
||||
background: -webkit-linear-gradient(top, #fff 0, #f5f5ff 100);
|
||||
background: -o-linear-gradient(top, #fff 0, #f5f5ff 100);
|
||||
background: -ms-linear-gradient(top, #fff 0, #f5f5ff 100);
|
||||
background: linear-gradient(to bottom, #fff 0, #f5f5ff 100); }
|
||||
|
||||
/*# sourceMappingURL=tab.css.map */
|
||||
|
|
|
|||
173
tab.scss
173
tab.scss
|
|
@ -1,100 +1,119 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
.tabular {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
.tab {
|
||||
.tab-links {
|
||||
@include box-sizing(border-box);
|
||||
padding: 0.3rem 0 0 0.3rem;
|
||||
|
||||
label {
|
||||
text-shadow: 1px 1px 1px #fff;
|
||||
font-size: 0.9em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active a {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-links label {
|
||||
@include box-shadow-out(#ffffff);
|
||||
border-top: 1px solid $content-border-color;
|
||||
.tab-content {
|
||||
> input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input + div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input:checked + div {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-1 {
|
||||
.tab-links {
|
||||
margin: 0;
|
||||
border-bottom: 1px solid $content-border-color;
|
||||
|
||||
label {
|
||||
padding: 5px 10px 1px 10px;
|
||||
background: none;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.active, .active label {
|
||||
background: $content-box-background-color;
|
||||
border-bottom: 1px solid $content-box-background-color;
|
||||
}
|
||||
|
||||
.active label {
|
||||
border-top: 1px solid $content-border-color;
|
||||
border-left: 1px solid $content-border-color;
|
||||
border-right: 1px solid $content-border-color;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
@include box-sizing(border-box);
|
||||
background: $content-box-background-color;
|
||||
border-left: 1px solid $content-border-color;
|
||||
border-right: 1px solid $content-border-color;
|
||||
@include gradient-top-bottom(#e0e3eb, 0, #ffffff, 100, $content-background-color);
|
||||
padding: 5px 10px 5px 10px;
|
||||
text-shadow: 1px 1px 1px #ffffff;
|
||||
font-size: 0.9em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-links .active a, .tab-links label:hover {
|
||||
@include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
|
||||
}
|
||||
|
||||
.tab-links .active a {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.tab-links li {
|
||||
@include box-sizing(border-box);
|
||||
display: inline-block;
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
@include box-sizing(border-box);
|
||||
background: #ffffff;
|
||||
border: 1px solid $content-border-color;
|
||||
border-bottom: 1px solid $content-border-color;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
> input {
|
||||
display: none;
|
||||
&.left {
|
||||
display: flex;
|
||||
|
||||
.tab-links {
|
||||
margin: 0;
|
||||
border: none;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.active label {
|
||||
border-bottom: 1px solid $content-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
input + div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input:checked + div {
|
||||
display: inherit;
|
||||
|
||||
.tab-content {
|
||||
width: 100%;
|
||||
border-top: 1px solid $content-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabular-2 {
|
||||
.tab-2 {
|
||||
.tab-links {
|
||||
padding: 0.3rem 0 0 0.3rem;
|
||||
}
|
||||
label {
|
||||
padding: 5px 10px 5px 10px;
|
||||
@include box-shadow-out(#fff);
|
||||
border: 1px solid $content-border-color;
|
||||
@include gradient-top-bottom(#e0e3eb, 0, #fff, 100, $content-background-color);
|
||||
}
|
||||
|
||||
.tab-links label {
|
||||
@include box-shadow-out(#ffffff);
|
||||
border: 1px solid $content-border-color;
|
||||
@include gradient-top-bottom(#e0e3eb, 0, #ffffff, 100, $content-background-color);
|
||||
padding: 5px 10px 5px 10px;
|
||||
text-shadow: 1px 1px 1px #ffffff;
|
||||
font-size: 0.9em;
|
||||
cursor: pointer;
|
||||
li {
|
||||
margin: 0 5px 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-links .active a, .tab-links label:hover {
|
||||
@include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
|
||||
}
|
||||
|
||||
.tab-links .active a {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.tab-links li {
|
||||
@include box-sizing(border-box);
|
||||
display: inline-block;
|
||||
margin: 0 5px 15px 0;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
> input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input + div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input:checked + div {
|
||||
display: inherit;
|
||||
}
|
||||
@include gradient-top-bottom(#fff, 0, $content-background-color, 100, #fff);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
32
table.css
32
table.css
|
|
@ -31,22 +31,30 @@ table .sort-asc, table .sort-desc {
|
|||
color: #fff; }
|
||||
.table thead {
|
||||
color: #fff; }
|
||||
.table.green caption, .table.green thead {
|
||||
background: #42bd41; }
|
||||
.table.red caption, .table.red thead {
|
||||
background: #d01715; }
|
||||
.table.blue caption, .table.blue thead {
|
||||
background: #5778fd; }
|
||||
.table.orange caption, .table.orange thead {
|
||||
background: #FBA026; }
|
||||
.table.red caption, .table.red thead {
|
||||
.table.lightblue caption, .table.lightblue thead {
|
||||
background: #03a9f5; }
|
||||
.table.yellow caption, .table.yellow thead {
|
||||
background: #ffeb3c; }
|
||||
.table.purple caption, .table.purple thead {
|
||||
background: #673bb7; }
|
||||
.table.pink caption, .table.pink thead {
|
||||
background: #ffa6e3; }
|
||||
.table.grey caption, .table.grey thead {
|
||||
background: #dcdcdc; }
|
||||
.table.darkred caption, .table.darkred thead {
|
||||
background: #B8312F; }
|
||||
.table.green caption, .table.green thead {
|
||||
background: #41A85F; }
|
||||
.table.white caption, .table.white thead {
|
||||
background: #fff; }
|
||||
.table.blue caption, .table.blue thead {
|
||||
background: #2C82C9; }
|
||||
.table.purple caption, .table.purple thead {
|
||||
background: #553982; }
|
||||
.table.darkgreen caption, .table.darkgreen thead {
|
||||
background: #009788; }
|
||||
.table.darkblue caption, .table.darkblue thead {
|
||||
background: #2969B0; }
|
||||
.table.purple caption, .table.purple thead {
|
||||
background: #553982; }
|
||||
background: #3f51b5; }
|
||||
|
||||
table.table {
|
||||
-moz-box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -20,8 +20,9 @@ table .sort-asc, table .sort-desc {
|
|||
}
|
||||
|
||||
@each $tuple in
|
||||
'orange' #FBA026, 'red' #B8312F, 'green' #41A85F, 'white' #fff,
|
||||
'blue' #2C82C9, 'purple' #553982, 'darkblue' #2969B0, 'purple' #553982 {
|
||||
'green' #42bd41, 'red' #d01715, 'blue' #5778fd,
|
||||
'orange' #FBA026, 'lightblue' #03a9f5, 'yellow' #ffeb3c, 'purple' #673bb7, 'pink' #ffa6e3, 'grey' #dcdcdc,
|
||||
'darkred' #B8312F, 'darkgreen' #009788, 'darkblue' #3f51b5 {
|
||||
&.#{nth($tuple, 1)} {
|
||||
caption, thead {
|
||||
background: #{nth($tuple, 2)};
|
||||
|
|
|
|||
15
tag.css
15
tag.css
|
|
@ -18,13 +18,16 @@
|
|||
/* pagination */
|
||||
/* pre */
|
||||
/* tag */
|
||||
.tag {
|
||||
span.tag {
|
||||
cursor: pointer;
|
||||
border: 1px solid #d6d6d6;
|
||||
padding: 5px 10px 5px 10px;
|
||||
font-size: 0.7rem;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box;
|
||||
padding: 4px 6px 4px 6px;
|
||||
font-size: 0.6rem;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
line-height: 1rem; }
|
||||
display: inline-block; }
|
||||
|
||||
/*# sourceMappingURL=tag.css.map */
|
||||
|
|
|
|||
7
tag.scss
7
tag.scss
|
|
@ -1,11 +1,10 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
.tag {
|
||||
span.tag {
|
||||
cursor: pointer;
|
||||
border: $tag-border solid $tag-border-color;
|
||||
padding: 5px 10px 5px 10px;
|
||||
@include border-radius(4px);
|
||||
padding: 4px 6px 4px 6px;
|
||||
font-size: $tag-font-size;
|
||||
color: $tag-color;
|
||||
display: inline-block;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -610,7 +610,7 @@
|
|||
<h1>Tabs</h1>
|
||||
<h2>With Container</h2>
|
||||
<section class="box-container wf-100">
|
||||
<div class="tabular">
|
||||
<div class="tab tab-1">
|
||||
<ul class="tab-links">
|
||||
<li><label for="c-tab-1">TAAAB</label></li>
|
||||
<li class="active"><label for="c-tab-2">TAAAB</label></li>
|
||||
|
|
@ -630,7 +630,7 @@
|
|||
|
||||
<h2>Without Container</h2>
|
||||
<section class="box-container wf-100">
|
||||
<div class="tabular-2">
|
||||
<div class="tab tab-2">
|
||||
<ul class="tab-links">
|
||||
<li><label for="c-tab2-1">TAAAB</label></li>
|
||||
<li class="active"><label for="c-tab2-2">TAAAB</label></li>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<section class="box red wf-100">
|
||||
<header><h1>Change + Redirect</h1></header>
|
||||
<div class="inner">
|
||||
<select id="t-selector" name="unit" data-action='[
|
||||
{
|
||||
"listener": "change", "action": [
|
||||
{
|
||||
"key": 1, "type": "redirect", "uri": "{%}&u={#t-selector}", "target": "self"
|
||||
}
|
||||
]
|
||||
}
|
||||
]' title="Unit selector">
|
||||
<option value="test">MTest
|
||||
<option value="test2">MTest2
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -80,7 +80,6 @@
|
|||
</tbody>
|
||||
</table>
|
||||
<h6>Headline6</h6>
|
||||
<h7>Content</h7>
|
||||
<p><span class="tooltip">Tooltip<i>My Tooltip asd a sd <br>asdfsdf adf asd</i></span> ipsum dolor sit amet,
|
||||
consectetur adipiscing elit. Duis posuere, nulla eu condimentum eleifend, nulla magna viverra risus, ut
|
||||
faucibus libero libero nec est. Nunc quis rhoncus est, ac sodales lorem. Suspendisse convallis, massa eu
|
||||
|
|
|
|||
681
tests/app/chart_area.php
Normal file
681
tests/app/chart_area.php
Normal file
|
|
@ -0,0 +1,681 @@
|
|||
<section style="float: left; width: 33%;">
|
||||
<h1>Line Chart</h1>
|
||||
<div id="line-chart" class="chart chart-line" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
<script>
|
||||
var c, chart, data, dataGen, i, k, count;
|
||||
|
||||
dataGen = (function ()
|
||||
{
|
||||
return (function (id)
|
||||
{
|
||||
return function ()
|
||||
{
|
||||
var tempData, j, nums, y1Seed;
|
||||
nums = Math.ceil(Math.random() * 50) + 4;
|
||||
y1Seed = Math.round(Math.random() * 20);
|
||||
tempData = {
|
||||
id: id,
|
||||
name: "Dataset " + id,
|
||||
points: (function ()
|
||||
{
|
||||
var k, ref, results, prev, counter = 0;
|
||||
results = [];
|
||||
for (j = k = 1, ref = nums; 1 <= ref ? k <= ref : k >= ref; j = 1 <= ref ? ++k : --k) {
|
||||
if (data.length > 0) {
|
||||
if (typeof data[count - 2].points !== 'undefined' && data[count - 2].points.length > counter && typeof data[count - 2].points[counter].y !== 'undefined') {
|
||||
prev = data[count - 2].points[counter].y;
|
||||
} else {
|
||||
prev = 0;
|
||||
}
|
||||
} else {
|
||||
prev = 0;
|
||||
}
|
||||
|
||||
counter++;
|
||||
|
||||
results.push({
|
||||
x: j,
|
||||
y: y1Seed + Math.round(Math.random() * 5),
|
||||
y0: prev
|
||||
});
|
||||
}
|
||||
|
||||
return results;
|
||||
})()
|
||||
};
|
||||
id = id + 1;
|
||||
return tempData;
|
||||
};
|
||||
})(1);
|
||||
})();
|
||||
data = [];
|
||||
for (i = k = 1; k <= 3; i = ++k) {
|
||||
count = i;
|
||||
data.push(dataGen());
|
||||
}
|
||||
|
||||
var linechart = new jsOMS.Chart.LineChart('line-chart');
|
||||
linechart.setData(data);
|
||||
linechart.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Area Chart</h1>
|
||||
<div id="area-chart" class="chart chart-area" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var c, chart, data, dataGen, i, k, count;
|
||||
|
||||
data = [];
|
||||
for (i = k = 1; k <= 1; i = ++k) {
|
||||
count = i;
|
||||
data.push(dataGen());
|
||||
}
|
||||
|
||||
var areachart = new jsOMS.Chart.AreaChart('area-chart');
|
||||
areachart.setData(data);
|
||||
areachart.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Stacked Area Chart</h1>
|
||||
<div id="stackedarea-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var c, chart, data, dataGen, i, k, count;
|
||||
|
||||
data = [];
|
||||
for (i = k = 1; k <= 3; i = ++k) {
|
||||
count = i;
|
||||
data.push(dataGen());
|
||||
}
|
||||
|
||||
var stackedareachart = new jsOMS.Chart.StackedAreaChart('stackedarea-chart');
|
||||
stackedareachart.setData(data);
|
||||
stackedareachart.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Diff Area Chart</h1>
|
||||
<div id="diffarea-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var c, chart, data, dataGen, i, k, count;
|
||||
|
||||
dataGen2 = (function ()
|
||||
{
|
||||
return (function (id)
|
||||
{
|
||||
return function ()
|
||||
{
|
||||
var tempData, j, nums, y1Seed;
|
||||
nums = Math.ceil(Math.random() * 50) + 4;
|
||||
y1Seed = Math.round(Math.random() * 20);
|
||||
tempData = {
|
||||
id: id,
|
||||
name: "Dataset " + id,
|
||||
points: (function ()
|
||||
{
|
||||
var k, ref, results, prev, counter = 0;
|
||||
results = [];
|
||||
for (j = k = 1, ref = nums; 1 <= ref ? k <= ref : k >= ref; j = 1 <= ref ? ++k : --k) {
|
||||
if (data.length > 0) {
|
||||
if (typeof data[count - 2].points !== 'undefined' && data[count - 2].points.length > counter && typeof data[count - 2].points[counter].y !== 'undefined') {
|
||||
prev = data[count - 2].points[counter].y;
|
||||
} else {
|
||||
prev = 0;
|
||||
}
|
||||
} else {
|
||||
prev = 0;
|
||||
}
|
||||
|
||||
counter++;
|
||||
|
||||
let temp = 0;
|
||||
|
||||
results.push({
|
||||
x: j,
|
||||
y: temp = y1Seed + Math.round(Math.random() * 5),
|
||||
y0: temp - Math.round(Math.max(1, Math.random() * 5))
|
||||
});
|
||||
}
|
||||
|
||||
return results;
|
||||
})()
|
||||
};
|
||||
id = id + 1;
|
||||
return tempData;
|
||||
};
|
||||
})(1);
|
||||
})();
|
||||
|
||||
data = [];
|
||||
for (i = k = 1; k <= 1; i = ++k) {
|
||||
count = i;
|
||||
data.push(dataGen2());
|
||||
}
|
||||
|
||||
var diffareachart = new jsOMS.Chart.DiffAreaChart('diffarea-chart');
|
||||
diffareachart.setData(data);
|
||||
diffareachart.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Bar Chart</h1>
|
||||
<div id="bar-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
<script>
|
||||
var chart;
|
||||
|
||||
var n = 1, // number of layers
|
||||
m = 10, // number of samples per layer
|
||||
stack = d3.layout.stack(),
|
||||
layers = stack(d3.range(n).map(function ()
|
||||
{
|
||||
return bumpLayer(m, .1);
|
||||
}));
|
||||
|
||||
function bumpLayer(n, o)
|
||||
{
|
||||
function bump(a)
|
||||
{
|
||||
var x = 1 / (.1 + Math.random()),
|
||||
y = 2 * Math.random() - .5,
|
||||
z = 10 / (.1 + Math.random());
|
||||
|
||||
for (var i = 0; i < n; i++) {
|
||||
var w = (i / n - y) * z;
|
||||
a[i] += x * Math.exp(-w * w);
|
||||
}
|
||||
}
|
||||
|
||||
var a = [], i;
|
||||
for (i = 0; i < n; ++i) a[i] = o + o * Math.random();
|
||||
for (i = 0; i < 5; ++i) bump(a);
|
||||
return a.map(function (d, i)
|
||||
{
|
||||
return {x: i, y: Math.max(0, d)};
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < layers.length; i++) {
|
||||
layers[i] = {
|
||||
id: i,
|
||||
name: 'Dataset ' + i,
|
||||
points: layers[i]
|
||||
};
|
||||
}
|
||||
|
||||
var barchart = new jsOMS.Chart.BarChart('bar-chart');
|
||||
barchart.setData(layers);
|
||||
barchart.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Grouped Bar Chart</h1>
|
||||
<div id="groupedbar-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var chart;
|
||||
|
||||
var n = 3, // number of layers
|
||||
m = 5, // number of samples per layer
|
||||
stack = d3.layout.stack(),
|
||||
layers = stack(d3.range(n).map(function ()
|
||||
{
|
||||
return bumpLayer(m, .1);
|
||||
}));
|
||||
for (let i = 0; i < layers.length; i++) {
|
||||
layers[i] = {
|
||||
id: i,
|
||||
name: 'Dataset ' + i,
|
||||
points: layers[i]
|
||||
};
|
||||
}
|
||||
|
||||
var groupedbarchart = new jsOMS.Chart.GroupedBarChart('groupedbar-chart');
|
||||
groupedbarchart.setData(layers);
|
||||
groupedbarchart.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Stacked Bar Chart</h1>
|
||||
<div id="stackedbar-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var chart;
|
||||
|
||||
var n = 3, // number of layers
|
||||
m = 5, // number of samples per layer
|
||||
stack = d3.layout.stack(),
|
||||
layers = stack(d3.range(n).map(function ()
|
||||
{
|
||||
return bumpLayer(m, .1);
|
||||
}));
|
||||
|
||||
for (let i = 0; i < layers.length; i++) {
|
||||
layers[i] = {
|
||||
id: i,
|
||||
name: 'Dataset ' + i,
|
||||
points: layers[i]
|
||||
};
|
||||
}
|
||||
|
||||
var stackedbarchart = new jsOMS.Chart.StackedBarChart('stackedbar-chart');
|
||||
stackedbarchart.setData(layers);
|
||||
stackedbarchart.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Vertical Waterfall Chart</h1>
|
||||
<div id="vwaterfall-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var vwaterfallchart = new jsOMS.Chart.VWaterfallChart('vwaterfall-chart');
|
||||
vwaterfallchart.setData([
|
||||
{name: 'EBIT', value: 100},
|
||||
{name: 'two', value: -20},
|
||||
{name: 'three', value: 5},
|
||||
{name: 'four', value: -7}]);
|
||||
vwaterfallchart.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Waterfall Chart</h1>
|
||||
<div id="waterfall-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var waterfallchart = new jsOMS.Chart.WaterfallChart('waterfall-chart');
|
||||
waterfallchart.setData([
|
||||
{name: 'EBIT', value: 100},
|
||||
{name: 'two', value: -20},
|
||||
{name: 'three', value: 5},
|
||||
{name: 'four', value: -7}]);
|
||||
waterfallchart.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Column Chart</h1>
|
||||
<div id="column-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var chart;
|
||||
|
||||
var n = 1, // number of layers
|
||||
m = 30, // number of samples per layer
|
||||
stack = d3.layout.stack(),
|
||||
layers = stack(d3.range(n).map(function ()
|
||||
{
|
||||
return bumpLayer(m, .1);
|
||||
}));
|
||||
|
||||
for (let i = 0; i < layers.length; i++) {
|
||||
layers[i] = {
|
||||
id: i,
|
||||
name: 'Dataset ' + i,
|
||||
points: layers[i]
|
||||
};
|
||||
}
|
||||
|
||||
var columnchart = new jsOMS.Chart.ColumnChart('column-chart');
|
||||
columnchart.setData(layers);
|
||||
columnchart.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Grouped Column Chart</h1>
|
||||
<div id="groupedcolumn-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var chart;
|
||||
|
||||
var n = 3, // number of layers
|
||||
m = 10, // number of samples per layer
|
||||
stack = d3.layout.stack(),
|
||||
layers = stack(d3.range(n).map(function ()
|
||||
{
|
||||
return bumpLayer(m, .1);
|
||||
}));
|
||||
|
||||
for (let i = 0; i < layers.length; i++) {
|
||||
layers[i] = {
|
||||
id: i,
|
||||
name: 'Dataset ' + i,
|
||||
points: layers[i]
|
||||
};
|
||||
}
|
||||
|
||||
var groupedcolumnchart = new jsOMS.Chart.GroupedColumnChart('groupedcolumn-chart');
|
||||
groupedcolumnchart.setData(layers);
|
||||
groupedcolumnchart.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Stacked Column Chart</h1>
|
||||
<div id="stackedcolumn-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var chart;
|
||||
|
||||
var n = 3, // number of layers
|
||||
m = 30, // number of samples per layer
|
||||
stack = d3.layout.stack(),
|
||||
layers = stack(d3.range(n).map(function ()
|
||||
{
|
||||
return bumpLayer(m, .1);
|
||||
}));
|
||||
|
||||
for (let i = 0; i < layers.length; i++) {
|
||||
layers[i] = {
|
||||
id: i,
|
||||
name: 'Dataset ' + i,
|
||||
points: layers[i]
|
||||
};
|
||||
}
|
||||
|
||||
var stackedcolumnchart = new jsOMS.Chart.StackedColumnChart('stackedcolumn-chart');
|
||||
stackedcolumnchart.setData(layers);
|
||||
stackedcolumnchart.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Pie Chart</h1>
|
||||
<div id="pie-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var c, chart, data, dataGen, i, k, count;
|
||||
|
||||
dataGen = (function ()
|
||||
{
|
||||
return (function (id)
|
||||
{
|
||||
return function ()
|
||||
{
|
||||
var tempData, j, nums, y1Seed;
|
||||
nums = Math.ceil(Math.random() * 5) + 2;
|
||||
y1Seed = Math.round(Math.random() * 10);
|
||||
tempData = {
|
||||
id: id,
|
||||
name: "Dataset " + id,
|
||||
points: (function ()
|
||||
{
|
||||
var k, ref, results, prev;
|
||||
results = [];
|
||||
for (j = k = 1, ref = nums; 1 <= ref ? k <= ref : k >= ref; j = 1 <= ref ? ++k : --k) {
|
||||
results.push({
|
||||
name: 'Name ' + j,
|
||||
value: y1Seed + Math.round(Math.random() * 5),
|
||||
});
|
||||
}
|
||||
|
||||
return results;
|
||||
})()
|
||||
};
|
||||
id = id + 1;
|
||||
return tempData;
|
||||
};
|
||||
})(1);
|
||||
})();
|
||||
data = [];
|
||||
for (i = k = 1; k <= 1; i = ++k) {
|
||||
count = i;
|
||||
data.push(dataGen());
|
||||
}
|
||||
|
||||
var piechart = new jsOMS.Chart.PieChart('pie-chart');
|
||||
piechart.setData(data);
|
||||
piechart.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Donut Chart</h1>
|
||||
<div id="donut-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var c, chart, data, dataGen, i, k, count;
|
||||
|
||||
data = [];
|
||||
for (i = k = 1; k <= 1; i = ++k) {
|
||||
count = i;
|
||||
data.push(dataGen());
|
||||
}
|
||||
|
||||
var donutchart = new jsOMS.Chart.DonutChart('donut-chart');
|
||||
donutchart.setData(data);
|
||||
donutchart.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Stacked Pie Chart</h1>
|
||||
<div id="pie-chart2" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
data = [];
|
||||
for (i = k = 1; k <= 3; i = ++k) {
|
||||
count = i;
|
||||
data.push(dataGen());
|
||||
}
|
||||
|
||||
var piechart2 = new jsOMS.Chart.PieChart('pie-chart2');
|
||||
piechart2.setData(data);
|
||||
piechart2.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Stacked Donut Chart</h1>
|
||||
<div id="donut-chart2" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
data = [];
|
||||
for (i = k = 1; k <= 3; i = ++k) {
|
||||
count = i;
|
||||
data.push(dataGen());
|
||||
}
|
||||
|
||||
var donutchart2 = new jsOMS.Chart.DonutChart('donut-chart2');
|
||||
donutchart2.setData(data);
|
||||
donutchart2.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Gouge Chart</h1>
|
||||
<div id="gouge-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Fill Gouge Chart</h1>
|
||||
<div id="fill-gouge-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Radar Chart</h1>
|
||||
<div id="radar-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Pyramid Chart</h1>
|
||||
<div id="pyramid-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Scatterplot Chart</h1>
|
||||
<div id="scatterplot-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var scatterplotchart = new jsOMS.Chart.ScatterplotChart('scatterplot-chart');
|
||||
scatterplotchart.setData([
|
||||
{
|
||||
id: 1,
|
||||
name: 'One',
|
||||
points: [
|
||||
{x: 5.8, y: 2.7, y0: 5.1},
|
||||
{x: 7.1, y: 3.0, y0: 5.9},
|
||||
{x: 6.3, y: 2.9, y0: 5.6},
|
||||
{x: 6.5, y: 3.0, y0: 5.8},
|
||||
{x: 7.6, y: 3.0, y0: 6.6},
|
||||
{x: 4.9, y: 2.5, y0: 4.5}
|
||||
]
|
||||
}, {
|
||||
id: 2,
|
||||
name: 'Two',
|
||||
points: [
|
||||
{x: 7.3, y: 2.9, y0: 6.3},
|
||||
{x: 6.7, y: 2.5, y0: 5.8},
|
||||
{x: 7.2, y: 3.6, y0: 6.1},
|
||||
{x: 6.5, y: 3.2, y0: 5.1},
|
||||
{x: 6.4, y: 2.7, y0: 5.3},
|
||||
{x: 6.8, y: 3.0, y0: 5.5},
|
||||
{x: 5.7, y: 2.5, y0: 5.0}
|
||||
]
|
||||
}, {
|
||||
id: 3,
|
||||
name: 'Three',
|
||||
points: [
|
||||
{x: 5.8, y: 2.8, y0: 5.1},
|
||||
{x: 6.4, y: 3.2, y0: 5.3},
|
||||
{x: 6.5, y: 3.0, y0: 5.5},
|
||||
{x: 7.7, y: 3.8, y0: 6.7},
|
||||
{x: 7.7, y: 2.6, y0: 6.9},
|
||||
{x: 6.0, y: 2.2, y0: 5.0},
|
||||
{x: 6.9, y: 3.2, y0: 5.7},
|
||||
{x: 5.6, y: 2.8, y0: 4.9}
|
||||
]
|
||||
}]);
|
||||
scatterplotchart.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Boxplot Chart</h1>
|
||||
<div id="boxplot-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Candlestick Chart</h1>
|
||||
<div id="candlestick-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var candlestickchart = new jsOMS.Chart.CandlestickChart('candlestick-chart');
|
||||
candlestickchart.setData([
|
||||
{
|
||||
id: 1,
|
||||
name: 'One',
|
||||
points: [
|
||||
{x: 2, y0: 2.7, y: 5.1, open: 2.8, close: 4},
|
||||
{x: 3, y0: 3.0, y: 5.9, open: 5, close: 4},
|
||||
{x: 4, y0: 2.9, y: 5.6, open: 5, close: 5.6},
|
||||
{x: 5, y0: 3.0, y: 5.8, open: 4, close: 4},
|
||||
{x: 6, y0: 3.0, y: 6.6, open: 5.5, close: 3.5},
|
||||
{x: 7, y0: 2.5, y: 4.5, open: 3, close: 3.2}
|
||||
]
|
||||
}]);
|
||||
candlestickchart.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>OHLC Chart</h1>
|
||||
<div id="highlow-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var ohlcchart = new jsOMS.Chart.OhlcChart('highlow-chart');
|
||||
ohlcchart.setData([
|
||||
{
|
||||
id: 1,
|
||||
name: 'One',
|
||||
points: [
|
||||
{x: 2, y0: 2.7, y: 5.1, open: 2.8, close: 4},
|
||||
{x: 3, y0: 3.0, y: 5.9, open: 5, close: 4},
|
||||
{x: 4, y0: 2.9, y: 5.6, open: 5, close: 5.6},
|
||||
{x: 5, y0: 3.0, y: 5.8, open: 4, close: 4},
|
||||
{x: 6, y0: 3.0, y: 6.6, open: 5.5, close: 3.5},
|
||||
{x: 7, y0: 2.5, y: 4.5, open: 3, close: 3.2}
|
||||
]
|
||||
}]);
|
||||
ohlcchart.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Calendar Chart</h1>
|
||||
<div id="calendar-chart" class="chart" style="width: 100%; height: 70px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
var calendarchart = new jsOMS.Chart.CalendarChart('calendar-chart');
|
||||
calendarchart.setData([
|
||||
{
|
||||
id: 1,
|
||||
name: '2014',
|
||||
points: [
|
||||
{x: '2014-10-01', y: 10732.27},
|
||||
{x: '2014-1-08', y: 15732.27},
|
||||
{x: '2014-09-25', y: 20732.27},
|
||||
{x: '2014-04-30', y: 5732.27},
|
||||
{x: '2014-08-13', y: 12732.27},
|
||||
{x: '2014-08-21', y: 8732.27}
|
||||
]
|
||||
}, {
|
||||
id: 2,
|
||||
name: '2015',
|
||||
points: [
|
||||
{x: '2015-10-01', y: 10732.27},
|
||||
{x: '2015-1-08', y: 15732.27},
|
||||
{x: '2015-09-25', y: 20732.27},
|
||||
{x: '2015-04-30', y: 5732.27},
|
||||
{x: '2015-08-13', y: 12732.27},
|
||||
{x: '2015-08-21', y: 8732.27}
|
||||
]
|
||||
}, {
|
||||
id: 3,
|
||||
name: '2016',
|
||||
points: [
|
||||
{x: '2016-10-01', y: 10732.27},
|
||||
{x: '2016-01-08', y: 15732.27},
|
||||
{x: '2016-09-25', y: 20732.27},
|
||||
{x: '2016-04-30', y: 5732.27},
|
||||
{x: '2016-08-13', y: 12732.27},
|
||||
{x: '2016-08-21', y: 8732.27}
|
||||
]
|
||||
}]);
|
||||
calendarchart.draw();
|
||||
</script>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Gantt Chart</h1>
|
||||
<div id="gantt-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Heatmap Chart</h1>
|
||||
<div id="map-heat-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Bubblemap Chart</h1>
|
||||
<div id="map-bubble-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>Tree Chart</h1>
|
||||
<div id="tree-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
|
||||
<section style="float: left; width: 33%;">
|
||||
<h1>BCG Chart</h1>
|
||||
<div id="bcg-chart" class="chart" style="width: 100%; height: 170px; float: left;"></div>
|
||||
</section>
|
||||
0
tests/app/chart_bcg.php
Normal file
0
tests/app/chart_bcg.php
Normal file
0
tests/app/chart_boxplot.php
Normal file
0
tests/app/chart_boxplot.php
Normal file
0
tests/app/chart_bubblemap.php
Normal file
0
tests/app/chart_bubblemap.php
Normal file
0
tests/app/chart_calendar.php
Normal file
0
tests/app/chart_calendar.php
Normal file
0
tests/app/chart_candlestick.php
Normal file
0
tests/app/chart_candlestick.php
Normal file
0
tests/app/chart_column.php
Normal file
0
tests/app/chart_column.php
Normal file
0
tests/app/chart_gantt.php
Normal file
0
tests/app/chart_gantt.php
Normal file
0
tests/app/chart_gouge.php
Normal file
0
tests/app/chart_gouge.php
Normal file
10
tests/app/chart_line.php
Normal file
10
tests/app/chart_line.php
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="box red wf-100">
|
||||
<header><h1>Line Chart</h1></header>
|
||||
<div class="inner">
|
||||
<canvas class="chart line"></canvas>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
0
tests/app/chart_map.php
Normal file
0
tests/app/chart_map.php
Normal file
0
tests/app/chart_ohlc.php
Normal file
0
tests/app/chart_ohlc.php
Normal file
0
tests/app/chart_pie.php
Normal file
0
tests/app/chart_pie.php
Normal file
0
tests/app/chart_pyramid.php
Normal file
0
tests/app/chart_pyramid.php
Normal file
0
tests/app/chart_radar.php
Normal file
0
tests/app/chart_radar.php
Normal file
0
tests/app/chart_scatterplot.php
Normal file
0
tests/app/chart_scatterplot.php
Normal file
0
tests/app/chart_tree.php
Normal file
0
tests/app/chart_tree.php
Normal file
0
tests/app/chart_waterfall.php
Normal file
0
tests/app/chart_waterfall.php
Normal file
|
|
@ -132,7 +132,7 @@
|
|||
<div class="inputbackground">
|
||||
<input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
|
||||
<div id="input1-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="table red">
|
||||
<table id="a1" class="table darkred">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
|
|
@ -172,7 +172,7 @@
|
|||
<div class="inputbackground">
|
||||
<input autocomplete="off" class="input" id="inputId2" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId2}">
|
||||
<div id="input2-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="table red">
|
||||
<table id="a1" class="table darkred">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
|
|
@ -191,7 +191,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table red">
|
||||
<table class="table darkred">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
|
|
@ -221,7 +221,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="input4-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="table red">
|
||||
<table id="a1" class="table darkred">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
|
|
@ -238,7 +238,7 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<table class="table red">
|
||||
<table class="table darkred">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
|
|
@ -262,7 +262,7 @@
|
|||
<div class="inputbackground">
|
||||
<input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
|
||||
<div id="input3-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="table red">
|
||||
<table id="a1" class="table darkred">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
|
|
|
|||
|
|
@ -69,55 +69,3 @@
|
|||
<section class="box wf-100"> </section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="box wf-100 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-75 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-66 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
|
|
@ -89,6 +89,35 @@
|
|||
<script src="../../../Web/Backend/js/global/ResponseEvents.js"></script>
|
||||
<script src="../../../Web/Backend/js/global/TouchEvents.js"></script>
|
||||
<script src="../../../Web/Backend/js/global/VoiceEvents.js"></script>
|
||||
|
||||
<script src="../../../Resources/d3/d3.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../../../cssOMS/chart/chart.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../cssOMS/chart/chart_line.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../cssOMS/chart/chart_bar.css">
|
||||
<script src="../../../jsOMS/Utils/oLib.js"></script>
|
||||
<script src="../../../jsOMS/Asset/AssetManager.js"></script>
|
||||
<script src="../../../jsOMS/Autoloader.js"></script>
|
||||
<script src="../../../jsOMS/Chart/ChartAbstract.js"></script>
|
||||
<script src="../../../jsOMS/Chart/LineChart.js"></script>
|
||||
<script src="../../../jsOMS/Chart/AreaChart.js"></script>
|
||||
<script src="../../../jsOMS/Chart/DiffAreaChart.js"></script>
|
||||
<script src="../../../jsOMS/Chart/StackedAreaChart.js"></script>
|
||||
<script src="../../../jsOMS/Chart/ColumnChart.js"></script>
|
||||
<script src="../../../jsOMS/Chart/BarChart.js"></script>
|
||||
<script src="../../../jsOMS/Chart/GroupedColumnChart.js"></script>
|
||||
<script src="../../../jsOMS/Chart/GroupedBarChart.js"></script>
|
||||
<script src="../../../jsOMS/Chart/StackedColumnChart.js"></script>
|
||||
<script src="../../../jsOMS/Chart/StackedBarChart.js"></script>
|
||||
<script src="../../../jsOMS/Chart/PieChart.js"></script>
|
||||
<script src="../../../jsOMS/Chart/DonutChart.js"></script>
|
||||
<script src="../../../jsOMS/Chart/WaterfallChart.js"></script>
|
||||
<script src="../../../jsOMS/Chart/VWaterfallChart.js"></script>
|
||||
<script src="../../../jsOMS/Chart/PyramidChart.js"></script>
|
||||
<script src="../../../jsOMS/Chart/ScatterplotChart.js"></script>
|
||||
<script src="../../../jsOMS/Chart/CalendarChart.js"></script>
|
||||
<script src="../../../jsOMS/Chart/CandlestickChart.js"></script>
|
||||
<script src="../../../jsOMS/Chart/OhlcChart.js"></script>
|
||||
|
||||
<script src="../load.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -135,31 +164,100 @@
|
|||
</header>
|
||||
<div id="out">
|
||||
<ul id="nav-side" class="nav" role="navigation">
|
||||
<li><a href="?page=forms">Forms</a></li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><span class="centerText">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
HTML Tests
|
||||
UI Elements
|
||||
<label for="nav-Help">
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=forms">Forms</a></li>
|
||||
<li><a href="?page=article">Articles</a></li>
|
||||
<li><a href="?page=buttons">Buttons</a></li>
|
||||
<li><a href="?page=tags">Tags</a></li>
|
||||
<li><a href="?page=boxes">Boxes</a></li>
|
||||
<li><a href="?page=images">Images</a></li>
|
||||
<li><a href="?page=sliders">Sliders</a></li>
|
||||
<li><a href="?page=panels">Panels</a></li>
|
||||
<li><a href="?page=loaders">Loaders</a></li>
|
||||
<li><a href="?page=grid">Grid</a></li>
|
||||
<li><a href="?page=tabs">Tabs</a></li>
|
||||
<li><a href="?page=breadcrumbs">Breadcrumbs</a></li>
|
||||
<li><a href="?page=progress">Progress</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><span class="centerText">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
Images
|
||||
<label for="nav-Help">
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=images">Images</a></li>
|
||||
<li><a href="?page=sliders">Sliders</a></li>
|
||||
<li><a href="?page=lazyload">Lazyload</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><span class="centerText">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
Tables & Lists
|
||||
<label for="nav-Help">
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=tables">Tables</a></li>
|
||||
<li><a href="?page=lists">Lists</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><span class="centerText">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
Layout
|
||||
<label for="nav-Help">
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=grid">Grid</a></li>
|
||||
<li><a href="?page=sizes">Sizes</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><span class="centerText">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
Interaction
|
||||
<label for="nav-Help">
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=popups">Popups</a></li>
|
||||
<li><a href="?page=notifications">Notifications</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><span class="centerText">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
Views
|
||||
<label for="nav-Help">
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=editor">Editor</a></li>
|
||||
<li><a href="?page=calendar">Calendar</a></li>
|
||||
<li><a href="?page=navigations">Navigations</a></li>
|
||||
|
|
@ -176,12 +274,42 @@
|
|||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=charts">Charts</a></li>
|
||||
<li><a href="?page=3d">3D</a></li>
|
||||
<li><a href="?page=lazyload">Lazyload</a></li>
|
||||
<li><a href="?page=actions">Actions</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><span class="centerText">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
Charts
|
||||
<label for="nav-Help">
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=chart_line">Line Chart</a></li>
|
||||
<li><a href="?page=chart_area">Area Chart</a></li>
|
||||
<li><a href="?page=chart_bar">Bar Chart</a></li>
|
||||
<li><a href="?page=chart_column">Column Chart</a></li>
|
||||
<li><a href="?page=chart_waterfall">Waterfall Chart</a></li>
|
||||
<li><a href="?page=chart_pie">Pie Chart</a></li>
|
||||
<li><a href="?page=chart_radar">Radar Chart</a></li>
|
||||
<li><a href="?page=chart_pyramid">Pyramid Chart</a></li>
|
||||
<li><a href="?page=chart_gouge">Gouge Chart</a></li>
|
||||
<li><a href="?page=chart_scatterplot">Scatterplot Chart</a></li>
|
||||
<li><a href="?page=chart_boxplot">Boxplot Chart</a></li>
|
||||
<li><a href="?page=chart_candlestick">Candlestick Chart</a></li>
|
||||
<li><a href="?page=chart_ohlc">OHLC Chart</a></li>
|
||||
<li><a href="?page=chart_calendar">Calendar Chart</a></li>
|
||||
<li><a href="?page=chart_gantt">Gantt Chart</a></li>
|
||||
<li><a href="?page=chart_bubblemap">Bubblemap</a></li>
|
||||
<li><a href="?page=chart_tree">Tree Chart</a></li>
|
||||
<li><a href="?page=chart_bcg">BCG Chart</a></li>
|
||||
<li><a href="?page=chart_map">Map Chart</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<input type="checkbox" id="nav-trigger" class="nav-trigger" checked>
|
||||
<main>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<img data-lazyload="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height: 1500px"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<img data-lazyload="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<img data-lazyload="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<img data-lazyload="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<img data-lazyload="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<img data-lazyload="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<img data-lazyload="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
0
tests/app/lists.php
Normal file
0
tests/app/lists.php
Normal file
|
|
@ -7,13 +7,19 @@
|
|||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="box wf-100">
|
||||
<div class="meter blue">
|
||||
<div class="spinner-2">
|
||||
<div class="bounce1"></div>
|
||||
<div class="bounce2"></div>
|
||||
<div class="bounce3"></div>
|
||||
</div>
|
||||
<div class="spinner-2">
|
||||
<div class="bounce1"></div>
|
||||
<div class="bounce2"></div>
|
||||
<div class="bounce3"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="box wf-100">
|
||||
<div class="spinner-3"></div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -12,12 +12,14 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<template id="app-message">
|
||||
<div class="log-msg" style="z-index: 11; position: absolute; margin: 0 auto; right: 1%; top: 1%;">
|
||||
<h1 class="log-msg-title"></h1>
|
||||
<div class="log-msg-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
<div id="app-message-container" style="position: absolute; margin: 0 auto; right: 1%; top: 1%;">
|
||||
<template id="app-message">
|
||||
<div class="log-msg" style="z-index: 11; position: relative; margin: 0 auto; right: 0; top: 0; margin-bottom: 10px;">
|
||||
<h1 class="log-msg-title"></h1>
|
||||
<div class="log-msg-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('okButton').addEventListener('click', function() {
|
||||
window.omsApp.notifyManager.send(
|
||||
|
|
|
|||
|
|
@ -56,4 +56,63 @@
|
|||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<section class="box lightblue wf-100">
|
||||
<header><h1>Header</h1></header>
|
||||
<div class="inner">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6">
|
||||
<section class="box yellow wf-100">
|
||||
<header><h1>Header</h1></header>
|
||||
<div class="inner">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<section class="box darkred wf-100">
|
||||
<header><h1>Header</h1></header>
|
||||
<div class="inner">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6">
|
||||
<section class="box darkgreen wf-100">
|
||||
<header><h1>Header</h1></header>
|
||||
<div class="inner">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<section class="box wf-100">
|
||||
<header><h1>Header</h1></header>
|
||||
<div class="inner">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6">
|
||||
<section class="box wf-100">
|
||||
<div class="inner">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
75
tests/app/progress.php
Normal file
75
tests/app/progress.php
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<section class="box wf-100">
|
||||
<div class="inner">
|
||||
<progress value="33" max="100"></progress>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6">
|
||||
<section class="box wf-100">
|
||||
<div class="inner">
|
||||
<div class="meter">
|
||||
<span style="width: 25%"></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<section class="box wf-100">
|
||||
<div class="inner">
|
||||
<div class="meter blue">
|
||||
<span style="width: 50%"></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6">
|
||||
<section class="box wf-100">
|
||||
<div class="inner">
|
||||
<div class="meter orange">
|
||||
<span style="width: 75%"></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<section class="box wf-100">
|
||||
<div class="inner">
|
||||
<div class="meter red">
|
||||
<span style="width: 100%"></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6">
|
||||
<section class="box wf-100">
|
||||
<div class="inner">
|
||||
<div class="meter green nostripes">
|
||||
<span style="width: 50%"></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<section class="box wf-100">
|
||||
<div class="inner">
|
||||
<div class="meter blue noanimation">
|
||||
<span style="width: 66%"></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
51
tests/app/sizes.php
Normal file
51
tests/app/sizes.php
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<section class="box wf-100 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-75 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-66 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box wf-100">
|
||||
<table class="table red">
|
||||
<table class="table darkred">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -189,4 +189,388 @@
|
|||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<table class="table purple" id="table1">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col4</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col4</td>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<table class="table lightblue" id="table2">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col4</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col4</td>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<table class="table darkgreen" id="table1">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col4</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col4</td>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<table class="table darkblue" id="table2">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col4</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col4</td>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<table class="table orange" id="table1">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col4</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col4</td>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<table class="table yellow" id="table2">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col4</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col4</td>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box wf-100">
|
||||
<div class="tabular tabview">
|
||||
<div class="tab tab-1">
|
||||
<ul class="tab-links">
|
||||
<li><label for="c-tab-1">TAAAB</label></li>
|
||||
<li class="active"><label for="c-tab-2">TAAAB</label></li>
|
||||
<li class="active"><label for="c-tab-1">TAAAB</label></li>
|
||||
<li><label for="c-tab-2">TAAAB</label></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<input type="radio" id="c-tab-1" name="tabular-1" checked>
|
||||
|
|
@ -21,10 +21,33 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="box wf-100">
|
||||
<div class="tab tab-1 left">
|
||||
<ul class="tab-links">
|
||||
<li class="active"><label for="c-tab-1-2">TAAAB</label></li>
|
||||
<li><label for="c-tab-2-3">TAAAB</label></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<input type="radio" id="c-tab-1-2" name="tabular-3" checked>
|
||||
<div class="tab">
|
||||
Test content
|
||||
</div>
|
||||
<input type="radio" id="c-tab-2-3" name="tabular-3">
|
||||
<div class="tab tab-2">
|
||||
<p>Test content 2</p><p>asdf</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box wf-100">
|
||||
<div class="tabular-2 tabview">
|
||||
<div class="tab tab-2">
|
||||
<ul class="tab-links">
|
||||
<li><label for="c-tab2-1">TAAAB</label></li>
|
||||
<li class="active"><label for="c-tab2-2">TAAAB</label></li>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user