From 00d269c00d3dadc0ec565046bb29d171e9eaed66 Mon Sep 17 00:00:00 2001 From: derekshirk Date: Thu, 21 May 2020 15:22:27 -0700 Subject: [PATCH 01/14] WIP --- src/components/button/button.scss | 98 +---------------------- src/mixins/_button.scss | 111 +++++++++++++++++++++++++++ src/vendor/wordpress/_wordpress.scss | 15 ++++ 3 files changed, 130 insertions(+), 94 deletions(-) create mode 100644 src/mixins/_button.scss create mode 100644 src/vendor/wordpress/_wordpress.scss diff --git a/src/components/button/button.scss b/src/components/button/button.scss index f4c3d385a..eee0cc24c 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -1,76 +1,7 @@ -@use "../../design-tokens/colors.yml"; -@use "../../design-tokens/font.yml"; -@use "../../design-tokens/motion.yml"; -@use "../../design-tokens/sizes.yml"; -@use "../../mixins/focus"; -@use "../../mixins/ms"; -@use "../../mixins/unit"; - -/** - * Button object - * - * 1. More overtly actionable cursor appearance. Recently this tweak has come - * with some contention, but our experience has been that the average user - * doesn't differentiate cursor styles between different styles of action. - * 2. Although we will be overtly setting some typographic properties, the - * shorthand is helpful for completely overriding all system font styles as - * a starting point. - * 3. We set a height to coordinate consistently with `c-input`. Unfortunately - * browsers don't consistently size inputs without setting `height`. - */ +@use "../../mixins/button"; .c-button { - background: colors.$primary-brand; - border-color: colors.$primary-brand-dark; - border-radius: sizes.$radius-medium; - border-style: solid; - border-width: sizes.$edge-medium; - color: colors.$text-light-emphasis; - cursor: pointer; /* 1 */ - display: inline-block; - font: inherit; /* 2 */ - font-style: normal; - font-weight: font.$weight-semibold; - height: sizes.$control-height; /* 3 */ - line-height: normal; - padding: sizes.$control-pad-vertical sizes.$control-pad-horizontal; - position: relative; - text-align: center; - text-decoration: none; - transition: filter motion.$speed-slow motion.$ease-out, - transform motion.$speed-quick motion.$ease-out; - user-select: none; - - /** - * Transform, opacity and filter changes are performant and will work across - * many more stylistic modifiers than specific color shifts. - */ - - &:hover { - filter: brightness(motion.$control-brighten); - transform: scale(motion.$control-grow); - } - - &:active { - filter: brightness(motion.$control-dim); - transform: scale(motion.$control-shrink); - } - - &:disabled { - cursor: not-allowed; - filter: grayscale(60%); - opacity: 0.85; - transform: none; - } - - @include focus.focus-visible { - box-shadow: 0 0 0 sizes.$edge-large colors.$primary-brand-lighter; - } - - .t-dark & { - background-color: colors.$primary-brand-dark; - border-color: colors.$primary-brand-darker; - } + @include button.default; } /** @@ -78,18 +9,7 @@ */ .c-button--secondary { - border-color: colors.$primary-brand-light; - color: colors.$primary-brand; - - &, - .t-dark & { - background-color: transparent; - } - - .t-dark & { - border-color: colors.$primary-brand-dark; - color: colors.$text-light-emphasis; - } + @include button.secondary; } /** @@ -97,15 +17,5 @@ */ .c-button--tertiary { - color: colors.$primary-brand; - - &, - .t-dark & { - background-color: transparent; - border-color: transparent; - } - - .t-dark & { - color: colors.$text-light-emphasis; - } + @include button.tertiary; } diff --git a/src/mixins/_button.scss b/src/mixins/_button.scss new file mode 100644 index 000000000..2620eea4a --- /dev/null +++ b/src/mixins/_button.scss @@ -0,0 +1,111 @@ +@use "../design-tokens/colors.yml"; +@use "../design-tokens/font.yml"; +@use "../design-tokens/motion.yml"; +@use "../design-tokens/sizes.yml"; +@use "./focus"; +@use "./ms"; +@use "./unit"; + +/** + * Button object + * + * 1. More overtly actionable cursor appearance. Recently this tweak has come + * with some contention, but our experience has been that the average user + * doesn't differentiate cursor styles between different styles of action. + * 2. Although we will be overtly setting some typographic properties, the + * shorthand is helpful for completely overriding all system font styles as + * a starting point. + * 3. We set a height to coordinate consistently with `c-input`. Unfortunately + * browsers don't consistently size inputs without setting `height`. + */ + +@mixin default { + background: colors.$primary-brand; + border-color: colors.$primary-brand-dark; + border-radius: sizes.$radius-medium; + border-style: solid; + border-width: sizes.$edge-medium; + color: colors.$text-light-emphasis; + cursor: pointer; /* 1 */ + display: inline-block; + font: inherit; /* 2 */ + font-style: normal; + font-weight: font.$weight-semibold; + height: sizes.$control-height; /* 3 */ + line-height: normal; + padding: sizes.$control-pad-vertical sizes.$control-pad-horizontal; + position: relative; + text-align: center; + text-decoration: none; + transition: filter motion.$speed-slow motion.$ease-out, + transform motion.$speed-quick motion.$ease-out; + user-select: none; + + /** + * Transform, opacity and filter changes are performant and will work across + * many more stylistic modifiers than specific color shifts. + */ + + &:hover { + filter: brightness(motion.$control-brighten); + transform: scale(motion.$control-grow); + } + + &:active { + filter: brightness(motion.$control-dim); + transform: scale(motion.$control-shrink); + } + + &:disabled { + cursor: not-allowed; + filter: grayscale(60%); + opacity: 0.85; + transform: none; + } + + @include focus.focus-visible { + box-shadow: 0 0 0 sizes.$edge-large colors.$primary-brand-lighter; + } + + .t-dark & { + background-color: colors.$primary-brand-dark; + border-color: colors.$primary-brand-darker; + } +} + +/** + * Modifier: Secondary + */ + +@mixin secondary { + border-color: colors.$primary-brand-light; + color: colors.$primary-brand; + + &, + .t-dark & { + background-color: transparent; + } + + .t-dark & { + border-color: colors.$primary-brand-dark; + color: colors.$text-light-emphasis; + } +} + +/** + * Modifier: Tertiary + */ + +@mixin tertiary { + color: colors.$primary-brand; + + &, + .t-dark & { + background-color: transparent; + border-color: transparent; + } + + .t-dark & { + color: colors.$text-light-emphasis; + } +} diff --git a/src/vendor/wordpress/_wordpress.scss b/src/vendor/wordpress/_wordpress.scss new file mode 100644 index 000000000..fe08e7376 --- /dev/null +++ b/src/vendor/wordpress/_wordpress.scss @@ -0,0 +1,15 @@ +@use "../../mixins/button"; +@use "../../design-tokens/colors.yml"; + +/** + * Applies our button styles to buttons generated via Gutenberg blocks. + */ + +.wp-block-button { + @include button.default; +} + +.wp-block-button__link { + color: colors.$text-light-emphasis; + text-decoration: none; +} From b55ca6b1c909ffaeaa069a7bf2f00b363179764f Mon Sep 17 00:00:00 2001 From: derekshirk Date: Fri, 22 May 2020 12:50:57 -0700 Subject: [PATCH 02/14] experimenting with options for styling focus --- src/vendor/wordpress/_wordpress.scss | 50 +++++++++++++++++++++- src/vendor/wordpress/gutenberg.stories.mdx | 12 ++++-- 2 files changed, 57 insertions(+), 5 deletions(-) diff --git a/src/vendor/wordpress/_wordpress.scss b/src/vendor/wordpress/_wordpress.scss index fe08e7376..de1c9d0f6 100644 --- a/src/vendor/wordpress/_wordpress.scss +++ b/src/vendor/wordpress/_wordpress.scss @@ -1,15 +1,63 @@ @use "../../mixins/button"; +@use "../../mixins/focus"; @use "../../design-tokens/colors.yml"; +@use "../../design-tokens/sizes.yml"; /** - * Applies our button styles to buttons generated via Gutenberg blocks. + * Gutenberg block: Button + * Applies our pattern library styles to buttons generated via Gutenberg blocks. */ .wp-block-button { @include button.default; + + @include focus.focus-visible { + box-shadow: 0 0 0 sizes.$edge-large colors.$primary-brand-lighter; + } +} + +.wp-block-button.is-style-fill { + /** + * The level specificity of this selector will override inline border + * styles added by the button block editor and prevents unwanted modifications + * to border radius and color. + */ + + & .wp-block-button__link { + background-color: inherit; + border: 0; + color: inherit; + } } +/** + * 1. Removes unwanted padding applied to default Gutenberg block buttons + */ + .wp-block-button__link { + background-color: inherit; color: colors.$text-light-emphasis; + padding: initial; /* 1 */ text-decoration: none; + + &:focus { + box-shadow: 0 0 0 0.25rem #8abfff; + outline: 0; + } +} + +.wp-block-button.is-style-outline { + @include button.secondary; + + /** + * The level specificity of this selector will override inline border + * styles added by the button block editor and prevents unwanted modifications + * to border radius and color. + */ + + & .wp-block-button__link { + background-color: inherit; + border: 0; + color: inherit; + } } diff --git a/src/vendor/wordpress/gutenberg.stories.mdx b/src/vendor/wordpress/gutenberg.stories.mdx index 0180c2483..2da2c5747 100644 --- a/src/vendor/wordpress/gutenberg.stories.mdx +++ b/src/vendor/wordpress/gutenberg.stories.mdx @@ -53,8 +53,7 @@ container. ## Button -The button block adds call-to-action-style links to a post. Container elements provide -layout. +The button block adds call-to-action-style links to a post. When multiple buttons are added the `wp-block-buttons` container controls layout. If chosen, a button can have only an outline (no fill color), which adds the `is-style-outline` class on the `.wp-block-button` element. @@ -65,11 +64,16 @@ and border radius. {`
-
- +
+ Button
+
+ + Another Outlined button + +
`} From 7744ae81ffe7e2e4e0bf8436e7f2e7d162791f01 Mon Sep 17 00:00:00 2001 From: derekshirk Date: Fri, 22 May 2020 13:11:09 -0700 Subject: [PATCH 03/14] removes unused (focus related) @use statements --- src/vendor/wordpress/_wordpress.scss | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/src/vendor/wordpress/_wordpress.scss b/src/vendor/wordpress/_wordpress.scss index de1c9d0f6..fcf3e35f3 100644 --- a/src/vendor/wordpress/_wordpress.scss +++ b/src/vendor/wordpress/_wordpress.scss @@ -1,7 +1,5 @@ @use "../../mixins/button"; -@use "../../mixins/focus"; @use "../../design-tokens/colors.yml"; -@use "../../design-tokens/sizes.yml"; /** * Gutenberg block: Button @@ -10,17 +8,13 @@ .wp-block-button { @include button.default; - - @include focus.focus-visible { - box-shadow: 0 0 0 sizes.$edge-large colors.$primary-brand-lighter; - } } .wp-block-button.is-style-fill { /** - * The level specificity of this selector will override inline border + * The specificity of this selector will override inline border * styles added by the button block editor and prevents unwanted modifications - * to border radius and color. + * to border radius and text color. */ & .wp-block-button__link { @@ -39,20 +33,15 @@ color: colors.$text-light-emphasis; padding: initial; /* 1 */ text-decoration: none; - - &:focus { - box-shadow: 0 0 0 0.25rem #8abfff; - outline: 0; - } } .wp-block-button.is-style-outline { @include button.secondary; /** - * The level specificity of this selector will override inline border + * The specificity of this selector will override inline border * styles added by the button block editor and prevents unwanted modifications - * to border radius and color. + * to border radius and text color. */ & .wp-block-button__link { From 5c6345a1a353473524265fdf6f65cba0c9aba7db Mon Sep 17 00:00:00 2001 From: derekshirk Date: Wed, 27 May 2020 10:37:00 -0700 Subject: [PATCH 04/14] adds href to story example / simplfies CSS --- src/vendor/wordpress/_wordpress.scss | 46 ++++------------------ src/vendor/wordpress/gutenberg.stories.mdx | 2 +- 2 files changed, 8 insertions(+), 40 deletions(-) diff --git a/src/vendor/wordpress/_wordpress.scss b/src/vendor/wordpress/_wordpress.scss index fcf3e35f3..c8958c8b6 100644 --- a/src/vendor/wordpress/_wordpress.scss +++ b/src/vendor/wordpress/_wordpress.scss @@ -1,5 +1,5 @@ @use "../../mixins/button"; -@use "../../design-tokens/colors.yml"; +@use "../../design-tokens/sizes.yml"; /** * Gutenberg block: Button @@ -7,46 +7,14 @@ */ .wp-block-button { - @include button.default; -} - -.wp-block-button.is-style-fill { - /** - * The specificity of this selector will override inline border - * styles added by the button block editor and prevents unwanted modifications - * to border radius and text color. - */ + display: inline-block; - & .wp-block-button__link { - background-color: inherit; - border: 0; - color: inherit; + .wp-block-button__link { + @include button.default; + border-radius: sizes.$radius-medium !important; } -} - -/** - * 1. Removes unwanted padding applied to default Gutenberg block buttons - */ - -.wp-block-button__link { - background-color: inherit; - color: colors.$text-light-emphasis; - padding: initial; /* 1 */ - text-decoration: none; -} - -.wp-block-button.is-style-outline { - @include button.secondary; - - /** - * The specificity of this selector will override inline border - * styles added by the button block editor and prevents unwanted modifications - * to border radius and text color. - */ - & .wp-block-button__link { - background-color: inherit; - border: 0; - color: inherit; + &.is-style-outline .wp-block-button__link { + @include button.secondary; } } diff --git a/src/vendor/wordpress/gutenberg.stories.mdx b/src/vendor/wordpress/gutenberg.stories.mdx index 2da2c5747..35d85693d 100644 --- a/src/vendor/wordpress/gutenberg.stories.mdx +++ b/src/vendor/wordpress/gutenberg.stories.mdx @@ -70,7 +70,7 @@ and border radius.
- + Another Outlined button
From 795c69aac15b02446bc4c5c8af748112da2545de Mon Sep 17 00:00:00 2001 From: derekshirk Date: Wed, 27 May 2020 11:12:25 -0700 Subject: [PATCH 05/14] adds developer comment --- src/vendor/wordpress/_wordpress.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/vendor/wordpress/_wordpress.scss b/src/vendor/wordpress/_wordpress.scss index c8958c8b6..6e1f5f9f3 100644 --- a/src/vendor/wordpress/_wordpress.scss +++ b/src/vendor/wordpress/_wordpress.scss @@ -4,6 +4,10 @@ /** * Gutenberg block: Button * Applies our pattern library styles to buttons generated via Gutenberg blocks. + * + * 1. The block editor allows editors to adjust button border radius. This style + * is applied via an inline style on the `wp-block-button__link` element. In + * order to prevent unwanted border-radius we apply an `!important` tag. */ .wp-block-button { From f2ee1319bdcc7596c47eb37af328055c21428a51 Mon Sep 17 00:00:00 2001 From: derekshirk Date: Wed, 27 May 2020 11:16:28 -0700 Subject: [PATCH 06/14] adds missing sass docs numerical indicator --- src/vendor/wordpress/_wordpress.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vendor/wordpress/_wordpress.scss b/src/vendor/wordpress/_wordpress.scss index 6e1f5f9f3..4e7af6952 100644 --- a/src/vendor/wordpress/_wordpress.scss +++ b/src/vendor/wordpress/_wordpress.scss @@ -15,7 +15,7 @@ .wp-block-button__link { @include button.default; - border-radius: sizes.$radius-medium !important; + border-radius: sizes.$radius-medium !important; /* 1 */ } &.is-style-outline .wp-block-button__link { From 42751eb72031a753f4ca2d9e45c9eb119e170287 Mon Sep 17 00:00:00 2001 From: derekshirk Date: Wed, 27 May 2020 11:34:58 -0700 Subject: [PATCH 07/14] moves and edits comment --- src/vendor/wordpress/_wordpress.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/vendor/wordpress/_wordpress.scss b/src/vendor/wordpress/_wordpress.scss index 4e7af6952..049371b84 100644 --- a/src/vendor/wordpress/_wordpress.scss +++ b/src/vendor/wordpress/_wordpress.scss @@ -4,15 +4,18 @@ /** * Gutenberg block: Button * Applies our pattern library styles to buttons generated via Gutenberg blocks. - * - * 1. The block editor allows editors to adjust button border radius. This style - * is applied via an inline style on the `wp-block-button__link` element. In - * order to prevent unwanted border-radius we apply an `!important` tag. */ .wp-block-button { display: inline-block; + /** + * 1. The block editor allows editors to adjust button border-radius. This + * style is applied via an inline style on the `wp-block-button__link` + * element. In order to prevent unwanted border-radius, we apply an + * `!important` tag here. + */ + .wp-block-button__link { @include button.default; border-radius: sizes.$radius-medium !important; /* 1 */ From ca21d0269b4316982df00adb22452d5602a86bb6 Mon Sep 17 00:00:00 2001 From: derekshirk Date: Wed, 27 May 2020 13:21:43 -0700 Subject: [PATCH 08/14] removes border-radius override --- src/vendor/wordpress/_wordpress.scss | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/vendor/wordpress/_wordpress.scss b/src/vendor/wordpress/_wordpress.scss index 049371b84..264ae42b1 100644 --- a/src/vendor/wordpress/_wordpress.scss +++ b/src/vendor/wordpress/_wordpress.scss @@ -7,18 +7,8 @@ */ .wp-block-button { - display: inline-block; - - /** - * 1. The block editor allows editors to adjust button border-radius. This - * style is applied via an inline style on the `wp-block-button__link` - * element. In order to prevent unwanted border-radius, we apply an - * `!important` tag here. - */ - .wp-block-button__link { @include button.default; - border-radius: sizes.$radius-medium !important; /* 1 */ } &.is-style-outline .wp-block-button__link { From d5b2527687095fc5c3063abe9322edb2681ed9dc Mon Sep 17 00:00:00 2001 From: derekshirk Date: Wed, 27 May 2020 14:08:06 -0700 Subject: [PATCH 09/14] adds display flex and padding with negative margins for layout --- src/vendor/wordpress/_wordpress.scss | 10 ++++++++++ src/vendor/wordpress/gutenberg.stories.mdx | 5 +++++ 2 files changed, 15 insertions(+) diff --git a/src/vendor/wordpress/_wordpress.scss b/src/vendor/wordpress/_wordpress.scss index 264ae42b1..8bf2f3fd7 100644 --- a/src/vendor/wordpress/_wordpress.scss +++ b/src/vendor/wordpress/_wordpress.scss @@ -6,6 +6,16 @@ * Applies our pattern library styles to buttons generated via Gutenberg blocks. */ +.wp-block-buttons { + display: flex; + flex-wrap: wrap; + + & * { + padding: sizes.$edge_large; + margin: sizes.$edge_large / -4; + } +} + .wp-block-button { .wp-block-button__link { @include button.default; diff --git a/src/vendor/wordpress/gutenberg.stories.mdx b/src/vendor/wordpress/gutenberg.stories.mdx index 35d85693d..ac8f889b0 100644 --- a/src/vendor/wordpress/gutenberg.stories.mdx +++ b/src/vendor/wordpress/gutenberg.stories.mdx @@ -74,6 +74,11 @@ and border radius. Another Outlined button +
+ + Another Outlined button + +
`} From f80c4bf55827e374c8ff4ae06be071e22611c4fe Mon Sep 17 00:00:00 2001 From: derekshirk Date: Wed, 27 May 2020 14:11:17 -0700 Subject: [PATCH 10/14] lint fixes --- src/vendor/wordpress/_wordpress.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vendor/wordpress/_wordpress.scss b/src/vendor/wordpress/_wordpress.scss index 8bf2f3fd7..e88e0f464 100644 --- a/src/vendor/wordpress/_wordpress.scss +++ b/src/vendor/wordpress/_wordpress.scss @@ -11,8 +11,8 @@ flex-wrap: wrap; & * { - padding: sizes.$edge_large; margin: sizes.$edge_large / -4; + padding: sizes.$edge_large; } } From 2f21ae98874162897ba4e112ed1ffb8885fddab7 Mon Sep 17 00:00:00 2001 From: derekshirk Date: Wed, 27 May 2020 15:44:45 -0700 Subject: [PATCH 11/14] improves pattern layout and spacing --- src/vendor/wordpress/_wordpress.scss | 34 +++++++++++++++++++++++++--- 1 file changed, 31 insertions(+), 3 deletions(-) diff --git a/src/vendor/wordpress/_wordpress.scss b/src/vendor/wordpress/_wordpress.scss index e88e0f464..cb05ace44 100644 --- a/src/vendor/wordpress/_wordpress.scss +++ b/src/vendor/wordpress/_wordpress.scss @@ -6,17 +6,45 @@ * Applies our pattern library styles to buttons generated via Gutenberg blocks. */ +$rhythm-space-generous: sizes.$rhythm_space_generous; +$list-inline-gap: sizes.$list_inline_gap; + +/** + * 1. Align buttons with outer parent + * 2. Complete half-gaps left by buttons + */ + .wp-block-buttons { display: flex; flex-wrap: wrap; + margin: $list-inline-gap * -1; + padding: $list-inline-gap / 2; - & * { - margin: sizes.$edge_large / -4; - padding: sizes.$edge_large; + /** + * If this has content before, assume it is prose content and add back + * some margin. + */ + &:not(:first-child) { + margin-top: $rhythm-space-generous - $list-inline-gap; + } + + /** + * If this has content after, assume it is prose content and add back + * some margin. + */ + &:not(:last-child) { + margin-bottom: $rhythm-space-generous - $list-inline-gap; } } +/** + * 1. Prevent inherited display flex styling from crushing layout + * 2. Add half-gaps (will add up to full gutters) + */ .wp-block-button { + flex: none; /* 1 */ + padding: $list-inline-gap / 2; /* 2 */ + .wp-block-button__link { @include button.default; } From fc56fa5041be5da3854b252d26077462c5a6c5ca Mon Sep 17 00:00:00 2001 From: derekshirk Date: Fri, 29 May 2020 10:04:33 -0700 Subject: [PATCH 12/14] converts underscores to hyphens --- src/vendor/wordpress/_wordpress.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/vendor/wordpress/_wordpress.scss b/src/vendor/wordpress/_wordpress.scss index cb05ace44..16c148a5e 100644 --- a/src/vendor/wordpress/_wordpress.scss +++ b/src/vendor/wordpress/_wordpress.scss @@ -6,8 +6,8 @@ * Applies our pattern library styles to buttons generated via Gutenberg blocks. */ -$rhythm-space-generous: sizes.$rhythm_space_generous; -$list-inline-gap: sizes.$list_inline_gap; +$rhythm-space-generous: sizes.$rhythm-space-generous; +$list-inline-gap: sizes.$list-inline-gap; /** * 1. Align buttons with outer parent From 231e12892d8b43ff836be94f163dc07846b49e39 Mon Sep 17 00:00:00 2001 From: derekshirk Date: Fri, 29 May 2020 10:05:45 -0700 Subject: [PATCH 13/14] removes extra button in from story markup --- src/vendor/wordpress/gutenberg.stories.mdx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/vendor/wordpress/gutenberg.stories.mdx b/src/vendor/wordpress/gutenberg.stories.mdx index ac8f889b0..0fd1b0faf 100644 --- a/src/vendor/wordpress/gutenberg.stories.mdx +++ b/src/vendor/wordpress/gutenberg.stories.mdx @@ -71,12 +71,7 @@ and border radius.
- Another Outlined button - -
-
- - Another Outlined button + Outlined button
`} From 79c52b97ce8e06430ae92984ee83f2ffda75828d Mon Sep 17 00:00:00 2001 From: derekshirk Date: Fri, 29 May 2020 10:54:12 -0700 Subject: [PATCH 14/14] improves variable usage --- src/vendor/wordpress/_wordpress.scss | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/vendor/wordpress/_wordpress.scss b/src/vendor/wordpress/_wordpress.scss index 16c148a5e..b79ed5553 100644 --- a/src/vendor/wordpress/_wordpress.scss +++ b/src/vendor/wordpress/_wordpress.scss @@ -6,8 +6,7 @@ * Applies our pattern library styles to buttons generated via Gutenberg blocks. */ -$rhythm-space-generous: sizes.$rhythm-space-generous; -$list-inline-gap: sizes.$list-inline-gap; +$wp-button-gap: sizes.$list-inline-gap; /** * 1. Align buttons with outer parent @@ -17,15 +16,15 @@ $list-inline-gap: sizes.$list-inline-gap; .wp-block-buttons { display: flex; flex-wrap: wrap; - margin: $list-inline-gap * -1; - padding: $list-inline-gap / 2; + margin: $wp-button-gap * -1; + padding: $wp-button-gap / 2; /** * If this has content before, assume it is prose content and add back * some margin. */ &:not(:first-child) { - margin-top: $rhythm-space-generous - $list-inline-gap; + margin-top: sizes.$rhythm-space-generous - $wp-button-gap; } /** @@ -33,7 +32,7 @@ $list-inline-gap: sizes.$list-inline-gap; * some margin. */ &:not(:last-child) { - margin-bottom: $rhythm-space-generous - $list-inline-gap; + margin-bottom: sizes.$rhythm-space-generous - $wp-button-gap; } } @@ -43,7 +42,7 @@ $list-inline-gap: sizes.$list-inline-gap; */ .wp-block-button { flex: none; /* 1 */ - padding: $list-inline-gap / 2; /* 2 */ + padding: $wp-button-gap / 2; /* 2 */ .wp-block-button__link { @include button.default;