minor updates

Author: nikoloza

lib/form/button.css

@@ -9,19 +9,32 @@
   --button-background-hover: var(--primary-hover);
   --button-background-focus: var(--primary-focus);
 
+  /* shadows */
+  --button-box-shadow: var(--field-box-shadow);
+
   /* borders */
-  --button-border-width: 1px;
-  --button-border-style: solid;
+  --button-border-width: var(--field-border-width);
+  --button-border-style: var(--field-border-style);
   --button-border-color: var(--primary);
   --button-border-color-hover: var(--primary-hover);
   --button-border-color-focus: var(--primary-focus);
 
-  --button-border-radius: 0;
+  --button-border-radius: var(--field-border-radius);
+
+  /* font styles */
+  --button-font-weight: var(--field-font-weight);
+  --button-text-transform: var(--field-text-transform);
+  --button-text-align: center;
+
+  /* transitions */
+  --button-transition: var(--field-transition);
+  --button-transition-property: var(--field-transition-property);
 }
 
-.button {
-  font-weight: var(--field-font-weight);
-  text-transform: var(--field-text-transform);
+.ui.form.button {
+  font-weight: var(--button-font-weight);
+  text-transform: var(--button-text-transform);
+  text-align: var(--button-text-align);
 
   color: var(--button-color);
   background: var(--button-background);
@@ -31,18 +44,8 @@
   border-color: var(--button-border-color);
   border-radius: var(--button-border-radius);
 
-  transition: 0.3s ease;
-  transition-property: border, color, background;
-
-  &:hover {
-    color: var(--button-color-hover);
-    background: var(--button-background-hover);
-    border-color: var(--button-border-color-hover);
-  }
+  box-shadow: var(--button-box-shadow);
 
-  &:focus {
-    color: var(--button-color-focus);
-    background: var(--button-background-focus);
-    border-color: var(--button-border-color-focus);
-  }
+  transition: var(--button-transition);
+  transition-property: var(--button-transition-property);
 }

lib/form/checkbox.css

@@ -13,7 +13,7 @@
   --checkbox-label-gutter: var(--gutter-small);
 }
 
-.checkbox {
+.ui.form.checkbox {
   line-height: 1;
 
   > input {
@@ -66,7 +66,7 @@
 }
 
 /* sizes */
-.checkbox {
+.ui.form.checkbox {
   &.tiny > span {
     &::before,
     &::after {

lib/form/config.css

@@ -2,9 +2,10 @@
   /* sequence */
   --field-height-unit: var(--font-unit);
   --field-height-sequence: var(--minor-third);
-  --field-height: 2.4rem;
+  --field-height-base: 2.4;
+  --field-height: var(--field-height-base)var(--font-unit);
 
-  /* sizes */
+  /* heighs */
   --field-height-tiny: calc(var(--field-height-small) /
     var(--field-height-sequence));
   --field-height-small: calc(var(--field-height) /
@@ -14,15 +15,24 @@
   --field-height-large: calc(var(--field-height-big) *
     var(--field-height-sequence));
 
-  /* sizes */
-  --field-font-size-tiny: var(--h9);
-  --field-font-size-small: var(--h8);
-  --field-font-size: var(--h7);
-  --field-font-size-big: var(--h6);
-  --field-font-size-large: var(--h5);
+  /* line height */
+  --field-line-height-sequence: var(--minor-second);
+
+  /* widths */
+  --field-min-width: 0;
+  --field-max-width: none;
 
   /* text options */
   --field-font-size: var(--h8);
-  --field-text-transform: uppercase;
-  --field-font-weight: var(--font-regular);
+  --field-font-size-sequence: var(--font-sequence);
+
+  /* font sizes */
+  --field-font-size-tiny: calc(var(--field-font-size-small) /
+    var(--field-font-size-sequence));
+  --field-font-size-small: calc(var(--field-font-size) /
+    var(--field-font-size-sequence));
+  --field-font-size-big: calc(var(--field-font-size) *
+    var(--field-font-size-sequence));
+  --field-font-size-large: calc(var(--field-font-size-big) *
+    var(--field-font-size-sequence));
 }

lib/form/field.css

@@ -9,28 +9,56 @@
   --field-background-hover: var(--primary-contrast-hover);
   --field-background-focus: var(--primary-contrast-focus);
 
+  /* shadows */
+  --field-box-shadow: none;
+
+  /* font styles */
+  --field-text-transform: uppercase;
+  --field-font-weight: var(--font-regular);
+  --field-text-align: left;
+
   /* borders */
   --field-border-width: 1px;
   --field-border-style: solid;
   --field-border-color: var(--primary);
   --field-border-color-hover: var(--primary-hover);
   --field-border-color-focus: var(--primary-focus);
+
+  --field-border-radius: 0;
+
+  /* transitions */
+  --field-transition: var(--transition-duration) ease;
+  --field-transition-property: border, color, background;
+
+  /* placeholder */
+  --field-placeholder-color: var(--lightgray);
+  --field-placeholder-opacity: .1;
 }
 
-.field {
+.ui.form.field {
   font-weight: var(--field-font-weight);
   text-transform: var(--field-text-transform);
+  text-align: var(--field-text-align);
 
   color: var(--field-color);
   background: var(--field-background);
 
   border-style: var(--field-border-style);
   border-width: var(--field-border-width);
   border-color: var(--field-border-color);
-  border-radius: 0;
+  border-radius: var(--field-border-radius);
+
+  box-shadow: var(--field-box-shadow);
 
-  transition: 0.3s ease;
-  transition-property: border, color, background;
+  transition: var(--field-transition);
+  transition-property: var(--field-transition-property);
+
+  &::placeholder {
+    color: color(
+      var(--field-placeholder-color)
+      alpha(var(--field-placeholder-opacity))
+    )
+  }
 
   &:hover {
     color: var(--field-color-hover);

lib/form/select.css

@@ -1,4 +1,4 @@
-.select.field {
+.ui.form.select {
   display: flex;
   align-items: center;
 

lib/form/sizes.css

@@ -1,70 +1,73 @@
 /* button sizes */
-.field,
-.button {
+.ui.form.field,
+.ui.form.button {
   display: inline-block;
 
-  font-size: 1em;
-
-  margin-top: var(--gutter-tiny);
-  margin-bottom: var(--gutter-tiny);
+  font-size: var(--field-font-size);
 
   padding-left: var(--gutter-small);
   padding-right: var(--gutter-small);
   box-sizing: border-box;
 
   height: var(--field-height);
-  line-height: var(--field-height);
+  line-height: calc(
+    var(--field-height) *
+    var(--field-line-height-sequence)
+  );
 
-  &.tiny {
-    /* font-size: var(--field-font-size-tiny); */
+  min-width: var(--field-min-width);
+  max-width: var(--field-max-width);
 
-    margin-top: var(--gutter-tiny);
-    margin-bottom: var(--gutter-tiny);
+  &.tiny {
+    font-size: var(--field-font-size-tiny);
 
     padding-left: var(--gutter-tiny);
     padding-right: var(--gutter-tiny);
 
     height: var(--field-height-tiny);
-    line-height: var(--field-height-tiny);
+    line-height: calc(
+      var(--field-height-tiny) *
+      var(--field-line-height-sequence)
+    );
   }
 
   &.small {
-    /* font-size: var(--field-font-size-small); */
-
-    margin-top: var(--gutter-small);
-    margin-bottom: var(--gutter-small);
+    font-size: var(--field-font-size-small);
 
     padding-left: var(--gutter-small);
     padding-right: var(--gutter-small);
 
     height: var(--field-height-small);
-    line-height: var(--field-height-small);
+    line-height: calc(
+      var(--field-height-small) *
+      var(--field-line-height-sequence)
+    );
   }
 
   &.big {
-    /* font-size: var(--field-font-size-big); */
-
-    margin-top: var(--gutter-small);
-    margin-bottom: var(--gutter-small);
+    font-size: var(--field-font-size-big);
 
     padding-left: var(--gutter);
     padding-right: var(--gutter);
 
     height: var(--field-height-big);
-    line-height: var(--field-height-big);
+    line-height: calc(
+      var(--field-height-big) *
+      var(--field-line-height-sequence)
+    );
   }
 
   &.large {
-    /* font-size: var(--field-font-size-large); */
-
-    margin-top: var(--gutter);
-    margin-bottom: var(--gutter);
+    font-size: var(--field-font-size-large);
 
     padding-left: var(--gutter-big);
     padding-right: var(--gutter-big);
 
     height: var(--field-height-large);
-    line-height: var(--field-height-large);
+    line-height: calc(
+      var(--field-height-large) *
+      var(--field-line-height-sequence)
+    );
   }
 
   &.wide {

lib/form/states.css

@@ -1,3 +1,3 @@
-.field:focus:invalid {
+.ui.form.field:focus:invalid {
   border-color: var(--error);
 }

lib/form/textarea.css

@@ -1,6 +1,11 @@
-.flexible.field {
+:root {
+  --textarea-min-height: 18rem;
+  --textarea-min-width: 56rem;
+}
+
+.ui.flexible.form.field {
   height: auto;
-  line-height: normal;
+  line-height: var(--document-line-height);
 
   padding: var(--gutter-small);
 
@@ -17,7 +22,8 @@
   }
 }
 
-textarea.flexible.field {
-  min-height: 18rem;
-  line-height: normal;
+textarea.ui.flexible.form.field {
+  min-height: var(--textarea-min-height);
+  min-width: var(--textarea-min-width);
+  line-height: var(--document-line-height);
 }

lib/index.css

@@ -1,2 +1,5 @@
 /* form */
-@import "./form/index.css";
+@import "./form/index.css";
+
+/* label */
+@import "./label.css";

lib/label.css

@@ -0,0 +1,18 @@
+:root {
+  --label-color: var(--midgray);
+  --label-background: var(--whitegray);
+  --label-border-radius: 3px;
+  --label-padding: .35em;
+}
+
+.form.label {
+  display: inline-block;
+  color: var(--label-color);
+  background: var(--label-background);
+  border-radius: var(--label-border-radius);
+  vertical-align: 0;
+  font-size: .9em;
+  margin: 0 .15em;
+  padding: var(--label-padding);
+  line-height: 1;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nikoloza/scratch-ui",
-  "version": "0.4.0",
+  "version": "0.4.3",
   "description": "",
   "main": "lib/index.css",
   "scripts": {