| @@ -42,23 +42,90 @@ | ||
| 42 | 42 | /** |
| 43 | 43 | * React Native specific. |
| 44 | 44 | * These variables do not appear to be used anywhere else. |
| 45 | 45 | */ |
| 46 | +/** | |
| 47 | + * Typography | |
| 48 | + */ | |
| 49 | +/** | |
| 50 | + * Breakpoints & Media Queries | |
| 51 | + */ | |
| 52 | +/** | |
| 53 | +* Converts a hex value into the rgb equivalent. | |
| 54 | +* | |
| 55 | +* @param {string} hex - the hexadecimal value to convert | |
| 56 | +* @return {string} comma separated rgb values | |
| 57 | +*/ | |
| 58 | +/** | |
| 59 | + * Long content fade mixin | |
| 60 | + * | |
| 61 | + * Creates a fading overlay to signify that the content is longer | |
| 62 | + * than the space allows. | |
| 63 | + */ | |
| 64 | +/** | |
| 65 | + * Breakpoint mixins | |
| 66 | + */ | |
| 67 | +/** | |
| 68 | + * Focus styles. | |
| 69 | + */ | |
| 70 | +/** | |
| 71 | + * Standard focus rings for the WordPress Design System. | |
| 72 | + * | |
| 73 | + * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site, | |
| 74 | + * e.g. `&:focus { @include outset-ring__focus(); }`. | |
| 75 | + */ | |
| 76 | +/** | |
| 77 | + * Applies editor left position to the selector passed as argument | |
| 78 | + */ | |
| 79 | +/** | |
| 80 | + * Styles that are reused verbatim in a few places | |
| 81 | + */ | |
| 82 | +/** | |
| 83 | + * Allows users to opt-out of animations via OS-level preferences. | |
| 84 | + */ | |
| 85 | +/** | |
| 86 | + * Reset default styles for JavaScript UI based pages. | |
| 87 | + * This is a WP-admin agnostic reset | |
| 88 | + */ | |
| 89 | +/** | |
| 90 | + * Reset the WP Admin page styles for Gutenberg-like pages. | |
| 91 | + */ | |
| 92 | +/** | |
| 93 | + * Creates a checkerboard pattern background to indicate transparency. | |
| 94 | + * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px. | |
| 95 | + */ | |
| 46 | 96 | .wp-block[data-align=center] > .wp-block-icon { |
| 47 | 97 | display: flex; |
| 48 | 98 | justify-content: center; |
| 49 | 99 | } |
| 50 | 100 | |
| 51 | -.wp-block-icon__inserter { | |
| 52 | - padding: 0 24px; | |
| 53 | - margin: 0 -24px; | |
| 101 | +.wp-block-icon__inserter-sidebar { | |
| 102 | + padding-bottom: 24px; | |
| 54 | 103 | } |
| 104 | +@media (min-width: 782px) { | |
| 105 | + .wp-block-icon__inserter-sidebar { | |
| 106 | + overflow-x: visible; | |
| 107 | + overflow-y: auto; | |
| 108 | + position: absolute; | |
| 109 | + top: 72px; | |
| 110 | + left: 0; | |
| 111 | + bottom: 0; | |
| 112 | + width: 280px; | |
| 113 | + padding-top: 24px; | |
| 114 | + padding-inline: 24px; | |
| 115 | + } | |
| 116 | +} | |
| 55 | 117 | |
| 56 | -.wp-block-icon__inserter-header { | |
| 57 | - align-items: center; | |
| 118 | +@media (min-width: 782px) { | |
| 119 | + .wp-block-icon__inserter-panel { | |
| 120 | + margin-inline-start: 280px; | |
| 121 | + } | |
| 122 | +} | |
| 123 | + | |
| 124 | +.wp-block-icon__inserter-loading { | |
| 58 | 125 | display: flex; |
| 59 | - justify-content: space-between; | |
| 60 | - margin-bottom: 16px; | |
| 126 | + justify-content: center; | |
| 127 | + padding: 24px; | |
| 61 | 128 | } |
| 62 | 129 | |
| 63 | 130 | .wp-block-icon__inserter-grid-icons-list { |
| 64 | 131 | display: grid; |
| @@ -78,15 +145,18 @@ | ||
| 78 | 145 | |
| 79 | 146 | .wp-block-icon__inserter-grid-icons-list-item-icon { |
| 80 | 147 | padding: 12px; |
| 81 | 148 | } |
| 149 | +.wp-block-icon__inserter-grid-icons-list-item-icon svg { | |
| 150 | + display: block; | |
| 151 | + width: 24px; | |
| 152 | + height: 24px; | |
| 153 | +} | |
| 82 | 154 | |
| 83 | 155 | .wp-block-icon__inserter-grid-icons-list-item-title { |
| 84 | 156 | font-size: 12px; |
| 85 | 157 | padding: 4px 4px 8px; |
| 86 | - overflow: hidden; | |
| 87 | - text-overflow: ellipsis; | |
| 88 | - white-space: nowrap; | |
| 158 | + overflow-wrap: break-word; | |
| 89 | 159 | } |
| 90 | 160 | |
| 91 | 161 | .wp-block-icon__toolbar-content { |
| 92 | 162 | width: 250px; |
