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. JAVA使用YUI压缩CSS/JS

    前言 JS/CSS文件压缩我们经常会用到,可以在网上找在线压缩或者本地直接使用,我这里使用的是yahoo开源组件YUI Compressor.首先介绍一下YUI Compressor,它是一个用来压缩 ...

  2. Ansible学习记录一:Linux下部署

    0.Ansible介绍 Ansible 是一个简单的自动化运维管理工具,可以用来自动化部署应用.配置.编排 task(持续交付.无宕机更新等),采用 paramiko 协议库(fabric 也使用这个 ...

  3. 洛谷 P2867 [USACO06NOV]大广场Big Square

    P2867 [USACO06NOV]大广场Big Square 题目描述 Farmer John's cows have entered into a competition with Farmer ...

  4. android 自己定义控件属性(TypedArray以及attrs解释)

    近期在捣鼓android 自己定义控件属性,学到了TypedArray以及attrs.在这当中看了一篇大神博客Android 深入理解Android中的自己定义属性.我就更加深入学习力一番.我就沿着这 ...

  5. ajax同时请求多个服务器?

    这是地址, http://119.29.23.116/info.php 大侠你怎么看 想利用雅黑探针检测服务器的在线状态,但对AJAX多个请求不会操作 header('Access-Control-A ...

  6. http压测工具wrk

    安装 wrk支持大多数类UNIX系统,不支持windows.需要操作系统支持LuaJIT和OpenSSL,不过不用担心,大多数类Unix系统都支持.安装wrk非常简单,只要从github上下载wrk源 ...

  7. 八、Docker+RabbitMQ

    原文:八.Docker+RabbitMQ 一.下载镜像 docker pull rabbitmq:management 二.运行 docker run -d --name rabbitmq -e TZ ...

  8. wmi 一些配置(参考)

    http://www.bubuko.com/infodetail-1937463.html

  9. 业余学习react 学习记录

    http://www.ruanyifeng.com/blog/2015/03/react (阮一峰 react 学习) 1.搭建环境:npm 使用 React npm install -g cnpm ...

  10. phoenixframe自己主动化平台在Linux环境下运行用例的说明

    phoenixframe自己主动化平台支持在Linux环境下使用phantomjs,Firefox.chrome运行測试用例.但有下面几个问题须要注意: 1.若无法启动phantomjs,Firefo ...