refactor: use nextcloud core breakpoint

Signed-off-by: Kai Henseler <[email protected]>
IONOS-Productivity · Aug 15, 2024 · 5a46b3a · 5a46b3a
1 parent 4928f40
commit 5a46b3a
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/src/components/help/Software.vue b/src/components/help/Software.vue
@@ -125,6 +125,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '../../../../../core/css/variables.scss' as variables;
 
 #software {
 	--software-content-width: 40em;
@@ -171,13 +172,13 @@ export default defineComponent({
 	vertical-align: middle;
 }
 
-@media (min-width: 600px) {
+@media screen and (min-width: calc(variables.$breakpoint-mobile / 2)) {
 	.desktop-app {
 		max-width: calc(var(--software-content-width) / 2);
 	}
 }
 
-@media (max-width: 600px) {
+@media screen and (max-width: calc(variables.$breakpoint-mobile / 2)) {
 	.mobile-apps {
 		flex-flow: column wrap;
 		gap: 1em;

diff --git a/src/components/security/AuthToken.vue b/src/components/security/AuthToken.vue
@@ -357,6 +357,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '../../../../../core/css/variables.scss' as variables;
+
 .auth-token {
 	border-top: 2px solid var(--color-border);
 	max-width: 200px;
@@ -400,7 +402,7 @@ export default defineComponent({
 	}
 }
 
-@media (max-width: 660px) {
+@media screen and (max-width: calc(variables.$breakpoint-mobile / 2)) {
 	.auth-token__name {
 		min-width: auto;
 	}

diff --git a/src/components/security/AuthTokenList.vue b/src/components/security/AuthTokenList.vue
@@ -73,6 +73,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '../../../../../core/css/variables.scss' as variables;
+
 .token-list {
 	width: 66.6%;
 	min-height: 50px;
@@ -96,7 +98,7 @@ export default defineComponent({
 	}
 }
 
-@media screen and (max-width: 660px) {
+@media screen and (max-width: calc(variables.$breakpoint-mobile / 2)) {
 	.token-list {
 		width: 100%;
 	}