docs(demo): add demo for button styles and colors

oocx · Oct 11, 2018 · ccd0820 · ccd0820
1 parent e80ca8f
commit ccd0820
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 3 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -6,6 +6,7 @@ <h1>OutOfCoffeeException Angular Components</h1>
 </div>
 
 <h2>Components</h2>
+<section>
 <div>oocx-ng contains a collection of lightweight Angular components:</div>
 
 <h3>Calendar</h3>
@@ -87,7 +88,9 @@ <h3>Spinner</h3>
  <button (click)="emitError()">Emit error</button>
  <ox-spinner [errorSource]="errorSource"></ox-spinner>
 </div>
+</section>
 
+<section>
 <h2>Pipes</h2>
 
 <h3>duration pipe</h3>
@@ -99,3 +102,29 @@ <h3>duration pipe</h3>
  <tr><td>1</td><td>{{ 1 | duration }}</td></tr>
  <tr><td>25.25</td><td>{{ 25.25 | duration }}</td></tr>
 </table>
+</section>
+
+<section>
+<h2>Styles</h2>
+
+<h3>Colors</h3>
+<ul class="colors">
+ <li style="color: #fff">accent-color</li>
+ <li>background-color</li>
+ <li>secondary-background-color</li>
+ <li>teritary-background-color</li>
+ <li style="color: #fff">font-color</li>
+ <li style="color: #fff">font-color-weak</li>
+ <li>font-color-weaker</li>
+ <li style="color: #fff">border-color</li>
+ <li>light-border-color</li>
+ <li style="color: #fff">error-color</li>
+ <li style="color: #fff">error-color-light</li>
+ <li>invalid-color</li>
+</ul>
+
+<h3>Buttons</h3>
+<button class="ox-button">ox-button</button>
+<button class="ox-button-s">ox-button-s</button>
+<button class="ox-button-xs">ox-button-xs</button>
+</section>
diff --git a/src/app/app.component.less b/src/app/app.component.less
@@ -1,11 +1,36 @@
 @import '../../projects/oocx-ng/src/lib/oocx-ng.less';
+@import '../../projects/oocx-ng/src/lib/buttons.less';
 
 :host {
  display: block;
  font-family: @font-family;
  padding: 64px 128px;
 }
 
+.colors {
+ --accent-color: @accent-color;
+ --background-color: @background-color;
+ --secondary-background-color: @secondary-background-color;
+ --teritary-background-color: @teritary-background-color;
+ --font-color: @font-color;
+ --font-color-weak: @font-color-weak;
+ --font-color-weaker: @font-color-weaker;
+ --border-color: @border-color;
+ --light-border-color: @light-border-color;
+ --error-color: @error-color;
+ --error-color-light: @error-color-light;
+ --invalid-color: @invalid-color;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.colors > li {
+ margin: 0 0 16px 0;
+ padding: 8px;
+ border: 1px solid @border-color;
+}
+
 ox-input-date, ox-input-number {
  width: 100px;
 }
@@ -38,14 +63,19 @@ h2 {
 
 h3 {
  font-size: 1.2em;
+ margin: 0 0 10px 0;
+}
+
+section {
+ margin-bottom: 32px;
 }
 
 div {
  margin: 0 0 32px 0;
 }
 
 button {
- .button;
+ .ox-button;
 }
 
 button:hover {

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,17 +1,25 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Subject } from 'rxjs';
 
 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
 
  public options = [ 'eins', 'zwei', 'drei' ];
 
  public errorSource = new Subject();
 
+
+ public ngOnInit() {
+ const colorItems = document.querySelectorAll('.colors > li');
+ colorItems.forEach((li: HTMLElement) => {
+ li.style.backgroundColor = 'var(--' + li.innerText + ')';
+ });
+ }
+
  public autocompleteHandler(query: string) {
  const autocompleteEntries = [
  'Austria', 'Italy',