Skip to content

Commit

Permalink
feat(styling): salesforce theme, replace all built-in Font char to SVG
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding-SE
ghiscoding-SE committed May 8, 2020
1 parent 8c06051 commit 1c5f341
Show file tree
Hide file tree
Showing 8 changed files with 668 additions and 586 deletions.
2 changes: 1 addition & 1 deletion packages/common/src/services/utilities.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -819,7 +819,7 @@ export function charArraysEqual(a: any[], b: any[], orderMatters: boolean = fals
return false;
}

if (!orderMatters) {
if (!orderMatters && a.sort && b.sort) {
a.sort();
b.sort();
}
Expand Down
1,100 changes: 561 additions & 539 deletions packages/common/src/styles/_variables.scss
View file

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions packages/common/src/styles/sass-utilities.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
@function encodecolor($string) {
@if type-of($string) == 'color' {
$hex: str-slice(ie-hex-str($string), 4);
$string:unquote("#{$hex}");
}
$string: '%23' + $string;
@return $string;
}
13 changes: 9 additions & 4 deletions packages/common/src/styles/slick-bootstrap.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,8 @@
font-family: $icon-font-family;
font-size: $icon-sort-font-size;
opacity: $sort-indicator-hint-opacity;
display: inline-block;
width: $icon-sort-width;
}
}

Expand Down Expand Up @@ -352,12 +354,15 @@
font-family: $icon-font-family;
font-size: $icon-sort-font-size;
opacity: 1;
display: inline-block;
width: $icon-sort-width;
}
.slick-sort-indicator-desc:before {
content: $icon-sort-desc;
font-family: $icon-font-family;
font-size: $icon-sort-font-size;
opacity: 1;
content: $icon-sort-desc;
display: inline-block;
opacity: 1;
font-size: $icon-sort-font-size;
width: $icon-sort-width;
}
.slick-resizable-handle {
width: 7px;
Expand Down
40 changes: 35 additions & 5 deletions packages/common/src/styles/slick-plugins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,6 +279,7 @@
border: $header-menu-button-border;
border-width: $header-menu-button-border-width;
padding: $header-menu-button-padding;
color: $header-menu-button-icon-color;

// 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;
Expand Down Expand Up @@ -415,9 +416,11 @@
// Row Move Manager Plugin
// ----------------------------------------------
.slick-cell.cell-reorder:before {
display: inline-block;
font-family: $icon-font-family;
font-size: $row-move-plugin-size;
content: $row-move-plugin-icon;
width: $row-move-plugin-icon-width;
}
.slick-cell.cell-reorder {
cursor: $row-move-plugin-cursor;
Expand All @@ -444,12 +447,18 @@
#filter-checkbox-selectall-container > input[type=checkbox] + label:before {
cursor: pointer;
content: $checkbox-selector-icon-unchecked;
background-color: $checkbox-selector-icon-bg-color;
color: $checkbox-selector-unchecked-color;
display: inline-block;
font-weight: $checkbox-selector-icon-font-weight;
font-family: $icon-font-family;
font-size: $checkbox-selector-size;
opacity: $checkbox-selector-opacity; /* unchecked icon */
height: $checkbox-selector-icon-height;
width: $checkbox-selector-icon-width;
border: $checkbox-selector-icon-border;
border-radius: $checkbox-selector-icon-border-radius;
margin: $checkbox-selector-icon-margin;
}

input[type=checkbox] + label:hover:before,
Expand All @@ -462,6 +471,10 @@
content: $checkbox-selector-icon-checked;
color: $checkbox-selector-checked-color;
opacity: 1; /* checked icon */
height: $checkbox-selector-icon-height;
width: $checkbox-selector-icon-width;
border-radius: $checkbox-selector-icon-border;
border-radius: $checkbox-selector-icon-border-radius;
}
}

Expand All @@ -481,13 +494,11 @@
&:before {
font-family: $icon-font-family;
font-size: $multiselect-icon-arrow-font-size;
content: $multiselect-icon-arrow-down;
}
&.open {
&:before {
font-family: $icon-font-family;
font-size: $multiselect-icon-arrow-font-size;
content: $multiselect-icon-arrow-up;
}
}
}
Expand Down Expand Up @@ -517,27 +528,47 @@

& + span:before {
cursor: pointer;
color: $multiselect-icon-color;
color: $multiselect-icon-unchecked-color;
content: $multiselect-icon-unchecked;
display: inline-block;
font-family: $icon-font-family;
font-size: $multiselect-icon-font-size;
font-weight: normal;
width: 20px;
height: $multiselect-icon-height;
width: $multiselect-icon-width;
border: $multiselect-icon-border;
border-radius: $multiselect-icon-border-radius;
margin: $multiselect-icon-margin;
opacity: $multiselect-unchecked-opacity;
}

&:checked + span:before {
content: $multiselect-icon-checked;
opacity: 1;
height: $multiselect-icon-height;
width: $multiselect-icon-width;
border: $multiselect-icon-border;
border-radius: $multiselect-icon-border-radius;
margin: $multiselect-icon-margin;
}
}
input[type="radio"] {
& + span:before {
content: $multiselect-icon-radio-unchecked;
height: $multiselect-icon-radio-height;
width: $multiselect-icon-radio-width;
border: $multiselect-icon-radio-border;
border-radius: $multiselect-icon-radio-border-radius;
margin: $multiselect-icon-radio-margin;
}
&:checked + span:before {
content: $multiselect-icon-radio-checked;
color: $multiselect-icon-radio-color;
height: $multiselect-icon-radio-height;
width: $multiselect-icon-radio-width;
border: $multiselect-icon-radio-border;
border-radius: $multiselect-icon-radio-border-radius;
margin: $multiselect-icon-radio-margin;
}
}
label {
Expand Down Expand Up @@ -588,7 +619,6 @@
&:before {
font-family: $icon-font-family;
font-size: $multiselect-icon-font-size;
content: $multiselect-icon-search;
right: $multiselect-icon-search-margin-right;
position: absolute;
}
Expand Down
3 changes: 0 additions & 3 deletions packages/common/src/styles/slickgrid-theme-material.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,14 +74,11 @@ $header-menu-icon-width: 18px;
$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: "\F0132";
$multiselect-icon-unchecked: "\F0131";
$multiselect-icon-radio-checked: "\F043E";
$multiselect-icon-radio-unchecked: "\F0130";
$multiselect-icon-search: "\F0349";
$multiselect-unchecked-opacity: 0.8;
$preheader-border-right: 1px solid #e2e2e2;
// $preheader-border-bottom: 1px solid #e2e2e2;
Expand Down
88 changes: 54 additions & 34 deletions packages/common/src/styles/slickgrid-theme-salesforce.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
/** Salesforce Theme (includes all external lib styling) */
@import './flatpickr.min';
@import './multiple-select';
@import './sass-utilities';

$primary-color: #006DCC;
$highlight-color: #0070D2;
$bare-color: #b5b5b5;
$font-family: var(--lwc-fontFamily,'Salesforce Sans', 'SalesforceSans-Regular', Arial, sans-serif);
$cell-active-box-shadow: inset 0 0 0 1px #0070d2;
$cell-active-box-shadow: inset 0 0 0 1px $highlight-color;
$cell-border-top: none;
$cell-border-bottom: none;
$cell-box-shadow: 0px 1px 0px #dddbda, 0px -1px 0px #dddbda;
Expand All @@ -23,7 +26,7 @@ $header-text-color: #514f4d;
$header-border-bottom: transparent;
$header-filter-row-border-bottom: 1px solid #d0d0d0;
$slick-pane-top-border-top: 1px solid #d0d0d0;
$header-resizable-hover: 2px solid #0070D2;
$header-resizable-hover: 2px solid $highlight-color;
$header-resizable-hover-border-bottom: $header-resizable-hover;
$header-resizable-hover-border-left: $header-resizable-hover;
$header-resizable-hover-border-right: $header-resizable-hover;
Expand All @@ -36,75 +39,96 @@ $container-border-top: 1px solid #ccc;
$container-border-bottom: 1px solid #ccc;
$container-border-left: 0px solid #ccc;
$container-border-right: 0px solid #ccc;
$icon-sort-asc: "\F005D";
$icon-sort-desc: "\F0045";
$icon-sort-color: $primary-color;
$icon-sort-color: $highlight-color;
$icon-sort-asc: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-sort-color)}" viewBox="0 0 24 24"><path d="M19.1 9.7c.4-.4.4-.9 0-1.3l-6.9-6.7c-.4-.4-.9-.4-1.3 0L4 8.4c-.4.4-.4.9 0 1.3l1.3 1.2c.3.4.9.4 1.3 0l2.1-2.1c.4-.4 1-.1 1 .4v12.5c0 .5.5.9 1 .9h1.8c.5 0 .9-.5.9-.9V9.2c0-.5.7-.8 1-.4l2.2 2.1c.4.4.9.4 1.3 0l1.2-1.2z"></path></svg>');
$icon-sort-desc: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-sort-color)}" viewBox="0 0 24 24"><path d="M4.4 14.3c-.3.4-.3.9 0 1.3l7 6.7c.3.4.9.4 1.2 0l7-6.7c.4-.4.4-.9 0-1.3l-1.3-1.2c-.3-.4-.9-.4-1.3 0l-2.1 2.1c-.4.4-1.1.1-1.1-.4V2.3c0-.5-.4-.9-.9-.9h-1.8c-.5 0-.9.5-.9.9v12.5c0 .5-.7.8-1.1.4L7 13.1c-.4-.4-1-.4-1.3 0l-1.3 1.2z"></path></svg>');
$icon-sort-font-size: 13px;
$icon-sort-width: 13px;
$icon-sort-position-right: 12px;
$checkbox-selector-checked-color: #0070d2;
$checkbox-selector-unchecked-color: #b5b5b5;
$checkbox-selector-size: 19px;
$checkbox-selector-checked-color: $highlight-color;
$checkbox-selector-unchecked-color: $bare-color;
$checkbox-selector-size: 12px;
$checkbox-selector-icon-font-weight: normal;
$checkbox-selector-icon-checked: "\F0C52";
$checkbox-selector-icon-unchecked: "\F0131";
$checkbox-selector-icon-height: calc(#{$checkbox-selector-size} + 4px);
$checkbox-selector-icon-width: calc(#{$checkbox-selector-size} + 4px);
$checkbox-selector-icon-margin: 2px 0 0 0;
$checkbox-selector-icon-border: 1px solid #d6d4d4;
$checkbox-selector-icon-border-radius: 0.125rem;
$checkbox-selector-icon-bg-color: white;
$checkbox-selector-icon-checked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($highlight-color)}" viewBox="0 0 24 24"><path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path></svg>');
$checkbox-selector-icon-unchecked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="transparent" viewBox="0 0 24 24"><path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"></path></svg>');
$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: "\F012c";
$column-picker-checkbox-icon-unchecked: "\F012c";
$column-picker-checkbox-width: 18px;
$column-picker-checkbox-icon-checked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M8.8 19.6L1.2 12c-.3-.3-.3-.8 0-1.1l1-1c.3-.3.8-.3 1 0L9 15.7c.1.2.5.2.6 0L20.9 4.4c.2-.3.7-.3 1 0l1 1c.3.3.3.7 0 1L9.8 19.6c-.2.3-.7.3-1 0z"></path></svg>');
$column-picker-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked;
$column-picker-checkbox-width: 13px;
$column-picker-title-font-size: 18px;
$context-menu-item-font-size: 16px;
$context-menu-icon-font-size: 16px;
$icon-group-collapsed: "\F0142";
$icon-group-expanded: "\F0140";
$icon-group-collapsed: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M8.3 2l9.5 9.5c.3.3.3.7 0 1L8.3 22c-.3.2-.8.2-1.1 0l-1-1c-.2-.3-.2-.8 0-1.1l7.6-7.4c.2-.3.2-.7 0-1L6.3 4.1C6 3.8 6 3.3 6.3 3l1-1c.3-.2.7-.2 1 0z"></path></svg>');
$icon-group-expanded: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M22 8.2l-9.5 9.6c-.3.2-.7.2-1 0L2 8.2c-.2-.3-.2-.7 0-1l1-1c.3-.3.8-.3 1.1 0l7.4 7.5c.3.3.7.3 1 0l7.4-7.5c.3-.2.8-.2 1.1 0l1 1c.2.3.2.7 0 1z"></path></svg>');
$icon-group-font-weight: normal;
$icon-group-margin-right: 8px;
$draggable-group-drop-width: 100%;
$draggable-group-drop-radius: 0;
$draggable-group-toggle-collapsed-icon: "\F0142";
$draggable-group-toggle-expanded-icon: "\F0140";
$draggable-group-toggle-collapsed-icon: $icon-group-collapsed;
$draggable-group-toggle-expanded-icon: $icon-group-expanded;
$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-size: $column-picker-checkbox-width;
$grid-menu-checkbox-font-weight: normal;
$grid-menu-checkbox-icon-checked: "\F012c";
$grid-menu-checkbox-icon-unchecked: "\F012c";
$grid-menu-checkbox-width: 18px;
$grid-menu-checkbox-icon-checked: $column-picker-checkbox-icon-checked;
$grid-menu-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked;
$grid-menu-checkbox-width: $column-picker-checkbox-width;
$grid-menu-icon-font-size: 20px;
$grid-menu-icon-width: 20px;
$grid-menu-title-font-size: 18px;
$header-menu-button-icon-font-size: 26px;
$header-menu-icon-font-size: 18px;
$header-menu-icon-width: 18px;
$header-menu-button-icon: "\F0140";
$header-menu-button-icon-color: #706e6b;
$header-menu-button-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($header-menu-button-icon-color)}" viewBox="0 0 24 24"><path d="M22 8.2l-9.5 9.6c-.3.2-.7.2-1 0L2 8.2c-.2-.3-.2-.7 0-1l1-1c.3-.3.8-.3 1.1 0l7.4 7.5c.3.3.7.3 1 0l7.4-7.5c.3-.2.8-.2 1.1 0l1 1c.2.3.2.7 0 1z"></path></svg>');
$header-menu-button-margin-right: 8px;
$header-menu-display: inline-block;
$large-editor-border-radius: 6px;
$multiselect-icon-arrow-down: "\F035D";
$multiselect-icon-arrow-up: "\F0360";
$multiselect-icon-arrow-font-size: $icon-font-size - 4px;
$multiselect-icon-checked: "\F0132";
$multiselect-icon-unchecked: "\F0131";
$multiselect-icon-radio-checked: "\F043E";
$multiselect-icon-radio-unchecked: "\F0130";
$multiselect-icon-search: "\F0349";
$multiselect-icon-checked-color: $highlight-color;
$multiselect-icon-border: 1px solid #d6d4d4;
$multiselect-icon-height: 15px;
$multiselect-icon-width: 15px;
$multiselect-icon-margin: 0px 4px 2px 0;
$multiselect-icon-border-radius: 0.125rem;
$multiselect-icon-unchecked-color: $bare-color;
$multiselect-icon-checked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($highlight-color)}" viewBox="0 0 24 24"><path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path></svg>');
$multiselect-icon-unchecked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="transparent" viewBox="0 0 24 24"><path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"></path></svg>');
$multiselect-icon-radio-checked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($highlight-color)}" viewBox="0 0 24 24"><path d="M12 3.7c4.6 0 8.3 3.7 8.3 8.3s-3.7 8.3-8.3 8.3-8.3-3.7-8.3-8.3S7.4 3.7 12 3.7z"></path></svg>');
$multiselect-icon-radio-unchecked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="transparent" viewBox="0 0 24 24"><path d="M12 3.7c4.6 0 8.3 3.7 8.3 8.3s-3.7 8.3-8.3 8.3-8.3-3.7-8.3-8.3S7.4 3.7 12 3.7z"></path></svg>');
$multiselect-icon-font-size: 10px;
$multiselect-icon-radio-border-radius: 50%;
$multiselect-unchecked-opacity: 0.8;
$preheader-border-right: 1px solid #e8e8e8;
// $preheader-border-bottom: 1px solid #e2e2e2;
$preheader-grouped-title-justify: center;
$preheader-font-size: 14px;
$preheader-height: 21px;
$row-move-plugin-cursor: grab;
$row-move-plugin-icon: "\F0278";
$row-move-plugin-icon-width: 18px;
$row-move-plugin-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($header-menu-button-icon-color)}" viewBox="0 0 24 24"><path fill="currentColor" d="M10,13H22V11H10M10,19H22V17H10M10,7H22V5H10M6,7H8.5L5,3.5L1.5,7H4V17H1.5L5,20.5L8.5,17H6V7Z"></path></svg>');
$editor-focus-box-shadow: 0 0 3px $primary-color;
$slider-editor-height: 24px;
$row-selected-color: darken($cell-odd-background-color, 1%);
$row-mouse-hover-color: $cell-odd-background-color;
$row-mouse-hover-box-shadow: 0 0 0 2px #dddbda;
$detail-view-icon-collapse: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($header-menu-button-icon-color)}" viewBox="0 0 24 24"><path fill="currentColor" d="M17,13H7V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');
$detail-view-icon-expand: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($header-menu-button-icon-color)}" viewBox="0 0 24 24"><path fill="currentColor" d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');
$pagination-icon-seek-first: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($header-menu-button-icon-color)}" viewBox="0 0 24 24"><path fill="currentColor" d="M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z"></path></svg>');
$pagination-icon-seek-end: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($header-menu-button-icon-color)}" viewBox="0 0 24 24"><path fill="currentColor" d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z"></path></svg>');
$pagination-icon-seek-next: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($header-menu-button-icon-color)}" viewBox="0 0 24 24"><path fill="currentColor" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg>');
$pagination-icon-seek-prev: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($header-menu-button-icon-color)}" viewBox="0 0 24 24"> <path fill="currentColor" d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"></path></svg>');

@import './slick-without-bootstrap-min-styling';
@import './slick-default-theme';
Expand All @@ -120,7 +144,3 @@ $row-mouse-hover-box-shadow: 0 0 0 2px #dddbda;

$link-color: $primary-color;
@import './extra-styling.scss';

.has-error {
box-shadow: inset 0 0 0 2px #c23934;
}
Binary file modified packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip
View file
Binary file not shown.

0 comments on commit 1c5f341

Please sign in to comment.