首页 > 代码库 > [Angular] Separating Structural Styles From Theme Styles - Making Components Themeable

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

2024-10-04 07:53:01   213人阅读

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;}

 

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


联系
我们