tiny-components
/
plain-ui
1
0
Fork 0
Code Issues 13 Pull Requests Projects Releases 5 Wiki Activity

adding badge field

Browse Source
release/0.2
Björn 4 years ago
parent 8082d0ace8
commit 44f1a4a0a4
8 changed files with 190 additions and 113 deletions
Show Stats Download Patch File Download Diff File

47
dist/index.html vendored
Unescape View File

@ -17,9 +17,8 @@
<div class="col-12">
<div class="text-center">
<hgroup>
<a href="/">
<h1 class="h2 margin-top-4 margin-bottom-0">Plain UI</h1>
</a></hgroup>
<h1>Plain UI</h1>
</hgroup>
</div>
</div>
</div>
@ -54,8 +53,11 @@
<svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
<svg class="icon icon--circle" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
<svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-camera"></use>
</svg>
<svg class="icon icon--success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-clock"></use>
</svg>
</div>
</div>
@ -66,6 +68,9 @@
<span class="badge">
Category
</span>
<span class="badge badge--round">
99+
</span>
</div>
</div>
@ -109,38 +114,48 @@
<div class="grid">
<div class="col-12">
<h2>Form</h2>
<h2>Field</h2>
<form>
<div class="group">
<label class="label">
<div class="field-group">
<label class="field-label">
Name
<input class="text" />
<input class="field-text" />
</label>
</div>
<div class="group group--valid">
<label class="label">
<div class="field-group field-group--valid">
<label class="field-label">
<svg class="icon" aria-hidden="true">
<use class="test" xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
Surname
<input class="text" />
<input class="field-text" />
</label>
</div>
<div class="group group--error">
<label class="label">
<div class="field-group field-group--error">
<label class="field-label">
<svg class="icon" aria-hidden="true">
<use class="test" xlink:href="symbol-defs.svg#icon-warning"></use>
</svg>
E-Mail
<input class="text" />
<input class="field-text" />
</label>
<span class="error">
<span class="field-error">
String is not valid
</span>
</div>
<div class="field-group">
<label class="field-label">
Towns
<select class="field-choice">
<option></option>
<option value="lonytown">Lonytown</option>
</select>
</label>
</div>
</form>
</div>

108
dist/plain-ui.css vendored
Unescape View File

@ -213,6 +213,12 @@ summary {
display: list-item;
}
/**
*
*
*
*
*/
/**
*
*
@ -222,6 +228,7 @@ summary {
*
*
*
*
*/
/**
*
@ -258,6 +265,22 @@ body {
line-height: 1.4;
}
.badge {
display: inline-block;
background-color: #3e3e3e;
color: white;
font-size: 0.85rem;
padding: 0.4em 0.8em;
border: 1px solid #242424;
border-radius: 2px;
}
.badge--round {
display: inline-flex;
justify-content: center;
border-radius: 50%;
width: 2.5em;
}
.button {
-webkit-appearance: none;
-moz-appearance: none;
@ -279,64 +302,68 @@ body {
text-decoration: none;
background-color: #575757;
}
.label {
.button .icon {
fill: white;
}
.field-group {
margin-bottom: 1.2em;
}
.field-group--valid input.field-text, .field-group--valid textarea.field-text {
border-color: #64ac64;
}
.field-group--valid .icon {
fill: #64ac64;
}
.field-group--error input.field-text, .field-group--error textarea.field-text {
border-color: #d95959;
}
.field-group--error .icon {
fill: #d95959;
}
.field-label {
font-size: 1rem;
font-family: "IBM Plex Mono", sans-serif;
}
.label .icon {
vertical-align: text-top;
font-size: 1.2rem;
.field-label .icon {
vertical-align: sub;
font-size: 1.1rem;
}
input.text, textarea.text {
input.field-text, textarea.field-text, select.field-choice {
font-family: "IBM Plex Mono", sans-serif;
font-size: 0.95rem;
width: 100%;
padding: 0.8em 1.1em;
font-size: 0.9rem;
border: 1px solid;
border: 1px solid #8a8a8a;
background-color: white;
border-radius: 2px;
margin: 0.7em 0 0;
}
input.text:focus, input.text:active, textarea.text:focus, textarea.text:active {
input.field-text:focus, input.field-text:active, textarea.field-text:focus, textarea.field-text:active, select.field-choice:focus, select.field-choice:active {
outline: 0;
border-color: #4d8c4d;
border-color: #242424;
}
input.field-text, textarea.field-text {
padding: 0.8em 1.1em;
}
select.field-choice {
padding: 0.8em;
}
.help, .error {
.field-help, .field-error {
display: inline-block;
width: 100%;
padding: 0.6em 0.5em;
font-size: 0.8rem;
}
.error {
.field-error {
color: #d95959;
}
.group {
margin-bottom: 1.2em;
}
.group--valid input.text, .group--valid textarea.text {
border-color: #64ac64;
}
.group--valid .icon {
fill: #64ac64;
}
.group--error input.text, .group--error textarea.text {
border-color: #d95959;
}
.group--error .icon {
fill: #d95959;
}
.text-wrapper {
display: flex;
}
.text-wrapper input.text {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
}
.icon {
width: 1em;
height: 1em;
@ -344,7 +371,11 @@ input.text:focus, input.text:active, textarea.text:focus, textarea.text:active {
max-width: 100%;
vertical-align: middle;
overflow: hidden;
fill: white;
fill: #242424;
}
.icon--success {
fill: #64ac64;
}
.icon--danger {
@ -379,6 +410,7 @@ input.text:focus, input.text:active, textarea.text:focus, textarea.text:active {
width: 1.5em;
height: 1.5em;
margin-right: 0.5em;
fill: white;
}
.panel__buttons {
display: flex;

29
src/scss/components/_badge.scss
Unescape View File

@ -0,0 +1,29 @@
/**
*
*
*
*
*/
@mixin plain-ui__component__badge() {
.badge {
display: inline-block;
background-color: lighten($plain-ui__primary-light, 10%);
color: white;
font-size: 0.85rem;
padding: 0.4em 0.8em;
border: 1px solid $plain-ui__primary-light;
border-radius: 2px;
&--round {
display: inline-flex;
justify-content: center;
border-radius: 50%;
width: 2.5em;
}
}
}

10
src/scss/components/_button.scss
Unescape View File

@ -36,14 +36,8 @@
}
&--lighter {
}
}
.plain-ui-dark {
.button {
.icon {
fill: white;
}
}
}

91
src/scss/components/_field.scss
Unescape View File

@ -2,38 +2,74 @@
*
*
*
*
*/
@mixin plain-ui__component__field()
{
.label {
// group, container for fields
.field-group {
margin-bottom: 1.2em;
&--valid {
input.field-text, textarea.field-text {
border-color: $plain-ui__success-light;
}
.icon {
fill: $plain-ui__success-light;
}
}
&--error {
input.field-text, textarea.field-text {
border-color: $plain-ui__danger-light;
}
.icon {
fill: $plain-ui__danger-light;
}
}
}
.field-label {
font-size: 1rem;
font-family: $plain-ui__font-family;
.icon {
vertical-align: text-top;
font-size: 1.2rem;
vertical-align: sub;
font-size: 1.1rem;
}
}
input.text, textarea.text {
input.field-text, textarea.field-text, select.field-choice {
font-family: $plain-ui__font-family;
font-size: 0.95rem;
width: 100%;
padding: 0.8em 1.1em;
font-size: 0.9rem;
border: 1px solid;
border: 1px solid lighten($plain-ui__primary-light, 40%);
background-color: white;
border-radius: 2px;
margin: 0.7em 0 0;
&:focus, &:active {
outline: 0;
border-color: #4d8c4d;
border-color: $plain-ui__primary-light;
}
}
.help, .error {
input.field-text, textarea.field-text {
padding: 0.8em 1.1em;
}
select.field-choice {
padding: 0.8em;
}
//
.field-help, .field-error {
display: inline-block;
width: 100%;
@ -41,41 +77,8 @@
font-size: 0.8rem;
}
.error {
// display error for fields
.field-error {
color: $plain-ui__danger-light;
}
.group {
margin-bottom: 1.2em;
&--valid {
input.text, textarea.text {
border-color: $plain-ui__success-light;
}
.icon {
fill: $plain-ui__success-light;
}
}
&--error {
input.text, textarea.text {
border-color: $plain-ui__danger-light;
}
.icon {
fill: $plain-ui__danger-light;
}
}
}
.text-wrapper {
display: flex;
input.text {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
}
}
}

6
src/scss/components/_icon.scss
Unescape View File

@ -16,7 +16,11 @@
vertical-align: middle;
overflow: hidden;
fill: white;
fill: $plain-ui__primary-light;
}
.icon--success {
fill: $plain-ui__success-light;
}
.icon--danger {

8
src/scss/components/_panel.scss
Unescape View File

@ -35,6 +35,8 @@
width: 1.5em;
height: 1.5em;
margin-right: 0.5em;
fill: white;
}
}
@ -52,10 +54,4 @@
padding: 0.6em 1.2em;
}
}
.plain-ui-dark {
.panel {
}
}
}

4
src/scss/plain-ui.scss
Unescape View File

@ -4,12 +4,16 @@
'variables',
'core',
'components/badge',
'components/button',
'components/field',
'components/icon',
'components/panel';
@include plain-ui__core();
@include plain-ui__component__badge();
@include plain-ui__component__button();
@include plain-ui__component__field();
@include plain-ui__component__icon();

Write Preview
Loading…
Cancel
Save