Business/NewsPen
2
0
Fork 0
Code Issues 4 Pull Requests Releases Wiki Activity

Add theming to range sliders

Browse Source
This commit is contained in:
Skylar Ittner 2018-02-16 12:21:15 -07:00
parent 748c72726a
commit ed8dd1e205
3 changed files with 95 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
pages.php
View File

@ -37,6 +37,7 @@ define("PAGES", [
"icon" => "fas fa-edit",
"styles" => [
"static/css/summernote-lite.css",
"static/css/range.css",
"static/css/content.css",
],
"scripts" => [

5
pages/content.php
View File

@ -1,5 +1,4 @@
<?php
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@ -65,7 +64,7 @@ if ($pub === false) {
<div class="modal-body">
<div class="form-group">
<label for="width" class="control-label"><i class="fas fa-text-width"></i> <?php lang("width"); ?></label>
<input type="range" class="form-control" id="width" min="1" max="4" step="1">
<input type="range" class="form-control-range" id="width" min="1" max="4" step="1">
</div>
<div class="form-group">
<label for="order" class="control-label"><i class="fas fa-sort"></i> <?php lang("order"); ?></label>
@ -108,7 +107,7 @@ if ($pub === false) {
<div class="modal-body">
<div class="form-group">
<label for="width" class="control-label"><i class="fas fa-text-width"></i> <?php lang("width"); ?></label>
<input type="range" class="form-control" id="newwidth" value="1" min="1" max="4" step="1">
<input type="range" class="form-control-range" id="newwidth" value="1" min="1" max="4" step="1">
</div>
<div class="form-group">
<label for="order" class="control-label"><i class="fas fa-sort"></i> <?php lang("order"); ?></label>

92
static/css/range.css Normal file
View File

@ -0,0 +1,92 @@
input[type=range].form-control-range {
-webkit-appearance: none;
width: 100%;
margin: 6.5px 0;
}
input[type=range].form-control-range:focus {
outline: none;
}
input[type=range].form-control-range::-webkit-slider-runnable-track {
width: 100%;
height: 3px;
cursor: pointer;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
background: #bbbbbb;
border-radius: 0px;
border: 0px solid rgba(255, 255, 255, 0);
}
input[type=range].form-control-range::-webkit-slider-thumb {
box-shadow: 0px 0px 0px rgba(255, 255, 255, 0), 0px 0px 0px rgba(255, 255, 255, 0);
border: 0px solid rgba(227, 242, 253, 0.7);
height: 16px;
width: 16px;
border-radius: 7px;
background: #2196f3;
cursor: pointer;
-webkit-appearance: none;
margin-top: -6.5px;
}
input[type=range].form-control-range:focus::-webkit-slider-runnable-track {
background: #bbbbbb;
}
input[type=range].form-control-range::-moz-range-track {
width: 100%;
height: 3px;
cursor: pointer;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
background: #bbbbbb;
border-radius: 0px;
border: 0px solid rgba(255, 255, 255, 0);
}
input[type=range].form-control-range::-moz-range-thumb {
box-shadow: 0px 0px 0px rgba(255, 255, 255, 0), 0px 0px 0px rgba(255, 255, 255, 0);
border: 0px solid rgba(227, 242, 253, 0.7);
height: 16px;
width: 16px;
border-radius: 7px;
background: #2196f3;
cursor: pointer;
}
input[type=range].form-control-range::-ms-track {
width: 100%;
height: 3px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range].form-control-range::-ms-fill-lower {
background: #bbbbbb;
border: 0px solid rgba(255, 255, 255, 0);
border-radius: 0px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
}
input[type=range].form-control-range::-ms-fill-upper {
background: #bbbbbb;
border: 0px solid rgba(255, 255, 255, 0);
border-radius: 0px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
}
input[type=range].form-control-range::-ms-thumb {
box-shadow: 0px 0px 0px rgba(255, 255, 255, 0), 0px 0px 0px rgba(255, 255, 255, 0);
border: 0px solid rgba(227, 242, 253, 0.7);
height: 16px;
width: 16px;
border-radius: 7px;
background: #2196f3;
cursor: pointer;
height: 3px;
}
input[type=range].form-control-range:focus::-ms-fill-lower {
background: #bbbbbb;
}
input[type=range].form-control-range:focus::-ms-fill-upper {
background: #bbbbbb;
}
input[type=range].form-control-range::-moz-focus-outer {
border: 0;
}