api-console-assets
Version:
This repo only exists to publish api console components to npm
482 lines (418 loc) • 11.3 kB
HTML
<!--
@license
Copyright 2017 The Advanced REST client authors <arc@mulesoft.com>
Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>anypoint-styles demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../colors.html">
<link rel="import" href="../typography.html">
<link rel="import" href="../dropdown-menu.html">
</head>
<style>
html {
font-size: 62.5%;
}
body {
font-size: 14px;
max-width: 900px;
padding-bottom: 120px;
}
.redlines {
background: linear-gradient(0deg, transparent, transparent 3.5px, rgba(255, 0, 0, 0.2) 3.5px, rgba(255, 0, 0, 0.2) 4px);
background-size: 100% 4px;
}
.paragraph {
margin: 20px 0;
}
</style>
<style is="custom-style" include="anypoint-dropdown-menu-styles"></style>
<style is="custom-style">
.anypoint-font-header1 {
@apply(--anypoint-font-header1);
}
.anypoint-font-header2 {
@apply(--anypoint-font-header2);
}
.anypoint-font-header3 {
@apply(--anypoint-font-header3);
}
.anypoint-font-header4 {
@apply(--anypoint-font-header4);
}
.anypoint-font-header5 {
@apply(--anypoint-font-header5);
}
.anypoint-font-header6 {
@apply(--anypoint-font-header6);
}
.anypoint-font-body {
@apply(--anypoint-font-body);
}
.anypoint-font-body-small {
@apply(--anypoint-font-body-small);
}
.anypoint-font-blockquote {
@apply(--anypoint-font-blockquote);
}
.anypoint-font-code {
@apply(--anypoint-font-code);
}
.toolbar {
height: 144px;
padding: 16px;
background: var(--default-primary-color);
color: var(--text-primary-color);
@apply(--paper-font-display1);
}
.item,
.disabled-item {
position: relative;
padding: 8px;
border: 1px solid;
border-color: var(--divider-color);
border-top: 0;
}
.item .primary {
color: var(--primary-text-color);
@apply(--paper-font-body2);
}
.item .secondary {
color: var(--secondary-text-color);
@apply(--paper-font-body1);
}
.disabled-item {
color: var(--disabled-text-color);
@apply(--paper-font-body2);
}
.color-primary {
background-color: var(--anypoint-color-primary);
}
.color-secondary {
background-color: var(--anypoint-color-secondary);
}
.color-danger {
background-color: var(--anypoint-color-danger);
}
.color-success {
background-color: var(--anypoint-color-success);
}
.color-tertiary {
background-color: var(--anypoint-color-tertiary);
}
.color-coreBlue3 {
background-color: var(--anypoint-color-coreBlue3);
}
.color-coreBlue1 {
background-color: var(--anypoint-color-coreBlue1);
}
.color-coreBlue2 {
background-color: var(--anypoint-color-coreBlue2);
}
.color-coreBlue4 {
background-color: var(--anypoint-color-coreBlue4);
}
.color-coreBlue5 {
background-color: var(--anypoint-color-coreBlue5);
}
.color-robustBlue3 {
background-color: var(--anypoint-color-robustBlue3);
}
.color-robustBlue1 {
background-color: var(--anypoint-color-robustBlue1);
}
.color-robustBlue2 {
background-color: var(--anypoint-color-robustBlue2);
}
.color-robustBlue4 {
background-color: var(--anypoint-color-robustBlue4);
}
.color-robustBlue5 {
background-color: var(--anypoint-color-robustBlue5);
}
.color-futureGreen3 {
background-color: var(--anypoint-color-futureGreen3);
}
.color-futureGreen1 {
background-color: var(--anypoint-color-futureGreen1);
}
.color-futureGreen2 {
background-color: var(--anypoint-color-futureGreen2);
}
.color-futureGreen4 {
background-color: var(--anypoint-color-futureGreen4);
}
.color-futureGreen5 {
background-color: var(--anypoint-color-futureGreen5);
}
.color-aluminum1 {
background-color: var(--anypoint-color-aluminum1);
}
.color-aluminum2 {
background-color: var(--anypoint-color-aluminum2);
}
.color-aluminum3 {
background-color: var(--anypoint-color-aluminum3);
}
.color-aluminum4 {
background-color: var(--anypoint-color-aluminum4);
}
.color-aluminum5 {
background-color: var(--anypoint-color-aluminum5);
}
.color-steel1 {
background-color: var(--anypoint-color-steel1);
}
.color-steel2 {
background-color: var(--anypoint-color-steel2);
}
.color-steel3 {
background-color: var(--anypoint-color-steel3);
}
.color-steel4 {
background-color: var(--anypoint-color-steel4);
}
.color-steel5 {
background-color: var(--anypoint-color-steel5);
}
.color-yellow3 {
background-color: var(--anypoint-color-yellow3);
}
.color-viridian3 {
background-color: var(--anypoint-color-viridian3);
}
.color-teal3 {
background-color: var(--anypoint-color-teal3);
}
.color-navy3 {
background-color: var(--anypoint-color-navy3);
}
.color-indigo3 {
background-color: var(--anypoint-color-indigo3);
}
.color-violet3 {
background-color: var(--anypoint-color-violet3);
}
.color-red3 {
background-color: var(--anypoint-color-red3);
}
#colors-output {
@apply(--layout-wrap);
@apply(--layout-horizontal);
}
.color-preview-box {
margin: 24px;
}
.color-preview-box .preview {
display: block;
height: 32px;
width: 92px;
border: 1px var(--anypoint-color-aluminum4) solid;
}
.color-preview-box .meta > span {
display: block;
text-align: center;
color: var(--anypoint-color-steel5);
@apply(--anypoint-font-body);
}
</style>
<body unresolved>
<h1 class="anypoint-font-header1">anypoint-styles</h1>
<section id="typography">
<h2 class="anypoint-font-header2">typography.html</h2>
<p class="anypoint-font-body">
Grumpy wizards make toxic brew for the evil Queen and Jack.
</p>
<section class="redlines paragraph">
<div class="anypoint-font-header1">Header 1</div>
<div class="anypoint-font-header2">Header 2</div>
<div class="anypoint-font-header3">Header 3</div>
<div class="anypoint-font-header4">Header 4</div>
<div class="anypoint-font-header5">Header 5</div>
<div class="anypoint-font-header6">Header 6</div>
<div class="anypoint-font-body">Body</div>
<div class="anypoint-font-body-small">Body small</div>
<div class="anypoint-font-blockquote">Blockquote</div>
<div class="anypoint-font-code">Code block</div>
</section>
<h3 class="anypoint-font-header3">Paragraphs</h3>
<h4 class="anypoint-font-header4">body</h4>
<section class="paper-font-body redlines">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt dui sit amet mi auctor, ac gravida magna aliquam. Fusce quis purus elementum, tempus nisi vel, volutpat nulla. Vestibulum mollis dictum tellus, vulputate porttitor arcu. Curabitur imperdiet risus id egestas accumsan. Donec lectus felis, dignissim id iaculis sit amet, faucibus in leo.
</p>
<p>
Mauris id urna ac ante ultrices commodo a imperdiet elit. Vivamus interdum neque magna, eget dapibus est auctor et. Donec accumsan libero nec augue scelerisque, ac egestas ante tincidunt. Proin sollicitudin, mi eget sagittis mollis, arcu orci scelerisque turpis, a sollicitudin tellus quam non sapien.
</p>
</section>
</section>
<section id="colors">
<h2 class="anypoint-font-header2">colors.html</h2>
<output id="colors-output"></output>
<template id="colorTpl">
<div class="color-preview-box">
<span class="preview"></span>
<span class="meta">
<span class="name"></span>
<span class="color"></span>
</span>
</div>
</template>
</section>
<section id="dropdown">
<h2 class="anypoint-font-header2">dropdown-menu.html</h2>
<paper-dropdown-menu class="anypoint-dropdown-menu">
<paper-listbox class="dropdown-content" selected="0">
<paper-item>Option 1</paper-item>
<paper-item>Option 2</paper-item>
<paper-item>Option 3</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</section>
<script>
var names = [{
'name': 'primary',
'color': '#00A2DF'
}, {
'name': 'secondary',
'color': '#506773'
}, {
'name': 'danger',
'color': '#D1344E'
}, {
'name': 'success',
'color': '#17BC65'
}, {
'name': 'tertiary',
'color': '#ffffff'
}, {
'name': 'coreBlue3',
'color': '#00A2DF'
}, {
'name': 'coreBlue1',
'color': '#ABE2F5'
}, {
'name': 'coreBlue2',
'color': '#48C1ED'
}, {
'name': 'coreBlue4',
'color': '#087299'
}, {
'name': 'coreBlue5',
'color': '#114459'
}, {
'name': 'robustBlue3',
'color': '#506773'
}, {
'name': 'robustBlue1',
'color': '#A1B1B8'
}, {
'name': 'robustBlue2',
'color': '#6B8A99'
}, {
'name': 'robustBlue4',
'color': '#32444D'
}, {
'name': 'robustBlue5',
'color': '#272F33'
}, {
'name': 'futureGreen3',
'color': '#17BC65'
}, {
'name': 'futureGreen1',
'color': '#AAF2CB'
}, {
'name': 'futureGreen2',
'color': '#33CC7A'
}, {
'name': 'futureGreen4',
'color': '#0E8C48'
}, {
'name': 'futureGreen5',
'color': '#174D30'
}, {
'name': 'aluminum1',
'color': '#F9FAFB'
}, {
'name': 'aluminum2',
'color': '#F4F5F6'
}, {
'name': 'aluminum3',
'color': '#E8E9EA'
}, {
'name': 'aluminum4',
'color': '#CACBCC'
}, {
'name': 'aluminum5',
'color': '#989A9B'
}, {
'name': 'steel1',
'color': '#6B6C6D'
}, {
'name': 'steel2',
'color': '#58595A'
}, {
'name': 'steel3',
'color': '#3A3B3C'
}, {
'name': 'steel4',
'color': '#262728'
}, {
'name': 'steel5',
'color': '#121314'
}, {
'name': 'yellow3',
'color': '#F2BE24'
}, {
'name': 'viridian3',
'color': '#00B49D'
}, {
'name': 'teal3',
'color': '#00B5D1'
}, {
'name': 'navy3',
'color': '#178BEA'
}, {
'name': 'indigo3',
'color': '#5E66F9'
}, {
'name': 'violet3',
'color': '#9A63F9'
}, {
'name': 'red3',
'color': '#D1344E'
}];
function createColors() {
var tpl = document.querySelector('#colorTpl');
var meta = tpl.content.querySelectorAll('.meta > span');
var preview = tpl.content.querySelector('.preview');
var container = document.getElementById('colors-output');
names.forEach(function(item) {
meta[0].textContent = item.name;
meta[1].textContent = item.color;
preview.className = 'preview color-' + item.name;
var clone = document.importNode(tpl.content, true);
container.appendChild(clone);
});
}
createColors();
</script>
</body>
</html>