consolidated and moved api-list scss
This commit is contained in:
Stefanie Fluin
Pete Bacon Darwin
parent
7d69a91bfe
commit
cc1ed77dd8
|
|
@ -1,477 +0,0 @@
|
||||||
/* HACKED FROM aio v.1 */
|
|
||||||
|
|
||||||
// TODO:refactor out those parts that should be shared SASS files and import them here
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Metrics
|
|
||||||
*
|
|
||||||
* Metrics based on material design 8pt unit
|
|
||||||
*/
|
|
||||||
|
|
||||||
$unit: 8px;
|
|
||||||
$phone-breakpoint: 480px;
|
|
||||||
$tablet-breakpoint: 800px;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Layer Stacking
|
|
||||||
*
|
|
||||||
* The approved range that can be used for layering (z-indexes)
|
|
||||||
*/
|
|
||||||
|
|
||||||
$layer-1: 1;
|
|
||||||
$layer-2: 2;
|
|
||||||
$layer-3: 3;
|
|
||||||
$layer-4: 4;
|
|
||||||
$layer-5: 5;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Colors from original _colors.scss
|
|
||||||
*/
|
|
||||||
$white: #FFFFFF;
|
|
||||||
$black: #000000;
|
|
||||||
|
|
||||||
$amber-700: #FFA000;
|
|
||||||
$blue-400: #42A5F5;
|
|
||||||
$blue-500: #2196F3;
|
|
||||||
$blue-600: #1E88E5;
|
|
||||||
$blue-800: #1565C0;
|
|
||||||
$blue-grey-50: #ECEFF1;
|
|
||||||
$blue-grey-100: #CFD8DC;
|
|
||||||
$blue-grey-500: #607D8B;
|
|
||||||
$blue-grey-600: #546E7A;
|
|
||||||
$green-500: #4CAF50;
|
|
||||||
$green-800: #2E7D32;
|
|
||||||
$light-green-600: #7CB342;
|
|
||||||
$pink-600: #D81B60;
|
|
||||||
$purple-600: #8E24AA;
|
|
||||||
$teal-500: #009688;
|
|
||||||
|
|
||||||
$lightgrey: #F5F6F7;
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Layout
|
|
||||||
*/
|
|
||||||
.docs-content {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-content-small {
|
|
||||||
padding: 16px;
|
|
||||||
max-width: 1100px;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
@media handheld and (max-width: $phone-breakpoint),
|
|
||||||
screen and (max-device-width: $phone-breakpoint),
|
|
||||||
screen and (max-width: $tablet-breakpoint) {
|
|
||||||
padding: 0;
|
|
||||||
padding-top: ($unit * 3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* SEARCH BAR
|
|
||||||
*/
|
|
||||||
|
|
||||||
.form-search {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
input {
|
|
||||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1px solid $white;
|
|
||||||
color: $blue-600;
|
|
||||||
font-size: 16px;
|
|
||||||
height: $unit * 4;
|
|
||||||
line-height: $unit * 4;
|
|
||||||
outline: none;
|
|
||||||
padding: 0 ($unit *2) 0 ($unit * 4);
|
|
||||||
transition: all .2s;
|
|
||||||
|
|
||||||
// PLACEHOLDER TEXT
|
|
||||||
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
|
||||||
color: $blue-grey-100;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
&::-moz-placeholder { /* Firefox 19+ */
|
|
||||||
color: $blue-grey-100;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
&:-ms-input-placeholder { /* IE 10+ */
|
|
||||||
color: $blue-grey-100;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
&:-moz-placeholder { /* Firefox 18- */
|
|
||||||
color: $blue-grey-100;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border: 1px solid $blue-400;
|
|
||||||
box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-icons {
|
|
||||||
color: $blue-grey-100;
|
|
||||||
font-size: 20px;
|
|
||||||
left: $unit;
|
|
||||||
position: absolute;
|
|
||||||
top: 6px;
|
|
||||||
z-index: $layer-1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Select Menu
|
|
||||||
*/
|
|
||||||
|
|
||||||
$form-select-width: 200px;
|
|
||||||
|
|
||||||
.form-select-menu {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-select-button {
|
|
||||||
background: $white;
|
|
||||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1px solid $white;
|
|
||||||
color: $blue-grey-600;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 400;
|
|
||||||
height: $unit * 4;
|
|
||||||
line-height: $unit * 4;
|
|
||||||
outline: none;
|
|
||||||
padding: 0 ($unit * 2);
|
|
||||||
text-align: left;
|
|
||||||
width: $form-select-width - ($unit * 2);
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-weight: 600;
|
|
||||||
margin-right: $unit;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.has-symbol {
|
|
||||||
.symbol {
|
|
||||||
margin-right: $unit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-select-dropdown {
|
|
||||||
background: $white;
|
|
||||||
box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
|
|
||||||
border-radius: 4px;
|
|
||||||
left: -$unit;
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: $unit 0;
|
|
||||||
position: absolute;
|
|
||||||
top: -$unit;
|
|
||||||
width: 200px;
|
|
||||||
z-index: $layer-2;
|
|
||||||
|
|
||||||
li {
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: $unit * 4;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0 ($unit * 2) 0 ($unit * 5);
|
|
||||||
position: relative;
|
|
||||||
transition: all .2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $blue-grey-50;
|
|
||||||
color: $blue-500;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.selected {
|
|
||||||
background-color: $blue-grey-100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.symbol {
|
|
||||||
left: $unit * 2;
|
|
||||||
position: absolute;
|
|
||||||
top: $unit;
|
|
||||||
z-index: $layer-5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* API Symbols
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Variables
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
$api-symbols: (
|
|
||||||
all: (
|
|
||||||
content: ' ',
|
|
||||||
background: $white
|
|
||||||
),
|
|
||||||
decorator: (
|
|
||||||
content: '@',
|
|
||||||
background: $blue-800
|
|
||||||
),
|
|
||||||
directive: (
|
|
||||||
content: 'D',
|
|
||||||
background: $pink-600
|
|
||||||
),
|
|
||||||
pipe: (
|
|
||||||
content: 'P',
|
|
||||||
background: $blue-grey-600
|
|
||||||
),
|
|
||||||
class: (
|
|
||||||
content: 'C',
|
|
||||||
background: $blue-500
|
|
||||||
),
|
|
||||||
interface: (
|
|
||||||
content: 'I',
|
|
||||||
background: $teal-500
|
|
||||||
),
|
|
||||||
function: (
|
|
||||||
content: 'F',
|
|
||||||
background: $green-500
|
|
||||||
),
|
|
||||||
enum: (
|
|
||||||
content: 'E',
|
|
||||||
background: $amber-700
|
|
||||||
),
|
|
||||||
const: (
|
|
||||||
content: 'K',
|
|
||||||
background: $purple-600
|
|
||||||
),
|
|
||||||
type-alias: (
|
|
||||||
content: 'T',
|
|
||||||
background: $light-green-600
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Symbol Class
|
|
||||||
*/
|
|
||||||
|
|
||||||
.symbol {
|
|
||||||
border-radius: 2px;
|
|
||||||
box-shadow: 0 1px 2px rgba($black, .24);
|
|
||||||
color: $white;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: $unit * 2;
|
|
||||||
text-align: center;
|
|
||||||
width: $unit * 2;
|
|
||||||
|
|
||||||
// SYMBOL TYPES
|
|
||||||
@each $name, $symbol in $api-symbols {
|
|
||||||
&.#{$name} {
|
|
||||||
background: map-get($symbol, background);
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: map-get($symbol, content);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* API Home Page
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
* API Filter Menu
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
.api-filter {
|
|
||||||
.form-select-menu {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-search {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* API Class List
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
.docs-content .api-list {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0 0 ($unit * 6) 0;
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
li {
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 0 0 ($unit * 2) 0;
|
|
||||||
line-height: 14px;
|
|
||||||
padding: 0;
|
|
||||||
float: left;
|
|
||||||
width: 33%;
|
|
||||||
min-width: 220px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
.symbol {
|
|
||||||
margin-right: $unit;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: $blue-grey-600;
|
|
||||||
display: inline-block;
|
|
||||||
line-height: $unit * 2;
|
|
||||||
padding: 0 ($unit * 2) 0 0;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: all .3s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $blue-grey-50;
|
|
||||||
color: $blue-500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.docs-content .h2-api-docs,
|
|
||||||
.docs-content .h2-api-docs:first-of-type {
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 24px;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-links {
|
|
||||||
a {
|
|
||||||
code, .api-doc-code {
|
|
||||||
color: #1E88E5 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.openParens {
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.endParens {
|
|
||||||
margin-bottom: 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
|
|
||||||
&.selector {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.location-badge {
|
|
||||||
margin: 0 0 16px 16px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.api-doc-code {
|
|
||||||
border-bottom: 0;
|
|
||||||
|
|
||||||
:hover {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.row-margin {
|
|
||||||
margin-bottom: 36px;
|
|
||||||
h2 {
|
|
||||||
line-height: 28px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-margin {
|
|
||||||
margin-bottom: $unit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hr-margin {
|
|
||||||
display: block;
|
|
||||||
height: 1px;
|
|
||||||
border: 0;
|
|
||||||
border-top: 1px solid $lightgrey;
|
|
||||||
margin-top: 15px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-bg {
|
|
||||||
background: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-bg-with-indent {
|
|
||||||
padding-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 16px;
|
|
||||||
margin-top: 6px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-background {
|
|
||||||
padding: 0 5px 0;
|
|
||||||
|
|
||||||
span.pln {
|
|
||||||
color: #1E88E5 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-anchor {
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
// Override highlight.js
|
|
||||||
.kwd {
|
|
||||||
color: #1E88E5 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.api-doc-code {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #1a2326;
|
|
||||||
|
|
||||||
// the last .pln (white space) creates additional spacing between sections of the api doc. Remove it.
|
|
||||||
&.no-pln {
|
|
||||||
.pln:last-child {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
.docs-content {
|
|
||||||
// Overrides display flex from angular material.
|
|
||||||
// This was added because Safari doesn't play nice with layout="column".
|
|
||||||
// Look of API doc in Chrome and Firefox remains the same, and is fixed for Safari.
|
|
||||||
.layout-xs-column {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.api-doc-code {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p.location-badge {
|
|
||||||
position: relative;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -28,8 +28,7 @@ class SearchCriteria {
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'aio-api-list',
|
selector: 'aio-api-list',
|
||||||
templateUrl: './api-list.component.html',
|
templateUrl: './api-list.component.html'
|
||||||
styleUrls: ['./api-list.component.scss']
|
|
||||||
})
|
})
|
||||||
export class ApiListComponent implements OnInit {
|
export class ApiListComponent implements OnInit {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
/* API LIST STYLES */
|
||||||
|
|
||||||
aio-api-list {
|
aio-api-list {
|
||||||
div.form-search i.material-icons {
|
div.form-search i.material-icons {
|
||||||
|
|
@ -21,3 +22,433 @@ aio-api-list > div {
|
||||||
margin: 8px;
|
margin: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$phone-breakpoint: 480px;
|
||||||
|
$tablet-breakpoint: 800px;
|
||||||
|
|
||||||
|
$layer-1: 1;
|
||||||
|
$layer-2: 2;
|
||||||
|
$layer-3: 3;
|
||||||
|
$layer-4: 4;
|
||||||
|
$layer-5: 5;
|
||||||
|
|
||||||
|
|
||||||
|
$amber-700: #FFA000;
|
||||||
|
$blue-400: #42A5F5;
|
||||||
|
$blue-500: #2196F3;
|
||||||
|
$blue-600: #1E88E5;
|
||||||
|
$blue-800: #1565C0;
|
||||||
|
$blue-grey-50: #ECEFF1;
|
||||||
|
$blue-grey-100: #CFD8DC;
|
||||||
|
$blue-grey-500: #607D8B;
|
||||||
|
$blue-grey-600: #546E7A;
|
||||||
|
$green-500: #4CAF50;
|
||||||
|
$green-800: #2E7D32;
|
||||||
|
$light-green-600: #7CB342;
|
||||||
|
$pink-600: #D81B60;
|
||||||
|
$purple-600: #8E24AA;
|
||||||
|
$teal-500: #009688;
|
||||||
|
|
||||||
|
$lightgrey: #F5F6F7;
|
||||||
|
|
||||||
|
|
||||||
|
/* LAYOUT */
|
||||||
|
|
||||||
|
.docs-content {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l-content-small {
|
||||||
|
padding: 16px;
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
@media handheld and (max-width: $phone-breakpoint),
|
||||||
|
screen and (max-device-width: $phone-breakpoint),
|
||||||
|
screen and (max-width: $tablet-breakpoint) {
|
||||||
|
padding: 0;
|
||||||
|
padding-top: ($unit * 3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SEARCH BAR */
|
||||||
|
|
||||||
|
.form-search {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
input {
|
||||||
|
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid $white;
|
||||||
|
color: $blue-600;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
outline: none;
|
||||||
|
padding: 0 16px 0 32px;
|
||||||
|
transition: all .2s;
|
||||||
|
|
||||||
|
// PLACEHOLDER TEXT
|
||||||
|
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||||||
|
color: $blue-grey-100;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
&::-moz-placeholder { /* Firefox 19+ */
|
||||||
|
color: $blue-grey-100;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
&:-ms-input-placeholder { /* IE 10+ */
|
||||||
|
color: $blue-grey-100;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
&:-moz-placeholder { /* Firefox 18- */
|
||||||
|
color: $blue-grey-100;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border: 1px solid $blue-400;
|
||||||
|
box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-icons {
|
||||||
|
color: $blue-grey-100;
|
||||||
|
font-size: 20px;
|
||||||
|
left: $unit;
|
||||||
|
position: absolute;
|
||||||
|
top: 6px;
|
||||||
|
z-index: $layer-1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SELECT MENU */
|
||||||
|
|
||||||
|
$form-select-width: 200px;
|
||||||
|
|
||||||
|
.form-select-menu {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-select-button {
|
||||||
|
background: $white;
|
||||||
|
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid $white;
|
||||||
|
color: $blue-grey-600;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
outline: none;
|
||||||
|
padding: 0 16px;
|
||||||
|
text-align: left;
|
||||||
|
width: $form-select-width - 16px;
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 600;
|
||||||
|
margin-right: 8px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-symbol {
|
||||||
|
.symbol {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-select-dropdown {
|
||||||
|
background: $white;
|
||||||
|
box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
|
||||||
|
border-radius: 4px;
|
||||||
|
left: -8px;
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 8px 0;
|
||||||
|
position: absolute;
|
||||||
|
top: -8px;
|
||||||
|
width: 200px;
|
||||||
|
z-index: $layer-2;
|
||||||
|
|
||||||
|
li {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 16px 0 40px;
|
||||||
|
position: relative;
|
||||||
|
transition: all .2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $blue-grey-50;
|
||||||
|
color: $blue-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
background-color: $blue-grey-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.symbol {
|
||||||
|
left: 16px;
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
z-index: $layer-5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* API SYMBOLS */
|
||||||
|
|
||||||
|
/* VARIABLES */
|
||||||
|
|
||||||
|
$api-symbols: (
|
||||||
|
all: (
|
||||||
|
content: ' ',
|
||||||
|
background: $white
|
||||||
|
),
|
||||||
|
decorator: (
|
||||||
|
content: '@',
|
||||||
|
background: $blue-800
|
||||||
|
),
|
||||||
|
directive: (
|
||||||
|
content: 'D',
|
||||||
|
background: $pink-600
|
||||||
|
),
|
||||||
|
pipe: (
|
||||||
|
content: 'P',
|
||||||
|
background: $blue-grey-600
|
||||||
|
),
|
||||||
|
class: (
|
||||||
|
content: 'C',
|
||||||
|
background: $blue-500
|
||||||
|
),
|
||||||
|
interface: (
|
||||||
|
content: 'I',
|
||||||
|
background: $teal-500
|
||||||
|
),
|
||||||
|
function: (
|
||||||
|
content: 'F',
|
||||||
|
background: $green-500
|
||||||
|
),
|
||||||
|
enum: (
|
||||||
|
content: 'E',
|
||||||
|
background: $amber-700
|
||||||
|
),
|
||||||
|
const: (
|
||||||
|
content: 'K',
|
||||||
|
background: $purple-600
|
||||||
|
),
|
||||||
|
type-alias: (
|
||||||
|
content: 'T',
|
||||||
|
background: $light-green-600
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
/* SYMBOL CLASS */
|
||||||
|
|
||||||
|
.symbol {
|
||||||
|
border-radius: 2px;
|
||||||
|
box-shadow: 0 1px 2px rgba($black, .24);
|
||||||
|
color: $white;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 16px;
|
||||||
|
text-align: center;
|
||||||
|
width: 16px;
|
||||||
|
|
||||||
|
// SYMBOL TYPES
|
||||||
|
@each $name, $symbol in $api-symbols {
|
||||||
|
&.#{$name} {
|
||||||
|
background: map-get($symbol, background);
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: map-get($symbol, content);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* API HOMEE PAGE */
|
||||||
|
|
||||||
|
/* API FILTER MENU */
|
||||||
|
|
||||||
|
.api-filter {
|
||||||
|
.form-select-menu {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-search {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* API CLASS LIST */
|
||||||
|
|
||||||
|
.docs-content .api-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0 0 48px 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
li {
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 0 0 16px 0;
|
||||||
|
line-height: 14px;
|
||||||
|
padding: 0;
|
||||||
|
float: left;
|
||||||
|
width: 33%;
|
||||||
|
min-width: 220px;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
.symbol {
|
||||||
|
margin-right: $unit;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: $blue-grey-600;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 16px;
|
||||||
|
padding: 0 16px 0 0;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all .3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $blue-grey-50;
|
||||||
|
color: $blue-500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-content .h2-api-docs,
|
||||||
|
.docs-content .h2-api-docs:first-of-type {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-links {
|
||||||
|
a {
|
||||||
|
code, .api-doc-code {
|
||||||
|
color: #1E88E5 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.openParens {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.endParens {
|
||||||
|
margin-bottom: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
|
||||||
|
&.selector {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.location-badge {
|
||||||
|
margin: 0 0 16px 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.api-doc-code {
|
||||||
|
border-bottom: 0;
|
||||||
|
|
||||||
|
:hover {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-margin {
|
||||||
|
margin-bottom: 36px;
|
||||||
|
h2 {
|
||||||
|
line-height: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-margin {
|
||||||
|
margin-bottom: $unit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr-margin {
|
||||||
|
display: block;
|
||||||
|
height: 1px;
|
||||||
|
border: 0;
|
||||||
|
border-top: 1px solid $lightgrey;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-bg {
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-bg-with-indent {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
padding-left: 16px;
|
||||||
|
margin-top: 6px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-background {
|
||||||
|
padding: 0 5px 0;
|
||||||
|
|
||||||
|
span.pln {
|
||||||
|
color: #1E88E5 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-anchor {
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
// Override highlight.js
|
||||||
|
.kwd {
|
||||||
|
color: #1E88E5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.api-doc-code {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1a2326;
|
||||||
|
|
||||||
|
// the last .pln (white space) creates additional spacing between sections of the api doc. Remove it.
|
||||||
|
&.no-pln {
|
||||||
|
.pln:last-child {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.docs-content {
|
||||||
|
// Overrides display flex from angular material.
|
||||||
|
// This was added because Safari doesn't play nice with layout="column".
|
||||||
|
// Look of API doc in Chrome and Firefox remains the same, and is fixed for Safari.
|
||||||
|
.layout-xs-column {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.api-doc-code {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p.location-badge {
|
||||||
|
position: relative;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue