wp/wp-includes/blocks/button/editor.css
changeset 21 48c4eec2b7e6
parent 19 3d72ae0968f4
child 22 8c2e4d02f4ef
equal deleted inserted replaced
20:7b1b88e27a20 21:48c4eec2b7e6
     1 /**
     1 .wp-block[data-align=center]>.wp-block-button{
     2  * Colors
     2   margin-left:auto;
     3  */
     3   margin-right:auto;
     4 /**
     4   text-align:center;
     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[data-align=center] > .wp-block-button {
       
    78   text-align: center;
       
    79   margin-left: auto;
       
    80   margin-right: auto;
       
    81 }
     5 }
    82 
     6 
    83 .wp-block[data-align=right] > .wp-block-button {
     7 .wp-block[data-align=right]>.wp-block-button{
    84   /*!rtl:ignore*/
     8   text-align:right;
    85   text-align: right;
       
    86 }
     9 }
    87 
    10 
    88 .wp-block-button {
    11 .wp-block-button{
    89   position: relative;
    12   cursor:text;
    90   cursor: text;
    13   position:relative;
    91 }
    14 }
    92 .wp-block-button:focus {
    15 .wp-block-button:focus{
    93   box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color);
    16   box-shadow:0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color);
    94   outline: 2px solid transparent;
    17   outline:2px solid #0000;
    95   outline-offset: -2px;
    18   outline-offset:-2px;
    96 }
    19 }
    97 .wp-block-button[data-rich-text-placeholder]::after {
    20 .wp-block-button[data-rich-text-placeholder]:after{
    98   opacity: 0.8;
    21   opacity:.8;
    99 }
    22 }
   100 
    23 
   101 .wp-block-button__inline-link {
    24 div[data-type="core/button"]{
   102   color: #757575;
    25   display:table;
   103   height: 0;
       
   104   overflow: hidden;
       
   105   max-width: 290px;
       
   106 }
       
   107 .wp-block-button__inline-link-input__suggestions {
       
   108   max-width: 290px;
       
   109 }
       
   110 @media (min-width: 782px) {
       
   111   .wp-block-button__inline-link {
       
   112     max-width: 260px;
       
   113   }
       
   114   .wp-block-button__inline-link-input__suggestions {
       
   115     max-width: 260px;
       
   116   }
       
   117 }
       
   118 @media (min-width: 960px) {
       
   119   .wp-block-button__inline-link {
       
   120     max-width: 290px;
       
   121   }
       
   122   .wp-block-button__inline-link-input__suggestions {
       
   123     max-width: 290px;
       
   124   }
       
   125 }
       
   126 .is-selected .wp-block-button__inline-link {
       
   127   height: auto;
       
   128   overflow: visible;
       
   129 }
    26 }
   130 
    27 
   131 .wp-button-label__width .components-button-group {
    28 .editor-styles-wrapper .wp-block-button[style*=text-decoration] .wp-block-button__link{
   132   display: block;
    29   text-decoration:inherit;
   133 }
    30 }
   134 .wp-button-label__width .components-base-control__field {
       
   135   margin-bottom: 12px;
       
   136 }
       
   137 
       
   138 div[data-type="core/button"] {
       
   139   display: table;
       
   140 }