@progress/kendo-theme-bootstrap 4.41.3-dev.3 → 4.42.1-dev.1

package/modules/@progress/kendo-theme-default/scss/editor/_layout.scss

@@ -62,6 +62,94 @@
         padding: 0;
     }
 
+    // Resizable editor
+    .k-editor-resizable {
+        resize: both;
+        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 {
@@ -136,6 +224,7 @@
             padding: $padding-x;
             width: 100%;
             height: 100%;
+            position: relative;
             box-sizing: border-box;
             outline: none;
             white-space: pre-wrap;

package/modules/@progress/kendo-theme-default/scss/editor/_theme.scss

@@ -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 {

package/modules/@progress/kendo-theme-default/scss/editor/_variables.scss

@@ -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

package/modules/@progress/kendo-theme-default/scss/fab/_layout.scss

@@ -149,6 +149,8 @@
     }
 
     .k-fab-item-icon {
+        width: $fab-item-icon-width;
+        height: $fab-item-icon-height;
         padding: $fab-item-icon-padding-y $fab-item-icon-padding-x;
         border-width: $fab-item-icon-border-width;
         border-radius: $fab-item-icon-border-radius;

package/modules/@progress/kendo-theme-default/scss/fab/_theme.scss

@@ -1,12 +1,11 @@
 @include exports( "fab/theme" ) {
-    // FAB
-    .k-fab {
-        @include box-shadow($fab-shadow);
-    }
 
     // Normal state
     @each $name, $color in $fab-theme-colors {
         .k-fab-#{$name} {
+            @include box-shadow($fab-shadow);
+            outline: $fab-border-width solid $color;
+            outline-offset: -$fab-border-width;
             border-color: $color;
             color: contrast-wcag( $color );
             background-color: $color;
@@ -24,10 +23,14 @@
     }
 
     // Focus state
-    .k-fab.k-state-focus,
-    .k-fab.k-state-focused,
-    .k-fab:focus {
-        @include box-shadow($fab-focus-shadow);
+    @each $name, $color in $fab-theme-colors {
+        .k-fab-#{$name}.k-state-focus,
+        .k-fab-#{$name}.k-state-focused,
+        .k-fab-#{$name}:focus {
+            outline-style: solid;
+            outline-width: 2px;
+            outline-color: rgba( $color, .3 );
+        }
     }
 
     // Active state
@@ -35,23 +38,20 @@
         .k-state-active.k-fab-#{$name},
         .k-state-selected.k-fab-#{$name},
         .k-fab-#{$name}:active {
-            border-color: try-shade( $color, 1);
-            background-color: try-shade( $color, 1);
-            box-shadow: $fab-shadow, 0px 3px 4px rgba($color, .4);
+            @include box-shadow($fab-active-shadow);
+            border-color: try-shade( $color, 1.5);
+            background-color: try-shade( $color, 1.5);
         }
     }
 
     // Disabled state
-    .k-fab.k-state-disabled,
-    .k-fab:disabled {
-        @include box-shadow($fab-disabled-shadow);
-        opacity: 1;
-    }
-
     @each $name, $color in $fab-theme-colors {
         .k-state-disabled.k-fab-#{$name},
         .k-fab-#{$name}:disabled {
-            background-color: tint( $color, 5 );
+            @include box-shadow($fab-disabled-shadow);
+            background-color: try-tint( $color, 5 );
+            color: try-tint( contrast-wcag( $color ), 5 );
+            opacity: 1;
         }
     }
 
@@ -63,6 +63,7 @@
             $fab-item-border
         );
         @include box-shadow($fab-item-shadow);
+
     }
     .k-fab-item-icon {
         @include fill(
@@ -71,6 +72,8 @@
             $fab-item-icon-border
         );
         @include box-shadow($fab-item-shadow);
+        outline: $fab-border-width solid rgba(0, 0, 0, .08);
+        outline-offset: -$fab-border-width;
     }
 
     // Hover state
@@ -88,15 +91,17 @@
     .k-fab-item.k-state-focus .k-fab-item-icon,
     .k-fab-item.k-state-focused .k-fab-item-text,
     .k-fab-item.k-state-focused .k-fab-item-icon {
-        @include box-shadow($fab-item-focus-shadow);
+        outline-style: solid;
+        outline-width: 2px;
+        outline-color: rgba(0, 0, 0, .08);
     }
 
     // Active state
     .k-fab-item.k-state-active .k-fab-item-icon,
     .k-fab-item:active .k-fab-item-icon {
+        @include box-shadow($fab-item-active-shadow);
         border-color: try-shade( $fab-item-icon-border, 1);
         background-color: try-shade( $fab-item-icon-bg, 1);
-        box-shadow: $fab-shadow, 0px 3px 4px rgba($fab-item-icon-bg, .4);
     }
 
     // Disabled state
@@ -106,21 +111,9 @@
 
         .k-fab-item-text,
         .k-fab-item-icon {
-            color: tint( $fab-item-text, 6 );
             @include box-shadow($fab-item-disabled-shadow);
-        }
-    }
-
-    // Disabled + Focus state
-    .k-fab-item:focus,
-    .k-fab-item.k-state-focus,
-    .k-fab-item.k-state-focused {
-        &:disabled,
-        &.k-state-disabled {
-            .k-fab-item-text,
-            .k-fab-item-icon {
-                @include box-shadow($fab-item-disabled-focus-shadow);
-            }
+            background-color: try-tint( $fab-item-bg, 5 );
+            color: try-tint( $fab-item-text, 5 );
         }
     }
 

package/modules/@progress/kendo-theme-default/scss/fab/_variables.scss

@@ -1,8 +1,8 @@
 // Floating Action Button
 $fab-padding-x: map-get( $spacing, 4 ) !default;
 $fab-padding-y: $fab-padding-x !default;
-$fab-border-width: 0px !default;
-$fab-border-radius: $border-radius * 2 !default;
+$fab-border-width: 1px !default;
+$fab-border-radius: $border-radius !default;
 $fab-font-family: $font-family !default;
 $fab-font-size: $font-size !default;
 $fab-line-height: $line-height !default;
@@ -18,7 +18,7 @@ $fab-padding-y-lg: ( $fab-padding-y * 1.5 ) !default;
 
 $fab-icon-width: 20px !default;
 $fab-icon-height: $fab-icon-width !default;
-$fab-icon-spacing: map-get( $spacing, 1 ) !default;
+$fab-icon-spacing: map-get( $spacing, 1 ) / 2 !default;
 
 $fab-items-padding-x: 0px !default;
 $fab-items-padding-y: map-get( $spacing, 4 ) !default;
@@ -28,12 +28,14 @@ $fab-item-text-padding-y: $fab-item-text-padding-x !default;
 $fab-item-text-border-width: 1px !default;
 $fab-item-text-border-radius: 2px !default;
 $fab-item-text-font-size: $font-size-xs !default;
-$fab-item-text-line-height: 1 !default;
+$fab-item-text-line-height: 1.2 !default;
 
 $fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
 $fab-item-icon-padding-y: $fab-item-icon-padding-x !default;
 $fab-item-icon-border-width: 0 !default;
 $fab-item-icon-border-radius: 50% !default;
+$fab-item-icon-width: 20px !default;
+$fab-item-icon-height: $fab-item-icon-width !default;
 
 $fab-sizes: (
     sm: map-get( $spacing, 4 ),
@@ -44,21 +46,20 @@ $fab-sizes: (
 $fab-theme-colors: $theme-colors !default;
 
 $fab-shadow: 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2) !default;
-$fab-focus-shadow: 0 1px 10px rgba(#000000, .22), 0 4px 5px rgba(#000000, .24), 0 2px 4px rgba(#000000, .2) !default;
-$fab-disabled-shadow: 0 6px 10px rgba(0, 0, 0, .06), 0 1px 18px rgba(0, 0, 0, .06), 0 3px 5px rgba(0, 0, 0, .08) !default;
+$fab-disabled-shadow: 0 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px try-tint( rgba(0, 0, 0, .2), .5 ) !default;
+$fab-active-shadow: null !default;
 
 $fab-item-text: $component-text !default;
 $fab-item-bg: $component-bg !default;
 $fab-item-border: $component-border !default;
 
-$fab-item-icon-text: contrast-wcag( $light ) !default;
-$fab-item-icon-bg: $light !default;
-$fab-item-icon-border: $light !default;
+$fab-item-icon-text: $button-text !default;
+$fab-item-icon-bg: $button-bg !default;
+$fab-item-icon-border: $button-border !default;
 
 $fab-item-shadow: $fab-shadow !default;
-$fab-item-focus-shadow: $fab-focus-shadow !default;
 $fab-item-disabled-shadow: $fab-disabled-shadow !default;
-$fab-item-disabled-focus-shadow: 0 1px 10px rgba(#000000, .12), 0 4px 5px rgba(#000000, .12), 0 2px 4px rgba(#000000, .08) !default;
+$fab-item-active-shadow: $fab-active-shadow !default;
 
 $fab-border-width-sm: $fab-border-width !default;
 $fab-line-height-sm: $fab-line-height !default;

package/modules/@progress/kendo-theme-default/scss/forms/_layout.scss

@@ -159,7 +159,7 @@
         .k-maskedtextbox,
         .k-textbox-container,
         .k-floating-label-container {
-            display: flex;
+            display: inline-flex;
             width: 100%;
         }
 
@@ -220,6 +220,7 @@
                 margin-right: $horizontal-form-label-margin-x;
                 padding-top: $horizontal-form-label-padding-top;
                 width: $horizontal-form-label-width;
+                text-align: end;
                 flex-direction: column;
                 align-items: $horizontal-form-label-align;
                 justify-content: flex-start;

package/modules/@progress/kendo-theme-default/scss/icons/_layout.scss

@@ -642,6 +642,7 @@
     .k-i-justify-between-vertical::before { content: "\e552"; }
     .k-i-justify-content-around-alt::before { content: "\e553"; }
     .k-i-justify-around-vertical::before { content: "\e553"; }
+    .k-i-color-canvas::before { content: "\e554"; }
     .k-i-file-wrench::before { content: "\e600"; }
     .k-i-page-properties::before { content: "\e600"; }
     .k-i-bold::before { content: "\e601"; }