- Corretto campo "Comune di Residenza".
- Aggiornato Completamento Profilo: Comune di Residenza. - Registrazione
This commit is contained in:
Surya Paolo
@@ -1,5 +1,5 @@
|
||||
// ========================================
|
||||
// VARIABILI MODERNE (compatibili con Quasar)
|
||||
// VARIABILI MODERNE CON GRADIENTI
|
||||
// ========================================
|
||||
$primary-color: #1976d2;
|
||||
$primary-light: #42a5f5;
|
||||
@@ -27,13 +27,26 @@ $mobile-breakpoint: 768px;
|
||||
$small-breakpoint: 600px;
|
||||
|
||||
// ========================================
|
||||
// PROFILE (già esistente - solo ottimizzato)
|
||||
// GRADIENTI MODERNI
|
||||
// ========================================
|
||||
$gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
$gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
$gradient-info: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
$gradient-positive: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
||||
$gradient-card-light: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
|
||||
$gradient-card-white: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
|
||||
$gradient-hover: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
|
||||
|
||||
// ========================================
|
||||
// PROFILE (con gradiente)
|
||||
// ========================================
|
||||
.profile {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: 450px;
|
||||
padding: 6px;
|
||||
background: $gradient-card-white;
|
||||
border-radius: $border-radius-sm;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 4px;
|
||||
@@ -41,7 +54,7 @@ $small-breakpoint: 600px;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// MY ROW (già esistente - ottimizzato)
|
||||
// MY ROW
|
||||
// ========================================
|
||||
.myrow {
|
||||
display: flex;
|
||||
@@ -54,20 +67,38 @@ $small-breakpoint: 600px;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// QUALIFICA (già esistente - modernizzato)
|
||||
// QUALIFICA (con gradiente)
|
||||
// ========================================
|
||||
.qualifica {
|
||||
border: 2px solid $primary-light;
|
||||
background: linear-gradient(135deg, rgba(38, 166, 154, 0.1) 0%, rgba(38, 166, 154, 0.05) 100%);
|
||||
border: 2px solid rgba(38, 166, 154, 0.3);
|
||||
border-radius: $border-radius-sm;
|
||||
padding: 6px 10px;
|
||||
background: rgba(65, 152, 239, 0.05);
|
||||
transition: all $transition-speed ease;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(65, 152, 239, 0.1);
|
||||
border-color: $primary-color;
|
||||
transform: translateX(2px);
|
||||
background: linear-gradient(135deg, rgba(38, 166, 154, 0.15) 0%, rgba(38, 166, 154, 0.08) 100%);
|
||||
border-color: $secondary-color;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(38, 166, 154, 0.2);
|
||||
|
||||
&::before {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
@@ -76,15 +107,33 @@ $small-breakpoint: 600px;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// TEXT BACHECA (già esistente - modernizzato)
|
||||
// TEXT BACHECA (con gradiente)
|
||||
// ========================================
|
||||
.text-bacheca {
|
||||
margin: 8px 0;
|
||||
border: 2px solid $primary-light;
|
||||
background: linear-gradient(135deg, rgba(79, 172, 254, 0.08) 0%, rgba(0, 242, 254, 0.08) 100%);
|
||||
border: 2px solid rgba(79, 172, 254, 0.3);
|
||||
border-radius: $border-radius-sm;
|
||||
padding: 10px 12px;
|
||||
background: rgba(65, 152, 239, 0.03);
|
||||
line-height: 1.6;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin: 6px 0;
|
||||
@@ -93,16 +142,17 @@ $small-breakpoint: 600px;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// NOTE BACHECA (già esistente - modernizzato)
|
||||
// NOTE BACHECA (con gradiente warning)
|
||||
// ========================================
|
||||
.note-bacheca {
|
||||
border: 2px solid $warning-color;
|
||||
background: linear-gradient(135deg, rgba(242, 192, 55, 0.12) 0%, rgba(242, 192, 55, 0.06) 100%);
|
||||
border: 2px solid rgba(242, 192, 55, 0.4);
|
||||
border-left: 4px solid $warning-color;
|
||||
border-radius: $border-radius-sm;
|
||||
padding: 10px 12px;
|
||||
background: rgba(242, 192, 55, 0.08);
|
||||
border-left: 4px solid $warning-color;
|
||||
line-height: 1.6;
|
||||
margin: 8px 0;
|
||||
box-shadow: 0 2px 8px rgba(242, 192, 55, 0.15);
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 8px 10px;
|
||||
@@ -111,7 +161,7 @@ $small-breakpoint: 600px;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// IMG (già esistente - ottimizzato)
|
||||
// IMG
|
||||
// ========================================
|
||||
.img {
|
||||
margin: 0 auto;
|
||||
@@ -128,7 +178,7 @@ $small-breakpoint: 600px;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// CALENDAR STYLES (già esistente - compatto)
|
||||
// CALENDAR STYLES
|
||||
// ========================================
|
||||
.cal {
|
||||
color: #1a1a1a;
|
||||
@@ -210,13 +260,15 @@ $small-breakpoint: 600px;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// BADGE FAV/BOOK (già esistente - ottimizzato)
|
||||
// BADGE FAV/BOOK (con gradiente)
|
||||
// ========================================
|
||||
.badge-favbook {
|
||||
font-weight: 600;
|
||||
padding: 3px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8125rem;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
|
||||
backdrop-filter: blur(4px);
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 2px 6px;
|
||||
@@ -225,7 +277,7 @@ $small-breakpoint: 600px;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// BUTTONS FAV (già esistente - compatto)
|
||||
// BUTTONS FAV
|
||||
// ========================================
|
||||
.buttonsfav {
|
||||
display: flex;
|
||||
@@ -251,7 +303,7 @@ $small-breakpoint: 600px;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// CONTAINER BUTTON (già esistente - ottimizzato)
|
||||
// CONTAINER BUTTON
|
||||
// ========================================
|
||||
.container_butt {
|
||||
display: flex;
|
||||
@@ -267,7 +319,7 @@ $small-breakpoint: 600px;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// ANIMATIONS (già esistente)
|
||||
// ANIMATIONS
|
||||
// ========================================
|
||||
.expand-fade-enter-active,
|
||||
.expand-fade-leave-active {
|
||||
@@ -286,7 +338,7 @@ $small-breakpoint: 600px;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// DIALOG POSITIONING (già esistente - ottimizzato)
|
||||
// DIALOG POSITIONING
|
||||
// ========================================
|
||||
.well-positioned-dialog {
|
||||
width: 50vw;
|
||||
@@ -312,37 +364,75 @@ $small-breakpoint: 600px;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// MODERN CARD (nuovo - sostituisce my-card)
|
||||
// MODERN CARD (con gradienti bellissimi!)
|
||||
// ========================================
|
||||
.modern-card {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #ffffff 100%);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $shadow-md;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
margin: 8px 0;
|
||||
transition: all $transition-speed ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// Effetto luce che scorre
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: $shadow-lg;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
transform: translateY(-4px);
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f0f4f8 50%, #ffffff 100%);
|
||||
border-color: rgba(25, 118, 210, 0.2);
|
||||
|
||||
&::before {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Variante con bordo colorato a sinistra - User
|
||||
&.clBorderUser {
|
||||
border-left: 4px solid $primary-color;
|
||||
background: linear-gradient(to right, rgba(25, 118, 210, 0.03), #ffffff 10%, #f8f9fa 50%, #ffffff 100%);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(to right, rgba(25, 118, 210, 0.06), #ffffff 10%, #f0f4f8 50%, #ffffff 100%);
|
||||
box-shadow: 0 8px 24px rgba(25, 118, 210, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
// Variante con bordo colorato a sinistra - Service
|
||||
&.clBorderService {
|
||||
border-left: 4px solid $secondary-color;
|
||||
background: linear-gradient(to right, rgba(38, 166, 154, 0.03), #ffffff 10%, #f8f9fa 50%, #ffffff 100%);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(to right, rgba(38, 166, 154, 0.06), #ffffff 10%, #f0f4f8 50%, #ffffff 100%);
|
||||
box-shadow: 0 8px 24px rgba(38, 166, 154, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// MODERN DIALOG (nuovo - sostituisce visudialog)
|
||||
// MODERN DIALOG (con gradiente)
|
||||
// ========================================
|
||||
.modern-dialog {
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
max-height: 90vh;
|
||||
@@ -351,6 +441,7 @@ $small-breakpoint: 600px;
|
||||
&.no-padding {
|
||||
:deep(.q-card-section) {
|
||||
padding: 12px;
|
||||
background: transparent;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 10px;
|
||||
@@ -358,32 +449,35 @@ $small-breakpoint: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
// Scrollbar styling
|
||||
// Scrollbar styling con gradiente
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
background: linear-gradient(to bottom, #f1f1f1, #e0e0e0);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: $primary-light;
|
||||
background: linear-gradient(135deg, $primary-light, $primary-color);
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:hover {
|
||||
background: $primary-color;
|
||||
background: linear-gradient(135deg, $primary-color, $primary-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// TOOLBAR (già esistente - compatto)
|
||||
// TOOLBAR (con gradiente)
|
||||
// ========================================
|
||||
.q-toolbar {
|
||||
min-height: 48px;
|
||||
padding: 8px 12px;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.95));
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
min-height: 44px;
|
||||
@@ -398,14 +492,28 @@ $small-breakpoint: 600px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-primary {
|
||||
background: $gradient-primary !important;
|
||||
}
|
||||
|
||||
&.bg-white {
|
||||
background: linear-gradient(135deg, #ffffff, #f8f9fa) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// MENU STYLES (già esistente - modernizzato)
|
||||
// MENU STYLES (con gradienti)
|
||||
// ========================================
|
||||
.q-menu {
|
||||
background: linear-gradient(to bottom, #ffffff, #f8f9fa);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.q-list {
|
||||
padding: 6px;
|
||||
background: transparent;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 4px;
|
||||
@@ -417,10 +525,12 @@ $small-breakpoint: 600px;
|
||||
min-height: 40px;
|
||||
border-radius: $border-radius-sm;
|
||||
transition: all $transition-speed ease;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background: rgba(25, 118, 210, 0.08);
|
||||
transform: translateX(2px);
|
||||
background: linear-gradient(135deg, rgba(25, 118, 210, 0.08), rgba(25, 118, 210, 0.04));
|
||||
transform: translateX(4px);
|
||||
box-shadow: 0 2px 8px rgba(25, 118, 210, 0.1);
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
@@ -439,7 +549,7 @@ $small-breakpoint: 600px;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// ABSOLUTE POSITIONING (già esistente - ottimizzato)
|
||||
// ABSOLUTE POSITIONING
|
||||
// ========================================
|
||||
.absolute-top-right {
|
||||
position: absolute;
|
||||
@@ -451,14 +561,27 @@ $small-breakpoint: 600px;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.q-btn {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(8px);
|
||||
transition: all $transition-speed ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
transform: scale(1.1) rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// INSET SHADOW (già esistente - ottimizzato)
|
||||
// INSET SHADOW (con gradiente)
|
||||
// ========================================
|
||||
.inset-shadow {
|
||||
background: linear-gradient(to bottom, #fafafa, #f5f5f5);
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
|
||||
padding: 10px;
|
||||
border-radius: $border-radius-sm;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 8px;
|
||||
@@ -466,12 +589,14 @@ $small-breakpoint: 600px;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// DIALOG CARD (già esistente - ottimizzato)
|
||||
// DIALOG CARD (con gradiente)
|
||||
// ========================================
|
||||
.dialog_card {
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
border-radius: $border-radius;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
max-width: 100%;
|
||||
@@ -480,10 +605,22 @@ $small-breakpoint: 600px;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// CLASSI ESISTENTI MANTENUTE
|
||||
// CLASSI ESISTENTI CON GRADIENTI
|
||||
// ========================================
|
||||
.clBorderService {
|
||||
border: 1px solid rgba($secondary-color, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, $secondary-color, rgba($secondary-color, 0.9));
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $secondary-color;
|
||||
@@ -492,6 +629,18 @@ $small-breakpoint: 600px;
|
||||
|
||||
.clBorderUser {
|
||||
border: 1px solid rgba($primary-color, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, $primary-color, color-contrast($primary-color, -10%));
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $primary-color;
|
||||
@@ -501,6 +650,8 @@ $small-breakpoint: 600px;
|
||||
.clDescrEstesa {
|
||||
padding: 10px;
|
||||
line-height: 1.6;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(248, 249, 250, 0.5));
|
||||
border-radius: $border-radius-sm;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 8px;
|
||||
@@ -509,7 +660,10 @@ $small-breakpoint: 600px;
|
||||
|
||||
.accom_maxosp {
|
||||
font-weight: 600;
|
||||
color: $primary-color;
|
||||
background: linear-gradient(135deg, $primary-color, color-lighten($primary-color, 15%));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
@@ -518,6 +672,7 @@ $small-breakpoint: 600px;
|
||||
// ========================================
|
||||
.q-item {
|
||||
padding: 10px 12px;
|
||||
transition: all $transition-speed ease;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 8px 10px;
|
||||
@@ -530,27 +685,59 @@ $small-breakpoint: 600px;
|
||||
.q-item__label {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// Q-CHIP OTTIMIZZAZIONI
|
||||
// ========================================
|
||||
.q-chip {
|
||||
margin: 2px 4px 2px 0;
|
||||
|
||||
&.glossy {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, rgba(25, 118, 210, 0.03), transparent);
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// Q-BTN OTTIMIZZAZIONI
|
||||
// Q-CHIP OTTIMIZZAZIONI (con gradienti)
|
||||
// ========================================
|
||||
.q-chip {
|
||||
margin: 2px 4px 2px 0;
|
||||
transition: all $transition-speed ease;
|
||||
|
||||
&.glossy {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// Q-BTN OTTIMIZZAZIONI (con effetti)
|
||||
// ========================================
|
||||
.q-btn {
|
||||
transition: all $transition-speed ease;
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s ease, height 0.6s ease;
|
||||
}
|
||||
|
||||
&:hover:not(.q-btn--disable) {
|
||||
transform: scale(1.02);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
|
||||
&::before {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
&.q-btn--round {
|
||||
@@ -558,10 +745,21 @@ $small-breakpoint: 600px;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.q-btn--unelevated {
|
||||
background: linear-gradient(135deg, currentColor, color-darken($primary-color, 5%));
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// RESPONSIVE UTILITIES (già esistente - ottimizzato)
|
||||
// Q-CARD SECTION (con gradiente sottile)
|
||||
// ========================================
|
||||
.q-card-section {
|
||||
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.01) 100%);
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// RESPONSIVE UTILITIES
|
||||
// ========================================
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
.q-pa-xs {
|
||||
@@ -611,8 +809,17 @@ $small-breakpoint: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modern-card {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
animation: fadeIn 0.4s ease-out;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
@@ -620,8 +827,27 @@ $small-breakpoint: 600px;
|
||||
// ========================================
|
||||
.q-separator {
|
||||
margin: 8px 0;
|
||||
background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1), transparent);
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin: 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// EXTRA: Effetti particolari
|
||||
// ========================================
|
||||
|
||||
// Effetto glassmorphism
|
||||
.glass-effect {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
// Card evento "attending"
|
||||
.is-attending {
|
||||
border-left: 4px solid $positive-color;
|
||||
background: linear-gradient(to right, rgba(33, 186, 69, 0.08), transparent 20%);
|
||||
box-shadow: 0 2px 12px rgba(33, 186, 69, 0.1);
|
||||
}
|
||||
@@ -565,6 +565,8 @@ export default defineComponent({
|
||||
'profile.img': 1,
|
||||
'profile.mygroups': 1,
|
||||
'profile.qualifica': 1,
|
||||
'profile.resid_str_comune': 1,
|
||||
'profile.resid_comune': 1,
|
||||
'profile.resid_province': 1,
|
||||
'profile.resid_card': 1,
|
||||
'mycities.reg': 1,
|
||||
|
||||
Reference in New Issue
Block a user