Skip to content

MDL2: Peoplepicker RTL and style fixes #208

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
atneik merged 2 commits into from
Aug 29, 2016
Merged

MDL2: Peoplepicker RTL and style fixes #208

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fdbd63e
Centering the X button, and fixing hover styling issues
Aug 27, 2016
5d98b70
Fixing hover spacing issue, RTL issues
Aug 27, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 54 additions & 33 deletions src/components/PeoplePicker/PeoplePicker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@
// --------------------------------------------------
// People Picker styles

$peoplePickerResults-maxWidth: 340px;
$peoplePicker-rowHeight: 56px;
$personaItemHeight: 42px;


Expand Down Expand Up @@ -131,10 +133,14 @@ $personaItemHeight: 42px;
border: 1px solid $ms-color-neutralTertiaryAlt;
display: none;
margin-bottom: -1px;
min-width: 340px;
width: 100%;
padding-top: 9px;
position: absolute;
z-index: ($ms-zIndex-PeoplePicker + $ms-zIndex-middle);

@media (min-width: $ms-screen-md-min) {
width: $peoplePickerResults-maxWidth;
}
}

// Show the results area when the people picker is active
Expand Down Expand Up @@ -183,6 +189,8 @@ $personaItemHeight: 42px;
position: relative;

.ms-Persona {
width: inherit;

&:hover {
@extend .ms-Persona.ms-Persona--darkText;
cursor: pointer;
Expand All @@ -198,6 +206,7 @@ $personaItemHeight: 42px;
// Ensure the width is 100%.
.ms-Persona-details {
width: 100%;
@include padding-right(28px);
}
}

Expand All @@ -207,16 +216,15 @@ $personaItemHeight: 42px;
@include button-reset();
position: relative;
box-sizing: border-box;
height: 34px;
height: $personaItemHeight;
width: 100%;
background: none;
border: 0;
text-align: left;
@include margin(8px, 0, 0, 0);
@include padding(0, 0, 0, 16px);
@include text-align(left);
@include padding(4px, 0, 4px, 16px);

@media (min-width: $ms-screen-md-min) {
height: 48px;
height: $peoplePicker-rowHeight;
}

&:hover {
Expand All @@ -229,15 +237,23 @@ $personaItemHeight: 42px;
}

&.ms-PeoplePicker-resultBtn--compact {
height: 32px;
height: 40px;
}
}

//== Modifier: Selectable Persona
//
.ms-PeoplePicker-resultBtn--selected {
background-color: $ms-color-themeLighter;
background-color: $ms-color-neutralQuaternaryAlt;
outline: 1px solid transparent;

&:hover {
background-color: $ms-color-neutralQuaternary;
}

.ms-PeoplePicker-resultAction:hover {
background-color: $ms-color-neutralTertiaryAlt
}
}

.ms-PeoplePicker-peopleListBtn {
Expand All @@ -260,9 +276,10 @@ $personaItemHeight: 42px;
top: 0;
width: 30px;
text-align: center;
padding: 0px;

@media (min-width: $ms-screen-md-min) {
height: 48px;
height: $peoplePicker-rowHeight;
}

.ms-Icon {
Expand All @@ -271,12 +288,12 @@ $personaItemHeight: 42px;
}

&:hover {
background-color: $ms-color-neutralTertiaryAlt;
background-color: $ms-color-neutralQuaternaryAlt;
outline: 1px solid transparent;
}

&:active {
background-color: $ms-color-themeTertiary;
background-color: $ms-color-neutralQuaternary;
}
}

Expand Down Expand Up @@ -313,7 +330,7 @@ $personaItemHeight: 42px;
width: 32px;
height: 32px;
top: 20px;
left: 20px;
@include left(20px);
display: none;

.ms-Spinner-circle {
Expand Down Expand Up @@ -352,32 +369,40 @@ $personaItemHeight: 42px;
width: 100%;
padding: 0;
margin: 0;
padding-left: 70px;
text-align: left;
@include padding-left(70px);
@include text-align(left);

&:hover {
background-color: $ms-color-neutralLight;
cursor: pointer;
background-color: $ms-color-neutralLight;
cursor: pointer;

.ms-PeoplePicker-searchMoreSecondary {
color: $ms-color-neutralDark;
}
}

// TODO: Works in Chrome, but not working in IE
&:focus,
&:active {
background-color: $ms-color-themeLight;
background-color: $ms-color-neutralQuaternaryAlt;

.ms-PeoplePicker-searchMoreSecondary {
color: $ms-color-black;
}
}
}

.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact {
height: 49px;
padding-left: 50px;
@include padding-left(50px);
}

// Default search icon
.ms-PeoplePicker-searchMoreIcon {
height: 70px;
position: absolute;
top: 0;
left: 0;
@include left(0);
width: 70px;

.ms-Icon {
Expand Down Expand Up @@ -437,11 +462,7 @@ $personaItemHeight: 42px;
}

.ms-PeoplePicker-resultAction {
height: 32px;

.ms-Icon {
margin-top: -8px;
}
height: 40px;
}

.ms-PeoplePicker-searchMore {
Expand All @@ -451,7 +472,7 @@ $personaItemHeight: 42px;
width: 28px;
height: 28px;
top: 12px;
left: 12px;
@include left(12px);
}

}
Expand Down Expand Up @@ -559,11 +580,11 @@ $personaItemHeight: 42px;
}

.ms-Persona-presence {
left: 19px;
@include left(19px);
}

.ms-Persona-details {
padding-left: 8px;
@include padding-left(8px);
}

.ms-Persona-primaryText {
Expand Down Expand Up @@ -611,30 +632,30 @@ $personaItemHeight: 42px;
.ms-PeoplePicker-searchMore,
.ms-PeoplePicker-searchMoreBtn,
.ms-PeoplePicker-searchMoreIcon {
height: 48px;
height: $peoplePicker-rowHeight;
}

.ms-PeoplePicker-searchMoreBtn {
padding-left: 48px;
@include padding-left($peoplePicker-rowHeight);
}

.ms-PeoplePicker-searchMoreIcon {
width: 48px;
width: $peoplePicker-rowHeight;
}

.ms-PeoplePicker-searchMorePrimary {
font-size: $ms-font-size-s;
line-height: 48px;
line-height: $peoplePicker-rowHeight;
}

.ms-PeoplePicker-searchMoreIcon .ms-Icon {
top: 0;
line-height: 48px;
line-height: $peoplePicker-rowHeight;
}

.ms-Spinner {
top: 16px;
left: 14px;
@include left(14px);
height: 20px;
width: 20px;
}
Expand Down