KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore: Standardize button element (#1633)

Browse source 
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Nithin David Thomas 2021-01-18 00:54:20 +05:30 committed by GitHub
parent cd7f17f280
commit 58fad2561d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 32 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/dashboard/assets/scss/_foundation-custom.scss
View file

@ -1,4 +1,3 @@
.button { .button {
font-family: $body-font-family; font-family: $body-font-family;
font-weight: $font-weight-medium; font-weight: $font-weight-medium;
@ -35,6 +34,7 @@ code {
&.hljs { &.hljs {
background: $color-background; background: $color-background;
border-radius: var(--border-radius-large);
padding: $space-two; padding: $space-two;
} }
} }

12
app/javascript/dashboard/assets/scss/_foundation-settings.scss
View file

@ -236,18 +236,18 @@ $breadcrumbs-item-slash: true;
// 11. Button // 11. Button
// ---------- // ----------
$button-padding: $space-one $space-normal; $button-padding: var(--space-one) var(--space-slab);
$button-margin: 0 0 $global-margin 0; $button-margin: 0 0 $global-margin 0;
$button-fill: solid; $button-fill: solid;
$button-background: $primary-color; $button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%); $button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: $white; $button-color: $white;
$button-color-alt: $white; $button-color-alt: $white;
$button-radius: $global-radius; $button-radius: var(--border-radius-normal);
$button-sizes: (tiny: $font-size-micro, $button-sizes: (tiny: var(--font-size-nano),
small: $font-size-mini, small: var(--font-size-mini),
default: $font-size-default, default: var(--font-size-small),
large: $font-size-large); large: var(--font-size-medium));
$button-palette: $foundation-palette; $button-palette: $foundation-palette;
$button-opacity-disabled: 0.25; $button-opacity-disabled: 0.25;
$button-background-hover-lightness: -20%; $button-background-hover-lightness: -20%;

15
app/javascript/dashboard/assets/scss/widgets/_buttons.scss
View file

@ -1,6 +1,21 @@
.button { .button {
margin-bottom: 0; margin-bottom: 0;
&.button--emoji {
background: var(--b-50);
border: 1px solid var(--color-border-light);
border-radius: var(--border-radius-large);
font-size: var(--font-size-small);
margin-right: var(--space-small);
padding: var(--space-small);
&:hover {
background: var(--b-200);
}
}
&.icon { &.icon {
padding-left: $space-normal; padding-left: $space-normal;
padding-right: $space-normal; padding-right: $space-normal;

2
app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
View file

@ -72,7 +72,7 @@ $resolve-button-width: 13.2rem;
.button.resolve--button { .button.resolve--button {
@include flex-align($x: center, $y: middle); @include flex-align($x: center, $y: middle);
font-size: var(--font-size-default);
width: $resolve-button-width; width: $resolve-button-width;
>.icon { >.icon {

2
app/javascript/dashboard/components/buttons/ResolveAction.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<button <button
type="button" type="button"
class="button nice resolve--button" class="button resolve--button"
:class="buttonClass" :class="buttonClass"
@click="toggleStatus" @click="toggleStatus"
> >

8
app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
View file

@ -113,6 +113,7 @@ export default {
} }
.button--reply { .button--reply {
border-radius: 0;
border-right: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
&:hover { &:hover {
@ -121,10 +122,17 @@ export default {
} }
.button--note { .button--note {
border-radius: 0;
&.is-active { &.is-active {
border-right: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
background: var(--y-50); background: var(--y-50);
} }
&:hover,
&:active {
color: var(--y-800);
}
} }
} }