Skip to content
This repository was archived by the owner on Jun 1, 2025. It is now read-only.

Commit 14f2fa0

Browse files
ghiscodingghiscoding
authored
fix(styling): sass variable should be interpolate before using calc (#536)
- using SASS variable in `calc` should be interpolate with `#{}` like `calc(#{sass-var}-2px)`
1 parent cc8c31d commit 14f2fa0

File tree

2 files changed

+32
-14
lines changed

2 files changed

+32
-14
lines changed

‎src/app/modules/angular-slickgrid/styles/_variables.scss‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@ $preheader-border-left: none !default;
6565
$preheader-border-left-first-element: none !default;
6666
$preheader-border-right: none !default;
6767
$preheader-border-right-last-element: none !default;
68-
$preheader-border-bottom: none !default;
69-
$preheader-border-top: none !default;
68+
$preheader-border-bottom: 0 !default;
69+
$preheader-border-top: 0 !default;
7070
$preheader-font-size: $font-size-base + 3px !default;
7171
$preheader-height: 25px !default; /* full height is calculated with cell padding + borders (25px + 5px + 0px + 0px) = 30px must be set as preHeaderPanelHeight */
7272
$preheader-grouped-title-display: inline-grid !default;
@@ -87,7 +87,7 @@ $header-input-padding: 0 6px !default;
8787
$header-row-background-color: #ffffff !default;
8888
$header-row-count: 2 !default; // how many rows to display on the header
8989
$header-row-filter-padding: 4px !default;
90-
$header-column-height: calc(17px * $header-row-count) !default; // header is calculated by rows to show
90+
$header-column-height: calc(17px * #{$header-row-count}) !default; // header is calculated by rows to show
9191
$header-border-top: 0 none !default; // header, column titles, that is without the Filters
9292
$header-border-right: 0 none !default;
9393
$header-border-bottom: 0 none !default;
@@ -126,7 +126,7 @@ $icon-font-size: 14px !default;
126126
$icon-group-color: $primary-color !default;
127127
$icon-group-expanded: "\f107" !default;
128128
$icon-group-collapsed: "\f105" !default;
129-
$icon-group-font-size: calc($icon-font-size + 4px) !default;
129+
$icon-group-font-size: calc(#{$icon-font-size} + 4px) !default;
130130
$icon-group-font-weight: bold !default;
131131
$icon-group-margin-right: 2px !default;
132132
$icon-group-height: 20px !default;
@@ -159,12 +159,12 @@ $icon-sort-color: $primary-color !default;
159159
$icon-sort-font-size: $icon-font-size !default;
160160
$icon-sort-width: $icon-font-size !default;
161161
$icon-sort-position-right: 10px !default;
162-
$icon-sort-position-top: calc((15px * $header-row-count) - 15px) !default;
162+
$icon-sort-position-top: calc((15px * #{$header-row-count}) - 15px) !default;
163163
$sort-indicator-number-font-size: 10px !default;
164164
$sort-indicator-number-width: 8px !default;
165165
$sort-indicator-number-left: auto !default;
166166
$sort-indicator-number-right: 0px !default;
167-
$sort-indicator-number-top: calc(13px * $header-row-count) !default;
167+
$sort-indicator-number-top: calc(13px * #{$header-row-count}) !default;
168168
$sort-indicator-hint-opacity: 0.5 !default;
169169

170170
/* Grouping Totals Formatter */
@@ -206,7 +206,7 @@ $column-picker-label-margin: 4px !default;
206206
$column-picker-label-font-weight: normal !default;
207207
$column-picker-link-background-color: #ffffff !default;
208208
$column-picker-title-border-bottom: 1px solid #d6d6d6 !default;
209-
$column-picker-title-font-size: calc($column-picker-item-font-size + 2px) !default;
209+
$column-picker-title-font-size: calc(#{$column-picker-item-font-size} + 2px) !default;
210210
$column-picker-title-font-weight: normal !default;
211211
$column-picker-title-margin-bottom: 10px !default;
212212
$column-picker-title-width: calc(100% - #{$column-picker-close-btn-width} - 10px) !default;
@@ -216,7 +216,7 @@ $detail-view-icon-collapse: "\f056" !default;
216216
$detail-view-icon-collapse-color: $primary-color !default;
217217
$detail-view-icon-expand: "\f055" !default;
218218
$detail-view-icon-expand-color: lighten($primary-color, 25%) !default;
219-
$detail-view-icon-size: calc($icon-font-size + 2px) !default;
219+
$detail-view-icon-size: calc(#{$icon-font-size} + 2px) !default;
220220
$detail-view-container-bgcolor: #f7f7f7 !default;
221221
$detail-view-container-border: 1px solid #c0c0c0 !default;
222222
$detail-view-container-padding: 10px !default;
@@ -273,7 +273,7 @@ $grid-menu-divider-margin: 8px 5px !default;
273273
$grid-menu-divider-color: #e7e7e7 !default;
274274
$grid-menu-divider-width: calc(100% - 40px) !default;
275275
$grid-menu-title-border-bottom: solid 1px #d6d6d6 !default;
276-
$grid-menu-title-font-size: calc($grid-menu-item-font-size + 2px) !default;
276+
$grid-menu-title-font-size: calc(#{$grid-menu-item-font-size} + 2px) !default;
277277
$grid-menu-title-font-weight: normal !default;
278278
$grid-menu-title-margin-bottom: 10px !default;
279279
$grid-menu-title-width: calc(100% - #{$grid-menu-close-btn-width} - 10px) !default;
@@ -312,7 +312,7 @@ $cell-menu-divider-color: #e7e7e7 !default;
312312
$cell-menu-divider-width: calc(100% - 40px) !default;
313313
$cell-menu-option-list-margin-bottom: 10px !default;
314314
$cell-menu-title-border-bottom: 1px solid #d6d6d6 !default;
315-
$cell-menu-title-font-size: calc($cell-menu-item-font-size + 2px) !default;
315+
$cell-menu-title-font-size: calc(#{$cell-menu-item-font-size} + 2px) !default;
316316
$cell-menu-title-font-weight: normal !default;
317317
$cell-menu-title-margin-bottom: 10px !default;
318318
$cell-menu-title-width: calc(100% - #{$cell-menu-close-btn-width} - 10px) !default;
@@ -350,7 +350,7 @@ $context-menu-divider-color: #e7e7e7 !default;
350350
$context-menu-divider-width: calc(100% - 40px) !default;
351351
$context-menu-option-list-margin-bottom: 10px !default;
352352
$context-menu-title-border-bottom: 1px solid #d6d6d6 !default;
353-
$context-menu-title-font-size: calc($context-menu-item-font-size + 2px) !default;
353+
$context-menu-title-font-size: calc(#{$context-menu-item-font-size} + 2px) !default;
354354
$context-menu-title-font-weight: normal !default;
355355
$context-menu-title-margin-bottom: 10px !default;
356356
$context-menu-title-width: calc(100% - #{$context-menu-close-btn-width} - 10px) !default;
@@ -396,7 +396,7 @@ $header-menu-display: none !default; /* can be none or
396396
$checkbox-selector-color: $primary-color !default;
397397
$checkbox-selector-checked-color: $checkbox-selector-color !default;
398398
$checkbox-selector-unchecked-color: $checkbox-selector-color !default;
399-
$checkbox-selector-size: calc($icon-font-size - 1px) !default;
399+
$checkbox-selector-size: calc(#{$icon-font-size} - 1px) !default;
400400
$checkbox-selector-icon: "\f00c" !default;
401401
$checkbox-selector-icon-bg-color: inherit !default;
402402
$checkbox-selector-icon-font-weight: bold !default;
@@ -501,7 +501,7 @@ $slider-filter-thumb-color: rgb(201, 219, 203) !default;
501501
$slider-filter-thumb-size: 14px !default;
502502
$slider-filter-thumb-border: 1px solid darken($slider-filter-thumb-color, 15%) !default;
503503
$slider-filter-number-padding: 4px 8px !default;
504-
$slider-filter-number-font-size: calc($font-size-base-value - 1px) !default;
504+
$slider-filter-number-font-size: calc(#{$font-size-base-value} - 1px) !default;
505505

506506
/* Input Range Slider Filter (with jQuery UI) */
507507
$slider-range-filter-height: $slider-filter-height !default;
@@ -572,6 +572,8 @@ $multiselect-ok-button-text-align: center !default;
572572

573573
/* pagination variables */
574574
$pagination-button-hover-color: #E6E6E6 !default;
575+
$pagination-button-border-radius: 4px !default;
576+
$pagination-button-padding: 6px 12px !default;
575577
$pagination-border-color: #ddd !default;
576578
$pagination-count-margin-left: 2px !default;
577579
$pagination-icon-color: $primary-color !default;
@@ -589,6 +591,7 @@ $pagination-border-top: 0 none !default;
589591
$pagination-border-right: 0 none !default;
590592
$pagination-border-bottom: 0 none !default;
591593
$pagination-border-left: 0 none !default;
594+
$pagination-page-input-border-radius: 4px !default;
592595
$pagination-page-input-bgcolor: #fafbed !default;
593596
$pagination-page-input-height: 26px !default;
594597
$pagination-page-input-width: 50px !default;
@@ -597,7 +600,7 @@ $pagination-page-select-border-radius: 3px !default;
597600
$pagination-page-select-padding: 0 0 2px 2px !default;
598601
$pagination-page-select-height: 32px !default;
599602
$pagination-page-select-width: 60px !default;
600-
$pagination-page-select-font-size: calc($font-size-base - 2px) !default;
603+
$pagination-page-select-font-size: calc(#{$font-size-base} - 2px) !default;
601604
$pagination-text-color: #808080 !default;
602605

603606
/* Row Move Manager Plugin */

‎src/app/modules/angular-slickgrid/styles/slick-pagination.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
height: $pagination-page-input-height;
4747
width: $pagination-page-input-width;
4848
padding: $pagination-page-input-padding;
49+
border-radius: $pagination-page-input-border-radius;
4950
display: inline-block;
5051
}
5152
}
@@ -68,11 +69,25 @@
6869
text-decoration: none;
6970
font-family: $icon-font-family;
7071
-webkit-text-stroke: $pagination-icon-seek-text-stroke;
72+
padding: $pagination-button-padding;
7173
}
7274
a[class*="icon-seek-"]:hover {
7375
background-color: $pagination-button-hover-color;
7476
}
7577

78+
&:first-child {
79+
a, span {
80+
border-top-left-radius: $pagination-button-border-radius;
81+
border-bottom-left-radius: $pagination-button-border-radius;
82+
}
83+
}
84+
&:last-child {
85+
a, span {
86+
border-top-right-radius: $pagination-button-border-radius;
87+
border-bottom-right-radius: $pagination-button-border-radius;
88+
}
89+
}
90+
7691
.icon-seek-first {
7792
&:before {
7893
content: $pagination-icon-seek-first;

0 commit comments

Comments
 (0)