skinny-widgets/dist/jquery.templates.html

skinnable web components widgets collection

<template id="SkInputTpl">
<link rel="stylesheet" href="{{ themePath }}/theme.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-ui.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-theme.css">
<label class="sk-input-label"><slot name="label"></slot><slot></slot></label>
<input />

</template>
<template id="SkButtonTpl">
<link rel="stylesheet" href="{{ themePath }}/theme.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-ui.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-theme.css">
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text"><slot name="label"></slot><slot></slot></span></button>
</template>
<template id="SkAlertTpl">
<link rel="stylesheet" href="{{ themePath }}/theme.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-ui.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-theme.css">
<style>
    .jquery-sk-alert {
        border: 1px solid #d8000c;
        border-radius: 5px;
        margin: 10px 0;
        padding: 15px 20px 15px 25px;
        background-color: #faf9c9;
        position: relative;
    }
    .jquery-sk-alert .sk-alert-close-icon {
        border: none;
        background-color: initial;
        position: absolute;
        top: 16px;
        right: 10px;
    }
</style>
<div class="jquery-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 }}/theme.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-ui.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-theme.css">
<span>
    <input type="checkbox" value="" />
</span>
<label><slot name="label"></slot><slot></slot></label>
</template>
<template id="SkDatePickerTpl">
<link rel="stylesheet" href="{{ themePath }}/theme.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-ui.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-theme.css">
<div class="sk-datepicker-container">
<label><slot name="label"></slot><slot></slot></label>
<input class="hasDatepicker" />
</div>
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="position: absolute; top: 37px; left: 50.6875px; z-index: 1;">
    <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
        <a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title="Prev">
            <span class="ui-icon ui-icon-circle-triangle-w">Prev</span>
        </a>
        <a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="Next">
            <span class="ui-icon ui-icon-circle-triangle-e">Next</span>
        </a>
        <div class="ui-datepicker-title"><span class="ui-datepicker-month">January</span>&nbsp;<span class="ui-datepicker-year">2020</span></div>
    </div>
    <table class="ui-datepicker-calendar">
        <thead>

        </thead>
        <tbody>

        </tbody>
    </table>
</div>
</template>
<template id="SkDialogTpl">
<link rel="stylesheet" href="{{ themePath }}/theme.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-ui.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-theme.css">
<div tabindex="-1" role="dialog"
     class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-draggable ui-resizable"
     aria-describedby="dialog" aria-labelledby="ui-id-1"
     style="display: block;">
    <div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle">
        <span id="ui-id-1" class="ui-dialog-title">&#8203;</span><button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span></button>
    </div>
    <div id="dialog" class="ui-dialog-content ui-widget-content"
         style="width: auto; max-height: none; height: auto;">

    </div>
    <div class="ui-dialog-footer">

    </div>
</div>

</template>
<template id="SkDialogFooterTpl">
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
    <div class="ui-dialog-buttonset">
        <button type="button" data-action="confirm" class="ui-button btn-confirm ui-corner-all ui-widget">{{ Ok }}</button>
        <button type="button" data-action="cancel" class="ui-button btn-cancel ui-corner-all ui-widget">{{ Cancel }}</button>
    </div>
</div>
</template>
<template id="SkFormTpl">
<link rel="stylesheet" href="{{ themePath }}/theme.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-ui.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-theme.css">
<form>
    <slot></slot>
    <slot name="fields"></slot>
    <slot name="buttons"></slot>
</form>
</template>
<template id="SkSelectTpl">
<link rel="stylesheet" href="{{ themePath }}/theme.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-ui.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-theme.css">
<style>
    .ui-menu .ui-menu-item {
        padding: 0.5em 0.5em;
    }
    .ui-menu .ui-menu-item:hover {
        background: #5c9ccc;
        color: #fff;
    }
    .sk-select-multi-item {
        min-height: 2em;
        line-height: 2em;

    }
    .sk-select-multi-item .ui-menu-item-wrapper {
        padding-left: 1em;
        min-width: 14em;
    }
    .sk-select-multi-btn {
        min-width: 16em;
        text-align: initial !important;
    }
</style>
<div class="sk-input">
    <label class="sk-input-label"><slot name="label"></slot></label>
    <select>
        <slot></slot>
    </select>
    <span tabindex="0" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-haspopup="true"
          class="ui-selectmenu-button ui-selectmenu-button-closed ui-corner-all ui-button ui-widget" aria-disabled="false">
        <span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span>
        <span class="ui-selectmenu-text"></span>
    </span>
    <button type="button" class="ui-multiselect ui-button ui-widget ui-state-default ui-corner-all filter-value sk-select-multi-btn"><span class="ui-icon ui-icon-triangle-1-s"></span><span class="sk-select-filter-label"></span></button>
    <div class="ui-selectmenu-menu ui-front ui-selectmenu-open">
        <ul aria-hidden="false" role="listbox" tabindex="0"
            class="ui-menu ui-corner-bottom ui-widget ui-widget-content ui-menu-icons"
            aria-disabled="false">

        </ul>
    </div>
</div>
</template>
<template id="SkSpinnerTpl">
<link rel="stylesheet" href="{{ themePath }}/theme.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-ui.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-theme.css">
<style>
    .spinner {
        /*background-image: url('./loading_spinner.gif');*/
        display: inline-block;
        background-size: contain;
        width: 50px;
        height: 50px;
    }
</style>
<div class="spinner"></div>
</template>
<template id="SkSwitchTpl">
<link rel="stylesheet" href="{{ themePath }}/theme.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-ui.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-theme.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 }}/theme.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-ui.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-theme.css">
<div id="tabs" class="ui-tabs ui-corner-all ui-widget ui-widget-content">
    <ul role="tablist" class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">

    </ul>
    <div class="tabs-contents"></div>
</div>
</template>
<template id="SkTabTpl">

</template>
<template id="SkTreeTpl">
<link rel="stylesheet" href="{{ themePath }}/theme.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-ui.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-theme.css">
<div class="sk-tree">

</div>
</template>
<template id="SkTreeItemTpl">
{{ name }}
</template>
<template id="SkAccordionTpl">
<link rel="stylesheet" href="{{ themePath }}/theme.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-ui.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-theme.css">
<div class="ui-widget">
    <div id="mainMenu" class="ui-accordion ui-widget ui-helper-reset" role="tablist">

    </div>
</div>
</template>
<template id="SkNavbarTpl">
<link rel="stylesheet" href="{{ themePath }}/theme.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-ui.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-theme.css">

<div class="sk-navbar-panel">

</div>
<div class="sk-navbar">

</div>
</template>
<template id="SkMenuTpl">
<link rel="stylesheet" href="{{ themePath }}/theme.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-ui.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-theme.css">
<ul class="ui-menu ui-widget-content"></ul>

</template>
<template id="SkMenuItemTpl">
<li class="sk-menu-item ui-menu-item" role="menuitem" tabindex="-1">
    <span>
        {{ contents }}
    </span>
</li>

</template>
<template id="SkToolbarTpl">
<link rel="stylesheet" href="{{ themePath }}/theme.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-ui.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-theme.css">

<div class="sk-toolbar"><slot></slot></div>

</template>
<template id="SkToolbarItemTpl">
<style>
    .ui-icon {
        transform: scale(2);
    }
</style>
<span class="sk-toolbar-item">
    {{ contents }}
</span>

</template>
<template id="SkAppTpl">
<link rel="stylesheet" href="{{ themePath }}/theme.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-ui.css">
<link rel="stylesheet" href="{{ themePath }}/jquery-theme.css">
<slot></slot>
</template>