From 6fffc1a72e3619470f7c7bdba584b736ee445b46 Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Tue, 17 Jul 2018 14:03:46 -0700 Subject: [PATCH 1/2] remove hard-coding of font family for buttons and rm top margin from h1 --- css/decanter-grid.css | 4 +- css/decanter-no-markup.css | 2 +- css/decanter.css | 89 ++++++++----------- scss/components/atoms/_buttons.scss | 14 +-- .../utilities/mixins/buttons/_button-big.scss | 1 - .../mixins/buttons/_button-primary.scss | 1 - .../mixins/buttons/_button-secondary.scss | 1 - scss/utilities/mixins/typography/_h1.scss | 4 + 8 files changed, 53 insertions(+), 63 deletions(-) diff --git a/css/decanter-grid.css b/css/decanter-grid.css index e9eef337d..924ea218b 100644 --- a/css/decanter-grid.css +++ b/css/decanter-grid.css @@ -11,8 +11,7 @@ body { overflow-x: hidden; } .lt-ie9 * { - -webkit-filter: none !important; - filter: none !important; } + filter: none !important; } [hidden] { display: none !important; } @@ -267,4 +266,5 @@ body { .decanter-offset-eleven-twelfths { margin-left: 93.8278476881%; } + /*# sourceMappingURL=decanter-grid.css.map */ \ No newline at end of file diff --git a/css/decanter-no-markup.css b/css/decanter-no-markup.css index 8b9a04750..810aa60b0 100644 --- a/css/decanter-no-markup.css +++ b/css/decanter-no-markup.css @@ -1,2 +1,2 @@ -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJkZWNhbnRlci1uby1tYXJrdXAuY3NzIn0= */ \ No newline at end of file +/*# sourceMappingURL=decanter-no-markup.css.map */ \ No newline at end of file diff --git a/css/decanter.css b/css/decanter.css index 521391c52..9c2ca3ba2 100644 --- a/css/decanter.css +++ b/css/decanter.css @@ -74,8 +74,7 @@ abbr[title] { /* 1 */ text-decoration: underline; /* 2 */ - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; + text-decoration: underline dotted; /* 2 */ } /** @@ -652,8 +651,7 @@ body { overflow-x: hidden; } .lt-ie9 * { - -webkit-filter: none !important; - filter: none !important; } + filter: none !important; } [hidden] { display: none !important; } @@ -680,9 +678,7 @@ body { input, textarea, select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + appearance: none; border: 0.1rem solid #b6b1a9; border-radius: 0; box-sizing: border-box; @@ -1050,6 +1046,8 @@ h6 { h1 { font-size: 4.3rem; font-weight: 600; } + h1:first-child { + margin-top: 0; } h2 { font-size: 3.3rem; @@ -1115,7 +1113,9 @@ dfn { @media screen and (min-width: 481px) { .decanter-font-splash { font-size: 4.3rem; - font-weight: 600; } } + font-weight: 600; } + .decanter-font-splash:first-child { + margin-top: 0; } } @media screen and (min-width: 600px) { .decanter-font-splash { font-size: 5.5rem; @@ -1189,8 +1189,8 @@ dfn { .decanter-width-one-twelfth > :last-child { margin-bottom: 0; } } -.decanter-button, a.decanter-button, +.decanter-button a, button, [type=button], [type=submit], @@ -1202,15 +1202,12 @@ button, margin-right: 0.5em; margin-bottom: 0.5em; padding: 1rem 2rem; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + appearance: none; background-color: #b1040e; border: 0; color: #ffffff; cursor: pointer; display: inline-block; - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 2rem; font-weight: 600; line-height: 1; @@ -1219,16 +1216,16 @@ button, text-decoration: none; width: 100%; } @media screen and (min-width: 481px) { - .decanter-button, a.decanter-button, + .decanter-button a, button, [type=button], [type=submit], [type=reset], [type=image] { width: auto; } } - .decanter-button:hover, a.decanter-button:hover, + .decanter-button a:hover, button:hover, [type=button]:hover, [type=submit]:hover, @@ -1238,8 +1235,8 @@ button, border-bottom: 0; color: #ffffff; text-decoration: none; } - .decanter-button:focus, a.decanter-button:focus, + .decanter-button a:focus, button:focus, [type=button]:focus, [type=submit]:focus, @@ -1248,24 +1245,21 @@ button, background-color: #2e2d29; box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } -.decanter-button--secondary, -a.decanter-button--secondary { +a.decanter-button--secondary, +.decanter-button--secondary a { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; margin-top: 0.5em; margin-right: 0.5em; margin-bottom: 0.5em; padding: 1rem 2rem; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + appearance: none; background-color: #ffffff; border: 0; box-shadow: inset 0 0 0 2px #b1040e; color: #b1040e; cursor: pointer; display: inline-block; - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 2rem; font-weight: 600; line-height: 1; @@ -1274,39 +1268,36 @@ a.decanter-button--secondary { text-decoration: none; width: 100%; } @media screen and (min-width: 481px) { - .decanter-button--secondary, - a.decanter-button--secondary { + a.decanter-button--secondary, + .decanter-button--secondary a { width: auto; } } - .decanter-button--secondary:hover, - a.decanter-button--secondary:hover { + a.decanter-button--secondary:hover, + .decanter-button--secondary a:hover { background-color: #ffffff; border-bottom: 0; box-shadow: inset 0 0 0 2px #2e2d29; color: #2e2d29; text-decoration: none; } - .decanter-button--secondary:focus, - a.decanter-button--secondary:focus { + a.decanter-button--secondary:focus, + .decanter-button--secondary a:focus { background-color: #ffffff; box-shadow: inset 0 0 0 2px #2e2d29, 0 0 3px #4d4f53, 0 0 7px #4d4f53; color: #2e2d29; } -.decanter-button--big, -a.decanter-button--big { +a.decanter-button--big, +.decanter-button--big a { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; margin-top: 0.5em; margin-right: 0.5em; margin-bottom: 0.5em; padding: 1.5rem 3rem; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + appearance: none; background-color: #b1040e; border: 0; color: #ffffff; cursor: pointer; display: inline-block; - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 2.3rem; font-weight: 600; line-height: 1; @@ -1315,22 +1306,22 @@ a.decanter-button--big { text-decoration: none; width: 100%; } @media screen and (min-width: 481px) { - .decanter-button--big, - a.decanter-button--big { + a.decanter-button--big, + .decanter-button--big a { width: auto; } } - .decanter-button--big:hover, - a.decanter-button--big:hover { + a.decanter-button--big:hover, + .decanter-button--big a:hover { background-color: #2e2d29; border-bottom: 0; color: #ffffff; text-decoration: none; } - .decanter-button--big:focus, - a.decanter-button--big:focus { + a.decanter-button--big:focus, + .decanter-button--big a:focus { background-color: #2e2d29; box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } -.decanter-button--unstyled, -a.decanter-button--unstyled { +a.decanter-button--unstyled, +.decanter-button--unstyled a { background-color: transparent; border: 0; font-weight: 400; @@ -1339,8 +1330,8 @@ a.decanter-button--unstyled { -webkit-font-smoothing: auto; margin: 0; padding: 0; } - .decanter-button--unstyled:hover, - a.decanter-button--unstyled:hover { + a.decanter-button--unstyled:hover, + .decanter-button--unstyled a:hover { background-color: transparent; } .decanter-media-block__img { @@ -1478,8 +1469,7 @@ a.decanter-button--unstyled { display: flex; flex-direction: column; overflow-y: auto; - -webkit-transform: translateX(26rem); - transform: translateX(26rem); + transform: translateX(26rem); width: 26rem; z-index: 9000; } @media screen and (min-width: 951px) { @@ -1492,12 +1482,10 @@ a.decanter-button--unstyled { float: right; overflow-y: visible; position: relative; - -webkit-transform: translateX(0); - transform: translateX(0); + transform: translateX(0); width: auto; } } .decanter-nav.is-visible { - -webkit-transform: translateX(0); - transform: translateX(0); + transform: translateX(0); transition: all 0.3s ease-in-out; } .decanter-nav nav { margin-top: 6rem; @@ -1989,4 +1977,5 @@ a.decanter-button--unstyled { border-bottom: 1px solid #b6b1a9; border-left: 1px solid #b6b1a9; border-right: 1px solid #b6b1a9; } + /*# sourceMappingURL=decanter.css.map */ \ No newline at end of file diff --git a/scss/components/atoms/_buttons.scss b/scss/components/atoms/_buttons.scss index 3ef1f47aa..cfba55206 100644 --- a/scss/components/atoms/_buttons.scss +++ b/scss/components/atoms/_buttons.scss @@ -13,8 +13,8 @@ // // Style guide: Atoms.Buttons // -.decanter-button, a.decanter-button, +.decanter-button a, button, [type=button], [type=submit], @@ -23,17 +23,17 @@ button, @include button-primary; } -.decanter-button--secondary, -a.decanter-button--secondary { +a.decanter-button--secondary, +.decanter-button--secondary a { @include button-secondary; } -.decanter-button--big, -a.decanter-button--big { +a.decanter-button--big, +.decanter-button--big a { @include button-big; } -.decanter-button--unstyled, -a.decanter-button--unstyled { +a.decanter-button--unstyled, +.decanter-button--unstyled a { @include button-unstyled; } diff --git a/scss/utilities/mixins/buttons/_button-big.scss b/scss/utilities/mixins/buttons/_button-big.scss index 8307f11c9..66188517d 100644 --- a/scss/utilities/mixins/buttons/_button-big.scss +++ b/scss/utilities/mixins/buttons/_button-big.scss @@ -18,7 +18,6 @@ color: $color-white; cursor: pointer; display: inline-block; - font-family: $font-sans; font-size: $lead-font-size; font-weight: $font-bold; line-height: 1; diff --git a/scss/utilities/mixins/buttons/_button-primary.scss b/scss/utilities/mixins/buttons/_button-primary.scss index f25d98a20..842286915 100644 --- a/scss/utilities/mixins/buttons/_button-primary.scss +++ b/scss/utilities/mixins/buttons/_button-primary.scss @@ -18,7 +18,6 @@ color: $color-white; cursor: pointer; display: inline-block; - font-family: $font-sans; font-size: $base-font-size; font-weight: $font-bold; line-height: 1; diff --git a/scss/utilities/mixins/buttons/_button-secondary.scss b/scss/utilities/mixins/buttons/_button-secondary.scss index 5386692f3..a1925067c 100644 --- a/scss/utilities/mixins/buttons/_button-secondary.scss +++ b/scss/utilities/mixins/buttons/_button-secondary.scss @@ -19,7 +19,6 @@ color: $color-bright-red; cursor: pointer; display: inline-block; - font-family: $font-sans; font-size: $base-font-size; font-weight: $font-bold; line-height: 1; diff --git a/scss/utilities/mixins/typography/_h1.scss b/scss/utilities/mixins/typography/_h1.scss index 54f21e69c..703d5d5da 100644 --- a/scss/utilities/mixins/typography/_h1.scss +++ b/scss/utilities/mixins/typography/_h1.scss @@ -10,4 +10,8 @@ @mixin h1 { font-size: $h1-font-size; font-weight: $font-bold; + + &:first-child { + @include margin(0 null null); + } } From 91b5b8fc27cb290c1ae2a45492601f5455d2cb26 Mon Sep 17 00:00:00 2001 From: Joe Knox Date: Fri, 20 Jul 2018 11:12:49 -0700 Subject: [PATCH 2/2] rm class attachment to specific element --- css/decanter.css | 42 ++++++++++------------------- scss/components/atoms/_buttons.scss | 12 +++------ 2 files changed, 18 insertions(+), 36 deletions(-) diff --git a/css/decanter.css b/css/decanter.css index 9c2ca3ba2..9cc73f595 100644 --- a/css/decanter.css +++ b/css/decanter.css @@ -1189,8 +1189,7 @@ dfn { .decanter-width-one-twelfth > :last-child { margin-bottom: 0; } } -a.decanter-button, -.decanter-button a, +.decanter-button, button, [type=button], [type=submit], @@ -1216,16 +1215,14 @@ button, text-decoration: none; width: 100%; } @media screen and (min-width: 481px) { - a.decanter-button, - .decanter-button a, + .decanter-button, button, [type=button], [type=submit], [type=reset], [type=image] { width: auto; } } - a.decanter-button:hover, - .decanter-button a:hover, + .decanter-button:hover, button:hover, [type=button]:hover, [type=submit]:hover, @@ -1235,8 +1232,7 @@ button, border-bottom: 0; color: #ffffff; text-decoration: none; } - a.decanter-button:focus, - .decanter-button a:focus, + .decanter-button:focus, button:focus, [type=button]:focus, [type=submit]:focus, @@ -1245,8 +1241,7 @@ button, background-color: #2e2d29; box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } -a.decanter-button--secondary, -.decanter-button--secondary a { +.decanter-button--secondary { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; margin-top: 0.5em; @@ -1268,24 +1263,20 @@ a.decanter-button--secondary, text-decoration: none; width: 100%; } @media screen and (min-width: 481px) { - a.decanter-button--secondary, - .decanter-button--secondary a { + .decanter-button--secondary { width: auto; } } - a.decanter-button--secondary:hover, - .decanter-button--secondary a:hover { + .decanter-button--secondary:hover { background-color: #ffffff; border-bottom: 0; box-shadow: inset 0 0 0 2px #2e2d29; color: #2e2d29; text-decoration: none; } - a.decanter-button--secondary:focus, - .decanter-button--secondary a:focus { + .decanter-button--secondary:focus { background-color: #ffffff; box-shadow: inset 0 0 0 2px #2e2d29, 0 0 3px #4d4f53, 0 0 7px #4d4f53; color: #2e2d29; } -a.decanter-button--big, -.decanter-button--big a { +.decanter-button--big { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; margin-top: 0.5em; @@ -1306,22 +1297,18 @@ a.decanter-button--big, text-decoration: none; width: 100%; } @media screen and (min-width: 481px) { - a.decanter-button--big, - .decanter-button--big a { + .decanter-button--big { width: auto; } } - a.decanter-button--big:hover, - .decanter-button--big a:hover { + .decanter-button--big:hover { background-color: #2e2d29; border-bottom: 0; color: #ffffff; text-decoration: none; } - a.decanter-button--big:focus, - .decanter-button--big a:focus { + .decanter-button--big:focus { background-color: #2e2d29; box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } -a.decanter-button--unstyled, -.decanter-button--unstyled a { +.decanter-button--unstyled { background-color: transparent; border: 0; font-weight: 400; @@ -1330,8 +1317,7 @@ a.decanter-button--unstyled, -webkit-font-smoothing: auto; margin: 0; padding: 0; } - a.decanter-button--unstyled:hover, - .decanter-button--unstyled a:hover { + .decanter-button--unstyled:hover { background-color: transparent; } .decanter-media-block__img { diff --git a/scss/components/atoms/_buttons.scss b/scss/components/atoms/_buttons.scss index cfba55206..89af83f84 100644 --- a/scss/components/atoms/_buttons.scss +++ b/scss/components/atoms/_buttons.scss @@ -13,8 +13,7 @@ // // Style guide: Atoms.Buttons // -a.decanter-button, -.decanter-button a, +.decanter-button, button, [type=button], [type=submit], @@ -23,17 +22,14 @@ button, @include button-primary; } -a.decanter-button--secondary, -.decanter-button--secondary a { +.decanter-button--secondary { @include button-secondary; } -a.decanter-button--big, -.decanter-button--big a { +.decanter-button--big { @include button-big; } -a.decanter-button--unstyled, -.decanter-button--unstyled a { +.decanter-button--unstyled { @include button-unstyled; }