diff --git a/src/addons/calendar/components/calendar/calendar.scss b/src/addons/calendar/components/calendar/calendar.scss index ab1d358e8..35cd3ccbd 100644 --- a/src/addons/calendar/components/calendar/calendar.scss +++ b/src/addons/calendar/components/calendar/calendar.scss @@ -1,3 +1,5 @@ +@import "~theme/globals"; + :host { --addon-calendar-blank-day-background-color: var(--light); @@ -48,7 +50,7 @@ } } - @media (min-width: 768px) { + @include media-breakpoint-up(md) { .addon-calendar-day-number { text-align: start; } diff --git a/src/core/features/login/components/site-onboarding/site-onboarding.scss b/src/core/features/login/components/site-onboarding/site-onboarding.scss index 102760920..94fc77e9a 100644 --- a/src/core/features/login/components/site-onboarding/site-onboarding.scss +++ b/src/core/features/login/components/site-onboarding/site-onboarding.scss @@ -1,8 +1,10 @@ +@import "~theme/globals"; + :host { .core-login-onboarding-step { padding: 10px 20px; text-align: center; - @media (min-width: 768px) { + @include media-breakpoint-up(md) { max-width: 80%; } margin: 0 auto; diff --git a/src/core/features/login/pages/site/site.scss b/src/core/features/login/pages/site/site.scss index b11602d42..8c655c802 100644 --- a/src/core/features/login/pages/site/site.scss +++ b/src/core/features/login/pages/site/site.scss @@ -100,7 +100,7 @@ } } -@media (min-width: 768px) { +@include media-breakpoint-up(md) { ion-content > * { max-width: 600px; margin: 0 auto; diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 0143bf8b3..9d0ebbe08 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -393,6 +393,15 @@ ion-alert.core-nohead { ion-alert { --border-radius: var(--huge-radius); + + &.md, &.ios { + --max-width: 80%; + + @include media-breakpoint-up(md) { + --max-width: 384px; + } + } + .alert-wrapper { overflow: auto; border-radius: var(--border-radius) !important;