Skip to content

Commit 38153c5

Browse files
author
Adam Bradley
committed
range updates
1 parent 4374c89 commit 38153c5

File tree

4 files changed

+159
-49
lines changed

4 files changed

+159
-49
lines changed

‎dist/css/ionic.css‎

Lines changed: 121 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -934,8 +934,12 @@ a.subdued {
934934
.bar-light .button.button-clear {
935935
color: white;
936936
background: none;
937+
border-color: transparent;
937938
box-shadow: none;
938939
font-size: 18px; }
940+
.bar-light .button.button-icon {
941+
background: none;
942+
border-color: transparent; }
939943

940944
.bar-stable .button {
941945
color: #444444;
@@ -951,8 +955,12 @@ a.subdued {
951955
.bar-stable .button.button-clear {
952956
color: white;
953957
background: none;
958+
border-color: transparent;
954959
box-shadow: none;
955960
font-size: 18px; }
961+
.bar-stable .button.button-icon {
962+
background: none;
963+
border-color: transparent; }
956964

957965
.bar-positive .button {
958966
color: white;
@@ -968,8 +976,12 @@ a.subdued {
968976
.bar-positive .button.button-clear {
969977
color: white;
970978
background: none;
979+
border-color: transparent;
971980
box-shadow: none;
972981
font-size: 18px; }
982+
.bar-positive .button.button-icon {
983+
background: none;
984+
border-color: transparent; }
973985

974986
.bar-calm .button {
975987
color: white;
@@ -985,8 +997,12 @@ a.subdued {
985997
.bar-calm .button.button-clear {
986998
color: white;
987999
background: none;
1000+
border-color: transparent;
9881001
box-shadow: none;
9891002
font-size: 18px; }
1003+
.bar-calm .button.button-icon {
1004+
background: none;
1005+
border-color: transparent; }
9901006

9911007
.bar-assertive .button {
9921008
color: white;
@@ -1002,8 +1018,12 @@ a.subdued {
10021018
.bar-assertive .button.button-clear {
10031019
color: white;
10041020
background: none;
1021+
border-color: transparent;
10051022
box-shadow: none;
10061023
font-size: 18px; }
1024+
.bar-assertive .button.button-icon {
1025+
background: none;
1026+
border-color: transparent; }
10071027

10081028
.bar-balanced .button {
10091029
color: white;
@@ -1019,8 +1039,12 @@ a.subdued {
10191039
.bar-balanced .button.button-clear {
10201040
color: white;
10211041
background: none;
1042+
border-color: transparent;
10221043
box-shadow: none;
10231044
font-size: 18px; }
1045+
.bar-balanced .button.button-icon {
1046+
background: none;
1047+
border-color: transparent; }
10241048

10251049
.bar-energized .button {
10261050
color: white;
@@ -1036,8 +1060,12 @@ a.subdued {
10361060
.bar-energized .button.button-clear {
10371061
color: white;
10381062
background: none;
1063+
border-color: transparent;
10391064
box-shadow: none;
10401065
font-size: 18px; }
1066+
.bar-energized .button.button-icon {
1067+
background: none;
1068+
border-color: transparent; }
10411069

10421070
.bar-royal .button {
10431071
color: white;
@@ -1053,8 +1081,12 @@ a.subdued {
10531081
.bar-royal .button.button-clear {
10541082
color: white;
10551083
background: none;
1084+
border-color: transparent;
10561085
box-shadow: none;
10571086
font-size: 18px; }
1087+
.bar-royal .button.button-icon {
1088+
background: none;
1089+
border-color: transparent; }
10581090

10591091
.bar-dark .button {
10601092
color: white;
@@ -1070,8 +1102,12 @@ a.subdued {
10701102
.bar-dark .button.button-clear {
10711103
color: white;
10721104
background: none;
1105+
border-color: transparent;
10731106
box-shadow: none;
10741107
font-size: 18px; }
1108+
.bar-dark .button.button-icon {
1109+
background: none;
1110+
border-color: transparent; }
10751111

10761112
.bar-header {
10771113
top: 0;
@@ -2503,24 +2539,39 @@ input[type="checkbox"][readonly] {
25032539
* --------------------------------------------------
25042540
*/
25052541
input[type="range"] {
2506-
background-color: #cccccc;
25072542
display: inline-block;
2508-
margin-top: 20px;
2509-
margin-bottom: 20px;
2543+
overflow: hidden;
2544+
margin-top: 5px;
2545+
margin-bottom: 5px;
2546+
padding-right: 2px;
2547+
padding-left: 1px;
25102548
width: auto;
25112549
height: 4px;
2550+
height: 35px;
25122551
outline: none;
2513-
border-radius: 4px;
2552+
background: linear-gradient(to right, #cccccc 0%, #cccccc 100%);
2553+
background-position: center;
2554+
background-size: 96% 4px;
2555+
background-repeat: no-repeat;
25142556
-webkit-appearance: none !important; }
25152557
input[type="range"]::-webkit-slider-thumb {
25162558
position: relative;
25172559
width: 20px;
25182560
height: 20px;
25192561
border-radius: 10px;
25202562
background-color: white;
2521-
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 6px rgba(0, 0, 0, 0.25);
2563+
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 1px 3px 5px rgba(0, 0, 0, 0.25);
25222564
cursor: pointer;
25232565
-webkit-appearance: none !important; }
2566+
input[type="range"]::-webkit-slider-thumb:before {
2567+
/* what creates the colorful line on the left side of the slider */
2568+
position: absolute;
2569+
top: 8px;
2570+
left: -320px;
2571+
width: 320px;
2572+
height: 4px;
2573+
background: #444444;
2574+
content: ' '; }
25242575
input[type="range"]::-webkit-slider-thumb:after {
25252576
/* create a larger (but hidden) hit area */
25262577
position: absolute;
@@ -2541,24 +2592,24 @@ input[type="range"] {
25412592
-moz-align-items: center;
25422593
align-items: center;
25432594
padding: 2px 4px; }
2544-
.range.range-light input {
2545-
background-color: #dddddd; }
2546-
.range.range-stable input {
2547-
background-color: #b2b2b2; }
2548-
.range.range-positive input {
2549-
background-color: #4a87ee; }
2550-
.range.range-calm input {
2551-
background-color: #43cee6; }
2552-
.range.range-balanced input {
2553-
background-color: #66cc33; }
2554-
.range.range-assertive input {
2555-
background-color: #ef4e3a; }
2556-
.range.range-energized input {
2557-
background-color: #f0b840; }
2558-
.range.range-royal input {
2559-
background-color: #8a6de9; }
2560-
.range.range-dark input {
2561-
background-color: #444444; }
2595+
.range.range-light input::-webkit-slider-thumb:before {
2596+
background: #dddddd; }
2597+
.range.range-stable input::-webkit-slider-thumb:before {
2598+
background: #b2b2b2; }
2599+
.range.range-positive input::-webkit-slider-thumb:before {
2600+
background: #4a87ee; }
2601+
.range.range-calm input::-webkit-slider-thumb:before {
2602+
background: #43cee6; }
2603+
.range.range-balanced input::-webkit-slider-thumb:before {
2604+
background: #66cc33; }
2605+
.range.range-assertive input::-webkit-slider-thumb:before {
2606+
background: #ef4e3a; }
2607+
.range.range-energized input::-webkit-slider-thumb:before {
2608+
background: #f0b840; }
2609+
.range.range-royal input::-webkit-slider-thumb:before {
2610+
background: #8a6de9; }
2611+
.range.range-dark input::-webkit-slider-thumb:before {
2612+
background: #444444; }
25622613

25632614
.range .icon {
25642615
-webkit-box-flex: 0;
@@ -2568,9 +2619,9 @@ input[type="range"] {
25682619
-ms-flex: 0 1 24px;
25692620
flex: 0 1 24px;
25702621
display: block;
2571-
font-size: 24px;
25722622
min-width: 24px;
2573-
text-align: center; }
2623+
text-align: center;
2624+
font-size: 24px; }
25742625

25752626
.range input {
25762627
-webkit-box-flex: 0;
@@ -2580,10 +2631,10 @@ input[type="range"] {
25802631
-ms-flex: 0 1 272px;
25812632
flex: 0 1 272px;
25822633
display: block;
2583-
margin-left: 10px;
25842634
margin-right: 10px;
2585-
width: 100%;
2586-
max-width: 320px; }
2635+
margin-left: 10px;
2636+
max-width: 320px;
2637+
width: 100%; }
25872638

25882639
/**
25892640
* Buttons
@@ -2638,7 +2689,11 @@ input[type="range"] {
26382689
.button.button-light.button-clear {
26392690
color: #dddddd;
26402691
background: none;
2692+
border-color: transparent;
26412693
box-shadow: none; }
2694+
.button.button-light.button-icon {
2695+
background: none;
2696+
border-color: transparent; }
26422697
.button.button-light.button-outline {
26432698
background: transparent;
26442699
border-color: #dddddd;
@@ -2661,7 +2716,11 @@ input[type="range"] {
26612716
.button.button-stable.button-clear {
26622717
color: #b2b2b2;
26632718
background: none;
2719+
border-color: transparent;
26642720
box-shadow: none; }
2721+
.button.button-stable.button-icon {
2722+
background: none;
2723+
border-color: transparent; }
26652724
.button.button-stable.button-outline {
26662725
background: transparent;
26672726
border-color: #b2b2b2;
@@ -2684,7 +2743,11 @@ input[type="range"] {
26842743
.button.button-positive.button-clear {
26852744
color: #4a87ee;
26862745
background: none;
2746+
border-color: transparent;
26872747
box-shadow: none; }
2748+
.button.button-positive.button-icon {
2749+
background: none;
2750+
border-color: transparent; }
26882751
.button.button-positive.button-outline {
26892752
background: transparent;
26902753
border-color: #4a87ee;
@@ -2707,7 +2770,11 @@ input[type="range"] {
27072770
.button.button-calm.button-clear {
27082771
color: #43cee6;
27092772
background: none;
2773+
border-color: transparent;
27102774
box-shadow: none; }
2775+
.button.button-calm.button-icon {
2776+
background: none;
2777+
border-color: transparent; }
27112778
.button.button-calm.button-outline {
27122779
background: transparent;
27132780
border-color: #43cee6;
@@ -2730,7 +2797,11 @@ input[type="range"] {
27302797
.button.button-assertive.button-clear {
27312798
color: #ef4e3a;
27322799
background: none;
2800+
border-color: transparent;
27332801
box-shadow: none; }
2802+
.button.button-assertive.button-icon {
2803+
background: none;
2804+
border-color: transparent; }
27342805
.button.button-assertive.button-outline {
27352806
background: transparent;
27362807
border-color: #ef4e3a;
@@ -2753,7 +2824,11 @@ input[type="range"] {
27532824
.button.button-balanced.button-clear {
27542825
color: #66cc33;
27552826
background: none;
2827+
border-color: transparent;
27562828
box-shadow: none; }
2829+
.button.button-balanced.button-icon {
2830+
background: none;
2831+
border-color: transparent; }
27572832
.button.button-balanced.button-outline {
27582833
background: transparent;
27592834
border-color: #66cc33;
@@ -2776,7 +2851,11 @@ input[type="range"] {
27762851
.button.button-energized.button-clear {
27772852
color: #f0b840;
27782853
background: none;
2854+
border-color: transparent;
27792855
box-shadow: none; }
2856+
.button.button-energized.button-icon {
2857+
background: none;
2858+
border-color: transparent; }
27802859
.button.button-energized.button-outline {
27812860
background: transparent;
27822861
border-color: #f0b840;
@@ -2799,7 +2878,11 @@ input[type="range"] {
27992878
.button.button-royal.button-clear {
28002879
color: #8a6de9;
28012880
background: none;
2881+
border-color: transparent;
28022882
box-shadow: none; }
2883+
.button.button-royal.button-icon {
2884+
background: none;
2885+
border-color: transparent; }
28032886
.button.button-royal.button-outline {
28042887
background: transparent;
28052888
border-color: #8a6de9;
@@ -2822,7 +2905,11 @@ input[type="range"] {
28222905
.button.button-dark.button-clear {
28232906
color: #444444;
28242907
background: none;
2908+
border-color: transparent;
28252909
box-shadow: none; }
2910+
.button.button-dark.button-icon {
2911+
background: none;
2912+
border-color: transparent; }
28262913
.button.button-dark.button-outline {
28272914
background: transparent;
28282915
border-color: #444444;
@@ -2857,7 +2944,7 @@ input[type="range"] {
28572944
padding: 0 6px;
28582945
min-width: initial;
28592946
background: none;
2860-
border: none;
2947+
border-color: transparent;
28612948
background: none; }
28622949
.button-icon.button:active, .button-icon.button.active {
28632950
background: none;
@@ -2871,13 +2958,17 @@ input[type="range"] {
28712958
transition: opacity 0.1s;
28722959
padding: 0 6px;
28732960
max-height: 42px;
2874-
border: none;
2961+
border-color: transparent;
28752962
background: none;
28762963
box-shadow: none; }
28772964
.button-clear.button-clear {
28782965
color: #b2b2b2;
28792966
background: none;
2967+
border-color: transparent;
28802968
box-shadow: none; }
2969+
.button-clear.button-icon {
2970+
background: none;
2971+
border-color: transparent; }
28812972
.button-clear:active, .button-clear.active {
28822973
opacity: 0.3; }
28832974

‎scss/_mixins.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,9 @@
109109
// --------------------------------------------------
110110

111111
@mixin range-style($track-bg-color) {
112-
background-color: $track-bg-color;
112+
&::-webkit-slider-thumb:before {
113+
background: $track-bg-color;
114+
}
113115
}
114116

115117

0 commit comments

Comments
 (0)