wp/wp-includes/blocks/social-link/editor.css
changeset 21 48c4eec2b7e6
parent 19 3d72ae0968f4
child 22 8c2e4d02f4ef
equal deleted inserted replaced
20:7b1b88e27a20 21:48c4eec2b7e6
     1 /**
     1 .wp-block-social-links .wp-social-link{
     2  * Colors
     2   line-height:0;
     3  */
       
     4 /**
       
     5  * Breakpoints & Media Queries
       
     6  */
       
     7 /**
       
     8  * SCSS Variables.
       
     9  *
       
    10  * Please use variables from this sheet to ensure consistency across the UI.
       
    11  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
       
    12  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
       
    13  */
       
    14 /**
       
    15  * Colors
       
    16  */
       
    17 /**
       
    18  * Fonts & basic variables.
       
    19  */
       
    20 /**
       
    21  * Grid System.
       
    22  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
       
    23  */
       
    24 /**
       
    25  * Dimensions.
       
    26  */
       
    27 /**
       
    28  * Shadows.
       
    29  */
       
    30 /**
       
    31  * Editor widths.
       
    32  */
       
    33 /**
       
    34  * Block & Editor UI.
       
    35  */
       
    36 /**
       
    37  * Block paddings.
       
    38  */
       
    39 /**
       
    40  * React Native specific.
       
    41  * These variables do not appear to be used anywhere else.
       
    42  */
       
    43 /**
       
    44 *  Converts a hex value into the rgb equivalent.
       
    45 *
       
    46 * @param {string} hex - the hexadecimal value to convert
       
    47 * @return {string} comma separated rgb values
       
    48 */
       
    49 /**
       
    50  * Breakpoint mixins
       
    51  */
       
    52 /**
       
    53  * Long content fade mixin
       
    54  *
       
    55  * Creates a fading overlay to signify that the content is longer
       
    56  * than the space allows.
       
    57  */
       
    58 /**
       
    59  * Focus styles.
       
    60  */
       
    61 /**
       
    62  * Applies editor left position to the selector passed as argument
       
    63  */
       
    64 /**
       
    65  * Styles that are reused verbatim in a few places
       
    66  */
       
    67 /**
       
    68  * Allows users to opt-out of animations via OS-level preferences.
       
    69  */
       
    70 /**
       
    71  * Reset default styles for JavaScript UI based pages.
       
    72  * This is a WP-admin agnostic reset
       
    73  */
       
    74 /**
       
    75  * Reset the WP Admin page styles for Gutenberg-like pages.
       
    76  */
       
    77 .wp-block-social-links .wp-social-link {
       
    78   line-height: 0;
       
    79 }
       
    80 .wp-block-social-links .wp-social-link button {
       
    81   font-size: inherit;
       
    82   color: currentColor;
       
    83   height: auto;
       
    84   line-height: 0;
       
    85   padding: 0.25em;
       
    86 }
     3 }
    87 
     4 
    88 .wp-block-social-links.is-style-pill-shape .wp-social-link button {
     5 .wp-block-social-link-anchor{
    89   padding-left: calc((2/3) * 1em);
     6   align-items:center;
    90   padding-right: calc((2/3) * 1em);
     7   background:none;
       
     8   border:0;
       
     9   box-sizing:border-box;
       
    10   color:currentColor;
       
    11   cursor:pointer;
       
    12   display:inline-flex;
       
    13   font-size:inherit;
       
    14   height:auto;
       
    15   opacity:1;
       
    16   padding:.25em;
       
    17 }
       
    18 .wp-block-social-link-anchor:focus:not(:disabled){
       
    19   border-radius:2px;
       
    20   box-shadow:0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
       
    21   outline:3px solid #0000;
    91 }
    22 }
    92 
    23 
    93 .wp-block-social-links.is-style-logos-only .wp-social-link button {
    24 :root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link button){
    94   padding: 0;
    25   padding-left:.66667em;
       
    26   padding-right:.66667em;
    95 }
    27 }
       
    28 
       
    29 :root :where(.wp-block-social-links.is-style-logos-only .wp-social-link button){
       
    30   padding:0;
       
    31 }