[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 ...
随机推荐
- JAVA使用YUI压缩CSS/JS
前言 JS/CSS文件压缩我们经常会用到,可以在网上找在线压缩或者本地直接使用,我这里使用的是yahoo开源组件YUI Compressor.首先介绍一下YUI Compressor,它是一个用来压缩 ...
- Ansible学习记录一:Linux下部署
0.Ansible介绍 Ansible 是一个简单的自动化运维管理工具,可以用来自动化部署应用.配置.编排 task(持续交付.无宕机更新等),采用 paramiko 协议库(fabric 也使用这个 ...
- 洛谷 P2867 [USACO06NOV]大广场Big Square
P2867 [USACO06NOV]大广场Big Square 题目描述 Farmer John's cows have entered into a competition with Farmer ...
- android 自己定义控件属性(TypedArray以及attrs解释)
近期在捣鼓android 自己定义控件属性,学到了TypedArray以及attrs.在这当中看了一篇大神博客Android 深入理解Android中的自己定义属性.我就更加深入学习力一番.我就沿着这 ...
- ajax同时请求多个服务器?
这是地址, http://119.29.23.116/info.php 大侠你怎么看 想利用雅黑探针检测服务器的在线状态,但对AJAX多个请求不会操作 header('Access-Control-A ...
- http压测工具wrk
安装 wrk支持大多数类UNIX系统,不支持windows.需要操作系统支持LuaJIT和OpenSSL,不过不用担心,大多数类Unix系统都支持.安装wrk非常简单,只要从github上下载wrk源 ...
- 八、Docker+RabbitMQ
原文:八.Docker+RabbitMQ 一.下载镜像 docker pull rabbitmq:management 二.运行 docker run -d --name rabbitmq -e TZ ...
- wmi 一些配置(参考)
http://www.bubuko.com/infodetail-1937463.html
- 业余学习react 学习记录
http://www.ruanyifeng.com/blog/2015/03/react (阮一峰 react 学习) 1.搭建环境:npm 使用 React npm install -g cnpm ...
- phoenixframe自己主动化平台在Linux环境下运行用例的说明
phoenixframe自己主动化平台支持在Linux环境下使用phantomjs,Firefox.chrome运行測试用例.但有下面几个问题须要注意: 1.若无法启动phantomjs,Firefo ...