From d3ede8ce7307f08d8f3c0074d952b1278877798b Mon Sep 17 00:00:00 2001 From: Francis Lachapelle Date: Tue, 4 Jan 2022 11:43:52 -0500 Subject: [PATCH] chore(npm): update md to v1.2.4 Fixed sass deprecation warnings. --- UI/WebServerResources/angular-material | 2 +- UI/WebServerResources/package.json | 4 ++-- .../components/autocomplete/autocomplete.scss | 2 +- .../scss/components/button/button.scss | 16 ++++++++-------- .../scss/components/checkbox/checkbox.scss | 2 +- .../scss/components/chips/chips.scss | 4 ++-- .../scss/components/content/content.scss | 2 +- .../draggable-droppable/draggable.scss | 4 ++-- .../scss/components/icon/icon.scss | 6 +++--- .../scss/components/list/list.scss | 4 ++-- .../progressCircular/progress-circular.scss | 2 +- .../scss/components/subheader/subheader.scss | 2 +- .../scss/components/timepicker/timepicker.scss | 8 ++++---- UI/WebServerResources/scss/core/layout.scss | 4 ++-- UI/WebServerResources/scss/core/structure.scss | 2 +- UI/WebServerResources/scss/core/typography.scss | 2 +- UI/WebServerResources/scss/styles.scss | 2 ++ UI/WebServerResources/scss/views/LoginUI.scss | 2 +- UI/WebServerResources/scss/views/MailerUI.scss | 4 ++-- .../scss/views/SchedulerUI.scss | 16 ++++++++-------- 20 files changed, 46 insertions(+), 44 deletions(-) diff --git a/UI/WebServerResources/angular-material b/UI/WebServerResources/angular-material index 61bbbc2c4..8b0abb4d2 160000 --- a/UI/WebServerResources/angular-material +++ b/UI/WebServerResources/angular-material @@ -1 +1 @@ -Subproject commit 61bbbc2c4b38799c89cfe05445209b60a4278b72 +Subproject commit 8b0abb4d221025e7287676e30b2a919940b2fe17 diff --git a/UI/WebServerResources/package.json b/UI/WebServerResources/package.json index 87ff669d7..f4ffb54a2 100644 --- a/UI/WebServerResources/package.json +++ b/UI/WebServerResources/package.json @@ -8,7 +8,7 @@ "angular-aria": "^1.8.0", "angular-cookies": "^1.8.0", "angular-file-upload": "^2.6.1", - "angular-material": "1.2.3", + "angular-material": "1.2.4", "angular-messages": "^1.8.0", "angular-sanitize": "^1.8.0", "angular-ui-router": "^1.0.29", @@ -28,7 +28,7 @@ "grunt-ng-annotate": "^4.0.0", "grunt-postcss": ">=0.6.0", "grunt-sass": "^3.1.0", - "sass": "^1.32.8", + "sass": "^1.45.2", "time-grunt": "latest" }, "browserslist": [ diff --git a/UI/WebServerResources/scss/components/autocomplete/autocomplete.scss b/UI/WebServerResources/scss/components/autocomplete/autocomplete.scss index 361b6abdc..5899ddceb 100644 --- a/UI/WebServerResources/scss/components/autocomplete/autocomplete.scss +++ b/UI/WebServerResources/scss/components/autocomplete/autocomplete.scss @@ -6,7 +6,7 @@ // From angular-material/src/components/list/list.scss // -$dense-baseline-grid: $baseline-grid / 2 !default; +$dense-baseline-grid: $baseline-grid * 0.5 !default; $list-h3-margin: 0 0 0 0 !default; $list-h4-margin: 3px 0 1px 0 !default; diff --git a/UI/WebServerResources/scss/components/button/button.scss b/UI/WebServerResources/scss/components/button/button.scss index c7b418c3d..3605df9d8 100644 --- a/UI/WebServerResources/scss/components/button/button.scss +++ b/UI/WebServerResources/scss/components/button/button.scss @@ -26,7 +26,7 @@ a.md-button-wrap-executor.md-no-style { .md-button.md-fab-overlap-bottom { &.md-fab-bottom-right, &.md-fab-bottom-left { - bottom: -(($button-fab-width + $button-fab-padding)/2); + bottom: -(($button-fab-width + $button-fab-padding)*0.5); } } @@ -77,15 +77,15 @@ a.md-button-wrap-executor.md-no-style { */ .sg-fab-bottom-center { position: absolute; - bottom: ($button-fab-height - $button-fab-padding)/2; + bottom: ($button-fab-height - $button-fab-padding)*0.5; left: auto; - right: ($button-fab-width - $button-fab-padding)/2; + right: ($button-fab-width - $button-fab-padding)*0.5; top: auto; transition: $swift-ease-out; @include at(sm) { right: col-width($breakpoint: sm, $nb: 10) + 2vw; &.sg-center-close { - left: ($button-fab-width - $button-fab-padding)/2; + left: ($button-fab-width - $button-fab-padding)*0.5; right: auto; } } @@ -93,7 +93,7 @@ a.md-button-wrap-executor.md-no-style { // sidenav is hidden, center list can be closed right: col-width($breakpoint: md, $nb: 14) + 2vw; &.sg-center-close { - left: ($button-fab-width - $button-fab-padding)/2; + left: ($button-fab-width - $button-fab-padding)*0.5; right: auto; } } @@ -104,7 +104,7 @@ a.md-button-wrap-executor.md-no-style { right: col-width($breakpoint: lg, $nb: 14) + 2vw; } &.sg-sidenav-close.sg-center-close { - left: ($button-fab-width - $button-fab-padding)/2; + left: ($button-fab-width - $button-fab-padding)*0.5; right: auto; } } @@ -144,7 +144,7 @@ $iconButton-size-cursor-coarse: $iconButton-size; // Could be use to scale-down buttons if desktop layout suffers too much from touch-size $iconButton-size-cursor-fine: $iconButton-size; // convenient wrapper for padding calculation todo: write a mixin or a function for a more generic use -$iconButton-padding: ($iconButton-size - ($iconButton-icon-size + ($iconButton-icon-padding * 2))) / 2; +$iconButton-padding: ($iconButton-size - ($iconButton-icon-size + ($iconButton-icon-padding * 2))) * 0.5; $iconButton-hover-scale: 1.25; $iconButton-transition: all $swift-ease-in-duration $swift-ease-in-timing-function; @@ -183,7 +183,7 @@ md-list md-list-item button.md-button.sg-icon-button { md-tab-content { .md-subheader-content { .md-icon-button:first-child { - margin-right: $icon-button-margin/2; + margin-right: $icon-button-margin*0.5; } } } diff --git a/UI/WebServerResources/scss/components/checkbox/checkbox.scss b/UI/WebServerResources/scss/components/checkbox/checkbox.scss index e3d19b47e..c6294b8d0 100644 --- a/UI/WebServerResources/scss/components/checkbox/checkbox.scss +++ b/UI/WebServerResources/scss/components/checkbox/checkbox.scss @@ -21,7 +21,7 @@ md-sidenav .md-dense :not(.md-dense-disabled) md-checkbox:not(.md-dense-disabled // Checkbox in an inline form beside a select element .md-inline-form md-checkbox.sg-checkbox--with-select { - margin: 2.5*$baseline-grid $baseline-grid/2 3*$baseline-grid + 2 0; + margin: 2.5*$baseline-grid $baseline-grid*0.5 3*$baseline-grid + 2 0; } // Checkbox for the sg-checkmark directive diff --git a/UI/WebServerResources/scss/components/chips/chips.scss b/UI/WebServerResources/scss/components/chips/chips.scss index 800ebf801..d0116f490 100644 --- a/UI/WebServerResources/scss/components/chips/chips.scss +++ b/UI/WebServerResources/scss/components/chips/chips.scss @@ -29,7 +29,7 @@ md-chips { } position: absolute; right: 0; - margin: (($chip-height - 24) / 2); + margin: (($chip-height - 24) * 0.5); height: $chip-delete-icon-size; width: $chip-delete-icon-size; } @@ -45,7 +45,7 @@ md-chips { line-height: $chip-dense-height; } .sg-chip-progress { - border-radius: $chip-height / 2; + border-radius: $chip-height * 0.5; bottom: 0; left: 0; overflow: hidden; diff --git a/UI/WebServerResources/scss/components/content/content.scss b/UI/WebServerResources/scss/components/content/content.scss index ccc368785..dbf95dafd 100644 --- a/UI/WebServerResources/scss/components/content/content.scss +++ b/UI/WebServerResources/scss/components/content/content.scss @@ -18,7 +18,7 @@ .sg-subcontent { border-left: $baseline-grid solid sg-color($sogoGreen, 100); - margin-left: ($baseline-grid / 2); + margin-left: ($baseline-grid * 0.5); padding-left: $baseline-grid; } diff --git a/UI/WebServerResources/scss/components/draggable-droppable/draggable.scss b/UI/WebServerResources/scss/components/draggable-droppable/draggable.scss index 86c4b97f3..389451a60 100644 --- a/UI/WebServerResources/scss/components/draggable-droppable/draggable.scss +++ b/UI/WebServerResources/scss/components/draggable-droppable/draggable.scss @@ -22,8 +22,8 @@ sg-draggable-helper { min-width: $icon-badge-size; position: absolute; text-align: center; - right: ($icon-size - $icon-badge-size) / 2; - top: ($icon-size - $icon-badge-size) / 2; + right: ($icon-size - $icon-badge-size) * 0.5; + top: ($icon-size - $icon-badge-size) * 0.5; } } diff --git a/UI/WebServerResources/scss/components/icon/icon.scss b/UI/WebServerResources/scss/components/icon/icon.scss index f236ce61c..61982f365 100644 --- a/UI/WebServerResources/scss/components/icon/icon.scss +++ b/UI/WebServerResources/scss/components/icon/icon.scss @@ -70,11 +70,11 @@ md-icon { min-height: $icon-badge-size; min-width: $icon-badge-size; position: absolute; - right: ($icon-size - $icon-badge-size) / 2; - top: ($icon-size - $icon-badge-size) / 2; + right: ($icon-size - $icon-badge-size) * 0.5; + top: ($icon-size - $icon-badge-size) * 0.5; } &.sg-icon--badge-bottom { - bottom: ($icon-size - $icon-badge-size) / 2; + bottom: ($icon-size - $icon-badge-size) * 0.5; top: auto; } &.md-rotate-45 { diff --git a/UI/WebServerResources/scss/components/list/list.scss b/UI/WebServerResources/scss/components/list/list.scss index e2aa10054..14921a304 100644 --- a/UI/WebServerResources/scss/components/list/list.scss +++ b/UI/WebServerResources/scss/components/list/list.scss @@ -134,7 +134,7 @@ md-list-item { border-radius: 50%; padding: $layout-gutter-width; padding: $baseline-grid * 1.5; - padding: ($sg-md-grid-pitch - $sg-avatar-width) / 2; + padding: ($sg-md-grid-pitch - $sg-avatar-width) * 0.5; width: $sg-md-grid-pitch; height: $sg-md-grid-pitch; //line-height: $sg-md-grid-pitch + $baseline-grid; @@ -368,7 +368,7 @@ sg-avatar-image img { color: inherit; content: "\e835"; // check box outline font-size: $icon-size; - margin: 0 ($sg-avatar-width - $icon-size)/2; + margin: 0 ($sg-avatar-width - $icon-size)*0.5; } &.sg-avatar-selected::before { content: "\e834"; // check box diff --git a/UI/WebServerResources/scss/components/progressCircular/progress-circular.scss b/UI/WebServerResources/scss/components/progressCircular/progress-circular.scss index 835857150..3e01f8919 100644 --- a/UI/WebServerResources/scss/components/progressCircular/progress-circular.scss +++ b/UI/WebServerResources/scss/components/progressCircular/progress-circular.scss @@ -13,7 +13,7 @@ bottom: auto; background-color: white; border-radius: 50%; - padding: $baseline-grid/2; + padding: $baseline-grid*0.5; box-shadow: $whiteframe-shadow-3dp; z-index: $z-index-view; md-progress-circular { diff --git a/UI/WebServerResources/scss/components/subheader/subheader.scss b/UI/WebServerResources/scss/components/subheader/subheader.scss index 773a74e4e..046accb39 100644 --- a/UI/WebServerResources/scss/components/subheader/subheader.scss +++ b/UI/WebServerResources/scss/components/subheader/subheader.scss @@ -1,7 +1,7 @@ /// subheader.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*- @import 'extends'; -$sg-subheader-padding-top-bottom: ($subheader-padding - ($icon-button-height - $subheader-font-size)/2); +$sg-subheader-padding-top-bottom: ($subheader-padding - ($icon-button-height - $subheader-font-size)*0.5); $sg-subheader-padding-left-right: $baseline-grid; diff --git a/UI/WebServerResources/scss/components/timepicker/timepicker.scss b/UI/WebServerResources/scss/components/timepicker/timepicker.scss index 99f2d9b2a..14de8954c 100644 --- a/UI/WebServerResources/scss/components/timepicker/timepicker.scss +++ b/UI/WebServerResources/scss/components/timepicker/timepicker.scss @@ -91,8 +91,8 @@ sg-timepicker { overflow: hidden; // Leave room for the down-triangle button to "overflow" it's parent without modifying scrollLeft - padding-right: $md-datepicker-triangle-button-width / 2; - margin-right: -$md-datepicker-triangle-button-width / 2; + padding-right: $md-datepicker-triangle-button-width * 0.5; + margin-right: -$md-datepicker-triangle-button-width * 0.5; vertical-align: middle; } @@ -125,7 +125,7 @@ sg-timepicker { // down the error messages more than they should be. @include rtl(float, left, right); margin-top: $button-left-right-padding * -2; - top: $button-left-right-padding * 2 - $md-datepicker-border-bottom-gap / 2; + top: $button-left-right-padding * 2 - $md-datepicker-border-bottom-gap * 0.5; } } @@ -136,7 +136,7 @@ sg-timepicker { &._sg-timepicker-has-calendar-icon { > label:not(.md-no-float):not(.md-container-ignore) { $width-offset: $md-datepicker-triangle-button-width * 2 + $md-datepicker-button-gap; - $offset: $md-datepicker-triangle-button-width / 2; + $offset: $md-datepicker-triangle-button-width * 0.5; @include rtl(right, $offset, auto); @include rtl(left, auto, $offset); width: calc(100% - #{$width-offset}); diff --git a/UI/WebServerResources/scss/core/layout.scss b/UI/WebServerResources/scss/core/layout.scss index 2c014da29..7c4508b31 100644 --- a/UI/WebServerResources/scss/core/layout.scss +++ b/UI/WebServerResources/scss/core/layout.scss @@ -165,7 +165,7 @@ */ @function col-width($breakpoint, $nb) { $cols: map-get($base-grid-total-columns, $breakpoint); - @return ((100 / $cols) * $nb * 1vw); + @return (math.div(100, $cols) * $nb * 1vw); } /** @@ -173,7 +173,7 @@ */ @mixin flex-col($breakpoint, $nb, $grow: 1, $shrink: 1) { $cols: map-get($base-grid-total-columns, $breakpoint); - $colWidth: ((100 / $cols) * 1vw); + $colWidth: (math.div(100, $cols) * 1vw); max-width: ($colWidth * $nb); flex: $grow $shrink ($colWidth * $nb); } diff --git a/UI/WebServerResources/scss/core/structure.scss b/UI/WebServerResources/scss/core/structure.scss index b550133fd..69154c840 100644 --- a/UI/WebServerResources/scss/core/structure.scss +++ b/UI/WebServerResources/scss/core/structure.scss @@ -66,7 +66,7 @@ html * { @extend .md-whiteframe-2dp; @extend .md-padding; background-color: white; - margin-bottom: $mg/2; + margin-bottom: $mg*0.5; &:last-child { margin-bottom: 0; diff --git a/UI/WebServerResources/scss/core/typography.scss b/UI/WebServerResources/scss/core/typography.scss index 65dfd4acd..48142c405 100644 --- a/UI/WebServerResources/scss/core/typography.scss +++ b/UI/WebServerResources/scss/core/typography.scss @@ -130,7 +130,7 @@ $md-prefix : 'sg-md'; /// @alias $md-prefix $md: $md-prefix; $sg-rem-Base-value: 16; -$sg-sp-value: (1 / $sg-rem-Base-value) !default; // sp value +$sg-sp-value: math.div(1, $sg-rem-Base-value) !default; // sp value $sg-md-typo-baseline: 4px; $sg-base-line-height: 1.3; diff --git a/UI/WebServerResources/scss/styles.scss b/UI/WebServerResources/scss/styles.scss index 5129855d1..7612a8525 100755 --- a/UI/WebServerResources/scss/styles.scss +++ b/UI/WebServerResources/scss/styles.scss @@ -1,5 +1,7 @@ /// styles.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*- +@use "sass:math"; + // Breakpoint (https://github.com/at-import/breakpoint) // ------------------------------------------------------------------------------ @import 'breakpoint'; diff --git a/UI/WebServerResources/scss/views/LoginUI.scss b/UI/WebServerResources/scss/views/LoginUI.scss index 3f3139ac0..b34f59796 100644 --- a/UI/WebServerResources/scss/views/LoginUI.scss +++ b/UI/WebServerResources/scss/views/LoginUI.scss @@ -64,7 +64,7 @@ $sg-login-width: grid-step(5); &.ng-hide { .sg-logo img { opacity: 0; - transform: translateX($sg-login-width/2 + $baseline-grid + $baseline-grid*2); + transform: translateX($sg-login-width*0.5 + $baseline-grid + $baseline-grid*2); } .sg-login { opacity: 0; diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss index 86cd7261e..bac627c8b 100644 --- a/UI/WebServerResources/scss/views/MailerUI.scss +++ b/UI/WebServerResources/scss/views/MailerUI.scss @@ -371,8 +371,8 @@ md-dialog md-dialog-actions.sg-mail-editor-attachments { .msg-header-buttons .md-icon-button { // Attachment button (file upload label) // Lower margins to fit the md-actions max height (52px) - margin-bottom: $baseline-grid/2; - margin-top: $baseline-grid/2; + margin-bottom: $baseline-grid*0.5; + margin-top: $baseline-grid*0.5; } } diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss index a656a56a6..3a026147c 100644 --- a/UI/WebServerResources/scss/views/SchedulerUI.scss +++ b/UI/WebServerResources/scss/views/SchedulerUI.scss @@ -34,7 +34,7 @@ $quarter_height: 10px; // The color chip is smaller; adjust the "selected" icon accordingly .sg-list-selectable .sg-avatar-selectable:before, .sg-avatar-selectable:hover:before { - margin: 0 (($sg-color-chip-width + 2*$bl) - $icon-size)/2; + margin: 0 (($sg-color-chip-width + 2*$bl) - $icon-size)*0.5; } } @@ -54,7 +54,7 @@ $quarter_height: 10px; // sidenav is hidden, center list can be closed right: col-width($breakpoint: md, $nb: 15) + 2vw; &.sg-center-close { - left: ($button-fab-width - $button-fab-padding)/2; + left: ($button-fab-width - $button-fab-padding)*0.5; right: auto; } } @@ -68,7 +68,7 @@ $quarter_height: 10px; right: col-width($breakpoint: lg, $nb: 14) + 2vw; } &.sg-sidenav-close.sg-center-close { - left: ($button-fab-width - $button-fab-padding)/2; + left: ($button-fab-width - $button-fab-padding)*0.5; right: auto; } } @@ -745,8 +745,8 @@ $quarter_height: 10px; // } > .md-avatar { // Overwrite default margin to gain some space and match 48px - margin-top: $baseline-grid/2; - margin-bottom: $baseline-grid/2; + margin-top: $baseline-grid*0.5; + margin-bottom: $baseline-grid*0.5; } } .md-tile-left { @@ -802,9 +802,9 @@ $quarter_height: 10px; * Print page preview */ $preview-size: 200px; -$preview-letter-ratio: 8.5 / 11; -$preview-legal-ratio: 8.5 / 14; -$preview-a4-ratio: 210 / 297; +$preview-letter-ratio: math.div(8.5, 11); +$preview-legal-ratio: math.div(8.5, 14); +$preview-a4-ratio: math.div(210, 297); .sg-print-preview { .letter.portrait & {