minor restructuring
This commit is contained in:
parent
efe9796c39
commit
f137db1707
@ -38,38 +38,31 @@ body .form-container h2 {
|
||||
body .form-container form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
body .form-container form .main-form, body .form-container form .collapsible-section {
|
||||
body .form-container form fieldset {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
body .form-container form .main-form .form-group, body .form-container form .collapsible-section .form-group {
|
||||
body .form-container form fieldset .form-group {
|
||||
flex: 1 1 calc(50% - 20px);
|
||||
min-width: 250px;
|
||||
--value: 50;
|
||||
}
|
||||
body .form-container form .main-form .form-group label, body .form-container form .collapsible-section .form-group label {
|
||||
body .form-container form fieldset .form-group label {
|
||||
display: block;
|
||||
color: #4e4e4e;
|
||||
font-size: 16px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
body .form-container form .main-form .form-group input[type=text],
|
||||
body .form-container form .main-form .form-group input[type=password],
|
||||
body .form-container form .main-form .form-group input[type=email],
|
||||
body .form-container form .main-form .form-group input[type=date],
|
||||
body .form-container form .main-form .form-group input[type=number],
|
||||
body .form-container form .main-form .form-group input[type=datetime-local],
|
||||
body .form-container form .main-form .form-group input[type=tel],
|
||||
body .form-container form .main-form .form-group select, body .form-container form .collapsible-section .form-group input[type=text],
|
||||
body .form-container form .collapsible-section .form-group input[type=password],
|
||||
body .form-container form .collapsible-section .form-group input[type=email],
|
||||
body .form-container form .collapsible-section .form-group input[type=date],
|
||||
body .form-container form .collapsible-section .form-group input[type=number],
|
||||
body .form-container form .collapsible-section .form-group input[type=datetime-local],
|
||||
body .form-container form .collapsible-section .form-group input[type=tel],
|
||||
body .form-container form .collapsible-section .form-group select {
|
||||
body .form-container form fieldset .form-group input[type=text],
|
||||
body .form-container form fieldset .form-group input[type=password],
|
||||
body .form-container form fieldset .form-group input[type=email],
|
||||
body .form-container form fieldset .form-group input[type=date],
|
||||
body .form-container form fieldset .form-group input[type=number],
|
||||
body .form-container form fieldset .form-group input[type=datetime-local],
|
||||
body .form-container form fieldset .form-group input[type=tel],
|
||||
body .form-container form fieldset .form-group select {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(220, 220, 220, 0.8);
|
||||
@ -78,38 +71,31 @@ body .form-container form .collapsible-section .form-group select {
|
||||
font-size: 16px;
|
||||
transition: border-color 0.3s, background-color 0.3s;
|
||||
}
|
||||
body .form-container form .main-form .form-group input[type=text]:focus,
|
||||
body .form-container form .main-form .form-group input[type=password]:focus,
|
||||
body .form-container form .main-form .form-group input[type=email]:focus,
|
||||
body .form-container form .main-form .form-group input[type=date]:focus,
|
||||
body .form-container form .main-form .form-group input[type=number]:focus,
|
||||
body .form-container form .main-form .form-group input[type=datetime-local]:focus,
|
||||
body .form-container form .main-form .form-group input[type=tel]:focus,
|
||||
body .form-container form .main-form .form-group select:focus, body .form-container form .collapsible-section .form-group input[type=text]:focus,
|
||||
body .form-container form .collapsible-section .form-group input[type=password]:focus,
|
||||
body .form-container form .collapsible-section .form-group input[type=email]:focus,
|
||||
body .form-container form .collapsible-section .form-group input[type=date]:focus,
|
||||
body .form-container form .collapsible-section .form-group input[type=number]:focus,
|
||||
body .form-container form .collapsible-section .form-group input[type=datetime-local]:focus,
|
||||
body .form-container form .collapsible-section .form-group input[type=tel]:focus,
|
||||
body .form-container form .collapsible-section .form-group select:focus {
|
||||
body .form-container form fieldset .form-group input[type=text]:focus,
|
||||
body .form-container form fieldset .form-group input[type=password]:focus,
|
||||
body .form-container form fieldset .form-group input[type=email]:focus,
|
||||
body .form-container form fieldset .form-group input[type=date]:focus,
|
||||
body .form-container form fieldset .form-group input[type=number]:focus,
|
||||
body .form-container form fieldset .form-group input[type=datetime-local]:focus,
|
||||
body .form-container form fieldset .form-group input[type=tel]:focus,
|
||||
body .form-container form fieldset .form-group select:focus {
|
||||
border-color: #007b8a;
|
||||
outline: none;
|
||||
}
|
||||
body .form-container form .main-form .form-group.checkbox-set label, body .form-container form .collapsible-section .form-group.checkbox-set label {
|
||||
body .form-container form fieldset .form-group.checkbox-set label {
|
||||
display: block;
|
||||
color: #4e4e4e;
|
||||
font-size: 16px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
body .form-container form .main-form .form-group.checkbox-set .checkboxes, body .form-container form .collapsible-section .form-group.checkbox-set .checkboxes {
|
||||
body .form-container form fieldset .form-group.checkbox-set .checkboxes {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
body .form-container form .main-form .form-group.checkbox-set .checkboxes input[type=checkbox], body .form-container form .collapsible-section .form-group.checkbox-set .checkboxes input[type=checkbox] {
|
||||
body .form-container form fieldset .form-group.checkbox-set .checkboxes input[type=checkbox] {
|
||||
display: none;
|
||||
}
|
||||
body .form-container form .main-form .form-group.checkbox-set .checkboxes label.checkbox, body .form-container form .collapsible-section .form-group.checkbox-set .checkboxes label.checkbox {
|
||||
body .form-container form fieldset .form-group.checkbox-set .checkboxes label.checkbox {
|
||||
cursor: pointer;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(220, 220, 220, 0.8);
|
||||
@ -121,27 +107,27 @@ body .form-container form .main-form .form-group.checkbox-set .checkboxes label.
|
||||
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
|
||||
user-select: none;
|
||||
}
|
||||
body .form-container form .main-form .form-group.checkbox-set .checkboxes label.checkbox:hover, body .form-container form .main-form .form-group.checkbox-set .checkboxes label.checkbox:focus, body .form-container form .collapsible-section .form-group.checkbox-set .checkboxes label.checkbox:hover, body .form-container form .collapsible-section .form-group.checkbox-set .checkboxes label.checkbox:focus {
|
||||
body .form-container form fieldset .form-group.checkbox-set .checkboxes label.checkbox:hover, body .form-container form fieldset .form-group.checkbox-set .checkboxes label.checkbox:focus {
|
||||
background-color: rgba(232, 232, 232, 0.9);
|
||||
border-color: #007b8a;
|
||||
}
|
||||
body .form-container form .main-form .form-group.checkbox-set .checkboxes input[type=checkbox]:checked + label.checkbox, body .form-container form .collapsible-section .form-group.checkbox-set .checkboxes input[type=checkbox]:checked + label.checkbox {
|
||||
body .form-container form fieldset .form-group.checkbox-set .checkboxes input[type=checkbox]:checked + label.checkbox {
|
||||
background-color: #009299;
|
||||
color: #ffffff;
|
||||
border-color: rgba(0, 170, 179, 0.8);
|
||||
}
|
||||
body .form-container form .main-form .form-group.dropdown-menu, body .form-container form .collapsible-section .form-group.dropdown-menu {
|
||||
body .form-container form fieldset .form-group.dropdown-menu {
|
||||
flex: 1 1 calc(50% - 20px);
|
||||
min-width: 250px;
|
||||
}
|
||||
body .form-container form .main-form .form-group.radio-input .radio-group, body .form-container form .collapsible-section .form-group.radio-input .radio-group {
|
||||
body .form-container form fieldset .form-group.radio-input .radio-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
body .form-container form .main-form .form-group.radio-input .radio-group input[type=radio], body .form-container form .collapsible-section .form-group.radio-input .radio-group input[type=radio] {
|
||||
body .form-container form fieldset .form-group.radio-input .radio-group input[type=radio] {
|
||||
display: none;
|
||||
}
|
||||
body .form-container form .main-form .form-group.radio-input .radio-group label.radio, body .form-container form .collapsible-section .form-group.radio-input .radio-group label.radio {
|
||||
body .form-container form fieldset .form-group.radio-input .radio-group label.radio {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
@ -156,16 +142,16 @@ body .form-container form .main-form .form-group.radio-input .radio-group label.
|
||||
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
|
||||
user-select: none;
|
||||
}
|
||||
body .form-container form .main-form .form-group.radio-input .radio-group label.radio:hover, body .form-container form .main-form .form-group.radio-input .radio-group label.radio:focus, body .form-container form .collapsible-section .form-group.radio-input .radio-group label.radio:hover, body .form-container form .collapsible-section .form-group.radio-input .radio-group label.radio:focus {
|
||||
body .form-container form fieldset .form-group.radio-input .radio-group label.radio:hover, body .form-container form fieldset .form-group.radio-input .radio-group label.radio:focus {
|
||||
background-color: rgba(232, 232, 232, 0.9);
|
||||
border-color: #007b8a;
|
||||
}
|
||||
body .form-container form .main-form .form-group.radio-input .radio-group input[type=radio]:checked + label.radio, body .form-container form .collapsible-section .form-group.radio-input .radio-group input[type=radio]:checked + label.radio {
|
||||
body .form-container form fieldset .form-group.radio-input .radio-group input[type=radio]:checked + label.radio {
|
||||
background-color: #009299;
|
||||
color: #ffffff;
|
||||
border-color: rgba(0, 170, 179, 0.8);
|
||||
}
|
||||
body .form-container form .main-form .form-group input[type=range], body .form-container form .collapsible-section .form-group input[type=range] {
|
||||
body .form-container form fieldset .form-group input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
@ -177,17 +163,17 @@ body .form-container form .main-form .form-group input[type=range], body .form-c
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body .form-container form .main-form .form-group input[type=range]::-webkit-slider-runnable-track, body .form-container form .collapsible-section .form-group input[type=range]::-webkit-slider-runnable-track {
|
||||
body .form-container form fieldset .form-group input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
}
|
||||
body .form-container form .main-form .form-group input[type=range]::-moz-range-track, body .form-container form .collapsible-section .form-group input[type=range]::-moz-range-track {
|
||||
body .form-container form fieldset .form-group input[type=range]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
}
|
||||
body .form-container form .main-form .form-group input[type=range]::-webkit-slider-thumb, body .form-container form .collapsible-section .form-group input[type=range]::-webkit-slider-thumb {
|
||||
body .form-container form fieldset .form-group input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
display: none;
|
||||
appearance: none;
|
||||
@ -200,7 +186,7 @@ body .form-container form .main-form .form-group input[type=range]::-webkit-slid
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body .form-container form .main-form .form-group input[type=range]::-moz-range-thumb, body .form-container form .collapsible-section .form-group input[type=range]::-moz-range-thumb {
|
||||
body .form-container form fieldset .form-group input[type=range]::-moz-range-thumb {
|
||||
display: none;
|
||||
appearance: none;
|
||||
width: 0;
|
||||
@ -212,18 +198,11 @@ body .form-container form .main-form .form-group input[type=range]::-moz-range-t
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body .form-container form .main-form .form-group input[type=range]:focus, body .form-container form .collapsible-section .form-group input[type=range]:focus {
|
||||
body .form-container form fieldset .form-group input[type=range]:focus {
|
||||
outline: none;
|
||||
border-color: #007b8a;
|
||||
}
|
||||
body .form-container form .main-form[open], body .form-container form .collapsible-section[open] {
|
||||
background-color: #dadada;
|
||||
border-radius: 6px;
|
||||
}
|
||||
body .form-container form .main-form[open] summary, body .form-container form .collapsible-section[open] summary {
|
||||
color: #979797;
|
||||
}
|
||||
body .form-container form .main-form summary, body .form-container form .collapsible-section summary {
|
||||
body .form-container form fieldset .collapsible-section-title {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #b1b1b1;
|
||||
@ -233,9 +212,8 @@ body .form-container form .main-form summary, body .form-container form .collaps
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 2px solid rgba(220, 220, 220, 0.8);
|
||||
padding: 10px 2px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
body .form-container form .main-form summary:hover, body .form-container form .collapsible-section summary:hover {
|
||||
body .form-container form fieldset .collapsible-section-title:hover {
|
||||
color: #636363;
|
||||
background-color: #d4d4d4;
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/css/entry-form.css">
|
||||
<link rel="stylesheet" href="../css/entry-form.css">
|
||||
<title>Add New User</title>
|
||||
</head>
|
||||
<body>
|
||||
@ -113,8 +113,8 @@
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<details class="collapsible-section" open>
|
||||
<summary>Advanced</summary>
|
||||
<fieldset class="collapsible-section">
|
||||
<legend class="collapsible-section-title">Advanced</legend>
|
||||
<div class="form-group">
|
||||
<label for="employee-id">Employee ID</label>
|
||||
<input type="text" id="employee-id" name="employee_id" placeholder="Employee ID">
|
||||
@ -134,7 +134,7 @@
|
||||
<label for="security-clearance">Security Clearance Level</label>
|
||||
<input type="number" id="security-clearance" name="security_clearance" value="0" min="0" max="5" step="1">
|
||||
</div>
|
||||
</details>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-group submit-buttons">
|
||||
<button type="reset" class="clear-button">Clear</button>
|
||||
@ -145,5 +145,5 @@
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script src="/home/ucadmin/Documents/Scripts/b/Test/ldapmanager/test/js/rangeslider.js"></script >
|
||||
<script src="../js/rangeslider.js"></script >
|
||||
</html>
|
||||
|
||||
@ -4,16 +4,7 @@
|
||||
// Collapsible sections in the form, like "Advanced"
|
||||
@mixin collapsible {
|
||||
padding-bottom: 3px;
|
||||
// Style when the section is expanded
|
||||
&[open] {
|
||||
summary {
|
||||
color: $details-open-summary-color;
|
||||
}
|
||||
background-color: #dadada;
|
||||
border-radius: 6px;
|
||||
}
|
||||
// Regular
|
||||
summary {
|
||||
.collapsible-section-title {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: $details-closed-summary-color;
|
||||
@ -23,7 +14,6 @@
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 2px solid $details-summary-border-color;
|
||||
padding: 10px 2px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
|
||||
&:hover {
|
||||
color: $details-summary-hover-color;
|
||||
|
||||
@ -41,7 +41,7 @@ body {
|
||||
// Form element
|
||||
form {
|
||||
margin-bottom: 20px; // Add space below the form for submit button
|
||||
.main-form, .collapsible-section {
|
||||
fieldset {
|
||||
display: flex;
|
||||
flex-wrap: wrap; // Allow wrapping for form groups
|
||||
gap: 20px; // Add consistent gap between elements
|
||||
|
||||
Loading…
Reference in New Issue
Block a user