From e6c4858e142f5abb8c2e87985637947f658259b5 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Thu, 1 Aug 2019 14:03:49 -0700 Subject: [PATCH 1/2] Add focus outline back to default buttons but remove it from main nav menu buttons; remove margin bottom on h2 button on CTA; remove non-prefixed "appearance: none" since it's non valid --- core/dist/css/decanter.css | 12 +++--------- core/src/scss/components/main-nav/_main-nav.scss | 1 + .../scss/components/site-search/_site-search.scss | 5 ----- core/src/scss/elements/input/_input.scss | 6 ++---- .../utilities/placeholders/components/_button.scss | 1 - .../scss/utilities/placeholders/components/_cta.scss | 1 + 6 files changed, 7 insertions(+), 19 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index 00802a628..94ec2977d 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -328,7 +328,6 @@ button, font-size: 2rem; font-weight: 400; line-height: 1; - outline: none; text-align: center; text-decoration: none; width: 100%; @@ -490,6 +489,7 @@ button, color: #ffffff; font-size: 1.5625em; padding: 1.5rem 3rem 1.8rem; + margin-bottom: 0; font-weight: 400; } .su-cta .su-cta__button:hover, .su-cta .su-cta__button:focus { background-color: #2e2d29; @@ -2658,9 +2658,8 @@ img { input, textarea, select { + -moz-appearance: none; -webkit-appearance: none; - -moz-appearance: none; - appearance: none; border: 0.1rem solid #b6b1a9; border-radius: 0; -webkit-box-sizing: border-box; @@ -2690,9 +2689,6 @@ textarea { height: 16rem; } select { - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; background-color: #ffffff; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBQjI0N0NGOUI5MTAxMUU3OEVBNEUxQ0FENUM5MDU5QiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBQjI0N0NGQUI5MTAxMUU3OEVBNEUxQ0FENUM5MDU5QiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkFCMjQ3Q0Y3QjkxMDExRTc4RUE0RTFDQUQ1QzkwNTlCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkFCMjQ3Q0Y4QjkxMDExRTc4RUE0RTFDQUQ1QzkwNTlCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+eZN+4QAAAPlJREFUeNrs1r8JwkAUx/FEtLCyuiEsbF3ABeyyQcoMYpdVrJIiA2jrAA7gAGJ1vid3EA7vz3vJI80d/CBK4PshKKTUWhdLnjIDMmBpwPq62dnrI+wBews3t7AD7I4fVubLFnYzU4JxNeq0vycAu8AacwPKBtgJ9hKID6ZRmOYHn0Dl3GgRSjBuT4WAGiWCCF8cmzUCethZCBGKY7O3P8JOABGLd+N/wdyIpLgLmAuRHP8HmIogxX0ALoIcDwGoCFY8BkhFsOMpgBQEO54KiCHYcQoghGDHqYAYghznAHwIVpwLcBHsuH0hKSYg9ub6md+KMyADuOcrwAAw8IUnCx64iQAAAABJRU5ErkJggg==); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuNCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjQjEwNDBFIiBkPSJNNTA2Ljg4NCwxMzcuNDg0bC0yNS42NDktMjUuNjQzYy0zLjQxOC0zLjQyNS03LjM1NC01LjEzMi0xMS44MDYtNS4xMzJjLTQuNDM4LDAtOC4zNzQsMS43MDctMTEuNzkzLDUuMTMyCglMMjU2LjAwMSwzMTMuNDU4TDU0LjM4MSwxMTEuODQxYy0zLjQxOS0zLjQyMy03LjM1NS01LjEzLTExLjgwMS01LjEzYy00LjQ0NywwLTguMzgyLDEuNzA3LTExLjgsNS4xMzJMNS4xMzIsMTM3LjQ5NQoJQzEuNzA3LDE0MC45MTEsMCwxNDQuODQ2LDAsMTQ5LjI5M2MwLDQuNDQ0LDEuNzEyLDguMzc5LDUuMTMyLDExLjc5N2wyMzkuMDcyLDIzOS4wNzZjMy40MTQsMy40MTksNy4zNTMsNS4xMjgsMTEuNzk5LDUuMTI4CgljNC40NDUsMCw4LjM3NC0xLjcwNywxMS43OTEtNS4xMjhsMjM5LjA5LTIzOS4wNzZjMy40MTgtMy40Miw1LjExNi03LjM1NSw1LjExNi0xMS43OTdjMC00LjQ0OC0xLjctOC4zODMtNS4xMTctMTEuODA2CglMNTA2Ljg4NCwxMzcuNDg0eiIvPgo8L3N2Zz4K); @@ -9493,6 +9489,7 @@ a { -webkit-box-align: center; -ms-flex-align: center; align-items: center; + outline: none; width: 40px; background-color: transparent; color: #2e2d29; @@ -9857,9 +9854,6 @@ a { .su-site-search__submit:active, .su-site-search__submit:focus { -webkit-box-shadow: none; box-shadow: none; } - .su-site-search__submit:focus { - outline: #aaa solid 3px; - outline: -webkit-focus-ring-color auto 5px; } .su-skiplinks { padding: 0; diff --git a/core/src/scss/components/main-nav/_main-nav.scss b/core/src/scss/components/main-nav/_main-nav.scss index 0450c99e7..ff9818cab 100644 --- a/core/src/scss/components/main-nav/_main-nav.scss +++ b/core/src/scss/components/main-nav/_main-nav.scss @@ -277,6 +277,7 @@ display: flex; flex-direction: column-reverse; align-items: center; + outline: none; width: 40px; background-color: transparent; color: color(h-link, $nav-colors); diff --git a/core/src/scss/components/site-search/_site-search.scss b/core/src/scss/components/site-search/_site-search.scss index ae610d965..50cf0e0fc 100644 --- a/core/src/scss/components/site-search/_site-search.scss +++ b/core/src/scss/components/site-search/_site-search.scss @@ -56,9 +56,4 @@ &:focus { box-shadow: none; } - - &:focus { - outline: #aaa solid 3px; - outline: -webkit-focus-ring-color auto 5px; - } } diff --git a/core/src/scss/elements/input/_input.scss b/core/src/scss/elements/input/_input.scss index ec445e38f..6aaf3a7de 100644 --- a/core/src/scss/elements/input/_input.scss +++ b/core/src/scss/elements/input/_input.scss @@ -8,7 +8,8 @@ input, textarea, select { - appearance: none; + -moz-appearance: none; + -webkit-appearance: none; border: $input-border-width solid $color-driftwood; border-radius: 0; box-sizing: border-box; @@ -41,9 +42,6 @@ textarea { } select { - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; background-color: $color-white; background: url("#{$image-path}/arrow-down.png"); background-image: url("#{$image-path}/arrow-down.svg"); diff --git a/core/src/scss/utilities/placeholders/components/_button.scss b/core/src/scss/utilities/placeholders/components/_button.scss index a7b2bb328..37558f18c 100644 --- a/core/src/scss/utilities/placeholders/components/_button.scss +++ b/core/src/scss/utilities/placeholders/components/_button.scss @@ -16,7 +16,6 @@ font-size: $base-font-size; font-weight: $font-regular; line-height: 1; - outline: none; text-align: center; text-decoration: none; width: 100%; diff --git a/core/src/scss/utilities/placeholders/components/_cta.scss b/core/src/scss/utilities/placeholders/components/_cta.scss index d0907831f..fb4683757 100644 --- a/core/src/scss/utilities/placeholders/components/_cta.scss +++ b/core/src/scss/utilities/placeholders/components/_cta.scss @@ -22,6 +22,7 @@ .su-cta__button { @include button-big; + @include margin(null null 0); @include grid-media('xs') { width: 100%; z-index: 100; From 2e269571f874d6f6186a6c27e89412ebcd4dff01 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Thu, 1 Aug 2019 15:09:33 -0700 Subject: [PATCH 2/2] Remove appearance property from input and button-base --- core/dist/css/decanter.css | 5 ----- core/src/scss/elements/input/_input.scss | 2 -- core/src/scss/utilities/placeholders/components/_button.scss | 1 - 3 files changed, 8 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index 94ec2977d..928d97151 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -319,9 +319,6 @@ button, -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; cursor: pointer; display: inline-block; border: 0; @@ -2658,8 +2655,6 @@ img { input, textarea, select { - -moz-appearance: none; - -webkit-appearance: none; border: 0.1rem solid #b6b1a9; border-radius: 0; -webkit-box-sizing: border-box; diff --git a/core/src/scss/elements/input/_input.scss b/core/src/scss/elements/input/_input.scss index 6aaf3a7de..ace755fe4 100644 --- a/core/src/scss/elements/input/_input.scss +++ b/core/src/scss/elements/input/_input.scss @@ -8,8 +8,6 @@ input, textarea, select { - -moz-appearance: none; - -webkit-appearance: none; border: $input-border-width solid $color-driftwood; border-radius: 0; box-sizing: border-box; diff --git a/core/src/scss/utilities/placeholders/components/_button.scss b/core/src/scss/utilities/placeholders/components/_button.scss index 37558f18c..e9203baf7 100644 --- a/core/src/scss/utilities/placeholders/components/_button.scss +++ b/core/src/scss/utilities/placeholders/components/_button.scss @@ -9,7 +9,6 @@ %button-base { @include font-smoothing; @include sans; - appearance: none; cursor: pointer; display: inline-block; border: 0;