diff --git a/public/components.html b/public/components.html index 4c92746..8219ffc 100644 --- a/public/components.html +++ b/public/components.html @@ -51,21 +51,64 @@
-

+

Components +

+ +

Badge

+
+<span class="badge"> + Category +</span> + +
+ + Category + + + 99+ + + +

+ Bar

+
+<div class="bar"> + <div class="bar__start"> + <button class="button button--transparent"> + <svg class="icon fill-text-contrast marginless" aria-hidden="true"> + <use xlink:href="symbol-defs.svg#icon-close"></use> + </svg> + </button> + </div> + <div class="bar__main"> + Bar + </div> +</div> + +
+
+
+ +
+
+ Bar +
+
-

+

Buttons -

- +
<button class="button"> Default </button>
-
-
-
-
-
-

Icon

+

Field

+
+<div class="field-group"> + <label class="field-label"> + Name + <input class="field-text" /> + </label> +</div> + +
+ +
+ +
+ +
+<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="field-text" /> + </label> +</div> + +
+
+ +
+ +
+ + + String is not valid + +
+ +
+ +
+ +
+ +
+ +
+ + +
+ + + +

Icon

@@ -126,26 +266,6 @@
-
-
-

- Bar -

-
-
- -
-
- Bar -
-
-
-
-

@@ -190,13 +310,7 @@
-

Badge

- - Category - - - 99+ - +
@@ -314,86 +428,6 @@
-

Field

- -
-
- -
- -
- -
- -
- - - String is not valid - -
- -
- -
- -
- -
- -
- - -
- -
diff --git a/public/plain-ui.css b/public/plain-ui.css index e052081..5c0fe60 100644 --- a/public/plain-ui.css +++ b/public/plain-ui.css @@ -2260,7 +2260,7 @@ input.field-text, textarea.field-text, select.field-choice { font-family: var(--font-family); font-size: 0.95rem; width: 100%; - border: 1px solid var(--active); + border: 1px solid #a4a4a4; background-color: var(--background-contrast); border-radius: 2px; margin: 0.7rem 0 0; @@ -2709,6 +2709,11 @@ svg.field-choice__checked { } /** + *
+ * + * + * + *
* * * @author Björn Hase, Tentakelfabrik diff --git a/src/scss/components/_field.scss b/src/scss/components/_field.scss index 86772f4..89c3112 100644 --- a/src/scss/components/_field.scss +++ b/src/scss/components/_field.scss @@ -48,7 +48,7 @@ input.field-text, textarea.field-text, select.field-choice { width: 100%; - border: 1px solid var(--active); + border: 1px solid lighten($color__primary, 40%); background-color: var(--background-contrast); border-radius: $border-radius;