|
&.is-primary { |
|
background: var(--icon-primary-bg-color); |
|
|
|
&.is-bordered { |
|
border-color: var(--icon-primary-color); |
|
} |
|
|
|
&.is-inverted { |
|
background: var(--icon-primary-inverted-bg-color); |
|
} |
|
|
|
i { |
|
color: var(--icon-primary-color); |
|
} |
|
|
|
:deep(svg) { |
|
color: var(--icon-primary-color); |
|
} |
|
} |
|
|
|
&.is-success { |
|
background: var(--icon-success-bg-color); |
|
|
|
&.is-bordered { |
|
border-color: var(--icon-success-color); |
|
} |
|
|
|
&.is-inverted { |
|
background: var(--icon-success-inverted-bg-color); |
|
} |
|
|
|
i { |
|
color: var(--icon-success-color); |
|
} |
|
|
|
:deep(svg) { |
|
color: var(--icon-success-color); |
|
} |
|
} |
|
|
|
&.is-info { |
|
background: var(--icon-info-bg-color); |
|
|
|
&.is-bordered { |
|
border-color: var(--icon-info-color); |
|
} |
|
|
|
&.is-inverted { |
|
background: var(--icon-info-inverted-bg-color); |
|
} |
|
|
|
i { |
|
color: var(--icon-info-color); |
|
} |
|
|
|
:deep(svg) { |
|
color: var(--icon-info-color); |
|
} |
|
} |
|
|
|
&.is-warning { |
|
background: var(--icon-warning-bg-color); |
|
|
|
&.is-bordered { |
|
border-color: var(--icon-warning-color); |
|
} |
|
|
|
&.is-inverted { |
|
background: var(--icon-warning-inverted-bg-color); |
|
} |
|
|
|
i { |
|
color: var(--icon-warning-color); |
|
} |
|
|
|
:deep(svg) { |
|
color: var(--icon-warning-color); |
|
} |
|
} |
|
|
|
&.is-danger { |
|
background: var(--icon-danger-bg-color); |
|
|
|
&.is-bordered { |
|
border-color: var(--icon-danger-color); |
|
} |
|
|
|
&.is-inverted { |
|
background: var(--icon-danger-inverted-bg-color); |
|
} |
|
|
|
i { |
|
color: var(--icon-danger-color); |
|
} |
|
|
|
:deep(svg) { |
|
color: var(--icon-danger-color); |
|
} |
|
} |
|
|
|
&.is-purple { |
|
background: var(--icon-purple-bg-color); |
|
|
|
&.is-bordered { |
|
border-color: var(--icon-purple-color); |
|
} |
|
|
|
&.is-inverted { |
|
background: var(--icon-purple-inverted-bg-color); |
|
} |
|
|
|
i { |
|
color: var(--icon-purple-color); |
|
} |
|
|
|
:deep(svg) { |
|
color: var(--icon-purple-color); |
|
} |
|
} |
|
|
|
&.is-blue { |
|
background: var(--icon-blue-bg-color); |
|
|
|
&.is-bordered { |
|
border-color: var(--icon-blue-color); |
|
} |
|
|
|
&.is-inverted { |
|
background: var(--icon-blue-inverted-bg-color); |
|
} |
|
|
|
i { |
|
color: var(--icon-blue-color); |
|
} |
|
|
|
:deep(svg) { |
|
color: var(--icon-blue-color); |
|
} |
|
} |
|
|
|
&.is-yellow { |
|
background: var(--icon-yellow-bg-color); |
|
|
|
&.is-bordered { |
|
border-color: var(--icon-yellow-color); |
|
} |
|
|
|
&.is-inverted { |
|
background: var(--icon-yellow-inverted-bg-color); |
|
} |
|
|
|
i { |
|
color: var(--icon-yellow-color); |
|
} |
|
|
|
:deep(svg) { |
|
color: var(--icon-yellow-color); |
|
} |
|
} |
|
|
|
&.is-orange { |
|
background: var(--icon-orange-bg-color); |
|
|
|
&.is-bordered { |
|
border-color: var(--icon-orange-color); |
|
} |
|
|
|
&.is-inverted { |
|
background: var(--icon-orange-inverted-bg-color); |
|
} |
|
|
|
i, |
|
.iconify { |
|
color: var(--icon-orange-color); |
|
} |
|
|
|
:deep(svg) { |
|
color: var(--icon-orange-color); |
|
} |
|
} |
|
|
|
&.is-green { |
|
background: var(--icon-green-bg-color); |
|
|
|
&.is-bordered { |
|
border-color: var(--icon-green-color); |
|
} |
|
|
|
&.is-inverted { |
|
background: var(--icon-green-inverted-bg-color); |
|
} |
|
|
|
i { |
|
color: var(--icon-green-color); |
|
} |
|
|
|
:deep(svg) { |
|
color: var(--icon-green-color); |
|
} |
|
} |
|
|
|
&.is-red { |
|
background: var(--icon-red-bg-color); |
|
|
|
&.is-bordered { |
|
border-color: var(--icon-red-color); |
|
} |
|
|
|
&.is-inverted { |
|
background: var(--icon-red-inverted-bg-color); |
|
} |
|
|
|
i { |
|
color: var(--icon-red-color); |
|
} |
|
|
|
:deep(svg) { |
|
color: var(--icon-red-color); |
|
} |
|
} |
vulk/src/components/base/icon/IconBox.vue
Lines 164 to 383 in 3990cdd
Just noticed that this seems like it might be possible to generate with an
scssloop?Not sure how css var names work with loops though 🤔