dan/api_docs
1
0
Fork 0
mirror of https://github.com/danbulant/api_docs synced 2026-05-19 04:08:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Simplify embossed tocify styles, in preperation for search

Browse source
This commit is contained in:
Robert Lord 2014-07-02 23:38:17 -07:00
parent 1b1427c3ee
commit 51e537aca2
2 changed files with 51 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
source/stylesheets/screen.css.scss
View file

@ -48,6 +48,24 @@ html, body {
width: 20px;
}
@mixin embossed-bg {
@include background(
linear-gradient(top,
rgba(#000, 0.2),
rgba(#000, 0) 8px),
linear-gradient(bottom,
rgba(#000, 0.2),
rgba(#000, 0) 8px),
linear-gradient(top,
rgba($nav-embossed-border-top, 1),
rgba($nav-embossed-border-top, 0) 1.5px),
linear-gradient(bottom,
rgba($nav-embossed-border-bottom, 1),
rgba($nav-embossed-border-bottom, 0) 1.5px),
$nav-subitem-bg
);
}
.tocify-wrapper {
@include transition(left ease-in-out 0.3s);
overflow-y: auto;
@ -85,7 +103,7 @@ html, body {
border-color: $search-box-border-color;
padding: 6px 0 6px 20px;
@include box-sizing(border-box);
margin: 10px 15px;
margin: $nav-v-padding $nav-padding;
width: $nav-width - 30;
outline: none;
color: $nav-text;
@ -95,7 +113,7 @@ html, body {
&:before {
position: absolute;
top: 17px;
left: 15px;
left: $nav-padding;
color: $nav-text;
@extend %icon-search;
}
@ -107,14 +125,32 @@ html, body {
.search-results {
margin-top: 0;
padding: 1em $nav-padding;
font-size: 0.9em;
font-weight: bold;
text-shadow: 0 1px 0 lighten($search-notice-bg, 15%);
background: $search-notice-bg;
display: none;
@include box-sizing(border-box);
height: 0;
overflow: hidden;
@include transition-property(height margin);
@include transition-duration(180ms);
@include transition-timing-function(ease-in-out);
&.visible {
height: 30%;
margin-bottom: 1em;
}
@include embossed-bg;
li {
margin: 1em $nav-padding;
line-height: 1;
}
a {
color: $nav-text;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
@ -156,25 +192,14 @@ html, body {
display: none; // tocify will override this when needed
background-color: $nav-subitem-bg;
font-weight: 500;
@include background-image(
linear-gradient(top,
darken($nav-subitem-bg,2%),
$nav-subitem-bg 10%,
$nav-subitem-bg 90%,
darken($nav-subitem-bg,2%))
);
.tocify-item>a {
padding-left: $nav-padding + $nav-indent;
font-size: 12px;
}
// These items make for a slight embossed look for the subheader.
// "Why not put the borders in the subheader?" you ask.
// "Because then the animation isn't as smooth," I reply.
&>li:first-child {
border-top: $nav-embossed-border-top;
}
// for embossed look:
@include embossed-bg;
&>li:last-child {
border-bottom: $nav-embossed-border-bottom;
box-shadow: none; // otherwise it'll overflow out of the subheader
}
}

5
source/stylesheets/variables.scss
View file

@ -57,6 +57,7 @@ $examples-width: 50%; // portion of the screen taken up by code examples
$logo-margin: 20px; // margin between nav items and logo, ignored if search is active
$main-padding: 28px; // padding to left and right of content & examples
$nav-padding: 15px; // padding to left and right of navbar
$nav-v-padding: 10px; // padding used vertically around search boxes and results
$nav-indent: 10px; // extra padding for ToC subitems
$code-annotation-padding: 13px; // padding inside code annotations
$h1-margin-bottom: 21px; // padding under the largest header tags
@ -86,8 +87,8 @@ $phone-width: $tablet-width - $nav-width; // min width before reverting to mobil
////////////////////
$nav-active-shadow: #000;
$nav-footer-border-color: #666;
$nav-embossed-border-top: 1px solid #000;
$nav-embossed-border-bottom: 1px solid #404040;
$nav-embossed-border-top: #000;
$nav-embossed-border-bottom: #939393;
$main-embossed-text-shadow: 0px 1px 0px #fff;
$search-box-border-color: #666;