Skip to content

Commit

Permalink
feat(editor): add styles for resizable images
Browse files Browse the repository at this point in the history 
#2810
  • Loading branch information
@JoomFX @joneff
JoomFX authored and joneff committed Oct 26, 2021
1 parent 33b9801 commit b621712
Show file tree
Hide file tree
Showing 7 changed files with 134 additions and 0 deletions.
8 changes: 8 additions & 0 deletions packages/bootstrap/scss/editor/_variables.scss
View file
Expand Up @@ -13,3 +13,11 @@ $editor-selected-bg: $primary !default;
$editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;

$editor-export-tool-icon-margin-x: .25em !default;

$editor-resize-handle-size: 5px !default;
$editor-resize-handle-border-width: 1px !default;
$editor-resize-handle-border: #000000 !default;
$editor-resize-handle-bg: #ffffff !default;

$editor-selectednode-outline-width: 2px !default;
$editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex-length
8 changes: 8 additions & 0 deletions packages/classic/scss/editor/_variables.scss
View file
Expand Up @@ -13,3 +13,11 @@ $editor-selected-bg: $primary !default;
$editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;

$editor-export-tool-icon-margin-x: .25em !default;

$editor-resize-handle-size: 5px !default;
$editor-resize-handle-border-width: 1px !default;
$editor-resize-handle-border: #000000 !default;
$editor-resize-handle-bg: #ffffff !default;

$editor-selectednode-outline-width: 2px !default;
$editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex-length
84 changes: 84 additions & 0 deletions packages/default/scss/editor/_layout.scss
View file
Expand Up @@ -68,6 +68,89 @@
overflow: auto;
}

// Resizable images
.k-editor-resize-handles-wrapper {
position: absolute;
visibility: hidden;
}
.k-editor-resize-handle {
width: $editor-resize-handle-size;
height: $editor-resize-handle-size;
border-width: $editor-resize-handle-border-width;
border-style: solid;
position: absolute;
visibility: visible;
z-index: 100;

&.northwest {
top: 0;
left: 0;
transform: translate(-50%, -50%);
cursor: nw-resize;
}

&.north {
top: 0;
left: 50%;
transform: translate(-50%, -50%);
cursor: n-resize;
}

&.northeast {
top: 0;
right: 0;
transform: translate(50%, -50%);
cursor: ne-resize;
}

&.southwest {
left: 0;
bottom: 0;
transform: translate(-50%, 50%);
cursor: sw-resize;
}

&.south {
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
cursor: s-resize;
}

&.southeast {
right: 0;
bottom: 0;
transform: translate(50%, 50%);
cursor: se-resize;
}

&.west {
top: 50%;
left: 0;
transform: translate(-50%, -50%);
cursor: w-resize;
}

&.east {
top: 50%;
right: 0;
transform: translate(50%, -50%);
cursor: e-resize;
}
}
.ProseMirror-selectednode { // sass-lint:disable-line class-name-format
outline-width: $editor-selectednode-outline-width;
outline-style: solid;
}
.ProseMirror-hideselection { // sass-lint:disable-line class-name-format
caret-color: transparent;

*::selection,
*::-moz-selection {
background: transparent;
}
}

// Toolbar
.k-editor > .k-toolbar {
border-width: 0 0 $toolbar-border-width 0;
Expand Down Expand Up @@ -141,6 +224,7 @@
padding: $padding-x;
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
outline: none;
white-space: pre-wrap;
Expand Down
9 changes: 9 additions & 0 deletions packages/default/scss/editor/_theme.scss
View file
Expand Up @@ -52,6 +52,15 @@
}
}

// Resizable images
.k-editor-resize-handle {
background-color: $editor-resize-handle-bg;
border-color: $editor-resize-handle-border;
}
.ProseMirror-selectednode { // sass-lint:disable-line class-name-format
outline-color: $editor-selectednode-outline-color;
}


// Insert table
.k-ct-popup {
Expand Down
8 changes: 8 additions & 0 deletions packages/default/scss/editor/_variables.scss
View file
Expand Up @@ -13,3 +13,11 @@ $editor-selected-bg: $primary !default;
$editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;

$editor-export-tool-icon-margin-x: .25em !default;

$editor-resize-handle-size: 5px !default;
$editor-resize-handle-border-width: 1px !default;
$editor-resize-handle-border: #000000 !default;
$editor-resize-handle-bg: #ffffff !default;

$editor-selectednode-outline-width: 2px !default;
$editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex-length
9 changes: 9 additions & 0 deletions packages/material/scss/editor/_theme.scss
View file
Expand Up @@ -49,6 +49,15 @@
}
}

// Resizable images
.k-editor-resize-handle {
background-color: $editor-resize-handle-bg;
border-color: $editor-resize-handle-border;
}
.ProseMirror-selectednode { // sass-lint:disable-line class-name-format
outline-color: $editor-selectednode-outline-color;
}


// Insert table
.k-ct-popup {
Expand Down
8 changes: 8 additions & 0 deletions packages/material/scss/editor/_variables.scss
View file
Expand Up @@ -13,3 +13,11 @@ $editor-selected-bg: $primary !default;
$editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;

$editor-export-tool-icon-margin-x: .5em !default;

$editor-resize-handle-size: 5px !default;
$editor-resize-handle-border-width: 1px !default;
$editor-resize-handle-border: #000000 !default;
$editor-resize-handle-bg: #ffffff !default;

$editor-selectednode-outline-width: 2px !default;
$editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex-length

0 comments on commit b621712

Please sign in to comment.