From 1ac4123e2dfd5e4f5e4101e54c64839ca97b68c2 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Tue, 3 Jan 2023 21:56:18 +0100 Subject: [PATCH] Replace `map-get` with `map.get` --- .../stylesheets/components/_answerbox.scss | 20 +++++++------- .../stylesheets/components/_comments.scss | 6 +++-- .../stylesheets/components/_container.scss | 8 +++--- app/assets/stylesheets/components/_entry.scss | 6 +++-- .../stylesheets/components/_locales.scss | 6 +++-- .../components/_notifications.scss | 6 +++-- .../stylesheets/components/_profile.scss | 26 ++++++++++--------- .../stylesheets/components/_smiles.scss | 20 +++++++------- .../stylesheets/components/_userbox.scss | 12 +++++---- app/assets/stylesheets/overrides/_card.scss | 8 +++--- 10 files changed, 69 insertions(+), 49 deletions(-) diff --git a/app/assets/stylesheets/components/_answerbox.scss b/app/assets/stylesheets/components/_answerbox.scss index 74b33157..474d1f5a 100644 --- a/app/assets/stylesheets/components/_answerbox.scss +++ b/app/assets/stylesheets/components/_answerbox.scss @@ -1,13 +1,15 @@ +@use "sass:map"; + .answerbox { - &__question-text, - &__question-user, - &__answer-user, + &__question-text, + &__question-user, + &__answer-user, &__answer-date { margin-bottom: 0; overflow: hidden; word-break: break-word; } - + &__answer-date { font-size: .8rem; line-height: .8; @@ -15,16 +17,16 @@ } &__answer-text { - margin-bottom: map-get($spacers, 3); + margin-bottom: map.get($spacers, 3); } &__question-user-avatar, &__answer-user-avatar { - margin-right: map-get($spacers, 2); + margin-right: map.get($spacers, 2); border-radius: $avatar-border-radius; } - & .text-muted a, + & .text-muted a, & .text-muted a:hover { color: var(--muted-text); text-decoration: none; @@ -32,7 +34,7 @@ &__action { padding-left: 0; - padding-right: map-get($spacers, 1); + padding-right: map.get($spacers, 1); & i { font-size: 1.4rem; @@ -55,7 +57,7 @@ &[data-action="unsmile"] { color: var(--success); - + &:hover { color: var(--danger); } diff --git a/app/assets/stylesheets/components/_comments.scss b/app/assets/stylesheets/components/_comments.scss index 1ee43d24..fed1e673 100644 --- a/app/assets/stylesheets/components/_comments.scss +++ b/app/assets/stylesheets/components/_comments.scss @@ -1,6 +1,8 @@ +@use "sass:map"; + .comment { list-style-type: none; - margin-bottom: map-get($spacers, 2); + margin-bottom: map.get($spacers, 2); &__container { padding-left: 0; @@ -13,7 +15,7 @@ } &__user-avatar { - margin-right: map-get($spacers, 2); + margin-right: map.get($spacers, 2); border-radius: $avatar-border-radius; } diff --git a/app/assets/stylesheets/components/_container.scss b/app/assets/stylesheets/components/_container.scss index 701a5517..a9bf3e06 100644 --- a/app/assets/stylesheets/components/_container.scss +++ b/app/assets/stylesheets/components/_container.scss @@ -1,10 +1,12 @@ +@use "sass:map"; + .container--main { - padding-top: map-get($spacers, 3); - padding-bottom: map-get($spacers, 3); + padding-top: map.get($spacers, 3); + padding-bottom: map.get($spacers, 3); // Sass doesn't know about the safe-area-inset-* env vars and throws a syntax error // We can get around this by using unquote() // Sass also has its own built-in max() function which is not the same as the CSS one // In order to use the correct one we can write it as Max() instead padding-left: unquote('Max(15px, env(safe-area-inset-left))'); padding-right: unquote('Max(15px, env(safe-area-inset-right))'); -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/components/_entry.scss b/app/assets/stylesheets/components/_entry.scss index 9d3dc03b..2afa5274 100644 --- a/app/assets/stylesheets/components/_entry.scss +++ b/app/assets/stylesheets/components/_entry.scss @@ -1,6 +1,8 @@ +@use "sass:map"; + .entry { $this: &; - margin: map-get($spacers, 4) 0; + margin: map.get($spacers, 4) 0; &__value { display: block; @@ -19,4 +21,4 @@ text-align: center; text-transform: uppercase; } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/components/_locales.scss b/app/assets/stylesheets/components/_locales.scss index 48a6ff5c..25bd5dba 100644 --- a/app/assets/stylesheets/components/_locales.scss +++ b/app/assets/stylesheets/components/_locales.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + .locales { text-align: center; @@ -9,7 +11,7 @@ ul { margin: 0; padding: 0; - padding-top: map-get($spacers, 3); + padding-top: map.get($spacers, 3); width: 100%; list-style: none; display: inline-flex; @@ -17,7 +19,7 @@ flex-wrap: wrap; align-items: center; justify-content: center; - + li { margin: 0 5px 10px 5px; flex: 0 0 auto; diff --git a/app/assets/stylesheets/components/_notifications.scss b/app/assets/stylesheets/components/_notifications.scss index 07ce4e23..53fa696e 100644 --- a/app/assets/stylesheets/components/_notifications.scss +++ b/app/assets/stylesheets/components/_notifications.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + .notification { word-break: break-word; @@ -12,7 +14,7 @@ } &__icon { - margin-right: map-get($spacers, 2); + margin-right: map.get($spacers, 2); min-width: 40px; } @@ -49,7 +51,7 @@ } .list-group-item { - margin-top: map-get($spacers, 2); + margin-top: map.get($spacers, 2); background-color: var(--raised-accent); p { diff --git a/app/assets/stylesheets/components/_profile.scss b/app/assets/stylesheets/components/_profile.scss index 6d8a8229..efebc377 100644 --- a/app/assets/stylesheets/components/_profile.scss +++ b/app/assets/stylesheets/components/_profile.scss @@ -1,21 +1,23 @@ +@use "sass:map"; + .profile { &__avatar { display: block; - width: map-get($avatar-sizes, "xl"); - height: map-get($avatar-sizes, "xl"); - margin: -(map-get($avatar-sizes, "xl") / 2.5) map-get($spacers, 4) 0; + width: map.get($avatar-sizes, "xl"); + height: map.get($avatar-sizes, "xl"); + margin: -(map.get($avatar-sizes, "xl") / 2.5) map.get($spacers, 4) 0; border-radius: $avatar-border-radius; box-shadow: $box-shadow; @include media-breakpoint-up(sm) { - width: map-get($avatar-sizes, "xxl"); - height: map-get($avatar-sizes, "xxl"); - margin: -(map-get($avatar-sizes, "xxl") / 2) auto 0; + width: map.get($avatar-sizes, "xxl"); + height: map.get($avatar-sizes, "xxl"); + margin: -(map.get($avatar-sizes, "xxl") / 2) auto 0; } } &__header-card { - margin-top: map-get($spacers, 3); + margin-top: map.get($spacers, 3); overflow: hidden; } @@ -25,7 +27,7 @@ overflow: hidden; @include media-breakpoint-up(sm) { - padding: map-get($spacers, 4); + padding: map.get($spacers, 4); padding-bottom: 0; } } @@ -50,12 +52,12 @@ &__biography, &__website, &__location { - margin-bottom: map-get($spacers, 3); + margin-bottom: map.get($spacers, 3); } &__actions, &__biography { - margin-top: map-get($spacers, 3); + margin-top: map.get($spacers, 3); } &__display-name { @@ -83,7 +85,7 @@ @include media-breakpoint-up(sm) { &__name { - margin-bottom: map-get($spacers, 3); + margin-bottom: map.get($spacers, 3); } & .card-body { @@ -94,4 +96,4 @@ .user--banned { text-decoration: line-through !important; -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/components/_smiles.scss b/app/assets/stylesheets/components/_smiles.scss index b1725d2c..a7e171fb 100644 --- a/app/assets/stylesheets/components/_smiles.scss +++ b/app/assets/stylesheets/components/_smiles.scss @@ -1,28 +1,30 @@ +@use "sass:map"; + .smiles { - margin-bottom: map-get($spacers, 2); + margin-bottom: map.get($spacers, 2); &__user-list { margin: 0; padding: 0; list-style-type: none; } - + &__user-list-entry { - margin-bottom: map-get($spacers, 3); - + margin-bottom: map.get($spacers, 3); + * { display: inline-block; vertical-align: middle; } - + img { - height: map-get($avatar-sizes, "lg"); - width: map-get($avatar-sizes, "lg"); + height: map.get($avatar-sizes, "lg"); + width: map.get($avatar-sizes, "lg"); border-radius: $avatar-border-radius; } - + span { margin-left: 5px; } } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/components/_userbox.scss b/app/assets/stylesheets/components/_userbox.scss index 09de41ec..ab76a459 100644 --- a/app/assets/stylesheets/components/_userbox.scss +++ b/app/assets/stylesheets/components/_userbox.scss @@ -1,19 +1,21 @@ +@use "sass:map"; + .userbox { &__header { width: 100%; height: auto; max-height: 70px; - @include media-breakpoint-up(sm) { + @include media-breakpoint-up(sm) { max-height: 60px; } } &__avatar { display: block; - width: map-get($avatar-sizes, "lg"); - height: map-get($avatar-sizes, "lg"); - margin-top: -(map-get($avatar-sizes, "lg") / 2); + width: map.get($avatar-sizes, "lg"); + height: map.get($avatar-sizes, "lg"); + margin-top: -(map.get($avatar-sizes, "lg") / 2); margin-left: auto; margin-right: auto; border-radius: $avatar-border-radius; @@ -22,7 +24,7 @@ .profile__name { display: block; - margin: map-get($spacers, 3) 0; + margin: map.get($spacers, 3) 0; text-align: center; } diff --git a/app/assets/stylesheets/overrides/_card.scss b/app/assets/stylesheets/overrides/_card.scss index 949c21bb..969f7876 100644 --- a/app/assets/stylesheets/overrides/_card.scss +++ b/app/assets/stylesheets/overrides/_card.scss @@ -1,5 +1,7 @@ +@use "sass:map"; + .card { - margin-bottom: map-get($spacers, 3); + margin-bottom: map.get($spacers, 3); box-shadow: $box-shadow-sm; background-color: var(--raised-bg); @@ -8,11 +10,11 @@ } &--fullheight { - height: calc(100% - map-get($spacers, 3)); + height: calc(100% - #{map.get($spacers, 3)}); } } .card-header, .card-footer { background-color: var(--raised-accent); -} \ No newline at end of file +}