new ui with AdminLTE
This commit is contained in:
@ -0,0 +1,6 @@
|
||||
root = true
|
||||
|
||||
[*.{js,css,less,html}]
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
charset = utf-8
|
||||
@ -0,0 +1,675 @@
|
||||
/**
|
||||
Ion.RangeSlider, 2.3.0
|
||||
© Denis Ineshin, 2010 - 2018, IonDen.com
|
||||
Build date: 2018-12-11 23:23:51
|
||||
*/
|
||||
.irs {
|
||||
position: relative;
|
||||
display: block;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
font-size: 12px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.irs-line {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
outline: none !important;
|
||||
}
|
||||
.irs-bar {
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 0;
|
||||
width: 0;
|
||||
}
|
||||
.irs-shadow {
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 0;
|
||||
width: 0;
|
||||
}
|
||||
.irs-handle {
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
cursor: default;
|
||||
z-index: 1;
|
||||
}
|
||||
.irs-handle.type_last {
|
||||
z-index: 2;
|
||||
}
|
||||
.irs-min,
|
||||
.irs-max {
|
||||
position: absolute;
|
||||
display: block;
|
||||
cursor: default;
|
||||
}
|
||||
.irs-min {
|
||||
left: 0;
|
||||
}
|
||||
.irs-max {
|
||||
right: 0;
|
||||
}
|
||||
.irs-from,
|
||||
.irs-to,
|
||||
.irs-single {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: default;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.irs-grid {
|
||||
position: absolute;
|
||||
display: none;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
}
|
||||
.irs-with-grid .irs-grid {
|
||||
display: block;
|
||||
}
|
||||
.irs-grid-pol {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
height: 8px;
|
||||
background: #000;
|
||||
}
|
||||
.irs-grid-pol.small {
|
||||
height: 4px;
|
||||
}
|
||||
.irs-grid-text {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: 9px;
|
||||
line-height: 9px;
|
||||
padding: 0 3px;
|
||||
color: #000;
|
||||
}
|
||||
.irs-disable-mask {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: -1%;
|
||||
width: 102%;
|
||||
height: 100%;
|
||||
cursor: default;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
z-index: 2;
|
||||
}
|
||||
.lt-ie9 .irs-disable-mask {
|
||||
background: #000;
|
||||
filter: alpha(opacity=0);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.irs-disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.irs-hidden-input {
|
||||
position: absolute !important;
|
||||
display: block !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
font-size: 0 !important;
|
||||
line-height: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden;
|
||||
outline: none !important;
|
||||
z-index: -9999 !important;
|
||||
background: none !important;
|
||||
border-style: solid !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
.irs--flat {
|
||||
height: 40px;
|
||||
}
|
||||
.irs--flat.irs-with-grid {
|
||||
height: 60px;
|
||||
}
|
||||
.irs--flat .irs-line {
|
||||
top: 25px;
|
||||
height: 12px;
|
||||
background-color: #e1e4e9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.irs--flat .irs-bar {
|
||||
top: 25px;
|
||||
height: 12px;
|
||||
background-color: #ed5565;
|
||||
}
|
||||
.irs--flat .irs-bar--single {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.irs--flat .irs-shadow {
|
||||
height: 1px;
|
||||
bottom: 16px;
|
||||
background-color: #e1e4e9;
|
||||
}
|
||||
.irs--flat .irs-handle {
|
||||
top: 22px;
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background-color: transparent;
|
||||
}
|
||||
.irs--flat .irs-handle > i:first-child {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
margin-left: -1px;
|
||||
background-color: #da4453;
|
||||
}
|
||||
.irs--flat .irs-handle.state_hover > i:first-child,
|
||||
.irs--flat .irs-handle:hover > i:first-child {
|
||||
background-color: #a43540;
|
||||
}
|
||||
.irs--flat .irs-min,
|
||||
.irs--flat .irs-max {
|
||||
top: 0;
|
||||
padding: 1px 3px;
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
background-color: #e1e4e9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.irs--flat .irs-from,
|
||||
.irs--flat .irs-to,
|
||||
.irs--flat .irs-single {
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
background-color: #ed5565;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.irs--flat .irs-from:before,
|
||||
.irs--flat .irs-to:before,
|
||||
.irs--flat .irs-single:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #ed5565;
|
||||
}
|
||||
.irs--flat .irs-grid-pol {
|
||||
background-color: #e1e4e9;
|
||||
}
|
||||
.irs--flat .irs-grid-text {
|
||||
color: #999;
|
||||
}
|
||||
.irs--big {
|
||||
height: 55px;
|
||||
}
|
||||
.irs--big.irs-with-grid {
|
||||
height: 70px;
|
||||
}
|
||||
.irs--big .irs-line {
|
||||
top: 33px;
|
||||
height: 12px;
|
||||
background-color: white;
|
||||
background: linear-gradient(to bottom, #ddd -50%, white 150%);
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.irs--big .irs-bar {
|
||||
top: 33px;
|
||||
height: 12px;
|
||||
background-color: #92bce0;
|
||||
border: 1px solid #428bca;
|
||||
background: linear-gradient(to bottom, #ffffff 0%, #428bca 30%, #b9d4ec 100%);
|
||||
box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.irs--big .irs-bar--single {
|
||||
border-radius: 12px 0 0 12px;
|
||||
}
|
||||
.irs--big .irs-shadow {
|
||||
height: 1px;
|
||||
bottom: 16px;
|
||||
background-color: rgba(66, 139, 202, 0.5);
|
||||
}
|
||||
.irs--big .irs-handle {
|
||||
top: 25px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
background-color: #cbcfd5;
|
||||
background: linear-gradient(to bottom, white 0%, #B4B9BE 30%, white 100%);
|
||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px 1px white;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.irs--big .irs-handle.state_hover,
|
||||
.irs--big .irs-handle:hover {
|
||||
border-color: rgba(0, 0, 0, 0.45);
|
||||
background-color: #939ba7;
|
||||
background: linear-gradient(to bottom, white 0%, #919BA5 30%, white 100%);
|
||||
}
|
||||
.irs--big .irs-min,
|
||||
.irs--big .irs-max {
|
||||
top: 0;
|
||||
padding: 1px 5px;
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
background-color: #9f9f9f;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.irs--big .irs-from,
|
||||
.irs--big .irs-to,
|
||||
.irs--big .irs-single {
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
background-color: #428bca;
|
||||
background: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.irs--big .irs-grid-pol {
|
||||
background-color: #428bca;
|
||||
}
|
||||
.irs--big .irs-grid-text {
|
||||
color: #428bca;
|
||||
}
|
||||
.irs--modern {
|
||||
height: 55px;
|
||||
}
|
||||
.irs--modern.irs-with-grid {
|
||||
height: 55px;
|
||||
}
|
||||
.irs--modern .irs-line {
|
||||
top: 25px;
|
||||
height: 5px;
|
||||
background-color: #d1d6e0;
|
||||
background: linear-gradient(to bottom, #e0e4ea 0%, #d1d6e0 100%);
|
||||
border: 1px solid #a3adc1;
|
||||
border-bottom-width: 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.irs--modern .irs-bar {
|
||||
top: 25px;
|
||||
height: 5px;
|
||||
background: #20b426;
|
||||
background: linear-gradient(to bottom, #20b426 0%, #18891d 100%);
|
||||
}
|
||||
.irs--modern .irs-bar--single {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
.irs--modern .irs-shadow {
|
||||
height: 1px;
|
||||
bottom: 21px;
|
||||
background-color: rgba(209, 214, 224, 0.5);
|
||||
}
|
||||
.irs--modern .irs-handle {
|
||||
top: 37px;
|
||||
width: 12px;
|
||||
height: 13px;
|
||||
border: 1px solid #a3adc1;
|
||||
border-top-width: 0;
|
||||
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
.irs--modern .irs-handle > i:nth-child(1) {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: -4px;
|
||||
left: 1px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: 1px solid #a3adc1;
|
||||
background: white;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.irs--modern .irs-handle > i:nth-child(2) {
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 10px;
|
||||
height: 12px;
|
||||
background: #e9e6e6;
|
||||
background: linear-gradient(to bottom, white 0%, #e9e6e6 100%);
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
.irs--modern .irs-handle > i:nth-child(3) {
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 4px;
|
||||
height: 5px;
|
||||
border-left: 1px solid #a3adc1;
|
||||
border-right: 1px solid #a3adc1;
|
||||
}
|
||||
.irs--modern .irs-handle.state_hover,
|
||||
.irs--modern .irs-handle:hover {
|
||||
border-color: #7685a2;
|
||||
background: #c3c7cd;
|
||||
background: linear-gradient(to bottom, #ffffff 0%, #919ba5 30%, #ffffff 100%);
|
||||
}
|
||||
.irs--modern .irs-handle.state_hover > i:nth-child(1),
|
||||
.irs--modern .irs-handle:hover > i:nth-child(1) {
|
||||
border-color: #7685a2;
|
||||
}
|
||||
.irs--modern .irs-handle.state_hover > i:nth-child(3),
|
||||
.irs--modern .irs-handle:hover > i:nth-child(3) {
|
||||
border-color: #48536a;
|
||||
}
|
||||
.irs--modern .irs-min,
|
||||
.irs--modern .irs-max {
|
||||
top: 0;
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
color: white;
|
||||
background-color: #d1d6e0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.irs--modern .irs-from,
|
||||
.irs--modern .irs-to,
|
||||
.irs--modern .irs-single {
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
background-color: #20b426;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.irs--modern .irs-from:before,
|
||||
.irs--modern .irs-to:before,
|
||||
.irs--modern .irs-single:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #20b426;
|
||||
}
|
||||
.irs--modern .irs-grid {
|
||||
height: 25px;
|
||||
}
|
||||
.irs--modern .irs-grid-pol {
|
||||
background-color: #dedede;
|
||||
}
|
||||
.irs--modern .irs-grid-text {
|
||||
color: silver;
|
||||
font-size: 13px;
|
||||
}
|
||||
.irs--sharp {
|
||||
height: 50px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
.irs--sharp.irs-with-grid {
|
||||
height: 57px;
|
||||
}
|
||||
.irs--sharp .irs-line {
|
||||
top: 30px;
|
||||
height: 2px;
|
||||
background-color: black;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.irs--sharp .irs-bar {
|
||||
top: 30px;
|
||||
height: 2px;
|
||||
background-color: #ee22fa;
|
||||
}
|
||||
.irs--sharp .irs-bar--single {
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.irs--sharp .irs-shadow {
|
||||
height: 1px;
|
||||
bottom: 21px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.irs--sharp .irs-handle {
|
||||
top: 25px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #a804b2;
|
||||
}
|
||||
.irs--sharp .irs-handle > i:first-child {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 5px solid transparent;
|
||||
border-top-color: #a804b2;
|
||||
}
|
||||
.irs--sharp .irs-handle.state_hover,
|
||||
.irs--sharp .irs-handle:hover {
|
||||
background-color: black;
|
||||
}
|
||||
.irs--sharp .irs-handle.state_hover > i:first-child,
|
||||
.irs--sharp .irs-handle:hover > i:first-child {
|
||||
border-top-color: black;
|
||||
}
|
||||
.irs--sharp .irs-min,
|
||||
.irs--sharp .irs-max {
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
top: 0;
|
||||
padding: 3px 4px;
|
||||
opacity: 0.4;
|
||||
background-color: #a804b2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.irs--sharp .irs-from,
|
||||
.irs--sharp .irs-to,
|
||||
.irs--sharp .irs-single {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
text-shadow: none;
|
||||
padding: 3px 4px;
|
||||
background-color: #a804b2;
|
||||
color: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.irs--sharp .irs-from:before,
|
||||
.irs--sharp .irs-to:before,
|
||||
.irs--sharp .irs-single:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #a804b2;
|
||||
}
|
||||
.irs--sharp .irs-grid {
|
||||
height: 25px;
|
||||
}
|
||||
.irs--sharp .irs-grid-pol {
|
||||
background-color: #dedede;
|
||||
}
|
||||
.irs--sharp .irs-grid-text {
|
||||
color: silver;
|
||||
font-size: 13px;
|
||||
}
|
||||
.irs--round {
|
||||
height: 50px;
|
||||
}
|
||||
.irs--round.irs-with-grid {
|
||||
height: 65px;
|
||||
}
|
||||
.irs--round .irs-line {
|
||||
top: 36px;
|
||||
height: 4px;
|
||||
background-color: #dee4ec;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.irs--round .irs-bar {
|
||||
top: 36px;
|
||||
height: 4px;
|
||||
background-color: #006cfa;
|
||||
}
|
||||
.irs--round .irs-bar--single {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.irs--round .irs-shadow {
|
||||
height: 4px;
|
||||
bottom: 21px;
|
||||
background-color: rgba(222, 228, 236, 0.5);
|
||||
}
|
||||
.irs--round .irs-handle {
|
||||
top: 26px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 4px solid #006cfa;
|
||||
background-color: white;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
|
||||
}
|
||||
.irs--round .irs-handle.state_hover,
|
||||
.irs--round .irs-handle:hover {
|
||||
background-color: #f0f6ff;
|
||||
}
|
||||
.irs--round .irs-min,
|
||||
.irs--round .irs-max {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
top: 0;
|
||||
padding: 3px 5px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.irs--round .irs-from,
|
||||
.irs--round .irs-to,
|
||||
.irs--round .irs-single {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
text-shadow: none;
|
||||
padding: 3px 5px;
|
||||
background-color: #006cfa;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.irs--round .irs-from:before,
|
||||
.irs--round .irs-to:before,
|
||||
.irs--round .irs-single:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #006cfa;
|
||||
}
|
||||
.irs--round .irs-grid {
|
||||
height: 25px;
|
||||
}
|
||||
.irs--round .irs-grid-pol {
|
||||
background-color: #dedede;
|
||||
}
|
||||
.irs--round .irs-grid-text {
|
||||
color: silver;
|
||||
font-size: 13px;
|
||||
}
|
||||
.irs--square {
|
||||
height: 50px;
|
||||
}
|
||||
.irs--square.irs-with-grid {
|
||||
height: 60px;
|
||||
}
|
||||
.irs--square .irs-line {
|
||||
top: 31px;
|
||||
height: 4px;
|
||||
background-color: #dedede;
|
||||
}
|
||||
.irs--square .irs-bar {
|
||||
top: 31px;
|
||||
height: 4px;
|
||||
background-color: black;
|
||||
}
|
||||
.irs--square .irs-shadow {
|
||||
height: 2px;
|
||||
bottom: 21px;
|
||||
background-color: #dedede;
|
||||
}
|
||||
.irs--square .irs-handle {
|
||||
top: 25px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 3px solid black;
|
||||
background-color: white;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.irs--square .irs-handle.state_hover,
|
||||
.irs--square .irs-handle:hover {
|
||||
background-color: #f0f6ff;
|
||||
}
|
||||
.irs--square .irs-min,
|
||||
.irs--square .irs-max {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
top: 0;
|
||||
padding: 3px 5px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.irs--square .irs-from,
|
||||
.irs--square .irs-to,
|
||||
.irs--square .irs-single {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
text-shadow: none;
|
||||
padding: 3px 5px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
.irs--square .irs-grid {
|
||||
height: 25px;
|
||||
}
|
||||
.irs--square .irs-grid-pol {
|
||||
background-color: #dedede;
|
||||
}
|
||||
.irs--square .irs-grid-text {
|
||||
color: silver;
|
||||
font-size: 11px;
|
||||
}
|
||||
1
resources/wwwroot/lib/AdminLTE/plugins/ion-rangeslider/css/ion.rangeSlider.min.css
vendored
Normal file
1
resources/wwwroot/lib/AdminLTE/plugins/ion-rangeslider/css/ion.rangeSlider.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
2
resources/wwwroot/lib/AdminLTE/plugins/ion-rangeslider/js/ion.rangeSlider.min.js
vendored
Normal file
2
resources/wwwroot/lib/AdminLTE/plugins/ion-rangeslider/js/ion.rangeSlider.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,145 @@
|
||||
@import (reference) "_mixins";
|
||||
|
||||
.irs {
|
||||
.pos-r();
|
||||
-webkit-touch-callout: none;
|
||||
.no-click();
|
||||
font-size: 12px;
|
||||
font-family: Arial, sans-serif;
|
||||
|
||||
&-line {
|
||||
.pos-r();
|
||||
overflow: hidden;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
&-bar {
|
||||
.pos-a();
|
||||
left: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&-shadow {
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&-handle {
|
||||
.pos-a();
|
||||
box-sizing: border-box;
|
||||
cursor: default;
|
||||
z-index: 1;
|
||||
|
||||
&.single,
|
||||
&.from,
|
||||
&.to {}
|
||||
|
||||
&.type_last {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&-min,
|
||||
&-max {
|
||||
.pos-a();
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&-min {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&-max {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&-from,
|
||||
&-to,
|
||||
&-single {
|
||||
.pos-a();
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: default;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&-grid {
|
||||
position: absolute;
|
||||
display: none;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
|
||||
.irs-with-grid & {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-pol {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
height: 8px;
|
||||
background: #000;
|
||||
|
||||
&.small {
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: 9px;
|
||||
line-height: 9px;
|
||||
padding: 0 3px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
&-disable-mask {
|
||||
.pos-a();
|
||||
top: 0;
|
||||
left: -1%;
|
||||
width: 102%;
|
||||
height: 100%;
|
||||
cursor: default;
|
||||
background: rgba(0,0,0,0.0);
|
||||
z-index: 2;
|
||||
|
||||
.lt-ie9 & {
|
||||
background: #000;
|
||||
filter: alpha(opacity=0);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&-hidden-input {
|
||||
position: absolute !important;
|
||||
display: block !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
font-size: 0 !important;
|
||||
line-height: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden;
|
||||
outline: none !important;
|
||||
z-index: -9999 !important;
|
||||
background: none !important;
|
||||
border-style: solid !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
.no-click () {
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pos-r () {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pos-a () {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
// Base styles
|
||||
@import "_base";
|
||||
|
||||
// Skins styles
|
||||
@import "skins/flat";
|
||||
@import "skins/big";
|
||||
@import "skins/modern";
|
||||
@import "skins/sharp";
|
||||
@import "skins/round";
|
||||
@import "skins/square";
|
||||
@ -0,0 +1,109 @@
|
||||
.irs--big {
|
||||
@name: irs;
|
||||
|
||||
@top: 33px;
|
||||
@bottom: 16px;
|
||||
@line_height: 12px;
|
||||
@handle_width: 30px;
|
||||
@handle_height: 30px;
|
||||
@custom_radius: 3px;
|
||||
|
||||
@line_color_1: white;
|
||||
@line_color_2: #ccc;
|
||||
@line_color_3: #ddd;
|
||||
@bar_color: #428bca;
|
||||
@handle_color_1: #cbcfd5;
|
||||
@handle_color_2: #B4B9BE;
|
||||
@handle_color_3: white;
|
||||
@handle_color_4: #919BA5;
|
||||
@minmax_text_color: white;
|
||||
@minmax_bg_color: #9f9f9f;
|
||||
@label_color_1: #428bca;
|
||||
@label_color_2: white;
|
||||
@grid_color_1: #428bca;
|
||||
|
||||
|
||||
|
||||
height: 55px;
|
||||
|
||||
&.irs-with-grid {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.@{name}-line {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @line_color_1;
|
||||
background: linear-gradient(to bottom, @line_color_3 -50%, @line_color_1 150%);
|
||||
border: 1px solid @line_color_2;
|
||||
border-radius: @line_height;
|
||||
}
|
||||
|
||||
.@{name}-bar {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: lighten(@bar_color, 20%);
|
||||
border: 1px solid @bar_color;
|
||||
background: linear-gradient(to bottom, lighten(@bar_color, 70%) 0%, @bar_color 30%, lighten(@bar_color, 30%) 100%);
|
||||
box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.5);
|
||||
|
||||
&--single {
|
||||
border-radius: @line_height 0 0 @line_height;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-shadow {
|
||||
height: 1px;
|
||||
bottom: @bottom;
|
||||
background-color: fade(@bar_color, 50%);
|
||||
}
|
||||
|
||||
.@{name}-handle {
|
||||
top: 25px;
|
||||
width: @handle_width;
|
||||
height: @handle_height;
|
||||
border: 1px solid rgba(0,0,0,0.3);
|
||||
background-color: @handle_color_1;
|
||||
background: linear-gradient(to bottom, @handle_color_3 0%, @handle_color_2 30%, @handle_color_3 100%);
|
||||
box-shadow: 1px 1px 2px rgba(0,0,0,0.2), inset 0 0 3px 1px @handle_color_3;
|
||||
border-radius: @handle_width;
|
||||
|
||||
&.state_hover,
|
||||
&:hover {
|
||||
border-color: rgba(0,0,0,0.45);
|
||||
background-color: darken(@handle_color_1, 20%);
|
||||
background: linear-gradient(to bottom, @handle_color_3 0%, @handle_color_4 30%, @handle_color_3 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-min,
|
||||
.@{name}-max {
|
||||
top: 0;
|
||||
padding: 1px 5px;
|
||||
color: @minmax_text_color;
|
||||
text-shadow: none;
|
||||
background-color: @minmax_bg_color;
|
||||
border-radius: @custom_radius;
|
||||
}
|
||||
|
||||
.@{name}-from,
|
||||
.@{name}-to,
|
||||
.@{name}-single {
|
||||
color: @label_color_2;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
background-color: @label_color_1;
|
||||
background: linear-gradient(to bottom, @label_color_1 0%, darken(@label_color_1, 10%) 100%);
|
||||
border-radius: @custom_radius;
|
||||
}
|
||||
|
||||
.@{name}-grid {
|
||||
&-pol {
|
||||
background-color: @grid_color_1;
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: @grid_color_1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,125 @@
|
||||
.irs--flat {
|
||||
@name: irs;
|
||||
|
||||
@top: 25px;
|
||||
@bottom: 16px;
|
||||
@line_height: 12px;
|
||||
@handle_width: 16px;
|
||||
@handle_height: 18px;
|
||||
@custom_radius: 4px;
|
||||
|
||||
@line_color: #e1e4e9;
|
||||
@bar_color: #ed5565;
|
||||
@handle_color_1: #da4453;
|
||||
@handle_color_2: #a43540;
|
||||
@minmax_text_color: #999;
|
||||
@minmax_bg_color: #e1e4e9;
|
||||
@label_color_1: #ed5565;
|
||||
@label_color_2: white;
|
||||
@grid_color_1: #e1e4e9;
|
||||
@grid_color_2: #999;
|
||||
|
||||
|
||||
|
||||
height: 40px;
|
||||
|
||||
&.irs-with-grid {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.@{name}-line {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @line_color;
|
||||
border-radius: @custom_radius;
|
||||
}
|
||||
|
||||
.@{name}-bar {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @bar_color;
|
||||
|
||||
&--single {
|
||||
border-radius: @custom_radius 0 0 @custom_radius;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-shadow {
|
||||
height: 1px;
|
||||
bottom: @bottom;
|
||||
background-color: @line_color;
|
||||
}
|
||||
|
||||
.@{name}-handle {
|
||||
top: 22px;
|
||||
width: @handle_width;
|
||||
height: @handle_height;
|
||||
background-color: transparent;
|
||||
|
||||
& > i:first-child {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
margin-left: -1px;
|
||||
background-color: @handle_color_1;
|
||||
}
|
||||
|
||||
&.state_hover,
|
||||
&:hover {
|
||||
& > i:first-child {
|
||||
background-color: @handle_color_2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-min,
|
||||
.@{name}-max {
|
||||
top: 0;
|
||||
padding: 1px 3px;
|
||||
color: @minmax_text_color;
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
background-color: @minmax_bg_color;
|
||||
border-radius: @custom_radius;
|
||||
}
|
||||
|
||||
.@{name}-from,
|
||||
.@{name}-to,
|
||||
.@{name}-single {
|
||||
color: @label_color_2;
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
background-color: @label_color_1;
|
||||
border-radius: @custom_radius;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: @label_color_1;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-grid {
|
||||
&-pol {
|
||||
background-color: @grid_color_1;
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: @grid_color_2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,165 @@
|
||||
.irs--modern {
|
||||
@name: irs;
|
||||
|
||||
@top: 25px;
|
||||
@bottom: 21px;
|
||||
@line_height: 5px;
|
||||
@handle_width: 12px;
|
||||
@handle_height: 13px;
|
||||
|
||||
@line_color: #d1d6e0;
|
||||
@bar_color: #20b426;
|
||||
@handle_color_1: #e9e6e6;
|
||||
@handle_color_2: white;
|
||||
@handle_color_3: black;
|
||||
@minmax_text_color: white;
|
||||
@minmax_bg_color: #d1d6e0;
|
||||
@label_color_1: #20b426;
|
||||
@label_color_2: white;
|
||||
@grid_color_1: #dedede;
|
||||
@grid_color_2: silver;
|
||||
|
||||
|
||||
|
||||
height: 55px;
|
||||
|
||||
&.irs-with-grid {
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.@{name}-line {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @line_color;
|
||||
background: linear-gradient(to bottom, lighten(@line_color, 5%) 0%, @line_color 100%);
|
||||
border: 1px solid darken(@line_color, 15%);
|
||||
border-bottom-width: 0;
|
||||
border-radius: @line_height;
|
||||
}
|
||||
|
||||
.@{name}-bar {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background: @bar_color;
|
||||
background: linear-gradient(to bottom, @bar_color 0%, darken(@bar_color, 10%) 100%);
|
||||
|
||||
&--single {
|
||||
border-radius: @line_height 0 0 @line_height;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-shadow {
|
||||
height: 1px;
|
||||
bottom: @bottom;
|
||||
background-color: fade(@line_color, 50%);
|
||||
}
|
||||
|
||||
.@{name}-handle {
|
||||
top: 37px;
|
||||
width: @handle_width;
|
||||
height: @handle_height;
|
||||
border: 1px solid darken(@line_color, 15%);
|
||||
border-top-width: 0;
|
||||
box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
|
||||
border-radius: 0 0 3px 3px;
|
||||
|
||||
& > i:nth-child(1) {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: -4px; left: 1px;
|
||||
width: (@handle_width - 6px);
|
||||
height: (@handle_width - 6px);
|
||||
border: 1px solid darken(@line_color, 15%);
|
||||
background: @handle_color_2;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
& > i:nth-child(2) {
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
top: 0; left: 0;
|
||||
width: (@handle_width - 2);
|
||||
height: (@handle_height - 1);
|
||||
background: @handle_color_1;
|
||||
background: linear-gradient(to bottom, @handle_color_2 0%, @handle_color_1 100%);
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
||||
& > i:nth-child(3) {
|
||||
position: absolute;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
top: 3px; left: 3px;
|
||||
width: 4px; height: 5px;
|
||||
border-left: 1px solid darken(@line_color, 15%);
|
||||
border-right: 1px solid darken(@line_color, 15%);
|
||||
}
|
||||
|
||||
&.state_hover,
|
||||
&:hover {
|
||||
border-color: darken(@line_color, 30%);
|
||||
background: #c3c7cd;
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(145,155,165,1) 30%,rgba(255,255,255,1) 100%);
|
||||
|
||||
& > i:nth-child(1) {
|
||||
border-color: darken(@line_color, 30%);
|
||||
}
|
||||
|
||||
& > i:nth-child(3) {
|
||||
border-color: darken(@line_color, 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-min,
|
||||
.@{name}-max {
|
||||
top: 0;
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
color: @minmax_text_color;
|
||||
background-color: @minmax_bg_color;
|
||||
border-radius: @line_height;
|
||||
}
|
||||
|
||||
.@{name}-from,
|
||||
.@{name}-to,
|
||||
.@{name}-single {
|
||||
font-size: 10px;
|
||||
line-height: 1.333;
|
||||
text-shadow: none;
|
||||
padding: 1px 5px;
|
||||
background-color: @label_color_1;
|
||||
color: @label_color_2;
|
||||
border-radius: @line_height;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: @label_color_1;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-grid {
|
||||
height: 25px;
|
||||
|
||||
&-pol {
|
||||
background-color: @grid_color_1;
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: @grid_color_2;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,120 @@
|
||||
// Skin design by Veaceslav Grimalschi
|
||||
// https://github.com/grimalschi
|
||||
|
||||
.irs--round {
|
||||
@name: irs;
|
||||
|
||||
@top: 36px;
|
||||
@bottom: 21px;
|
||||
@line_height: 4px;
|
||||
@handle_width: 24px;
|
||||
@handle_height: 24px;
|
||||
|
||||
@line_color: #dee4ec;
|
||||
@bar_color: #006cfa;
|
||||
@handle_color_1: #006cfa;
|
||||
@handle_color_2: white;
|
||||
@handle_color_3: #f0f6ff;
|
||||
@minmax_text_color: #333;
|
||||
@minmax_bg_color: rgba(0,0,0,0.1);
|
||||
@label_color_1: #006cfa;
|
||||
@label_color_2: white;
|
||||
@grid_color_1: #dedede;
|
||||
@grid_color_2: silver;
|
||||
|
||||
|
||||
|
||||
height: 50px;
|
||||
|
||||
&.irs-with-grid {
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.@{name}-line {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @line_color;
|
||||
border-radius: @line_height;
|
||||
}
|
||||
|
||||
.@{name}-bar {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @bar_color;
|
||||
|
||||
&--single {
|
||||
border-radius: @line_height 0 0 @line_height;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-shadow {
|
||||
height: 4px;
|
||||
bottom: @bottom;
|
||||
background-color: fade(@line_color, 50%);
|
||||
}
|
||||
|
||||
.@{name}-handle {
|
||||
top: 26px;
|
||||
width: @handle_width;
|
||||
height: @handle_height;
|
||||
border: 4px solid @handle_color_1;
|
||||
background-color: @handle_color_2;
|
||||
border-radius: @handle_width;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
|
||||
|
||||
&.state_hover,
|
||||
&:hover {
|
||||
background-color: @handle_color_3;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-min,
|
||||
.@{name}-max {
|
||||
color: @minmax_text_color;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
top: 0;
|
||||
padding: 3px 5px;
|
||||
background-color: @minmax_bg_color;
|
||||
border-radius: @line_height;
|
||||
}
|
||||
|
||||
.@{name}-from,
|
||||
.@{name}-to,
|
||||
.@{name}-single {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
text-shadow: none;
|
||||
padding: 3px 5px;
|
||||
background-color: @label_color_1;
|
||||
color: @label_color_2;
|
||||
border-radius: @line_height;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: @label_color_1;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-grid {
|
||||
height: 25px;
|
||||
|
||||
&-pol {
|
||||
background-color: @grid_color_1;
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: @grid_color_2;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,132 @@
|
||||
.irs--sharp {
|
||||
@name: irs;
|
||||
|
||||
@top: 30px;
|
||||
@bottom: 21px;
|
||||
@line_height: 2px;
|
||||
@handle_width: 10px;
|
||||
@handle_height: 10px;
|
||||
|
||||
@line_color: black;
|
||||
@bar_color: #ee22fa;
|
||||
@handle_color_1: darken(#ee22fa, 20%);
|
||||
@handle_color_2: white;
|
||||
@handle_color_3: black;
|
||||
@minmax_text_color: white;
|
||||
@minmax_bg_color: darken(#ee22fa, 20%);
|
||||
@label_color_1: darken(#ee22fa, 20%);
|
||||
@label_color_2: white;
|
||||
@grid_color_1: #dedede;
|
||||
@grid_color_2: silver;
|
||||
|
||||
|
||||
|
||||
height: 50px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
|
||||
&.irs-with-grid {
|
||||
height: 57px;
|
||||
}
|
||||
|
||||
.@{name}-line {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @line_color;
|
||||
border-radius: @line_height;
|
||||
}
|
||||
|
||||
.@{name}-bar {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @bar_color;
|
||||
|
||||
&--single {
|
||||
border-radius: @line_height 0 0 @line_height;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-shadow {
|
||||
height: 1px;
|
||||
bottom: @bottom;
|
||||
background-color: fade(@line_color, 50%);
|
||||
}
|
||||
|
||||
.@{name}-handle {
|
||||
top: (@top - 5px);
|
||||
width: @handle_width;
|
||||
height: @handle_height;
|
||||
background-color: @handle_color_1;
|
||||
|
||||
& > i:first-child {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 5px solid transparent;
|
||||
border-top-color: @handle_color_1;
|
||||
}
|
||||
|
||||
&.state_hover,
|
||||
&:hover {
|
||||
background-color: @handle_color_3;
|
||||
|
||||
& > i:first-child {
|
||||
border-top-color: @handle_color_3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-min,
|
||||
.@{name}-max {
|
||||
color: @minmax_text_color;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
top: 0;
|
||||
padding: 3px 4px;
|
||||
opacity: 0.4;
|
||||
background-color: @minmax_bg_color;
|
||||
border-radius: @line_height;
|
||||
}
|
||||
|
||||
.@{name}-from,
|
||||
.@{name}-to,
|
||||
.@{name}-single {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
text-shadow: none;
|
||||
padding: 3px 4px;
|
||||
background-color: @label_color_1;
|
||||
color: @label_color_2;
|
||||
border-radius: @line_height;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -3px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: @label_color_1;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-grid {
|
||||
height: 25px;
|
||||
|
||||
&-pol {
|
||||
background-color: @grid_color_1;
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: @grid_color_2;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,100 @@
|
||||
// Skin design by Veaceslav Grimalschi
|
||||
// https://github.com/grimalschi
|
||||
|
||||
.irs--square {
|
||||
@name: irs;
|
||||
|
||||
@top: 31px;
|
||||
@bottom: 21px;
|
||||
@line_height: 4px;
|
||||
@handle_width: 16px;
|
||||
@handle_height: 16px;
|
||||
|
||||
@line_color: #dedede;
|
||||
@bar_color: black;
|
||||
@handle_color_1: black;
|
||||
@handle_color_2: white;
|
||||
@handle_color_3: #f0f6ff;
|
||||
@minmax_text_color: #333;
|
||||
@minmax_bg_color: rgba(0,0,0,0.1);
|
||||
@label_color_1: black;
|
||||
@label_color_2: white;
|
||||
@grid_color_1: #dedede;
|
||||
@grid_color_2: silver;
|
||||
|
||||
|
||||
|
||||
height: 50px;
|
||||
|
||||
&.irs-with-grid {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.@{name}-line {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @line_color;
|
||||
}
|
||||
|
||||
.@{name}-bar {
|
||||
top: @top;
|
||||
height: @line_height;
|
||||
background-color: @bar_color;
|
||||
}
|
||||
|
||||
.@{name}-shadow {
|
||||
height: 2px;
|
||||
bottom: @bottom;
|
||||
background-color: @line_color;
|
||||
}
|
||||
|
||||
.@{name}-handle {
|
||||
top: (@top - 6px);
|
||||
width: @handle_width;
|
||||
height: @handle_height;
|
||||
border: 3px solid @handle_color_1;
|
||||
background-color: @handle_color_2;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
|
||||
&.state_hover,
|
||||
&:hover {
|
||||
background-color: @handle_color_3;
|
||||
}
|
||||
}
|
||||
|
||||
.@{name}-min,
|
||||
.@{name}-max {
|
||||
color: @minmax_text_color;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
top: 0;
|
||||
padding: 3px 5px;
|
||||
background-color: @minmax_bg_color;
|
||||
}
|
||||
|
||||
.@{name}-from,
|
||||
.@{name}-to,
|
||||
.@{name}-single {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
text-shadow: none;
|
||||
padding: 3px 5px;
|
||||
background-color: @label_color_1;
|
||||
color: @label_color_2;
|
||||
}
|
||||
|
||||
.@{name}-grid {
|
||||
height: 25px;
|
||||
|
||||
&-pol {
|
||||
background-color: @grid_color_1;
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: @grid_color_2;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user