diff --git a/dev/config.js b/dev/config.js index 60e1550..92a92c4 100644 --- a/dev/config.js +++ b/dev/config.js @@ -97,15 +97,6 @@ module.exports = [ "description": "Some arbitrary text explaining how this all works. " + "It's cool if this wraps across multiple lines" }, - { - "type": "input", - "appKey": "date", - "defaultValue": "", - "label": "Range", - "attributes": { - type: "range" - } - }, { "type": "select", "appKey": "flavor", diff --git a/src/styles/clay/_base.scss b/src/styles/clay/_base.scss index b6fda6c..d2dc3e0 100644 --- a/src/styles/clay/_base.scss +++ b/src/styles/clay/_base.scss @@ -54,6 +54,7 @@ label { display: flex; justify-content: space-between; align-items: center; + padding: $item-spacing-v $item-spacing-h; .input { white-space: nowrap; @@ -103,15 +104,13 @@ label { box-shadow: $color-gray-1 0 0.15rem 0.25rem; .component { - padding-top: $item-spacing-v; - padding-right: $item-spacing-h; - padding-left: $item-spacing-h; position: relative; + padding: $item-spacing-v $item-spacing-h; - &:last-child, - &:first-child { - padding-bottom: $item-spacing-v; - } + //&:last-child, + //&:first-child { + // padding-bottom: $item-spacing-v; + //} &:last-child:after { display: none; @@ -155,7 +154,7 @@ a { } .description { - padding-top: $item-spacing-v; + padding: 0 $item-spacing-h $item-spacing-v ; @include font-size(0.9); color: $color-gray-9; } diff --git a/src/styles/clay/components/checkboxgroup.scss b/src/styles/clay/components/checkboxgroup.scss index e6d62f2..651a470 100644 --- a/src/styles/clay/components/checkboxgroup.scss +++ b/src/styles/clay/components/checkboxgroup.scss @@ -5,6 +5,10 @@ display: block; + .section & { + padding-right: $item-spacing-h / 2; + } + > .label { display: block; padding-bottom: $item-spacing-v / 2; @@ -12,13 +16,14 @@ .checkbox-group { + padding-bottom: $item-spacing-v / 2; + label { - padding: $item-spacing-v / 2 0; + padding: $item-spacing-v / 2 $item-spacing-h / 2; } .label { font-size: 0.9em; - padding: 0 $item-spacing-h / 2; } input { @@ -56,6 +61,10 @@ } } + } + .description { + padding-left: 0; + padding-right: 0; } } diff --git a/src/styles/clay/components/color.scss b/src/styles/clay/components/color.scss index 272b83d..a6c2752 100644 --- a/src/styles/clay/components/color.scss +++ b/src/styles/clay/components/color.scss @@ -2,6 +2,10 @@ .component-color { + .section & { + padding: 0; + } + .value { width: $small-component-width; height: $base-height; diff --git a/src/styles/clay/components/input.scss b/src/styles/clay/components/input.scss index af9066e..593683e 100644 --- a/src/styles/clay/components/input.scss +++ b/src/styles/clay/components/input.scss @@ -2,7 +2,13 @@ .component-input { - display: block; + .section & { + padding: 0; + } + + label { + display: block; + } .label { padding-bottom: $item-spacing-v; diff --git a/src/styles/clay/components/radiogroup.scss b/src/styles/clay/components/radiogroup.scss index dc79392..a1578e0 100644 --- a/src/styles/clay/components/radiogroup.scss +++ b/src/styles/clay/components/radiogroup.scss @@ -5,6 +5,10 @@ display: block; + .section & { + padding-right: $item-spacing-h / 2; + } + > .label { display: block; padding-bottom: $item-spacing-v / 2; @@ -12,13 +16,14 @@ .radio-group { + padding-bottom: $item-spacing-v / 2; + label { - padding: $item-spacing-v / 2 0; + padding: $item-spacing-v / 2 $item-spacing-h / 2; } .label { font-size: 0.9em; - padding: 0 $item-spacing-h / 2; } input { @@ -55,4 +60,9 @@ } } + + .description { + padding-left: 0; + padding-right: 0; + } } diff --git a/src/styles/clay/components/select.scss b/src/styles/clay/components/select.scss index 17ec915..2e48ad9 100644 --- a/src/styles/clay/components/select.scss +++ b/src/styles/clay/components/select.scss @@ -3,6 +3,10 @@ .component-select { + .section & { + padding: 0; + } + label { position: relative; } @@ -19,7 +23,7 @@ right: 0; top: 50%; margin-top: -0.1rem; - @include triangle($triangle-size, $color-gray-10, down); + @include triangle($triangle-size, $color-orange, down); } } diff --git a/src/styles/clay/components/toggle.scss b/src/styles/clay/components/toggle.scss index 6f92f7a..92c9e68 100644 --- a/src/styles/clay/components/toggle.scss +++ b/src/styles/clay/components/toggle.scss @@ -6,6 +6,10 @@ $slide-width: $small-component-width; $marker-diameter: $base-height; + .section & { + padding: 0; + } + input { display: none; // @todo make sure this doesn't mess up interactivity on iOS } diff --git a/src/templates/components/color.tpl b/src/templates/components/color.tpl index 3ab0713..043b3be 100755 --- a/src/templates/components/color.tpl +++ b/src/templates/components/color.tpl @@ -1,5 +1,5 @@ -
-