@kano/web-components
Version:
Shared web-components for the Kano ecosystem.
172 lines (164 loc) • 8.06 kB
HTML
<html>
<head>
<title>kano-step demo</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="../../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module" src="../../../../@polymer/iron-demo-helpers/demo-snippet.js"></script>
<script type="module" src="../../../../@polymer/iron-demo-helpers/demo-pages-shared-styles.js"></script>
<script type="module" src="../../../../@polymer/iron-flex-layout/iron-flex-layout.js"></script>
<script type="module" src="../kano-step.js"></script>
<script type="module" src="../../kano-style/typography.js"></script>
<!-- FIXME(polymer-modulizer):
These imperative modules that innerHTML your HTML are
a hacky way to be sure that any mixins in included style
modules are ready before any elements that reference them are
instantiated, otherwise the CSS @apply mixin polyfill won't be
able to expand the underlying CSS custom properties.
See: https://github.com/Polymer/polymer-modulizer/issues/154
-->
<script type="module">
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<custom-style>
<style is="custom-style" include="demo-pages-shared-styles"></style>
</custom-style>`;
document.body.appendChild($_documentContainer.content);
</script>
</head>
<body unresolved>
<script type="module">
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<div class="vertical-section-container centered">
<h3>Horizontal step display</h3>
<demo-snippet>
<template>
<custom-style>
<style is="custom-style">
.step-display-horizontal {
display: flex;
flex-direction: row;
padding-bottom: 20px;
}
.step-display-horizontal kano-step {
width: 120px;
height: 130px;
--kano-step-line-color: #263A48;
--kano-step-label: {
bottom: -56px;
};
--kano-step-horizontal: {
justify-content: center;
};
}
.step-display-horizontal .step-icon {
position: relative;
background-image: url("https://world.kano.me/new/assets/projects/simple-progress/lock-circle.svg");
background-color: #263A48;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
flex: 1;
height: 40px;
width: 40px;
margin: 0 12px;
border-radius: 50%;
z-index: 0;
}
.step-display-horizontal .make-btn {
color: #263a48;
background-color: #fee33e;
border-radius: 30px;
border: none;
outline: none;
cursor: pointer;
font-size: 18px;
line-height: 18px;
font-family: 'Bariol', sans-serif;
font-weight: bold;
text-shadow: none;
text-transform: uppercase;
overflow: hidden;
padding: 13px 24px 11px;
}
</style>
</custom-style>
<div class="step-display-horizontal">
<kano-step horizontal="">
<div slot="icon">
<div class="step-icon"></div>
</div>
<div slot="label">1</div>
</kano-step>
<kano-step horizontal="">
<div slot="icon">
<div class="step-icon"></div>
</div>
<div slot="label">2</div>
</kano-step>
<kano-step horizontal="">
<div slot="icon">
<div class="step-icon"></div>
</div>
<div slot="label">
<div class="make-btn">make</div>
</div>
</kano-step>
</div>
</template>
</demo-snippet>
<h3>Vertical step display</h3>
<demo-snippet>
<template>
<custom-style>
<style is="custom-style">
.step-display-vertical {
display: flex;
flex-direction: column;
align-items: center;
}
.step-display-vertical kano-step {
min-width: 120px;
height: 130px;
text-align: center;
--kano-step-line-color: #263A48;
}
.step-display-vertical .step-icon {
background-image: url("https://world.kano.me/new/assets/projects/simple-progress/lock-circle.svg");
background-color: #263A48;
background-size: 60%;
background-repeat: no-repeat;
background-position: center;
flex: 1;
height: 60px;
width: 60px;
}
</style>
</custom-style>
<div class="step-display-vertical">
<kano-step vertical="">
<div slot="icon">
<div class="step-icon"></div>
</div>
<div slot="label">1</div>
</kano-step>
<kano-step vertical="">
<div slot="icon">
<div class="step-icon"></div>
</div>
<div slot="label">2</div>
</kano-step>
<kano-step vertical="">
<div slot="icon">
<div class="step-icon"></div>
</div>
<div slot="label">3</div>
</kano-step>
</div>
</template>
</demo-snippet>
</div>`;
document.body.appendChild($_documentContainer.content);
</script>
</body>
</html>