1 /**

     2  * Colors

     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  * Breakpoint mixins

    45  */

    46 /**

    47  * Long content fade mixin

    48  *

    49  * Creates a fading overlay to signify that the content is longer

    50  * than the space allows.

    51  */

    52 /**

    53  * Focus styles.

    54  */

    55 /**

    56  * Applies editor left position to the selector passed as argument

    57  */

    58 /**

    59  * Styles that are reused verbatim in a few places

    60  */

    61 /**

    62  * Allows users to opt-out of animations via OS-level preferences.

    63  */

    64 /**

    65  * Reset default styles for JavaScript UI based pages.

    66  * This is a WP-admin agnostic reset

    67  */

    68 /**

    69  * Reset the WP Admin page styles for Gutenberg-like pages.

    70  */

    71 figure.wp-block-image:not(.wp-block) {

    72   margin: 0;

    73 }

    74 

    75 .wp-block-image {

    76   position: relative;

    77 }

    78 .wp-block-image .is-applying img, .wp-block-image.is-transient img {

    79   opacity: 0.3;

    80 }

    81 .wp-block-image figcaption img {

    82   display: inline;

    83 }

    84 .wp-block-image .components-spinner {

    85   position: absolute;

    86   top: 50%;

    87   left: 50%;

    88   margin-top: -9px;

    89   margin-left: -9px;

    90 }

    91 .wp-block-image:not(.is-style-rounded) > div {

    92   border-radius: inherit;

    93 }

    94 

    95 .wp-block-image .components-resizable-box__container {

    96   display: inline-block;

    97 }

    98 .wp-block-image .components-resizable-box__container img {

    99   display: block;

   100   width: inherit;

   101   height: inherit;

   102 }

   103 

   104 .block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal {

   105   position: absolute;

   106   left: 0;

   107   right: 0;

   108   margin: -1px 0;

   109 }

   110 @media (min-width: 600px) {

   111   .block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal {

   112     margin: -1px;

   113   }

   114 }

   115 

   116 [data-align=wide] > .wp-block-image img,

   117 [data-align=full] > .wp-block-image img {

   118   width: 100%;

   119 }

   120 

   121 .wp-block[data-align=left] > .wp-block-image,

   122 .wp-block[data-align=center] > .wp-block-image,

   123 .wp-block[data-align=right] > .wp-block-image {

   124   display: table;

   125 }

   126 .wp-block[data-align=left] > .wp-block-image > figcaption,

   127 .wp-block[data-align=center] > .wp-block-image > figcaption,

   128 .wp-block[data-align=right] > .wp-block-image > figcaption {

   129   display: table-caption;

   130   caption-side: bottom;

   131 }

   132 

   133 .wp-block[data-align=left] > .wp-block-image {

   134   margin-right: 1em;

   135   margin-left: 0;

   136   margin-top: 0.5em;

   137   margin-bottom: 0.5em;

   138 }

   139 

   140 .wp-block[data-align=right] > .wp-block-image {

   141   margin-left: 1em;

   142   margin-right: 0;

   143   margin-top: 0.5em;

   144   margin-bottom: 0.5em;

   145 }

   146 

   147 .wp-block[data-align=center] > .wp-block-image {

   148   margin-left: auto;

   149   margin-right: auto;

   150   text-align: center;

   151 }

   152 

   153 .wp-block-image__crop-area {

   154   position: relative;

   155   max-width: 100%;

   156   width: 100%;

   157 }

   158 

   159 .wp-block-image__crop-icon {

   160   padding: 0 8px;

   161   min-width: 48px;

   162   display: flex;

   163   justify-content: center;

   164   align-items: center;

   165 }

   166 .wp-block-image__crop-icon svg {

   167   fill: currentColor;

   168 }

   169 

   170 .wp-block-image__zoom .components-popover__content {

   171   overflow: visible;

   172   min-width: 260px;

   173 }

   174 .wp-block-image__zoom .components-range-control {

   175   flex: 1;

   176 }

   177 .wp-block-image__zoom .components-base-control__field {

   178   display: flex;

   179   margin-bottom: 0;

   180   flex-direction: column;

   181   align-items: flex-start;

   182 }

   183 

   184 .wp-block-image__aspect-ratio {

   185   height: 46px;

   186   margin-bottom: -8px;

   187   display: flex;

   188   align-items: center;

   189 }

   190 .wp-block-image__aspect-ratio .components-button {

   191   width: 36px;

   192   padding-left: 0;

   193   padding-right: 0;

   194 }