This repository has been archived by the owner on Sep 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update(docs): customize css for checkbox component
Closes #3415.
- Loading branch information
1 parent
27b535e
commit bdf7039
Showing
1 changed file
with
98 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| @ngdoc content | ||
| @name checkbox | ||
| @description | ||
|
|
||
| ### CSS Styles | ||
|
|
||
| The css decalaration of the `<md-checkbox>` component is: | ||
|
|
||
| <hljs lang="css"> | ||
| md-checkbox { | ||
| margin: 8px; | ||
| cursor: pointer; | ||
| padding-left: 18px; | ||
| padding-right: 0; | ||
| line-height: 26px; | ||
| min-width: 18px; | ||
| min-height: 18px; | ||
| } | ||
| </hljs> | ||
|
|
||
| #### Ink color | ||
|
|
||
|  | ||
|
|
||
| In order to change the color when the checkbox is checked: | ||
|
|
||
| <hljs lang="html"> | ||
| <md-checkbox class="green"> | ||
| Green Checkbox | ||
| </md-checkbox> | ||
| </hljs> | ||
|
|
||
| <hljs lang="css"> | ||
| md-checkbox.md-checked.green .md-icon { | ||
| background-color: rgba(0, 255, 0, 0.87); | ||
| } | ||
| </hljs> | ||
|
|
||
|
|
||
| #### Disabled | ||
|
|
||
| In order to change the color when a disabled checkbox is checked: | ||
|
|
||
|  | ||
|
|
||
|
|
||
| <hljs lang="html"> | ||
| <md-checkbox ng-disabled="true" class="red" ng-model="data.cb4" ng-init="data.cb4=true"> | ||
| Checkbox: Disabled, Checked | ||
| </md-checkbox> | ||
| </hljs> | ||
|
|
||
| <hljs lang="css"> | ||
| md-checkbox.md-checked[disabled].red .md-icon { | ||
| background-color: rgba(255, 0, 0, 0.26); | ||
| } | ||
| </hljs> | ||
|
|
||
| #### Borders | ||
| In order to add a custom border do the following: | ||
|
|
||
|  | ||
|
|
||
|
|
||
| <hljs lang="html"> | ||
| <div> | ||
| <md-checkbox ng-model="data.cb2" aria-label="Checkbox 2" ng-true-value="'yup'" ng-false-value="'nope'"> | ||
| Default Border | ||
| </md-checkbox> | ||
| </div> | ||
| <div> | ||
| <md-checkbox ng-model="data.cb2" aria-label="Checkbox 2" ng-true-value="'yup'" class="dotted" ng-false-value="'nope'"> | ||
| Custom Border | ||
| </md-checkbox> | ||
| </div> | ||
| </hljs> | ||
| <hljs lang="css"> | ||
| md-checkbox.dotted .md-icon { | ||
| border-width: 1px; | ||
| border-style: dashed; | ||
| } | ||
| </hljs> | ||
|
|
||
|
|
||
|
|
||
| #### Bi-Di | ||
|
|
||
| The mdCheckbox directive supports bi-directional specifiers in the `<html>` tag: | ||
|
|
||
|  | ||
|
|
||
|
|
||
| <hljs lang="html"> | ||
| <html dir="rtl"> | ||
| </hljs> | ||
|
|
||
|
|
||
|
|