candifloss/ldapmanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed range input slider

Browse Source
This commit is contained in:
Candifloss 2024-10-28 20:40:15 +05:30
parent 9b471a753f
commit e69988d1c5
5 changed files with 25 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,3 +1,3 @@
.venv/ .venv/
test/scripts/csswatch.sh
test/css/adduser.css.map test/css/adduser.css.map
test/scripts/csswatch.sh

18
test/css/adduser.css
View File

@ -129,7 +129,6 @@ body .form-container form .form-group.radio-input .radio-group label.radio {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 6px; border-radius: 6px;
background: linear-gradient(to right, rgba(245, 245, 245, 0.9) 0%, rgba(245, 245, 245, 0.9) var(--value), rgba(245, 245, 245, 0.9) var(--value));
cursor: pointer; cursor: pointer;
padding: 12px; padding: 12px;
border: 1px solid rgba(220, 220, 220, 0.8); border: 1px solid rgba(220, 220, 220, 0.8);
@ -156,7 +155,7 @@ body .form-container form .form-group input[type=range] {
width: 100%; width: 100%;
height: 45px; height: 45px;
border-radius: 6px; border-radius: 6px;
background-color: rgba(245, 245, 245, 0.9); background: linear-gradient(to right, #009299 0%, #009299 var(--value), rgba(245, 245, 245, 0.9) 0%);
border: 1px solid rgba(220, 220, 220, 0.8); border: 1px solid rgba(220, 220, 220, 0.8);
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
@ -166,37 +165,36 @@ body .form-container form .form-group input[type=range]::-webkit-slider-runnable
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 6px; border-radius: 6px;
background-color: linear-gradient(to right, rgba(245, 245, 245, 0.9) 0%, rgba(245, 245, 245, 0.9) var(--value), rgba(245, 245, 245, 0.9) 100%);
} }
body .form-container form .form-group input[type=range]::-moz-range-track { body .form-container form .form-group input[type=range]::-moz-range-track {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 6px; border-radius: 6px;
background-color: linear-gradient(to right, rgba(245, 245, 245, 0.9) 0%, rgba(245, 245, 245, 0.9) var(--value), rgba(245, 245, 245, 0.9) 100%);
} }
body .form-container form .form-group input[type=range]::-webkit-slider-thumb { body .form-container form .form-group input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
display: none;
appearance: none; appearance: none;
width: 10px; width: 0;
height: 45px; height: 45px;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
background-color: rgba(245, 245, 245, 0.9); background-color: #009299;
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: green;
} }
body .form-container form .form-group input[type=range]::-moz-range-thumb { body .form-container form .form-group input[type=range]::-moz-range-thumb {
width: 10px; display: none;
appearance: none;
width: 0;
height: 45px; height: 45px;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
background-color: rgba(245, 245, 245, 0.9); background-color: #009299;
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: green;
} }
body .form-container form .form-group input[type=range]:focus { body .form-container form .form-group input[type=range]:focus {
outline: none; outline: none;

4
test/html/adduser.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/css/adduser.css"> <link rel="stylesheet" href="/home/lcm/Works/ldapmanager/test/css/adduser.css">
<title>Add New User</title> <title>Add New User</title>
</head> </head>
<body> <body>
@ -120,5 +120,5 @@
</div> </div>
</body> </body>
<script src="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/js/rangeslider.js"></script > <script src="/home/lcm/Works/ldapmanager/test/js/rangeslider.js"></script >
</html> </html>

11
test/scss/_colors.scss
View File

@ -79,5 +79,12 @@ $user-form-radio-button-active-border-color: $user-form-checkbox-button-active-b
//Range slider //Range slider
$user-form-range-slider-background: $add-user-input-background; $user-form-range-slider-background: $add-user-input-background;
$user-form-range-slider-filled: $add-user-input-background; $user-form-range-slider-filled: $user-form-checkbox-button-active-color;
$form-range-slider-background-gradient: linear-gradient(to right, $user-form-range-slider-filled 0%, $user-form-range-slider-filled var(--value), $user-form-range-slider-background var(--value)); //$form-range-slider-background-gradient: linear-gradient(to right, $user-form-range-slider-filled 0%, $user-form-range-slider-filled var(--value), $user-form-range-slider-background var(--value));
$form-range-slider-background-gradient:
linear-gradient(
to right,
$user-form-range-slider-filled 0%,
$user-form-range-slider-filled var(--value),
$user-form-range-slider-background 0%
);

18
test/scss/adduser.scss
View File

@ -144,7 +144,7 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: $input-field-border-radius; border-radius: $input-field-border-radius;
background: $form-range-slider-background-gradient; //background: $user-form-radio-button-color;
cursor: pointer; cursor: pointer;
padding: 12px; // Match the padding with the other styled elements padding: 12px; // Match the padding with the other styled elements
border: 1px solid $add-user-input-border-color; border: 1px solid $add-user-input-border-color;
@ -175,22 +175,16 @@ body {
// Style the range input to match the other form inputs // Style the range input to match the other form inputs
--value: 50; --value: 50;
$form-range-slider-background-gradient:
linear-gradient(
to right,
$user-form-range-slider-filled 0%,
$user-form-range-slider-filled var(--value),
$user-form-range-slider-background 100%
);
$form-range-slider-height: 45px; $form-range-slider-height: 45px;
@mixin slider_track { @mixin slider_track {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: $input-field-border-radius; border-radius: $input-field-border-radius;
background-color: $form-range-slider-background-gradient;
} }
@mixin slider_thumb { @mixin slider_thumb {
width: 10px; display: none;
appearance: none;
width: 0;
height: $form-range-slider-height; height: $form-range-slider-height;
border: none; border: none;
border-radius: $input-field-border-radius; border-radius: $input-field-border-radius;
@ -198,7 +192,6 @@ body {
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: green;
} }
input[type="range"] { input[type="range"] {
-webkit-appearance: none; -webkit-appearance: none;
@ -206,7 +199,7 @@ background-color: green;
width: 100%; width: 100%;
height: $form-range-slider-height; height: $form-range-slider-height;
border-radius: $input-field-border-radius; border-radius: $input-field-border-radius;
background-color: $user-form-range-slider-background; background: $form-range-slider-background-gradient;
border: 1px solid $add-user-input-border-color; border: 1px solid $add-user-input-border-color;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
@ -224,7 +217,6 @@ background-color: green;
// Slider thumb // Slider thumb
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none;
@include slider_thumb; @include slider_thumb;
//border: 2px solid $add-user-input-border-color; //border: 2px solid $add-user-input-border-color;
} }