forked from WordPress/gutenberg
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ColorPalette: Improve color name readability (WordPress#50450)
Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
- Loading branch information
1 parent
b6a3dc7
commit ec08e17
Showing
6 changed files
with
314 additions
and
182 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,79 @@ | ||
| .components-color-palette__custom-color { | ||
| $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2); | ||
|
|
||
| .components-color-palette__custom-color-wrapper { | ||
| position: relative; | ||
| z-index: 0; | ||
| } | ||
| .components-color-palette__custom-color-button { | ||
| position: relative; | ||
| border: none; | ||
| background: none; | ||
| border-radius: $radius-block-ui; | ||
| height: $grid-unit-80; | ||
| padding: $grid-unit-15; | ||
| font-family: inherit; | ||
| width: 100%; | ||
| // The background image creates a checkerboard pattern. Ignore rtlcss to | ||
| // make it work both in LTR and RTL. | ||
| // See https://github.com/WordPress/gutenberg/pull/42510 | ||
| /*rtl:begin:ignore*/ | ||
| background-image: | ||
| repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200), | ||
| repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200); | ||
| background-position: 0 0, 24px 24px; | ||
| /*rtl:end:ignore*/ | ||
| background-size: calc(2 * 24px) calc(2 * 24px); | ||
| box-sizing: border-box; | ||
| color: $white; | ||
| cursor: pointer; | ||
| box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2); | ||
| // Show a thin outline in Windows high contrast mode. | ||
| outline: 1px solid transparent; | ||
| border-radius: $radius-block-ui $radius-block-ui 0 0; | ||
| box-shadow: $border-as-box-shadow; | ||
|
|
||
| &:focus { | ||
| box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent; | ||
| // Show a outline in Windows high contrast mode. | ||
| outline-width: 2px; | ||
| } | ||
|
|
||
| &::after { | ||
| content: ""; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| z-index: -1; | ||
| // The background image creates a checkerboard pattern. Ignore rtlcss to | ||
| // make it work both in LTR and RTL. | ||
| // See https://github.com/WordPress/gutenberg/pull/42510 | ||
| /*rtl:begin:ignore*/ | ||
| background-image: | ||
| repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200), | ||
| repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200); | ||
| background-position: 0 0, 24px 24px; | ||
| /*rtl:end:ignore*/ | ||
| background-size: calc(2 * 24px) calc(2 * 24px); | ||
| } | ||
| } | ||
|
|
||
| .components-color-palette__custom-color-text-wrapper { | ||
| padding: $grid-unit-15 $grid-unit-20; | ||
| border-radius: 0 0 $radius-block-ui $radius-block-ui; | ||
| position: relative; | ||
| font-size: $default-font-size; | ||
|
|
||
| // Add a border with the same technique as the button above, | ||
| // but only for left, bottom, and right sides. | ||
| box-shadow: | ||
| inset 0 -1 * $border-width 0 0 rgba(0, 0, 0, 0.2), | ||
| inset $border-width 0 0 0 rgba(0, 0, 0, 0.2), | ||
| inset -1 * $border-width 0 0 0 rgba(0, 0, 0, 0.2); | ||
| } | ||
|
|
||
| .components-color-palette__custom-color-name { | ||
| text-align: left; | ||
| color: $components-color-foreground; | ||
| margin: 0 $border-width; | ||
| } | ||
|
|
||
| .components-color-palette__custom-color-value { | ||
| margin-left: $grid-unit-20; | ||
| text-transform: uppercase; | ||
| color: $gray-700; | ||
|
|
||
| &--is-hex { | ||
| text-transform: uppercase; | ||
| } | ||
|
|
||
| // Add a zero-width space when this element is empty to preserve | ||
| // a minimum height of 1 line of text, and avoid layout jumps. | ||
| &:empty::after { | ||
| content: "\200B"; | ||
| visibility: hidden; | ||
| } | ||
| } |
Oops, something went wrong.