UNPKG

2.01 kBSCSSView Raw
1.edit-post-text-editor__body {
2 padding-top: $grid-size * 5;
3
4 @include break-small() {
5 padding-top: ($grid-size * 5) + $admin-bar-height-big;
6 }
7
8 @include break-medium() {
9 padding-top: $grid-size * 5;
10
11 body.is-fullscreen-mode & {
12 padding-top: $grid-size * 5;
13 }
14 }
15}
16
17.edit-post-text-editor {
18 width: 100%;
19 max-width: calc(100% - #{$grid-size-large * 2});
20 margin-left: $grid-size-large;
21 margin-right: $grid-size-large;
22
23 @include break-small() {
24 max-width: $content-width;
25 margin-left: auto;
26 margin-right: auto;
27 }
28
29 // Always show outlines in code editor
30 .editor-post-title__block {
31 textarea {
32 border: $border-width solid $light-gray-500;
33 margin-bottom: 4px;
34 padding: $block-padding;
35 }
36
37 // Hide the thick left border in the code editor.
38 &:not(.is-focus-mode):not(.has-fixed-toolbar):not(.is-selected) .editor-post-title__input:hover,
39 &:not(.is-focus-mode):not(.has-fixed-toolbar).is-selected .editor-post-title__input {
40 box-shadow: none;
41 border-left-width: $border-width;
42 }
43
44 textarea:hover,
45 &.is-selected textarea {
46 box-shadow: 0 0 0 $border-width $light-gray-500;
47 }
48 }
49
50 .editor-post-permalink {
51 margin-top: -6px;
52
53 // Hide the thick left border in the code editor.
54 box-shadow: none;
55 border: none;
56 outline: $border-width solid $light-gray-800;
57 }
58
59 @include break-small() {
60 .editor-post-title,
61 .editor-post-title__block {
62 padding: 0;
63 }
64 }
65
66 .editor-post-text-editor {
67 padding: $block-padding;
68 min-height: 200px;
69 line-height: 1.8;
70 }
71
72 // Make room for toolbar.
73 padding-top: $block-controls-height + $grid-size;
74
75 // Exit Code Editor toolbar.
76 .edit-post-text-editor__toolbar {
77 position: absolute;
78 top: $grid-size;
79 left: 0;
80 right: 0;
81 height: $block-controls-height;
82 line-height: $block-controls-height;
83 padding: 0 $grid-size 0 $grid-size-large;
84 display: flex;
85
86 h2 {
87 margin: 0 auto 0 0;
88 font-size: $default-font-size;
89 color: $dark-gray-500;
90 }
91
92 .components-icon-button svg {
93 order: 1;
94 }
95 }
96}