feat(editor): add find and replace dialog styles

telerik · Sep 3, 2020 · 4676a4d · 4676a4d
1 parent 923bc83
commit 4676a4d
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 1 deletion.
diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss
@@ -2950,6 +2950,13 @@ $editor-line-height: $line-height !default;
 $editor-placeholder-text: $input-placeholder-text !default;
 $editor-placeholder-opacity: $input-placeholder-opacity !default;
 
+$editor-selected-text: $primary-contrast !default;
+$editor-selected-bg: $primary !default;
+
+$editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;
+
+$editor-find-line-bg: $secondary;
+
 
 // Gantt
 $gantt-border-width: 1px !default;

diff --git a/packages/classic/scss/_variables.scss b/packages/classic/scss/_variables.scss
@@ -2912,6 +2912,12 @@ $editor-line-height: $line-height !default;
 $editor-placeholder-text: $input-placeholder-text !default;
 $editor-placeholder-opacity: $input-placeholder-opacity !default;
 
+$editor-selected-text: $primary-contrast !default;
+$editor-selected-bg: $primary !default;
+
+$editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;
+
+$editor-find-line-bg: $secondary;
 
 // Gantt
 $gantt-border-width: 1px !default;

diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss
@@ -2968,6 +2968,13 @@ $editor-line-height: $line-height !default;
 $editor-placeholder-text: $input-placeholder-text !default;
 $editor-placeholder-opacity: $input-placeholder-opacity !default;
 
+$editor-selected-text: $primary-contrast !default;
+$editor-selected-bg: $primary !default;
+
+$editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;
+
+$editor-find-line-bg: $secondary;
+
 
 // Gantt
 $gantt-border-width: 1px !default;

diff --git a/packages/default/scss/editor/_layout.scss b/packages/default/scss/editor/_layout.scss
@@ -238,10 +238,48 @@
             border-width: 0;
         }
     }
-}
 
+    // Find and replace dialog
+    .k-editor-find-replace {
+        .k-content {
+            position: relative;
+        }
+
+        .k-edit-form-container {
+            display: inline-block;
+
+            .k-edit-label {
+                text-align: left;
+            }
+        }
 
+        .k-action-buttons {
+            padding: 0;
+        }
+
+        .k-search-options {
+            display: flex;
+            flex-direction: column;
+            padding: 10px 0 40px 0;
 
+            > span {
+                padding-bottom: $padding-y;
+            }
+        }
+
+        .k-matches-container {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+        }
+    }
+}
 
 @include exports( "editor/dialog/layout" ) {
 

diff --git a/packages/default/scss/editor/_theme.scss b/packages/default/scss/editor/_theme.scss
@@ -64,4 +64,33 @@
         }
     }
 
+    // Content
+    .k-editor-content {
+
+        // Selection
+        .k-text-selected,
+        &::selection {
+            @include fill (
+                $color: $editor-selected-text,
+                $bg: $editor-selected-bg
+            );
+        }
+
+        .k-text-highlighted {
+            @include fill (
+                $bg: $editor-highlighted-bg
+            );
+        }
+    }
+
+    // Find and replace dialog
+    .k-editor-find-replace {
+        .k-matches-container {
+            @include fill (
+                $bg: $editor-find-line-bg
+            );
+        }
+
+    }
+
 }
diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss
@@ -3007,6 +3007,13 @@ $editor-line-height: $line-height !default;
 $editor-placeholder-text: $input-placeholder-text !default;
 $editor-placeholder-opacity: $input-placeholder-opacity !default;
 
+$editor-selected-text: $primary-contrast !default;
+$editor-selected-bg: $primary !default;
+
+$editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;
+
+$editor-find-line-bg: transparent;
+
 // Gantt
 $gantt-border-width: 1px !default;
 $gantt-font-family: $font-family !default;

diff --git a/packages/material/scss/editor/_layout.scss b/packages/material/scss/editor/_layout.scss
@@ -10,6 +10,13 @@
             line-height: $line-height;
         }
     }
+
+    // Find and replace dialog
+    .k-editor-find-replace {
+        .k-matches-container {
+            text-transform: uppercase;
+        }
+    }
 }
 
 

diff --git a/packages/material/scss/editor/_theme.scss b/packages/material/scss/editor/_theme.scss
@@ -56,4 +56,33 @@
             @include fill( $selected-text, $selected-bg, $selected-border, none );
         }
     }
+
+    // Content
+    .k-editor-content {
+
+        // Selection
+        .k-text-selected,
+        &::selection {
+            @include fill (
+                $color: $editor-selected-text,
+                $bg: $editor-selected-bg
+            );
+        }
+
+        .k-text-highlighted {
+            @include fill (
+                $bg: $editor-highlighted-bg
+            );
+        }
+    }
+
+    // Find and replace dialog
+    .k-editor-find-replace {
+        .k-matches-container {
+            @include fill (
+                $bg: $editor-find-line-bg
+            );
+        }
+
+    }
 }