Skip to content

Commit

Permalink
fix(select): prevent ion-item text from overlapping select input. Closes
Browse files Browse the repository at this point in the history 
 #1735
  • Loading branch information
@perrygovier
perrygovier committed Jul 8, 2014
1 parent 7388418 commit a56e647
Show file tree
Hide file tree
Showing 2 changed files with 190 additions and 2 deletions.
80 changes: 79 additions & 1 deletion scss/_select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
max-width: 65%;

border: none;
background: transparent;
background: $item-default-bg;
color: #333;

// hack to hide default dropdown arrow in FF
Expand Down Expand Up @@ -53,6 +53,84 @@
content: "";
pointer-events: none;
}
&.item-light {
select{
background:$item-light-bg;
color:$item-light-text;
}
}
&.item-stable {
select{
background:$item-stable-bg;
color:$item-stable-text;
}
&:after, .input-label{
color:darken($item-stable-border,30%);
}
}
&.item-positive {
select{
background:$item-positive-bg;
color:$item-positive-text;
}
&:after, .input-label{
color:$item-positive-text;
}
}
&.item-calm {
select{
background:$item-calm-bg;
color:$item-calm-text;
}
&:after, .input-label{
color:$item-calm-text;
}
}
&.item-assertive {
select{
background:$item-assertive-bg;
color:$item-assertive-text;
}
&:after, .input-label{
color:$item-assertive-text;
}
}
&.item-balanced {
select{
background:$item-balanced-bg;
color:$item-balanced-text;
}
&:after, .input-label{
color:$item-balanced-text;
}
}
&.item-energized {
select{
background:$item-energized-bg;
color:$item-energized-text;
}
&:after, .input-label{
color:$item-energized-text;
}
}
&.item-royal {
select{
background:$item-royal-bg;
color:$item-royal-text;
}
&:after, .input-label{
color:$item-royal-text;
}
}
&.item-dark {
select{
background:$item-dark-bg;
color:$item-dark-text;
}
&:after, .input-label{
color:$item-dark-text;
}
}
}

select {
Expand Down
112 changes: 111 additions & 1 deletion test/css/input-select.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,117 @@ <h1 class="title">Input: Select</h1>
<option>Yavin</option>
</select>
</div>

<div class="item item-input item-select">
<div class="input-label">
Jedi - For over a thousand generations, the Jedi Knights were the guardians of peace and justice in the Old Republic.
</div>
<select>
<option>Yoda</option>
<option>Obi-Wan Kenobi</option>
<option>Qui-Gon Jinn</option>
<option>Mace Windu</option>
<option>Luke Skywalker</option>
</select>
</div>
<div class="item item-input item-select item-light">
<div class="input-label">
Sith - Those who have twisted the force to their malevolent purposes
</div>
<select>
<option>Emperor Palpatine</option>
<option>Darth Vader</option>
<option>Count Dooku</option>
<option>Darth Maul</option>
</select>
</div>
<div class="item item-input item-select item-stable">
<div class="input-label">
Sith - Those who have twisted the force to their malevolent purposes
</div>
<select>
<option>Emperor Palpatine</option>
<option>Darth Vader</option>
<option>Count Dooku</option>
<option>Darth Maul</option>
</select>
</div>
<div class="item item-input item-select item-positive">
<div class="input-label">
Sith - Those who have twisted the force to their malevolent purposes
</div>
<select>
<option>Emperor Palpatine</option>
<option>Darth Vader</option>
<option>Count Dooku</option>
<option>Darth Maul</option>
</select>
</div>
<div class="item item-input item-select item-calm">
<div class="input-label">
Sith - Those who have twisted the force to their malevolent purposes
</div>
<select>
<option>Emperor Palpatine</option>
<option>Darth Vader</option>
<option>Count Dooku</option>
<option>Darth Maul</option>
</select>
</div>
<div class="item item-input item-select item-assertive">
<div class="input-label">
Sith - Those who have twisted the force to their malevolent purposes
</div>
<select>
<option>Emperor Palpatine</option>
<option>Darth Vader</option>
<option>Count Dooku</option>
<option>Darth Maul</option>
</select>
</div>
<div class="item item-input item-select item-balanced">
<div class="input-label">
Sith - Those who have twisted the force to their malevolent purposes
</div>
<select>
<option>Emperor Palpatine</option>
<option>Darth Vader</option>
<option>Count Dooku</option>
<option>Darth Maul</option>
</select>
</div>
<div class="item item-input item-select item-energized">
<div class="input-label">
Sith - Those who have twisted the force to their malevolent purposes
</div>
<select>
<option>Emperor Palpatine</option>
<option>Darth Vader</option>
<option>Count Dooku</option>
<option>Darth Maul</option>
</select>
</div>
<div class="item item-input item-select item-royal">
<div class="input-label">
Sith - Those who have twisted the force to their malevolent purposes
</div>
<select>
<option>Emperor Palpatine</option>
<option>Darth Vader</option>
<option>Count Dooku</option>
<option>Darth Maul</option>
</select>
</div>
<div class="item item-input item-select item-dark">
<div class="input-label">
Sith - Those who have twisted the force to their malevolent purposes
</div>
<select>
<option>Emperor Palpatine</option>
<option>Darth Vader</option>
<option>Count Dooku</option>
<option>Darth Maul</option>
</select>
</div>
</div>

</main>
Expand Down

0 comments on commit a56e647

Please sign in to comment.