refactor: Button & Input sizes placeholder

cozy · Nov 28, 2018 · 67283c9 · 67283c9
1 parent 92389dd
commit 67283c9
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 18 deletions.
diff --git a/.stylintrc b/.stylintrc
@@ -23,10 +23,7 @@
   "cssLiteral": "never",
   "customProperties": [],
   "depthLimit": 4,
-  "duplicates": {
-    "expect": true,
-    "error": true
-  },
+  "duplicates": false,
   "efficient": {
     "expect": "always",
     "error": true

diff --git a/stylus/components/button.styl b/stylus/components/button.styl
@@ -289,21 +289,27 @@ $button-client-mobile
 /*------------------------------------*\
   Sizes
 \*------------------------------------*/
-$button--tiny
+button--tiny =
     min-height rem(24)
     min-width rem(80)
     padding rem(2 16)
+$button--tiny
+    {button--tiny}
 
-$button--small
+button--small =
     min-height rem(32)
     min-width rem(96)
     padding rem(3 8)
+$button--small
+    {button--small}
 
-$button--large
+button--large =
     min-height rem(48)
     min-width rem(160)
     padding rem(8 24)
     font-size rem(16)
+$button--large
+    {button--large}
 
 /*------------------------------------*\
   Extensions

diff --git a/stylus/components/forms.styl b/stylus/components/forms.styl
@@ -267,16 +267,22 @@ $input-text
     &:invalid
         border rem(1) solid pomegranate
 
-$input-text--tiny
+input-text--tiny =
     border-radius rem(2)
     padding rem(4 8 6)
+$input-text--tiny
+    {input-text--tiny}
 
-$input-text--medium
+input-text--medium =
     border-radius rem(2)
     padding rem(8 16 10)
+$input-text--medium
+    {input-text--medium}
 
-$input-text--fullwidth
+input-text--fullwidth =
     max-width 100%
+$input-text--fullwidth
+    {input-text--fullwidth}
 
 $checkbox
     // To make sure that checkbox's wrapper have the height of the checkbox

diff --git a/stylus/components/wizard.styl b/stylus/components/wizard.styl
@@ -2,6 +2,7 @@
 @require '../settings/breakpoints'
 @require '../settings/palette'
 @require '../components/forms'
+@require '../components/button'
 
 // Wizard layout
 $wizard
@@ -108,17 +109,11 @@ $wizard-next
 
 $wizard-button
     +small-screen('min')
-        // Cannot @extend $button--large inside a Media Query :(
-        min-height rem(48)
-        min-width rem(160)
-        padding rem(8 24)
-        font-size rem(16)
+        {button--large}
 
 $wizard-password
     +small-screen()
-        // Cannot @extend $input-text--medium inside a Media Query :(
-        border-radius rem(2)
-        padding rem(8 16 10)
+        {input-text--medium}
 
 $wizard-title
     margin 0 0 rem(8)