From c727480569d547a2e07ca1c3bd0475ee3705ca53 Mon Sep 17 00:00:00 2001 From: pablone Date: Wed, 13 Sep 2023 16:46:09 +0200 Subject: [PATCH] refs #6118 scoppedcss --- src/css/app.scss | 8 +- src/css/quasar.variables.scss | 10 ++ src/css/variables.scss | 138 ------------------ src/css/width.scss | 26 ---- src/pages/Customer/Card/CustomerBasicData.vue | 7 + 5 files changed, 18 insertions(+), 171 deletions(-) delete mode 100644 src/css/variables.scss delete mode 100644 src/css/width.scss diff --git a/src/css/app.scss b/src/css/app.scss index 65495de935..a65fcfec6e 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -1,6 +1,5 @@ // app global css in SCSS form @import './icons.scss'; -@import './width.scss'; a { text-decoration: none; @@ -15,14 +14,9 @@ a { color: $orange-4; } -.q-card { - width: $width-full; - max-width: $width-md; -} - @media screen and (max-width: $width-md) { .q-form > div { - flex-direction: column; // Cambia la dirección cuando pase de cierto tamaño + flex-direction: column; } } diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss index 808bf3468d..558aa63f08 100644 --- a/src/css/quasar.variables.scss +++ b/src/css/quasar.variables.scss @@ -47,3 +47,13 @@ $dark-shadow-color: #000; $dark: #292929; $layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24); $spacing-md: 16px; + +// Width from Salix variables.scss + +$width-xs: 400px; +$width-sm: 544px; +$width-md: 800px; +$width-lg: 1280px; +$width-xl: 1600px; + +$width-full: 100%; diff --git a/src/css/variables.scss b/src/css/variables.scss deleted file mode 100644 index 9f047456c6..0000000000 --- a/src/css/variables.scss +++ /dev/null @@ -1,138 +0,0 @@ -$font-size: 11pt; -$menu-width: 256px; -$topbar-height: 56px; -$mobile-width: 800px; -$float-spacing: 20px; - -// Width - -$width-xs: 400px; -$width-sm: 544px; -$width-md: 800px; -$width-lg: 1280px; -$width-xl: 1600px; - -$width-full: 100%; - -// Spacing - -$spacing-xs: 4px; -$spacing-sm: 8px; -$spacing-md: 16px; -$spacing-lg: 32px; -$spacing-xl: 70px; - -// Light theme - -/* $color-primary: #f7931e; -$color-secondary: $color-primary; - -$color-font: #222; -$color-font-light: #555; -$color-font-secondary: #9b9b9b; -$color-font-dark: white; -$color-font-link: #005a9a; -$color-font-bg: rgba(0, 0, 0, .7); -$color-font-bg-marginal: rgba(0, 0, 0, .4); -$color-font-bg-dark: rgba(255, 255, 255, .7); -$color-font-bg-dark-marginal: rgba(255, 255, 255, .4); - -$color-header: #3d3d3d; -$color-menu-header: #3d3d3d; -$color-bg: #e5e5e5; -$color-bg-dark: #3d3d3d; -$color-active: #3d3d3d; -$color-active-font: $color-font-dark; -$color-bg-panel: white; -$color-main: $color-primary; -$color-marginal: #ccc; -$color-success: #a3d131; -$color-notice: #32b1ce; -$color-alert: #f42121; -$color-button: $color-secondary; - -$color-spacer: rgba(0, 0, 0, .3); -$color-spacer-light: rgba(0, 0, 0, .12); -$color-input-underline: rgba(0, 0, 0, .12); -$color-input-underline-hover: rgba(0, 0, 0, .6); -$color-shadow: rgba(0, 0, 0, .2); -$color-hightlight: rgba(0, 0, 0, .05); -$color-hover-cd: rgba(0, 0, 0, .1); -$color-hover-dc: .7; -$color-disabled: .6; - -$color-primary-medium: lighten($color-primary, 20%); -$color-primary-light: lighten($color-primary, 35%); -$color-font-link-medium: lighten($color-font-link, 20%); -$color-font-link-light: lighten($color-font-link, 35%); -$color-main-medium: lighten($color-main, 20%); -$color-main-light: lighten($color-main, 35%); -$color-success-medium: lighten($color-success, 20%); -$color-success-light: lighten($color-success, 35%); -$color-notice-medium: lighten($color-notice, 20%); -$color-notice-light: lighten($color-notice, 35%); -$color-alert-medium: lighten($color-alert, 20%); -$color-alert-light: lighten($color-alert, 35%); */ -/**/ - -// Dark theme -$color-primary: #ec8916; -$color-secondary: $color-primary; - -$color-font: #eee; -$color-font-light: #aaa; -$color-font-secondary: #777; -$color-font-dark: white; -$color-font-link: #66bfff; -$color-font-bg: rgba(0, 0, 0, 0.8); -$color-font-bg-marginal: rgba(255, 255, 255, 0.4); -$color-font-bg-dark: rgba(255, 255, 255, 0.7); -$color-font-bg-dark-marginal: rgba(255, 255, 255, 0.4); - -$color-header: #3d3d3d; -$color-menu-header: #3d3d3d; -$color-bg: #222; -$color-bg-dark: #222; -$color-active: #666; -$color-active-font: white; -$color-bg-panel: #3c3b3b; -$color-main: $color-primary; -$color-marginal: #222; -$color-success: #a3d131; -$color-notice: #32b1ce; -$color-alert: #fa3939; -$color-pink: #ff99cc; -$color-yellow: #ffff00; -$color-button: $color-secondary; - -$color-spacer: rgba(255, 255, 255, 0.3); -$color-spacer-light: rgba(255, 255, 255, 0.12); -$color-input-underline: rgba(255, 255, 255, 0.12); -$color-input-underline-hover: rgba(255, 255, 255, 0.6); -$color-shadow: rgba(0, 0, 0, 0.2); -$color-border: rgba(0, 0, 0, 0.3); -$color-hightlight: rgba(255, 255, 255, 0.15); -$color-hover-cd: rgba(255, 255, 255, 0.1); -$color-hover-dc: 0.7; -$color-disabled: 0.6; - -$color-primary-medium: lighten($color-primary, 20%); -$color-primary-light: lighten($color-primary, 35%); -$color-font-link-medium: lighten($color-font-link, 20%); -$color-font-link-light: lighten($color-font-link, 35%); -$color-main-medium: lighten($color-main, 20%); -$color-main-light: lighten($color-main, 35%); -$color-success-medium: lighten($color-success, 20%); -$color-success-light: lighten($color-success, 35%); -$color-notice-medium: lighten($color-notice, 20%); -$color-notice-light: lighten($color-notice, 35%); -$color-alert-medium: lighten($color-alert, 20%); -$color-alert-light: lighten($color-alert, 35%); -/**/ - -// Border - -$border-thin: 1px solid $color-border; -$border-thin-light: 1px solid $color-spacer-light; -$border: 2px solid $color-border; -$shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3); diff --git a/src/css/width.scss b/src/css/width.scss deleted file mode 100644 index e017de3eaf..0000000000 --- a/src/css/width.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import "./variables"; - -%margin-auto { - margin-left: auto; - margin-right: auto; -} -.vn-w-xs { - @extend %margin-auto; - max-width: $width-xs; -} -.vn-w-sm { - @extend %margin-auto; - max-width: $width-sm; -} -.vn-w-md { - @extend %margin-auto; - max-width: $width-md; -} -.vn-w-lg { - @extend %margin-auto; - max-width: $width-lg; -} -.vn-w-xl { - @extend %margin-auto; - max-width: $width-xl; -} diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue index 8032735e17..bc27baf6cf 100644 --- a/src/pages/Customer/Card/CustomerBasicData.vue +++ b/src/pages/Customer/Card/CustomerBasicData.vue @@ -170,3 +170,10 @@ const filterOptions = { + +