[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;
}
[Angular] Separating Structural Styles From Theme Styles - Making Components Themeable的更多相关文章
- [Angular 2] ng-class and Encapsulated Component Styles
import {Input, Component, View, NgClass} from "angular2/angular2"; @Component({ selector: ...
- [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 ...
- Bootstrap Metronic 学习记录(二)菜单栏
1.简介 1) .环境配置 2) .提取页面 2).动态生成菜单(无限级别树) 2.系统环境配置 项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQ ...
- Android 更改按钮样式 Button Styles
extends:http://stackoverflow.com/questions/26346727/android-material-design-button-styles I will a ...
- Styles and Themens(3)android所有主题表
The Android platform provides a large collection of styles and themes that you can use in your appli ...
- [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 ...
- GeoServer之styles定制
GeoServer之styles定制 GeoServer中styles类似于css,将地图中的点线面画出一层皮肤,引用在图层上.不同的地方在于.GeoServer中的styles用的是sld语法,也就 ...
- LitElement(三)Styles样式
1.为组件添加样式 import { LitElement, css, html } from 'lit-element'; class MyElement extends LitElement { ...
- angular项目中使用angular-material2
Step 1: Install Angular Material and Angular CDK npm install --save @angular/material @angular/cdk n ...
随机推荐
- Python的正则表达概述
本文介绍了Python对于正则表达式的支持,包括正则表达式基础以及Python正则表达式标准库的完整介绍及使用示例.本文的内容不包括如何编写高效的正则表达式.如何优化正则表达式,这些主题请查看其他教程 ...
- worktools-monkey 测试工具的使用
配置电脑环境 1.进入用户目录下的bin cd ~/bin 2.链接一下monkey monkey -> /home/zhangshuli/git/vanzo_team/xulei/monkey ...
- php学习笔记5
PHP 常量 常量值被定义后,在脚本的其他任何地方都不能被改变. 一个常量由英文字母.下划线.和数字组成,但数字不能作为首字母出现. (常量名不需要加 $ 修饰符). 注意: 常量在整个脚本中都可以使 ...
- Js 栈和堆的实现
一.队列和堆栈的简单介绍 1.1.队列的基本概念 队列:是一种支持先进先出(FIFO)的集合,即先被插入的数据,先被取出! 1.2.堆栈的基本概念 堆栈:是一种支持后进先出(LIFO)的集合,即后被插 ...
- session应用二
从session中获取mapper对象,利用mapper对象进行增删改查 Date now = new Date(); SqlSession session = this.yangchebaoDbMa ...
- ubuntu-系统密匙
1.安装虚拟机xp,需要密匙,网上搜了一个,验证能用 MRX3F-47B9T-2487J-KWKMF-RPWBY 2.安装vm也需要密匙,如下可用 HC6JC-FPJ4M-RZM61-48852-2A ...
- matlab 文件路径问题
1. fullfile:路径补全 f = fullfile(filepart1,...,filepartN) 显然可变参数之间填充的路径分隔符(path separator),会根据操作系统而变化: ...
- 存储过程和SQL语句比较
做为SQL存储过程和.NET的新手,下面的指导还是很有用的,自己这一段刚刚接触这些东西,搜集了一些相关的东西,能使新手较容易上手,当然啦,要精通和熟练应用,还是要看更多更深的资料的,高手请不要见笑.以 ...
- Android 图片缓存处理
异步下载 / 本地缓存 异步下载 大家都知道,在Android应用中UI线程5秒没响应的话就会抛出无响应异常,对于远程获取大的资源来说,这种异常还是很容易就会抛出来的,那么怎么避免这种问题的产生.在a ...
- golang 获取环境信息
os.Environ() os.Getenv("TMP")