Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
fix(css): remove styles that could apply to user-controlled elements.
Browse files Browse the repository at this point in the history
BREAKING CHANGE: modify scope of `box-sizing: border-box` to be specific to only to elements owned by ngMaterial.

Before:

```css
*,*:before,*:after {
  box-sizing: border-box;
}

.md-container { }
```

After

```css
.md-container {
   box-sizing: border-box;
}
```

Refs #3516. Closes #4222
  • Loading branch information
jelbourn authored and ThomasBurleson committed Aug 19, 2015
1 parent 912bcef commit fbb6b28
Show file tree
Hide file tree
Showing 5 changed files with 14 additions and 28 deletions.
5 changes: 0 additions & 5 deletions src/components/button/button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,6 @@ $icon-button-margin: rem(0.600) !default;
transition: box-shadow $swift-ease-out-duration $swift-ease-out-timing-function,
background-color $swift-ease-out-duration $swift-ease-out-timing-function;

*,
*:before,
*:after {
box-sizing: border-box;
}
&:focus {
outline: none;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/checkbox/checkbox.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ angular
* </hljs>
*
*/
function MdCheckboxDirective(inputDirective, $mdInkRipple, $mdAria, $mdConstant, $mdTheming, $mdUtil, $timeout) {
function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $mdUtil, $timeout) {
inputDirective = inputDirective[0];
var CHECKED_CSS = 'md-checked';

Expand Down
14 changes: 8 additions & 6 deletions src/components/checkbox/checkbox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,6 @@ md-checkbox {
min-width: $checkbox-width;
min-height: $checkbox-width;

*,
*:before,
*:after {
box-sizing: border-box;
}

&.md-focused:not([disabled]) {
.md-container:before {
left: -8px;
Expand All @@ -46,13 +40,17 @@ md-checkbox {
position: absolute;
top: 50%;
transform: translateY(-50%);

box-sizing: border-box;
display: inline-block;

width: $checkbox-width;
height: $checkbox-height;
@include rtl(left, 0, auto);
@include rtl(right, auto, 0);

&:before {
box-sizing: border-box;
background-color: transparent;
border-radius: 50%;
content: '';
Expand All @@ -68,6 +66,7 @@ md-checkbox {
}

&:after {
box-sizing: border-box;
content: '';
position: absolute;
top: -10px;
Expand All @@ -94,6 +93,7 @@ md-checkbox {

// unchecked
.md-icon {
box-sizing: border-box;
transition: 240ms;
position: absolute;
top: 0;
Expand All @@ -116,6 +116,7 @@ md-checkbox {


&.md-checked .md-icon:after {
box-sizing: border-box;
transform: rotate(45deg);
position: absolute;
left: $checkbox-width / 3;
Expand All @@ -131,6 +132,7 @@ md-checkbox {
}

.md-label {
box-sizing: border-box;
position: relative;
display: inline-block;
vertical-align: middle;
Expand Down
15 changes: 5 additions & 10 deletions src/components/radioButton/radio-button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,8 @@ md-radio-button,
white-space: nowrap;
cursor: pointer;

*,
*:before,
*:after {
box-sizing: border-box;
}

input {
display: none;
}

.md-container {
box-sizing: border-box;
position: relative;
top: 4px;
display: inline-block;
Expand All @@ -39,6 +30,7 @@ md-radio-button,
}

&:before {
box-sizing: border-box;
background-color: transparent;
border-radius: 50%;
content: '';
Expand All @@ -59,6 +51,7 @@ md-radio-button,
}

.md-off {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
Expand All @@ -71,6 +64,7 @@ md-radio-button,
}

.md-on {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
Expand All @@ -86,6 +80,7 @@ md-radio-button,
}

.md-label {
box-sizing: border-box;
position: relative;
display: inline-block;

Expand Down
6 changes: 0 additions & 6 deletions src/components/sidenav/sidenav.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,6 @@ md-sidenav {
background-color: white;
overflow: auto;

*,
*:before,
*:after {
box-sizing: border-box;
}

ul {
list-style: none;
}
Expand Down

0 comments on commit fbb6b28

Please sign in to comment.