v6.0.1 fix demo css

Author: clouless

projects/cloukit/toggle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloukit/toggle",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "peerDependencies": {
     "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
     "@angular/core": "^6.0.0-rc.0 || ^6.0.0",

src/app/demo/demo.component.ts

@@ -8,9 +8,9 @@ import { Component } from '@angular/core';
 export class DemoComponent {
   public static sharedStyles = [
     '.row { display: flex; align-items:center; }',
-    '.row span { margin-right:10px; }',
-    '.row button { margin-left:50px; }',
-    `.superButton, .superButtonSecondary { border:2px solid #710ECC; outline:0; background-color:#710ECC; color:#fff;
+    '.label { width:250px; margin-right:10px; }',
+    '.superButton--ml { margin-left:50px; }',
+    `.superButton { border:2px solid #710ECC; outline:0; background-color:#710ECC; color:#fff;
       border-radius:0px; padding:4px 8px 4px 8px; color:#fff; cursor:pointer; font-size:1rem; }`,
     '.superButton:hover, .superButtonSecondary:hover { border:2px solid #710ECC; background-color:#fff; color:#710ECC;  }',
   ];

src/app/demo/stories/story-00-basic.html

@@ -1,7 +1,7 @@
 <div class="demo" [formGroup]="form">
 
   <div class="row">
-    <span>Is Schrödingers cat dead?</span>
+    <span class="label">Is Schrödingers cat dead?</span>
 
     <cloukit-toggle
       formControlName="isCatDead"
@@ -10,7 +10,7 @@
     <button
       type="button"
       (click)="toggleFormDisabled()"
-      class="superButton"
+      class="superButton superButton--ml"
     >{{ isFormDisabled ? 'enable' : 'disable' }} form</button>
   </div>
 

src/app/demo/stories/story-01-themed.html

@@ -2,7 +2,7 @@
 
   <div class="row">
 
-    <span>Theme: toggle--cornered</span>
+    <span class="label">Theme: toggle--cornered</span>
 
     <cloukit-toggle
       formControlName="myBool"
@@ -15,7 +15,7 @@
 
   <div class="row">
 
-    <span>Theme: toggle--awesome</span>
+    <span class="label">Theme: toggle--awesome</span>
 
     <cloukit-toggle
       formControlName="myBoolTwo"

src/app/demo/stories/story-01-themed.ts

@@ -15,7 +15,7 @@ export class AwesomeToggleTheme extends CloukitToggleComponentThemeDefault {
 @Component({
   selector: 'cloukit-story-01-themed',
   templateUrl: './story-01-themed.html',
-  styles: [ '.row span { width:200px; }' ].concat(DemoComponent.sharedStyles),
+  styles: [ ].concat(DemoComponent.sharedStyles),
 })
 export class Story01Component {