Theme module customize UI of the elements with Logo Element Design standard. It also support bootstrap, .Net, Angular and ReactNative based projects.

Click here for demo

All public npm packages of Logo Software is at https://www.npmjs.com/~logofe. To install Theme Module:

$ npm set registry https://registry.npmjs.org/
$ npm install @logo-software/theme -s

Usage Example

1. Create _config.scss file, if you change some settings then just import scss to your project main style.scss

_{_config.scss}

$config: (
 grid:(status: true),
 bootstrap:(status: false),
 extend-colors: true,
 customize: (status: true),
 debug: true
);

2. Add _config.scss to your main style.scss

_{style.scss</style>}

@import "/src/config";
@import "~@logo-software/theme/style";

3. And additionally if you use theme in a any component just add base scss file. It contains basic property not all things (all things before already added to style.scss).

_{any.component.scss}

// if you customize the config add first `config.scss` file
@import "/src/config";
@import "~@logo-software/theme/base";

:host {
 // component custom css goes here
}

4. And use in component's html

_{app.component.html}

<div>
 Three type form size exist `large | medium | small`:<br/>
 <input class="large"/> <input class="medium"/> <input class="small"/>
</div>
<div>
 Three type form display exist `fill | outline | ghost`:<br/>
 <input class="fill"/> <input class="outline"/> <input class="ghost"/>
</div>