From 9b4bb9f0a3cd60f2044026d76b8aac52224042d8 Mon Sep 17 00:00:00 2001 From: wagonsoftware <68749617+wagonsoftware@users.noreply.github.com> Date: Sat, 12 Nov 2022 23:44:03 +0300 Subject: [PATCH] button sizes --- .../ui/src/lib/button/button.component.html | 2 +- .../ui/src/lib/button/button.component.scss | 25 ++++++++++++++++--- .../ui/src/lib/button/button.component.ts | 9 +++++-- .../ui/src/lib/button/button.interface.ts | 8 ++---- src/_themes.scss | 1 + .../game-page/game-page.component.html | 5 +++- 6 files changed, 37 insertions(+), 13 deletions(-) diff --git a/projects/ui/src/lib/button/button.component.html b/projects/ui/src/lib/button/button.component.html index e970e42..779e4a4 100644 --- a/projects/ui/src/lib/button/button.component.html +++ b/projects/ui/src/lib/button/button.component.html @@ -1,3 +1,3 @@ - diff --git a/projects/ui/src/lib/button/button.component.scss b/projects/ui/src/lib/button/button.component.scss index 771c820..3dca73e 100644 --- a/projects/ui/src/lib/button/button.component.scss +++ b/projects/ui/src/lib/button/button.component.scss @@ -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; diff --git a/projects/ui/src/lib/button/button.component.ts b/projects/ui/src/lib/button/button.component.ts index 46a7e6e..303e321 100644 --- a/projects/ui/src/lib/button/button.component.ts +++ b/projects/ui/src/lib/button/button.component.ts @@ -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() {} } diff --git a/projects/ui/src/lib/button/button.interface.ts b/projects/ui/src/lib/button/button.interface.ts index 5cbe392..bced259 100644 --- a/projects/ui/src/lib/button/button.interface.ts +++ b/projects/ui/src/lib/button/button.interface.ts @@ -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'; diff --git a/src/_themes.scss b/src/_themes.scss index 3605954..cc5681a 100644 --- a/src/_themes.scss +++ b/src/_themes.scss @@ -145,4 +145,5 @@ --sk-br-s: 0.25rem; --sk-br-m: 0.5rem; --sk-br-l: 0.75rem; + --sk-br-xl: 1rem; } diff --git a/src/app/components/main/sections/game-page/game-page.component.html b/src/app/components/main/sections/game-page/game-page.component.html index d568b22..2b7577c 100644 --- a/src/app/components/main/sections/game-page/game-page.component.html +++ b/src/app/components/main/sections/game-page/game-page.component.html @@ -41,7 +41,10 @@ - Play + + + Play +