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 result
app.news = [ 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 """, """ New <a href="/svg/">SVG</a>, <a href="/marionette/">Marionette.js</a>, and <a href="/mongoose/">Mongoose</a> documentations """,
], [ ], [
1413590400000, # October 18, 2014 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"> <ol class="_intro-list">
<li>Your local version of DevDocs won't self-update. Unless you're offline or modifying the code, <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>. 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>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: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>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 <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>. 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.removeAttribute 'placeholder'
@input.value = @input.value[@input.selectionStart..] @input.value = @input.value[@input.selectionStart..]
@input.style.paddingLeft = @tag.offsetWidth + 6 + 'px' @input.style.paddingLeft = @tag.offsetWidth + 10 + 'px'
$.trigger @input, 'input' $.trigger @input, 'input'
reset: => 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' el.classList.contains 'active'
isTruncated: (el) -> isTruncated: (el) ->
el.scrollWidth >= el.offsetWidth el.scrollWidth > el.offsetWidth
onFocus: (event) => onFocus: (event) =>
@focusTime = Date.now() @focusTime = Date.now()

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

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

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

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

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

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

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

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

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

@ -6,27 +6,12 @@
right: 0; right: 0;
height: 2.5rem; height: 2.5rem;
padding: 0 1.25rem; padding: 0 1.25rem;
text-shadow: 0 1px rgba(white, .5); background: $noticeBackground;
background: #faf9e2; box-shadow: inset 0 1px $noticeBorder;
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
@media #{$mediumScreen} { left: $sidebarMediumWidth; } @media #{$mediumScreen} { left: $sidebarMediumWidth; }
~ ._container { padding-bottom: 2.5rem; } ~ ._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 { ._notice-text {

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

@ -7,16 +7,9 @@
max-width: 90%; max-width: 90%;
padding: .75rem 1rem; padding: .75rem 1rem;
font-size: .75rem; font-size: .75rem;
color: white; color: $notifColor;
text-shadow: 0 1px 1px rgba(black, .4); background: $notifBackground;
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;
border-radius: .25rem; 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; transition: opacity .2s;
opacity: 0; opacity: 0;
cursor: default; cursor: default;
@ -63,7 +56,7 @@
> ._news-row { > ._news-row {
line-height: 1.125rem; line-height: 1.125rem;
font-size: .6875rem; font-size: .6875rem;
color: #bbb; color: $notifColorLight;
+ ._news-row { margin-top: .75rem; } + ._news-row { margin-top: .75rem; }
} }
@ -89,9 +82,7 @@
margin: 0 .25rem; margin: 0 .25rem;
padding: 0; padding: 0;
color: inherit; color: inherit;
text-shadow: inherit;
background: none; background: none;
border: 0; border: 0;
box-shadow: none;
} }
} }

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

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

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

@ -8,11 +8,8 @@
line-height: 2rem; line-height: 2rem;
padding: 0 .375rem; padding: 0 .375rem;
font-size: .875rem; font-size: .875rem;
text-shadow: 0 1px rgba(white, .5); background: $pathBackground;
background: #f5f5f7; box-shadow: inset 0 1px $pathBorder;
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
@media #{$mediumScreen} { left: $sidebarMediumWidth; } @media #{$mediumScreen} { left: $sidebarMediumWidth; }

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

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

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

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

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

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

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

@ -1,22 +1,80 @@
$baseFont: 'Open Sans', Helvetica, Arial, sans-serif; $baseFont: 'Open Sans', Helvetica, Arial, sans-serif;
$monoFont: 'Source Code Pro', 'Inconsolata-g', Consolas, Menlo, monospace; $monoFont: 'Source Code Pro', 'Inconsolata-g', Consolas, Menlo, monospace;
$textColor: #39393e; $headerHeight: 3rem;
$textColorLight: #6b6f78; $sidebarWidth: 18rem;
$textColorLighter: #9498a6; $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; $linkColor: #0082c6;
$linkColorHover: #0072c5; $linkColorHover: #0072c5;
$headerHeight: 3rem; $headerBackground: #f0f0f0;
$headerBorder: #d9d9d9;
$sidebarWidth: 18rem; $sidebarBackground: #f9f9f9;
$sidebarMediumWidth: 16rem; $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)'; $mediumScreen: '(max-width: 800px)';
$headerZ: 1; $contentZ: 1;
$sidebarZ: 2; $sidebarZ: 2;
$contentZ: 3; $headerZ: 3;
$noticeZ: 4; $noticeZ: 4;
$hoverZ: 5; $hoverZ: 5;

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

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

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
._node { ._node {
.api_stability_0, .api_stability_1 { @extend %note, %note-red; } .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_3, .api_stability_4 { @extend %note, %note-green; }
.api_stability_5 { @extend %note, %note-blue; } .api_stability_5 { @extend %note, %note-blue; }

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

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

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

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