|
|
@@ -1,5 +1,5 @@
|
|
|
-<div class="document-editor ck-reset ck-rounded-corners">
|
|
|
- <div class="document-editor__toolbar ck-reset_all"></div>
|
|
|
+<div class="document-editor">
|
|
|
+ <div class="document-editor__toolbar"></div>
|
|
|
<div class="document-editor__editable"></div>
|
|
|
</div>
|
|
|
|
|
|
@@ -7,55 +7,74 @@
|
|
|
.document-editor {
|
|
|
border: 1px solid var(--ck-color-base-border);
|
|
|
border-radius: var(--ck-border-radius);
|
|
|
+
|
|
|
+ /* Set vertical boundaries for the document editor. */
|
|
|
max-height: 700px;
|
|
|
|
|
|
+ /* This element is a flex container for easier rendering. */
|
|
|
display: flex;
|
|
|
flex-flow: column nowrap;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.document-editor__toolbar {
|
|
|
+ /* Make sure the toolbar container is always above the editable. */
|
|
|
z-index: 1;
|
|
|
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+
|
|
|
+ /* Create the illusion of the toolbar floating over the editable. */
|
|
|
+ box-shadow: 0 0 5px hsla( 0,0%,0%,.2 );
|
|
|
+
|
|
|
+ /* Use the CKEditor CSS variables to keep the UI consistent. */
|
|
|
border-bottom: 1px solid var(--ck-color-toolbar-border);
|
|
|
}
|
|
|
|
|
|
+ /* Adjust the look of the toolbar inside of the container. */
|
|
|
.document-editor__toolbar .ck-toolbar {
|
|
|
border: 0;
|
|
|
border-radius: 0;
|
|
|
}
|
|
|
|
|
|
+ /* Make the editable container look like the inside of a native word processor app. */
|
|
|
.document-editor__editable {
|
|
|
- padding: calc(2*var(--ck-spacing-large));
|
|
|
+ padding: calc( 2 * var(--ck-spacing-large) );
|
|
|
background: var(--ck-color-base-foreground);
|
|
|
+
|
|
|
+ /* Make it possible to scroll the "page" of the edited content. */
|
|
|
overflow-y: scroll;
|
|
|
}
|
|
|
|
|
|
.document-editor__editable .ck-editor__editable {
|
|
|
+ /* Set the dimensions of the "page". */
|
|
|
width: 15.8cm;
|
|
|
min-height: 21cm;
|
|
|
|
|
|
+ /* Keep the "page" off the boundaries of the container. */
|
|
|
padding: 1cm 2cm 2cm;
|
|
|
- margin: 0.5cm auto;
|
|
|
|
|
|
- border: 1px #D3D3D3 solid;
|
|
|
+ border: 1px hsl( 0,0%,82.7% ) solid;
|
|
|
border-radius: var(--ck-border-radius);
|
|
|
background: white;
|
|
|
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
+ /* The "page" should cast a slight shadow (3D illusion). */
|
|
|
+ box-shadow: 0 0 5px hsla( 0,0%,0%,.1 );
|
|
|
+
|
|
|
+ /* Center the "page". */
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
+ /* Set the default font for the "page" of the content. */
|
|
|
.document-editor .ck-content,
|
|
|
.document-editor .ck-heading-dropdown .ck-list {
|
|
|
font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
}
|
|
|
|
|
|
+ /* Adjust the headings dropdown to host some larger heading styles. */
|
|
|
.document-editor .ck-heading-dropdown .ck-dropdown__panel .ck-list > .ck-list__item {
|
|
|
- line-height: calc(1.2 * var(--ck-line-height-base)*var(--ck-font-size-base));
|
|
|
+ line-height: calc( 1.2 * var(--ck-line-height-base) * var(--ck-font-size-base) );
|
|
|
min-width: 8em;
|
|
|
}
|
|
|
|
|
|
+ /* Set the styles for the "Heading 1". */
|
|
|
.document-editor .ck-content h2,
|
|
|
.document-editor .ck-heading-dropdown .ck-heading_heading1 {
|
|
|
font-size: 2.18em;
|
|
|
@@ -63,26 +82,29 @@
|
|
|
|
|
|
.document-editor .ck-content h2 {
|
|
|
line-height: 1.37em;
|
|
|
- padding-top: 0.342em;
|
|
|
- margin-bottom: 0.142em;
|
|
|
+ padding-top: .342em;
|
|
|
+ margin-bottom: .142em;
|
|
|
}
|
|
|
|
|
|
+ /* Set the styles for the "Heading 2". */
|
|
|
.document-editor .ck-content h3,
|
|
|
.document-editor .ck-heading-dropdown .ck-heading_heading2 {
|
|
|
font-size: 1.75em;
|
|
|
- color: hsl(203, 100%, 50%);
|
|
|
+ color: hsl( 203, 100%, 50% );
|
|
|
}
|
|
|
|
|
|
.document-editor .ck-heading-dropdown .ck-heading_heading2.ck-list__item_active {
|
|
|
color: var(--ck-color-list-item-text-active);
|
|
|
}
|
|
|
|
|
|
+ /* Set the styles for the "Heading 2". */
|
|
|
.document-editor .ck-content h3 {
|
|
|
line-height: 1.86em;
|
|
|
- padding-top: 0.171em;
|
|
|
- margin-bottom: 0.357em;
|
|
|
+ padding-top: .171em;
|
|
|
+ margin-bottom: .357em;
|
|
|
}
|
|
|
|
|
|
+ /* Set the styles for the "Heading 3". */
|
|
|
.document-editor .ck-content h4,
|
|
|
.document-editor .ck-heading-dropdown .ck-heading_heading3 {
|
|
|
font-size: 1.31em;
|
|
|
@@ -90,25 +112,27 @@
|
|
|
|
|
|
.document-editor .ck-content h4 {
|
|
|
line-height: 1.24em;
|
|
|
- padding-top: 0.286em;
|
|
|
- margin-bottom: 0.952em;
|
|
|
+ padding-top: .286em;
|
|
|
+ margin-bottom: .952em;
|
|
|
}
|
|
|
|
|
|
+ /* Set the styles for the "Paragraph". */
|
|
|
.document-editor .ck-content p,
|
|
|
.document-editor .ck-heading-dropdown .ck-heading_paragraph {
|
|
|
- font-size: 1.00em;
|
|
|
+ font-size: 1em;
|
|
|
}
|
|
|
|
|
|
.document-editor .ck-content p {
|
|
|
line-height: 1.63em;
|
|
|
- padding-top: 0.500em;
|
|
|
+ padding-top: .5em;
|
|
|
margin-bottom: 1.13em;
|
|
|
}
|
|
|
|
|
|
+ /* Make the block quoted text serif with some additional spacing. */
|
|
|
.document-editor .ck-content blockquote {
|
|
|
font-family: Georgia, serif;
|
|
|
- margin-left: calc(2*var(--ck-spacing-large));
|
|
|
- margin-right: calc(2*var(--ck-spacing-large));
|
|
|
+ margin-left: calc( 2 * var(--ck-spacing-large) );
|
|
|
+ margin-right: calc( 2 * var(--ck-spacing-large) );
|
|
|
}
|
|
|
|
|
|
.document-editor__data {
|