diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1a5ac46 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +fonts diff --git a/README.md b/README.md index 7491072..677689c 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,4 @@ -# Tiny Tag +# Tiny Tags +* Add Tags to a List +* Can be used as a Form-Field \ No newline at end of file diff --git a/demo-386.js b/demo-386.js new file mode 100644 index 0000000..dc1a268 --- /dev/null +++ b/demo-386.js @@ -0,0 +1,5 @@ +import * as riot from 'riot'; +import TinyTags from './src/tiny-tags.riot'; + +riot.register('tiny-tags', TinyTags); +riot.mount('tiny-tags'); diff --git a/demo-386.scss b/demo-386.scss new file mode 100644 index 0000000..ae7f1e1 --- /dev/null +++ b/demo-386.scss @@ -0,0 +1,171 @@ +@import 'src/assets/fonts/stylesheet.css'; +@import 'src/assets/icomoon/style.css'; + +/** + * variables + * + */ + +$text-color: #fff; + +$link-color: #fefe5b; +$link-background-color: #008106; +$background-color: #000084; +$background-contrast-color: #bbbbbb; + +$color__text: #bbbbbb; +$color__secondary: #00aaaa; + +/** + * default elements + * + */ + +body { + color: $text-color; + background-color: black; + font-family: 'PxPlus IBM VGA8', sans-serif; + font-style: normal; + font-size: 1.2rem; + line-height: 1.3; +} + +a { + text-decoration: none; + + &:focus { + outline: none; + } +} + +h1, h2, h3, h4, h5, h6 { + font-size: 18px; + font-weight: normal; + text-transform: uppercase; +} + +.site-header { + padding: 20px 20px; + margin: 20px 0 20px; + color: #000; + background: $color__secondary; + + h1, h2, h3, h4, h5, h6 { + margin: 0; + } +} + +.icon { + width: 0.7em; + height: 0.7em; + color: white; +} + +.vertical-align-sub { + vertical-align: sub; +} + +main { + padding: 50px 0; + background: $background-color; +} + +blockquote { + padding: 0 0 0 15px; + margin: 0 0 20px; + border-left: 5px solid #bbbbbb; +} + +/** + * footer + * + * + */ + +footer { + text-align: center; + font-size: 1.4rem; + width: 100%; + height: 100%; + + padding: 0.8em 0; + + .icon { + width: 1.2em; + height: 1.2em; + } +} + +/** + * + * + * + */ + +.hero { + padding: 16px 20.8px; + margin-bottom: 20px; + font-size: 18px; + line-height: 20px; + color: #ffffff; + background-color: #00aaaa; + border: 4px double #ffffff; + border-radius: 0; + box-shadow: 0 0 0 4px #00aaaa; + margin: 0 4px 20px; + + .icon { + width: 1em; + height: 1em; + } +} + + +/** + * tiny-tags + * + * + */ + +.tiny-tags { + &__list { + margin: 0; + padding: 0; + list-style: none; + } + + &__item { + display: inline-block; + border: 1px solid #ddd; + background: #bbbbbb; + margin: 0 0.3em 0.3em 0; + } + + &__label, &__input { + padding: 0.2em 0.4em; + } + + &__input { + border: 0; + width: 100px; + background: transparent; + color: white; + } + + &__label { + display: inline-block; + } + + &__button { + appearance: none; + border: 0; + padding: 0.3em 0.4em; + background: none; + } + + .icon { + &:hover { + cursor: pointer; + } + } +} diff --git a/dist/css/demo-386.css b/dist/css/demo-386.css new file mode 100644 index 0000000..738b078 --- /dev/null +++ b/dist/css/demo-386.css @@ -0,0 +1 @@ +@font-face{font-family:PxPlus IBM VGA8;src:url(/fonts/PxPlus_IBM_VGA8.eot?6487324f1ac4377e882c9af6ce96da0f);src:url(/fonts/PxPlus_IBM_VGA8.eot?6487324f1ac4377e882c9af6ce96da0f?#iefix) format("embedded-opentype"),url(/fonts/PxPlus_IBM_VGA8.woff2?28087632ed5e0851a1ec27def2b1e73f) format("woff2"),url(/fonts/PxPlus_IBM_VGA8.woff?5f9b12f2cef3f405002438fafa0e41a6) format("woff"),url(/fonts/PxPlus_IBM_VGA8.ttf?8fa23fdc4e2cff030f42999bc1ede4b2) format("truetype"),url(/fonts/PxPlus_IBM_VGA8.svg?3000c157212c66cf53ad18f0d7b7a12f#PxPlus_IBM_VGA8) format("svg");font-weight:400;font-style:normal}.icon{display:inline-block;width:1em;height:1em;stroke-width:0;stroke:currentColor;fill:currentColor}body{color:#fff;background-color:#000;font-family:PxPlus IBM VGA8,sans-serif;font-style:normal;font-size:1.2rem;line-height:1.3}a{text-decoration:none}a:focus{outline:none}h1,h2,h3,h4,h5,h6{font-size:18px;font-weight:400;text-transform:uppercase}.site-header{padding:20px;margin:20px 0;color:#000;background:#0aa}.site-header h1,.site-header h2,.site-header h3,.site-header h4,.site-header h5,.site-header h6{margin:0}.icon{width:.7em;height:.7em;color:#fff}.vertical-align-sub{vertical-align:sub}main{padding:50px 0;background:#000084}blockquote{padding:0 0 0 15px;margin:0 0 20px;border-left:5px solid #bbb}footer{text-align:center;font-size:1.4rem;width:100%;height:100%;padding:.8em 0}footer .icon{width:1.2em;height:1.2em}.hero{padding:16px 20.8px;font-size:18px;line-height:20px;color:#fff;background-color:#0aa;border:4px double #fff;border-radius:0;box-shadow:0 0 0 4px #0aa;margin:0 4px 20px}.hero .icon{width:1em;height:1em}.tiny-tags__list{margin:0;padding:0;list-style:none}.tiny-tags__item{display:inline-block;border:1px solid #ddd;background:#bbb;margin:0 .3em .3em 0}.tiny-tags__input,.tiny-tags__label{padding:.2em .4em}.tiny-tags__input{border:0;width:100px;background:transparent;color:#fff}.tiny-tags__label{display:inline-block}.tiny-tags__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:.3em .4em;background:none}.tiny-tags .icon:hover{cursor:pointer} \ No newline at end of file diff --git a/dist/fonts/PxPlus_IBM_VGA8.eot b/dist/fonts/PxPlus_IBM_VGA8.eot new file mode 100644 index 0000000..d30a1f0 Binary files /dev/null and b/dist/fonts/PxPlus_IBM_VGA8.eot differ diff --git a/dist/fonts/PxPlus_IBM_VGA8.svg b/dist/fonts/PxPlus_IBM_VGA8.svg new file mode 100644 index 0000000..38282d4 --- /dev/null +++ b/dist/fonts/PxPlus_IBM_VGA8.svg @@ -0,0 +1,1625 @@ + + + diff --git a/dist/fonts/PxPlus_IBM_VGA8.ttf b/dist/fonts/PxPlus_IBM_VGA8.ttf new file mode 100644 index 0000000..e5d3652 Binary files /dev/null and b/dist/fonts/PxPlus_IBM_VGA8.ttf differ diff --git a/dist/fonts/PxPlus_IBM_VGA8.woff b/dist/fonts/PxPlus_IBM_VGA8.woff new file mode 100644 index 0000000..1bf623e Binary files /dev/null and b/dist/fonts/PxPlus_IBM_VGA8.woff differ diff --git a/dist/fonts/PxPlus_IBM_VGA8.woff2 b/dist/fonts/PxPlus_IBM_VGA8.woff2 new file mode 100644 index 0000000..70cb86c Binary files /dev/null and b/dist/fonts/PxPlus_IBM_VGA8.woff2 differ diff --git a/dist/fonts/stylesheet.css b/dist/fonts/stylesheet.css new file mode 100644 index 0000000..6478095 --- /dev/null +++ b/dist/fonts/stylesheet.css @@ -0,0 +1,11 @@ +@font-face { + font-family: 'PxPlus IBM VGA8'; + src: url('PxPlus_IBM_VGA8.eot'); + src: url('PxPlus_IBM_VGA8.eot?#iefix') format('embedded-opentype'), + url('PxPlus_IBM_VGA8.woff2') format('woff2'), + url('PxPlus_IBM_VGA8.woff') format('woff'), + url('PxPlus_IBM_VGA8.ttf') format('truetype'), + url('PxPlus_IBM_VGA8.svg#PxPlus_IBM_VGA8') format('svg'); + font-weight: normal; + font-style: normal; +} diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..e48485a --- /dev/null +++ b/dist/index.html @@ -0,0 +1,76 @@ + + +
+ +