WordPress.org
Get WordPress

Make WordPress Core

Changeset 50262


Ignore:
Timestamp:
02/09/2021 03:53:14 AM (2 years ago)
Author:
peterwilsoncc
Message:

Twenty Twenty-One: Update editor styles of search block.

Update editor styles to more closely match the front-end following upstream changes.

Props poena, paaljoachim, hellofromTonya.
Fixes #52433.

Location:
trunk/src/wp-content/themes/twentytwentyone/assets
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css

    r50261 r50262  
    23072307}
    23082308
    2309 .wp-block-search .wp-block-search__button {
     2309.wp-block-search .wp-block-search__button.wp-block-search__button {
    23102310    border: 3px solid transparent;
    23112311    border-radius: 0;
    … …  
    23212321}
    23222322
    2323 .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
     2323.wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
    23242324    color: #d1e4dd;
    23252325}
    23262326
    2327 .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
    2328     color: #28303d;
    2329 }
    2330 
    2331 .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background {
    2332     color: #28303d;
    2333 }
    2334 
    2335 .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
     2327.has-background .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
     2328    color: #28303d;
     2329}
     2330
     2331.has-background .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background {
     2332    color: #28303d;
     2333}
     2334
     2335.wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-background) {
    23362336    background-color: #28303d;
    23372337}
    23382338
    2339 .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
     2339.has-background .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-background) {
    23402340    background-color: #28303d;
    23412341}
    23422342
    2343 .wp-block-search .wp-block-search__button:hover,
    2344 .wp-block-search .wp-block-search__button:active {
     2343.wp-block-search .wp-block-search__button.wp-block-search__button:hover,
     2344.wp-block-search .wp-block-search__button.wp-block-search__button:active {
    23452345    background-color: transparent;
    23462346    border-color: currentColor;
    … …  
    23482348}
    23492349
    2350 .wp-block-search .wp-block-search__button:focus {
     2350.wp-block-search .wp-block-search__button.wp-block-search__button:focus {
    23512351    outline-offset: -6px;
    23522352    outline: 2px dotted currentColor;
    23532353}
    23542354
    2355 .wp-block-search .wp-block-search__button:disabled {
     2355.wp-block-search .wp-block-search__button.wp-block-search__button:disabled {
    23562356    background-color: rgba(255, 255, 255, 0.5);
    23572357    border-color: rgba(255, 255, 255, 0.5);
    … …  
    23592359}
    23602360
    2361 .wp-block-search .wp-block-search__button.has-icon {
    2362     padding: 30px 15px;
     2361.wp-block-search .wp-block-search__button.wp-block-search__button.has-icon {
     2362    padding: 6px 15px;
    23632363    display: inherit;
    23642364}
    23652365
    2366 .wp-block-search .wp-block-search__button.has-icon svg {
     2366.wp-block-search .wp-block-search__button.wp-block-search__button.has-icon svg {
    23672367    width: 40px;
    23682368    height: 40px;
    23692369}
    23702370
    2371 .has-background .wp-block-search .wp-block-search__button:hover {
     2371.has-background .wp-block-search .wp-block-search__button.wp-block-search__button:hover {
    23722372    background-color: #d1e4dd !important;
    23732373    color: #28303d !important;
    23742374}
    23752375
    2376 .has-background .wp-block-search .wp-block-search__button:active {
     2376.has-background .wp-block-search .wp-block-search__button.wp-block-search__button:active {
    23772377    background-color: #d1e4dd !important;
    23782378    color: #28303d !important;
    23792379}
    23802380
    2381 .has-text-color .wp-block-search .wp-block-search__button:hover {
     2381.has-text-color .wp-block-search .wp-block-search__button.wp-block-search__button:hover {
    23822382    color: #28303d !important;
    23832383}
    23842384
    2385 .has-text-color .wp-block-search .wp-block-search__button:active {
     2385.has-text-color .wp-block-search .wp-block-search__button.wp-block-search__button:active {
    23862386    color: #28303d !important;
    23872387}
    23882388
    2389 .wp-block-search .wp-block-search__button:focus {
     2389.wp-block-search .wp-block-search__button.wp-block-search__button:focus {
    23902390    outline-offset: inherit;
    23912391    outline: inherit;

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css

    r50261 r50262  
    18171817}
    18181818
    1819 .wp-block-search .wp-block-search__button {
     1819.wp-block-search .wp-block-search__button.wp-block-search__button {
    18201820    border: var(--button--border-width) solid transparent;
    18211821    border-radius: var(--button--border-radius);
    … …  
    18311831}
    18321832
    1833 .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
     1833.wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
    18341834    color: var(--global--color-background);
    18351835}
    18361836
    1837 .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
     1837.has-background .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
    18381838    color: var(--local--color-background, var(--global--color-primary));
    18391839}
    18401840
    1841 .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background {
     1841.has-background .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background {
    18421842    color: var(--global--color-primary);
    18431843}
    18441844
    1845 .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
     1845.wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-background) {
    18461846    background-color: var(--global--color-primary);
    18471847}
    18481848
    1849 .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
     1849.has-background .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-background) {
    18501850    background-color: var(--local--color-primary, var(--global--color-primary));
    18511851}
    18521852
    1853 .wp-block-search .wp-block-search__button:hover,
    1854 .wp-block-search .wp-block-search__button:active {
     1853.wp-block-search .wp-block-search__button.wp-block-search__button:hover,
     1854.wp-block-search .wp-block-search__button.wp-block-search__button:active {
    18551855    background-color: transparent;
    18561856    border-color: currentColor;
    … …  
    18581858}
    18591859
    1860 .wp-block-search .wp-block-search__button:focus {
     1860.wp-block-search .wp-block-search__button.wp-block-search__button:focus {
    18611861    outline-offset: -6px;
    18621862    outline: 2px dotted currentColor;
    18631863}
    18641864
    1865 .wp-block-search .wp-block-search__button:disabled {
     1865.wp-block-search .wp-block-search__button.wp-block-search__button:disabled {
    18661866    background-color: var(--global--color-white-50);
    18671867    border-color: var(--global--color-white-50);
    … …  
    18691869}
    18701870
    1871 .wp-block-search .wp-block-search__button.has-icon {
    1872     padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
     1871.wp-block-search .wp-block-search__button.wp-block-search__button.has-icon {
     1872    padding: 6px calc(0.5 * var(--button--padding-horizontal));
    18731873    display: inherit;
    18741874}
    18751875
    1876 .wp-block-search .wp-block-search__button.has-icon svg {
     1876.wp-block-search .wp-block-search__button.wp-block-search__button.has-icon svg {
    18771877    width: 40px;
    18781878    height: 40px;
    18791879}
    18801880
    1881 .has-background .wp-block-search .wp-block-search__button:hover,
    1882 .has-background .wp-block-search .wp-block-search__button:active {
     1881.has-background .wp-block-search .wp-block-search__button.wp-block-search__button:hover,
     1882.has-background .wp-block-search .wp-block-search__button.wp-block-search__button:active {
    18831883    background-color: var(--local--color-background, var(--global--color-background)) !important;
    18841884    color: var(--local--color-primary, var(--global--color-primary)) !important;
    18851885}
    18861886
    1887 .has-text-color .wp-block-search .wp-block-search__button:hover,
    1888 .has-text-color .wp-block-search .wp-block-search__button:active {
     1887.has-text-color .wp-block-search .wp-block-search__button.wp-block-search__button:hover,
     1888.has-text-color .wp-block-search .wp-block-search__button.wp-block-search__button:active {
    18891889    color: var(--local--color-primary, var(--global--color-primary)) !important;
    18901890}
    18911891
    1892 .wp-block-search .wp-block-search__button:focus {
     1892.wp-block-search .wp-block-search__button.wp-block-search__button:focus {
    18931893    outline-offset: inherit;
    18941894    outline: inherit;

  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss

    r49987 r50262  
    2828    }
    2929
    30     .wp-block-search__button {
     30    .wp-block-search__button.wp-block-search__button {
    3131        @include button-style();
    3232        box-shadow: none;
    … …  
    3434
    3535        &.has-icon {
    36             padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
     36            padding: 6px calc(0.5 * var(--button--padding-horizontal));
    3737            display: inherit;
    3838
Note: See TracChangeset for help on using the changeset viewer.