mirror of https://github.com/rancher/dashboard.git
66 lines
1.5 KiB
Vue
66 lines
1.5 KiB
Vue
<script>
|
|
export default {
|
|
props: {
|
|
// a "r, g, b" tuple
|
|
primaryColorVar: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
|
|
// Show the left side
|
|
showTab: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
showSolid: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
backgroundOpacityAdjustment: {
|
|
type: Number,
|
|
default: 1
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
leftColor() {
|
|
return this.showSolid ? this.primaryColor : this.customizePrimaryColorOpacity(0.25 * this.backgroundOpacityAdjustment);
|
|
},
|
|
|
|
rightColor() {
|
|
return this.showSolid ? this.primaryColor : this.customizePrimaryColorOpacity(0.125 * this.backgroundOpacityAdjustment);
|
|
},
|
|
|
|
primaryColor() {
|
|
return this.customizePrimaryColorOpacity(1);
|
|
},
|
|
|
|
style() {
|
|
const background = `background: transparent linear-gradient(94deg, ${ this.leftColor } 0%, ${ this.rightColor } 100%) 0% 0% no-repeat padding-box;`;
|
|
const border = this.showBorder ? `border: 1px solid ${ this.primaryColor };` : '';
|
|
const borderLeft = this.showTab ? `border-left: 9px solid ${ this.primaryColor };` : '';
|
|
|
|
return `${ background }${ border }${ borderLeft }`;
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
customizePrimaryColorOpacity(opacity) {
|
|
return `rgba(var(${ this.primaryColorVar }), ${ opacity })`;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="gradient-box" :class="{'show-tab': showTab}" :style="style">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.gradient-box {
|
|
border-radius: 5px;
|
|
}
|
|
</style>
|