diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css index 311bb6d7b8..ae90ff896e 100644 --- a/dist/css/ionic-ios7.css +++ b/dist/css/ionic-ios7.css @@ -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; diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css index 7e68fc5961..4247f29e6e 100644 --- a/dist/css/ionic-scoped.css +++ b/dist/css/ionic-scoped.css @@ -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; diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 601d4f8e15..c691ab5849 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -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; diff --git a/scss/ionic-ios7/ionic-ios7.scss b/scss/ionic-ios7/ionic-ios7.scss index 8a417deb6e..51df0467f3 100644 --- a/scss/ionic-ios7/ionic-ios7.scss +++ b/scss/ionic-ios7/ionic-ios7.scss @@ -22,6 +22,7 @@ "../ionic/form", "toggle", "../ionic/radio", + "../ionic/range", // Buttons "../ionic/button", diff --git a/scss/ionic/_form.scss b/scss/ionic/_form.scss index 99f072e246..712ee3c84e 100644 --- a/scss/ionic/_form.scss +++ b/scss/ionic/_form.scss @@ -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 // ------------------------------- diff --git a/scss/ionic/_range.scss b/scss/ionic/_range.scss new file mode 100644 index 0000000000..0b2a8c4726 --- /dev/null +++ b/scss/ionic/_range.scss @@ -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: ' '; + } + +} \ No newline at end of file diff --git a/scss/ionic/ionic-scoped.scss b/scss/ionic/ionic-scoped.scss index db7533fd38..8920db24f2 100644 --- a/scss/ionic/ionic-scoped.scss +++ b/scss/ionic/ionic-scoped.scss @@ -29,6 +29,7 @@ "checkbox", "toggle", "radio", + "range", // Buttons "button", diff --git a/scss/ionic/ionic.scss b/scss/ionic/ionic.scss index ccb9fdd7b3..6199bf72df 100644 --- a/scss/ionic/ionic.scss +++ b/scss/ionic/ionic.scss @@ -27,6 +27,7 @@ "checkbox", "toggle", "radio", + "range", // Buttons "button",