skinny-widgets
Version:
skinnable web components widgets collection
219 lines (199 loc) • 6.13 kB
HTML
<template id="SkInputTpl">
<link rel="stylesheet" href="{{ themePath }}/default.css" />
<label class="sk-input-label"><slot name="label"></slot><slot></slot></label>
<input />
</template>
<template id="SkButtonTpl">
<link rel="stylesheet" href="{{ themePath }}/default.css" />
<button>
<slot name="label"></slot>
<slot></slot>
</button>
</template>
<template id="SkAlertTpl">
<link rel="stylesheet" href="{{ themePath }}/default.css" />
<div class="sk-alert">
<slot></slot>
<button type="button" class="sk-alert-close-icon" tabindex="0"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></button>
</div>
</template>
<template id="SkCheckboxTpl">
<link rel="stylesheet" href="{{ themePath }}/default.css" />
<span>
<input type="checkbox" value="" />
<label><slot name="label"></slot><slot></slot></label>
</span>
</template>
<template id="SkDatePickerTpl">
<link rel="stylesheet" href="{{ themePath }}/default.css" />
<label><slot name="label"></slot><slot></slot></label>
<input type="date" />
</template>
<template id="SkDialogTpl">
<link rel="stylesheet" href="{{ themePath }}/default.css" />
<div class="header"></div>
<div class="contents"></div>
<div class="footer"></div>
</template>
<template id="SkDialogFooterTpl">
<div>
<button class="btn-cancel" data-action="cancel" type="button"><span>{{ Cancel }}</span></button>
<button class="btn-confirm" data-action="confirm" type="button"><span>{{ OK }}</span></button>
</div>
</template>
<template id="SkFormTpl">
<link rel="stylesheet" href="{{ themePath }}/default.css" />
<form>
<slot></slot>
<slot name="fields"></slot>
<slot name="buttons"></slot>
</form>
</template>
<template id="SkSelectTpl">
<link rel="stylesheet" href="{{ themePath }}/default.css" />
<label class="sk-input-label"><slot name="label"></slot></label>
<select>
</select>
</template>
<template id="SkSpinnerTpl">
<style>
@-webkit-keyframes blinker {
from { opacity: 1.0; }
to { opacity: 0.0; }
}
.spinner {
display: block;
margin: 0 auto 0 auto;
text-align: center;
-webkit-animation-name: blinker;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
-webkit-animation-duration: 1.7s;
}
</style>
<div class="spinner">
...
</div>
</template>
<template id="SkSwitchTpl">
<link rel="stylesheet" href="{{ themePath }}/default.css" />
<style>
.sk-switch {
padding: 1px;
width: 40px;
height: 20px;
background-color: #dddddd;
border-radius: 20px;
}
.toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.toggle + label {
display: inline-block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}
input.toggle-round + label {
padding: 1px;
width: 40px;
height: 20px;
background-color: #dddddd;
border-radius: 20px;
vertical-align: middle;
}
input.toggle-round + label:before,
input.toggle-round + label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: "";
}
input.toggle-round + label:before {
right: 1px;
background-color: #f1f1f1;
border-radius: 30px;
transition: background 0.4s;
}
input.toggle-round + label:after {
width: 19px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: margin 0.4s;
}
input.toggle-round:checked + label:before {
background-color: #5c9ccc;
}
input.toggle-round:checked + label:after {
margin-left: 20px;
}
input.toggle-round.form-invalid + label {
background: red;
}
</style>
<input class="toggle toggle-round" type="checkbox" />
<label></label>
<label class="sk-input-label"><slot name="label"></slot><slot></slot></label>
</template>
<template id="SkTabsTpl">
<link rel="stylesheet" href="{{ themePath }}/default.css" />
<div id="tabs">
<div role="tablist" class="tabs-title-list">
</div>
<div class="tabs-contents"></div>
</div>
</template>
<template id="SkTabTpl">
</template>
<template id="SkTreeTpl">
<link rel="stylesheet" href="{{ themePath }}/default.css" />
<div class="sk-tree">
</div>
</template>
<template id="SkTreeItemTpl">
{{ name }}
</template>
<template id="SkAccordionTpl">
<link rel="stylesheet" href="{{ themePath }}/default.css" />
<div class="list-items">
</div>
</template>
<template id="SkNavbarTpl">
<link rel="stylesheet" href="{{ themePath }}/default.css" />
<div class="sk-navbar-panel">
</div>
<div class="sk-navbar">
</div>
</template>
<template id="SkMenuTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">
<ul class="ant-menu ant-menu-sub antd-menu-inline ant-menu-root"></ul>
</template>
<template id="SkMenuItemTpl">
<li class="sk-menu-item" role="menuitem" tabindex="-1">
<span>
{{ contents }}
</span>
</li>
</template>
<template id="SkToolbarTpl">
<link rel="stylesheet" href="{{ themePath }}/antd.css">
<link rel="stylesheet" href="{{ themePath }}/antd-theme.css">
<div class="sk-toolbar"><slot></slot></div>
</template>
<template id="SkToolbarItemTpl">
<span class="sk-toolbar-item">
{{ contents }}
</span>
</template>
<template id="SkAppTpl">
<link rel="stylesheet" href="{{ themePath }}/default.css" />
<slot></slot>
</template>