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 8, 2016
1 parent e3b0cd8 commit 4379748
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 2 deletions.
4 changes: 2 additions & 2 deletions src/components/select/demoOptionGroups/index.html
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>
16 changes: 16 additions & 0 deletions src/components/select/select-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -75,3 +75,19 @@ md-select-menu.md-THEME_NAME-theme {
}
}
}

md-select-menu.md-THEME_NAME-theme[multiple] {
md-option {
&:before {
color: '{{foreground-2}}';
}
&[selected] {
&:before {
background-color: '{{primary-color-0.87}}';
}
&:after {
border-color: '{{primary-contrast-0.87}}';
}
}
}
}
46 changes: 46 additions & 0 deletions src/components/select/select.scss
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,46 @@ md-optgroup {
border: 1px solid #fff;
}
}

md-select-menu[multiple] {
md-option {
height: $select-option-height;
padding-top: 2px;
padding-right: $select-option-padding;
padding-bottom: 0;
padding-left: ($select-option-padding * 2) + ($select-option-padding / 2);

&:before {
left: $select-option-padding * (2 / 3);
height: $select-checkbox-width;
width: $select-checkbox-width;
border-radius: $select-checkbox-border-radius;
top: 50%;
transform: translateY(-50%);
content: '';
position: absolute;
border: 2px solid;
}
&[selected] {
&:before {
border-color: transparent;
}
&:after {
box-sizing: border-box;
transform: rotate(45deg);
position: absolute;
display: table;
top: $select-option-padding + 1;
left: $select-option-padding + 1;
height: $select-checkbox-width - 1;
width: $select-checkbox-width * (3/7);
border-width: $select-checkbox-border-width;
border-style: solid;
border-top: 0;
border-left: 0;
content: '';
z-index: 2;
}
}
}
}

0 comments on commit 4379748

Please sign in to comment.