Merge pull request #16 from Spectrum/issue/SDL-69_checkbox_height

SDL-69 - Checkbox should be 32px height
topcoat · Dec 17, 2016 · fe2fe1b · fe2fe1b
2 parents 6dcb4ac + 12b7596
commit fe2fe1b
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 25 deletions.
diff --git a/abstract/checkbox/index.styl b/abstract/checkbox/index.styl
@@ -1,11 +1,17 @@
-$spectrum-checkbox-size = 12*$px
-$spectrum-checkbox-radius = 2*$px
+@require '../commons'
+
+$spectrum-checkbox-height = $spectrum-component-single-line-height
+
+$spectrum-checkbox-checkmark-box-size = 12*$px
+$spectrum-checkbox-checkmark-mark-size = 10*$px
+$spectrum-checkbox-checkmark-box-border-radius = 2*$px
 
 spectrum-checkbox() {
   display: inline-block
   position: relative
-  padding: 7*$px 0
   font-size: 0
+  height: $spectrum-checkbox-height
+  line-height: $spectrum-checkbox-height
 }
 
 spectrum-checkbox-input() {
@@ -29,24 +35,23 @@ spectrum-checkbox-label() {
 spectrum-checkbox-checkmark() {
   display: inline-block
   box-sizing: border-box
-  width: $spectrum-checkbox-size
-  height: $spectrum-checkbox-size
+  width: $spectrum-checkbox-checkmark-box-size
+  height: $spectrum-checkbox-checkmark-box-size
 
-  border-radius: $spectrum-checkbox-radius
+  border-radius: $spectrum-checkbox-checkmark-box-border-radius
   border-width: 2*$px
   border-style: solid
 
   vertical-align: middle
 
   transition: border $spectrum-transition-time ease-in-out, box-shadow $spectrum-transition-time ease-in-out
 
-  &:after {
+  &::after {
     position: absolute
-    // i guess this value depends on the line-height of the input element ?!
-    top: 14*$px
+    top: ($spectrum-checkbox-height / 2 - $spectrum-checkbox-checkmark-mark-size / 2 )
     left: 1*$px
-    width: 10*$px
-    height: 10*$px
+    width: $spectrum-checkbox-checkmark-mark-size
+    height: $spectrum-checkbox-checkmark-mark-size
 
     background-repeat: no-repeat
     background-position: center
@@ -63,7 +68,7 @@ spectrum-checkbox-checkmark() {
 spectrum-checkbox-checkmark--checked() {
   border-width: 6*$px
 
-  &:after {
+  &::after {
     transform:scale(1)
     opacity:1
   }

diff --git a/abstract/checkbox/skin.styl b/abstract/checkbox/skin.styl
@@ -3,7 +3,7 @@ $spectrum-checkbox-check-icon-url = 'embed/Check.svg' // Relative to project roo
 spectrum-checkbox-checkmark() {
   border-color: $spectrum-color-border-switch-default;
 
-  &:after {
+  &::after {
     background-image: svgurl(embedurl($spectrum-checkbox-check-icon-url)) svg(path fill $spectrum-color-switch-track);
   }
 }

diff --git a/abstract/textfield/index.styl b/abstract/textfield/index.styl
@@ -69,14 +69,6 @@ spectrum-textfield() {
   }
 }
 
-
-// to be used for textarea
-spectrum-textfield--multiline() {
-  height: auto;
-  padding: 4*$px 8*$px;
-  text-indent: 0;
-}
-
 spectrum-textfield--quiet() {
   border-radius: 0;
   text-indent: 0;
@@ -89,3 +81,15 @@ spectrum-textfield--quiet() {
   padding-right: 0;
 
 }
+
+// to be used for textarea
+spectrum-textfield--multiline() {
+  height: auto;
+  padding: 4*$px 8*$px;
+  text-indent: 0;
+}
+
+spectrum-textfield--quiet--multiline() {
+  resize: none;
+  overflow-y: hidden;
+}
diff --git a/reference/page/skin.styl b/reference/page/skin.styl
@@ -1,3 +1,4 @@
+// colors
 & {
   spectrum-page()
 }
diff --git a/reference/radio/skin.styl b/reference/radio/skin.styl
@@ -19,7 +19,6 @@
 }
 
 .spectrum-Radio {
-  spectrum-radio()
 
   .spectrum-Radio-label {
     spectrum-radio-label()

diff --git a/reference/textfield/index.styl b/reference/textfield/index.styl
@@ -6,12 +6,16 @@
   spectrum-textfield()
 }
 
+.spectrum-Textfield--quiet {
+  spectrum-textfield--quiet()
+}
+
 .spectrum-Textfield--multiline {
   spectrum-textfield--multiline()
 }
 
-.spectrum-Textfield--quiet {
-  spectrum-textfield--quiet()
+.spectrum-Textfield--quiet + spectrum-Textfield--multiline {
+  spectrum-textfield--quiet--multiline()
 }
 
 @import 'light.styl'

diff --git a/reference/textfield/skin.styl b/reference/textfield/skin.styl
@@ -28,7 +28,6 @@
   &:invalid {
     spectrum-textfield--invalid()
   }
-
 }
 
 .spectrum-Textfield--quiet {