| 1 |
@import "./colors"; |
| 2 |
|
| 3 |
/** |
| 4 |
* Fonts & basic variables. |
| 5 |
*/ |
| 6 |
|
| 7 |
$default-font: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif; |
| 8 |
$default-font-size: 13px; |
| 9 |
$default-line-height: 1.4; |
| 10 |
$editor-font: "Noto Serif", serif; |
| 11 |
$editor-html-font: Menlo, Consolas, monaco, monospace; |
| 12 |
$editor-font-size: 16px; |
| 13 |
$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks (it's 2x $block-padding). |
| 14 |
$text-editor-font-size: 15px; |
| 15 |
$editor-line-height: 1.8; |
| 16 |
$big-font-size: 18px; |
| 17 |
$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in" |
| 18 |
$border-width: 1px; |
| 19 |
$border-width-focus: 1.5px; |
| 20 |
$border-width-tab: 4px; |
| 21 |
|
| 22 |
/** |
| 23 |
* Grid System. |
| 24 |
* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ |
| 25 |
*/ |
| 26 |
|
| 27 |
$grid-unit: 8px; |
| 28 |
$grid-unit-05: 0.5 * $grid-unit; // 4px |
| 29 |
$grid-unit-10: 1 * $grid-unit; // 8px |
| 30 |
$grid-unit-15: 1.5 * $grid-unit; // 12px |
| 31 |
$grid-unit-20: 2 * $grid-unit; // 16px |
| 32 |
$grid-unit-30: 3 * $grid-unit; // 24px |
| 33 |
$grid-unit-40: 4 * $grid-unit; // 32px |
| 34 |
$grid-unit-50: 5 * $grid-unit; // 40px |
| 35 |
$grid-unit-60: 6 * $grid-unit; // 48px |
| 36 |
|
| 37 |
/** |
| 38 |
* Dimensions. |
| 39 |
*/ |
| 40 |
|
| 41 |
$icon-size: 24px; |
| 42 |
$button-size: 36px; |
| 43 |
$button-size-small: 24px; |
| 44 |
$header-height: 60px; |
| 45 |
$panel-header-height: $grid-unit-60; |
| 46 |
$admin-bar-height: 32px; |
| 47 |
$admin-bar-height-big: 46px; |
| 48 |
$admin-sidebar-width: 160px; |
| 49 |
$admin-sidebar-width-big: 190px; |
| 50 |
$admin-sidebar-width-collapsed: 36px; |
| 51 |
$modal-min-width: 360px; |
| 52 |
$spinner-size: 18px; |
| 53 |
$mobile-header-toolbar-height: 44px; |
| 54 |
$mobile-floating-toolbar-height: 44px; |
| 55 |
$mobile-floating-toolbar-margin: 8px; |
| 56 |
$mobile-color-swatch: 48px; |
| 57 |
|
| 58 |
/** |
| 59 |
* Shadows. |
| 60 |
*/ |
| 61 |
|
| 62 |
$shadow-popover: 0 2px 6px rgba($black, 0.05); |
| 63 |
$shadow-modal: 0 3px 30px rgba($black, 0.2); |
| 64 |
|
| 65 |
|
| 66 |
/** |
| 67 |
* Editor widths. |
| 68 |
*/ |
| 69 |
|
| 70 |
$sidebar-width: 280px; |
| 71 |
$content-width: 580px; // This is optimized for 70 characters. |
| 72 |
$widget-area-width: 700px; |
| 73 |
|
| 74 |
/** |
| 75 |
* Block UI. |
| 76 |
*/ |
| 77 |
|
| 78 |
$block-toolbar-height: $grid-unit-60; |
| 79 |
$mobile-block-toolbar-height: 44px; |
| 80 |
$block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size. |
| 81 |
$block-spacing: 4px; // Vertical space between blocks. |
| 82 |
$block-side-ui-width: $button-size; // Width of the movers/drag handle UI. |
| 83 |
$block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block. |
| 84 |
$dimmed-opacity: 1; |
| 85 |
|
| 86 |
$block-edge-to-content: 16px; |
| 87 |
$solid-border-space: 12px; |
| 88 |
$dashed-border-space: 6px; |
| 89 |
$block-selected-margin: 3px; |
| 90 |
$block-selected-border-width: 1px; |
| 91 |
$block-selected-padding: 0; |
| 92 |
$block-selected-child-margin: 5px; |
| 93 |
$block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width; |
| 94 |
|
| 95 |
/** |
| 96 |
* Border radii. |
| 97 |
*/ |
| 98 |
|
| 99 |
$radius-round: 50%; |
| 100 |
$radius-block-ui: 2px; |
| 101 |
|
| 102 |
/** |
| 103 |
* Block paddings. |
| 104 |
*/ |
| 105 |
// Padding for blocks with a background color (e.g. paragraph or group). |
| 106 |
$block-bg-padding--v: 1.25em; |
| 107 |
$block-bg-padding--h: 2.375em; |
| 108 |
|
