Changeset 49987 for trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss
- Timestamp:
- 01/20/2021 05:49:28 AM (4 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss
r49574 r49987 28 28 &:not(.is-style-outline) { 29 29 30 .wp-block-button__link {30 .wp-block-button__link:not(:hover):not(:active) { 31 31 32 &:active { 33 color: var(--button--color-text-active) !important; 34 background: transparent !important; 35 border-color: var(--button--color-background); 32 // Text colors 33 &:not(.has-text-color) { 34 color: var(--global--color-background); 35 36 // Nested 37 .has-background & { 38 color: var(--local--color-background, var(--global--color-background)); 39 40 &.has-background { 41 color: var(--global--color-primary); 42 } 43 } 36 44 } 37 45 38 &:hover { 39 color: var(--button--color-text-hover) !important; 40 background: transparent !important; 41 border-color: var(--button--color-background); 46 // Background-colors 47 &:not(.has-background) { 48 background-color: var(--global--color-primary); 49 50 // Nested 51 .has-background & { 52 background-color: var(--local--color-primary, var(--global--color-primary)); 53 } 42 54 } 55 } 56 57 // Hover Button color should match parent element foreground color 58 .wp-block-button__link:hover, 59 .wp-block-button__link:active { 60 border-color: currentColor !important; 61 background-color: transparent !important; 62 color: inherit !important; 63 } 64 65 // Remove :focus styles in the editor 66 .wp-block-button__link:focus { 67 outline-offset: inherit; 68 outline: inherit; 43 69 } 44 70 } … … 47 73 &.is-style-outline { 48 74 49 .wp-block-button__link { 50 color: var(--button--color-background); 51 background: transparent; 52 border: var(--button--border-width) solid currentColor; 53 padding: var(--button--padding-vertical) var(--button--padding-horizontal); 75 .wp-block-button__link:not(:hover):not(:active) { 54 76 55 &:active, 56 &:hover { 57 background-color: var(--button--color-background); 58 color: var(--button--color-text); 59 border-color: var(--button--color-background); 77 // Border colors 78 &:not(.has-text-color), 79 &:not(.has-background), 80 &.has-background { 81 border-color: currentColor; 82 } 83 84 // Text colors 85 &:not(.has-text-color) { 86 color: var(--global--color-primary); 87 88 // Nested 89 .has-background & { 90 color: var(--local--color-primary, var(--global--color-primary)); 91 } 60 92 } 61 93 62 94 &.has-background { 63 border-color: var(--button--color-background); 64 65 &:active, 66 &:hover { 67 background-color: var(--button--color-background) !important; 95 // Nested 96 .has-background &:not(.has-text-color) { 97 color: inherit; 68 98 } 69 99 } 70 100 71 &.has-background:not(.has-text-color) { 72 color: var(--global--color-dark-gray); 101 // Background-colors 102 &:not(.has-background) { 103 background-color: transparent; 104 } 105 } 106 107 // Hover Button color should match default button style 108 .wp-block-button__link:hover, 109 .wp-block-button__link:active { 110 111 background-color: var(--global--color-primary) !important; 112 border-color: transparent !important; 113 color: var(--global--color-background) !important; 114 115 .has-background & { 116 background-color: var(--local--color-primary, var(--global--color-primary)) !important; 117 color: var(--local--color-background, var(--global--color-background)) !important; 73 118 } 74 119 75 &.has-background.has-gray-background-color:not(.has-text-color), 76 &.has-background.has-dark-gray-background-color:not(.has-text-color), 77 &.has-background.has-black-background-color:not(.has-text-color) { 78 color: var(--global--color-white); 120 .has-text-color & { 121 color: var(--local--color-background, var(--global--color-background)) !important; 79 122 } 123 } 80 124 81 .is-dark-theme & { 82 83 &:not(.has-text-color) { 84 85 &.has-background.has-white-background-color, 86 &.has-background.has-green-background-color, 87 &.has-background.has-blue-background-color, 88 &.has-background.has-purple-background-color, 89 &.has-background.has-red-background-color, 90 &.has-background.has-orange-background-color, 91 &.has-background.has-yellow-background-color { 92 color: var(--global--color-dark-gray); 93 } 94 } 95 } 96 97 &.has-text-color { 98 border-color: currentColor; 99 100 &:active, 101 &:hover { 102 color: var(--button--color-text) !important; 103 border-color: var(--button--color-background); 104 } 105 } 125 // Remove :focus styles in the editor 126 .wp-block-button__link:focus { 127 outline-offset: inherit; 128 outline: inherit; 106 129 } 107 130 }
Note: See TracChangeset
for help on using the changeset viewer.