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的更多相关文章

  1. [Angular 2] ng-class and Encapsulated Component Styles

    import {Input, Component, View, NgClass} from "angular2/angular2"; @Component({ selector: ...

  2. [Angular] Use Angular style sanitization to mark dynamic styles as trusted values

    Angular has a very robust security model. Dynamically inserted html, style or url values into the DO ...

  3. Bootstrap Metronic 学习记录(二)菜单栏

    1.简介 1)  .环境配置 2)  .提取页面 2).动态生成菜单(无限级别树) 2.系统环境配置 项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQ ...

  4. Android 更改按钮样式 Button Styles

    extends:http://stackoverflow.com/questions/26346727/android-material-design-button-styles   I will a ...

  5. Styles and Themens(3)android所有主题表

    The Android platform provides a large collection of styles and themes that you can use in your appli ...

  6. [React] Radium: Updating Button Styles via Props

    In a CSS library like Bootstrap we can set a button's style to be "primary" or "secon ...

  7. GeoServer之styles定制

    GeoServer之styles定制 GeoServer中styles类似于css,将地图中的点线面画出一层皮肤,引用在图层上.不同的地方在于.GeoServer中的styles用的是sld语法,也就 ...

  8. LitElement(三)Styles样式

    1.为组件添加样式 import { LitElement, css, html } from 'lit-element'; class MyElement extends LitElement { ...

  9. angular项目中使用angular-material2

    Step 1: Install Angular Material and Angular CDK npm install --save @angular/material @angular/cdk n ...

随机推荐

  1. [Angular & Unit Testing] Automatic change detection

    When you testing Component rendering, you often needs to call: fixture.detectChanges(); For example: ...

  2. android图片特效处理之图片叠加

    这篇将讲到图片特效处理的图片叠加效果.跟前面一样是对像素点进行处理,可参照前面的android图像处理系列之七--图片涂鸦,水印-图片叠加和android图像处理系列之六--给图片添加边框(下)-图片 ...

  3. 企业部署Linux应用将拥有更低的TCO

    650) this.width=650;" onclick='window.open("http://blog.51cto.com/viewpic.php?refimg=" ...

  4. org.omg.CORBA.MARSHAL: vmcid: SUN minor code: 211 completed: Maybe

    用weblogic 12c 测试 ejb3 import javax.naming.InitialContext; import javax.naming.NamingException; impor ...

  5. android hander

    http://www.cnblogs.com/plokmju/p/android_Handler.html 前言 Android的消息传递机制是另外一种形式的“事件处理”,这种机制主要是为了解决And ...

  6. RS-485总线和Modbus通信协议的关系

    一.RS-485总线 RS-485总线技术只是规定了接口的电气标准,并没有规定RS-485接口的电缆,插件以及通信协议,只是OSI规范中物理层的一个标准,RS-485总线采用差分平衡传输方式.由于RS ...

  7. CISP/CISA 每日一题 五

    CISA 每日一题(答) 信息系统审计师要确认系统变更程序中的: 1.变更需求应有授权.优先排序及跟踪机制: 2.日常工作手册中,明确指出紧急变更程序: 3.变更控制程序应同时为用户及项目开发组认可: ...

  8. HTML基础-第二讲

    转自:https://blog.csdn.net/likaier/article/details/326657 我们在第一讲里概括了一下网页的主要框架,现在我们来详细的研究网页的内部细则: 先从它的身 ...

  9. js常用数据转换&判断

    数组转字符串 var a, b; a = new Array(0,1,2,3,4); b = a.join("-"); //"0-1-2-3-4" 字符串转数组 ...

  10. HDU 1166 敌兵布阵 树状数组||线段树

    http://acm.hdu.edu.cn/showproblem.php?pid=1166 题目大意: 给定n个数的区间N<=50000,还有Q个询问(Q<=40000)求区间和. 每个 ...