api-console-assets
Version:
This repo only exists to publish api console components to npm
203 lines (171 loc) • 6.68 kB
HTML
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<!--
app-grid is a helper class useful for creating responsive, fluid grid layouts using custom properties.
Because custom properties can be defined inside a `@media` rule, you can customize the grid layout
for different responsive breakpoints.
Example:
Import `app-grid-style.html` and include `app-grid-style` in the style of an element's definition.
Then, add the class `app-grid` to a container such as `ul` or `div`:
```html
<template>
<style include="app-grid-style">
:host {
--app-grid-columns: 3;
--app-grid-item-height: 100px;
}
ul {
padding: 0;
list-style: none;
}
.item {
background-color: white;
}
</style>
<ul class="app-grid">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
</template>
```
In the example above, the grid will take 3 columns per row.
### Expandible items
In many cases, it's useful to expand an item more than 1 column. To achieve this type of layout,
you can specify the number of columns the item should expand to by setting the custom property
`--app-grid-expandible-item-columns`. To indicate which item should expand, apply the mixin
`--app-grid-expandible-item` to a rule with a selector to the item. For example:
<pre><code>
<template>
<style include="app-grid-style">
:host {
--app-grid-columns: 3;
--app-grid-item-height: 100px;
--app-grid-expandible-item-columns: 3;
}
/* Only the first item should expand */
.item:first-child {
@apply(--app-grid-expandible-item);
}
</style>
</template>
</code></pre>
### Preserving the aspect ratio
When the size of a grid item should preserve the aspect ratio, you can add the `has-aspect-ratio`
attribute to the element with the class `.app-grid`. Now, every item element becomes a wrapper around
the item content. For example:
```html
<template>
<style include="app-grid-style">
:host {
--app-grid-columns: 3;
/* 50% the width of the item is equivalent to 2:1 aspect ratio*/
--app-grid-item-height: 50%;
}
.item {
background-color: white;
}
</style>
<ul class="app-grid" has-aspect-ratio>
<li class="item">
<div>item 1</div>
</li>
<li class="item">
<div>item 2</div>
</li>
<li class="item">
<div>item 3</div>
</li>
</ul>
</template>
```
### Styling
Custom property | Description | Default
----------------------------------------------|------------------------------------------------------------|------------------
`--app-grid-columns` | The number of columns per row. | 1
`--app-grid-gutter` | The space between two items. | 0px
`--app-grid-item-height` | The height of the items. | auto
`--app-grid-expandible-item-columns` | The number of columns an expandible item should expand to. | 1
@group App Elements
@pseudoElement app-grid
@demo app-grid/demo/index.html
-->
<dom-module id="app-grid-style">
<template>
<style>
:host,
:host ::content {
/**
* The width for the expandible item is:
* ((100% - subPixelAdjustment) / columns * itemColumns - gutter
*
* - subPixelAdjustment: 0.1px (Required for IE 11)
* - gutter: var(--app-grid-gutter)
* - columns: var(--app-grid-columns)
* - itemColumn: var(--app-grid-expandible-item-columns)
*/
--app-grid-expandible-item: {
-webkit-flex-basis: calc((100% - 0.1px) / var(--app-grid-columns, 1) * var(--app-grid-expandible-item-columns, 1) - var(--app-grid-gutter, 0px)) ;
flex-basis: calc((100% - 0.1px) / var(--app-grid-columns, 1) * var(--app-grid-expandible-item-columns, 1) - var(--app-grid-gutter, 0px)) ;
max-width: calc((100% - 0.1px) / var(--app-grid-columns, 1) * var(--app-grid-expandible-item-columns, 1) - var(--app-grid-gutter, 0px)) ;
};
}
.app-grid,
:host ::content .app-grid {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
padding-top: var(--app-grid-gutter, 0px);
padding-left: var(--app-grid-gutter, 0px);
box-sizing: border-box;
}
.app-grid > *,
:host ::content .app-grid > * {
/* Required for IE 10 */
-ms-flex: 1 1 100%;
-webkit-flex: 1;
flex: 1;
/* The width for an item is: (100% - subPixelAdjustment - gutter * columns) / columns */
-webkit-flex-basis: calc((100% - 0.1px - (var(--app-grid-gutter, 0px) * var(--app-grid-columns, 1))) / var(--app-grid-columns, 1));
flex-basis: calc((100% - 0.1px - (var(--app-grid-gutter, 0px) * var(--app-grid-columns, 1))) / var(--app-grid-columns, 1));
max-width: calc((100% - 0.1px - (var(--app-grid-gutter, 0px) * var(--app-grid-columns, 1))) / var(--app-grid-columns, 1));
margin-bottom: var(--app-grid-gutter, 0px);
margin-right: var(--app-grid-gutter, 0px);
height: var(--app-grid-item-height);
box-sizing: border-box;
}
.app-grid[has-aspect-ratio] > *,
:host ::content .app-grid[has-aspect-ratio] > * {
position: relative;
}
.app-grid[has-aspect-ratio] > *::before,
:host ::content .app-grid[has-aspect-ratio] > *::before {
display: block;
content: "";
padding-top: var(--app-grid-item-height, 100%);
}
.app-grid[has-aspect-ratio] > * > *,
:host ::content .app-grid[has-aspect-ratio] > * > * {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</template>
</dom-module>