|
|
@ -1,6 +1,6 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<v-row :class="`radio-group ${theme}`">
|
|
|
|
<v-row :class="`radio-group ${theme}`">
|
|
|
|
<v-col v-for="(item, index) in items" :key="index" :xl="item[itemSize]" class="pt-0" @click="changeSelected($event, item || {})">
|
|
|
|
<v-col v-for="(item, index) in items" :key="index" :xl="item[itemSize]" :lg="item[itemSize]" class="pt-0" @click="changeSelected($event, item || {})">
|
|
|
|
<div :class="{'active': isActive(item), [item[itemTheme]]: true, ['theme-' + item[itemColor] ]: true, ['bubble']: true}">
|
|
|
|
<div :class="{'active': isActive(item), [item[itemTheme]]: true, ['theme-' + item[itemColor] ]: true, ['bubble']: true}">
|
|
|
|
<div class="body">
|
|
|
|
<div class="body">
|
|
|
|
<div v-if="item[itemIcon]" :class="`icon ${(item[itemIconClass]) ? item[itemIconClass] : ''}`">
|
|
|
|
<div v-if="item[itemIcon]" :class="`icon ${(item[itemIconClass]) ? item[itemIconClass] : ''}`">
|
|
|
@ -95,11 +95,14 @@
|
|
|
|
border-radius: 20px;
|
|
|
|
border-radius: 20px;
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
padding: 12px;
|
|
|
|
padding: 12px;
|
|
|
|
opacity: 0.3;
|
|
|
|
opacity: 0.4;
|
|
|
|
transition: ease all 0.3s;
|
|
|
|
transition: ease all 0.3s;
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
margin: 0px;
|
|
|
|
margin: 0px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.fill-on-active .bubble {
|
|
|
|
|
|
|
|
opacity: 0.6;
|
|
|
|
|
|
|
|
}
|
|
|
|
.bubble .body {
|
|
|
|
.bubble .body {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
@ -109,9 +112,7 @@
|
|
|
|
.bubble.text-left .body {
|
|
|
|
.bubble.text-left .body {
|
|
|
|
padding-left: 30px;
|
|
|
|
padding-left: 30px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.bubble:hover, .bubble.active {
|
|
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.bubble .v-icon {
|
|
|
|
.bubble .v-icon {
|
|
|
|
font-size: 45px !important;
|
|
|
|
font-size: 45px !important;
|
|
|
|
line-height: 45px;
|
|
|
|
line-height: 45px;
|
|
|
@ -149,6 +150,13 @@
|
|
|
|
.bubble.theme-#{$Color} .v-icon {
|
|
|
|
.bubble.theme-#{$Color} .v-icon {
|
|
|
|
color: $Value;
|
|
|
|
color: $Value;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.fill-on-active .bubble.theme-#{$Color}:hover, .fill-on-active .bubble.theme-#{$Color}.active {
|
|
|
|
|
|
|
|
background-color: $Value;
|
|
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.fill-on-active .bubble.theme-#{$Color}:hover .v-icon, .fill-on-active .bubble.theme-#{$Color}.active .v-icon {
|
|
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@each $Color,
|
|
|
|
@each $Color,
|
|
|
|
$Value in $backgrounds {
|
|
|
|
$Value in $backgrounds {
|
|
|
@ -157,6 +165,10 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.bubble:hover, .bubble.active {
|
|
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bubble .En {
|
|
|
|
.bubble .En {
|
|
|
|
letter-spacing: 5px;
|
|
|
|
letter-spacing: 5px;
|
|
|
|
font-size: 10px;
|
|
|
|
font-size: 10px;
|
|
|
@ -189,6 +201,10 @@
|
|
|
|
line-height: 20px;
|
|
|
|
line-height: 20px;
|
|
|
|
margin-left: 5px;
|
|
|
|
margin-left: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.bubble.fa-only.icon-large .v-icon {
|
|
|
|
|
|
|
|
font-size: 25px !important;
|
|
|
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
|
|
|
}
|
|
|
|
.bubble.fa-only .Fa {
|
|
|
|
.bubble.fa-only .Fa {
|
|
|
|
font-size: 14px !important;
|
|
|
|
font-size: 14px !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|