diff --git a/apps/angular/styling/src/app/page.component.ts b/apps/angular/styling/src/app/page.component.ts index a378647..0674532 100644 --- a/apps/angular/styling/src/app/page.component.ts +++ b/apps/angular/styling/src/app/page.component.ts @@ -11,7 +11,7 @@ import { TextComponent } from './text.component'; - This a a blue text + This is a blue text `, }) export class PageComponent {} diff --git a/docs/src/content/docs/challenges/angular/13-styling.md b/docs/src/content/docs/challenges/angular/13-styling.md index fa38f8b..1bbd9be 100644 --- a/docs/src/content/docs/challenges/angular/13-styling.md +++ b/docs/src/content/docs/challenges/angular/13-styling.md @@ -14,6 +14,6 @@ Styling is an important aspect of a frontend developer's day job, but it is ofte In this challenge, you will need to use both CSS variables and `:host-context` to remove all `@Input()` from your code. -## Constraints: +## Constraints - In your final submission, your component should not contain any lines of code. All styling should be handled within the decorator _(or external css files if you prefer)_ diff --git a/docs/src/content/docs/pt/challenges/angular/13-styling.md b/docs/src/content/docs/pt/challenges/angular/13-styling.md new file mode 100644 index 0000000..b734a44 --- /dev/null +++ b/docs/src/content/docs/pt/challenges/angular/13-styling.md @@ -0,0 +1,19 @@ +--- +title: 🟠 CSS Altamente Personalizável +description: Desafio 13 é sobre criar estilos CSS altamente personalizáveis +author: thomas-laforge +challengeNumber: 13 +command: angular-styling +sidebar: + order: 104 +--- + +## Informação + +Estilização é um aspecto importante do trabalho diário de um desenvolvedor frontend, mas é muitas vezes subestimado. Em aplicações Angular, eu frequentemente vejo pessoas usando `@Input()` para personalizar o estilo de seus componentes. No entanto, `@Input()` deve ser usado apenas para lógica. Outras técnicas, como **variáveis CSS** e **host-context** devem ser usadas para estilização. + +Neste desafio, você precisará usar tanto variáveis CSS como `:host-context` para remover todos `@Input()` de seu código. + +## Restrições + +- Na sua submissão final, seu componente não deve conter nenhuma linha de código. Toda a estilização deve ser manipulada dentro do decorador _(ou arquivos css externos se preferir)_