diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
index 3f14b6b9b..9b99fd6e3 100644
--- a/packages/common/src/styles/_variables.scss
+++ b/packages/common/src/styles/_variables.scss
@@ -330,6 +330,7 @@ $header-menu-button-icon: "\f13a" !default;
$header-menu-button-icon-font-size: 14px !default;
$header-menu-button-icon-font-weight: normal !default;
$header-menu-button-padding: 0px !default;
+$header-menu-button-margin-right: 3px !default;
$header-menu-border-radius: 2px !default;
$header-menu-button-width: 14px !default;
$header-menu-min-width: 175px !default;
@@ -350,6 +351,7 @@ $header-menu-divider-height: 1px !default;
$header-menu-divider-margin: 8px 3px !default;
$header-menu-divider-color: #e7e7e7 !default;
$header-menu-divider-width: 95% !default;
+$header-menu-display: none !default; /* can be none or inline-block */
/* Checkbox Selector / Row Selection */
$checkbox-selector-color: $primary-color !default;
@@ -370,7 +372,8 @@ $large-editor-textarea-height: 80px !default;
$large-editor-textarea-width: 250px !default;
$large-editor-button-text-align: right !default;
$large-editor-footer-spacing: 2px !default;
-$text-editor-border: initial !default;
+$text-editor-border: 1px solid #e2e2e2 !default;
+$text-editor-border-radius: 4px !default;
$text-editor-background: #ffffff !default;
$text-editor-margin-bottom: 2px !default;
$text-editor-margin-left: -2px !default; /* negative number to cancel inside padding */
diff --git a/packages/common/src/styles/roboto-font.scss b/packages/common/src/styles/roboto-font.scss
index 7d5ec6dea..b0511b3ea 100644
--- a/packages/common/src/styles/roboto-font.scss
+++ b/packages/common/src/styles/roboto-font.scss
@@ -1,8 +1,135 @@
/* cyrillic-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 400;
+ font-display: swap;
+ src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xFIzIFKw.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 400;
+ font-display: swap;
+ src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xMIzIFKw.woff2) format('woff2');
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 400;
+ font-display: swap;
+ src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xEIzIFKw.woff2) format('woff2');
+ unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 400;
+ font-display: swap;
+ src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xLIzIFKw.woff2) format('woff2');
+ unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 400;
+ font-display: swap;
+ src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xHIzIFKw.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 400;
+ font-display: swap;
+ src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xGIzIFKw.woff2) format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 400;
+ font-display: swap;
+ src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xIIzI.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 700;
+ font-display: swap;
+ src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic3CsTKlA.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 700;
+ font-display: swap;
+ src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic-CsTKlA.woff2) format('woff2');
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 700;
+ font-display: swap;
+ src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic2CsTKlA.woff2) format('woff2');
+ unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 700;
+ font-display: swap;
+ src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic5CsTKlA.woff2) format('woff2');
+ unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 700;
+ font-display: swap;
+ src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic1CsTKlA.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 700;
+ font-display: swap;
+ src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic0CsTKlA.woff2) format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 700;
+ font-display: swap;
+ src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic6CsQ.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
+ font-display: swap;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@@ -11,6 +138,7 @@
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
+ font-display: swap;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@@ -19,6 +147,7 @@
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
+ font-display: swap;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
@@ -27,6 +156,7 @@
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
+ font-display: swap;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
@@ -35,6 +165,7 @@
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
+ font-display: swap;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@@ -43,6 +174,7 @@
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
+ font-display: swap;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@@ -51,6 +183,7 @@
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
+ font-display: swap;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@@ -59,6 +192,7 @@
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
+ font-display: swap;
src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@@ -67,6 +201,7 @@
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
+ font-display: swap;
src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@@ -75,6 +210,7 @@
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
+ font-display: swap;
src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
@@ -83,6 +219,7 @@
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
+ font-display: swap;
src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
@@ -91,6 +228,7 @@
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
+ font-display: swap;
src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@@ -99,6 +237,7 @@
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
+ font-display: swap;
src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@@ -107,6 +246,70 @@
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
+ font-display: swap;
src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
+/* cyrillic-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
+ unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
+ unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/packages/common/src/styles/slick-editors.scss b/packages/common/src/styles/slick-editors.scss
index 02b60bf66..fdf4289b8 100644
--- a/packages/common/src/styles/slick-editors.scss
+++ b/packages/common/src/styles/slick-editors.scss
@@ -3,6 +3,7 @@
.slick-cell.active {
input.editor-text {
border: $text-editor-border;
+ border-radius: $text-editor-border-radius;
background: $text-editor-background;
padding-bottom: $text-editor-padding-bottom;
padding-left: $text-editor-padding-left;
diff --git a/packages/common/src/styles/slick-grid.scss b/packages/common/src/styles/slick-grid.scss
index af3db161f..da0f1cee9 100644
--- a/packages/common/src/styles/slick-grid.scss
+++ b/packages/common/src/styles/slick-grid.scss
@@ -67,6 +67,8 @@
.slick-pane-header {
display: block;
+ background-color: $header-background-color;
+ border-bottom: $header-border-bottom;
}
.slick-viewport {
diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
index e3162e1a4..da6c9adb8 100644
--- a/packages/common/src/styles/slick-plugins.scss
+++ b/packages/common/src/styles/slick-plugins.scss
@@ -282,7 +282,7 @@
// The next few items are already defined in the slick-headermenu file and it should stay that way, *unless* you also replace the button image included there.
bottom: 0;
- right: 3px;
+ right: $header-menu-button-margin-right;
top: 0;
width: $header-menu-button-width;
}
@@ -293,11 +293,18 @@
content: $header-menu-button-icon;
}
-.slick-header-column:hover {
+.slick-header-column {
+ // if user when to show header menu only while hovering, then the display var will be "none" else it could be "inline-block"
.slick-header-menubutton {
- display: inline-block;
+ display: $header-menu-display;
+ }
+ &:hover {
+ .slick-header-menubutton {
+ display: inline-block;
+ }
}
}
+
.slick-header-menu {
position: absolute;
margin: 0;
diff --git a/packages/common/src/styles/slickgrid-theme-material.scss b/packages/common/src/styles/slickgrid-theme-material.scss
index 4bfcb550e..8b5460e86 100644
--- a/packages/common/src/styles/slickgrid-theme-material.scss
+++ b/packages/common/src/styles/slickgrid-theme-material.scss
@@ -2,6 +2,7 @@ $font-family: Roboto, "Helvetica Neue", sans-serif;
$font-size-base-value: 14;
$icon-font-family: "Material Design Icons";
$icon-font-size: 20px;
+$group-totals-formatter-color: #666666;
$cell-border-top: none;
$header-background-color: #F3F3F3;
$header-border-bottom: 1px solid #ccc;
@@ -15,54 +16,56 @@ $container-border-top: 1px solid #ccc;
$container-border-bottom: 1px solid #ccc;
$container-border-left: 1px solid #ccc;
$container-border-right: 1px solid #ccc;
-$icon-sort-asc: "\F360";
-$icon-sort-desc: "\F35D";
+$icon-sort-asc: "\F0360";
+$icon-sort-desc: "\F035D";
$icon-sort-font-size: 22px;
$icon-sort-position-right: 18px;
$checkbox-selector-size: 22px;
$checkbox-selector-icon-font-weight: normal;
-$checkbox-selector-icon-checked: "\f132";
-$checkbox-selector-icon-unchecked: "\f131";
+$checkbox-selector-icon-checked: "\F0132";
+$checkbox-selector-icon-unchecked: "\F0131";
$checkbox-selector-opacity: 1;
$checkbox-selector-opacity-hover: 0.9;
$cell-menu-icon-margin-right: 6px;
$column-picker-checkbox-size: 18px;
$column-picker-checkbox-font-weight: normal;
-$column-picker-checkbox-icon-checked: "\f12c";
-$column-picker-checkbox-icon-unchecked: "\f12c";
+$column-picker-checkbox-icon-checked: "\F012c";
+$column-picker-checkbox-icon-unchecked: "\F012c";
$column-picker-checkbox-width: 18px;
$column-picker-title-font-size: 18px;
$context-menu-item-font-size: 16px;
$context-menu-icon-font-size: 16px;
-$icon-group-collapsed: "\F142";
-$icon-group-expanded: "\F140";
+$icon-group-collapsed: "\F0142";
+$icon-group-expanded: "\F0140";
$icon-group-font-weight: normal;
$icon-group-margin-right: 8px;
-$draggable-group-toggle-collapsed-icon: "\F142";
-$draggable-group-toggle-expanded-icon: "\F140";
+$draggable-group-toggle-collapsed-icon: "\F0142";
+$draggable-group-toggle-expanded-icon: "\F0140";
$draggable-group-title-height: 24px;
$draggable-group-title-line-height: 24px;
$draggable-group-title-vertical-align: top;
$grid-menu-checkbox-size: 18px;
$grid-menu-checkbox-font-weight: normal;
-$grid-menu-checkbox-icon-checked: "\f12c";
-$grid-menu-checkbox-icon-unchecked: "\f12c";
+$grid-menu-checkbox-icon-checked: "\F012c";
+$grid-menu-checkbox-icon-unchecked: "\F012c";
$grid-menu-checkbox-width: 18px;
$grid-menu-icon-font-size: 20px;
$grid-menu-icon-width: 20px;
$grid-menu-title-font-size: 18px;
-$header-menu-button-icon-font-size: 16px;
+$header-menu-button-icon-font-size: 20px;
$header-menu-icon-font-size: 18px;
$header-menu-icon-width: 18px;
-$header-menu-button-icon: "\FB0B";
-$multiselect-icon-arrow-down: "\F35D";
-$multiselect-icon-arrow-up: "\F360";
+$header-menu-button-icon: "\F0140";
+$header-menu-button-margin-right: 6px;
+$header-menu-display: inline-block;
+$multiselect-icon-arrow-down: "\F035D";
+$multiselect-icon-arrow-up: "\F0360";
$multiselect-icon-arrow-font-size: $icon-font-size - 4px;
-$multiselect-icon-checked: "\F132";
-$multiselect-icon-unchecked: "\F131";
-$multiselect-icon-radio-checked: "\FAA4";
-$multiselect-icon-radio-unchecked: "\F130";
-$multiselect-icon-search: "\F349";
+$multiselect-icon-checked: "\F0132";
+$multiselect-icon-unchecked: "\F0131";
+$multiselect-icon-radio-checked: "\F043E";
+$multiselect-icon-radio-unchecked: "\F0130";
+$multiselect-icon-search: "\F0349";
$multiselect-unchecked-opacity: 0.8;
$slider-editor-height: 26px;
$primary-color: #009530;
diff --git a/packages/vanilla-bundle-examples/index.ejs b/packages/vanilla-bundle-examples/index.ejs
index bac54d9ac..828f51045 100644
--- a/packages/vanilla-bundle-examples/index.ejs
+++ b/packages/vanilla-bundle-examples/index.ejs
@@ -5,7 +5,7 @@
<%- htmlWebpackPlugin.options.metadata.title %>
-
+