mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
range colours
This commit is contained in:
Adam Bradley
19
dist/css/ionic.css
vendored
19
dist/css/ionic.css
vendored
@@ -2507,6 +2507,7 @@ input[type="checkbox"][readonly] {
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
input[type="range"] {
|
||||
background-color: #cccccc;
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
@@ -2515,8 +2516,6 @@ input[type="range"] {
|
||||
outline: none;
|
||||
border-radius: 4px;
|
||||
-webkit-appearance: none !important; }
|
||||
input[type="range"] input {
|
||||
background-color: #cccccc; }
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
@@ -2548,6 +2547,22 @@ input[type="range"] {
|
||||
padding: 2px 4px; }
|
||||
.range.range-light input {
|
||||
background-color: #dddddd; }
|
||||
.range.range-stable input {
|
||||
background-color: #b2b2b2; }
|
||||
.range.range-positive input {
|
||||
background-color: #4a87ee; }
|
||||
.range.range-calm input {
|
||||
background-color: #43cee6; }
|
||||
.range.range-balanced input {
|
||||
background-color: #66cc33; }
|
||||
.range.range-assertive input {
|
||||
background-color: #ef4e3a; }
|
||||
.range.range-energized input {
|
||||
background-color: #f0b840; }
|
||||
.range.range-royal input {
|
||||
background-color: #8a6de9; }
|
||||
.range.range-dark input {
|
||||
background-color: #444444; }
|
||||
|
||||
.range .icon {
|
||||
-webkit-box-flex: 0;
|
||||
|
||||
@@ -100,6 +100,14 @@
|
||||
}
|
||||
|
||||
|
||||
// Range Mixins
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin range-style($track-bg-color) {
|
||||
background-color: $track-bg-color;
|
||||
}
|
||||
|
||||
|
||||
// Utility Mixins
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
*/
|
||||
|
||||
input[type="range"] {
|
||||
@include range-style($range-default-track-bg);
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
@@ -12,17 +13,8 @@ input[type="range"] {
|
||||
height: $range-track-height;
|
||||
outline: none;
|
||||
border-radius: $range-track-height;
|
||||
background-color: $range-track-color;
|
||||
-webkit-appearance: none !important;
|
||||
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
right top,
|
||||
color-stop(0.0, blue),
|
||||
color-stop(0.0, $range-track-color)
|
||||
);
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
position: relative;
|
||||
width: $range-slider-width;
|
||||
@@ -42,13 +34,41 @@ input[type="range"] {
|
||||
padding: 25px;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.range {
|
||||
@include display-flex();
|
||||
@include align-items(center);
|
||||
padding: 2px 4px;
|
||||
|
||||
&.range-light {
|
||||
input { @include range-style($range-light-track-bg); }
|
||||
}
|
||||
&.range-stable {
|
||||
input { @include range-style($range-stable-track-bg); }
|
||||
}
|
||||
&.range-positive {
|
||||
input { @include range-style($range-positive-track-bg); }
|
||||
}
|
||||
&.range-calm {
|
||||
input { @include range-style($range-calm-track-bg); }
|
||||
}
|
||||
&.range-balanced {
|
||||
input { @include range-style($range-balanced-track-bg); }
|
||||
}
|
||||
&.range-assertive {
|
||||
input { @include range-style($range-assertive-track-bg); }
|
||||
}
|
||||
&.range-energized {
|
||||
input { @include range-style($range-energized-track-bg); }
|
||||
}
|
||||
&.range-royal {
|
||||
input { @include range-style($range-royal-track-bg); }
|
||||
}
|
||||
&.range-dark {
|
||||
input { @include range-style($range-dark-track-bg); }
|
||||
}
|
||||
}
|
||||
|
||||
.range .icon {
|
||||
|
||||
@@ -442,13 +442,23 @@ $checkbox-check-color: #fff;
|
||||
// Range
|
||||
// -------------------------------
|
||||
|
||||
$range-track-height: 4px;
|
||||
$range-track-color: #ccc;
|
||||
$range-slider-width: 20px;
|
||||
$range-slider-height: 20px;
|
||||
$range-slider-border-radius: 10px;
|
||||
$range-icon-size: 24px;
|
||||
$range-max-width: 320px;
|
||||
$range-track-height: 4px !default;
|
||||
$range-slider-width: 20px !default;
|
||||
$range-slider-height: 20px !default;
|
||||
$range-slider-border-radius: 10px !default;
|
||||
$range-icon-size: 24px !default;
|
||||
$range-max-width: 320px !default;
|
||||
|
||||
$range-light-track-bg: $button-light-border !default;
|
||||
$range-stable-track-bg: $button-stable-border !default;
|
||||
$range-positive-track-bg: $button-positive-bg !default;
|
||||
$range-calm-track-bg: $button-calm-bg !default;
|
||||
$range-balanced-track-bg: $button-balanced-bg !default;
|
||||
$range-assertive-track-bg: $button-assertive-bg !default;
|
||||
$range-energized-track-bg: $button-energized-bg !default;
|
||||
$range-royal-track-bg: $button-royal-bg !default;
|
||||
$range-dark-track-bg: $button-dark-bg !default;
|
||||
$range-default-track-bg: #ccc !default;
|
||||
|
||||
|
||||
// Menus
|
||||
|
||||
@@ -13,34 +13,77 @@
|
||||
<h1 class="title">Input: Range</h1>
|
||||
</header>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<main class="content has-header padding">
|
||||
|
||||
<p>
|
||||
Level of Awesomeness:
|
||||
<input type="range" name="awesomeness" min="0" max="10" value="10">
|
||||
</p>
|
||||
<main class="content has-header padding overflow-scroll">
|
||||
|
||||
<p>
|
||||
Level of Awesomeness:
|
||||
<input type="range" name="awesomeness" min="0" max="10" value="10">
|
||||
</p>
|
||||
|
||||
<div class="range">
|
||||
<div class="range">
|
||||
<i class="icon ion-volume-low"></i>
|
||||
<input type="range" name="awesomeness" min="0" max="10" value="10">
|
||||
<i class="icon ion-volume-high"></i>
|
||||
</div>
|
||||
|
||||
<div class="list card">
|
||||
<div class="item range">
|
||||
<i class="icon ion-volume-low"></i>
|
||||
<input type="range" name="awesomeness" min="0" max="10" value="10">
|
||||
<i class="icon ion-volume-high"></i>
|
||||
</div>
|
||||
|
||||
<div class="list card">
|
||||
<div class="item range">
|
||||
<i class="icon ion-volume-low"></i>
|
||||
<input type="range" name="awesomeness" min="0" max="10" value="10">
|
||||
<i class="icon ion-volume-high"></i>
|
||||
</div>
|
||||
<div class="item range range-light">
|
||||
<i class="icon ion-volume-low"></i>
|
||||
<input type="range" name="awesomeness" min="0" max="10" value="10">
|
||||
<i class="icon ion-volume-high"></i>
|
||||
</div>
|
||||
|
||||
<div class="padding">
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
<div class="item range range-stable">
|
||||
<i class="icon ion-volume-low"></i>
|
||||
<input type="range" name="awesomeness" min="0" max="10" value="10">
|
||||
<i class="icon ion-volume-high"></i>
|
||||
</div>
|
||||
<div class="item range range-positive">
|
||||
<i class="icon ion-volume-low"></i>
|
||||
<input type="range" name="awesomeness" min="0" max="10" value="10">
|
||||
<i class="icon ion-volume-high"></i>
|
||||
</div>
|
||||
<div class="item range range-calm">
|
||||
<i class="icon ion-volume-low"></i>
|
||||
<input type="range" name="awesomeness" min="0" max="10" value="10">
|
||||
<i class="icon ion-volume-high"></i>
|
||||
</div>
|
||||
<div class="item range range-balanced">
|
||||
<i class="icon ion-volume-low"></i>
|
||||
<input type="range" name="awesomeness" min="0" max="10" value="10">
|
||||
<i class="icon ion-volume-high"></i>
|
||||
</div>
|
||||
<div class="item range range-assertive">
|
||||
<i class="icon ion-volume-low"></i>
|
||||
<input type="range" name="awesomeness" min="0" max="10" value="10">
|
||||
<i class="icon ion-volume-high"></i>
|
||||
</div>
|
||||
<div class="item range range-energized">
|
||||
<i class="icon ion-volume-low"></i>
|
||||
<input type="range" name="awesomeness" min="0" max="10" value="10">
|
||||
<i class="icon ion-volume-high"></i>
|
||||
</div>
|
||||
<div class="item range range-royal">
|
||||
<i class="icon ion-volume-low"></i>
|
||||
<input type="range" name="awesomeness" min="0" max="10" value="10">
|
||||
<i class="icon ion-volume-high"></i>
|
||||
</div>
|
||||
<div class="item range range-dark">
|
||||
<i class="icon ion-volume-low"></i>
|
||||
<input type="range" name="awesomeness" min="0" max="10" value="10">
|
||||
<i class="icon ion-volume-high"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
<div class="padding">
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user