Last active
September 13, 2015 12:30
-
-
Save kichMan/de302c3fbcef98d88349 to your computer and use it in GitHub Desktop.
@desc Элемент линейки с ценой деления (только на HTML+CSS)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Стилизация линейки | |
* @author //github.com/kichman | |
* @example //jsfiddle.net/kichMan/9qLqy1ae/embedded/result/ | |
*/ | |
.ui_ruler { | |
position: relative; | |
box-sizing: border-box; | |
margin: 20px auto 0; | |
height: 40px; | |
font-size: 0; | |
text-align: center; | |
} | |
.ui_ruler .ui_ruler_point { | |
position: relative; | |
display: inline-block; | |
width: 40px; | |
height: inherit; | |
text-align: center; | |
} | |
.ui_ruler .ui_ruler_point:before { | |
content: ''; | |
position: absolute; | |
display: block; | |
height: 50%; | |
margin-top: -50%; | |
top: 0; | |
left: 0; | |
right: 0; | |
background-repeat: repeat-x, no-repeat; | |
background-size: 11% 50%, 100% 100%; | |
background-image: linear-gradient(90deg, #f1c972 0%, #f1c972 22.52252252%, transparent 22.52252252%, transparent 100%), linear-gradient(90deg, transparent 0%, transparent 50%, #f1c972 50%, #f1c972 52.5%, transparent 52.5%, transparent 100%); | |
} | |
.ui_ruler .ui_ruler_point:first-of-type:before { | |
clip: rect(auto, auto, auto, 20px); | |
} | |
.ui_ruler .ui_ruler_point:last-of-type:before { | |
clip: rect(auto, 21px, auto, 0); | |
} | |
/* | |
* Стилизация поинтеров | |
*/ | |
.ui_ruler label { | |
position: relative; | |
box-sizing: border-box; | |
font-size: 14px; | |
display: inline-block; | |
width: 30px; | |
text-align: center; | |
line-height: 30px; | |
border-radius: 50%; | |
cursor: pointer; | |
background-color: transparent; | |
margin-top: 5px; | |
} | |
.ui_ruler label input { | |
position: absolute; | |
height: .1px; | |
width: .1px; | |
visibility: hidden; | |
opacity: 1; | |
z-index: -1; | |
} | |
.ui_ruler label div { | |
position: relative; | |
z-index: 1; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
} | |
.ui_ruler label div:before { | |
position: absolute; | |
content: ''; | |
display: block; | |
border-radius: 50%; | |
background-color: #f1c972; | |
height: 2px; | |
width: 2px; | |
top: 50%; | |
left: 50%; | |
margin-top: -1px; | |
margin-left: -1px; | |
transition: transform 180ms; | |
opacity: 0; | |
z-index: 0; | |
} | |
.ui_ruler label div span { | |
position: relative; | |
} | |
.ui_ruler label:hover, | |
.ui_ruler label:active { | |
background-color: rgba(241, 201, 114, 0.25); | |
} | |
.ui_ruler label input:checked + div { | |
color: #fff; | |
} | |
.ui_ruler label input:checked + div:before { | |
opacity: 1; | |
transform: scale(15, 15); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="ui_ruler"> | |
<div class="ui_ruler_point"> | |
<label> | |
<input name="test_rule" type="radio" value="1"> | |
<div><span>1</span></div> | |
</label> | |
</div> | |
<div class="ui_ruler_point"> | |
<label> | |
<input name="test_rule" type="radio" value="2"> | |
<div><span>2</span></div> | |
</label> | |
</div> | |
<div class="ui_ruler_point"> | |
<label> | |
<input name="test_rule" type="radio" value="3" checked> | |
<div><span>3</span></div> | |
</label> | |
</div> | |
<div class="ui_ruler_point"> | |
<label> | |
<input name="test_rule" type="radio" value="4"> | |
<div><span>4</span></div> | |
</label> | |
</div> | |
<div class="ui_ruler_point"> | |
<label> | |
<input name="test_rule" type="radio" value="5"> | |
<div><span>5</span></div> | |
</label> | |
</div> | |
<div class="ui_ruler_point"> | |
<label> | |
<input name="test_rule" type="radio" value="6"> | |
<div><span>6</span></div> | |
</label> | |
</div> | |
<div class="ui_ruler_point"> | |
<label> | |
<input name="test_rule" type="radio" value="7"> | |
<div><span>7</span></div> | |
</label> | |
</div> | |
<div class="ui_ruler_point"> | |
<label> | |
<input name="test_rule" type="radio" value="8"> | |
<div><span>8</span></div> | |
</label> | |
</div> | |
<div class="ui_ruler_point"> | |
<label> | |
<input name="test_rule" type="radio" value="9"> | |
<div><span>9</span></div> | |
</label> | |
</div> | |
<div class="ui_ruler_point"> | |
<label> | |
<input name="test_rule" type="radio" value="10"> | |
<div><span>10</span></div> | |
</label> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Исходник стилей для создания подходящей линейки | |
* @author //github.com/kichman | |
* @example //jsfiddle.net/kichMan/9qLqy1ae/embedded/result/ | |
*/ | |
.ui_ruler { | |
@size: 40px; | |
@width_line: 1px; | |
position: relative; | |
box-sizing: border-box; | |
margin: 20px auto 0; | |
height: @size; | |
font-size: 0; | |
text-align: center; | |
.ui_ruler_point { | |
position: relative; | |
display: inline-block; | |
width: @size; | |
height: inherit; | |
text-align: center; | |
&:before { | |
@line1: percentage(@width_line/ (@size * .111)); | |
@line2: 50 + percentage(@width_line/@size); | |
content: ''; | |
position: absolute; | |
display: block; | |
height: 50%; | |
margin-top: -50%; | |
top: 0; left: 0; right: 0; | |
background-repeat: repeat-x, no-repeat; | |
background-size: 11% 50%, 100% 100%; | |
background-image: | |
linear-gradient(90deg, #f1c972 0%, #f1c972 @line1, transparent @line1, transparent 100%), | |
linear-gradient(90deg, | |
transparent 0%, | |
transparent 50%, | |
#f1c972 50%, | |
#f1c972 @line2, | |
transparent @line2, | |
transparent 100%); | |
} | |
&:first-of-type:before { clip: rect(auto, auto, auto, @size/2); } | |
&:last-of-type:before { clip: rect(auto, @size/2 + @width_line, auto, 0); } | |
} | |
} | |
.ui_ruler label{ | |
position: relative; | |
box-sizing: border-box; | |
font-size: 14px; | |
display: inline-block; | |
width: 30px; | |
text-align: center; | |
line-height: 30px; | |
border-radius: 50%; | |
cursor: pointer; | |
background-color: transparent; | |
margin-top: 5px; | |
input { | |
position: absolute; | |
height: .1px; | |
width: .1px; | |
visibility: hidden; | |
opacity: 1; | |
z-index: -1; | |
} | |
div { | |
position: relative; | |
z-index: 1; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
&:before { | |
position: absolute; | |
content: ''; | |
display: block; | |
border-radius: 50%; | |
background-color: #f1c972; | |
height: 2px; | |
width: 2px; | |
top: 50%; | |
left: 50%; | |
margin-top: -1px; | |
margin-left: -1px; | |
transition: transform 180ms; | |
opacity: 0; | |
z-index: 0; | |
} | |
span { position: relative; } | |
} | |
&:hover, &:active { background-color: rgba(241, 201, 114, .25); } | |
input:checked + div { | |
color: #fff; | |
&:before{ | |
opacity: 1; | |
transform: scale(15,15); | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment