omim - add rate & add :host style
This commit is contained in:
dntzhang
parent
60752d12a7
commit
1fc584f1a9
|
|
@ -196,22 +196,23 @@ To prevent duplication of development, PR submission fills in owner to lock the
|
|||
| chart bar line| member |done |
|
||||
| pagination| member |done |
|
||||
| color-picker| member |done |
|
||||
| input (lable,button)| | |
|
||||
| input-number | | |
|
||||
| input-table | | |
|
||||
| loading |member| done |
|
||||
| path-progress | member | done |
|
||||
| popover | member | done |
|
||||
| rate | | |
|
||||
| rate | member | done|
|
||||
| step | member | done |
|
||||
| toast | member | done|
|
||||
| paper | zainchen | done|
|
||||
| transfer list | member | done|
|
||||
| editor | member | done|
|
||||
| input (lable,button)| | |
|
||||
| input-number | | |
|
||||
| input-table | | |
|
||||
| autocomplete | | |
|
||||
| transfer list | member | |
|
||||
| bottom nav | | |
|
||||
| paper | zainchen | |
|
||||
| accordion | | |
|
||||
| toggle buttons | | |
|
||||
| editor | member | |
|
||||
| player | 132yse | |
|
||||
| welcome to add a new element! | |
|
||||
| welcome to add a new element! | |
|
||||
| welcome to add a new element! | |
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,12 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script src="bundle.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import '../../src/rate/index.tsx'
|
||||
import { render, h } from 'omi'
|
||||
|
||||
render(
|
||||
<div>
|
||||
<m-rate total={5} value={this.valueA} color='#f57c00' onSelected={onSelected}></m-rate>
|
||||
|
||||
</div>
|
||||
, 'body')
|
||||
|
||||
|
||||
function onSelected(evt){
|
||||
console.log(evt.detail)
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
<meta charset="UTF-8" />
|
||||
<title>Add Omi in One Minute</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
||||
<script src="../../src/select/index.js"></script>
|
||||
<m-icon path='M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z'>
|
||||
</m-icon>
|
||||
|
||||
<script>
|
||||
function changeA(e) {
|
||||
console.log(e.detail)
|
||||
}
|
||||
|
||||
function changeB(e) {
|
||||
console.log(e.detail)
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<m-select onchange="changeA(event)" label="Choose One Item">
|
||||
<option value="" disabled selected></option>
|
||||
<option value="grains">
|
||||
Bread, Cereal, Rice, and Pasta
|
||||
</option>
|
||||
<option value="vegetables">
|
||||
Vegetables
|
||||
</option>
|
||||
<option value="fruit">
|
||||
Fruit
|
||||
</option>
|
||||
</m-select>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<m-select menu="[
|
||||
{ text: 'Google', value: 0 },
|
||||
{ text: 'Omi', value: 1 },
|
||||
{ text: 'Tencent', value: 2 }
|
||||
]" label="Choose One Item" onchange="changeB(event)" >
|
||||
</m-select>
|
||||
|
||||
<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
|
||||
<!-- <img src="//alloyteam.github.io/github.png" alt=""> -->
|
||||
</a>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,8 @@
|
|||
@import "../theme.scss";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
img{
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
@import "../theme";
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
@import "../theme";
|
||||
@import "@material/button/mdc-button";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.m-icon{
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
@import "../theme";
|
||||
@import "@material/form-field/mdc-form-field";
|
||||
@import "@material/checkbox/mdc-checkbox";
|
||||
@import "@material/checkbox/mdc-checkbox";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@import "../theme";
|
||||
@import "@material/chips/mdc-chips";
|
||||
|
||||
.mdc-chip {
|
||||
-moz-user-select:none;
|
||||
-webkit-user-select:none;
|
||||
|
|
@ -7,3 +8,6 @@
|
|||
user-select:none;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -1,2 +1,6 @@
|
|||
@import "../theme";
|
||||
@import "@material/elevation/mdc-elevation";
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1,2 +1,6 @@
|
|||
@import "../theme";
|
||||
@import "@material/elevation/mdc-elevation";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -1,6 +1,10 @@
|
|||
@import "../theme";
|
||||
@import "@material/fab/mdc-fab";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
@import "../theme";
|
||||
@import "@material/icon-button/mdc-icon-button";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
.m-icon {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
.m-icon svg {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.rotate {
|
||||
display: inline-block;
|
||||
-webkit-animation: rotate 1s infinite linear;
|
||||
animation: rotate 1s infinite linear;
|
||||
}
|
||||
i div {
|
||||
font-style: normal;
|
||||
}
|
||||
@-webkit-keyframes rotate {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.m-icon {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -1,2 +1,6 @@
|
|||
@import "../theme";
|
||||
@import "@material/image-list/mdc-image-list";
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1,2 +1,6 @@
|
|||
@import "../theme";
|
||||
@import "@material/linear-progress/mdc-linear-progress";
|
||||
@import "@material/linear-progress/mdc-linear-progress";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -3,6 +3,10 @@
|
|||
@import "@material/checkbox/mdc-checkbox";
|
||||
@import "@material/radio/mdc-radio";
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
@import "../theme";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.m-root {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
@import "../theme";
|
||||
@import "@material/list/mdc-list";
|
||||
@import "@material/menu-surface/mdc-menu-surface";
|
||||
@import "@material/menu/mdc-menu";
|
||||
@import "@material/menu/mdc-menu";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -1,5 +1,9 @@
|
|||
@import "../theme";
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
@import "../theme";
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div {
|
||||
color: rgba(0, 0, 0, .65);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
@import "../theme";
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.m-paper-root {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,12 @@ interface Data {
|
|||
}
|
||||
|
||||
define('m-path-progress', class extends WeElement<Props, Data> {
|
||||
static css = `
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
`
|
||||
|
||||
static defaultProps = {
|
||||
options: {},
|
||||
progress: 0,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
@import "../theme";
|
||||
@import "@material/form-field/mdc-form-field";
|
||||
@import "@material/radio/mdc-radio";
|
||||
@import "@material/radio/mdc-radio";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
import { WeElement } from 'omi';
|
||||
import '../icon';
|
||||
import '../theme.ts';
|
||||
interface Props {
|
||||
ripple: boolean;
|
||||
raised: boolean;
|
||||
dense: boolean;
|
||||
unelevated: boolean;
|
||||
outlined: boolean;
|
||||
svgIcon: object;
|
||||
icon: string;
|
||||
}
|
||||
interface Data {
|
||||
}
|
||||
export default class Button extends WeElement<Props, Data> {
|
||||
static css: any;
|
||||
static defaultProps: {
|
||||
ripple: boolean;
|
||||
};
|
||||
static propTypes: {
|
||||
ripple: BooleanConstructor;
|
||||
raised: BooleanConstructor;
|
||||
dense: BooleanConstructor;
|
||||
unelevated: BooleanConstructor;
|
||||
outlined: BooleanConstructor;
|
||||
svgIcon: ObjectConstructor;
|
||||
icon: StringConstructor;
|
||||
};
|
||||
installed(): void;
|
||||
render(props: any): JSX.Element;
|
||||
}
|
||||
export {};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,60 @@
|
|||
@import "../theme";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.m-rate {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
svg{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li{
|
||||
width:auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
._star {
|
||||
position: relative;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
._star-first {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
._star-second {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
._star-half ._star-first {
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
._star-empty ._star-first {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.star-box{
|
||||
position: relative;
|
||||
left: -0.5em;
|
||||
top: -0.2em;
|
||||
}
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
import { tag, WeElement, h, extractClass } from 'omi'
|
||||
import * as css from './index.scss'
|
||||
//@ts-ignore
|
||||
import '../theme.ts'
|
||||
|
||||
interface Props {
|
||||
total:number
|
||||
}
|
||||
|
||||
interface Data {
|
||||
|
||||
}
|
||||
|
||||
@tag('m-rate')
|
||||
export default class Rate extends WeElement<Props, Data>{
|
||||
static css = css
|
||||
|
||||
static defaultProps = {
|
||||
value: 0
|
||||
}
|
||||
|
||||
_current = 0
|
||||
|
||||
_rect = null
|
||||
|
||||
_hover = false
|
||||
|
||||
onSelect = (evt) => {
|
||||
this._rect = this.base.getBoundingClientRect()
|
||||
const dx = evt.pageX - this._rect.left
|
||||
const value = dx / this._rect.width * this.props.total
|
||||
const intValue = Math.floor(value)
|
||||
//@ts-ignore
|
||||
this.fire('selected', intValue + (value - intValue > 0.5 ? 1 : 0.5))
|
||||
}
|
||||
|
||||
onMouseMove = (evt) => {
|
||||
this._rect = this.base.getBoundingClientRect()
|
||||
const dx = evt.pageX - this._rect.left
|
||||
this._current = dx / this._rect.width * this.props.total
|
||||
this.update()
|
||||
}
|
||||
|
||||
base:HTMLElement
|
||||
installed(){
|
||||
this.base = this.shadowRoot.querySelector('ul')
|
||||
}
|
||||
|
||||
onMouseEnter = () => {
|
||||
this._hover = true
|
||||
}
|
||||
|
||||
onMouseLeave = () => {
|
||||
this._hover = false
|
||||
this.update()
|
||||
}
|
||||
|
||||
_getClass = (i, current) => {
|
||||
if (i < current) {
|
||||
if (current - i <= 0.5) {
|
||||
return '_star _star-half '
|
||||
}
|
||||
return '_star'
|
||||
} else {
|
||||
return '_star _star-empty '
|
||||
}
|
||||
}
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<ul onMouseMove={this.onMouseMove} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.onSelect} {...extractClass(props, "m-rate")} >
|
||||
|
||||
{Array.apply(0, Array(props.total)).map((x, i) =>
|
||||
<li class={this._getClass(i, this._hover ? this._current : props.value)}>
|
||||
<div class='star-box'>
|
||||
<div class="_star-first">
|
||||
<i class="anticon anticon-star">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" fill={props.color || "#f57c00"} viewBox="0 0 18 18"><path d="M9 11.3l3.71 2.7-1.42-4.36L15 7h-4.55L9 2.5 7.55 7H3l3.71 2.64L5.29 14z" /><path fill="none" d="M0 0h18v18H0z" /></svg>
|
||||
</i>
|
||||
</div>
|
||||
<div class="_star-second">
|
||||
<i class="anticon anticon-star">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" fill="#E8E8E8" viewBox="0 0 18 18"><path d="M9 11.3l3.71 2.7-1.42-4.36L15 7h-4.55L9 2.5 7.55 7H3l3.71 2.64L5.29 14z" /><path fill="none" d="M0 0h18v18H0z" /></svg>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"name": "@omim/button",
|
||||
"version": "0.0.1",
|
||||
"description": "Material Design for Omi.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [
|
||||
"omi",
|
||||
"omim",
|
||||
"material",
|
||||
"material design",
|
||||
"material-design"
|
||||
],
|
||||
"author": "dntzhang <dntzhang@qq.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/Tencent/omi/issues"
|
||||
},
|
||||
"homepage": "https://github.com/Tencent/omi",
|
||||
"typings": "./index.d.ts",
|
||||
"types": "index.d.ts"
|
||||
}
|
||||
|
|
@ -0,0 +1,361 @@
|
|||
:host {
|
||||
display: block;
|
||||
}
|
||||
.col {
|
||||
position: relative;
|
||||
display: block;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
.block > div {
|
||||
float: left;
|
||||
}
|
||||
.col1 {
|
||||
width: 4.16666667%;
|
||||
}
|
||||
.col2 {
|
||||
width: 8.33333333%;
|
||||
}
|
||||
.col3 {
|
||||
width: 12.5%;
|
||||
}
|
||||
.col4 {
|
||||
width: 16.66666667%;
|
||||
}
|
||||
.col5 {
|
||||
width: 20.83333333%;
|
||||
}
|
||||
.col6 {
|
||||
width: 25%;
|
||||
}
|
||||
.col7 {
|
||||
width: 29.16666667%;
|
||||
}
|
||||
.col8 {
|
||||
width: 33.33333333%;
|
||||
}
|
||||
.col9 {
|
||||
width: 37.5%;
|
||||
}
|
||||
.col10 {
|
||||
width: 41.66666667%;
|
||||
}
|
||||
.col11 {
|
||||
width: 45.83333333%;
|
||||
}
|
||||
.col12 {
|
||||
width: 50%;
|
||||
}
|
||||
.col13 {
|
||||
width: 54.16666667%;
|
||||
}
|
||||
.col14 {
|
||||
width: 58.33333333%;
|
||||
}
|
||||
.col15 {
|
||||
width: 62.5%;
|
||||
}
|
||||
.col16 {
|
||||
width: 66.66666667%;
|
||||
}
|
||||
.col17 {
|
||||
width: 70.83333333%;
|
||||
}
|
||||
.col18 {
|
||||
width: 75%;
|
||||
}
|
||||
.col19 {
|
||||
width: 79.16666667%;
|
||||
}
|
||||
.col20 {
|
||||
width: 83.33333333%;
|
||||
}
|
||||
.col21 {
|
||||
width: 87.5%;
|
||||
}
|
||||
.col22 {
|
||||
width: 91.66666667%;
|
||||
}
|
||||
.col23 {
|
||||
width: 95.83333333%;
|
||||
}
|
||||
.col24 {
|
||||
width: 100%;
|
||||
}
|
||||
.offset1 {
|
||||
margin-left: 4.16666667%;
|
||||
}
|
||||
.offset2 {
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
.offset3 {
|
||||
margin-left: 12.5%;
|
||||
}
|
||||
.offset4 {
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
.offset5 {
|
||||
margin-left: 20.83333333%;
|
||||
}
|
||||
.offset6 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.offset7 {
|
||||
margin-left: 29.16666667%;
|
||||
}
|
||||
.offset8 {
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
.offset9 {
|
||||
margin-left: 37.5%;
|
||||
}
|
||||
.offset10 {
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
.offset11 {
|
||||
margin-left: 45.83333333%;
|
||||
}
|
||||
.offset12 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.offset13 {
|
||||
margin-left: 54.16666667%;
|
||||
}
|
||||
.offset14 {
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
.offset15 {
|
||||
margin-left: 62.5%;
|
||||
}
|
||||
.offset16 {
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
.offset17 {
|
||||
margin-left: 70.83333333%;
|
||||
}
|
||||
.offset18 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.offset19 {
|
||||
margin-left: 79.16666667%;
|
||||
}
|
||||
.offset20 {
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
.offset21 {
|
||||
margin-left: 87.5%;
|
||||
}
|
||||
.offset22 {
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
.offset23 {
|
||||
margin-left: 95.83333333%;
|
||||
}
|
||||
.offset24 {
|
||||
margin-left: 100%;
|
||||
}
|
||||
.pull1 {
|
||||
right: 4.16666667%;
|
||||
}
|
||||
.pull2 {
|
||||
right: 8.33333333%;
|
||||
}
|
||||
.pull3 {
|
||||
right: 12.5%;
|
||||
}
|
||||
.pull4 {
|
||||
right: 16.66666667%;
|
||||
}
|
||||
.pull5 {
|
||||
right: 20.83333333%;
|
||||
}
|
||||
.pull6 {
|
||||
right: 25%;
|
||||
}
|
||||
.pull7 {
|
||||
right: 29.16666667%;
|
||||
}
|
||||
.pull8 {
|
||||
right: 33.33333333%;
|
||||
}
|
||||
.pull9 {
|
||||
right: 37.5%;
|
||||
}
|
||||
.pull10 {
|
||||
right: 41.66666667%;
|
||||
}
|
||||
.pull11 {
|
||||
right: 45.83333333%;
|
||||
}
|
||||
.pull12 {
|
||||
right: 50%;
|
||||
}
|
||||
.pull13 {
|
||||
right: 54.16666667%;
|
||||
}
|
||||
.pull14 {
|
||||
right: 58.33333333%;
|
||||
}
|
||||
.pull15 {
|
||||
right: 62.5%;
|
||||
}
|
||||
.pull16 {
|
||||
right: 66.66666667%;
|
||||
}
|
||||
.pull17 {
|
||||
right: 70.83333333%;
|
||||
}
|
||||
.pull18 {
|
||||
right: 75%;
|
||||
}
|
||||
.pull19 {
|
||||
right: 79.16666667%;
|
||||
}
|
||||
.pull20 {
|
||||
right: 83.33333333%;
|
||||
}
|
||||
.pull21 {
|
||||
right: 87.5%;
|
||||
}
|
||||
.pull22 {
|
||||
right: 91.66666667%;
|
||||
}
|
||||
.pull23 {
|
||||
right: 95.83333333%;
|
||||
}
|
||||
.pull24 {
|
||||
right: 100%;
|
||||
}
|
||||
.push1 {
|
||||
left: 4.16666667%;
|
||||
}
|
||||
.push2 {
|
||||
left: 8.33333333%;
|
||||
}
|
||||
.push3 {
|
||||
left: 12.5%;
|
||||
}
|
||||
.push4 {
|
||||
left: 16.66666667%;
|
||||
}
|
||||
.push5 {
|
||||
left: 20.83333333%;
|
||||
}
|
||||
.push6 {
|
||||
left: 25%;
|
||||
}
|
||||
.push7 {
|
||||
left: 29.16666667%;
|
||||
}
|
||||
.push8 {
|
||||
left: 33.33333333%;
|
||||
}
|
||||
.push9 {
|
||||
left: 37.5%;
|
||||
}
|
||||
.push10 {
|
||||
left: 41.66666667%;
|
||||
}
|
||||
.push11 {
|
||||
left: 45.83333333%;
|
||||
}
|
||||
.push12 {
|
||||
left: 50%;
|
||||
}
|
||||
.push13 {
|
||||
left: 54.16666667%;
|
||||
}
|
||||
.push14 {
|
||||
left: 58.33333333%;
|
||||
}
|
||||
.push15 {
|
||||
left: 62.5%;
|
||||
}
|
||||
.push16 {
|
||||
left: 66.66666667%;
|
||||
}
|
||||
.push17 {
|
||||
left: 70.83333333%;
|
||||
}
|
||||
.push18 {
|
||||
left: 75%;
|
||||
}
|
||||
.push19 {
|
||||
left: 79.16666667%;
|
||||
}
|
||||
.push20 {
|
||||
left: 83.33333333%;
|
||||
}
|
||||
.push21 {
|
||||
left: 87.5%;
|
||||
}
|
||||
.push22 {
|
||||
left: 91.66666667%;
|
||||
}
|
||||
.push23 {
|
||||
left: 95.83333333%;
|
||||
}
|
||||
.push24 {
|
||||
left: 100%;
|
||||
}
|
||||
.flex {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-flow: row wrap;
|
||||
-ms-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.flex-start {
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.flex-center {
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.flex-end {
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.flex-space-between {
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.flex-space-around {
|
||||
-webkit-justify-content: space-around;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.flex-top {
|
||||
-webkit-box-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.flex-middle {
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.flex-bottom {
|
||||
-webkit-box-align: end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.col{
|
||||
position: relative;
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
@import "../theme";
|
||||
@import "@material/select/mdc-select";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
@import "../theme";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.card{
|
||||
display: inline-block;
|
||||
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
|
||||
|
|
|
|||
|
|
@ -1,2 +1,6 @@
|
|||
@import "../theme";
|
||||
@import "@material/slider/mdc-slider";
|
||||
@import "@material/slider/mdc-slider";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@
|
|||
@import "@material/button/mdc-button";
|
||||
@import "@material/icon-button/mdc-icon-button";
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mdc-snackbar__action:not(:disabled){
|
||||
color: $mdc-theme-secondary!important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
@import "../theme";
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.m-step {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -1,2 +1,6 @@
|
|||
@import "../theme";
|
||||
@import "@material/switch/mdc-switch";
|
||||
@import "@material/switch/mdc-switch";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -4,6 +4,10 @@
|
|||
@import "@material/tab-indicator/mdc-tab-indicator";
|
||||
@import "@material/tab/mdc-tab";
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
@import "../theme";
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.m-table {
|
||||
background: white;
|
||||
margin: auto;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
@import '../theme';
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.m-icon {
|
||||
margin-left: 0.6em;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
@import "../theme";
|
||||
@import "@material/textfield/mdc-text-field";
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.icon{
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
@import '../theme';
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
m-list, .btns{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
@import "../theme";
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
|
|
|
|||
Loading…
Reference in New Issue