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. Python的正则表达概述

    本文介绍了Python对于正则表达式的支持,包括正则表达式基础以及Python正则表达式标准库的完整介绍及使用示例.本文的内容不包括如何编写高效的正则表达式.如何优化正则表达式,这些主题请查看其他教程 ...

  2. worktools-monkey 测试工具的使用

    配置电脑环境 1.进入用户目录下的bin cd ~/bin 2.链接一下monkey monkey -> /home/zhangshuli/git/vanzo_team/xulei/monkey ...

  3. php学习笔记5

    PHP 常量 常量值被定义后,在脚本的其他任何地方都不能被改变. 一个常量由英文字母.下划线.和数字组成,但数字不能作为首字母出现. (常量名不需要加 $ 修饰符). 注意: 常量在整个脚本中都可以使 ...

  4. Js 栈和堆的实现

    一.队列和堆栈的简单介绍 1.1.队列的基本概念 队列:是一种支持先进先出(FIFO)的集合,即先被插入的数据,先被取出! 1.2.堆栈的基本概念 堆栈:是一种支持后进先出(LIFO)的集合,即后被插 ...

  5. session应用二

    从session中获取mapper对象,利用mapper对象进行增删改查 Date now = new Date(); SqlSession session = this.yangchebaoDbMa ...

  6. ubuntu-系统密匙

    1.安装虚拟机xp,需要密匙,网上搜了一个,验证能用 MRX3F-47B9T-2487J-KWKMF-RPWBY 2.安装vm也需要密匙,如下可用 HC6JC-FPJ4M-RZM61-48852-2A ...

  7. matlab 文件路径问题

    1. fullfile:路径补全 f = fullfile(filepart1,...,filepartN) 显然可变参数之间填充的路径分隔符(path separator),会根据操作系统而变化: ...

  8. 存储过程和SQL语句比较

    做为SQL存储过程和.NET的新手,下面的指导还是很有用的,自己这一段刚刚接触这些东西,搜集了一些相关的东西,能使新手较容易上手,当然啦,要精通和熟练应用,还是要看更多更深的资料的,高手请不要见笑.以 ...

  9. Android 图片缓存处理

    异步下载 / 本地缓存 异步下载 大家都知道,在Android应用中UI线程5秒没响应的话就会抛出无响应异常,对于远程获取大的资源来说,这种异常还是很容易就会抛出来的,那么怎么避免这种问题的产生.在a ...

  10. golang 获取环境信息

    os.Environ() os.Getenv("TMP")