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

$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;

lemnis

$pi: 3.14159265359;

@function power ($x, $n){
	$ret: 1;
	@if $n >= 0 {
		@for $i from 1 through $n {
			$ret: $ret * $x;
		} 
	} @else {
		@for $i from $n through 0 {

lemnis

@mixin inline-block{
  display: inline-block;
  zoom: 1;
  *display: inline;
}

@mixin opacity ($value) {
  opacity: $value;
  -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=” $value * 100 “)”;
  filter: alpha(opacity= $value * 100 );

lemnis

$svg-filters: no;

// add different output if it is used within the mixin filter
@function grayscale($value){
  @if $svg-filters == yes{
    @return $value
  } @else {
    @return desaturate($color, 100%)
  }
}

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;