javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

large range hit area

Browse Source
This commit is contained in:
Adam Bradley
2013-10-17 12:53:00 -05:00
parent 72d37f9111
commit c567017e95
8 changed files with 123 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
dist/css/ionic-ios7.css vendored
View File

@ -1445,24 +1445,6 @@ input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { textarea::-webkit-input-placeholder {
color: #999999; } color: #999999; }
input[type="range"] {
display: block;
margin-top: 20px;
margin-bottom: 20px;
width: auto;
height: 4px;
outline: none;
border-radius: 4px;
background-color: #cccccc;
-webkit-appearance: none !important; }
input[type="range"]::-webkit-slider-thumb {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: white;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 6px rgba(0, 0, 0, 0.25);
-webkit-appearance: none !important; }
input[disabled], input[disabled],
select[disabled], select[disabled],
textarea[disabled], textarea[disabled],
@ -1553,6 +1535,34 @@ input[type="checkbox"][readonly] {
/* show the checkmark icon when its checked */ /* show the checkmark icon when its checked */
visibility: visible; } visibility: visible; }
input[type="range"] {
display: inline-block;
margin-top: 20px;
margin-bottom: 20px;
width: auto;
height: 4px;
outline: none;
border-radius: 4px;
background-color: #cccccc;
-webkit-appearance: none !important; }
input[type="range"]::-webkit-slider-thumb {
position: relative;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: white;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 6px rgba(0, 0, 0, 0.25);
cursor: pointer;
-webkit-appearance: none !important; }
input[type="range"]::-webkit-slider-thumb:after {
/* create a larger (but hidden) hit area */
position: absolute;
top: -10px;
left: -10px;
display: table;
padding: 20px;
content: ' '; }
.button { .button {
position: relative; position: relative;
display: inline-block; display: inline-block;

44
dist/css/ionic-scoped.css vendored
View File

@ -2088,23 +2088,6 @@
.ionic input::-webkit-input-placeholder, .ionic input::-webkit-input-placeholder,
.ionic textarea::-webkit-input-placeholder { .ionic textarea::-webkit-input-placeholder {
color: #999999; } color: #999999; }
.ionic input[type="range"] {
display: block;
margin-top: 20px;
margin-bottom: 20px;
width: auto;
height: 4px;
outline: none;
border-radius: 4px;
background-color: #cccccc;
-webkit-appearance: none !important; }
.ionic input[type="range"]::-webkit-slider-thumb {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: white;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 6px rgba(0, 0, 0, 0.25);
-webkit-appearance: none !important; }
.ionic input[disabled], .ionic input[disabled],
.ionic select[disabled], .ionic select[disabled],
.ionic textarea[disabled], .ionic textarea[disabled],
@ -2225,6 +2208,33 @@
.ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-icon { .ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-icon {
/* show the checkmark icon when its checked */ /* show the checkmark icon when its checked */
visibility: visible; } visibility: visible; }
.ionic input[type="range"] {
display: inline-block;
margin-top: 20px;
margin-bottom: 20px;
width: auto;
height: 4px;
outline: none;
border-radius: 4px;
background-color: #cccccc;
-webkit-appearance: none !important; }
.ionic input[type="range"]::-webkit-slider-thumb {
position: relative;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: white;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 6px rgba(0, 0, 0, 0.25);
cursor: pointer;
-webkit-appearance: none !important; }
.ionic input[type="range"]::-webkit-slider-thumb:after {
/* create a larger (but hidden) hit area */
position: absolute;
top: -10px;
left: -10px;
display: table;
padding: 20px;
content: ' '; }
.ionic .button { .ionic .button {
position: relative; position: relative;
display: inline-block; display: inline-block;

46
dist/css/ionic.css vendored
View File

@ -2554,24 +2554,6 @@ input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { textarea::-webkit-input-placeholder {
color: #999999; } color: #999999; }
input[type="range"] {
display: block;
margin-top: 20px;
margin-bottom: 20px;
width: auto;
height: 4px;
outline: none;
border-radius: 4px;
background-color: #cccccc;
-webkit-appearance: none !important; }
input[type="range"]::-webkit-slider-thumb {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: white;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 6px rgba(0, 0, 0, 0.25);
-webkit-appearance: none !important; }
input[disabled], input[disabled],
select[disabled], select[disabled],
textarea[disabled], textarea[disabled],
@ -2715,6 +2697,34 @@ input[type="checkbox"][readonly] {
/* show the checkmark icon when its checked */ /* show the checkmark icon when its checked */
visibility: visible; } visibility: visible; }
input[type="range"] {
display: inline-block;
margin-top: 20px;
margin-bottom: 20px;
width: auto;
height: 4px;
outline: none;
border-radius: 4px;
background-color: #cccccc;
-webkit-appearance: none !important; }
input[type="range"]::-webkit-slider-thumb {
position: relative;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: white;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 6px rgba(0, 0, 0, 0.25);
cursor: pointer;
-webkit-appearance: none !important; }
input[type="range"]::-webkit-slider-thumb:after {
/* create a larger (but hidden) hit area */
position: absolute;
top: -10px;
left: -10px;
display: table;
padding: 20px;
content: ' '; }
.button { .button {
position: relative; position: relative;
display: inline-block; display: inline-block;

1
scss/ionic-ios7/ionic-ios7.scss
View File

@ -22,6 +22,7 @@
"../ionic/form", "../ionic/form",
"toggle", "toggle",
"../ionic/radio", "../ionic/radio",
"../ionic/range",
// Buttons // Buttons
"../ionic/button", "../ionic/button",

24
scss/ionic/_form.scss
View File

@ -248,30 +248,6 @@ textarea {
} }
// Range
// -------------------------------
input[type="range"] {
display: block;
margin-top: 20px;
margin-bottom: 20px;
width: auto;
height: $range-track-height;
outline: none;
border-radius: $range-track-height;
background-color: $range-track-color;
-webkit-appearance: none !important;
&::-webkit-slider-thumb {
width: $range-slider-width;
height: $range-slider-height;
border-radius: $range-slider-border-radius;
background-color: $toggle-handle-off-bg-color;
box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
-webkit-appearance: none !important;
}
}
// DISABLED STATE // DISABLED STATE
// ------------------------------- // -------------------------------

37
scss/ionic/_range.scss Normal file
View File

@ -0,0 +1,37 @@
// Range
// -------------------------------
input[type="range"] {
display: inline-block;
margin-top: 20px;
margin-bottom: 20px;
width: auto;
height: $range-track-height;
outline: none;
border-radius: $range-track-height;
background-color: $range-track-color;
-webkit-appearance: none !important;
&::-webkit-slider-thumb {
position: relative;
width: $range-slider-width;
height: $range-slider-height;
border-radius: $range-slider-border-radius;
background-color: $toggle-handle-off-bg-color;
box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
cursor: pointer;
-webkit-appearance: none !important;
}
&::-webkit-slider-thumb:after {
/* create a larger (but hidden) hit area */
position: absolute;
top: -10px;
left: -10px;
display: table;
padding: 20px;
content: ' ';
}
}

1
scss/ionic/ionic-scoped.scss
View File

@ -29,6 +29,7 @@
"checkbox", "checkbox",
"toggle", "toggle",
"radio", "radio",
"range",
// Buttons // Buttons
"button", "button",

1
scss/ionic/ionic.scss
View File

@ -27,6 +27,7 @@
"checkbox", "checkbox",
"toggle", "toggle",
"radio", "radio",
"range",
// Buttons // Buttons
"button", "button",