javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(select): prevent ion-item text from overlapping select input. Closes #1735

Browse Source
This commit is contained in:
Perry Govier
2014-07-08 11:06:46 -05:00
parent 7388418661
commit a56e647ba2
2 changed files with 190 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
scss/_select.scss
View File

@@ -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
@@ -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 {

112
test/css/input-select.html
View File

@@ -81,7 +81,117 @@
<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>