lemnis

input[type='number'] doesn't support the pattern property, even though iOS uses it.

You should use <input type="number" pattern="[0-9]*">.

What it does

• Show a numeric keyboard for iOS
• Remove the ability to enter decimal numbers within iOS

What it doesn't do

lemnis

.btn {
  background: firebrick;
  margin: 10vh;
  color: white;
  padding: 1em;
  border: none;
  -webkit-transition: .3s all;
  transition: .3s all;
}
.btn:hover {

lemnis

/**
 * Follows https://www.w3.org/TR/2017/WD-html-aria-20171013/#docconformance
 */

/**
 * All aria roles
 * @type {Array}
*/
var roles = [
	"alert", "alertdialog", "application", "article", "banner", "button", "cell",

lemnis

body {
  font-family: SegoeUI-Semibold;
}

$size: 90vh;
$fit-in: if(unit($size) == "vh", "height", "width");
$viewbox: 0 0 196 97;
$font-size-in-svg: 52;

$width: if($fit-in == "width", $size, $size / nth($viewbox, 4) * nth($viewbox, 3));

lemnis

• Button
  • syntax: button or [role=button tabindex=0]
• Toggle Button
  • syntax: Button + [aria-pressed]
• Menu button
  • syntax: Button + [aria-haspopup=true aria-expanded aria-controls]
  • ref: https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton
• Menu
  • syntax: nav>ul[role=menubar aria-activedescendant]>(li[role=presentation aria-selected=true]>a[role=menuitem]+ul[role=menu hidden])
• todo: check above code

lemnis

<!-- Defines element markup -->
<template>
    <div id="tab1" aria-controls=”panel1″ role=”tab” tabindex="0">
        <content></content>
    </div>
</template>

<script>(function(window, document, undefined) {
    // Refers to the "importer", which is index.html
    var thatDoc = document;

lemnis

lemnis

var debug = {
	getCallstack: function(){
		var err = (new Error),
			caller_stack = err.stack.split("\n"),
			stack = [];

		for (var i = 0; i < caller_stack.length; i++) {
			var caller = caller_stack[i],
				caller_line = caller.split(":"),
				caller_nf = caller_line[0].split("@"),

lemnis

lemnis

$color-value: green;
$border-radius-value: 20px;
$box-shadow-value: inset 5px 5px 5px red;

@mixin progress{
  -webkit-appearance: none;
  border: none;
  width: 160px;
  height: 16px;
  overflow: hidden;