[Angular] Separating Structural Styles From Theme Styles - Making Components Themeable

For the component's css file, we can improt two css files:

• common.css
• default-theme.css

@import "common.css";
@import "au-fa-input-default-theme.css";

 

In the default theme, it contains all the default theme related style.

:host {
  border-color: lightgrey;
}

:host(.input-focus) {
  border-color: #4D90FE;
  -webkit-box-shadow: 0 0 5px  #4D90FE;
  box-shadow: 0 0 5px  #4D90FE;
}

 

In the common.css, it contains all the common style for different themes:

/*Common for all input fields*/
.icon {
  width:20px;
  text-align: center;
  padding-left: 5px;
  padding-right: 2px;
  border:none;
  vertical-align: middle;
}

:host {
  border-width:1px;
  border-style: solid;
  padding: 1px 0;
  display: inline-block;
}

:host(.input-focus) {
  outline: none;
}

:host /deep/ input {
  border:none ;
  outline: none;
  height: 100%;
  box-sizing: border-box;
}