Skip to content

Commit

Permalink
chore(styling): lower amount of lines in slick-plugins sass file (#937)
Browse files Browse the repository at this point in the history
- group duplicate code as much as possible to lower amount of lines with same css
- also add missing ms-select png in demo
  • Loading branch information
ghiscoding committed Mar 19, 2023
1 parent 8aa10e7 commit 7033fbf
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 62 deletions.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 20 additions & 29 deletions packages/common/src/styles/slick-component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@

.right-footer {
color: var(--slick-footer-right-text-color, $slick-footer-right-text-color);
text-align: var(--slick-footer-right-text-align, $slick-footer-right-text-align);
font-style: var(--slick-footer-right-font-style, $slick-footer-right-font-style);
font-weight: var(--slick-footer-right-font-weight, $slick-footer-right-font-weight);
text-align: var(--slick-footer-right-text-align, $slick-footer-right-text-align);
Expand Down Expand Up @@ -152,37 +151,29 @@
}
}

.icon-seek-first {
&:before {
content: var(--slick-pagination-icon-seek-first, $slick-pagination-icon-seek-first);
display: block;
height: var(--slick-pagination-icon-height, $slick-pagination-icon-height);
width: var(--slick-pagination-icon-seek-first-width, $slick-pagination-icon-seek-first-width);
}
.icon-seek-first:before {
content: var(--slick-pagination-icon-seek-first, $slick-pagination-icon-seek-first);
width: var(--slick-pagination-icon-seek-first-width, $slick-pagination-icon-seek-first-width);
}
.icon-seek-prev {
&:before {
content: var(--slick-pagination-icon-seek-prev, $slick-pagination-icon-seek-prev);
display: block;
height: var(--slick-pagination-icon-height, $slick-pagination-icon-height);
width: var(--slick-pagination-icon-seek-prev-width, $slick-pagination-icon-seek-prev-width);
}
.icon-seek-prev:before {
content: var(--slick-pagination-icon-seek-prev, $slick-pagination-icon-seek-prev);
width: var(--slick-pagination-icon-seek-prev-width, $slick-pagination-icon-seek-prev-width);
}
.icon-seek-next {
&:before {
content: var(--slick-pagination-icon-seek-next, $slick-pagination-icon-seek-next);
display: block;
height: var(--slick-pagination-icon-height, $slick-pagination-icon-height);
width: var(--slick-pagination-icon-seek-next-width, $slick-pagination-icon-seek-next-width);
}
.icon-seek-next:before {
content: var(--slick-pagination-icon-seek-next, $slick-pagination-icon-seek-next);
width: var(--slick-pagination-icon-seek-next-width, $slick-pagination-icon-seek-next-width);
}
.icon-seek-end {
&:before {
content: var(--slick-pagination-icon-seek-end, $slick-pagination-icon-seek-end);
display: block;
height: var(--slick-pagination-icon-height, $slick-pagination-icon-height);
width: var(--slick-pagination-icon-seek-end-width, $slick-pagination-icon-seek-end-width);
}
.icon-seek-end:before {
content: var(--slick-pagination-icon-seek-end, $slick-pagination-icon-seek-end);

width: var(--slick-pagination-icon-seek-end-width, $slick-pagination-icon-seek-end-width);
}
.icon-seek-first:before,
.icon-seek-prev:before,
.icon-seek-next:before,
.icon-seek-end:before {
display: block;
height: var(--slick-pagination-icon-height, $slick-pagination-icon-height);
}
}
.page-item.disabled {
Expand Down
5 changes: 1 addition & 4 deletions packages/common/src/styles/slick-grid.scss
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,7 @@
margin-right: 5px;
}

.slick-group-toggle.expanded {
background: none;
}

.slick-group-toggle.expanded,
.slick-group-toggle.collapsed {
background: none;
}
Expand Down
51 changes: 22 additions & 29 deletions packages/common/src/styles/slick-plugins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -557,10 +557,6 @@ li.hidden {
font-family: var(--slick-icon-font-family, $slick-icon-font-family);
font-size: var(--slick-checkbox-selector-size, $slick-checkbox-selector-size);
opacity: var(--slick-checkbox-selector-opacity, $slick-checkbox-selector-opacity); /* unchecked icon */
height: var(--slick-checkbox-selector-icon-height, $slick-checkbox-selector-icon-height);
width: var(--slick-checkbox-selector-icon-width, $slick-checkbox-selector-icon-width);
border: var(--slick-checkbox-selector-icon-border, $slick-checkbox-selector-icon-border);
border-radius: var(--slick-checkbox-selector-icon-border-radius, $slick-checkbox-selector-icon-border-radius);
margin: var(--slick-checkbox-selector-icon-margin, $slick-checkbox-selector-icon-margin);
}

Expand All @@ -574,9 +570,15 @@ li.hidden {
content: var(--slick-checkbox-selector-icon-checked, $slick-checkbox-selector-icon-checked);
color: var(--slick-checkbox-selector-checked-color, $slick-checkbox-selector-checked-color);
opacity: 1; /* checked icon */

}
input[type=checkbox] + label:before,
input[type=checkbox]:checked + label:before,
#filter-checkbox-selectall-container > input[type=checkbox] + label:before,
#filter-checkbox-selectall-container > input[type=checkbox]:checked + label:before {
height: var(--slick-checkbox-selector-icon-height, $slick-checkbox-selector-icon-height);
width: var(--slick-checkbox-selector-icon-width, $slick-checkbox-selector-icon-width);
border-radius: var(--slick-checkbox-selector-icon-border, $slick-checkbox-selector-icon-border);
border: var(--slick-checkbox-selector-icon-border, $slick-checkbox-selector-icon-border);
border-radius: var(--slick-checkbox-selector-icon-border-radius, $slick-checkbox-selector-icon-border-radius);
}
}
Expand All @@ -602,16 +604,10 @@ li.hidden {
height: var(--slick-header-input-height, $slick-header-input-height);

div {
&:before {
&:before, &.open:before {
font-family: var(--slick-icon-font-family, $slick-icon-font-family);
font-size: var(--slick-multiselect-icon-arrow-font-size, $slick-multiselect-icon-arrow-font-size);
}
&.open {
&:before {
font-family: var(--slick-icon-font-family, $slick-icon-font-family);
font-size: var(--slick-multiselect-icon-arrow-font-size, $slick-multiselect-icon-arrow-font-size);
}
}
}

span {
Expand Down Expand Up @@ -657,18 +653,15 @@ li.hidden {
font-family: var(--slick-icon-font-family, $slick-icon-font-family);
font-size: var(--slick-multiselect-icon-font-size, $slick-multiselect-icon-font-size);
font-weight: normal;
height: var(--slick-multiselect-icon-height, $slick-multiselect-icon-height);
width: var(--slick-multiselect-icon-width, $slick-multiselect-icon-width);
border: var(--slick-multiselect-icon-border, $slick-multiselect-icon-border);
border-radius: var(--slick-multiselect-icon-border-radius, $slick-multiselect-icon-border-radius);
margin: var(--slick-multiselect-icon-margin, $slick-multiselect-icon-margin);
opacity: var(--slick-multiselect-unchecked-opacity, $slick-multiselect-unchecked-opacity);
vertical-align: var(--slick-multiselect-icon-vertical-align, $slick-multiselect-icon-vertical-align);
}

&:checked + span:before {
content: var(--slick-multiselect-icon-checked, $slick-multiselect-icon-checked);
opacity: 1;
}
& + span:before, &:checked + span:before {
height: var(--slick-multiselect-icon-height, $slick-multiselect-icon-height);
width: var(--slick-multiselect-icon-width, $slick-multiselect-icon-width);
border: var(--slick-multiselect-icon-border, $slick-multiselect-icon-border);
Expand All @@ -679,15 +672,12 @@ li.hidden {
input[type="radio"] {
& + span:before {
content: var(--slick-multiselect-icon-radio-unchecked, $slick-multiselect-icon-radio-unchecked);
height: var(--slick-multiselect-icon-radio-height, $slick-multiselect-icon-radio-height);
width: var(--slick-multiselect-icon-radio-width, $slick-multiselect-icon-radio-width);
border: var(--slick-multiselect-icon-radio-border, $slick-multiselect-icon-radio-border);
border-radius: var(--slick-multiselect-icon-radio-border-radius, $slick-multiselect-icon-radio-border-radius);
margin: var(--slick-multiselect-icon-radio-margin, $slick-multiselect-icon-radio-margin);
}
&:checked + span:before {
content: var(--slick-multiselect-icon-radio-checked, $slick-multiselect-icon-radio-checked);
color: var(--slick-multiselect-icon-radio-color, $slick-multiselect-icon-radio-color);
}
& + span:before, &:checked + span:before {
height: var(--slick-multiselect-icon-radio-height, $slick-multiselect-icon-radio-height);
width: var(--slick-multiselect-icon-radio-width, $slick-multiselect-icon-radio-width);
border: var(--slick-multiselect-icon-radio-border, $slick-multiselect-icon-radio-border);
Expand Down Expand Up @@ -991,20 +981,22 @@ input.flatpickr.form-control {
}

.slick-groupby-remove-icon::before {
font-family: var(--slick-icon-font-family, $slick-icon-font-family);
font-size: var(--slick-draggable-group-by-remove-icon-size, $slick-draggable-group-by-remove-icon-size);
content: var(--slick-draggable-group-by-remove-icon, $slick-draggable-group-by-remove-icon);
}
.slick-groupby-sort-asc-icon::before {
font-family: var(--slick-icon-font-family, $slick-icon-font-family);
font-size: var(--slick-draggable-group-sort-asc-icon-size, $slick-draggable-group-sort-asc-icon-size);
content: var(--slick-draggable-group-sort-asc-icon, $slick-draggable-group-sort-asc-icon);
}
.slick-groupby-sort-desc-icon::before {
font-family: var(--slick-icon-font-family, $slick-icon-font-family);
font-size: var(--slick-draggable-group-sort-desc-icon-size, $slick-draggable-group-sort-desc-icon-size);
content: var(--slick-draggable-group-sort-desc-icon, $slick-draggable-group-sort-desc-icon);
}
.slick-groupby-remove-icon::before,
.slick-groupby-sort-asc-icon::before,
.slick-groupby-sort-desc-icon::before {
font-family: var(--slick-icon-font-family, $slick-icon-font-family);
}
}
.slick-dropzone-hover {
background-color: var(--slick-draggable-group-droppable-hover-bgcolor, $slick-draggable-group-droppable-hover-bgcolor);
Expand Down Expand Up @@ -1284,8 +1276,6 @@ input.flatpickr.form-control {
color: var(--slick-detail-view-icon-expand-color-hover, $slick-detail-view-icon-expand-color-hover);
}
&:before {
font-family: var(--slick-icon-font-family, $slick-icon-font-family);
font-size: var(--slick-detail-view-icon-size, $slick-detail-view-icon-size);
content: var(--slick-detail-view-icon-expand, $slick-detail-view-icon-expand);
}
}
Expand All @@ -1296,11 +1286,14 @@ input.flatpickr.form-control {
color: var(--slick-detail-view-icon-collapse-color-hover, $slick-detail-view-icon-collapse-color-hover);
}
&:before {
font-family: var(--slick-icon-font-family, $slick-icon-font-family);
font-size: var(--slick-detail-view-icon-size, $slick-detail-view-icon-size);
content: var(--slick-detail-view-icon-collapse, $slick-detail-view-icon-collapse);
}
}
&.expand:before,
&.collapse:before {
font-family: var(--slick-icon-font-family, $slick-icon-font-family);
font-size: var(--slick-detail-view-icon-size, $slick-detail-view-icon-size);
}
}

.dynamic-cell-detail {
Expand Down

0 comments on commit 7033fbf

Please sign in to comment.