angular-material
Version:
**[Support for legacy AngularJS ended on January 1st, 2022](https://goo.gle/angularjs-end-of-life). [See `@angular/core` for the actively supported Angular](https://npmjs.com/@angular/core).**
193 lines (191 loc) • 3.92 kB
CSS
/*!
* AngularJS Material Design
* https://github.com/angular/material
* @license MIT
* v1.2.5
*/
.md-inline-form md-checkbox {
margin-top: 14px;
margin-bottom: auto;
}
md-checkbox {
box-sizing: border-box;
display: inline-block;
white-space: nowrap;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
min-width: 18px;
min-height: 48px;
}
.md-dense > md-checkbox:not(.md-dense-disabled), .md-dense :not(.md-dense-disabled) md-checkbox:not(.md-dense-disabled) {
min-height: 36px;
}
md-checkbox.md-focused:not([disabled]) .md-container:before {
left: -8px;
top: -8px;
right: -8px;
bottom: -8px;
}
md-checkbox.md-focused:not([disabled]):not(.md-checked) .md-container:before {
background-color: rgba(0, 0, 0, 0.12);
}
md-checkbox .md-container {
position: absolute;
top: 50%;
transform: translateY(-50%);
box-sizing: border-box;
display: inline-block;
width: 18px;
height: 18px;
left: 0;
right: auto;
}
[dir=rtl] md-checkbox .md-container {
left: auto;
}
[dir=rtl] md-checkbox .md-container {
right: 0;
}
md-checkbox .md-container:before {
box-sizing: border-box;
background-color: transparent;
border-radius: 50%;
content: "";
position: absolute;
display: block;
height: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
transition: all 0.5s;
width: auto;
}
md-checkbox .md-container:after {
box-sizing: border-box;
content: "";
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
}
md-checkbox .md-container .md-ripple-container {
position: absolute;
display: block;
width: auto;
height: auto;
left: -15px;
top: -15px;
right: -15px;
bottom: -15px;
}
md-checkbox .md-icon {
box-sizing: border-box;
transition: 240ms;
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
border-width: 2px;
border-style: solid;
border-radius: 2px;
}
md-checkbox.md-checked .md-icon {
border-color: transparent;
}
md-checkbox.md-checked .md-icon:after {
box-sizing: border-box;
transform: rotate(45deg);
position: absolute;
left: 4px;
top: 0px;
display: table;
width: 6px;
height: 12px;
border-width: 2px;
border-style: solid;
border-top: 0;
border-left: 0;
content: "";
}
md-checkbox[disabled] {
cursor: default;
}
md-checkbox.md-indeterminate .md-icon:after {
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: table;
width: 10.8px;
height: 2px;
border-width: 2px;
border-style: solid;
border-top: 0;
border-left: 0;
content: "";
}
md-checkbox .md-container {
top: auto;
left: auto;
right: auto;
margin: 3px;
margin-top: 21px;
}
md-checkbox .md-label {
box-sizing: border-box;
position: relative;
display: inline-block;
vertical-align: middle;
white-space: normal;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
margin-top: 10px;
margin-bottom: auto;
margin-left: 36px;
}
[dir=rtl] md-checkbox .md-label {
margin-left: 0;
margin-right: 36px;
}
md-checkbox .md-label:empty {
margin-left: 24px;
margin-right: 0;
}
[dir=rtl] md-checkbox .md-label:empty {
margin-left: 0;
}
[dir=rtl] md-checkbox .md-label:empty {
margin-right: 24px;
}
md-input-container .md-checkbox-link-label {
box-sizing: border-box;
position: relative;
display: inline-block;
vertical-align: middle;
white-space: normal;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
cursor: pointer;
top: -21px;
margin-left: 18px;
margin-right: 0;
}
[dir=rtl] md-input-container .md-checkbox-link-label {
margin-left: 0;
}
[dir=rtl] md-input-container .md-checkbox-link-label {
margin-right: 18px;
}