mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 06:57:02 +08:00
large range hit area
This commit is contained in:
Adam Bradley
46
dist/css/ionic-ios7.css
vendored
46
dist/css/ionic-ios7.css
vendored
@ -1445,24 +1445,6 @@ input::-webkit-input-placeholder,
|
||||
textarea::-webkit-input-placeholder {
|
||||
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],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
@ -1553,6 +1535,34 @@ input[type="checkbox"][readonly] {
|
||||
/* show the checkmark icon when its checked */
|
||||
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 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
44
dist/css/ionic-scoped.css
vendored
44
dist/css/ionic-scoped.css
vendored
@ -2088,23 +2088,6 @@
|
||||
.ionic input::-webkit-input-placeholder,
|
||||
.ionic textarea::-webkit-input-placeholder {
|
||||
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 select[disabled],
|
||||
.ionic textarea[disabled],
|
||||
@ -2225,6 +2208,33 @@
|
||||
.ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-icon {
|
||||
/* show the checkmark icon when its checked */
|
||||
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 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
46
dist/css/ionic.css
vendored
46
dist/css/ionic.css
vendored
@ -2554,24 +2554,6 @@ input::-webkit-input-placeholder,
|
||||
textarea::-webkit-input-placeholder {
|
||||
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],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
@ -2715,6 +2697,34 @@ input[type="checkbox"][readonly] {
|
||||
/* show the checkmark icon when its checked */
|
||||
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 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
"../ionic/form",
|
||||
"toggle",
|
||||
"../ionic/radio",
|
||||
"../ionic/range",
|
||||
|
||||
// Buttons
|
||||
"../ionic/button",
|
||||
|
||||
@ -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
|
||||
// -------------------------------
|
||||
|
||||
|
||||
37
scss/ionic/_range.scss
Normal file
37
scss/ionic/_range.scss
Normal 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: ' ';
|
||||
}
|
||||
|
||||
}
|
||||
@ -29,6 +29,7 @@
|
||||
"checkbox",
|
||||
"toggle",
|
||||
"radio",
|
||||
"range",
|
||||
|
||||
// Buttons
|
||||
"button",
|
||||
|
||||
@ -27,6 +27,7 @@
|
||||
"checkbox",
|
||||
"toggle",
|
||||
"radio",
|
||||
"range",
|
||||
|
||||
// Buttons
|
||||
"button",
|
||||
|
||||
Reference in New Issue
Block a user