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 531ff90
Show file tree
Hide file tree
Showing 2 changed files with 29 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
36 changes: 27 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,19 @@ 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;
}
}

0 comments on commit 531ff90

Please sign in to comment.