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

Commit

Permalink
Adding checkboxes to angular material stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
Derek Louie committed Mar 11, 2016
1 parent e3b0cd8 commit e37301b
Show file tree
Hide file tree
Showing 6 changed files with 142 additions and 97 deletions.
63 changes: 34 additions & 29 deletions src/components/checkbox/checkbox-theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,36 @@
@mixin checkbox-primary($checkedSelector: '.md-checked') {
.md-ripple {
color: '{{primary-600}}';
}
&#{$checkedSelector} .md-ripple {
color: '{{background-600}}';
}

.md-ink-ripple {
color: '{{foreground-2}}';
}

&#{$checkedSelector} .md-ink-ripple {
color: '{{primary-color-0.87}}';
}

._md-icon {
border-color: '{{foreground-2}}';
}

&#{$checkedSelector} ._md-icon {
background-color: '{{primary-color-0.87}}';
}

&#{$checkedSelector}.md-focused ._md-container:before {
background-color: '{{primary-color-0.26}}';
}

&#{$checkedSelector} ._md-icon:after {
border-color: '{{primary-contrast-0.87}}';
}
}

md-checkbox.md-THEME_NAME-theme {

.md-ripple {
Expand Down Expand Up @@ -31,35 +64,7 @@ md-checkbox.md-THEME_NAME-theme {

&:not([disabled]) {
&.md-primary {
.md-ripple {
color: '{{primary-600}}';
}
&.md-checked .md-ripple {
color: '{{background-600}}';
}

.md-ink-ripple {
color: '{{foreground-2}}';
}

&.md-checked .md-ink-ripple {
color: '{{primary-color-0.87}}';
}

._md-icon {
border-color: '{{foreground-2}}';
}
&.md-checked ._md-icon {
background-color: '{{primary-color-0.87}}';
}

&.md-checked.md-focused ._md-container:before {
background-color: '{{primary-color-0.26}}';
}

&.md-checked ._md-icon:after {
border-color: '{{primary-contrast-0.87}}';
}
@include checkbox-primary;
}

&.md-warn {
Expand Down
141 changes: 75 additions & 66 deletions src/components/checkbox/checkbox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,46 +6,12 @@ $checkbox-border-width: 2px !default;
$checkbox-text-margin: 10px !default;
$checkbox-top: 12px !default;

.md-inline-form {
md-checkbox {
margin: 19px 0 18px;
}
}

md-checkbox {
box-sizing: border-box;
display: inline-block;
margin-bottom: $checkbox-margin;
white-space: nowrap;
cursor: pointer;
outline: none;
user-select: none;
position: relative;
min-width: $checkbox-width;
min-height: $checkbox-width;
@include rtl(margin-left, 0, $checkbox-margin);
@include rtl(margin-right, $checkbox-margin, 0);

&:last-of-type {
margin-left: 0;
margin-right: 0;
}

&.md-focused:not([disabled]) {
._md-container:before {
left: -8px;
top: -8px;
right: -8px;
bottom: -8px;
}

&:not(.md-checked) {
._md-container:before {
background-color: rgba(0, 0, 0, 0.12);
}
}
}

@mixin checkbox-container(
$checkedSelector: '.md-checked',
$width: $checkbox-width,
$height: $checkbox-height,
$border-width: $checkbox-border-width,
$border-radius: $checkbox-border-radius) {
._md-container {
position: absolute;
top: 50%;
Expand All @@ -54,15 +20,15 @@ md-checkbox {
box-sizing: border-box;
display: inline-block;

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

// Disable pointer events, because IE11 is always focusing the child elements instead of the
// md-checkbox element.
pointer-events: none;

&:before {
box-sizing: border-box;
background-color: transparent;
Expand Down Expand Up @@ -101,49 +67,92 @@ md-checkbox {
}
}

&.md-align-top-left > div._md-container {
top: $checkbox-top;
}

// unchecked
._md-icon {
box-sizing: border-box;
transition: 240ms;
position: absolute;
top: 0;
left: 0;
width: $checkbox-width;
height: $checkbox-height;
border-width: $checkbox-border-width;
width: $width;
height: $height;
border-width: $border-width;
border-style: solid;
border-radius: $checkbox-border-radius;
border-radius: $border-radius;
}

&.md-checked ._md-icon {
&#{$checkedSelector} ._md-icon {
border: none;

&:after {
box-sizing: border-box;
transform: rotate(45deg);
position: absolute;
left: $width / 3;
top: $width / 9;
display: table;
width: $width / 3;
height: $width * 2 / 3;
border-width: $border-width;
border-style: solid;
border-top: 0;
border-left: 0;
content: '';
}
}

// disabled
&[disabled] {
cursor: default;
}

}

&.md-checked ._md-icon:after {
box-sizing: border-box;
transform: rotate(45deg);
position: absolute;
left: $checkbox-width / 3;
top: $checkbox-width / 9;
display: table;
width: $checkbox-width / 3;
height: $checkbox-width * 2 / 3;
border-width: $checkbox-border-width;
border-style: solid;
border-top: 0;
border-left: 0;
content: '';
.md-inline-form {
md-checkbox {
margin: 19px 0 18px;
}
}

md-checkbox {
box-sizing: border-box;
display: inline-block;
margin-bottom: $checkbox-margin;
white-space: nowrap;
cursor: pointer;
outline: none;
user-select: none;
position: relative;
min-width: $checkbox-width;
min-height: $checkbox-width;
@include rtl(margin-left, 0, $checkbox-margin);
@include rtl(margin-right, $checkbox-margin, 0);

&:last-of-type {
margin-left: 0;
margin-right: 0;
}

&.md-focused:not([disabled]) {
._md-container:before {
left: -8px;
top: -8px;
right: -8px;
bottom: -8px;
}

&:not(.md-checked) {
._md-container:before {
background-color: rgba(0, 0, 0, 0.12);
}
}
}

&.md-align-top-left > div._md-container {
top: $checkbox-top;
}

@include checkbox-container;

._md-label {
box-sizing: border-box;
Expand Down
4 changes: 2 additions & 2 deletions src/components/select/demoOptionGroups/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ <h1 class="md-title">Pick your pizza below</h1>
</md-input-container>
<md-input-container>
<label>Topping</label>
<md-select ng-model="topping">
<md-select ng-model="selectedToppings" multiple>
<md-optgroup label="Meats">
<md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'meat' }">{{topping.name}}</md-option>
</md-optgroup>
Expand All @@ -20,6 +20,6 @@ <h1 class="md-title">Pick your pizza below</h1>
</md-select>
</md-input-container>
</div>
<p ng-if="topping">You ordered a {{size.toLowerCase()}} pizza with {{topping.toLowerCase()}}.</p>
<p ng-if="selectedToppings">You ordered a {{size.toLowerCase()}} pizza with {{selectedToppings.join(', ')}}.</p>
</div>
</div>
9 changes: 9 additions & 0 deletions src/components/select/select-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,3 +75,12 @@ md-select-menu.md-THEME_NAME-theme {
}
}
}


[md-checkbox-enabled].md-THEME_NAME-theme {
@include checkbox-primary('[selected]');

md-option ._md-text {
color: '{{background-900-0.87}}';
}
}
5 changes: 5 additions & 0 deletions src/components/select/select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -776,6 +776,11 @@ function OptionDirective($mdButtonInkRipple, $mdUtil) {
var optionCtrl = ctrls[0];
var selectCtrl = ctrls[1];

if (selectCtrl.isMultiple) {
element.attr('md-checkbox-enabled', 'true');
element.prepend('<div class="_md-container"><div class="_md-icon"></div></div>');
}

if (angular.isDefined(attr.ngValue)) {
scope.$watch(attr.ngValue, setOptionValue);
} else if (angular.isDefined(attr.value)) {
Expand Down
17 changes: 17 additions & 0 deletions src/components/select/select.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
$select-checkbox-border-radius: 2px !default;
$select-checkbox-border-width: 2px !default;
$select-checkbox-width: rem(1.4) !default;
$select-option-height: 48px;
$select-option-padding: 16px;
$select-container-padding: 16px;
Expand Down Expand Up @@ -228,3 +231,17 @@ md-optgroup {
border: 1px solid #fff;
}
}

md-select-menu[multiple] {
md-option[md-checkbox-enabled] {
@include rtl(padding-left, $select-option-padding * 2.5, $select-option-padding);
@include rtl(padding-right, $select-option-padding, $select-option-padding * 2.5);

@include checkbox-container('[selected]');

._md-container {
@include rtl(margin-left, $select-option-padding * (2 / 3), auto);
@include rtl(margin-right, auto, $select-option-padding * (2 / 3));
}
}
}

0 comments on commit e37301b

Please sign in to comment.