diff --git a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/_vars.scssc b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/_vars.scssc index ff21688..30be984 100644 Binary files a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/_vars.scssc and b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/_vars.scssc differ diff --git a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/article.scssc b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/article.scssc index 71b2b3d..82ed91f 100644 Binary files a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/article.scssc and b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/article.scssc differ diff --git a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/breadcrumb.scssc b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/breadcrumb.scssc index d694b10..dfd3152 100644 Binary files a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/breadcrumb.scssc and b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/breadcrumb.scssc differ diff --git a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/canvas.scssc b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/canvas.scssc index cb1be29..4abc204 100644 Binary files a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/canvas.scssc and b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/canvas.scssc differ diff --git a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/color.scssc b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/color.scssc index 0954453..a42e5ca 100644 Binary files a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/color.scssc and b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/color.scssc differ diff --git a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/nav.scssc b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/nav.scssc index 570468e..7dfc30a 100644 Binary files a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/nav.scssc and b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/nav.scssc differ diff --git a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/progress.scssc b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/progress.scssc index 4c6201a..771168e 100644 Binary files a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/progress.scssc and b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/progress.scssc differ diff --git a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/section.scssc b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/section.scssc index 4baa05f..17cd0e6 100644 Binary files a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/section.scssc and b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/section.scssc differ diff --git a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/spinner.scssc b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/spinner.scssc index af61af3..04c576b 100644 Binary files a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/spinner.scssc and b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/spinner.scssc differ diff --git a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/tab.scssc b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/tab.scssc index 6e3ef8e..6543e5b 100644 Binary files a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/tab.scssc and b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/tab.scssc differ diff --git a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/table.scssc b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/table.scssc index 8174144..e9b7377 100644 Binary files a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/table.scssc and b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/table.scssc differ diff --git a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/tag.scssc b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/tag.scssc index 292da18..55eaadf 100644 Binary files a/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/tag.scssc and b/.sass-cache/5e591186641690eb707c6871d9b7164b732cda4d/tag.scssc differ diff --git a/_vars.scss b/_vars.scss index b83de6e..4c60164 100644 --- a/_vars.scss +++ b/_vars.scss @@ -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; \ No newline at end of file +$tag-font-size: 0.6rem; \ No newline at end of file diff --git a/accordion.css b/accordion.css index a602400..af56d54 100644 --- a/accordion.css +++ b/accordion.css @@ -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 { diff --git a/article.css b/article.css index 6a28731..b6f3f5c 100644 --- a/article.css +++ b/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; } diff --git a/article.scss b/article.scss index 550b918..0536a25 100644 --- a/article.scss +++ b/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; diff --git a/breadcrumb.css b/breadcrumb.css index d890820..ab2aebd 100644 --- a/breadcrumb.css +++ b/breadcrumb.css @@ -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; diff --git a/breadcrumb.scss b/breadcrumb.scss index 0dd9b63..573030c 100644 --- a/breadcrumb.scss +++ b/breadcrumb.scss @@ -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; diff --git a/canvas.css b/canvas.css index 2d5fc6b..3134e4d 100644 --- a/canvas.css +++ b/canvas.css @@ -23,4 +23,7 @@ canvas { border: 1px solid #d6d6d6; user-select: none; } +canvas.chart { + width: 100%; } + /*# sourceMappingURL=canvas.css.map */ diff --git a/canvas.scss b/canvas.scss index 5726e3b..f7dc363 100644 --- a/canvas.scss +++ b/canvas.scss @@ -5,3 +5,7 @@ canvas { border: $canvas-border solid $canvas-border-color; user-select: none; } + +canvas.chart { + width: 100%; +} diff --git a/chart/chart.css b/chart/chart.css deleted file mode 100644 index 66244af..0000000 --- a/chart/chart.css +++ /dev/null @@ -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)} \ No newline at end of file diff --git a/chart/chart.scss b/chart/chart.scss deleted file mode 100644 index 286a64a..0000000 --- a/chart/chart.scss +++ /dev/null @@ -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)} \ No newline at end of file diff --git a/chart/chart_area.css b/chart/chart_area.css deleted file mode 100644 index 9618847..0000000 --- a/chart/chart_area.css +++ /dev/null @@ -1 +0,0 @@ -/*# sourceMappingURL=chart_area.css.map */ diff --git a/chart/chart_area.scss b/chart/chart_area.scss deleted file mode 100644 index b945288..0000000 --- a/chart/chart_area.scss +++ /dev/null @@ -1,7 +0,0 @@ -svg .area { - fill: steelblue; -} - -svg .stacked { - fill: steelblue; -} \ No newline at end of file diff --git a/chart/chart_bar.css b/chart/chart_bar.css deleted file mode 100644 index d91d029..0000000 --- a/chart/chart_bar.css +++ /dev/null @@ -1,6 +0,0 @@ -svg .positive rect { - fill: darkolivegreen; -} -svg .negative rect { - fill: crimson; -} \ No newline at end of file diff --git a/chart/chart_bar.scss b/chart/chart_bar.scss deleted file mode 100644 index d91d029..0000000 --- a/chart/chart_bar.scss +++ /dev/null @@ -1,6 +0,0 @@ -svg .positive rect { - fill: darkolivegreen; -} -svg .negative rect { - fill: crimson; -} \ No newline at end of file diff --git a/chart/chart_line.css b/chart/chart_line.css deleted file mode 100644 index a57162d..0000000 --- a/chart/chart_line.css +++ /dev/null @@ -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; } diff --git a/chart/chart_line.scss b/chart/chart_line.scss deleted file mode 100644 index ed020b1..0000000 --- a/chart/chart_line.scss +++ /dev/null @@ -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; -} diff --git a/chart/chart_map.css b/chart/chart_map.css deleted file mode 100644 index 44a0414..0000000 --- a/chart/chart_map.css +++ /dev/null @@ -1 +0,0 @@ -/*# sourceMappingURL=chart_map.css.map */ diff --git a/chart/chart_map.scss b/chart/chart_map.scss deleted file mode 100644 index 8b13789..0000000 --- a/chart/chart_map.scss +++ /dev/null @@ -1 +0,0 @@ - diff --git a/chart/chart_pie.css b/chart/chart_pie.css deleted file mode 100644 index 67256d2..0000000 --- a/chart/chart_pie.css +++ /dev/null @@ -1 +0,0 @@ -/*# sourceMappingURL=chart_pie.css.map */ diff --git a/chart/chart_pie.scss b/chart/chart_pie.scss deleted file mode 100644 index 8b13789..0000000 --- a/chart/chart_pie.scss +++ /dev/null @@ -1 +0,0 @@ - diff --git a/chart/chart_radar.css b/chart/chart_radar.css deleted file mode 100644 index ae3cc9e..0000000 --- a/chart/chart_radar.css +++ /dev/null @@ -1 +0,0 @@ -/*# sourceMappingURL=chart_radar.css.map */ diff --git a/chart/chart_radar.scss b/chart/chart_radar.scss deleted file mode 100644 index 8b13789..0000000 --- a/chart/chart_radar.scss +++ /dev/null @@ -1 +0,0 @@ - diff --git a/clean.css b/clean.css index aae4c72..5024edd 100644 --- a/clean.css +++ b/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; diff --git a/color.css b/color.css index 9f53d2f..55f0be0 100644 --- a/color.css +++ b/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 */ diff --git a/color.scss b/color.scss index 1c95f86..319eb9f 100644 --- a/color.scss +++ b/color.scss @@ -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)}; } diff --git a/input.css b/input.css index 5f427b3..d0b1263 100644 --- a/input.css +++ b/input.css @@ -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; diff --git a/layout.css b/layout.css index 58bd04a..9ed1c02 100644 --- a/layout.css +++ b/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; diff --git a/nav.css b/nav.css index c983ac6..bd96564 100644 --- a/nav.css +++ b/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 { diff --git a/nav.scss b/nav.scss index 4c7d8a1..c1013ad 100644 --- a/nav.scss +++ b/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); } } } diff --git a/progress.css b/progress.css index 1a5dad5..f2fd66f 100644 --- a/progress.css +++ b/progress.css @@ -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; diff --git a/progress.scss b/progress.scss index 3373b90..6f6566b 100644 --- a/progress.scss +++ b/progress.scss @@ -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; diff --git a/section.css b/section.css index 0beca4a..64b0cc9 100644 --- a/section.css +++ b/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; diff --git a/section.scss b/section.scss index 0762e9e..ad9b028 100644 --- a/section.scss +++ b/section.scss @@ -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)}; } diff --git a/spinner.css b/spinner.css index 9120657..5e8ae1f 100644 --- a/spinner.css +++ b/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; diff --git a/spinner.scss b/spinner.scss index bc4eed6..c99e437 100644 --- a/spinner.scss +++ b/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; diff --git a/styles.css b/styles.css index 1e417ba..6f9a83c 100644 --- a/styles.css +++ b/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 */ diff --git a/tab.css b/tab.css index 5d88161..2c5f038 100644 --- a/tab.css +++ b/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 */ diff --git a/tab.scss b/tab.scss index 266aab8..4eed792 100644 --- a/tab.scss +++ b/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); } } diff --git a/table.css b/table.css index 98e8f9c..e310f0a 100644 --- a/table.css +++ b/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; diff --git a/table.scss b/table.scss index 8adc10b..1241932 100644 --- a/table.scss +++ b/table.scss @@ -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)}; diff --git a/tag.css b/tag.css index d2c0038..e69815e 100644 --- a/tag.css +++ b/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 */ diff --git a/tag.scss b/tag.scss index ecf0c50..6ef26ed 100644 --- a/tag.scss +++ b/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; } diff --git a/tests/StandardElements.htm b/tests/StandardElements.htm index c3ba0d3..1b6485b 100644 --- a/tests/StandardElements.htm +++ b/tests/StandardElements.htm @@ -610,7 +610,7 @@

Tabs

With Container

-
+
    • @@ -630,7 +630,7 @@

    Without Container

    -
    +
      • diff --git a/tests/app/actions.php b/tests/app/actions.php index e69de29..593e3ea 100644 --- a/tests/app/actions.php +++ b/tests/app/actions.php @@ -0,0 +1,21 @@ +
      +
      +
      +

      Change + Redirect

      +
      + +
      +
      +
      +
      diff --git a/tests/app/article.php b/tests/app/article.php index 11d5f5b..3eef5cb 100644 --- a/tests/app/article.php +++ b/tests/app/article.php @@ -80,7 +80,6 @@
      Headline6
      - Content

      TooltipMy Tooltip asd a sd
      asdfsdf adf asd       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 diff --git a/tests/app/chart_area.php b/tests/app/chart_area.php new file mode 100644 index 0000000..866311c --- /dev/null +++ b/tests/app/chart_area.php @@ -0,0 +1,681 @@ +

      +

      Line Chart

      +
      +
      + + +
      +

      Area Chart

      +
      +
      + + + +
      +

      Stacked Area Chart

      +
      +
      + + + +
      +

      Diff Area Chart

      +
      +
      + + + +
      +

      Bar Chart

      +
      +
      + + +
      +

      Grouped Bar Chart

      +
      +
      + + + +
      +

      Stacked Bar Chart

      +
      +
      + + + +
      +

      Vertical Waterfall Chart

      +
      +
      + + + +
      +

      Waterfall Chart

      +
      +
      + + + +
      +

      Column Chart

      +
      +
      + + + +
      +

      Grouped Column Chart

      +
      +
      + + + +
      +

      Stacked Column Chart

      +
      +
      + + + +
      +

      Pie Chart

      +
      +
      + + + +
      +

      Donut Chart

      +
      +
      + + + +
      +

      Stacked Pie Chart

      +
      +
      + + + +
      +

      Stacked Donut Chart

      +
      +
      + + + +
      +

      Gouge Chart

      +
      +
      + +
      +

      Fill Gouge Chart

      +
      +
      + +
      +

      Radar Chart

      +
      +
      + +
      +

      Pyramid Chart

      +
      +
      + +
      +

      Scatterplot Chart

      +
      +
      + + + +
      +

      Boxplot Chart

      +
      +
      + +
      +

      Candlestick Chart

      +
      +
      + + + +
      +

      OHLC Chart

      +
      +
      + + + +
      +

      Calendar Chart

      +
      +
      + + + +
      +

      Gantt Chart

      +
      +
      + +
      +

      Heatmap Chart

      +
      +
      + +
      +

      Bubblemap Chart

      +
      +
      + +
      +

      Tree Chart

      +
      +
      + +
      +

      BCG Chart

      +
      +
      \ No newline at end of file diff --git a/tests/app/charts.php b/tests/app/chart_bar.php similarity index 100% rename from tests/app/charts.php rename to tests/app/chart_bar.php diff --git a/tests/app/chart_bcg.php b/tests/app/chart_bcg.php new file mode 100644 index 0000000..e69de29 diff --git a/tests/app/chart_boxplot.php b/tests/app/chart_boxplot.php new file mode 100644 index 0000000..e69de29 diff --git a/tests/app/chart_bubblemap.php b/tests/app/chart_bubblemap.php new file mode 100644 index 0000000..e69de29 diff --git a/tests/app/chart_calendar.php b/tests/app/chart_calendar.php new file mode 100644 index 0000000..e69de29 diff --git a/tests/app/chart_candlestick.php b/tests/app/chart_candlestick.php new file mode 100644 index 0000000..e69de29 diff --git a/tests/app/chart_column.php b/tests/app/chart_column.php new file mode 100644 index 0000000..e69de29 diff --git a/tests/app/chart_gantt.php b/tests/app/chart_gantt.php new file mode 100644 index 0000000..e69de29 diff --git a/tests/app/chart_gouge.php b/tests/app/chart_gouge.php new file mode 100644 index 0000000..e69de29 diff --git a/tests/app/chart_line.php b/tests/app/chart_line.php new file mode 100644 index 0000000..42c3d73 --- /dev/null +++ b/tests/app/chart_line.php @@ -0,0 +1,10 @@ +
      +
      +
      +

      Line Chart

      +
      + +
      +
      +
      +
      \ No newline at end of file diff --git a/tests/app/chart_map.php b/tests/app/chart_map.php new file mode 100644 index 0000000..e69de29 diff --git a/tests/app/chart_ohlc.php b/tests/app/chart_ohlc.php new file mode 100644 index 0000000..e69de29 diff --git a/tests/app/chart_pie.php b/tests/app/chart_pie.php new file mode 100644 index 0000000..e69de29 diff --git a/tests/app/chart_pyramid.php b/tests/app/chart_pyramid.php new file mode 100644 index 0000000..e69de29 diff --git a/tests/app/chart_radar.php b/tests/app/chart_radar.php new file mode 100644 index 0000000..e69de29 diff --git a/tests/app/chart_scatterplot.php b/tests/app/chart_scatterplot.php new file mode 100644 index 0000000..e69de29 diff --git a/tests/app/chart_tree.php b/tests/app/chart_tree.php new file mode 100644 index 0000000..e69de29 diff --git a/tests/app/chart_waterfall.php b/tests/app/chart_waterfall.php new file mode 100644 index 0000000..e69de29 diff --git a/tests/app/forms.php b/tests/app/forms.php index 26fd424..6ed924a 100644 --- a/tests/app/forms.php +++ b/tests/app/forms.php @@ -132,7 +132,7 @@