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

Commit

Permalink
fix(select) rework select to match Material Design spec
Browse files Browse the repository at this point in the history
automatic 16px horizontal margin when in row layout
add md-inline-form support
  • Loading branch information
clshortfuse committed Jun 9, 2016
1 parent 39911d3 commit 2e21356
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 11 deletions.
4 changes: 2 additions & 2 deletions src/components/select/select.js
Original file line number Diff line number Diff line change
Expand Up @@ -1493,9 +1493,9 @@ function SelectProvider($$interimElementProvider) {
transformOrigin = '50% 100%';
}
} else {
left = (targetRect.left + centeredRect.left - centeredRect.paddingLeft) + 2;
left = (targetRect.left + centeredRect.left - centeredRect.paddingLeft);
top = Math.floor(targetRect.top + targetRect.height / 2 - centeredRect.height / 2 -
centeredRect.top + contentNode.scrollTop) + 2;
centeredRect.top + contentNode.scrollTop) + 1;

transformOrigin = (centeredRect.left + targetRect.width / 2) + 'px ' +
(centeredRect.top + centeredRect.height / 2 - contentNode.scrollTop) + 'px 0px';
Expand Down
37 changes: 28 additions & 9 deletions src/components/select/select.scss
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,13 @@ $select-max-visible-options: 5 !default;
}

md-input-container > md-select {
margin: 0;
order: 2;
margin-top: -7px; // Align with md-input-container
}

md-select {
display: flex;
margin: 2.5*$baseline-grid 0 3*$baseline-grid + 2 0;
margin: 0;
&[disabled] ._md-select-value {
background-position: 0 bottom;
// This background-size is coordinated with a linear-gradient set in select-theme.scss
Expand All @@ -80,14 +80,14 @@ md-select {
&.ng-invalid.ng-dirty {
._md-select-value {
border-bottom: 2px solid;
padding-bottom: 0;
padding-bottom: 5px;
}
}
&:focus {
._md-select-value {
border-bottom-width: 2px;
border-bottom-style: solid;
padding-bottom: 0;
padding-bottom: 5px;
}
}
}
Expand All @@ -97,14 +97,16 @@ md-select {
._md-select-value {
display: flex;
align-items: center;
padding: 2px 2px 1px;
padding: 4px 0 6px 0;
border-bottom-width: 1px;
border-bottom-style: solid;
background-color: rgba(0,0,0,0);
position: relative;
box-sizing: content-box;
min-width: 8 * $baseline-grid;
min-width: 11 * $baseline-grid;
min-height: 26px;
margin-bottom: auto;
-ms-flex-item-align: start; // workaround for margin-bottom: auto
flex-grow: 1;


Expand Down Expand Up @@ -134,17 +136,17 @@ md-select {
display: block;
content: '\25BC';
position: relative;
top: 2px;
right: -7px;
top: 1px;
speak: none;
transform: scaleY(0.6) scaleX(1);
transform: scaleY(0.5);
}

&._md-select-placeholder {
display: flex;
order: 1;
pointer-events: none;
-webkit-font-smoothing: antialiased;
padding-left: 2px;
z-index: 1;
}
}
Expand Down Expand Up @@ -248,3 +250,20 @@ md-select-menu[multiple] {
}
}
}

.layout-row,
.layout-xs-row, .layout-gt-xs-row,
.layout-sm-row, .layout-gt-sm-row,
.layout-md-row, .layout-gt-md-row,
.layout-lg-row, .layout-gt-lg-row,
.layout-xl-row {
& > md-select:not(:last-child), {
@include rtl(margin-left, 0, $select-container-padding);
@include rtl(margin-right, $select-container-padding, 0);
}

.md-inline-form & > md-select {
margin-top: 13px;
margin-bottom: auto;
}
}

0 comments on commit 2e21356

Please sign in to comment.