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

range icons

Browse Source
This commit is contained in:
Adam Bradley
2013-11-19 14:28:40 -06:00
parent 1495f457bb
commit fd17576d0b
4 changed files with 83 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
dist/css/ionic.css vendored
View File

@@ -2503,7 +2503,8 @@ input[type="range"] {
outline: none;
border-radius: 4px;
background-color: #cccccc;
-webkit-appearance: none !important; }
-webkit-appearance: none !important;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, blue), color-stop(0, #cccccc)); }
input[type="range"]::-webkit-slider-thumb {
position: relative;
width: 20px;
@@ -2516,12 +2517,48 @@ input[type="range"] {
input[type="range"]::-webkit-slider-thumb:after {
/* create a larger (but hidden) hit area */
position: absolute;
top: -10px;
left: -10px;
display: table;
padding: 20px;
top: -15px;
left: -15px;
padding: 25px;
content: ' '; }
.range {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
padding: 4px;
max-width: 320px; }
.range .icon {
-webkit-box-flex: 0;
-webkit-flex: 0 1 24px;
-moz-box-flex: 0;
-moz-flex: 0 1 24px;
-ms-flex: 0 1 24px;
flex: 0 1 24px;
font-size: 24px;
min-width: 24px;
text-align: center; }
.range input {
-webkit-box-flex: 0;
-webkit-flex: 0 1 272px;
-moz-box-flex: 0;
-moz-flex: 0 1 272px;
-ms-flex: 0 1 272px;
flex: 0 1 272px;
margin-left: 10px;
margin-right: 10px;
width: 100%;
max-width: 320px; }
/**
* Buttons
* --------------------------------------------------