mirrors
/
devdocs
mirror of https://github.com/freeCodeCamp/devdocs
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

New design

Browse Source
pull/139/head
Thibaut 10 years ago
parent a3aa03bc3d
commit 465a172025
29 changed files with 241 additions and 299 deletions
Show Stats Download Patch File Download Diff File

BIN
assets/images/icons.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

BIN
assets/images/icons@2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 59 KiB

6
assets/javascripts/templates/pages/news_tmpl.coffee
Unescape View File

@ -33,7 +33,11 @@ newsItem = (date, news) ->
result
app.news = [
[ 1413676800000, # October 19, 2014
[ 1415491200000, # November 9, 2014
""" New design
Feedback welcome on <a href="https://twitter.com/DevDocs" target="_blank">Twitter</a> and <a href="https://github.com/Thibaut/devdocs" target="_blank">GitHub</a>. """
], [
1413676800000, # October 19, 2014
""" New <a href="/svg/">SVG</a>, <a href="/marionette/">Marionette.js</a>, and <a href="/mongoose/">Mongoose</a> documentations """,
], [
1413590400000, # October 18, 2014

4
assets/javascripts/templates/pages/root_tmpl.coffee.erb
Unescape View File

@ -13,8 +13,8 @@ app.templates.intro = """
<ol class="_intro-list">
<li>Your local version of DevDocs won't self-update. Unless you're offline or modifying the code,
I recommend using the hosted version at <a href="http://devdocs.io">devdocs.io</a>.
<li>Run <code class="_label">thor docs:list</code> to see all available documentations.
<li>Run <code class="_label">thor docs:download --all</code> to download/update all documentations.
<li>Run <code>thor docs:list</code> to see all available documentations.
<li>Run <code>thor docs:download --all</code> to download/update all documentations.
<li>To be notified about new versions, don't forget to <a href="https://github.com/Thibaut/devdocs/subscription">watch the repository</a> on GitHub.
<li>The <a href="https://github.com/Thibaut/devdocs/issues">issue tracker</a> is the preferred channel for bug reports and
feature requests. For everything else, use the <a href="https://groups.google.com/d/forum/devdocs">mailing list</a>.

2
assets/javascripts/views/search/search_scope.coffee
Unescape View File

@ -49,7 +49,7 @@ class app.views.SearchScope extends app.View
@input.removeAttribute 'placeholder'
@input.value = @input.value[@input.selectionStart..]
@input.style.paddingLeft = @tag.offsetWidth + 6 + 'px'
@input.style.paddingLeft = @tag.offsetWidth + 10 + 'px'
$.trigger @input, 'input'
reset: =>

2
assets/javascripts/views/sidebar/sidebar_hover.coffee
Unescape View File

@ -59,7 +59,7 @@ class app.views.SidebarHover extends app.View
el.classList.contains 'active'
isTruncated: (el) ->
el.scrollWidth >= el.offsetWidth
el.scrollWidth > el.offsetWidth
onFocus: (event) =>
@focusTime = Date.now()

2
assets/stylesheets/components/_app.scss
Unescape View File

@ -26,7 +26,7 @@
line-height: 1;
margin-top: -.75em;
font-size: 4rem;
color: #ccc;
color: $loadingText;
text-align: center;
letter-spacing: -.125rem;
opacity: 0;

36
assets/stylesheets/components/_content.scss
Unescape View File

@ -7,9 +7,6 @@
z-index: $contentZ;
height: 100%;
margin-left: $sidebarWidth;
border-top: 1px solid #b4b7bf;
box-shadow: inset 0 1px rgba(black, .04), // top inner shadow
inset 1px 0 #f4f4f4; // left inner shadow
pointer-events: none;
@extend %border-box;
@ -20,7 +17,7 @@
position: relative;
height: 100%;
overflow-y: scroll;
margin-left: 1rem;
margin-left: .875rem;
padding: 1.25rem 1.5rem 0;
font-size: .875rem;
pointer-events: auto;
@ -28,6 +25,8 @@
@extend %border-box;
-webkit-padding-start: .75rem;
-webkit-padding-end: 1rem;
@media (-moz-overlay-scrollbars) { padding-left: .75rem; }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { margin-left: 0; }
@ -36,10 +35,28 @@
display: block;
margin-bottom: 1.25rem;
}
&::-webkit-scrollbar { -webkit-appearance: none; }
&::-webkit-scrollbar:vertical { width: 14px; }
&::-webkit-scrollbar:horizontal { height: 14px }
&::-webkit-scrollbar-button { display: none; }
&::-webkit-scrollbar-track { background: $contentBackground; }
&::-webkit-scrollbar-thumb {
min-height: 2rem;
background: $scrollbarColor;
background-clip: padding-box;
border: 5px solid $contentBackground;
border-radius: 10px;
&:active {
background-color: $scrollbarColorHover;
border-width: 4px;
}
}
}
._content-loading:before {
color: #e6e6e6;
opacity: 1;
@extend ._booting:before;
}
@ -48,7 +65,7 @@
//
._splash-title {
color: #ddd;
color: $splashText;
cursor: default;
opacity: 1;
@extend ._booting:before, %user-select-none;
@ -58,7 +75,7 @@
position: absolute;
bottom: 1.25rem;
line-height: 1rem;
color: #bbb;
color: $promoText;
&:hover { color: $linkColor; }
}
@ -73,6 +90,7 @@
._splash-gratipay {
right: 1.25rem;
-webkit-margin-end: -.5rem;
@extend %splash-promo;
> ._gratipay-logo-bw { opacity: .35; }
@ -175,7 +193,7 @@
height: 1px;
line-height: 0;
margin-left: 1rem;
background: #dde3e8;
background: $boxBorderLight;
}
}
@ -297,7 +315,7 @@
._note { @extend %note; }
._note-green { @extend %note-green; }
._label { @extend %label; }
._highlight { background: #fffdcd !important; }
._highlight { background: $highlightBackground !important; }
._github-btn {
display: inline-block;

93
assets/stylesheets/components/_header.scss
Unescape View File

@ -10,11 +10,8 @@
right: 0;
height: $headerHeight;
line-height: $headerHeight;
text-shadow: 0 1px rgba(white, .5);
background: -webkit-linear-gradient(top, #f6f6f8, #e4e4e6);
background: linear-gradient(to bottom, #f6f6f8, #e4e4e6);
box-shadow: inset 0 1px rgba(white, .8), // top inner glow
inset 0 -1px rgba(white, .3); // bottom inner glow
background: $headerBackground;
border-bottom: 1px solid $headerBorder;
@extend %user-select-none;
a:focus { outline: 0; }
@ -28,30 +25,38 @@
float: right;
margin-right: .5rem;
font-size: .875rem;
color: lighten($textColor, 5%);
color: $textColor;
}
._nav-link,
._nav-link:hover {
position: relative;
float: left;
padding: 0 1.25rem;
color: inherit;
text-decoration: none;
background-clip: padding-box;
border: solid transparent;
border-width: 0 1px;
}
._nav-current,
._nav-current:hover {
color: lighten($textColor, 8%);
background: -webkit-linear-gradient(top, #e1e1e4, #f2f2f5);
background: linear-gradient(to bottom, #e1e1e4, #f2f2f5);
border-color: rgba(black, .15);
box-shadow: inset 0 1px rgba(black, .07), // top border
inset 0 1px 2px rgba(black, .1), // top inner shadow
1px 0 rgba(white, .2), // right glow
-1px 0 rgba(white, .2); // left glow
._nav-link {
&:before, &:after {
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 0;
margin-left: -.375rem;
border: .375rem solid transparent;
border-bottom-color: darken($headerBorder, 2%);
}
&:after {
bottom: -1px;
border-bottom-color: $contentBackground;
}
}
._nav-current {
&:before, &:after { content: ''; }
}
//
@ -66,21 +71,9 @@
line-height: inherit;
font-size: inherit;
&:before, &:after { // left border
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -1px;
width: 1px;
background: -webkit-linear-gradient(bottom, #b4b7bf, rgba(#b4b7bf, 0) 80%);
background: linear-gradient(to top, #b4b7bf, rgba(#b4b7bf, 0) 80%);
}
&:after { // left glow
left: -2px;
background: -webkit-linear-gradient(bottom, rgba(white, .4), rgba(white, 0) 80%);
background: linear-gradient(to top, rgba(white, .4), rgba(white, 0) 80%);
> ._nav-link {
float: none;
padding: 0 1rem;
}
}
@ -93,8 +86,7 @@
float: left;
width: $sidebarWidth;
height: 100%;
padding: .625rem;
border-right: 1px solid transparent;
padding: .5rem 0 .5rem .5rem;
@extend %border-box;
@media #{$mediumScreen} { width: $sidebarMediumWidth; }
@ -103,7 +95,7 @@
position: absolute;
top: 1rem;
left: 1rem;
opacity: .5;
opacity: .4;
@extend %icon, %icon-search;
}
}
@ -112,19 +104,17 @@
display: block;
width: 100%;
height: 100%;
padding: 0 .75rem 1px 1.625rem;
padding: 0 .75rem 1px 1.75rem;
font-size: .875rem;
background: $contentBackground;
border: 1px solid;
border-color: #b2b5bb #babbc5 #bebfc6;
border-radius: 1rem;
box-shadow: inset 0 1px 1px rgba(black, .1), // top inner shadow
0 1px rgba(white, .3); // bottom glow
border-color: darken($headerBorder, 2%);
border-radius: 3px;
&:focus {
outline: 0;
border-color: #35b5f4 #35b5f4 #30aeee;
box-shadow: inset 0 0 1px rgba(#35b5f4, .5), // inner glow
0 0 2px rgba(#35b5f4, .8); // outer glow
border-color: $inputFocusBorder;
box-shadow: 0 0 1px $inputFocusBorder;
}
}
@ -132,7 +122,7 @@
display: none;
position: absolute;
top: .5em;
right: .5em;
right: 0;
padding: .5em;
cursor: pointer;
opacity: .3;
@ -147,13 +137,10 @@
position: absolute;
top: .875rem;
left: .875rem;
margin: -1px 0 0 -1px;
padding: 0 .625rem;
padding: 0 .5rem;
line-height: 1.25rem;
font-size: .875rem;
background: #dfeafe;
border: 1px solid #98aed8;
border-radius: .75rem;
box-shadow: inset 0 1px rgba(white, .2), // top inner glow
0 1px rgba(black, .05); // bottom shadow
color: $textColorLight;
background: darken($headerBackground, 5%);
border-radius: 2px;
}

25
assets/stylesheets/components/_mobile.scss
Unescape View File

@ -14,7 +14,6 @@
._container {
margin: 0;
border: 0;
box-shadow: none;
}
._content {
@ -24,19 +23,11 @@
padding: .75rem 1rem 2.5rem;
}
._booting:before, ._content-loading:before {
font-size: 3rem;
color: #ccc;
}
._booting:before, ._content-loading:before { font-size: 3rem; }
// Header
._header {
position: fixed;
z-index: $contentZ + 1;
border-bottom: 1px solid #b4b7bf;
box-shadow: 0 1px rgba(black, .03);
}
._header { position: fixed; }
._logo, ._nav { display: none; }
._home-link, ._menu-link { display: block; }
@ -52,7 +43,6 @@
&:before { left: .5rem; }
}
._search-clear { padding-right: 0; }
._search-tag { left: .325rem; }
// Sidebar
@ -62,21 +52,17 @@
min-height: 100%;
overflow: visible;
padding-bottom: 2rem;
box-shadow: none;
> ._list { padding-bottom: 0; }
}
._list, ._sidebar-footer {
width: 100%;
box-shadow: none;
}
._list, ._sidebar-footer { width: 100%; }
._list-item {
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
border-right-width: 0;
box-shadow: none;
}
._list-result {
@ -101,7 +87,7 @@
._sidebar-footer-save {
margin-top: 1rem;
border-bottom: 1px solid #bac6d7;
box-shadow: 0 1px $noteGreenBorder, 0 -1px $noteGreenBorder;
}
// Notice
@ -111,7 +97,6 @@
left: 0;
padding: 0 .5rem;
&:before { content: none; }
~ ._sidebar { padding-bottom: 4rem; }
}

19
assets/stylesheets/components/_notice.scss
Unescape View File

@ -6,27 +6,12 @@
right: 0;
height: 2.5rem;
padding: 0 1.25rem;
text-shadow: 0 1px rgba(white, .5);
background: #faf9e2;
box-shadow: inset 0 1px #dddaaa, // top border
inset 0 2px rgba(white, .7), // top inner glow
inset 1px 0 rgba(black, .03); // left inner shadow
background: $noticeBackground;
box-shadow: inset 0 1px $noticeBorder;
@media #{$mediumScreen} { left: $sidebarMediumWidth; }
~ ._container { padding-bottom: 2.5rem; }
&:before {
content: '';
position: absolute;
bottom: 100%;
left: 1.5rem;
right: 1.5rem;
height: 1.5rem;
background-image: -webkit-linear-gradient(top, rgba(white, 0), rgba(white, .95));
background-image: linear-gradient(to bottom, rgba(white, 0), rgba(white, .95));
pointer-events: none;
}
}
._notice-text {

15
assets/stylesheets/components/_notif.scss
Unescape View File

@ -7,16 +7,9 @@
max-width: 90%;
padding: .75rem 1rem;
font-size: .75rem;
color: white;
text-shadow: 0 1px 1px rgba(black, .4);
background: -webkit-linear-gradient(top, rgba(#3a3a3a, .9), rgba(#202020, .9));
background: linear-gradient(to bottom, rgba(#3a3a3a, .9), rgba(#202020, .9));
background-clip: padding-box;
border: 1px solid black;
color: $notifColor;
background: $notifBackground;
border-radius: .25rem;
box-shadow: inset 0 1px rgba(white, .1), // top inner glow
inset 0 0 0 1px rgba(white, .1), // inner glow
0 1px 3px rgba(black, .5); // drop shadow
transition: opacity .2s;
opacity: 0;
cursor: default;
@ -63,7 +56,7 @@
> ._news-row {
line-height: 1.125rem;
font-size: .6875rem;
color: #bbb;
color: $notifColorLight;
+ ._news-row { margin-top: .75rem; }
}
@ -89,9 +82,7 @@
margin: 0 .25rem;
padding: 0;
color: inherit;
text-shadow: inherit;
background: none;
border: 0;
box-shadow: none;
}
}

5
assets/stylesheets/components/_page.scss
Unescape View File

@ -16,7 +16,7 @@
iframe {
display: block;
padding: 1px;
border: 1px dotted #ddd;
border: 1px dotted $boxBorder;
border-radius: 3px;
}
}
@ -41,8 +41,7 @@
display: inline-block;
margin: 0;
padding: .25rem .75rem;
text-shadow: 0 1px rgba(white, .3);
background: #f2f2f2;
background: $labelBackground;
border-radius: 3px;
}

7
assets/stylesheets/components/_path.scss
Unescape View File

@ -8,11 +8,8 @@
line-height: 2rem;
padding: 0 .375rem;
font-size: .875rem;
text-shadow: 0 1px rgba(white, .5);
background: #f5f5f7;
box-shadow: inset 0 1px #d5d5da, // top border
inset 0 2px rgba(white, .3), // top inner glow
inset 1px 0 rgba(black, .03); // left inner shadow
background: $pathBackground;
box-shadow: inset 0 1px $pathBorder;
@media #{$mediumScreen} { left: $sidebarMediumWidth; }

116
assets/stylesheets/components/_sidebar.scss
Unescape View File

@ -8,28 +8,26 @@
top: $headerHeight;
bottom: 0;
left: 0;
margin-top: 1px;
overflow-x: hidden;
overflow-y: scroll;
text-shadow: 0 1px rgba(white, .3);
background: #e5eaf4;
box-shadow: inset 0 1px #b4b7bf, // top border
inset 0 2px rgba(black, .03); // top inner shadow
background: $sidebarBackground;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none; // IE 10 doesn't support pointer-events
@extend %user-select-none;
&::-webkit-scrollbar { width: 10px; }
&::-webkit-scrollbar { -webkit-appearance: none; width: 10px; }
&::-webkit-scrollbar-button { display: none; }
&::-webkit-scrollbar-track { background: white; }
&::-webkit-scrollbar-track { background: $contentBackground; }
&::-webkit-scrollbar-thumb {
min-height: 1rem;
background: #ccc;
min-height: 2rem;
background: $scrollbarColor;
background-clip: padding-box;
border: 3px solid white;
border: 3px solid $contentBackground;
border-radius: 5px;
&:active {
background-color: #999;
background-color: $scrollbarColorHover;
border-width: 2px;
}
}
@ -46,15 +44,14 @@
padding: 0;
list-style: none;
width: $sidebarWidth;
box-shadow: inset -1px 0 $sidebarBorder;
@extend %border-box;
@media #{$mediumScreen} { width: $sidebarMediumWidth; }
._sidebar > & {
min-height: 100%;
padding-bottom: 3.5rem;
box-shadow: inset -1px 0 #bbc1cc, // right border
inset -2px 0 rgba(white, .2); // right inner glow
@extend %border-box;
}
}
@ -74,16 +71,15 @@
position: relative;
overflow: hidden;
padding: .25rem .75rem;
line-height: 1.25rem;
line-height: 1.5rem;
font-size: .875rem;
white-space: nowrap;
word-wrap: normal;
overflow-wrap: normal;
text-overflow: ellipsis;
text-shadow: 0 1px rgba(white, .3);
border: solid transparent;
border-width: 1px 1px 1px 0;
cursor: default;
background: $sidebarBackground;
box-shadow: inset -1px 0 $sidebarBorder;
&, &:hover {
color: inherit;
@ -94,26 +90,21 @@
&.focus:hover,
&.active,
&.active:hover {
color: white;
text-shadow: 0 1px rgba(black, .2);
background: -webkit-linear-gradient(top, #bfc6dd, #949eb8);
background: linear-gradient(to bottom, #bfc6dd, #949eb8);
border-color: #96a1c6 #8e99b7 #7f87a4;
box-shadow: inset 0 1px rgba(white, .15), // top inner glow
inset 0 0 0 1px rgba(white, .08), // inner glow
0 1px rgba(black, .05); // drop shadow
color: $focusText;
background: $focusBackground;
box-shadow: inset -1px 0 $focusBorder;
}
&.active,
&.active:hover {
background: -webkit-linear-gradient(top, #65b2fb, #3492e9);
background: linear-gradient(to bottom, #65b2fb, #3492e9);
border-color: #318ce4 #2b82db #2878c7;
color: $selectionText;
background: $selectionBackground;
box-shadow: inset -1px 0 $selectionBorder;
}
&:before {
float: left;
margin: .125rem .625rem 0 0;
margin: .25rem .625rem 0 0;
@extend %icon;
}
}
@ -136,10 +127,7 @@
._list-dir,
%_list-dir {
line-height: 1.5rem;
padding-left: 2.25rem;
&:before { margin-top: .25rem; }
}
._list-disabled {
@ -155,9 +143,9 @@
left: .25rem;
padding: .5rem;
cursor: pointer;
opacity: .45;
opacity: .4;
&:hover { opacity: .7; }
&:hover { opacity: .65; }
&:before {
@extend %icon, %icon-dir;
@ -172,11 +160,11 @@
._list-sub {
> ._list-item { padding-left: 2.75rem; }
> ._list-item:before { content: none; }
> ._list-dir { line-height: 1.25rem; }
> ._list-dir { line-height: 1.375rem; }
._list-arrow {
left: 1rem;
padding: .375rem;
padding: .4375rem;
}
}
@ -220,17 +208,14 @@
left: .5rem;
width: .75rem;
height: 1px;
background: rgba(white, .9);
box-shadow: 0 -3px rgba(white, .9), // top line
0 3px rgba(white, .9), // bottom line
0 -2px rgba(black, .15), // top shadow
0 1px rgba(black, .15), // middle shadow
0 4px rgba(black, .15); // bottom shadow
background: rgba($selectionText, .9);
box-shadow: 0 -3px rgba($selectionText, .9), // top line
0 3px rgba($selectionText, .9); // bottom line
}
}
._list-noresults {
padding: .625rem .75rem;
padding: .5rem .75rem;
line-height: 1.25rem;
font-size: .8125rem;
color: $textColorLight;
@ -238,7 +223,7 @@
._list-noresults-note {
display: block;
margin-top: .375rem;
margin-top: .25rem;
}
._list-noresults-link { cursor: pointer; }
@ -252,39 +237,21 @@
z-index: $hoverZ;
left: 0;
overflow: visible;
min-width: $sidebarWidth;
padding: .25rem .75rem;
background-color: #e5eaf4;
pointer-events: none;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
@extend %border-box;
@media #{$mediumScreen} { min-width: $sidebarMediumWidth; }
&:not(._list-result) {
padding-left: 2.75rem;
&:before { content: none; }
}
&:not(.focus):not(.active):after {
content: '';
position: absolute;
top: -1px;
bottom: -1px;
left: $sidebarWidth;
right: -2px;
margin-left: -1px;
border: 1px solid #bbc1cc;
border-left-width: 0;
border-radius: 0 2px 2px 0;
box-shadow: inset -1px 0 rgba(white, .15), // right inner glow
inset 0 1px rgba(white, .15), // top inner glow
inset 0 -1px rgba(white, .15), // bottom inner glow
1px 0 rgba(black, .04), // right shadow
0 1px rgba(black, .04), // bottom shadow
0 -1px rgba(black, .02); // top shadow
@media #{$mediumScreen} { left: $sidebarMediumWidth; }
}
}
//
@ -336,9 +303,8 @@
bottom: 0;
left: 0;
width: $sidebarWidth;
background: #e5eaf4;
box-shadow: inset -1px 0 #bbc1cc, // right border
inset -2px 0 rgba(white, .2); // right inner glow
background: $sidebarBackground;
box-shadow: inset -1px 0 $sidebarBorder;
@media #{$mediumScreen} { width: $sidebarMediumWidth; }
@ -349,8 +315,8 @@
left: 0;
right: 1px;
height: 1em;
background-image: -webkit-linear-gradient(top, rgba(#e5eaf4, 0), rgba(#e5eaf4, .95));
background-image: linear-gradient(to bottom, rgba(#e5eaf4, 0), rgba(#e5eaf4, .95));
background-image: -webkit-linear-gradient(top, rgba($sidebarBackground, 0), rgba($sidebarBackground, .95));
background-image: linear-gradient(to bottom, rgba($sidebarBackground, 0), rgba($sidebarBackground, .95));
pointer-events: none;
}
}
@ -384,11 +350,9 @@
._sidebar-footer-save {
margin-right: 1px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #fbfbfe, #f5f5f8 50%, #eeeef1 51%, #e8e8ec);
background-image: linear-gradient(to bottom, #fbfbfe, #f5f5f8 50%, #eeeef1 51%, #e8e8ec);
box-shadow: inset 0 1px white, // top inner glow
inset 0 0 0 1px rgba(white, .2), // inner glow
0 -1px #c4cfde; // top border
background: $noteGreenBackground;
box-shadow: inset 0 1px $noteGreenBorder,
1px 0 $noteGreenBorder;
&:before { @extend %icon-check; }
}

27
assets/stylesheets/global/_base.scss
Unescape View File

@ -1,7 +1,7 @@
html {
height: 100%;
font-size: 100%;
background: white;
background: $contentBackground;
@media #{$mediumScreen} { font-size: 93.75%; }
}
@ -110,11 +110,10 @@ a > code { color: inherit; }
table {
margin: 1.5em 0;
background: none;
border: 1px solid #d5d5d5;
border: 1px solid $boxBorder;
border-collapse: separate;
border-spacing: 0;
border-radius: 3px;
box-shadow: 0 1px 1px rgba(black, .04);
}
th, td {
@ -127,17 +126,13 @@ th, td {
th {
border: 0;
border-bottom: 1px solid #d5d5d5;
border-bottom: 1px solid $boxBorder;
border-radius: 0;
@extend %heading-box;
&:empty {
background: none;
box-shadow: none;
}
&:empty { background: none; }
+ th { border-left: 1px solid rgba(black, .12); }
+ td { border-left: 1px solid #d5d5d5; }
+ th, + td { border-left: 1px solid $boxBorder; }
tr:first-child > &:first-child { border-top-left-radius: 3px; }
tr:first-child > &:last-child { border-top-right-radius: 3px; }
@ -148,9 +143,9 @@ th {
}
td {
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid $boxBorderLight;
+ td { border-left: 1px solid #e5e5e5; }
+ td { border-left: 1px solid $boxBorderLight; }
tr:last-child > & { border-bottom: 0; }
}
@ -162,7 +157,7 @@ input {
@extend %border-box;
}
input[type="search"] { -webkit-appearance: textfield; }
input[type="search"] { -webkit-appearance: none; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
@ -176,6 +171,6 @@ input[type="search"]::-webkit-search-decoration {
border: 0 !important;
}
::-webkit-input-placeholder { color: #aaa; }
::-moz-placeholder { color: #aaa; opacity: 1; }
:-ms-input-placeholder { color: #aaa; }
::-webkit-input-placeholder { color: $textColorLighter; }
::-moz-placeholder { color: $textColorLighter; opacity: 1; }
:-ms-input-placeholder { color: $textColorLighter; }

86
assets/stylesheets/global/_classes.scss
Unescape View File

@ -19,25 +19,15 @@
//
%box {
text-shadow: 0 1px rgba(white, .3);
background: #f8f8f8;
border: 1px solid;
border-color: #d5d5d5 #d5d5d5 #d1d1d1;
background: $boxBackground;
border: 1px solid $boxBorder;
border-radius: 3px;
box-shadow: inset 0 1px rgba(white, .3), // top inner glow
0 1px 1px rgba(black, .04); // drop shadow
}
%heading-box {
text-shadow: 0 1px rgba(white, .3);
background: -webkit-linear-gradient(top, #f7f7fa, #f0f0f2);
background: linear-gradient(to bottom, #f7f7fa, #f0f0f2);
border: 1px solid;
border-color: #d5d5d5 #d5d5d5 #d1d1d1;
background: $boxHeaderBackground;
border: 1px solid $boxBorder;
border-radius: 3px;
box-shadow: inset 0 1px rgba(white, .3), // top inner glow
inset 0 0 0 1px rgba(white, .2), // inner glow
0 1px 1px rgba(black, .04); // drop shadow
}
%block-heading {
@ -56,48 +46,16 @@
%note {
margin: 1.5rem 0;
padding: .5rem .875rem;
text-shadow: 0 1px rgba(white, .3);
background: #faf9e2;
border: 1px solid;
border-color: #dddaaa #dddaaa #d7d7a9;
background: $noteBackground;
border: 1px solid $noteBorder;
border-radius: 3px;
box-shadow: inset 0 1px rgba(white, .2), // top inner glow
0 1px 1px rgba(black, .04); // drop shadow
}
%note-green {
background: #f1faeb;
border-color: #b3dba8 #b3dba8 #aed7a5;
}
%note-blue {
background: #f2f2ff;
border-color: #c6cde9 #c6cde9 #c3cce7;
}
%note-gold {
background: #fff0aa;
border-color: #ddce81 #ddce81 #d9ca7f;
}
%note-red {
background: #fed5d3;
border-color: #dc7874 #dc7874 #d47474;
}
//
// Labels
//
%label {
margin: 0 1px;
padding: 0 .3em 1px;
text-shadow: 0 1px rgba(white, .3);
background: #f2f2f2;
border: 1px solid;
border-color: #d2d2d2 #d2d2d2 #ccc;
border-radius: 2px;
box-shadow: 0 1px rgba(black, .04);
padding: 1px 4px 2px;
background: $labelBackground;
border-radius: 3px;
}
%block-label {
@ -107,27 +65,29 @@
padding-left: .5em;
padding-right: .5em;
font-size: inherit;
border: 1px solid $boxBorder;
border-radius: 2px;
@extend %label;
}
%label-green {
background: #f1faeb;
border-color: #b3dba8 #b3dba8 #aed7a5;
%note-green, %label-green {
background: $noteGreenBackground;
border-color: $noteGreenBorder;
}
%label-blue {
background: #dbe4ff;
border-color: #a8a9e2;
%note-blue, %label-blue {
background: $noteBlueBackground;
border-color: $noteBlueBorder;
}
%label-yellow {
background: #ffdfb2;
border-color: #c2a16f;
%note-orange, %label-orange {
background: $noteOrangeBackground;
border-color: $noteOrangeBorder;
}
%label-red {
background: #fed5d3;
border-color: #dc7874;
%note-red, %label-red {
background: $noteRedBackground;
border-color: $noteRedBorder;
}
//

74
assets/stylesheets/global/_variables.scss
Unescape View File

@ -1,22 +1,80 @@
$baseFont: 'Open Sans', Helvetica, Arial, sans-serif;
$monoFont: 'Source Code Pro', 'Inconsolata-g', Consolas, Menlo, monospace;
$textColor: #39393e;
$textColorLight: #6b6f78;
$textColorLighter: #9498a6;
$headerHeight: 3rem;
$sidebarWidth: 18rem;
$sidebarMediumWidth: 16rem;
$contentBackground: #fff;
$textColor: #333;
$textColorLight: #666;
$textColorLighter: #999;
$inputFocusBorder: #35b5f4;
$focusBackground: #e5e5e5;
$focusBorder: #d4d4d4;
$focusText: #000;
$loadingText: #e6e6e6;
$splashText: #ddd;
$promoText: #bbb;
$selectionBackground: #398df0;
$selectionBorder: #196fc2;
$selectionText: #fff;
$highlightBackground: #fffdcd;
$linkColor: #0082c6;
$linkColorHover: #0072c5;
$headerHeight: 3rem;
$headerBackground: #f0f0f0;
$headerBorder: #d9d9d9;
$sidebarWidth: 18rem;
$sidebarMediumWidth: 16rem;
$sidebarBackground: #f9f9f9;
$sidebarBorder: #e3e3e3;
$scrollbarColor: #d2d2d2;
$scrollbarColorHover: #aaa;
$pathBackground: $sidebarBackground;
$pathBorder: $sidebarBorder;
$noticeBackground: #faf9e2;
$noticeBorder: #e2e2c1;
$boxBackground: #fafafa;
$boxBorder: #d8d8d8;
$boxBorderLight: #e5e5e5;
$boxHeaderBackground: #f5f5f5;
$noteBackground: #f8f8dd;
$noteBorder: #d3d952;
$noteGreenBackground: #e7f8e1;
$noteGreenBorder: #89da70;
$noteBlueBackground: #d4f3fd;
$noteBlueBorder: #94bbeb;
$noteOrangeBackground: #fbe6d1;
$noteOrangeBorder: #ec8b01;
$noteRedBackground: #fed5d3;
$noteRedBorder: #dc7874;
$labelBackground: #f4f4f4;
$notifBackground: rgba(#333, .85);
$notifColor: #fff;
$notifColorLight: #bbb;
$mediumScreen: '(max-width: 800px)';
$headerZ: 1;
$contentZ: 1;
$sidebarZ: 2;
$contentZ: 3;
$headerZ: 3;
$noticeZ: 4;
$hoverZ: 5;

2
assets/stylesheets/pages/_angular.scss
Unescape View File

@ -30,7 +30,7 @@
line-height: 1.7rem;
padding-left: 1em;
font-size: .875rem;
background: white;
background: $contentBackground;
}
.defs {

3
assets/stylesheets/pages/_c.scss
Unescape View File

@ -9,7 +9,6 @@
line-height: inherit;
background: none;
border: 0;
box-shadow: none;
}
.t-lines > span { display: block; } // numeric/fenv, string/byte, etc.
@ -30,7 +29,7 @@
margin: 1rem 0;
padding: .375rem;
font-size: .75rem;
border: 1px solid #ccc;
border: 1px solid $boxBorder;
border-radius: 2px;
}
}

6
assets/stylesheets/pages/_maxcdn.scss
Unescape View File

@ -19,7 +19,7 @@
height: 2rem;
padding: 0;
list-style: none;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid $boxBorder;
> li {
float: left;
@ -37,8 +37,8 @@
&.active > a {
color: $textColor;
text-decoration: none;
background: white;
border-color: #ddd #ddd transparent;
background: $contentBackground;
border-color: $boxBorder $boxBorder transparent;
cursor: default;
}
}

2
assets/stylesheets/pages/_mdn.scss
Unescape View File

@ -55,7 +55,7 @@
}
.deprecated, .obsolete { @extend %label-red; }
.nonStandard, .projectSpecific, .experimental { @extend %label-yellow; }
.nonStandard, .projectSpecific, .experimental { @extend %label-orange; }
.htmlelt,
.cssprop {

2
assets/stylesheets/pages/_node.scss
Unescape View File

@ -1,6 +1,6 @@
._node {
.api_stability_0, .api_stability_1 { @extend %note, %note-red; }
.api_stability_2 { @extend %note, %note-gold; }
.api_stability_2 { @extend %note; }
.api_stability_3, .api_stability_4 { @extend %note, %note-green; }
.api_stability_5 { @extend %note, %note-blue; }

4
assets/stylesheets/pages/_rdoc.scss
Unescape View File

@ -38,8 +38,8 @@
top: 0;
left: -1em;
right: 0;
background: rgba(white, .95);
box-shadow: 0 1em 1em 1em white;
background: rgba($contentBackground, .95);
box-shadow: 0 1em 1em 1em $contentBackground;
> pre { margin: 0; }
}

2
assets/stylesheets/pages/_yii.scss
Unescape View File

@ -17,7 +17,7 @@
}
.summaryTable td:first-child[rowspan] {
border-right: 1px solid #e5e5e5;
border-right: 1px solid $boxBorderLight;
+ td { border-left: 0; }
}

BIN
public/icons/ui/home/16.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 329 B

After

Width:  |  Height:  |  Size: 206 B

BIN
public/icons/ui/home/16@2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 693 B

After

Width:  |  Height:  |  Size: 343 B

BIN
public/icons/ui/menu/16.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 126 B

After

Width:  |  Height:  |  Size: 97 B

BIN
public/icons/ui/menu/16@2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 195 B

After

Width:  |  Height:  |  Size: 123 B

Write Preview
Loading…
Cancel
Save