Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-01-10 18:58:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

input select/dropdown draft

Browse Source
This commit is contained in:
Dennis Eichhorn 2022-05-13 20:29:20 +02:00
parent a2a7a6ca1d
commit b18768770d
5 changed files with 432 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
input.scss
View File

@ -358,6 +358,8 @@ input[type="range"] {
border: none;
width: 100%;
min-width: 150px;
height: 5px;
background: var(--button-colored-background);
cursor: pointer;
}
@ -424,3 +426,69 @@ select.plain {
cursor: pointer;
box-shadow: none;
}
// * fix height definition (should be automatic)
// * fix close automatic if radio, if checkbox = multiple, don't close automatic
// * fix opening drop down when clicken on text instead of end of text area
.dropdown {
display: inline-block;
width: 100%;
border: 1px solid #000;
position: relative;
&:hover {
background: #f00;
}
label {
cursor: pointer;
user-select: none;
}
.dropdown-closed {
input {
display: none;
&:checked+label {
display: block;
}
}
label {
display: none;
}
}
& > input {
display: none;
&:checked + .dropdown-container {
background: #fff;
border: 1px solid #000;
position: absolute;
label {
display: block;
&:hover {
background: #f00;
}
}
}
}
.dropdown-content {
& > input {
display: none;
&:checked+label {
display: block;
}
}
label {
display: none;
padding: 0 1rem 0 1rem;
}
}
}

380
styles.css
View File

File diff suppressed because it is too large Load Diff

201
tests/app/forms_data_selection.php
View File

@ -1,3 +1,154 @@
<div class="row">
<div class="col-xs-12 col-md-6">
<section class="portlet">
<div class="portlet-head">Dropdown+Remote</div>
<div class="portlet-body">
<form>
</form>
</div>
</section>
</div>
<div class="col-xs-12 col-md-6">
<section class="portlet">
<div class="portlet-head">Dropdown+Local</div>
<div class="portlet-body">
<label for="iDropdown1" class="dropdown" data-src="http://">
<div class="dropdown-closed">
<input id="e1" name="dropdown" type="radio" checked>
<label for="iDropdown1">Please select</label>
<input id="e2" name="dropdown" type="radio">
<label for="iDropdown1"><i class="fa fa-home"></i> Content</label>
<input id="e3" name="dropdown" type="radio">
<label for="iDropdown1">Content2</label>
<input id="e4" name="dropdown" type="radio">
<label for="iDropdown1">Content3</label>
</div>
<input id="iDropdown1" type="checkbox">
<div class="dropdown-container">
<div class="dropdown-search"></div>
<div class="dropdown-content">
<label for="e2"><i class="fa fa-home"></i> Content</label>
<label for="e3">Content2</label>
<label for="e4">Content3</label>
<label for="iDropdown1">Close</label>
<div>
<div>
</label>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<section class="portlet">
<div class="portlet-head">Multi-Dropdown+Remote</div>
<div class="portlet-body">
<form>
</form>
</div>
</section>
</div>
<div class="col-xs-12 col-md-6">
<section class="portlet">
<div class="portlet-head">Multi-Dropdown+Local</div>
<div class="portlet-body">
<div class="dropdown-search"></div>
<div class="dropdown-content">
<input type="checkbox" value="" checked>
<label>Please select</label>
<input type="checkbox" value="">
<label>Content</label>
<input type="checkbox" value="">
<label>Content2</label>
<input type="checkbox" value="">
<label>Content3</label>
<div>
</div>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<section class="portlet">
<div class="portlet-head">Autocomplete+Dropdown+Remote</div>
<div class="portlet-body">
<form>
</form>
</div>
</section>
</div>
<div class="col-xs-12 col-md-6">
<section class="portlet">
<div class="portlet-head">Autocomplete+Dropdown+Local</div>
<div class="portlet-body">
<div class="dropdown" data-src="http://">
<div class="dropdown-search"></div>
<div class="dropdown-content">
<input type="radio" value="" checked>
<label>Please select</label>
<input type="radio" value="">
<label>Content</label>
<input type="radio" value="">
<label>Content2</label>
<input type="radio" value="">
<label>Content3</label>
<div>
</div>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<section class="portlet">
<div class="portlet-head">Autocomplete+Multi-Dropdown+Remote</div>
<div class="portlet-body">
<form>
</form>
</div>
</section>
</div>
<div class="col-xs-12 col-md-6">
<section class="portlet">
<div class="portlet-head">Autocomplete+Multi-Dropdown+Local</div>
<div class="portlet-body">
<div class="dropdown-search"></div>
<div class="dropdown-content">
<input type="checkbox" value="" checked>
<label>Please select</label>
<input type="checkbox" value="">
<label>Content</label>
<input type="checkbox" value="">
<label>Content2</label>
<input type="checkbox" value="">
<label>Content3</label>
<div>
</div>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<section class="portlet">
@ -13,12 +164,60 @@
<section class="portlet">
<div class="portlet-head">Input+Autocomplete+Dropdown+Local</div>
<div class="portlet-body">
<form>
<div class="dropdown" data-src="http://">
<div class="dropdown-search"></div>
<div class="dropdown-content">
<input type="radio" value="" checked>
<label>Please select</label>
<input type="radio" value="">
<label>Content</label>
<input type="radio" value="">
<label>Content2</label>
<input type="radio" value="">
<label>Content3</label>
<div>
</div>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<section class="portlet">
<div class="portlet-head">Input+Autocomplete+Multi-Dropdown+Remote</div>
<div class="portlet-body">
<form>
</form>
</div>
</section>
</div>
<div class="col-xs-12 col-md-6">
<section class="portlet">
<div class="portlet-head">Input+Autocomplete+Multi-Dropdown+Local</div>
<div class="portlet-body">
<div class="dropdown-search"></div>
<div class="dropdown-content">
<input type="checkbox" value="" checked>
<label>Please select</label>
<input type="checkbox" value="">
<label>Content</label>
<input type="checkbox" value="">
<label>Content2</label>
<input type="checkbox" value="">
<label>Content3</label>
<div>
</div>
</div>
</section>
</div>
</div>
<div class="row">

38
tests/app/forms_input.php
View File

@ -1,25 +1,3 @@
<div class="row">
<div class="col-xs-12 col-md-6">
<section class="portlet">
<div class="portlet-head">Dropdown</div>
<div class="portlet-body">
<form>
</form>
</div>
</section>
</div>
<div class="col-xs-12 col-md-6">
<section class="portlet">
<div class="portlet-head">Multiple Data Dropdown</div>
<div class="portlet-body">
<form>
</form>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<section class="portlet">
@ -31,30 +9,16 @@
</section>
</div>
<div class="col-xs-12 col-md-6">
<section class="portlet">
<div class="portlet-head">Slider Start/End</div>
<div class="portlet-body">
<form>
</form>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<section class="portlet">
<div class="portlet-head">Slider</div>
<div class="portlet-body">
<form>
</form>
<input type="range" min="1" max="100" value="50">
</div>
</section>
</div>
</div>
<script type="module">
import { Request } from "../../../jsOMS/Message/Request/Request.js";

1
tests/app/index.php
View File

@ -2,6 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/cssOMS/tests/app/">
<title>Style Test</title>
<link rel="stylesheet" type="text/css" href="../../styles.css">