Card by Li-Deheng
#e8e8e8
1.card-conteiner { 2 cursor: default; 3 --color-primary: #275efe; 4 --color-headline: #3f4656; 5 --color-text: #99a3ba; 6} 7 8.card-content { 9 width: 100%; 10 max-width: 312px; 11 padding: 36px 32px; 12 background: #fff; 13 border-radius: 10px; 14 box-shadow: 0 1px 4px rgba(18, 22, 33, .12); 15} 16 17.card-content .card-title { 18 font-family: inherit; 19 font-size: 32px; 20 font-weight: 700; 21 margin: 0 0 10px 0; 22 color: var(--color-headline); 23} 24 25.card-content .card-title span { 26 font-weight: 500; 27} 28 29.card-content .values div, .card-content .current-range div { 30 display: inline-block; 31 vertical-align: top; 32} 33 34.card-content .values { 35 margin: 0; 36 font-weight: 500; 37 color: var(--color-primary); 38} 39 40.card-content .values > div:first-child { 41 margin-right: 2px; 42} 43 44.card-content .values > div:last-child { 45 margin-left: 2px; 46} 47 48.card-content .current-range { 49 display: block; 50 color: var(--color-text); 51 margin-top: 8px; 52 font-size: 14px; 53} 54 55.card-content .slider { 56 display: flex; 57 justify-content: space-between; 58 margin-top: 20px; 59 font-size: .6em; 60 color: var(--color-text); 61} 62 63/* Range Slider */ 64.input-ranges[type='range'] { 65 width: 210px; 66 height: 30px; 67 overflow: hidden; 68 outline: none; 69} 70 71.input-ranges[type='range'], 72.input-ranges[type='range']::-webkit-slider-runnable-track, 73.input-ranges[type='range']::-webkit-slider-thumb { 74 -webkit-appearance: none; 75 background: none; 76} 77 78.input-ranges[type='range']::-webkit-slider-runnable-track { 79 width: 200px; 80 height: 1px; 81 background: var(--color-headline); 82} 83 84.input-ranges[type='range']:nth-child(2)::-webkit-slider-runnable-track { 85 background: none; 86} 87 88.input-ranges[type='range']::-webkit-slider-thumb { 89 position: relative; 90 height: 15px; 91 width: 15px; 92 margin-top: -7px; 93 background: #fff; 94 border: 1px solid var(--color-headline); 95 border-radius: 25px; 96 cursor: pointer; 97 z-index: 1; 98 transition: .5s; 99 -webkit-transition: .5s; 100 -moz-transition: .5s; 101 -ms-transition: .5s; 102 -o-transition: .5s; 103} 104 105.input-ranges[type='range']::-webkit-slider-thumb:hover { 106 background: #eaefff; 107 border: 1px solid var(--color-primary); 108 outline: .5px solid var(--color-primary); 109} 110 111.input-ranges[type='range']::-webkit-slider-thumb:active { 112 cursor: grabbing; 113} 114 115.input-ranges[type='range']:nth-child(1)::-webkit-slider-thumb { 116 z-index: 2; 117} 118 119.rangeslider { 120 font-family: sans-serif; 121 font-size: 14px; 122 position: relative; 123 height: 20px; 124 width: 210px; 125 display: inline-block; 126 margin-top: -5px; 127} 128 129.rangeslider input { 130 position: absolute; 131} 132 133.rangeslider span { 134 position: absolute; 135 margin-top: 20px; 136 left: 0; 137} 138 139.rangeslider .right { 140 position: relative; 141 float: right; 142 margin-right: -5px; 143}
2.8K views
2.8K views
MIT License