consolidated and moved api-list scss

This commit is contained in:
Stefanie Fluin 2017-04-11 19:37:03 -07:00 committed by Pete Bacon Darwin
parent 7d69a91bfe
commit cc1ed77dd8
3 changed files with 432 additions and 479 deletions

View File

@ -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;
}
}

View File

@ -28,8 +28,7 @@ class SearchCriteria {
@Component({
selector: 'aio-api-list',
templateUrl: './api-list.component.html',
styleUrls: ['./api-list.component.scss']
templateUrl: './api-list.component.html'
})
export class ApiListComponent implements OnInit {

View File

@ -1,3 +1,4 @@
/* API LIST STYLES */
aio-api-list {
div.form-search i.material-icons {
@ -20,4 +21,434 @@ aio-api-list > div {
> div {
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;
}
}