[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 ...
随机推荐
- JS实现下拉菜单的功能
<!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...
- 【2017 Multi-University Training Contest - Team 5】Rikka with Subset
[Link]: [Description] 给你a数组的n个数的所有2^n个子集的2^n个子集元素的和; 子集元素的和最大为m; 告诉你各个子集元素的和出现的次数; 如 1 2 则0出现1次,1出现1 ...
- Java中的继承和接口
本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 这是个老话题,继承和接口是实现多态的两种方式,如果对象很多,其中一对一对的有共同点,建议用继承,如果 ...
- 地道的 Python(二)
作者: Zhang Yang 列表推导 上文介绍了一个高逼格的创建字典的方法.那列表呢?依据蛋痛定律,它也一定有,可是它被起了一个很蛋痛的名字,叫列表推导: 先看看这种代码: li = [] for ...
- 怎样利用ash监控会话
ash是很有效的监控工具之中的一个.1秒抓一次 select max(sample_time)over(),min(sample_time)over() from dba_hist_active_se ...
- dropdown下拉菜单
<!--声明方式的下拉菜单:三个要点--> <!--1 外围容器用dropdown包裹--> <!--2 内部点击事件data-toggle--> <!--3 ...
- VNC Server模拟攻击实战
VNC目前已被广泛应用的一个远程控制程序,很多攻击者对VNC的攻击技术研究热情是高涨的,丝毫不亚于对Windows的远程桌面(3389).PcAnywhere的攻击研究.从最开始爆发出来的VNC的低版 ...
- 洛谷P3403跳楼机(最短路构造/同余最短路)
题目-> 解题思路: 最短路构造很神啊. 先用前两个值跑在第三个值模意义下的同余最短路(这步贪心可以证明,如果第三步长为z,那么如果n+z可以达到,n+2z同样可以达到) 最后计算与楼顶差多少个 ...
- [Vue + TS] Using Route events inside Vue
vue-router introduces new hooks into the component. In this lesson we’ll show you how to use these n ...
- WebForm使用JQuery实现DropDownList无刷新联动
目录(?)[-] 1 JS代码 2 页面相关控件用的是平台封装的控件普通DropDownList也可以 3 后台C代码 注意事项 原来用的微软封装的Ajax控件UpdatePannel和Scri ...