akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: more style changes

Browse Source
This commit is contained in:
Muhsin Keloth
2024-04-22 21:09:36 +05:30
parent e578d47003
commit 9e57180193
3 changed files with 37 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/v3/components/Form/Button.vue
+14 -1
View File
@@ -81,12 +81,25 @@ const colorClass = computed(() => {
if (props.variant === 'ghost') {
return 'text-primary-800 hover:text-primary-600 active:text-primary-600 focus:ring focus:ring-offset-1 focus:ring-primary-400';
}
return 'bg-primary-600 border-primary-600 text-white hover:bg-primary-700 active:bg-primary-700 focus:ring focus:ring-offset-1 focus:ring-primary-400';
return 'bg-primary-600 border border-primary-600 text-white hover:bg-primary-700 active:bg-primary-700 focus:ring focus:ring-offset-1 focus:ring-primary-400';
}
if (props.colorScheme === 'secondary') {
if (props.variant === 'outline') {
return 'text-ash-800 border border-ash-400 hover:text-ash-600 active:text-ash-600 focus:ring focus:ring-offset-1 focus:ring-ash-400';
}
if (props.variant === 'ghost') {
return 'text-ash-800 hover:text-ash-600 active:text-ash-600 focus:ring focus:ring-offset-1 focus:ring-ash-400';
}
return 'bg-ash-100 text-ash-900 hover:bg-ash-200 active:bg-ash-200 focus:ring focus:ring-offset-1 focus:ring-ash-400';
}
if (props.colorScheme === 'danger') {
if (props.variant === 'outline') {
return 'text-ruby-800 border border-ruby-400 hover:text-ruby-600 active:text-ruby-600 focus:ring focus:ring-offset-1 focus:ring-ruby-400';
}
if (props.variant === 'ghost') {
return 'text-ruby-800 hover:text-ruby-600 active:text-ruby-600 focus:ring focus:ring-offset-1 focus:ring-ruby-400';
}
return 'bg-ruby-600 text-white hover:bg-ruby-700 active:bg-ruby-700 focus:ring focus:ring-offset-1 focus:ring-ruby-400';
}
return 'bg-primary-500 text-white';
app/javascript/v3/components/Form/Switch.vue
+1 -6
View File
@@ -1,7 +1,7 @@
<template>
<button
type="button"
class="p-0 toggle-button"
class="p-0 toggle-button bg-primary-600"
:class="{ active: value, small: size === 'small' }"
role="switch"
:aria-checked="value.toString()"
@@ -26,7 +26,6 @@ export default {
</script>
<style lang="scss" scoped>
.toggle-button {
@apply bg-slate-200 dark:bg-slate-600;
--toggle-button-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
@@ -42,10 +41,6 @@ export default {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 34px;
&.active {
background-color: var(--w-500);
}
&.small {
width: 22px;
height: 14px;