diff options
| author | Christoph Wurst <ChristophWurst@users.noreply.github.com> | 2022-12-01 11:45:09 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-12-01 11:45:09 +0100 |
| commit | 77fc8975136fdc7986a263c165a3740a22a84b29 (patch) | |
| tree | 5857e224398b2e39b68fe8da902d4f0370660abd | |
| parent | 19c536fc0af57bcc1cbfdf5038b785ec394dd3cf (diff) | |
| parent | 211b11d5dcfd0f647a5e0a2b960f1fba1e0e4d6a (diff) | |
Merge pull request #3118 from nextcloud/chore/sass-div
Fix sass division deprecation warnings
| -rw-r--r-- | src/components/EntityPicker/EntityPicker.vue | 3 | ||||
| -rw-r--r-- | src/components/EntityPicker/EntitySearchResult.vue | 6 | ||||
| -rw-r--r-- | src/components/EntityPicker/NewCircleIntro.vue | 4 |
3 files changed, 9 insertions, 4 deletions
diff --git a/src/components/EntityPicker/EntityPicker.vue b/src/components/EntityPicker/EntityPicker.vue index 4de077de..7ec92b1b 100644 --- a/src/components/EntityPicker/EntityPicker.vue +++ b/src/components/EntityPicker/EntityPicker.vue @@ -374,6 +374,7 @@ export default { </script> <style lang="scss" scoped> +@use "sass:math"; // Dialog variables $dialog-padding: 20px; @@ -391,7 +392,7 @@ $icon-size: 16px; // icon padding for a $clickable-area width and a $icon-size icon // ( 44px - 16px ) / 2 -$icon-margin: ($clickable-area - $icon-size) / 2; +$icon-margin: math.div($clickable-area - $icon-size, 2); .entity-picker { position: relative; diff --git a/src/components/EntityPicker/EntitySearchResult.vue b/src/components/EntityPicker/EntitySearchResult.vue index 6cd3fe32..0b1d8f19 100644 --- a/src/components/EntityPicker/EntitySearchResult.vue +++ b/src/components/EntityPicker/EntitySearchResult.vue @@ -76,6 +76,8 @@ export default { </script> <style lang="scss" scoped> +@use "sass:math"; + // https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556 // recommended is 48px // 44px is what we choose and have very good visual-to-usability ratio @@ -87,7 +89,7 @@ $icon-size: 16px; // icon padding for a $clickable-area width and a $icon-size icon // ( 44px - 16px ) / 2 -$icon-margin: ($clickable-area - $icon-size) / 2; +$icon-margin: math.div($clickable-area - $icon-size, 2); .entity-picker { &__option { @@ -103,7 +105,7 @@ $icon-margin: ($clickable-area - $icon-size) / 2; line-height: $clickable-area; &:not(:first-child) { - margin-top: $clickable-area / 2; + margin-top: math.div($clickable-area, 2); } } } diff --git a/src/components/EntityPicker/NewCircleIntro.vue b/src/components/EntityPicker/NewCircleIntro.vue index d6242b52..9a247a9b 100644 --- a/src/components/EntityPicker/NewCircleIntro.vue +++ b/src/components/EntityPicker/NewCircleIntro.vue @@ -146,6 +146,8 @@ export default { </script> <style lang="scss" scoped> +@use "sass:math"; + // Dialog variables $dialog-padding: 20px; $dialog-height: 480px; @@ -162,7 +164,7 @@ $icon-size: 16px; // icon padding for a $clickable-area width and a $icon-size icon // ( 44px - 16px ) / 2 -$icon-margin: ($clickable-area - $icon-size) / 2; +$icon-margin: math.div($clickable-area - $icon-size, 2); .entity-picker { position: relative; |