fix - Change on button, card and forms Stylus

Author: sebastienrousseau

src/components/button.styl

@@ -8,15 +8,18 @@ button, .button, [type=submit]
   border:0
   color: var(--button-color)
   cursor: pointer
+  display inline-block
   font-size: golden-font-size-base rem
-  padding: (5 * golden-ratio)px (10 * golden-ratio)px
+  margin-bottom: golden-ratio rem
+  padding: golden-ratio rem
   text-align: center
   text-decoration: none
   text-transform: uppercase
   transition: all 150ms linear
   user-select: none
   vertical-align: middle
-  white-space: nowrap
+  white-space nowrap
+      min-width: 27rem
   &:link, &:visited
     background: var(--background-color-700)
     color: var(--button-color)

src/components/card.styl

@@ -1,10 +1,8 @@
 /* @group Cards */
 .card
 	background transparent
-	display flex
-	flex-direction column
+  background: 0 0;
 	margin-bottom golden-ratio rem
-	min-width 0
 	position relative
   border 1px solid var(--border-color-300)
 	a
@@ -13,7 +11,7 @@
 		&:hover
 			text-decoration none
 .card-content
-	padding golden-ratio rem
+	padding 0.01em golden-ratio rem
 .card-body
 	flex 1 1 auto
 	padding golden-ratio rem golden-ratio rem
@@ -35,21 +33,21 @@
 	img
 		margin-bottom 0
 .card.primary
-  background #c6cdff
-  border .0625rem solid #c6cdff
+  background var(--color-bg-primary)
+  border .0625rem solid var(--color-primary)
 .card.secondary
-  background #a9d2ff
-  border .0625rem solid #a9d2ff
+  background var(--color-bg-secondary)
+  border .0625rem solid var(--color-secondary)
 .card.success
-  background #a5dfa2
-  border .0625rem solid #a5dfa2
+  background var(--color-bg-success)
+  border .0625rem solid var(--color-success)
 .card.info
-  background #a9d2ff
-  border .0625rem solid #a9d2ff
+  background var(--color-bg-info)
+  border .0625rem solid var(--color-info)
 .card.warning
-  background #ffc286
-  border .0625rem solid #ffc286
+  background var(--color-bg-warning)
+  border .0625rem solid var(--color-warning)
 .card.error
-  background #ffc0ad
-  border .0625rem solid #ffc0ad
+  background var(--color-bg-error)
+  border .0625rem solid var(--color-error)
 /* @end */

src/components/form.styl

@@ -1,15 +1,15 @@
 /* @group Input */
 input[type=text], input[type=password], input[type=email], input[type=search], input[type=number], input[type=file], input[type=tel], input[type=url], select, textarea
   background: var(--background-color)
-  border: 1px solid var(--border-color-200)
   border-radius: 2px
+  border: 1px solid var(--border-color-200)
   color: var(--color)
   display: block
   font-family: "Consolas", "Monaco", "Menlo", monospace
   font-size: golden-font-size-large rem
   margin: (golden-ratio)rem  0
   outline: none
-  padding: (golden-ratio)rem
+  padding 1.618rem 0 1.618rem 0.618rem
   transition: all 150ms linear
   width: 100%
 
@@ -19,4 +19,83 @@ input[type=text], input[type=password], input[type=email], input[type=search], i
   &:focus
     border-color: var(--border-color)
     outline: none
+
+.input-primary[type=email],
+    .input-primary[type=file],
+    .input-primary[type=number],
+    .input-primary[type=password],
+    .input-primary[type=search],
+    .input-primary[type=tel],
+    .input-primary[type=text],
+    .input-primary[type=url],
+    select.input-primary,
+    textarea.input-primary
+    border-color var(--color-primary)
+    background var(--color-bg-primary)
+
+.input-secondary[type=email],
+    .input-secondary[type=file],
+    .input-secondary[type=number],
+    .input-secondary[type=password],
+    .input-secondary[type=search],
+    .input-secondary[type=tel],
+    .input-secondary[type=text],
+    .input-secondary[type=url],
+    select.input-secondary,
+    textarea.input-secondary
+    border-color var(--color-secondary)
+    background var(--color-bg-secondary)
+
+
+.input-success[type=email],
+    .input-success[type=file],
+    .input-success[type=number],
+    .input-success[type=password],
+    .input-success[type=search],
+    .input-success[type=tel],
+    .input-success[type=text],
+    .input-success[type=url],
+    select.input-success,
+    textarea.input-success
+    border-color var(--color-success)
+    background var(--color-bg-success)
+
+.input-info[type=email],
+    .input-info[type=file],
+    .input-info[type=number],
+    .input-info[type=password],
+    .input-info[type=search],
+    .input-info[type=tel],
+    .input-info[type=text],
+    .input-info[type=url],
+    select.input-info,
+    textarea.input-info
+    border-color var(--color-info)
+    background var(--color-bg-info)
+
+.input-warning[type=email],
+    .input-warning[type=file],
+    .input-warning[type=number],
+    .input-warning[type=password],
+    .input-warning[type=search],
+    .input-warning[type=tel],
+    .input-warning[type=text],
+    .input-warning[type=url],
+    select.input-warning,
+    textarea.input-warning
+    border-color var(--color-warning)
+    background var(--color-bg-warning)
+
+.input-error[type=email],
+    .input-error[type=file],
+    .input-error[type=number],
+    .input-error[type=password],
+    .input-error[type=search],
+    .input-error[type=tel],
+    .input-error[type=text],
+    .input-error[type=url],
+    select.input-error,
+    textarea.input-error
+    border-color var(--color-error)
+    background var(--color-bg-error)
 /* @end */