diff --git a/dist/plain-ui.css b/dist/plain-ui.css
index 266e166..2268693 100644
--- a/dist/plain-ui.css
+++ b/dist/plain-ui.css
@@ -213,12 +213,19 @@ summary {
display: list-item;
}
+/**
+ *
+ *
+ *
+ *
+ */
/**
*
*
*
*/
/**
+ *
*
*
*
@@ -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;
diff --git a/src/scss/components/_badge.scss b/src/scss/components/_badge.scss
new file mode 100644
index 0000000..f2a156c
--- /dev/null
+++ b/src/scss/components/_badge.scss
@@ -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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
index cde1001..4a9d60d 100644
--- a/src/scss/components/_button.scss
+++ b/src/scss/components/_button.scss
@@ -36,14 +36,8 @@
}
- &--lighter {
-
- }
- }
-
- .plain-ui-dark {
- .button {
-
+ .icon {
+ fill: white;
}
}
}
\ No newline at end of file
diff --git a/src/scss/components/_field.scss b/src/scss/components/_field.scss
index 59a950d..ebfeddd 100644
--- a/src/scss/components/_field.scss
+++ b/src/scss/components/_field.scss
@@ -1,4 +1,5 @@
/**
+ *
*
*
*
@@ -6,34 +7,69 @@
@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;
- }
- }
}
diff --git a/src/scss/components/_icon.scss b/src/scss/components/_icon.scss
index 7d9cf2f..bdb596e 100644
--- a/src/scss/components/_icon.scss
+++ b/src/scss/components/_icon.scss
@@ -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 {
diff --git a/src/scss/components/_panel.scss b/src/scss/components/_panel.scss
index 33b34f0..595c33d 100644
--- a/src/scss/components/_panel.scss
+++ b/src/scss/components/_panel.scss
@@ -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 {
-
- }
- }
}
\ No newline at end of file
diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss
index b40049b..8f0551d 100644
--- a/src/scss/plain-ui.scss
+++ b/src/scss/plain-ui.scss
@@ -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();