mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-01-29 20:19:06 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web): button styles

Browse Source
This commit is contained in:
Zack Spear
2023-09-28 16:13:43 -07:00
committed by Zack Spear
parent 396b98da01
commit a7644ee487
2 changed files with 34 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/assets/main.css
View File

@@ -25,5 +25,15 @@ body {
--ring-shadow: 0 0 --var(--color-beta);
}
/* .button-gradient-border-to-bg {
background: linear-gradient(to right,#e03237 0%,#fd8c3c 100%) left top no-repeat,linear-gradient(to right,#e03237 0%,#fd8c3c 100%) left bottom no-repeat,linear-gradient(to top,#e03237 0%,#e03237 100%) left bottom no-repeat,linear-gradient(to top,#fd8c3c 0%,#fd8c3c 100%) right bottom no-repeat;
background-size: 100% 2px,100% 2px,2px 100%,2px 100%;
&:hover,
&:focus {
background: linear-gradient(to right,#E22828 0%,#FF8C2F 100%);
}
} */
/* Ensure this is always at the bottom – @see https://tailwindcss.com/docs/content-configuration#working-with-third-party-libraries */
@tailwind utilities;

30
web/components/Brand/Button.vue
View File

@@ -32,26 +32,26 @@ const props = withDefaults(defineProps<ButtonProps>(), {
defineEmits(['click']);
const classes = computed(() => {
const buttonDefaults = 'group text-center font-semibold flex flex-row items-center justify-center cursor-pointer rounded-md disabled:opacity-50 disabled:hover:opacity-50 disabled:focus:opacity-50 disabled:cursor-not-allowed';
const buttonDefaults = 'group text-center font-semibold relative z-0 flex flex-row items-center justify-center cursor-pointer rounded-md shadow-none hover:shadow-md focus:shadow-md disabled:opacity-50 disabled:hover:opacity-50 disabled:focus:opacity-50 disabled:cursor-not-allowed';
let buttonColors = '';
let buttonSize = '';
let iconSize = '';
switch (props.btnStyle) {
case 'fill':
buttonColors = 'text-white bg-gradient-to-r from-unraid-red to-orange shadow-none hover:from-unraid-red/60 hover:to-orange/60 focus:from-unraid-red/60 focus:to-orange/60 hover:shadow-md focus:shadow-md';
buttonColors = 'text-white';
break;
case 'gray':
buttonColors = 'text-black bg-grey shadow-none transition hover:text-white focus:text-white hover:bg-grey-mid focus:bg-grey-mid hover:shadow-md focus:shadow-md';
buttonColors = 'text-black bg-grey transition hover:text-white focus:text-white hover:bg-grey-mid focus:bg-grey-mid';
break;
case 'outline':
buttonColors = 'text-orange bg-gradient-to-r from-transparent to-transparent border-2 border-solid border-orange shadow-none hover:text-white focus:text-white hover:from-unraid-red hover:to-orange focus:from-unraid-red focus:to-orange hover:shadow-md focus:shadow-md';
buttonColors = 'text-orange bg-transparent border-2 border-solid border-orange hover:text-white focus:text-white';
break;
case 'underline':
buttonColors = 'opacity-75 hover:opacity-100 focus:opacity-100 underline transition shadow-none hover:text-alpha hover:bg-beta focus:text-alpha focus:bg-beta hover:shadow-md focus:shadow-md';
buttonColors = 'opacity-75 hover:opacity-100 focus:opacity-100 underline transition hover:text-alpha hover:bg-beta focus:text-alpha focus:bg-beta';
break;
case 'white':
buttonColors = 'text-black bg-white shadow-none transition hover:bg-grey focus:bg-grey hover:shadow-md focus:shadow-md';
buttonColors = 'text-black bg-white transition hover:bg-grey focus:bg-grey';
break;
}
@@ -100,6 +100,12 @@ const classes = computed(() => {
:class="classes.button"
@click="click ?? $emit('click')"
>
<div v-if="btnStyle === 'fill'"
class="absolute inset-0 -z-10 bg-gradient-to-r from-unraid-red to-orange opacity-100 transition-all rounded-md group-hover:opacity-60 group-focus:opacity-60" />
<div v-if="btnStyle === 'outline'"
class="absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-gradient-to-r from-unraid-red to-orange opacity-0 transition-all rounded-md group-hover:opacity-100 group-focus:opacity-100" />
<component
v-if="icon"
:is="icon"
@@ -116,3 +122,15 @@ const classes = computed(() => {
]" />
</component>
</template>
<style lang="postcss">
/* .button-gradient-border-to-bg {
background: linear-gradient(to right,#e03237 0%,#fd8c3c 100%) left top no-repeat,linear-gradient(to right,#e03237 0%,#fd8c3c 100%) left bottom no-repeat,linear-gradient(to top,#e03237 0%,#e03237 100%) left bottom no-repeat,linear-gradient(to top,#fd8c3c 0%,#fd8c3c 100%) right bottom no-repeat;
background-size: 100% 2px,100% 2px,2px 100%,2px 100%;
&:hover,
&:focus {
background: linear-gradient(to right,#E22828 0%,#FF8C2F 100%);
}
} */
</style>