mirror of
https://github.com/silverstripe/silverstripe-docsviewer
synced 2024-10-22 11:05:56 +02:00
Create sidebar hamburger menu for mobile (#121)
* Create sidebar hamburger menu for mobile * Improve sidebar UX and mobile menu * Fixed sidebar UX bug where blue text breadcrumb didn't appear and fixed hover/focus styling * Improved UX of hamburger by applying toggle animations
This commit is contained in:
Cam Findlay
GitHub
parent
8ae26f1271
commit
e38b740d88
278
css/layout.css
278
css/layout.css
@ -1,5 +1,5 @@
|
||||
html {
|
||||
background: #fff;
|
||||
html {
|
||||
background: #fff;
|
||||
font: 15px/1.5 "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #586667;
|
||||
padding-bottom: 40px;
|
||||
@ -29,7 +29,7 @@ html {
|
||||
.introduction p {
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
max-width: 80%;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.no-box {
|
||||
@ -43,7 +43,7 @@ html {
|
||||
}
|
||||
|
||||
#content .box {
|
||||
padding: 30px;
|
||||
padding: 30px 5px;
|
||||
}
|
||||
|
||||
/*! sidebar */
|
||||
@ -60,39 +60,48 @@ html {
|
||||
}
|
||||
|
||||
#sidebar .nav {
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#sidebar .nav .top {
|
||||
width: 100%;
|
||||
display: block;
|
||||
line-height: 15px;
|
||||
color: #808c8d;
|
||||
color: #808c8d;
|
||||
padding: 15px 15px 14px;
|
||||
text-transform: uppercase;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#sidebar .nav .current .top {
|
||||
color: #1389CE;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#sidebar .nav a {
|
||||
display:block;
|
||||
padding-top:8px;
|
||||
padding-bottom:8px;
|
||||
padding-top:7px;
|
||||
padding-bottom:7px;
|
||||
padding-right:12px;
|
||||
}
|
||||
|
||||
#sidebar .nav a:hover {
|
||||
text-decoration: none;
|
||||
background:#eee;
|
||||
color:#808c8d;
|
||||
}
|
||||
|
||||
#sidebar .nav a.current:hover {
|
||||
background-color: #03527a;
|
||||
/* Sidebar hover states */
|
||||
#sidebar .nav a:hover,
|
||||
#sidebar .nav a.top:hover,
|
||||
#sidebar .nav .section ul li .section:hover,
|
||||
#sidebar .nav a.current:hover,
|
||||
/* Sidebar focus states */
|
||||
#sidebar .nav a:focus,
|
||||
#sidebar .nav a.top:focus,
|
||||
#sidebar .nav .section ul li .section:focus,
|
||||
#sidebar .nav a.current:focus {
|
||||
background-color: #1389ce;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#sidebar .nav .section .top {
|
||||
background: #f6f7f8;
|
||||
border: none;
|
||||
border: none;
|
||||
color: #1389CE;
|
||||
}
|
||||
|
||||
#sidebar li {
|
||||
@ -101,15 +110,13 @@ html {
|
||||
}
|
||||
|
||||
#sidebar li a.current {
|
||||
background:rgb(3, 91, 136);
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
#sidebar .nav > li {}
|
||||
|
||||
|
||||
#sidebar .nav .section ul,
|
||||
#sidebar .nav .current ul {
|
||||
background: #f6f7f8;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
@ -117,17 +124,24 @@ html {
|
||||
|
||||
#sidebar .nav .section ul li a,
|
||||
#sidebar .nav .current ul li a {
|
||||
padding-left:24px;
|
||||
padding-left:30px;
|
||||
}
|
||||
|
||||
#sidebar .nav .section ul li a.section {
|
||||
color: #1389CE;
|
||||
}
|
||||
|
||||
#sidebar .nav .section ul li ul li a,
|
||||
#sidebar .nav .current ul li ul li a {
|
||||
padding-left:42px;
|
||||
padding-left:48px;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
#sidebar .nav a.current {}
|
||||
|
||||
#sidebar .nav a.current {
|
||||
color: #1389CE;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#sidebar .minor-nav a {
|
||||
color: #181C17;
|
||||
opacity: 0.4;
|
||||
@ -164,7 +178,7 @@ html {
|
||||
}
|
||||
|
||||
#masthead {
|
||||
padding: 50px 0;
|
||||
padding: 50px 0;
|
||||
background:#f6f7f8;
|
||||
position:relative;
|
||||
}
|
||||
@ -206,71 +220,61 @@ html {
|
||||
.versions .current {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
}
|
||||
|
||||
.menu-toggle img {
|
||||
width:32px;
|
||||
}
|
||||
|
||||
/*! language */
|
||||
#language {}
|
||||
|
||||
#language label {
|
||||
float: left;
|
||||
width: 830px;
|
||||
line-height: 19px;
|
||||
text-align: right;
|
||||
font-size: 11px;
|
||||
#language label {
|
||||
float: left;
|
||||
width: 830px;
|
||||
line-height: 19px;
|
||||
text-align: right;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#language select {
|
||||
float: right;
|
||||
#language select {
|
||||
float: right;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
#language input.action {
|
||||
float: right;
|
||||
#language input.action {
|
||||
float: right;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
#header {
|
||||
padding: 0 0 14px 0;
|
||||
#header {
|
||||
padding: 0 0 14px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#header h1 {
|
||||
margin: 0;
|
||||
line-height: 38px;
|
||||
float: left;
|
||||
#header h1 {
|
||||
margin: 0;
|
||||
line-height: 38px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#header h1 a {
|
||||
text-decoration: none;
|
||||
font-size: 22px;
|
||||
color: #0973A6;
|
||||
#header h1 a {
|
||||
text-decoration: none;
|
||||
font-size: 22px;
|
||||
color: #0973A6;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
#header .logo {
|
||||
background: #fff url(../../docsviewer/images/logo.jpg) no-repeat bottom left;
|
||||
height: 36px; width: 140px;
|
||||
display: inline-block;
|
||||
|
||||
#header .logo {
|
||||
background: #fff url(../../docsviewer/images/logo.jpg) no-repeat bottom left;
|
||||
height: 36px; width: 140px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Search Results */
|
||||
#search-results {}
|
||||
|
||||
#search-results li {
|
||||
list-style: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 0 0 19px 0;
|
||||
#search-results li {
|
||||
list-style: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 0 0 19px 0;
|
||||
margin: 0 0 20px 0;
|
||||
background: none;
|
||||
}
|
||||
@ -286,16 +290,16 @@ html {
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
#footer {
|
||||
margin: 20px auto;
|
||||
#footer {
|
||||
margin: 20px auto;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
#footer p {
|
||||
#footer p {
|
||||
color: #798D85;
|
||||
}
|
||||
|
||||
#footer p a {
|
||||
#footer p a {
|
||||
color: #798D85;
|
||||
}
|
||||
|
||||
@ -313,7 +317,7 @@ html {
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin: 27px 0;
|
||||
margin: 27px 0;
|
||||
}
|
||||
|
||||
.pagination li {
|
||||
@ -409,17 +413,17 @@ html {
|
||||
* <a href="#" class="close" title="Close notification">close</a>
|
||||
* </div>
|
||||
*/
|
||||
#content .warningBox h5,
|
||||
#content .hint h5,
|
||||
#content .notice h5,
|
||||
#content .warning h5,
|
||||
#content .info h5 {
|
||||
margin-bottom: 0px;
|
||||
#content .warningBox h5,
|
||||
#content .hint h5,
|
||||
#content .notice h5,
|
||||
#content .warning h5,
|
||||
#content .info h5 {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.hint a.close,
|
||||
.notice a.close,
|
||||
.warning a.close,
|
||||
.hint a.close,
|
||||
.notice a.close,
|
||||
.warning a.close,
|
||||
.info a.close {
|
||||
background:url(../../docsviewer/images/ico_close_off.png) no-repeat scroll left top transparent;
|
||||
display:block;
|
||||
@ -496,7 +500,7 @@ html {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.info {
|
||||
.info {
|
||||
background: #CAF7FF;
|
||||
}
|
||||
|
||||
@ -509,24 +513,24 @@ html {
|
||||
background: url(../../docsviewer/images/warning.png) no-repeat 18px 14px;
|
||||
}
|
||||
|
||||
.warningBoxTop h1 {
|
||||
.warningBoxTop h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.warningBoxTop ul {
|
||||
margin: 9px 0 18px;
|
||||
.warningBoxTop ul {
|
||||
margin: 9px 0 18px;
|
||||
}
|
||||
|
||||
.warningBoxTop li {
|
||||
margin-bottom: 0;
|
||||
.warningBoxTop li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.warningBox {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.warningBoxBottom {
|
||||
background-color: #0973A6;
|
||||
.warningBoxBottom {
|
||||
background-color: #0973A6;
|
||||
padding: 12px 0 16px;
|
||||
}
|
||||
|
||||
@ -537,20 +541,20 @@ html {
|
||||
|
||||
.doc-breadcrumbs {}
|
||||
|
||||
.doc-breadcrumbs p {
|
||||
margin: 0 0 5px 0;
|
||||
.doc-breadcrumbs p {
|
||||
margin: 0 0 5px 0;
|
||||
color: #999;
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
.doc-breadcrumbs p a {
|
||||
.doc-breadcrumbs p a {
|
||||
color: rgb(3, 91, 136);
|
||||
text-decoration:none;
|
||||
font-weight:200;
|
||||
}
|
||||
|
||||
.doc-breadcrumbs p a.current {
|
||||
color:#696868;
|
||||
color:#696868;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
@ -700,7 +704,7 @@ html {
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
box-shadow: -2px 1px 12px -3px #ccc;
|
||||
box-shadow: -2px 1px 40px -3px #999;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
@ -711,19 +715,99 @@ html {
|
||||
}
|
||||
|
||||
#masthead {
|
||||
padding:20px 0;
|
||||
padding:20px 0;
|
||||
}
|
||||
|
||||
.doc-breadcrumbs p {
|
||||
font-size:18px;
|
||||
font-size:18px;
|
||||
}
|
||||
|
||||
.introduction p {
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display:block;
|
||||
.wrapper .menu-toggle {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-bottom: 20px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
-webkit-transition: .5s ease-in-out;
|
||||
-moz-transition: .5s ease-in-out;
|
||||
-o-transition: .5s ease-in-out;
|
||||
transition: .5s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-toggle span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
background: #1389ce;
|
||||
border-radius: 9px;
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
-webkit-transition: .25s ease-in-out;
|
||||
-moz-transition: .25s ease-in-out;
|
||||
-o-transition: .25s ease-in-out;
|
||||
transition: .25s ease-in-out;
|
||||
}
|
||||
/* Icon 3 */
|
||||
|
||||
.menu-toggle span:nth-child(1) {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.menu-toggle span:nth-child(2),
|
||||
.menu-toggle span:nth-child(3) {
|
||||
top: 18px;
|
||||
}
|
||||
|
||||
.menu-toggle span:nth-child(4) {
|
||||
top: 28px;
|
||||
}
|
||||
|
||||
.menu-toggle.open span:nth-child(1) {
|
||||
top: 18px;
|
||||
width: 0%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.menu-toggle.open span:nth-child(2) {
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.menu-toggle.open span:nth-child(3) {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.menu-toggle.open span:nth-child(4) {
|
||||
top: 18px;
|
||||
width: 0%;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:992px) {
|
||||
#content {
|
||||
float: right;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,51 +1,51 @@
|
||||
/*! text selection */
|
||||
::-moz-selection {
|
||||
::-moz-selection {
|
||||
text-shadow:none;
|
||||
color: #ffffff;
|
||||
background: #1389CE;
|
||||
}
|
||||
|
||||
::selection {
|
||||
::selection {
|
||||
text-shadow: none;
|
||||
color: #ffffff;
|
||||
background: #1389CE;
|
||||
}
|
||||
|
||||
/*! links */
|
||||
a {
|
||||
color: #1389ce;
|
||||
text-decoration: none;
|
||||
a {
|
||||
color: #808c8d;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a[href$=".pdf"],
|
||||
a[href$=".PDF"],
|
||||
a.pdf {
|
||||
a.pdf {
|
||||
padding: 2px;
|
||||
padding-left: 20px;
|
||||
padding-left: 20px;
|
||||
background: url(../../docsviewer/images/icons/page_white_acrobat.png) no-repeat left center;
|
||||
}
|
||||
|
||||
|
||||
a[href$=".doc"],
|
||||
a[href$=".DOC"],
|
||||
a.doc {
|
||||
padding: 2px;
|
||||
padding-left: 20px;
|
||||
padding-left: 20px;
|
||||
background: url(../../docsviewer/images/icons/page_word.png) no-repeat left center;
|
||||
}
|
||||
|
||||
|
||||
a[href$=".xls"],
|
||||
a[href$=".XLS"],
|
||||
a.xls {
|
||||
padding: 2px;
|
||||
padding-left: 20px;
|
||||
background: url(../../docsviewer/images/icons/page_excel.png) no-repeat left center;
|
||||
padding-left: 20px;
|
||||
background: url(../../docsviewer/images/icons/page_excel.png) no-repeat left center;
|
||||
}
|
||||
|
||||
|
||||
a[href$=".gz"],
|
||||
a[href$=".GZ"],
|
||||
a[href$=".gzip"],
|
||||
@ -54,22 +54,22 @@ a[href$=".zip"],
|
||||
a[href$=".ZIP"],
|
||||
a.archive {
|
||||
padding: 2px;
|
||||
padding-left: 20px;
|
||||
background: url(../../docsviewer/images/icons/page_white_zip.png) no-repeat left center;
|
||||
padding-left: 20px;
|
||||
background: url(../../docsviewer/images/icons/page_white_zip.png) no-repeat left center;
|
||||
}
|
||||
|
||||
|
||||
a[href$=".exe"],
|
||||
a[href$=".EXE"],
|
||||
a.application {
|
||||
padding: 2px;
|
||||
padding-left: 20px;
|
||||
background: url(../../docsviewer/images/icons/application.png) no-repeat left center;
|
||||
background: url(../../docsviewer/images/icons/application.png) no-repeat left center;
|
||||
}
|
||||
|
||||
/*! pargraphs */
|
||||
p {
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
p {
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 25px;
|
||||
}
|
||||
|
||||
@ -78,36 +78,36 @@ p {
|
||||
}
|
||||
|
||||
/*! lists */
|
||||
ul {
|
||||
margin: 10px 0 20px 20px;
|
||||
ul {
|
||||
margin: 10px 0 20px 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li, dd, li p {
|
||||
font-size: 15px;
|
||||
li, dd, li p {
|
||||
font-size: 15px;
|
||||
margin: 0 0 10px 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-position: inside;
|
||||
li {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
li ul,
|
||||
li ol {
|
||||
li ol {
|
||||
margin: 0 0 5px 20px;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 7px 0 21px 0;
|
||||
dl {
|
||||
margin: 7px 0 21px 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 5px 0 10px 20px;
|
||||
dd {
|
||||
margin: 5px 0 10px 20px;
|
||||
}
|
||||
|
||||
.semantic {
|
||||
@ -132,10 +132,10 @@ ul.third {
|
||||
}
|
||||
|
||||
/*! headers */
|
||||
h1 {
|
||||
h1 {
|
||||
font-size: 35px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 0;
|
||||
letter-spacing: -1px;
|
||||
color:rgb(3, 91, 136);
|
||||
@ -145,44 +145,44 @@ h1 {
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
|
||||
h1 + p {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
line-height: 30px;
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
line-height: 30px;
|
||||
margin: 40px 0 20px;
|
||||
border-top: 1px solid #eee;
|
||||
padding-top: 29px;
|
||||
letter-spacing: -1px;
|
||||
color: rgb(3, 91, 136);
|
||||
color: rgb(3, 91, 136);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
margin: 30px 0 10px;
|
||||
color: #181c1d;
|
||||
color: #181c1d;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 14px;
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 14px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h1 .heading-anchor-link,
|
||||
@ -210,16 +210,16 @@ h6 .heading-anchor-link {
|
||||
/*! images */
|
||||
img {
|
||||
max-width: 100%;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid #ccc;
|
||||
padding: 6px;
|
||||
margin: 10px 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/*! code */
|
||||
pre {
|
||||
margin: 20px 0 30px;
|
||||
font: 13px/20px Monaco, 'Bitstream Vera Sans Mono', 'Courier New', monospace;
|
||||
pre {
|
||||
margin: 20px 0 30px;
|
||||
font: 13px/20px Monaco, 'Bitstream Vera Sans Mono', 'Courier New', monospace;
|
||||
background-color: #f6f7f8;
|
||||
border: 1px solid #e9eaed;
|
||||
padding: 14px;
|
||||
@ -228,27 +228,27 @@ pre {
|
||||
color: #4E5661;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: none;
|
||||
pre code {
|
||||
background: none;
|
||||
font-weight: normal;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
code {
|
||||
font: 13px/15px Monaco, 'Bitstream Vera Sans Mono', Courier, monospace;
|
||||
background: #ecf0f1;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
code a {
|
||||
color: #4E5661;
|
||||
code a {
|
||||
color: #4E5661;
|
||||
}
|
||||
|
||||
/*! quotes */
|
||||
blockquote {
|
||||
margin: 28px 0;
|
||||
padding: 14px 14px 0 38px;
|
||||
background: #f8f9fa url(../../docsviewer/images/quote.gif) no-repeat 9px 18px;
|
||||
blockquote {
|
||||
margin: 28px 0;
|
||||
padding: 14px 14px 0 38px;
|
||||
background: #f8f9fa url(../../docsviewer/images/quote.gif) no-repeat 9px 18px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -257,42 +257,42 @@ blockquote {
|
||||
blockquote h3,
|
||||
blockquote h4,
|
||||
blockquote h5,
|
||||
blockquote h6 {
|
||||
blockquote h6 {
|
||||
font-style: italic;
|
||||
color: #627871;
|
||||
color: #627871;
|
||||
}
|
||||
|
||||
blockquote h4 {
|
||||
font-size: 18px;
|
||||
|
||||
blockquote h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
blockquote p {
|
||||
font-style: italic;
|
||||
font-size: 14px;
|
||||
color: #667D76;
|
||||
|
||||
blockquote p {
|
||||
font-style: italic;
|
||||
font-size: 14px;
|
||||
color: #667D76;
|
||||
}
|
||||
|
||||
/*! tables */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
background-color: #fafafa;
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
background-color: #fafafa;
|
||||
margin-bottom: 28px;
|
||||
border: 1px solid #c3cdca;
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background: #eef4f6;
|
||||
table tr:nth-child(even) {
|
||||
background: #eef4f6;
|
||||
}
|
||||
|
||||
table caption {
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
table caption {
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
table thead {
|
||||
table thead {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
@ -303,12 +303,12 @@ table {
|
||||
border-right: 1px solid #c3cdca;
|
||||
}
|
||||
|
||||
table tbody tr {
|
||||
border-top: 1px solid #c3cdca;
|
||||
table tbody tr {
|
||||
border-top: 1px solid #c3cdca;
|
||||
}
|
||||
|
||||
table td {
|
||||
font-size: 15px;
|
||||
table td {
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
padding: 7px;
|
||||
border-right: 1px solid #c3cdca;
|
||||
@ -342,7 +342,7 @@ table {
|
||||
border-radius: 3px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
#edit-link a:hover,
|
||||
#edit-link a:focus {
|
||||
color: #fff;
|
||||
|
||||
@ -1,20 +1,31 @@
|
||||
;(function($) {
|
||||
$(document).ready(function() {
|
||||
|
||||
//toggle the side menu when in mobile
|
||||
$('.menu-toggle').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
var left = $('#sidebar').is('.visible') ? -270 : 0;
|
||||
$('#sidebar').animate({ left: left}, 'fast', function() {
|
||||
$(this).toggleClass('visible');
|
||||
});
|
||||
$(this).toggleClass('open');
|
||||
})
|
||||
|
||||
var switched = false;
|
||||
|
||||
|
||||
var updateTables = function() {
|
||||
if (($(window).width() < 540) && !switched ){
|
||||
switched = true;
|
||||
|
||||
|
||||
$("table").each(function(i, element) {
|
||||
splitTable($(element));
|
||||
});
|
||||
|
||||
|
||||
return true;
|
||||
}
|
||||
else if (switched && ($(window).width() > 540)) {
|
||||
switched = false;
|
||||
|
||||
|
||||
$("table").each(function(i, element) {
|
||||
unsplitTable($(element));
|
||||
});
|
||||
@ -62,7 +73,7 @@
|
||||
tx.each(function () {
|
||||
var height = $(this).outerHeight(true);
|
||||
heights[index] = heights[index] || 0;
|
||||
|
||||
|
||||
if (height > heights[index]) heights[index] = height;
|
||||
});
|
||||
});
|
||||
@ -121,74 +132,21 @@
|
||||
* Automatically adds anchor links to headings that have IDs
|
||||
*/
|
||||
var url = window.location.href.replace(/#[a-zA-Z0-9\-\_]*/g, '');
|
||||
|
||||
|
||||
$("#content h1[id], #content h2[id], #content h3[id], #content h4[id], #content h5[id], #content h6[id]").each(function() {
|
||||
var link = '<a class="heading-anchor-link" title="Link to this section" href="'+ url + '#' + $(this).attr('id') + '">¶</a>';
|
||||
$(this).append(' ' + link);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
$("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]").mouseenter(function() {
|
||||
$(this).addClass('hover');
|
||||
});
|
||||
|
||||
|
||||
$("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]").mouseleave(function() {
|
||||
$(this).removeClass('hover');
|
||||
});
|
||||
|
||||
/*
|
||||
$(".search input").live("keyup", function(e) {
|
||||
clearTimeout($.data(this, 'timer'));
|
||||
|
||||
var string = $(this).val();
|
||||
var self = $(this);
|
||||
|
||||
if (string == '') {
|
||||
$(".search .autocomplete-results").hide();
|
||||
} else {
|
||||
var container;
|
||||
|
||||
if($(this).siblings('.autocomplete-results').length == 0) {
|
||||
container = $("<div class='autocomplete-results'></div");
|
||||
|
||||
$(this).after(container);
|
||||
} else {
|
||||
container = $(this).siblings('.autocomplete-results').first();
|
||||
}
|
||||
|
||||
$(this).data('timer', setTimeout(function() {
|
||||
if(string !== '') {
|
||||
$.getJSON(
|
||||
self.parents('form').attr('action'),
|
||||
{ query: string },
|
||||
function(results) {
|
||||
if(results) {
|
||||
var list = $("<ul></ul>");
|
||||
|
||||
$.each(results, function(i, elem) {
|
||||
list.append(
|
||||
$("<li></li>")
|
||||
.append(
|
||||
$("<a></a>").attr('href', elem.link).text(elem.title)
|
||||
).append(
|
||||
elem.path
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
container.append(list);
|
||||
} else {
|
||||
container.hide().removeClass('loading');
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
return false;
|
||||
}, 100));
|
||||
};
|
||||
|
||||
});
|
||||
*/
|
||||
|
||||
/** ---------------------------------------------
|
||||
* LANGAUGE SELECTER
|
||||
@ -196,13 +154,13 @@
|
||||
* Hide the change button and do it onclick
|
||||
*/
|
||||
$("#Form_LanguageForm .Actions").hide();
|
||||
|
||||
|
||||
$("#Form_LanguageForm select").change(function() {
|
||||
$("#Form_LanguageForm").submit();
|
||||
});
|
||||
|
||||
|
||||
/** ---------------------------------------------
|
||||
* SYNTAX HIGHLIGHTER
|
||||
* SYNTAX HIGHLIGHTER
|
||||
*
|
||||
* As the Markdown parser now uses the GFM structure (```yml) this does
|
||||
* not work with SyntaxHighlighter. The below translates the GFM output
|
||||
@ -218,13 +176,6 @@
|
||||
}
|
||||
});
|
||||
|
||||
$('.menu-toggle').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
var left = $('#sidebar').is('.visible') ? -270 : 0;
|
||||
$('#sidebar').animate({ left: left}, 'fast', function() {
|
||||
$(this).toggleClass('visible');
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
@ -1,11 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<% include DocumentationHead %>
|
||||
|
||||
<% include DocumentationHead %>
|
||||
|
||||
<div id="masthead" <% if Versions %>class="has_versions"<% end_if %>>
|
||||
<div class="wrapper">
|
||||
<% if Breadcrumbs.count > 1 %>
|
||||
<a class="menu-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</a>
|
||||
|
||||
<% if Breadcrumbs.count > 1 %>
|
||||
<% include DocumentationBreadcrumbs %>
|
||||
<% else_if Page.Title %>
|
||||
<h1>$Page.Title</h1>
|
||||
@ -18,8 +25,8 @@
|
||||
|
||||
<% include DocumentationVersions %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div id="layout" class="clearfix">
|
||||
|
||||
@ -27,12 +34,12 @@
|
||||
|
||||
<div id="content">
|
||||
$Layout
|
||||
|
||||
|
||||
<% include DocumentationFooter %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<% include DocumentationGA %>
|
||||
<% include DocumentationEnd %>
|
||||
|
||||
@ -1,35 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<% include DocumentationHead %>
|
||||
|
||||
<% include DocumentationHead %>
|
||||
|
||||
<div id="masthead" <% if Versions %>class="has_versions"<% end_if %>>
|
||||
<div class="wrapper">
|
||||
|
||||
<div class="doc-breadcrumbs">
|
||||
<p>
|
||||
<a class="menu-toggle"><img src="docsviewer/images/menu.png"></a>
|
||||
<a class="menu-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</a>
|
||||
<a class="breadcrumb" href="$BaseHref">Documentation</a>
|
||||
<span>/</span>
|
||||
<a class="breadcrumb current">Index</a>
|
||||
<span>/</span>
|
||||
<a class="breadcrumb current">Index</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div id="layout" class="clearfix">
|
||||
|
||||
$Layout
|
||||
|
||||
|
||||
<% include DocumentationFooter %>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<% include DocumentationGA %>
|
||||
<% include DocumentationEnd %>
|
||||
|
||||
@ -1,35 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<% include DocumentationHead %>
|
||||
|
||||
<% include DocumentationHead %>
|
||||
|
||||
<div id="masthead" <% if Versions %>class="has_versions"<% end_if %>>
|
||||
<div class="wrapper">
|
||||
|
||||
<div class="doc-breadcrumbs">
|
||||
<p>
|
||||
<a class="menu-toggle"><img src="docsviewer/images/menu.png"></a>
|
||||
<a class="breadcrumb" href="$BaseHref">Documentation</a>
|
||||
<span>/</span>
|
||||
<a class="breadcrumb current">Search</a>
|
||||
<a class="menu-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</a>
|
||||
<a class="breadcrumb" href="$BaseHref">Documentation</a>
|
||||
<span>/</span>
|
||||
<a class="breadcrumb current">Search</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div id="layout" class="clearfix">
|
||||
|
||||
$Layout
|
||||
|
||||
|
||||
<% include DocumentationFooter %>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<% include DocumentationGA %>
|
||||
<% include DocumentationEnd %>
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<div class="doc-breadcrumbs">
|
||||
<p>
|
||||
<a class="menu-toggle"><img src="docsviewer/images/menu.png"></a>
|
||||
<% loop Breadcrumbs %>
|
||||
<% if not First %>
|
||||
<a class="breadcrumb <% if Last %>current<% end_if %>" href="$Link">$Title</a> <% if Last %><% else %><span>/</span><% end_if %>
|
||||
<% if not First %>
|
||||
<a class="breadcrumb <% if Last %>current<% end_if %>" href="$Link">$Title</a> <% if Last %><% else %><span>/</span><% end_if %>
|
||||
<% end_if %>
|
||||
<% end_loop %>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,16 +1,15 @@
|
||||
<div id="sidebar">
|
||||
<div class="box">
|
||||
$DocumentationSearchForm
|
||||
|
||||
<ul class="nav">
|
||||
<% if not HasDefaultEntity %>
|
||||
<li><a href="$Link" class="top">Home</a></li>
|
||||
<% end_if %>
|
||||
|
||||
|
||||
<% loop Menu %>
|
||||
<% if DefaultEntity %>
|
||||
<li><a href="$Link" class="top">Home</a></li>
|
||||
|
||||
|
||||
<% loop Children %>
|
||||
<li class="$LinkingMode <% if Last %>last<% end_if %>">
|
||||
<a href="$Link" class="top">$Title</a>
|
||||
|
||||
@ -1 +1 @@
|
||||
<div id="table-contents-holder"></div>
|
||||
<div id="table-contents-holder"></div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user