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

style fixes

Browse Source
This commit is contained in:
Candifloss 2024-10-30 16:44:23 +05:30
parent f9c45de019
commit 494af30e43
6 changed files with 39 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
test/css/entry-form.css
View File

@ -111,9 +111,8 @@ body .form-container form fieldset .form-group.checkbox-set .checkboxes label.ch
border-color: #007b8a;
}
body .form-container form fieldset .form-group.checkbox-set .checkboxes input[type=checkbox]:checked + label.checkbox {
background-color: #009299;
background-color: #3b8084;
color: #ffffff;
border-color: rgba(0, 170, 179, 0.8);
}
body .form-container form fieldset .form-group.dropdown-menu {
flex: 1 1 calc(50% - 20px);
@ -146,9 +145,8 @@ body .form-container form fieldset .form-group.radio-input .radio-group label.ra
border-color: #007b8a;
}
body .form-container form fieldset .form-group.radio-input .radio-group input[type=radio]:checked + label.radio {
background-color: #009299;
background-color: #3b8084;
color: #ffffff;
border-color: rgba(0, 170, 179, 0.8);
}
body .form-container form fieldset .form-group input[type=range] {
-webkit-appearance: none;
@ -156,7 +154,7 @@ body .form-container form fieldset .form-group input[type=range] {
width: 100%;
height: 45px;
border-radius: 6px;
background: linear-gradient(to right, #009299 0%, #009299 var(--value), rgba(245, 245, 245, 0.9) 0%);
background: linear-gradient(to right, #3b8084 0%, #3b8084 var(--value), rgba(245, 245, 245, 0.9) 0%);
border: 1px solid rgba(220, 220, 220, 0.8);
cursor: pointer;
padding: 0;
@ -200,7 +198,7 @@ body .form-container form fieldset .form-group input[type=range]:focus {
border-color: #007b8a;
}
body .form-container form .collapsible-section-title {
display: block;
display: flex;
width: 100%;
color: #b1b1b1;
font-weight: bold;
@ -208,15 +206,25 @@ body .form-container form .collapsible-section-title {
cursor: pointer;
margin-bottom: 10px;
border-bottom: 2px solid rgba(220, 220, 220, 0.8);
padding: 10px 2px;
padding: 10px 7px 10px 5px;
transition: background-color 0.3s;
}
body .form-container form .collapsible-section-title:hover {
color: #636363;
background-color: #d4d4d4;
}
body .form-container form #collapsible-section-title-1:checked + .collapsible-section {
body .form-container form .collapsible-section-title::after {
flex: 1 1 50%;
content: "x";
text-align: end;
transition: display 0.3s;
}
body .form-container form #collapsible-section-title-1:checked ~ .collapsible-section {
display: none;
}
body .form-container form #collapsible-section-title-1:checked ~ .collapsible-section-title::after {
content: "+";
}
body .form-container form .submit-buttons {
flex: 1 1 100%;
display: flex;

8
test/html/adduser.html
View File

@ -7,7 +7,6 @@
<title>Add New User</title>
</head>
<body>
<div class="form-container">
<h2>Add New User</h2>
<form action="/add_user" method="post" id="user-form">
@ -113,8 +112,8 @@
</div>
</fieldset>
<label class="collapsible-section-title" for="collapsible-section-title-1">Advanced</label>
<input type="checkbox" class="false-header-checkbox" id="collapsible-section-title-1" checked>
<label class="collapsible-section-title" for="collapsible-section-title-1">Advanced</label>
<fieldset class="collapsible-section" form="user-form">
<div class="form-group">
<label for="employee-id">Employee ID</label>
@ -138,13 +137,12 @@
</fieldset>
<div class="form-group submit-buttons">
<button type="reset" class="clear-button">Clear</button>
<button type="submit" class="submit">Add User</button>
<button type="reset" class="clear-button" form="user-form">Clear</button>
<button type="submit" class="submit" form="user-form">Add User</button>
</div>
</form>
</div>
</body>
<script src="../js/rangeslider.js"></script>
</html>

2
test/scss/_colors.scss
View File

@ -59,7 +59,7 @@ $user-form-checkbox-button-hover-color: rgba(232, 232, 232, 0.9);
$user-form-checkbox-button-hover-text-color: #007b8a;
$user-form-checkbox-button-hover-border-color: #007b8a;
// Checked
$user-form-checkbox-button-active-color: #009299;
$user-form-checkbox-button-active-color: #3b8084;;
$user-form-checkbox-button-active-text-color: #ffffff;
$user-form-checkbox-button-active-border-color: rgba(0, 170, 179, 0.8);

1
test/scss/entry-form-fields/_checkboxes.scss
View File

@ -44,7 +44,6 @@
input[type="checkbox"]:checked + label.checkbox {
background-color: $user-form-checkbox-button-active-color;
color: $user-form-checkbox-button-active-text-color;
border-color: $user-form-checkbox-button-active-border-color;
}
}
}

23
test/scss/entry-form-fields/_collapsible-section.scss
View File

@ -4,7 +4,7 @@
// Collapsible sections in the form, like "Advanced"
@mixin collapsible {
.collapsible-section-title {
display: block;
display: flex;
width: 100%;
color: $details-closed-summary-color;
font-weight: bold;
@ -12,15 +12,30 @@
cursor: pointer;
margin-bottom: 10px;
border-bottom: 2px solid $details-summary-border-color;
padding: 10px 2px;
padding: 10px 7px 10px 5px;
transition: background-color 0.3s;
&:hover {
color: $details-summary-hover-color;
background-color: #d4d4d4;
}
&::after {
flex: 1 1 50%;
content: "x";
text-align: end;
transition: display 0.3s;
}
}
#collapsible-section-title-1:checked + .collapsible-section {
display: none;
#collapsible-section-title-1:checked {
~ .collapsible-section {
display: none;
}
~ .collapsible-section-title {
&::after {
content: "+";
}
}
}
}

1
test/scss/entry-form-fields/_radio-buttons.scss
View File

@ -41,7 +41,6 @@
input[type="radio"]:checked + label.radio {
background-color: $user-form-radio-button-active-color;
color: $user-form-radio-button-active-text-color;
border-color: $user-form-radio-button-active-border-color;
}
}
}