From 3261a47826266660ffb2d1bda819caaf7bdfe568 Mon Sep 17 00:00:00 2001 From: Vladimir Agafonkin Date: Tue, 30 Jun 2015 18:45:59 +0300 Subject: [PATCH] consistent whitepace in CSS --- docs/css/main.css | 862 +++++++++++++++++++++++----------------------- 1 file changed, 431 insertions(+), 431 deletions(-) diff --git a/docs/css/main.css b/docs/css/main.css index 20afbaf9..22560320 100644 --- a/docs/css/main.css +++ b/docs/css/main.css @@ -2,16 +2,16 @@ /* general styles */ html, body, input, select, button, textarea, table { - font-size: 100%; - font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; + font-size: 100%; + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; } body { - line-height: 1.5; - color: #333; + line-height: 1.5; + color: #333; } p { @@ -19,11 +19,11 @@ p { } a { - color: #1EB300; + color: #1EB300; } a:hover, a:focus { - color: #160; + color: #160; } hr { @@ -37,12 +37,12 @@ hr { .clearfix:before, .clearfix:after { - content: " "; /* 1 */ - display: table; /* 2 */ + content: " "; + display: table; } .clearfix:after { - clear: both; + clear: both; } table { @@ -52,57 +52,57 @@ table { th, td { text-align: left; - border: 0; - padding: 1em; + border: 0; + padding: 1em; } table td { - color: #666; + color: #666; } table td:first-child { - color: #777; + color: #777; } table td:last-child { - color: black; + color: black; } table td code i { - color: #00A707; + color: #00A707; } table td code b { - color: black; - font-weight: normal; + color: black; + font-weight: normal; } table tbody tr { - background-color: #fafafa; + background-color: #fafafa; } table tbody tr:nth-child(odd) { - background-color: #f5f5f5; + background-color: #f5f5f5; } /* headings */ h2 { - margin: 30px 0 20px; - padding-top: 20px; - font-weight: 400; - font-size: 2em; - font-weight: 300; - color: black; + margin: 30px 0 20px; + padding-top: 20px; + font-weight: 400; + font-size: 2em; + font-weight: 300; + color: black; } .container > h2:first-child { - margin-bottom: 40px; + margin-bottom: 40px; } h2:target { - color: #1EB300; + color: #1EB300; } h3 { @@ -119,7 +119,7 @@ h4 { .container { max-width: 54em; - padding: 0 6em 1.5em; + padding: 0 6em 1.5em; margin: 0 auto; } .footer { @@ -136,31 +136,31 @@ h1 { } h1 a { - display: block; - margin: auto; - padding: 0 2em; + display: block; + margin: auto; + padding: 0 2em; -webkit-transition: 0.8s all; -webkit-animation: leafanim 3s ease 3s 1 normal none; - transition: 0.8s all; - animation: leafanim 3s ease 3s 1 normal none; + transition: 0.8s all; + animation: leafanim 3s ease 3s 1 normal none; } @-webkit-keyframes leafanim { - 50% { -webkit-filter: hue-rotate(-70deg) saturate(1.2); } + 50% { -webkit-filter: hue-rotate(-70deg) saturate(1.2); } } @keyframes leafanim { - 50% { -webkit-filter: hue-rotate(-70deg) saturate(1.2); } + 50% { -webkit-filter: hue-rotate(-70deg) saturate(1.2); } } h1 a img { - display: block; - margin: auto; - max-width: 100%; + display: block; + margin: auto; + max-width: 100%; } h1 a:hover, h1 a:focus { - -webkit-filter: hue-rotate(-70deg) saturate(1.5); + -webkit-filter: hue-rotate(-70deg) saturate(1.5); } h3.tagline { @@ -184,8 +184,8 @@ h3.tagline { } .nav li { - display: inline-block; - padding: .333em .5em; + display: inline-block; + padding: .333em .5em; color: #999; } @@ -195,16 +195,16 @@ h3.tagline { } .ext-links { - position: fixed; - top: 1.5em; - right: 1.5em; + position: fixed; + top: 1.5em; + right: 1.5em; } .ext-link { - display: block; - opacity: 0.5; - -webkit-animation: fadein 1s; - animation: fadein 1s; + display: block; + opacity: 0.5; + -webkit-animation: fadein 1s; + animation: fadein 1s; } .ext-link:hover { opacity: 1; @@ -214,8 +214,8 @@ h3.tagline { to { opacity: 0.5; } } @keyframes fadein { - from { opacity: 0; } - to { opacity: 0.5; } + from { opacity: 0; } + to { opacity: 0.5; } } @@ -223,14 +223,14 @@ h3.tagline { .container code, .container pre code { font-family: "Consolas", "Menlo", "Lucida Console", "Courier New", monospace; - -webkit-font-smoothing: subpixel-antialiased; + -webkit-font-smoothing: subpixel-antialiased; } .container pre code { - font-size: 14px; + font-size: 14px; padding: .75em 1em; - border-radius: 5px; - white-space: pre; - overflow: scroll; + border-radius: 5px; + white-space: pre; + overflow: scroll; } .container pre { border-radius: 5px; @@ -257,88 +257,88 @@ h3.tagline { } .usedby-title { - text-align: center; - background-color: #f5f5f5; - padding: 1.5em 1em 1em; - margin: 0; + text-align: center; + background-color: #f5f5f5; + padding: 1.5em 1em 1em; + margin: 0; } .usedby { - margin: 0; - text-align: center; - padding: 0 3em 3.5em; - background-color: #f5f5f5; + margin: 0; + text-align: center; + padding: 0 3em 3.5em; + background-color: #f5f5f5; } .logo { - display: inline-block; - opacity: 0.6; - height: 32px; - overflow: hidden; - text-indent: -9999px; - margin: 1em; - background: url(../images/logos.png); - background-size: 100%; - vertical-align: middle; + display: inline-block; + opacity: 0.6; + height: 32px; + overflow: hidden; + text-indent: -9999px; + margin: 1em; + background: url(../images/logos.png); + background-size: 100%; + vertical-align: middle; } .logo:hover { opacity: 1; } .logo-github { - background-position: 4px -529px; - width: 110px; - background-size: 110px; + background-position: 4px -529px; + width: 110px; + background-size: 110px; } .logo-foursquare { - background-position: 50% -4px; - width: 135px; + background-position: 50% -4px; + width: 135px; } .logo-pinterest { - background-position: 50% -39px; - width: 115px; + background-position: 50% -39px; + width: 115px; } .logo-500px { - background-position: 50% -48px; - width: 55px; - background-size: 5em; + background-position: 50% -48px; + width: 55px; + background-size: 5em; } .logo-evernote { - background-position: 50% -713px; - width: 170px; - height: 43px; + background-position: 50% -713px; + width: 170px; + height: 43px; } .logo-ftimes { - background-position: 9px -189px; - width: 130px; - height: 40px; - background-size: 145px; + background-position: 9px -189px; + width: 130px; + height: 40px; + background-size: 145px; } .logo-wpost { - background-position: 50% -870px; - width: 170px; + background-position: 50% -870px; + width: 170px; } .logo-npr { - background-position: 50% -641px; - width: 120px; - height: 40px; + background-position: 50% -641px; + width: 120px; + height: 40px; } .logo-usatoday { - background-position: 50% -682px; - width: 120px; - height: 30px; + background-position: 50% -682px; + width: 120px; + height: 30px; } .logo-hipmunk { - background-position: 50% -741px; - width: 125px; + background-position: 50% -741px; + width: 125px; } .features { @@ -360,15 +360,15 @@ h3.tagline { .example-img { float: left; - width: 10em; - max-width: 100%; - border-radius: 5px; - margin: 0 1.5em 1.5em 0; - border: thin solid #ccc; + width: 10em; + max-width: 100%; + border-radius: 5px; + margin: 0 1.5em 1.5em 0; + border: thin solid #ccc; } .examples .container h3 { - margin-top: 0; + margin-top: 0; } .post-date { float: left; @@ -393,7 +393,7 @@ h3.tagline { } table.plugins td:first-child a { - font-weight: bold; + font-weight: bold; } .plugins-page .toc-col { @@ -405,25 +405,25 @@ table.plugins td:first-child a { /* API docs */ .api-page .toc-col { - position: relative; - float: left; - width: 20%; - padding-right: 1em; - margin: 0; - box-sizing: border-box; + position: relative; + float: left; + width: 20%; + padding-right: 1em; + margin: 0; + box-sizing: border-box; } .api-page .toc-col.map-col { - padding-right: 1.5em; - border-right: thin solid #eee; + padding-right: 1.5em; + border-right: thin solid #eee; } .api-page .toc-col.map-col ~ .toc-col { - right: -1.5em; + right: -1.5em; } .api-page .toc-col.map-col h4 { - color: #666; + color: #666; } #toc h4 { @@ -438,50 +438,50 @@ table.plugins td:first-child a { } #toc .colborder { - padding-right: 14px; + padding-right: 14px; } #toc .span-3 { - margin: 0; - padding-right: 3em; - width: 16.825%; - box-sizing: border-box; + margin: 0; + padding-right: 3em; + width: 16.825%; + box-sizing: border-box; } #toc .span-3.last { - padding-right: 0; + padding-right: 0; } #toc-copy { - display: none; + display: none; } #toc-copy div { - border: 0; - margin: 0; - padding: 0; - width: auto; - float: none; + border: 0; + margin: 0; + padding: 0; + width: auto; + float: none; } #toc-copy h4 { - margin: 0; - padding-bottom: .333em; + margin: 0; + padding-bottom: .333em; } #toc-copy ul { - display: none; - list-style: none; + display: none; + list-style: none; } #toc-copy ul li { - white-space: nowrap; + white-space: nowrap; } #toc-copy ul li a { - position: relative; - padding: .25em .5em 0; - z-index: 10; + position: relative; + padding: .25em .5em 0; + z-index: 10; } #toc-copy .toc-col { @@ -489,190 +489,190 @@ table.plugins td:first-child a { } @media screen and (max-width: 1350px) { - #toc-copy { - display: block; - position: fixed; - top: 0.1em; - left: 0.25em; - width: 32px; - height: 32px; - opacity: 0; - cursor: pointer; - -webkit-transition: opacity .2s ease; - transition: opacity .2s ease; - } + #toc-copy { + display: block; + position: fixed; + top: 0.1em; + left: 0.25em; + width: 32px; + height: 32px; + opacity: 0; + cursor: pointer; + -webkit-transition: opacity .2s ease; + transition: opacity .2s ease; + } - #toc-copy > div { display: none; } + #toc-copy > div { display: none; } - .scrolled #toc-copy { - opacity: 1; - background: white; - } + .scrolled #toc-copy { + opacity: 1; + background: white; + } - #toc-copy.active { - background-color: white; - background-color: rgba(255, 255, 255, 0.9); - padding: 2em; - width: 100%; - height: 100%; - overflow-x: hidden; - overflow-y: scroll; - cursor: default; - box-sizing: border-box; - } + #toc-copy.active { + background-color: white; + background-color: rgba(255, 255, 255, 0.9); + padding: 2em; + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: scroll; + cursor: default; + box-sizing: border-box; + } - #toc-copy:before, - #toc-copy:after { - content: ''; - position: absolute; - left: 5px; - width: 22px; - height: 14px; - border-top: 2px solid black; - cursor: pointer; - box-sizing: border-box; - -webkit-transition: -webkit-transform .25s ease; - transition: transform .25s ease; - } + #toc-copy:before, + #toc-copy:after { + content: ''; + position: absolute; + left: 5px; + width: 22px; + height: 14px; + border-top: 2px solid black; + cursor: pointer; + box-sizing: border-box; + -webkit-transition: -webkit-transform .25s ease; + transition: transform .25s ease; + } - #toc-copy:before { - top: 9px; - border-bottom: 2px solid black; - } + #toc-copy:before { + top: 9px; + border-bottom: 2px solid black; + } - #toc-copy:after { - top: 15px; - } + #toc-copy:after { + top: 15px; + } - #toc-copy.active:before { - top: 5px; - left: 9px; - border-bottom: 0; - -webkit-transform: rotate(-135deg); - transform: rotate(-135deg); - } + #toc-copy.active:before { + top: 5px; + left: 9px; + border-bottom: 0; + -webkit-transform: rotate(-135deg); + transform: rotate(-135deg); + } - #toc-copy.active:after { - top: 13px; - left: 9px; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); - } + #toc-copy.active:after { + top: 13px; + left: 9px; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + } - #toc-copy.active div { display: block; } + #toc-copy.active div { display: block; } - #toc-copy h4.active, #toc-copy h4:hover { - color: black; - cursor: pointer; - } + #toc-copy h4.active, #toc-copy h4:hover { + color: black; + cursor: pointer; + } - #toc-copy h4.active + ul { - display: block; - padding: 0; - margin: 0 0 .5em; - } + #toc-copy h4.active + ul { + display: block; + padding: 0; + margin: 0 0 .5em; + } - #toc-copy ul li a { padding: .25em 0; } + #toc-copy ul li a { padding: .25em 0; } } @media screen and (min-width: 900px) and (max-width: 1350px) { - #toc-copy { - width: 40px; - height: 40px; - } + #toc-copy { + width: 40px; + height: 40px; + } - #toc-copy.active { - padding: 2.5em; - } + #toc-copy.active { + padding: 2.5em; + } - #toc-copy:before, - #toc-copy:after { - left: 8px; - } + #toc-copy:before, + #toc-copy:after { + left: 8px; + } - #toc-copy:before { top: 13px; } + #toc-copy:before { top: 13px; } - #toc-copy:after { top: 19px; } + #toc-copy:after { top: 19px; } - #toc-copy.active:before { - top: 7px; - left: 10px; - } + #toc-copy.active:before { + top: 7px; + left: 10px; + } - #toc-copy.active:after { - top: 15px; - left: 10px; - } + #toc-copy.active:after { + top: 15px; + left: 10px; + } } @media screen and (min-width: 1350px) and (min-height: 600px) { - #toc-copy { - display: block; - position: fixed; - top: 0; - left: 0; - width: auto; - height: auto; - padding: 2em; - opacity: 0; - transition: opacity .25s ease; - -webkit-transition: opacity .25s ease; - } + #toc-copy { + display: block; + position: fixed; + top: 0; + left: 0; + width: auto; + height: auto; + padding: 2em; + opacity: 0; + transition: opacity .25s ease; + -webkit-transition: opacity .25s ease; + } - #toc-copy:before { - content: 'Table of contents'; - display: block; - margin: -.25em 0 1em; - font-size: 75%; - font-weight: 300; - text-transform: uppercase; - } + #toc-copy:before { + content: 'Table of contents'; + display: block; + margin: -.25em 0 1em; + font-size: 75%; + font-weight: 300; + text-transform: uppercase; + } - .scrolled #toc-copy { opacity: 1; } + .scrolled #toc-copy { opacity: 1; } - #toc-copy h4 { padding-right: 5em; } + #toc-copy h4 { padding-right: 5em; } - #toc-copy ul { - position: absolute; - left: 100%; - margin: -4.9em 0 0 -4.5em; - padding: 3em 6em 3em 0; - } + #toc-copy ul { + position: absolute; + left: 100%; + margin: -4.9em 0 0 -4.5em; + padding: 3em 6em 3em 0; + } - #toc-copy h4:hover + ul, - #toc-copy ul:hover { - display: block; - } + #toc-copy h4:hover + ul, + #toc-copy ul:hover { + display: block; + } - #toc-copy h4:hover + ul:before, - #toc-copy ul:hover:before { - content: ''; - position: absolute; - top: 3.775em; - right: 100%; - margin-right: .25em; - width: 1em; - height: 1em; - border-top: 2px solid #eee; - } + #toc-copy h4:hover + ul:before, + #toc-copy ul:hover:before { + content: ''; + position: absolute; + top: 3.775em; + right: 100%; + margin-right: .25em; + width: 1em; + height: 1em; + border-top: 2px solid #eee; + } - #toc-copy h4:hover + ul:after, - #toc-copy ul:hover:after { - content: ''; - position: absolute; - z-index: -1; - top: -1000px; - bottom: -1000px; - left: 0; - width: 12.5em; - background: white; - background: rgba(255,255,255,0.9); - } + #toc-copy h4:hover + ul:after, + #toc-copy ul:hover:after { + content: ''; + position: absolute; + z-index: -1; + top: -1000px; + bottom: -1000px; + left: 0; + width: 12.5em; + background: white; + background: rgba(255,255,255,0.9); + } - #toc-copy h4:hover, #toc-copy h4.hover { - color: black; - cursor: pointer; - } + #toc-copy h4:hover, #toc-copy h4.hover { + color: black; + cursor: pointer; + } } /* API docs - tables */ @@ -687,8 +687,8 @@ table.plugins td:first-child a { color: black; } .api-page table td:last-child code { - word-break: break-word; - white-space: pre-wrap; + word-break: break-word; + white-space: pre-wrap; } .api-page table td code i { color: #9a9; @@ -709,7 +709,7 @@ table.plugins td:first-child a { tr:target { background: yellow; -webkit-animation: highlight 2s ease 0.5s 1 normal forwards; - animation: highlight 2s ease 0.5s 1 normal forwards; + animation: highlight 2s ease 0.5s 1 normal forwards; } @-webkit-keyframes highlight { @@ -740,190 +740,190 @@ tr:target { } .api-page h2[id]:before { - margin-left: -32px; - margin-top: 14px; + margin-left: -32px; + margin-top: 14px; } .api-page tr[id] td:first-child:before { - opacity: 0; + opacity: 0; } .api-page tr[id]:hover td:first-child:before { - opacity: 1; + opacity: 1; } .api-page h2[id]:hover:before { opacity: 1; } @media (-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi) { - .api-page h2[id]:before, - .api-page tr[id] td:first-child:before { - background-image: url(../images/sprite.svg); - } + .api-page h2[id]:before, + .api-page tr[id] td:first-child:before { + background-image: url(../images/sprite.svg); + } } @media screen and (max-width: 767px) { - #toc .colborder { - padding: 0; - } + #toc .colborder { + padding: 0; + } - .colborder { - margin: 0; - border: 0; - } + .colborder { + margin: 0; + border: 0; + } - #toc .toc-col { - width: 50%; - float: none; - position: static; - display: inline-block; - margin: 0; - border: 0; - padding-right: .5em; - margin-right: -.25em; - vertical-align: top; - box-sizing: border-box; - } + #toc .toc-col { + width: 50%; + float: none; + position: static; + display: inline-block; + margin: 0; + border: 0; + padding-right: .5em; + margin-right: -.25em; + vertical-align: top; + box-sizing: border-box; + } - .toc-col.last-col { - clear: both; - } + .toc-col.last-col { + clear: both; + } - table.plugins tbody tr { - display: block; - padding-bottom: 1em; - } + table.plugins tbody tr { + display: block; + padding-bottom: 1em; + } - table.plugins tbody tr td { - white-space: normal; - display: inline-block; - padding-bottom: 0; - } + table.plugins tbody tr td { + white-space: normal; + display: inline-block; + padding-bottom: 0; + } - table.plugins tr:first-child { - padding-bottom: 0; - } + table.plugins tr:first-child { + padding-bottom: 0; + } - table.plugins tr:first-child th { - display: block; - } + table.plugins tr:first-child th { + display: block; + } - table.plugins tr:first-child th ~ th { - display: none; - } + table.plugins tr:first-child th ~ th { + display: none; + } - table.plugins td:first-child { - display: block; - white-space: normal; - } + table.plugins td:first-child { + display: block; + white-space: normal; + } - .api-page table tbody tr { - display: block; - } + .api-page table tbody tr { + display: block; + } - .api-page table tbody tr th, - .api-page table tbody tr td { - display: inline-block; - background-color: transparent; - width: auto; - } + .api-page table tbody tr th, + .api-page table tbody tr td { + display: inline-block; + background-color: transparent; + width: auto; + } - .api-page table tr:first-child th ~ th { - display: none; - } + .api-page table tr:first-child th ~ th { + display: none; + } - .api-page table tbody tr th:nth-child(2), - .api-page table tbody tr th:nth-child(3) { - display: inline-block; - } + .api-page table tbody tr th:nth-child(2), + .api-page table tbody tr th:nth-child(3) { + display: inline-block; + } - .api-page table tr th:last-child { - display: none !important; - } + .api-page table tr th:last-child { + display: none !important; + } - .api-page table tbody tr td:last-child { - display: block; - border-top: thin dashed #ddd; - padding: 1em; - } + .api-page table tbody tr td:last-child { + display: block; + border-top: thin dashed #ddd; + padding: 1em; + } - .api-page table tbody tr td:last-child:before { - content: 'Description'; - display: block; - text-transform: uppercase; - font-size: 90%; - margin-bottom: .75em; - color: #666; - } + .api-page table tbody tr td:last-child:before { + content: 'Description'; + display: block; + text-transform: uppercase; + font-size: 90%; + margin-bottom: .75em; + color: #666; + } - td code { - word-break: break-word; - } + td code { + word-break: break-word; + } } @media screen and (max-width: 56em) { - .container { - padding: 0 2em 1.5em; - } + .container { + padding: 0 2em 1.5em; + } - .footer, .social-buttons { - text-align: center; - } + .footer, .social-buttons { + text-align: center; + } - .footer { - margin-top: 2em; - } + .footer { + margin-top: 2em; + } - .ext-links { - position: static; - margin: 0 auto 2em; - text-align: center; - clear: both; - } + .ext-links { + position: static; + margin: 0 auto 2em; + text-align: center; + clear: both; + } - .ext-link { - display: inline-block; - vertical-align: middle; - margin: .25em; - } + .ext-link { + display: inline-block; + vertical-align: middle; + margin: .25em; + } - .features { -webkit-column-count: 2; } + .features { -webkit-column-count: 2; } } @media screen and (max-width: 500px) { - .nav { - font-size: 1.25em; - } + .nav { + font-size: 1.25em; + } - h3.tagline { - font-size: 1.333em; - margin: 0 2em; - } + h3.tagline { + font-size: 1.333em; + margin: 0 2em; + } - .container { - padding: 0 1.5em 1.5em; - } + .container { + padding: 0 1.5em 1.5em; + } - .usedby { - padding-left: 0; - padding-right: 0; - } + .usedby { + padding-left: 0; + padding-right: 0; + } - .features { -webkit-column-count: 1; } + .features { -webkit-column-count: 1; } - .example-img { - float: none; - display: block; - width: auto; - margin: 0 0 -.25em; - border: 0; - } + .example-img { + float: none; + display: block; + width: auto; + margin: 0 0 -.25em; + border: 0; + } - .post-date { - float: none; - width: auto; - margin: 0 0 .333em; - } + .post-date { + float: none; + width: auto; + margin: 0 0 .333em; + } - .api-page h2[id] { text-indent: 24px; } - .api-page h2[id]:before { margin-left: -28px; } + .api-page h2[id] { text-indent: 24px; } + .api-page h2[id]:before { margin-left: -28px; } }