npm - @syncfusion/blazor-themes - Versions diffs - 22.2.11 → 23.1.36 - Mend

@syncfusion/blazor-themes 22.2.11 → 23.1.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (365) hide show

package/SCSS-Themes/calendars/daterangepicker/material3-dark.scss CHANGED Viewed

@@ -261,22 +261,25 @@ $modal-range-footer-display: none !default;
 $modal-range-landscape-header-height: 27vh !default;
 $modal-range-landscape-conetent-overflow: auto !default;
 $modal-range-table-display: table !default;
-$modal-range-start-end-size: 38px !default;
+$modal-range-start-end-size: 28px !default;
+$modal-month-name-line-height: 44px !default;
+$modal-header-month-name-left-width: -25vw !default;
+$modal-header-month-name-width: 50vw !default;
 // header styles for presets
 $modal-range-presets-header-height: 10% !default;
 $modal-range-presets-portrait-height: 90% !default;
 $modal-range-presets-landscape-height: 85% !default;
-$modal-range-header-padding: 2.5vh 2.5vw !default;
+$modal-range-header-padding: 2.5vh 2.5vw 2.5vh 1.5vw !default;
 $modal-range-header-display-style: flex !default;
 $modal-range-header-content-align: center !default;
-$modal-range-header-portrait-font-size: 3vh !default;
+$modal-range-header-portrait-font-size: 2vh !default;
 $modal-close-icon-float: left !default;
 $modal-portrait-content-padding: 1vh 2vw !default;
 $modal-range-header-title-transform: uppercase !default;
 $modal-range-header-border-bottom: none !default;
 $modal-range-header-landscape-height: 15% !default;
-$modal-range-header-landscape-font-size: 2vw !default;
+$modal-range-header-landscape-font-size: 18px !default;
 $modal-landscape-padding: 1vh 1vw !default;
 // modal dialog colors
@@ -284,7 +287,7 @@ $modal-range-header-bg-color: rgba($primary) !default;
 $modal-range-header-text-color: rgba($primary-text-color) !default;
 // tablet device style changes for modal popup
-$modal-range-tablet-font-size: 24px !default;
+$modal-range-tablet-font-size: 18px !default;
 $range-header-font-size: 16px !default;
@@ -1006,12 +1009,36 @@ $range-header-font-size: 16px !default;
                 padding: $modal-range-portrait-month-header-padding;
                 line-height: $modal-range-month-header-line-height;
-                #{if(&, '&', '*')} .e-prev,
+                #{if(&, '&', '*')} .e-prev {
+                  height: $modal-range-prev-next-icon-size;
+                  width: $modal-range-prev-next-icon-size;
+                  @if ($skin-name == 'Material3') {
+                    margin-right: 60vw;
+                    vertical-align: inherit;
+                    font-size: $modal-range-tablet-font-size
+                  }
+                  @media screen and (orientation: landscape) {
+                    @if ($skin-name == 'Material3') {
+                      margin-right: 78vw;
+                      vertical-align: inherit;
+                    }
+                  }
+                  #{if(&, '&', '*')} span {
+                    @media (min-device-width: 768px) {
+                      font-size: 18px;
+                      padding: 11px;
+                    }
+                  }
+                }
                 #{if(&, '&', '*')} .e-next {
                   height: $modal-range-prev-next-icon-size;
                   width: $modal-range-prev-next-icon-size;
+                  @if ($skin-name == 'Material3') {
+                    margin-right: 42px;
+                  }
-                  #{if(&, '&', '*')} span{
+                  #{if(&, '&', '*')} span {
                     padding: $modal-range-prev-next-icon-padding;
                     line-height: $modal-range-prev-next-icon-line-height;
                     @media (min-device-width: 768px) {
@@ -1022,10 +1049,26 @@ $range-header-font-size: 16px !default;
                 #{if(&, '&', '*')} .e-title {
                   @media (max-height: 600px) {
+                    @if ($skin-name == 'Material3') {
+                      margin-left: $modal-header-month-name-left-width;
+                      position: absolute;
+                      text-align: center;
+                      vertical-align: middle;
+                      width: $modal-header-month-name-width;
+                      line-height: $modal-month-name-line-height;
+                  }
                     line-height: $modal-range-month-landscape-title-line-height;
                   }
                   @media (min-height: 600px) {
+                    @if ($skin-name == 'Material3') {
+                      margin-left: $modal-header-month-name-left-width;
+                      position: absolute;
+                      text-align: center;
+                      vertical-align: middle;
+                      width: $modal-header-month-name-width;
+                      line-height: $modal-month-name-line-height;
+                  }
                     line-height: $modal-range-month-header-title-line-height;
                   }
@@ -1073,14 +1116,6 @@ $range-header-font-size: 16px !default;
                 }
               }
             }
-            #{if( &, '&', '*')} .e-footer {
-              display: block;
-              #{if( &, '&', '*')} .e-btn.e-apply,
-              #{if( &, '&', '*')} .e-btn.e-cancel {
-                float: right;
-              }
-            }
         }
         #{if(&, '&', '*')} .e-calendar-container {
@@ -1164,13 +1199,10 @@ $range-header-font-size: 16px !default;
     #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
-      #{if( &, '&', '*')} .e-date-range-container .e-range-header.e-blazor-device {
-        @media (max-height: 600px) {
-            height: 23vh;
-        }
-        @media (min-height: 600px) {
-          height: 20vh;
+      #{if( &, '&', '*')} .e-date-range-container .e-range-header .e-model-header-wrapper .e-btn {
+        padding: 0;
+        @media (min-device-width: 768px) {
+          font-size: $modal-range-header-landscape-font-size;
         }
       }
@@ -1245,8 +1277,8 @@ $range-header-font-size: 16px !default;
           }
           #{if(&, '&', '*')} .e-day-span {
-            margin: 5px 0;
-            font-size: 20px;
+            margin: 8px 0;
+            font-size: 16px;
           }
         }

package/SCSS-Themes/calendars/daterangepicker/material3.scss CHANGED Viewed

@@ -261,22 +261,25 @@ $modal-range-footer-display: none !default;
 $modal-range-landscape-header-height: 27vh !default;
 $modal-range-landscape-conetent-overflow: auto !default;
 $modal-range-table-display: table !default;
-$modal-range-start-end-size: 38px !default;
+$modal-range-start-end-size: 28px !default;
+$modal-month-name-line-height: 44px !default;
+$modal-header-month-name-left-width: -25vw !default;
+$modal-header-month-name-width: 50vw !default;
 // header styles for presets
 $modal-range-presets-header-height: 10% !default;
 $modal-range-presets-portrait-height: 90% !default;
 $modal-range-presets-landscape-height: 85% !default;
-$modal-range-header-padding: 2.5vh 2.5vw !default;
+$modal-range-header-padding: 2.5vh 2.5vw 2.5vh 1.5vw !default;
 $modal-range-header-display-style: flex !default;
 $modal-range-header-content-align: center !default;
-$modal-range-header-portrait-font-size: 3vh !default;
+$modal-range-header-portrait-font-size: 2vh !default;
 $modal-close-icon-float: left !default;
 $modal-portrait-content-padding: 1vh 2vw !default;
 $modal-range-header-title-transform: uppercase !default;
 $modal-range-header-border-bottom: none !default;
 $modal-range-header-landscape-height: 15% !default;
-$modal-range-header-landscape-font-size: 2vw !default;
+$modal-range-header-landscape-font-size: 18px !default;
 $modal-landscape-padding: 1vh 1vw !default;
 // modal dialog colors
@@ -284,7 +287,7 @@ $modal-range-header-bg-color: rgba($primary) !default;
 $modal-range-header-text-color: rgba($primary-text-color) !default;
 // tablet device style changes for modal popup
-$modal-range-tablet-font-size: 24px !default;
+$modal-range-tablet-font-size: 18px !default;
 $range-header-font-size: 16px !default;
@@ -1006,12 +1009,36 @@ $range-header-font-size: 16px !default;
                 padding: $modal-range-portrait-month-header-padding;
                 line-height: $modal-range-month-header-line-height;
-                #{if(&, '&', '*')} .e-prev,
+                #{if(&, '&', '*')} .e-prev {
+                  height: $modal-range-prev-next-icon-size;
+                  width: $modal-range-prev-next-icon-size;
+                  @if ($skin-name == 'Material3') {
+                    margin-right: 60vw;
+                    vertical-align: inherit;
+                    font-size: $modal-range-tablet-font-size
+                  }
+                  @media screen and (orientation: landscape) {
+                    @if ($skin-name == 'Material3') {
+                      margin-right: 78vw;
+                      vertical-align: inherit;
+                    }
+                  }
+                  #{if(&, '&', '*')} span {
+                    @media (min-device-width: 768px) {
+                      font-size: 18px;
+                      padding: 11px;
+                    }
+                  }
+                }
                 #{if(&, '&', '*')} .e-next {
                   height: $modal-range-prev-next-icon-size;
                   width: $modal-range-prev-next-icon-size;
+                  @if ($skin-name == 'Material3') {
+                    margin-right: 42px;
+                  }
-                  #{if(&, '&', '*')} span{
+                  #{if(&, '&', '*')} span {
                     padding: $modal-range-prev-next-icon-padding;
                     line-height: $modal-range-prev-next-icon-line-height;
                     @media (min-device-width: 768px) {
@@ -1022,10 +1049,26 @@ $range-header-font-size: 16px !default;
                 #{if(&, '&', '*')} .e-title {
                   @media (max-height: 600px) {
+                    @if ($skin-name == 'Material3') {
+                      margin-left: $modal-header-month-name-left-width;
+                      position: absolute;
+                      text-align: center;
+                      vertical-align: middle;
+                      width: $modal-header-month-name-width;
+                      line-height: $modal-month-name-line-height;
+                  }
                     line-height: $modal-range-month-landscape-title-line-height;
                   }
                   @media (min-height: 600px) {
+                    @if ($skin-name == 'Material3') {
+                      margin-left: $modal-header-month-name-left-width;
+                      position: absolute;
+                      text-align: center;
+                      vertical-align: middle;
+                      width: $modal-header-month-name-width;
+                      line-height: $modal-month-name-line-height;
+                  }
                     line-height: $modal-range-month-header-title-line-height;
                   }
@@ -1073,14 +1116,6 @@ $range-header-font-size: 16px !default;
                 }
               }
             }
-            #{if( &, '&', '*')} .e-footer {
-              display: block;
-              #{if( &, '&', '*')} .e-btn.e-apply,
-              #{if( &, '&', '*')} .e-btn.e-cancel {
-                float: right;
-              }
-            }
         }
         #{if(&, '&', '*')} .e-calendar-container {
@@ -1164,13 +1199,10 @@ $range-header-font-size: 16px !default;
     #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
-      #{if( &, '&', '*')} .e-date-range-container .e-range-header.e-blazor-device {
-        @media (max-height: 600px) {
-            height: 23vh;
-        }
-        @media (min-height: 600px) {
-          height: 20vh;
+      #{if( &, '&', '*')} .e-date-range-container .e-range-header .e-model-header-wrapper .e-btn {
+        padding: 0;
+        @media (min-device-width: 768px) {
+          font-size: $modal-range-header-landscape-font-size;
         }
       }
@@ -1245,8 +1277,8 @@ $range-header-font-size: 16px !default;
           }
           #{if(&, '&', '*')} .e-day-span {
-            margin: 5px 0;
-            font-size: 20px;
+            margin: 8px 0;
+            font-size: 16px;
           }
         }

package/SCSS-Themes/calendars/daterangepicker/tailwind-dark.scss CHANGED Viewed

@@ -272,22 +272,22 @@ $modal-range-footer-display: none !default;
 $modal-range-landscape-header-height: 27vh !default;
 $modal-range-landscape-conetent-overflow: auto !default;
 $modal-range-table-display: table !default;
-$modal-range-start-end-size: 38px !default;
+$modal-range-start-end-size: 28px !default;
 // header styles for presets
 $modal-range-presets-header-height: 10% !default;
 $modal-range-presets-portrait-height: 90% !default;
 $modal-range-presets-landscape-height: 85% !default;
-$modal-range-header-padding: 2.5vh 2.5vw !default;
+$modal-range-header-padding: 2.5vh 2.5vw 2.5vh 1.5vw !default;
 $modal-range-header-display-style: flex !default;
 $modal-range-header-content-align: center !default;
-$modal-range-header-portrait-font-size: 3vh !default;
+$modal-range-header-portrait-font-size: 2vh !default;
 $modal-close-icon-float: left !default;
 $modal-portrait-content-padding: 1vh 2vw !default;
 $modal-range-header-title-transform: capitalize !default;
 $modal-range-header-border-bottom: none !default;
 $modal-range-header-landscape-height: 15% !default;
-$modal-range-header-landscape-font-size: 2vw !default;
+$modal-range-header-landscape-font-size: 18px !default;
 $modal-landscape-padding: 1vh 1vw !default;
 // modal dialog colors
@@ -295,7 +295,7 @@ $modal-range-header-bg-color: $content-bg-color-alt1 !default;
 $modal-range-header-text-color: $content-text-color-alt1 !default;
 // tablet device style changes for modal popup
-$modal-range-tablet-font-size: 24px !default;
+$modal-range-tablet-font-size: 18px !default;
 $range-header-font-size: 16px !default;
@@ -1015,12 +1015,36 @@ $range-header-font-size: 16px !default;
                 padding: $modal-range-portrait-month-header-padding;
                 line-height: $modal-range-month-header-line-height;
-                #{if(&, '&', '*')} .e-prev,
+                #{if(&, '&', '*')} .e-prev {
+                  height: $modal-range-prev-next-icon-size;
+                  width: $modal-range-prev-next-icon-size;
+                  @if ($skin-name == 'Material3') {
+                    margin-right: 60vw;
+                    vertical-align: inherit;
+                    font-size: $modal-range-tablet-font-size
+                  }
+                  @media screen and (orientation: landscape) {
+                    @if ($skin-name == 'Material3') {
+                      margin-right: 78vw;
+                      vertical-align: inherit;
+                    }
+                  }
+                  #{if(&, '&', '*')} span {
+                    @media (min-device-width: 768px) {
+                      font-size: 18px;
+                      padding: 11px;
+                    }
+                  }
+                }
                 #{if(&, '&', '*')} .e-next {
                   height: $modal-range-prev-next-icon-size;
                   width: $modal-range-prev-next-icon-size;
+                  @if ($skin-name == 'Material3') {
+                    margin-right: 42px;
+                  }
-                  #{if(&, '&', '*')} span{
+                  #{if(&, '&', '*')} span {
                     padding: $modal-range-prev-next-icon-padding;
                     line-height: $modal-range-prev-next-icon-line-height;
                     @media (min-device-width: 768px) {
@@ -1031,10 +1055,26 @@ $range-header-font-size: 16px !default;
                 #{if(&, '&', '*')} .e-title {
                   @media (max-height: 600px) {
+                    @if ($skin-name == 'Material3') {
+                      margin-left: $modal-header-month-name-left-width;
+                      position: absolute;
+                      text-align: center;
+                      vertical-align: middle;
+                      width: $modal-header-month-name-width;
+                      line-height: $modal-month-name-line-height;
+                  }
                     line-height: $modal-range-month-landscape-title-line-height;
                   }
                   @media (min-height: 600px) {
+                    @if ($skin-name == 'Material3') {
+                      margin-left: $modal-header-month-name-left-width;
+                      position: absolute;
+                      text-align: center;
+                      vertical-align: middle;
+                      width: $modal-header-month-name-width;
+                      line-height: $modal-month-name-line-height;
+                  }
                     line-height: $modal-range-month-header-title-line-height;
                   }
@@ -1082,14 +1122,6 @@ $range-header-font-size: 16px !default;
                 }
               }
             }
-            #{if( &, '&', '*')} .e-footer {
-              display: block;
-              #{if( &, '&', '*')} .e-btn.e-apply,
-              #{if( &, '&', '*')} .e-btn.e-cancel {
-                float: right;
-              }
-            }
         }
         #{if(&, '&', '*')} .e-calendar-container {
@@ -1173,13 +1205,10 @@ $range-header-font-size: 16px !default;
     #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
-      #{if( &, '&', '*')} .e-date-range-container .e-range-header.e-blazor-device {
-        @media (max-height: 600px) {
-            height: 23vh;
-        }
-        @media (min-height: 600px) {
-          height: 20vh;
+      #{if( &, '&', '*')} .e-date-range-container .e-range-header .e-model-header-wrapper .e-btn {
+        padding: 0;
+        @media (min-device-width: 768px) {
+          font-size: $modal-range-header-landscape-font-size;
         }
       }
@@ -1254,8 +1283,8 @@ $range-header-font-size: 16px !default;
           }
           #{if(&, '&', '*')} .e-day-span {
-            margin: 5px 0;
-            font-size: 20px;
+            margin: 8px 0;
+            font-size: 16px;
           }
         }

package/SCSS-Themes/calendars/daterangepicker/tailwind.scss CHANGED Viewed

@@ -272,22 +272,22 @@ $modal-range-footer-display: none !default;
 $modal-range-landscape-header-height: 27vh !default;
 $modal-range-landscape-conetent-overflow: auto !default;
 $modal-range-table-display: table !default;
-$modal-range-start-end-size: 38px !default;
+$modal-range-start-end-size: 28px !default;
 // header styles for presets
 $modal-range-presets-header-height: 10% !default;
 $modal-range-presets-portrait-height: 90% !default;
 $modal-range-presets-landscape-height: 85% !default;
-$modal-range-header-padding: 2.5vh 2.5vw !default;
+$modal-range-header-padding: 2.5vh 2.5vw 2.5vh 1.5vw !default;
 $modal-range-header-display-style: flex !default;
 $modal-range-header-content-align: center !default;
-$modal-range-header-portrait-font-size: 3vh !default;
+$modal-range-header-portrait-font-size: 2vh !default;
 $modal-close-icon-float: left !default;
 $modal-portrait-content-padding: 1vh 2vw !default;
 $modal-range-header-title-transform: capitalize !default;
 $modal-range-header-border-bottom: none !default;
 $modal-range-header-landscape-height: 15% !default;
-$modal-range-header-landscape-font-size: 2vw !default;
+$modal-range-header-landscape-font-size: 18px !default;
 $modal-landscape-padding: 1vh 1vw !default;
 // modal dialog colors
@@ -295,7 +295,7 @@ $modal-range-header-bg-color: $content-bg-color-alt1 !default;
 $modal-range-header-text-color: $content-text-color-alt1 !default;
 // tablet device style changes for modal popup
-$modal-range-tablet-font-size: 24px !default;
+$modal-range-tablet-font-size: 18px !default;
 $range-header-font-size: 16px !default;
@@ -1015,12 +1015,36 @@ $range-header-font-size: 16px !default;
                 padding: $modal-range-portrait-month-header-padding;
                 line-height: $modal-range-month-header-line-height;
-                #{if(&, '&', '*')} .e-prev,
+                #{if(&, '&', '*')} .e-prev {
+                  height: $modal-range-prev-next-icon-size;
+                  width: $modal-range-prev-next-icon-size;
+                  @if ($skin-name == 'Material3') {
+                    margin-right: 60vw;
+                    vertical-align: inherit;
+                    font-size: $modal-range-tablet-font-size
+                  }
+                  @media screen and (orientation: landscape) {
+                    @if ($skin-name == 'Material3') {
+                      margin-right: 78vw;
+                      vertical-align: inherit;
+                    }
+                  }
+                  #{if(&, '&', '*')} span {
+                    @media (min-device-width: 768px) {
+                      font-size: 18px;
+                      padding: 11px;
+                    }
+                  }
+                }
                 #{if(&, '&', '*')} .e-next {
                   height: $modal-range-prev-next-icon-size;
                   width: $modal-range-prev-next-icon-size;
+                  @if ($skin-name == 'Material3') {
+                    margin-right: 42px;
+                  }
-                  #{if(&, '&', '*')} span{
+                  #{if(&, '&', '*')} span {
                     padding: $modal-range-prev-next-icon-padding;
                     line-height: $modal-range-prev-next-icon-line-height;
                     @media (min-device-width: 768px) {
@@ -1031,10 +1055,26 @@ $range-header-font-size: 16px !default;
                 #{if(&, '&', '*')} .e-title {
                   @media (max-height: 600px) {
+                    @if ($skin-name == 'Material3') {
+                      margin-left: $modal-header-month-name-left-width;
+                      position: absolute;
+                      text-align: center;
+                      vertical-align: middle;
+                      width: $modal-header-month-name-width;
+                      line-height: $modal-month-name-line-height;
+                  }
                     line-height: $modal-range-month-landscape-title-line-height;
                   }
                   @media (min-height: 600px) {
+                    @if ($skin-name == 'Material3') {
+                      margin-left: $modal-header-month-name-left-width;
+                      position: absolute;
+                      text-align: center;
+                      vertical-align: middle;
+                      width: $modal-header-month-name-width;
+                      line-height: $modal-month-name-line-height;
+                  }
                     line-height: $modal-range-month-header-title-line-height;
                   }
@@ -1082,14 +1122,6 @@ $range-header-font-size: 16px !default;
                 }
               }
             }
-            #{if( &, '&', '*')} .e-footer {
-              display: block;
-              #{if( &, '&', '*')} .e-btn.e-apply,
-              #{if( &, '&', '*')} .e-btn.e-cancel {
-                float: right;
-              }
-            }
         }
         #{if(&, '&', '*')} .e-calendar-container {
@@ -1173,13 +1205,10 @@ $range-header-font-size: 16px !default;
     #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
-      #{if( &, '&', '*')} .e-date-range-container .e-range-header.e-blazor-device {
-        @media (max-height: 600px) {
-            height: 23vh;
-        }
-        @media (min-height: 600px) {
-          height: 20vh;
+      #{if( &, '&', '*')} .e-date-range-container .e-range-header .e-model-header-wrapper .e-btn {
+        padding: 0;
+        @media (min-device-width: 768px) {
+          font-size: $modal-range-header-landscape-font-size;
         }
       }
@@ -1254,8 +1283,8 @@ $range-header-font-size: 16px !default;
           }
           #{if(&, '&', '*')} .e-day-span {
-            margin: 5px 0;
-            font-size: 20px;
+            margin: 8px 0;
+            font-size: 16px;
           }
         }

package/SCSS-Themes/calendars/timepicker/bootstrap-dark.scss CHANGED Viewed

@@ -58,10 +58,10 @@ $modal-header-text-color: $grey-dark-font !default;
 // modal dialog portrait dimensions
 $modal-header-height: 10% !default;
-$modal-header-padding: 2.5vh 2.5vw !default;
+$modal-header-padding: 2.5vh 2.5vw 2.5vh 1.5vw !default;
 $modal-header-display-style: flex !default;
 $modal-header-content-align: center !default;
-$modal-header-portrait-font-size: 3vh !default;
+$modal-header-portrait-font-size: 2vh !default;
 $modal-close-icon-float: left !default;
 $modal-portrait-content-padding: 1vh 2vw !default;
 $modal-content-height: 90% !default;
@@ -300,6 +300,13 @@ $modal-tablet-font-size: 24px !default;
   }
 }
+.e-timepicker-mob-popup-wrap .e-popup-expand.e-timepicker.e-popup,
+.e-datetimepicker.e-popup-expand.e-timepicker.e-popup,
+.e-timepicker-mob-popup-wrap .e-popup-expand.e-datetimepicker.e-popup,
+.e-datetimepicker.e-popup-expand.e-popup {
+  border-radius: 0;
+}
 .e-timepicker-mob-popup-wrap .e-popup-expand,
 .e-datetimepicker.e-popup-expand {
@@ -319,6 +326,11 @@ $modal-tablet-font-size: 24px !default;
       #{if(&, '&', '*')} .e-model-title {
         padding: $modal-portrait-content-padding;
         text-transform: $modal-header-title-transform;
+        font-weight: 500;
+      }
+      #{if(&, '&', '*')} .e-btn.e-popup-close {
+        font-size: $modal-header-portrait-font-size;
       }
     }
@@ -356,6 +368,10 @@ $modal-tablet-font-size: 24px !default;
         #{if(&, '&', '*')} .e-model-title {
           padding: $modal-landscape-padding;
         }
+        #{if(&, '&', '*')} .e-btn.e-popup-close {
+          font-size: $modal-header-landscape-font-size;
+        }
       }
       #{if(&, '&', '*')} .e-content {
@@ -480,6 +496,7 @@ $modal-tablet-font-size: 24px !default;
       #{if(&, '&', '*')} .e-popup-close {
         color: $modal-header-text-color;
+        font-weight: 500;
       }
     }
   }