button sizes

This commit is contained in:
wagonsoftware 2022-11-12 23:44:03 +03:00
parent af0c5c11c0
commit 9b4bb9f0a3
6 changed files with 37 additions and 13 deletions

View File

@ -1,3 +1,3 @@
<button [attr.data-appearance]="appearance">
<button [attr.data-appearance]="appearance" [attr.data-size]="size">
<ng-content></ng-content>
</button>

View File

@ -2,11 +2,9 @@
display: block;
button {
padding: var(--sk-gap-m) var(--sk-gap-xl);
display: flex;
align-items: center;
gap: var(--sk-gap-m);
border-radius: var(--sk-br-m);
border: none;
cursor: pointer;
font-size: 1rem;
@ -18,6 +16,7 @@
opacity: 0.9;
}
// Appearance
&[data-appearance="default"], &[data-appearance="primary"] {
background-color: var(--sk-primary-accent);
color: #fff;
@ -38,13 +37,33 @@
color: #fff;
background-color: transparent;
}
// Size
&[data-size="small"] {
padding: var(--sk-gap-s) var(--sk-gap-l);
border-radius: var(--sk-br-m);
}
&[data-size="default"] {
padding: var(--sk-gap-m) var(--sk-gap-xl);
border-radius: var(--sk-br-m);
}
&[data-size="medium"] {
padding: var(--sk-gap-l) var(--sk-gap-xl);
border-radius: var(--sk-br-l);
gap: var(--sk-gap-l);
}
&[data-size="large"] {
padding: var(--sk-gap-xl) var(--sk-gap-xxxl);
border-radius: var(--sk-br-xl);
gap: var(--sk-gap-xl);
}
}
}
:host::ng-deep {
button {
&[data-appearance="default"], &[data-appearance="primary"] {
&[data-appearance="default"], &[data-appearance="primary"], &[data-appearance="secondary"] {
skirda-icon ng-icon {
color: #fff!important;

View File

@ -1,4 +1,6 @@
import { Component, Input, OnInit } from '@angular/core';
import { Component, ContentChild, Input } from '@angular/core';
import { IconComponent } from '../icon/icon.component';
import { ButtonAppearance, ButtonSize } from './button.interface'
@Component({
selector: 'skirda-button',
@ -6,7 +8,10 @@ import { Component, Input, OnInit } from '@angular/core';
styleUrls: ['./button.component.scss'],
})
export class ButtonComponent {
@Input() appearance: string = 'default';
@ContentChild(IconComponent) icon!: IconComponent
@Input() appearance: ButtonAppearance = 'default';
@Input() size: ButtonSize = 'default'
constructor() {}
}

View File

@ -1,6 +1,2 @@
export type ButtonAppearance =
| 'default'
| 'primary'
| 'secondary'
| 'outline'
| 'flat';
export type ButtonAppearance = 'default' | 'primary' | 'secondary' | 'outline' | 'flat';
export type ButtonSize = 'default' | 'small' | 'medium' | 'large';

View File

@ -145,4 +145,5 @@
--sk-br-s: 0.25rem;
--sk-br-m: 0.5rem;
--sk-br-l: 0.75rem;
--sk-br-xl: 1rem;
}

View File

@ -41,7 +41,10 @@
<skirda-avatar *ngFor="let friend of friends" [username]="friend"></skirda-avatar>
</div>
</div>
<skirda-heading size="1">Play</skirda-heading>
<skirda-button size="large" appearance="secondary">
<skirda-icon name="play" size="32"></skirda-icon>
<skirda-heading size="1">Play</skirda-heading>
</skirda-button>
</div>
</div>
</div>