angular.js/docs/src/templates/css/docs.css
Sharon DiOrio f8d319c11a docs(css): improve definition table style
Text in definition tables are now aligned to the top of the cell. These are used in
the API index page and makes it cleared what headings match what content.

Closes #5286
2013-12-17 12:09:08 +00:00

566 lines
8.6 KiB
CSS

/* Logo */
.header .brand {
padding-top: 6px;
padding-bottom: 0px;
}
.header .brand img {
height: 25px;
width: 92px;
}
/* end: Logo */
/* this is here to avoid the display=block shuffling of ngShow */
.breadcrumb li > * {
float:left;
margin:0 2px 0 0;
}
.breadcrumb {
padding-bottom:2px;
}
.clear-navbar {
margin-top: 60px;
}
.footer {
padding-top: 2em;
background-color: #333;
color: white;
padding-bottom: 2em;
}
.spacer {
height: 1em;
}
.icon-cog {
line-height: 13px;
}
/* =============================== */
.side-navigation .dropdown-menu {
margin-left: 10px;
}
.side-navigation .code {
font-family: monospace;
font-weight: bold;
font-size: 13px;
color: black;
}
.side-navigation > ul.nav > li.module {
background-color: #d3d3d3;
}
.side-navigation > ul.nav > li.section {
background-color: #ebebeb;
min-height: 14px;
}
.side-navigation > ul.nav > li.last {
padding-bottom: 1em;
}
.side-navigation > ul.nav > li.last + li.api-list-item {
margin-top:-1em;
padding-bottom: 1em;
}
.side-navigation .well {
border-color: #d3d3d3;
padding-top: 0;
padding-bottom: 0;
margin-bottom: 15px;
}
.side-navigation .well .nav-header {
text-transform: none;
margin-top: 0;
margin-left: -15px;
margin-right: -15px;
}
.side-navigation .well .nav-header a {
text-transform: none;
color: black;
}
.side-navigation .well .nav-header a:hover {
background-color: inherit;
}
.side-navigation .well li {
line-height: 14px;
}
.side-navigation .well .guide {
float: right;
padding-top: 0;
color: gray;
}
/* =============================== */
/* Content */
/* =============================== */
.improve-docs, .view-source {
float: right;
margin: 0 5px;
position: relative;
}
.improve-docs {
z-index:100;
}
.hint {
font-size: .7em;
color: #c0c0c0;
}
.content code {
background-color: inherit;
color: inherit;
border: none;
padding: 0;
font-size: inherit;
font-family: monospace;
white-space: nowrap;
}
.content pre code {
white-space: inherit;
}
.content h2,
.content h3,
.content h4,
.content h5 {
margin-top: 1em;
letter-spacing: -0.06em;
}
.content h2 {
font-size: 36px;
margin-bottom: .5em;
}
.content h3 {
font-size: 24px;
border-top: 1px solid #eee;
padding-top: .5em;
}
.content h4 {
font-size: 16px;
margin-top: 1.5em;
}
.content ul {
margin-top: .5em;
}
ul.parameters > li > p,
.returns > p {
display: inline;
}
ul.methods > li,
ul.properties > li,
ul.events > li {
list-style: none;
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #eee;
border: 1px solid rgba(0, 0, 0, 0.05);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.member.method > h2,
.member.property > h2,
.member.event > h2 {
margin-bottom: .5em;
}
ul.methods > li > h3,
ul.properties > li > h3,
ul.events > li > h3 {
margin: -19px -19px 1em -19px;
padding: .25em 19px;
background-color: #d3d3d3;
font-family: monospace;
}
.center {
display: block;
margin: 2em auto;
}
.diagram {
display: block;
margin: 2em auto;
padding: 1em;
border: 1px solid black;
-moz-box-shadow: 4px 4px 6px #48577D;
-webkit-box-shadow: 4px 4px 6px #48577D;
box-shadow: 4px 4px 6px #48577D;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
.tutorial-nav {
margin-left: 175px;
color: black;
margin-top: 2em;
margin-bottom: 2em;
}
.tutorial-nav a {
color: white;
}
.tutorial-nav a:hover {
color: white;
text-decoration: none;
}
.clear {
clear: both;
}
.variables-matrix td {
vertical-align:top;
padding:5px;
}
.type-hint {
display:inline-block;
}
.variables-matrix .type-hint {
text-align:center;
display:block;
min-width:60px;
}
.type-hint + .type-hint {
margin-top:5px;
}
.type-hint-string {
background:#3a87ad;
}
.type-hint-object {
background:#999;
}
.type-hint-array {
background:#F90;;
}
.type-hint-boolean {
background:rgb(18, 131, 39);
}
.type-hint-number {
background:rgb(189, 63, 66);
}
.syntax-links {
background:#eee;
border:1px solid #ddd;
text-align:right;
padding:1em;
border-bottom:0;
border-top-left-radius:4px;
border-top-right-radius:4px;
}
.syntax-links a {
margin-left:10px;
}
.syntax-links + pre {
border-top-left-radius:0;
border-top-right-radius:0;
}
.search-results {
clear:both;
display:table;
width:100%;
}
.search-results.ng-hide {
display:none;
}
.search-results > .search-group {
vertical-align:top;
padding:10px 0;
display:table-cell;
}
.search-group.cols-1 { width:100%; }
.search-group.cols-2 { width:50%; }
.search-group.cols-3 { width:33%; }
.search-group.cols-4 { width:25%; }
.search-close {
z-index:1029;
position:absolute;
bottom:-25px;
left:80%;
text-align:center;
line-height:50px;
width:50px;
font-size:2em;
background:#222222;
border-radius:15px;
}
.search-close span {
text-decoration:none;
position:relative;
z-index:1031;
}
.tutorial-index-page,
.tutorial-the-end-page {
padding-top:50px;
}
.tutorial-page {
position:relative;
}
.tutorial-page .improve-docs {
position:absolute;
top:0;
right:0;
}
.nocode-content {
cursor:pointer;
display:inline-block;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
color: #223f7a;
background:#ddd;
border: 1px solid #ccc;
}
.nocode-content:hover {
background-color: #99c2ff;
border: 1px solid #e1e1e8;
}
.popover-incode .popover-inner {
width:auto;
min-width:200px;
max-width:500px;
}
.popover-incode {
-webkit-transition:0.2s linear opacity;
-moz-transition:0.2s linear opacity;
-o-transition:0.2s linear opacity;
transition:0.2s linear opacity;
opacity:0;
}
.popover-incode.visible {
opacity:1;
}
.popover-incode code,
.popover-incode pre {
white-space:nowrap;
}
.popover-incode .arrow {
left:50px!important;
}
.foldover-content {
display:none;
}
.foldout:after {
content:"";
position:absolute;
left:50%;
top:-1px;
margin-left:-10px;
border-width:10px;
border-style:solid;
border-color:#f7f7f9 transparent transparent;
}
.foldout:before {
content:"";
position:absolute;
left:50%;
top:0;
margin-left:-10px;
border-width:10px;
border-style:solid;
border-color:#bbb transparent transparent;
}
.foldout {
padding:8px 15px 5px;
position:relative;
background:#eee;
white-space:normal;
box-shadow:inset 0 0 20px #ccc;
border-top:1px solid #bbb;
}
.prettyprint {
padding-right:0!important;
padding-bottom:0!important;
}
pre ol li {
padding-bottom:2px;
padding-right:5px;
}
#docs-fold {
position:absolute;
top:0;
right:0;
width:500px;
min-height:100%;
padding-top:50px;
padding:50px 20px 20px 20px;
background:white;
border-left:1px solid #999;
box-shadow:0 0 10px #555;
z-index:1002;
}
#docs-fold.fold-show {
-webkit-transition:0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
-moz-transition:0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
-o-transition:0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
transition:0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
}
#docs-fold.fold-show {
right:-200px;
opacity:0;
}
#docs-fold.fold-show.fold-show-active {
right:0;
opacity:1;
}
#docs-fold-overlay {
background:rgba(255,255,255,0.5);
position:fixed;
left:0;
bottom:0;
right:0;
top:0;
z-index:1001;
cursor:pointer;
}
.fixed_body {
position:fixed;
top:0;
z-index:1000;
left:0;
right:0;
}
#docs-fold-close {
z-index: 1029;
position: absolute;
left: -30px;
top: 60px;
cursor:pointer;
text-align: center;
width:50px;
line-height:50px;
font-size: 2em;
background: #fff;
box-shadow:-6px 0 5px #555;
display:block;
border-radius:10px;
}
.docs-version-jump {
width:180px;
margin-bottom:20px;
}
.minerr-errmsg {
clear: both;
position: relative;
top: 10px;
font-size: 16px;
word-break: normal;
}
.text-info {
color:#3a87ad;
}
.definition-table tr > td:first-child {
font-weight:bold;
width:30%;
}
.definition-table.spaced {
margin-bottom:30px;
}
.definition-table td {
vertical-align: top;
}
.component-heading {
text-transform:capitalize;
}
.component-breakdown {
margin-bottom:30px;
padding-bottom:30px;
border-bottom:1px solid #aaa;
}
td.success {
background-color: #dff0d8;
}
td.error {
background-color: #f2dede;
}