diff --git a/Themes/Default/Destination/css/theme.css b/Themes/Default/Destination/css/theme.css
index 168aedf..e7effd4 100644
--- a/Themes/Default/Destination/css/theme.css
+++ b/Themes/Default/Destination/css/theme.css
@@ -13,100 +13,93 @@
/* #region local font face definitions */
/* source-sans-pro-300 - latin-ext_latin */
@font-face {
- font-family: 'Source Sans Pro';
- font-style: normal;
- font-weight: 300;
- src: url('../fonts/source-sans-pro-v9-latin-ext_latin-300.eot'); /* IE9 Compat Modes */
- src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
- url('../fonts/source-sans-pro-v9-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-300.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-300.woff') format('woff'), /* Modern Browsers */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */
+ font-family: 'Source Sans Pro';
+ font-style: normal;
+ font-weight: 300;
+ src: url('../fonts/source-sans-pro-v9-latin-ext_latin-300.eot'); /* IE9 Compat Modes */
+ src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('../fonts/source-sans-pro-v9-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-300.woff2') format('woff2'), /* Super Modern Browsers */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-300.woff') format('woff'), /* Modern Browsers */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-300italic - latin-ext_latin */
@font-face {
- font-family: 'Source Sans Pro';
- font-style: italic;
- font-weight: 300;
- src: url('../fonts/source-sans-pro-v9-latin-ext_latin-300italic.eot'); /* IE9 Compat Modes */
- src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'),
- url('../fonts/source-sans-pro-v9-latin-ext_latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-300italic.woff') format('woff'), /* Modern Browsers */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-300italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */
+ font-family: 'Source Sans Pro';
+ font-style: italic;
+ font-weight: 300;
+ src: url('../fonts/source-sans-pro-v9-latin-ext_latin-300italic.eot'); /* IE9 Compat Modes */
+ src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'), url('../fonts/source-sans-pro-v9-latin-ext_latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-300italic.woff') format('woff'), /* Modern Browsers */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-300italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-regular - latin-ext_latin */
@font-face {
- font-family: 'Source Sans Pro';
- font-style: normal;
- font-weight: 400;
- src: url('../fonts/source-sans-pro-v9-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
- src: local('Source Sans Pro'), local('SourceSansPro-Regular'),
- url('../fonts/source-sans-pro-v9-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
+ font-family: 'Source Sans Pro';
+ font-style: normal;
+ font-weight: 400;
+ src: url('../fonts/source-sans-pro-v9-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
+ src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('../fonts/source-sans-pro-v9-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-italic - latin-ext_latin */
@font-face {
- font-family: 'Source Sans Pro';
- font-style: italic;
- font-weight: 400;
- src: url('../fonts/source-sans-pro-v9-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
- src: local('Source Sans Pro Italic'), local('SourceSansPro-It'),
- url('../fonts/source-sans-pro-v9-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-italic.woff') format('woff'), /* Modern Browsers */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */
+ font-family: 'Source Sans Pro';
+ font-style: italic;
+ font-weight: 400;
+ src: url('../fonts/source-sans-pro-v9-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
+ src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url('../fonts/source-sans-pro-v9-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-italic.woff') format('woff'), /* Modern Browsers */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-600 - latin-ext_latin */
@font-face {
- font-family: 'Source Sans Pro';
- font-style: normal;
- font-weight: 600;
- src: url('../fonts/source-sans-pro-v9-latin-ext_latin-600.eot'); /* IE9 Compat Modes */
- src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'),
- url('../fonts/source-sans-pro-v9-latin-ext_latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-600.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-600.woff') format('woff'), /* Modern Browsers */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */
+ font-family: 'Source Sans Pro';
+ font-style: normal;
+ font-weight: 600;
+ src: url('../fonts/source-sans-pro-v9-latin-ext_latin-600.eot'); /* IE9 Compat Modes */
+ src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('../fonts/source-sans-pro-v9-latin-ext_latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-600.woff2') format('woff2'), /* Super Modern Browsers */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-600.woff') format('woff'), /* Modern Browsers */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-700 - latin-ext_latin */
@font-face {
- font-family: 'Source Sans Pro';
- font-style: normal;
- font-weight: 700;
- src: url('../fonts/source-sans-pro-v9-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
- src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
- url('../fonts/source-sans-pro-v9-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-700.svg#SourceSansPro') format('svg'); /* Legacy iOS */
+ font-family: 'Source Sans Pro';
+ font-style: normal;
+ font-weight: 700;
+ src: url('../fonts/source-sans-pro-v9-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
+ src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('../fonts/source-sans-pro-v9-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-700.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-900 - latin-ext_latin */
@font-face {
- font-family: 'Source Sans Pro';
- font-style: normal;
- font-weight: 900;
- src: url('../fonts/source-sans-pro-v9-latin-ext_latin-900.eot'); /* IE9 Compat Modes */
- src: local('Source Sans Pro Black'), local('SourceSansPro-Black'),
- url('../fonts/source-sans-pro-v9-latin-ext_latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-900.woff2') format('woff2'), /* Super Modern Browsers */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-900.woff') format('woff'), /* Modern Browsers */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/source-sans-pro-v9-latin-ext_latin-900.svg#SourceSansPro') format('svg'); /* Legacy iOS */
+ font-family: 'Source Sans Pro';
+ font-style: normal;
+ font-weight: 900;
+ src: url('../fonts/source-sans-pro-v9-latin-ext_latin-900.eot'); /* IE9 Compat Modes */
+ src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url('../fonts/source-sans-pro-v9-latin-ext_latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-900.woff2') format('woff2'), /* Super Modern Browsers */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-900.woff') format('woff'), /* Modern Browsers */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('../fonts/source-sans-pro-v9-latin-ext_latin-900.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* #endregion */
@@ -122,9 +115,9 @@ audio, canvas, video {
*zoom: 1;
}
-audio:not([controls]) {
- display: none;
-}
+ audio:not([controls]) {
+ display: none;
+ }
[hidden] {
display: none;
@@ -134,14 +127,14 @@ a {
text-decoration: none;
}
-a .icon {
- display: inline-block;
- text-decoration: inherit;
-}
+ a .icon {
+ display: inline-block;
+ text-decoration: inherit;
+ }
-a:hover, a:active {
- outline: 0;
-}
+ a:hover, a:active {
+ outline: 0;
+ }
abbr[title] {
border-bottom: 1px dotted;
@@ -152,25 +145,25 @@ big, small {
}
blockquote {
- background: #f9f9f9;
- border-left: 10px solid #ccc;
- margin: 1.5em 10px;
- padding: 0.5em 10px;
- quotes: "\201C""\201D""\2018""\2019";
-}
-
-blockquote:before {
- color: #ccc;
- content: open-quote;
- font-size: 4em;
- line-height: 0.1em;
- margin-right: 10px;
- vertical-align: -0.4em;
-}
+ background: #f9f9f9;
+ border-left: 10px solid #ccc;
+ margin: 1.5em 10px;
+ padding: 0.5em 10px;
+ quotes: "\201C""\201D""\2018""\2019";
+}
+
+ blockquote:before {
+ color: #ccc;
+ content: open-quote;
+ font-size: 4em;
+ line-height: 0.1em;
+ margin-right: 10px;
+ vertical-align: -0.4em;
+ }
-blockquote p {
- display: inline;
-}
+ blockquote p {
+ display: inline;
+ }
body {
@@ -193,14 +186,14 @@ button, input {
*vertical-align: middle;
}
-button[disabled], input[disabled] {
- cursor: default;
-}
+ button[disabled], input[disabled] {
+ cursor: default;
+ }
-button::-moz-focus-inner, input::-moz-focus-inner {
- border: 0;
- padding: 0;
-}
+ button::-moz-focus-inner, input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+ }
button {
font-size: 100%;
@@ -223,9 +216,9 @@ code, pre.nocode {
overflow-x: auto;
}
-code.code-large {
- font-size: 90%;
-}
+ code.code-large {
+ font-size: 90%;
+ }
dd {
margin: 0;
@@ -273,12 +266,11 @@ h3 {
h4 {
font-size: 130%;
-
}
-h4.searchresulttitle {
- margin-bottom: -5px;
-}
+ h4.searchresulttitle {
+ margin-bottom: -5px;
+ }
h5 {
font-size: 115%;
@@ -320,23 +312,23 @@ input {
*vertical-align: middle;
}
-input[type="text"] {
- -webkit-appearance: none;
- padding: 6px;
- display: inline-block;
- border: 1px solid;
- font-size: 80%;
- box-shadow: inset 0 1px 3px #ddd;
- border-radius: 0;
- -webkit-transition: border 0.3s linear;
- -moz-transition: border 0.3s linear;
- transition: border 0.3s linear;
-}
+ input[type="text"] {
+ -webkit-appearance: none;
+ padding: 6px;
+ display: inline-block;
+ border: 1px solid;
+ font-size: 80%;
+ box-shadow: inset 0 1px 3px #ddd;
+ border-radius: 0;
+ -webkit-transition: border 0.3s linear;
+ -moz-transition: border 0.3s linear;
+ transition: border 0.3s linear;
+ }
-/* For chrome, to avoid ugly bar around search box*/
-input:focus {
- outline: none;
-}
+ /* For chrome, to avoid ugly bar around search box*/
+ input:focus {
+ outline: none;
+ }
ins {
text-decoration: none;
@@ -382,9 +374,9 @@ p {
margin-bottom: 24px;
}
-p code {
- word-wrap: break-word;
-}
+ p code {
+ word-wrap: break-word;
+ }
pre > code {
@@ -395,10 +387,10 @@ q {
quotes: none;
}
-q:before, q:after {
- content: "";
- content: none;
-}
+ q:before, q:after {
+ content: "";
+ content: none;
+ }
small {
font-size: 80%;
@@ -458,8 +450,8 @@ td {
}
.no-highlight {
- display: block;
- padding: 0.5em;
+ display: block;
+ padding: 0.5em;
}
.relative {
@@ -499,17 +491,17 @@ td {
text-align: center;
}
-.toc-footer hr {
- width: 100%;
- display: block;
- height: 1px;
- border: 0;
- border-top: 1px solid;
- margin-left: auto;
- margin-right: auto;
- padding-bottom: 0;
- margin-bottom: 5px;
-}
+ .toc-footer hr {
+ width: 100%;
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid;
+ margin-left: auto;
+ margin-right: auto;
+ padding-bottom: 0;
+ margin-bottom: 5px;
+ }
/* #endregion */
@@ -541,52 +533,52 @@ td {
margin-bottom: 24px;
}
-.table caption {
- font-size: 85%;
- font-style: italic;
- padding: 1em 0;
- text-align: center;
-}
+ .table caption {
+ font-size: 85%;
+ font-style: italic;
+ padding: 1em 0;
+ text-align: center;
+ }
-.table td, .table th {
- font-size: 90%;
- margin: 0;
- overflow: visible;
- padding: 8px 16px;
-}
+ .table td, .table th {
+ font-size: 90%;
+ margin: 0;
+ overflow: visible;
+ padding: 8px 16px;
+ }
-.table td:first-child, .table th:first-child {
- border-left-width: 0;
-}
+ .table td:first-child, .table th:first-child {
+ border-left-width: 0;
+ }
-.table thead {
- text-align: left;
- vertical-align: bottom;
- white-space: nowrap;
-}
+ .table thead {
+ text-align: left;
+ vertical-align: bottom;
+ white-space: nowrap;
+ }
-.table thead th {
- font-weight: bold;
- border-bottom: solid 2px;
-}
+ .table thead th {
+ font-weight: bold;
+ border-bottom: solid 2px;
+ }
-.table td {
- background-color: transparent;
- vertical-align: middle;
-}
+ .table td {
+ background-color: transparent;
+ vertical-align: middle;
+ }
-.table td p {
- line-height: 18px;
-}
+ .table td p {
+ line-height: 18px;
+ }
-.table td p:last-child {
- margin-bottom: 0;
-}
+ .table td p:last-child {
+ margin-bottom: 0;
+ }
-.table .table-cell-min {
- width: 1%;
- padding-right: 0;
-}
+ .table .table-cell-min {
+ width: 1%;
+ padding-right: 0;
+ }
.table-secondary {
font-size: 90%;
@@ -600,14 +592,14 @@ td {
border: 1px solid;
}
-.table-bordered-all td {
- border-bottom: 1px solid;
- border-left: 1px solid;
-}
+ .table-bordered-all td {
+ border-bottom: 1px solid;
+ border-left: 1px solid;
+ }
-.table-bordered-all tbody > tr:last-child td {
- border-bottom-width: 0;
-}
+ .table-bordered-all tbody > tr:last-child td {
+ border-bottom-width: 0;
+ }
.table-bordered {
border: 1px solid;
@@ -640,13 +632,213 @@ td {
overflow: auto;
}
-.table-responsive table {
- margin-bottom: 0 !important;
+ .table-responsive table {
+ margin-bottom: 0 !important;
+ }
+
+ .table-responsive table td, .table-responsive table th {
+ white-space: nowrap;
+ }
+/* #endregion*/
+
+/* #region Tabs*/
+/* Tab CSS by Joseph Fusco. http://codepen.io/fusco/pen/Wvzjrm, slightly adjusted to fit our style/theme. */
+.tab-wrap {
+ -webkit-transition: 0.2s box-shadow ease;
+ transition: 0.2s box-shadow ease;
+ max-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ position: relative;
+ list-style: none;
+ margin: 30px 0;
+ box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.14);
}
-.table-responsive table td, .table-responsive table th {
- white-space: nowrap;
+.tab-wrap:hover {
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.23), 0 2px 5px rgba(0, 0, 0, 0.19);
+}
+
+.tab {
+ display: none;
+}
+
+.tab:checked:nth-of-type(1) ~ .tab-content:nth-of-type(1) {
+ opacity: 1;
+ -webkit-transition: 0.1s opacity ease-in, 0.1s -webkit-transform ease;
+ transition: 0.1s opacity ease-in, 0.1s transform ease;
+ position: relative;
+ top: 0;
+ z-index: 100;
+ -webkit-transform: translateY(0px);
+ -ms-transform: translateY(0px);
+ transform: translateY(0px);
+ text-shadow: 0 0 0;
+}
+
+.tab:checked:nth-of-type(2) ~ .tab-content:nth-of-type(2) {
+ opacity: 1;
+ -webkit-transition: 0.1s opacity ease-in, 0.1s -webkit-transform ease;
+ transition: 0.1s opacity ease-in, 0.1s transform ease;
+ position: relative;
+ top: 0;
+ z-index: 100;
+ -webkit-transform: translateY(0px);
+ -ms-transform: translateY(0px);
+ transform: translateY(0px);
+ text-shadow: 0 0 0;
+}
+
+.tab:checked:nth-of-type(3) ~ .tab-content:nth-of-type(3) {
+ opacity: 1;
+ -webkit-transition: 0.1s opacity ease-in, 0.1s -webkit-transform ease;
+ transition: 0.1s opacity ease-in, 0.1s transform ease;
+ position: relative;
+ top: 0;
+ z-index: 100;
+ -webkit-transform: translateY(0px);
+ -ms-transform: translateY(0px);
+ transform: translateY(0px);
+ text-shadow: 0 0 0;
+}
+
+.tab:checked:nth-of-type(4) ~ .tab-content:nth-of-type(4) {
+ opacity: 1;
+ -webkit-transition: 0.1s opacity ease-in, 0.1s -webkit-transform ease;
+ transition: 0.1s opacity ease-in, 0.1s transform ease;
+ position: relative;
+ top: 0;
+ z-index: 100;
+ -webkit-transform: translateY(0px);
+ -ms-transform: translateY(0px);
+ transform: translateY(0px);
+ text-shadow: 0 0 0;
+}
+
+.tab:checked:nth-of-type(5) ~ .tab-content:nth-of-type(5) {
+ opacity: 1;
+ -webkit-transition: 0.1s opacity ease-in, 0.1s -webkit-transform ease;
+ transition: 0.1s opacity ease-in, 0.1s transform ease;
+ position: relative;
+ top: 0;
+ z-index: 100;
+ -webkit-transform: translateY(0px);
+ -ms-transform: translateY(0px);
+ transform: translateY(0px);
+ text-shadow: 0 0 0;
+}
+
+.tab:checked:nth-of-type(6) ~ .tab-content:nth-of-type(6) {
+ opacity: 1;
+ -webkit-transition: 0.1s opacity ease-in, 0.1s -webkit-transform ease;
+ transition: 0.1s opacity ease-in, 0.1s transform ease;
+ position: relative;
+ top: 0;
+ z-index: 100;
+ -webkit-transform: translateY(0px);
+ -ms-transform: translateY(0px);
+ transform: translateY(0px);
+ text-shadow: 0 0 0;
+}
+
+.tab:checked:nth-of-type(7) ~ .tab-content:nth-of-type(7) {
+ opacity: 1;
+ -webkit-transition: 0.1s opacity ease-in, 0.1s -webkit-transform ease;
+ transition: 0.1s opacity ease-in, 0.1s transform ease;
+ position: relative;
+ top: 0;
+ z-index: 100;
+ -webkit-transform: translateY(0px);
+ -ms-transform: translateY(0px);
+ transform: translateY(0px);
+ text-shadow: 0 0 0;
+}
+
+.tab:checked:nth-of-type(8) ~ .tab-content:nth-of-type(8) {
+ opacity: 1;
+ -webkit-transition: 0.1s opacity ease-in, 0.1s -webkit-transform ease;
+ transition: 0.1s opacity ease-in, 0.1s transform ease;
+ position: relative;
+ top: 0;
+ z-index: 100;
+ -webkit-transform: translateY(0px);
+ -ms-transform: translateY(0px);
+ transform: translateY(0px);
+ text-shadow: 0 0 0;
+}
+
+/*
+ If you need more tabs (oh dear why would you!?) copy/paste the checked section above and increase the number, each tab has its own section
+ as this is a js less tab system.
+*/
+
+.tab:first-of-type:not(:last-of-type) + label {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+.tab:not(:first-of-type):not(:last-of-type) + label {
+ border-radius: 0;
}
+
+.tab:last-of-type:not(:first-of-type) + label {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+.tab:checked + label {
+ box-shadow: 0 -1px 0 #fff inset;
+ cursor: default;
+}
+
+.tab:checked + label:hover {
+ box-shadow: 0 -1px 0 #fff inset;
+}
+
+.tab + label {
+ box-shadow: 0 -1px 0 #eee inset;
+ cursor: pointer;
+ display: block;
+ text-decoration: none;
+ -webkit-box-flex: 3;
+ -webkit-flex-grow: 3;
+ -ms-flex-positive: 3;
+ flex-grow: 3;
+ text-align: center;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ text-align: center;
+ -webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;
+ transition: 0.3s background-color ease, 0.3s box-shadow ease;
+ height: 40px;
+ box-sizing: border-box;
+ padding: 10px;
+}
+
+.tab + label:hover {
+ box-shadow: 0 1px 0 #f4f4f4 inset;
+}
+
+.tab-content {
+ padding: 10px 15px;
+ background-color: transparent;
+ position: absolute;
+ width: 100%;
+ z-index: -1;
+ opacity: 0;
+ left: 0;
+ -webkit-transform: translateY(-3px);
+ -ms-transform: translateY(-3px);
+ transform: translateY(-3px);
+}
+
/* #endregion*/
/* #region Breadcrumbs*/
@@ -656,21 +848,22 @@ td {
list-style: none;
list-style-image: none;
}
+
.breadcrumbs li {
display: inline-block;
}
-.breadcrumbs li.breadcrumbs-aside {
- float: right;
-}
+ .breadcrumbs li.breadcrumbs-aside {
+ float: right;
+ }
-.breadcrumbs li a {
- display: inline-block;
-}
+ .breadcrumbs li a {
+ display: inline-block;
+ }
-.breadcrumbs li a:first-child {
- padding-left: 0;
-}
+ .breadcrumbs li a:first-child {
+ padding-left: 0;
+ }
.breadcrumbs-extra {
margin-bottom: 0;
@@ -714,61 +907,61 @@ td {
list-style-image: none;
}
-.menu-vertical ul.tocroot {
- padding-left: 15px;
-}
+ .menu-vertical ul.tocroot {
+ padding-left: 15px;
+ }
-.menu-vertical ul.currentrelative {
- margin-left: -15px;
- margin-bottom: -4px;
- padding-bottom: 4px;
- padding-left: 15px;
-}
+ .menu-vertical ul.currentrelative {
+ margin-left: -15px;
+ margin-bottom: -4px;
+ padding-bottom: 4px;
+ padding-left: 15px;
+ }
-.menu-vertical ul.currentrelativeroot {
- margin-left: -15px;
- margin-bottom: -4px;
- padding-bottom: 4px;
- padding-left: 15px;
-}
+ .menu-vertical ul.currentrelativeroot {
+ margin-left: -15px;
+ margin-bottom: -4px;
+ padding-bottom: 4px;
+ padding-left: 15px;
+ }
-.menu-vertical ul.tocroot > li.current {
- margin-left: -4px;
- padding-left: 4px;
- padding-bottom: 3px;
- margin-bottom: 10px;
-}
+ .menu-vertical ul.tocroot > li.current {
+ margin-left: -4px;
+ padding-left: 4px;
+ padding-bottom: 3px;
+ margin-bottom: 10px;
+ }
-.menu-vertical ul.current {
- padding-left: 10px;
- margin-left: -10px;
- padding-bottom: 3px;
-}
+ .menu-vertical ul.current {
+ padding-left: 10px;
+ margin-left: -10px;
+ padding-bottom: 3px;
+ }
.menu-vertical li {
list-style: none;
line-height: initial;
}
-.menu-vertical li.tocentry {
- padding-left: 15px;
-}
+ .menu-vertical li.tocentry {
+ padding-left: 15px;
+ }
-.menu-vertical li.tocrootentry {
- padding-left: 15px;
-}
+ .menu-vertical li.tocrootentry {
+ padding-left: 15px;
+ }
-.menu-vertical li.current {
- margin-top: 0px;
- margin-bottom: 3px;
- margin-left: 0;
- padding-top: 0px;
-}
+ .menu-vertical li.current {
+ margin-top: 0px;
+ margin-bottom: 3px;
+ margin-left: 0;
+ padding-top: 0px;
+ }
-.menu-vertical li.current > a {
- font-weight: bold;
- border: none;
-}
+ .menu-vertical li.current > a {
+ font-weight: bold;
+ border: none;
+ }
.menu-vertical a {
line-height: 20px;
@@ -776,20 +969,20 @@ td {
border: none;
}
-.menu-vertical a:hover {
- cursor: pointer;
-}
+ .menu-vertical a:hover {
+ cursor: pointer;
+ }
-.menu-vertical a:hover, .menu-vertical li.current a:hover, .menu-vertical li.on a:hover, .menu-vertical li.current > a:hover {
- text-decoration: underline;
-}
+ .menu-vertical a:hover, .menu-vertical li.current a:hover, .menu-vertical li.on a:hover, .menu-vertical li.current > a:hover {
+ text-decoration: underline;
+ }
-.menu-vertical a:active {
- cursor: pointer;
-}
+ .menu-vertical a:active {
+ cursor: pointer;
+ }
.menu-vertical span.navigationgroup {
- line-height: 23px;
+ line-height: 23px;
font-weight: bold;
margin-bottom: 3px;
}
@@ -804,7 +997,7 @@ td {
background: #343131;
z-index: 200;
height: 100%;
- overflow-y: auto;
+ overflow-y: auto;
font-size: 14px;
}
@@ -818,32 +1011,32 @@ td {
*zoom: 1;
}
-.nav-top:before, .nav-top:after {
- display: table;
- content: "";
-}
+ .nav-top:before, .nav-top:after {
+ display: table;
+ content: "";
+ }
-.nav-top:after {
- clear: both;
-}
+ .nav-top:after {
+ clear: both;
+ }
-.nav-top a {
- font-weight: bold;
-}
+ .nav-top a {
+ font-weight: bold;
+ }
-.nav-top img {
- margin-right: 12px;
- height: 45px;
- width: 45px;
- padding: 5px;
- border-radius: 100%;
-}
+ .nav-top img {
+ margin-right: 12px;
+ height: 45px;
+ width: 45px;
+ padding: 5px;
+ border-radius: 100%;
+ }
-.nav-top i {
- font-size: 30px;
- float: left;
- cursor: pointer;
-}
+ .nav-top i {
+ font-size: 30px;
+ float: left;
+ cursor: pointer;
+ }
.nav-content-wrap {
margin-left: 320px;
@@ -865,28 +1058,28 @@ td {
margin-bottom: 0.809em;
}
-.side-nav-search input[type=text] {
- width: 100%;
- border-radius: 50px;
- padding: 6px 12px;
-}
+ .side-nav-search input[type=text] {
+ width: 100%;
+ border-radius: 50px;
+ padding: 6px 12px;
+ }
-.side-nav-search img {
- display: block;
- margin: auto auto 0.809em auto;
- height: 45px;
- width: 45px;
- padding: 5px;
- border-radius: 100%;
-}
+ .side-nav-search img {
+ display: block;
+ margin: auto auto 0.809em auto;
+ height: 45px;
+ width: 45px;
+ padding: 5px;
+ border-radius: 100%;
+ }
-.side-nav-search > a, .side-nav-search .dropdown > a {
- font-size: 100%;
- font-weight: bold;
- display: inline-block;
- padding: 4px 6px;
- margin-bottom: 0.809em;
-}
+ .side-nav-search > a, .side-nav-search .dropdown > a {
+ font-size: 100%;
+ font-weight: bold;
+ display: inline-block;
+ padding: 4px 6px;
+ margin-bottom: 0.809em;
+ }
/* #endregion*/
/* #region media queries*/
@@ -946,7 +1139,7 @@ td {
@page {
margin: 0.5cm;
}
-
+
.breadcrumbs li.breadcrumbs-aside {
display: none;
}
@@ -987,27 +1180,27 @@ td {
left: -320px;
}
- .nav-side.shift {
- width: 85%;
- left: 0;
- }
+ .nav-side.shift {
+ width: 85%;
+ left: 0;
+ }
.nav-content-wrap {
margin-left: 0;
}
- .nav-content-wrap .nav-content {
- padding: 1.618em;
- }
+ .nav-content-wrap .nav-content {
+ padding: 1.618em;
+ }
- .nav-content-wrap.shift {
- position: fixed;
- min-width: 100%;
- left: 85%;
- top: 0;
- height: 100%;
- overflow: hidden;
- }
+ .nav-content-wrap.shift {
+ position: fixed;
+ min-width: 100%;
+ left: 85%;
+ top: 0;
+ height: 100%;
+ overflow: hidden;
+ }
.tablet-hide {
display: none;
@@ -1030,36 +1223,35 @@ td {
padding-bottom: 24px;
}
-#search-results .search li:first-child {
- border-top: solid 1px;
- padding-top: 24px;
-}
+ #search-results .search li:first-child {
+ border-top: solid 1px;
+ padding-top: 24px;
+ }
-#search-results .search li a {
- font-size: 120%;
- margin-bottom: 12px;
- display: inline-block;
-}
+ #search-results .search li a {
+ font-size: 120%;
+ margin-bottom: 12px;
+ display: inline-block;
+ }
#search-results .context {
color: gray;
font-size: 90%;
}
-#search-results article h3
-{
- margin-top: 23px;
- border-top: 1px solid;
- padding-top: 24px;
+#search-results article h3 {
+ margin-top: 23px;
+ border-top: 1px solid;
+ padding-top: 24px;
}
#search-results article:first-child h3 {
- border-top: none;
+ border-top: none;
}
-#search-query{
- width: 100%;
- border-radius: 50px;
- padding: 6px 12px;
+#search-query {
+ width: 100%;
+ border-radius: 50px;
+ padding: 6px 12px;
}
/* #endregion */
diff --git a/Themes/Default/Destination/css/theme_colors.css b/Themes/Default/Destination/css/theme_colors.css
index 292fe7b..24439e2 100644
--- a/Themes/Default/Destination/css/theme_colors.css
+++ b/Themes/Default/Destination/css/theme_colors.css
@@ -257,6 +257,32 @@ mark {
/* #endregion*/
+/* #region Tabs*/
+/*
+ Tab CSS by Joseph Fusco. http://codepen.io/fusco/pen/Wvzjrm, slightly adjusted to remove the round corners.
+ Shadow colors are defined in theme.css, as they can only be defined with the shadow definition directly.
+*/
+
+.tab-wrap {
+ background-color: #fff;
+}
+
+.tab:checked + label {
+ background-color: #fff;
+}
+
+.tab + label {
+ color: #222;
+ background-color: #f2f2f2;
+}
+
+.tab + label:hover {
+ background-color: #f9f9f9;
+}
+/* #endregion*/
+
+
+
/* #region media queries*/
@media screen and (max-width: 768px) {
.body-for-nav {
diff --git a/readme.md b/readme.md
index e66ed41..62ec737 100644
--- a/readme.md
+++ b/readme.md
@@ -101,6 +101,29 @@ Example:
This will display the font-awesome icon for anchor: @fa-anchor
```
+### Tabs
+It's very easy with `Docnet` to add a tab control with one or more tabs to the HTML with a simple set of markdown statements. The tab statements are converted into pure CSS3/HTML tabs, based on the work of Joseph Fusco (http://codepen.io/fusco/pen/Wvzjrm)
+
+To start a Tab control, start with `@tabs` and end the tabs definition with `@endtabs`. Between those two statements, which each need to be suffixed with a newline, you define one or more tabs using `@tab` followed by the label text for that tab, followed by a newline. End your tab contents with `@end`.
+
+The following example shows two tabs, one with label 'C#' and one with 'VB.NET':
+
+ @tabs
+ @tab C#
+ Content 1 2 3
+ ```cs
+ var text = DoTabsBlocks("text");
+ ```
+ @end
+ @tab VB.NET1
+ Content 1 2 3
+ ```vb
+ Dim text = DoTabsBlocks("text")
+ ```
+ Additional text
+ @end
+ @endtabs
+
##Search
`Docnet` will generate a search_data.json file in the root of the destination folder which is used with the javascript based search. It's a simple text search which can locate pages based on the word/sentence specified and will list them in first come first served order. For general purposes of locating a general piece of documentation regarding a topic it's good enough.
@@ -109,6 +132,9 @@ This will display the font-awesome icon for anchor: @fa-anchor
##Linking
`Docnet` doesn't transform links. This means that any link to any document in your documentation has to use the url it will get in the destination folder. Example: you want to link to the file `How to\AddEntity.md` from a page. In the result site this should be the link `How%20to/AddEntity.htm`, which you should specify in your markdown. In the future it might be `docnet` will be updated with link transformation, at the moment it doesn't convert any links besides the usual markdown ones. The markdown parser also doesn't allow spaces to be present in the urls. If you need a space in the url, escape it with `%20`.
+##Requirements
+`Docnet` is a .NET full application (using .NET 4.6.1) and requires .NET full to run. Not tested on Mono but it's highly likely it works on Mono without a problem. The code uses .NET 4.6.1 but it can be compiled against lower versions of .NET full, it doesn't use .NET 4.6 specific features but as Microsoft supports only the latest .NET 4.x versions, it was a logical choice to use .NET 4.6.1.
+
##Acknowledgements
This application wouldn't be possible without the work of others. The (likely incomplete) list below contains the work `Docnet` is based on / builds upon.
diff --git a/src/Constants.cs b/src/Constants.cs
index 6370713..9628b71 100644
--- a/src/Constants.cs
+++ b/src/Constants.cs
@@ -30,6 +30,6 @@ namespace Docnet
{
public class Constants
{
- public const string Version = "0.7.2";
+ public const string Version = "0.8.0";
}
}
diff --git a/src/MarkdownSharp.cs b/src/MarkdownSharp.cs
index d43e67b..5656bec 100644
--- a/src/MarkdownSharp.cs
+++ b/src/MarkdownSharp.cs
@@ -21,6 +21,10 @@
* History: Milan ported the Markdown processor to C#. He granted license to me so I can open source it
* and let the community contribute to and improve MarkdownSharp.
*
+* [FB] I added for DocNet: (2016) https://github.com/FransBouma/DocNet
+* - @alert...@end, to specify alert boxes using markdown
+* - @fa-name, to specify font awesome directives
+* - @tabs-@endtabs, to specify CSS3 / HTML tabs in the output using markdown.
*/
#region Copyright and license
@@ -312,6 +316,8 @@ namespace Docnet
private int _listLevel;
private static string AutoLinkPreventionMarker = "\x1AP"; // temporarily replaces "://" where auto-linking shouldn't happen;
+ private int _tabIdCounter=0; // counter used to create unique tab ids on a page.
+
///
/// In the static constuctor we'll initialize what stays the same across all transforms.
///
@@ -381,23 +387,24 @@ namespace Docnet
///
private string RunBlockGamut(string text, bool unhash = true)
{
- text = DoHeaders(text);
+ text = DoHeaders(text);
text = DoHorizontalRules(text);
text = DoLists(text);
- text = DoAlertBlocks(text);
+ text = DoAlertBlocks(text);
text = DoGithubCodeBlocks(text);
text = DoCodeBlocks(text);
text = DoBlockQuotes(text);
+ text = DoTabsBlocks(text);
- // We already ran HashHTMLBlocks() before, in Markdown(), but that
- // was to escape raw HTML in the original Markdown source. This time,
- // we're escaping the markup we've just created, so that we don't wrap
- //
tags around block-level tags.
- text = HashHTMLBlocks(text);
+ // We already ran HashHTMLBlocks() before, in Markdown(), but that
+ // was to escape raw HTML in the original Markdown source. This time,
+ // we're escaping the markup we've just created, so that we don't wrap
+ //
tags around block-level tags.
+ text = HashHTMLBlocks(text);
text = FormParagraphs(text, unhash: unhash);
- return text;
+ return text;
}
@@ -1378,6 +1385,43 @@ namespace Docnet
return string.Concat("");
}
+ private static Regex _tabsBlock = new Regex(@"(@tabs)\s*([\s\S]+?)\s(@endtabs)", RegexOptions.Compiled);
+ private static Regex _tabBlock = new Regex(@"(@tab) (\S+)\s*([\s\S]+?)\s(@end)", RegexOptions.Compiled);
+ private string DoTabsBlocks(string text)
+ {
+ _tabIdCounter = 0;
+ return _tabsBlock.Replace(text, new MatchEvaluator(TabsEvaluator));
+ }
+
+ private string TabsEvaluator(Match match)
+ {
+ _tabIdCounter++;
+
+ string text = match.Groups[2].Value;
+ // 'text' is the markdown which contains the different tab definitions. We simply use another regex to collect the tab content - tab header pairs
+ // which we'll then use here to build the tab HTML. We'll use some global vars to make sure the tabs are unique on the page so the user can specify multiple tabs
+ // on them.
+ var tabsMatches = _tabBlock.Matches(text);
+ var headerSB = new StringBuilder();
+ var contentSB = new StringBuilder();
+ int tabCounter = 0;
+ var checkedAttribute = " checked";
+ foreach(Match m in tabsMatches)
+ {
+ // header
+ headerSB.AppendFormat("",
+ tabCounter, _tabIdCounter, checkedAttribute, m.Groups[2].Value);
+ // content
+ var contentText = m.Groups.Count < 2 ? string.Empty : _newlinesLeadingTrailing.Replace(m.Groups[3].Value, "");
+ contentSB.AppendFormat("