update button and statsgrid with better styles.
This commit is contained in:
@@ -48,7 +48,12 @@ export class DeesButton extends DeesElement {
|
||||
@property({
|
||||
type: String
|
||||
})
|
||||
public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
|
||||
public type: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'normal' | 'highlighted' | 'discreet' | 'big' = 'default';
|
||||
|
||||
@property({
|
||||
type: String
|
||||
})
|
||||
public size: 'default' | 'sm' | 'lg' | 'icon' = 'default';
|
||||
|
||||
@property({
|
||||
type: String
|
||||
@@ -77,25 +82,23 @@ export class DeesButton extends DeesElement {
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Geist Sans', 'monospace';
|
||||
font-family: inherit;
|
||||
}
|
||||
:host([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Form spacing styles */
|
||||
/* Default vertical form layout */
|
||||
:host([inside-form]) {
|
||||
margin-bottom: 16px; /* Using standard 16px like inputs */
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
:host([inside-form]:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Horizontal form layout - auto-detected via parent */
|
||||
dees-form[horizontal-layout] :host([inside-form]) {
|
||||
display: inline-block;
|
||||
margin-right: 16px;
|
||||
@@ -107,114 +110,260 @@ export class DeesButton extends DeesElement {
|
||||
}
|
||||
|
||||
.button {
|
||||
transition: all 0.1s , color 0s;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: ${cssManager.bdTheme('#fff', '#333')};
|
||||
box-shadow: ${cssManager.bdTheme('0px 1px 3px rgba(0,0,0,0.3)', 'none')};
|
||||
border: 1px solid ${cssManager.bdTheme('#eee', '#333')};
|
||||
border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
|
||||
border-radius: 4px;
|
||||
height: 40px;
|
||||
padding: 0px 8px;
|
||||
min-width: 100px;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
transition: all 0.15s ease;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
color: ${cssManager.bdTheme('#333', ' #ccc')};
|
||||
max-width: 500px;
|
||||
outline: none;
|
||||
letter-spacing: -0.01em;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: #0050b9;
|
||||
color: #ffffff;
|
||||
border: 1px solid #0050b9;
|
||||
border-top: 1px solid #0050b9;
|
||||
/* Size variants */
|
||||
.button.size-default {
|
||||
height: 36px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background: #0069f2;
|
||||
border-top: 1px solid #0069f2;
|
||||
.button.size-sm {
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.button.highlighted {
|
||||
background: #e4002b;
|
||||
.button.size-lg {
|
||||
height: 44px;
|
||||
padding: 0 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.button.size-icon {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Default variant */
|
||||
.button.default {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20.2% 11.8%)')};
|
||||
color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
|
||||
border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 16.8%)')};
|
||||
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
}
|
||||
|
||||
.button.default:hover:not(.disabled) {
|
||||
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 10.2%)')};
|
||||
border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 85%)', 'hsl(215 20.2% 20%)')};
|
||||
}
|
||||
|
||||
.button.default:active:not(.disabled) {
|
||||
background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 9%)')};
|
||||
}
|
||||
|
||||
/* Destructive variant */
|
||||
.button.destructive {
|
||||
background: hsl(0 84.2% 60.2%);
|
||||
color: hsl(0 0% 98%);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.button.destructive:hover:not(.disabled) {
|
||||
background: hsl(0 84.2% 56.2%);
|
||||
}
|
||||
|
||||
.button.destructive:active:not(.disabled) {
|
||||
background: hsl(0 84.2% 52.2%);
|
||||
}
|
||||
|
||||
/* Outline variant */
|
||||
.button.outline {
|
||||
background: transparent;
|
||||
color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
|
||||
border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 21.8%)')};
|
||||
}
|
||||
|
||||
.button.outline:hover:not(.disabled) {
|
||||
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
|
||||
border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 85%)', 'hsl(215 20.2% 26.8%)')};
|
||||
}
|
||||
|
||||
.button.outline:active:not(.disabled) {
|
||||
background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 13.8%)')};
|
||||
}
|
||||
|
||||
/* Secondary variant */
|
||||
.button.secondary {
|
||||
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
|
||||
color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.button.secondary:hover:not(.disabled) {
|
||||
background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 13.8%)')};
|
||||
}
|
||||
|
||||
.button.secondary:active:not(.disabled) {
|
||||
background: ${cssManager.bdTheme('hsl(214.3 31.8% 85%)', 'hsl(215 20.2% 11.8%)')};
|
||||
}
|
||||
|
||||
/* Ghost variant */
|
||||
.button.ghost {
|
||||
background: transparent;
|
||||
color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.button.ghost:hover:not(.disabled) {
|
||||
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
|
||||
}
|
||||
|
||||
.button.ghost:active:not(.disabled) {
|
||||
background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 13.8%)')};
|
||||
}
|
||||
|
||||
/* Link variant */
|
||||
.button.link {
|
||||
background: transparent;
|
||||
color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(213.1 93.9% 67.8%)')};
|
||||
border: none;
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: transparent;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.button.highlighted:hover {
|
||||
background: #b50021;
|
||||
border: none;
|
||||
color: #fff;
|
||||
.button.link:hover:not(.disabled) {
|
||||
text-decoration-color: currentColor;
|
||||
}
|
||||
|
||||
.button.discreet {
|
||||
background: none;
|
||||
border: 1px solid #9b9b9e;
|
||||
color: ${cssManager.bdTheme('#000', '#fff')};
|
||||
/* Status states */
|
||||
.button.pending,
|
||||
.button.success,
|
||||
.button.error {
|
||||
pointer-events: none;
|
||||
padding-left: 36px; /* Space for spinner */
|
||||
}
|
||||
|
||||
.button.size-sm.pending,
|
||||
.button.size-sm.success,
|
||||
.button.size-sm.error {
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
.button.size-lg.pending,
|
||||
.button.size-lg.success,
|
||||
.button.size-lg.error {
|
||||
padding-left: 44px;
|
||||
}
|
||||
|
||||
.button.discreet:hover {
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
|
||||
.button.pending {
|
||||
background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(213.1 93.9% 67.8% / 0.2)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(213.1 93.9% 67.8%)')};
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.button.success {
|
||||
background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3% / 0.2)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(142.1 70.6% 45.3%)')};
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.button.error {
|
||||
background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 62.8% 70.6% / 0.2)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 62.8% 70.6%)')};
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/* Disabled state */
|
||||
.button.disabled {
|
||||
background: ${cssManager.bdTheme('#ffffff00', '#11111100')};
|
||||
border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
|
||||
color: #9b9b9e;
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Hidden state */
|
||||
.button.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button.big {
|
||||
width: 300px;
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
padding: 0px 48px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.button.pending {
|
||||
border: 1px dashed ${cssManager.bdTheme('#0069f2', '#0069f270')};
|
||||
background: ${cssManager.bdTheme('#0069f2', '#0069f270')};
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.success {
|
||||
border: 1px dashed ${cssManager.bdTheme('#689F38', '#8BC34A70')};
|
||||
background: ${cssManager.bdTheme('#689F38', '#8BC34A70')};
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.error {
|
||||
border: 1px dashed ${cssManager.bdTheme('#B71C1C', '#E64A1970')};
|
||||
background: ${cssManager.bdTheme('#B71C1C', '#E64A1970')};
|
||||
color: #fff;
|
||||
/* Focus state */
|
||||
.button:focus-visible {
|
||||
outline: 2px solid ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(213.1 93.9% 67.8%)')};
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Loading spinner */
|
||||
dees-spinner {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.button.size-sm dees-spinner {
|
||||
left: 8px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.button.size-lg dees-spinner {
|
||||
left: 14px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* Icon sizing within buttons */
|
||||
.button dees-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.button.size-sm dees-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.button.size-lg dees-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
// Map old types to new types for backward compatibility
|
||||
const typeMap: {[key: string]: string} = {
|
||||
'normal': 'default',
|
||||
'highlighted': 'destructive',
|
||||
'discreet': 'outline',
|
||||
'big': 'default' // Will use size instead
|
||||
};
|
||||
|
||||
const actualType = typeMap[this.type] || this.type;
|
||||
const actualSize = this.type === 'big' ? 'lg' : this.size;
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="button ${this.isHidden ? 'hidden' : 'block'} ${this.type} ${this.status} ${this.disabled
|
||||
class="button ${this.isHidden ? 'hidden' : ''} ${actualType} size-${actualSize} ${this.status} ${this.disabled
|
||||
? 'disabled'
|
||||
: null}"
|
||||
: ''}"
|
||||
@click="${this.dispatchClick}"
|
||||
>
|
||||
${this.status === 'normal' ? html``: html`
|
||||
<dees-spinner .bnw=${true} status="${this.status}"></dees-spinner>
|
||||
<dees-spinner
|
||||
.bnw=${true}
|
||||
status="${this.status}"
|
||||
size="${actualSize === 'sm' ? 14 : actualSize === 'lg' ? 18 : 16}"
|
||||
></dees-spinner>
|
||||
`}
|
||||
<div class="textbox">${this.text || html`<slot>Button</slot>`}</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user