diff --git a/dev/custom-fn.js b/dev/custom-fn.js index 4688283..259bc60 100644 --- a/dev/custom-fn.js +++ b/dev/custom-fn.js @@ -10,9 +10,9 @@ module.exports = function() { */ function toggleBackground() { if (this.get()) { - Clay.getItemByAppKey('background').enable(); + Clay.getItemByAppKey('colorTest').enable(); } else { - Clay.getItemByAppKey('background').disable(); + Clay.getItemByAppKey('colorTest').disable(); } } diff --git a/gulpfile.js b/gulpfile.js index a65f2a8..5cad718 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -103,6 +103,7 @@ gulp.task('dev-js', ['js', 'sass'], function() { .transform(stringify(stringifyOptions)) .transform('deamdify') .transform(sassify, sassifyOptions) + .transform(autoprefixify, autoprefixerOptions) .bundle() .pipe(source('dev.js')) .pipe(gulp.dest('./tmp/')); diff --git a/src/scripts/components/select.js b/src/scripts/components/select.js index 7cfd71e..919387a 100644 --- a/src/scripts/components/select.js +++ b/src/scripts/components/select.js @@ -15,8 +15,10 @@ module.exports = { var $value = self.$element.select('.value'); - self.on('change', function(ev) { - var value = self.$manipulatorTarget.select('option:checked').get('innerHTML'); + self.on('change', function() { + var selectedIndex = self.$manipulatorTarget.get('selectedIndex'); + var $options = self.$manipulatorTarget.select('option'); + var value = $options[selectedIndex] && $options[selectedIndex].innerHTML; $value.set('innerHTML', value); }); } diff --git a/src/scripts/components/submit.js b/src/scripts/components/submit.js index 23ef4df..18c684c 100644 --- a/src/scripts/components/submit.js +++ b/src/scripts/components/submit.js @@ -3,6 +3,7 @@ module.exports = { name: 'submit', template: require('../../templates/components/submit.tpl'), + style: require('../../styles/clay/components/submit.scss'), manipulator: 'html', defaults: { attributes: {} diff --git a/src/styles/clay/_base.scss b/src/styles/clay/_base.scss index 6a468fa..f39338b 100644 --- a/src/styles/clay/_base.scss +++ b/src/styles/clay/_base.scss @@ -83,9 +83,12 @@ label { } } +.tap-highlight { + @include tap-highlight(); +} + .component { padding-bottom: $item-spacing-v; - @include tap-highlight(); &.disabled { opacity: 0.25; @@ -108,10 +111,10 @@ label { &:last-child, &:first-child { padding-bottom: $item-spacing-v; - - &:after { - display: none; - } + } + + &:last-child:after { + display: none; } &:after { @@ -130,6 +133,10 @@ label { .component-heading:first-child { background: $color-gray-3; border-radius: $border-radius $border-radius 0 0; + + &:after { + display: none; + } } } @@ -160,7 +167,7 @@ a { .input { display: table-cell; } - + .input { text-align: right; } diff --git a/src/styles/clay/components/checkboxgroup.scss b/src/styles/clay/components/checkboxgroup.scss index 88585a7..e6d62f2 100644 --- a/src/styles/clay/components/checkboxgroup.scss +++ b/src/styles/clay/components/checkboxgroup.scss @@ -3,10 +3,8 @@ .component-checkbox { - @include tap-highlight(rgba(0,0,0,0)); display: block; - > .label { display: block; padding-bottom: $item-spacing-v / 2; @@ -16,7 +14,6 @@ label { padding: $item-spacing-v / 2 0; - @include tap-highlight(); } .label { @@ -39,7 +36,7 @@ flex-shrink: 0; } - input:checked ~ i { + input:checked + i { border-color: $color-orange; background: $color-orange; diff --git a/src/styles/clay/components/color.scss b/src/styles/clay/components/color.scss index 2d0d9d9..272b83d 100644 --- a/src/styles/clay/components/color.scss +++ b/src/styles/clay/components/color.scss @@ -7,6 +7,7 @@ height: $base-height; border-radius: $base-height / 2; box-shadow: $box-shadow-small-components; + display: block; } .picker-wrap { diff --git a/src/styles/clay/components/radiogroup.scss b/src/styles/clay/components/radiogroup.scss index 2db5ea3..dc79392 100644 --- a/src/styles/clay/components/radiogroup.scss +++ b/src/styles/clay/components/radiogroup.scss @@ -3,10 +3,8 @@ .component-radio { - @include tap-highlight(rgba(0,0,0,0)); display: block; - > .label { display: block; padding-bottom: $item-spacing-v / 2; @@ -16,7 +14,6 @@ label { padding: $item-spacing-v / 2 0; - @include tap-highlight(); } .label { @@ -39,7 +36,7 @@ flex-shrink: 0; } - input:checked ~ i { + input:checked + i { border-color: $color-orange; &:after { diff --git a/src/styles/clay/components/select.scss b/src/styles/clay/components/select.scss index 1b43d93..ca256b5 100644 --- a/src/styles/clay/components/select.scss +++ b/src/styles/clay/components/select.scss @@ -8,6 +8,7 @@ $triangle-size: 0.85rem; position: relative; padding-right: $triangle-size + 0.25rem; + display: block; &:after { content: ""; diff --git a/src/styles/clay/components/submit.scss b/src/styles/clay/components/submit.scss new file mode 100644 index 0000000..74b11f4 --- /dev/null +++ b/src/styles/clay/components/submit.scss @@ -0,0 +1,3 @@ +.component-submit { + text-align: center; +} diff --git a/src/styles/clay/elements/_button.scss b/src/styles/clay/elements/_button.scss index 8912034..6ece43c 100644 --- a/src/styles/clay/elements/_button.scss +++ b/src/styles/clay/elements/_button.scss @@ -9,7 +9,7 @@ button, font-size: 1rem; line-height: 1; border: none; - display: block; + display: inline-block; color: $color-white; min-width: 12rem; diff --git a/src/templates/components/checkboxgroup.tpl b/src/templates/components/checkboxgroup.tpl index 203e2d2..f97d9d0 100755 --- a/src/templates/components/checkboxgroup.tpl +++ b/src/templates/components/checkboxgroup.tpl @@ -2,7 +2,7 @@ {{{label}}}
{{each options}} -