more form-styling
This commit is contained in:
Felix Hamann
parent
b9b5496ca7
commit
4a6bbfed09
@ -1,14 +1,21 @@
|
||||
.reactive-label {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 2px;
|
||||
transition: all .1s;
|
||||
cursor: text;
|
||||
color: #666;
|
||||
transform: translate(0, 0);
|
||||
transition: all .1s;
|
||||
}
|
||||
.reactive-label.small {
|
||||
transform: translateY(-100%);
|
||||
font-size: 12px;
|
||||
cursor: default;
|
||||
color: #333;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.reactive-label {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 8px;
|
||||
}
|
||||
.reactive-label.small {
|
||||
transform: translate(0, -120%);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
.js-show-hide {
|
||||
border-left: 1px solid #ccb3e6;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.js-show-hide-toggle {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -9,22 +11,28 @@
|
||||
}
|
||||
|
||||
.js-show-hide-toggle::before {
|
||||
content: 'v';
|
||||
content: '';
|
||||
position: absolute;
|
||||
margin-left: -13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.js-show-hide-toggle:hover::before {
|
||||
content: '>';
|
||||
}
|
||||
|
||||
.js-show-hide.collapsed .js-show-hide-toggle::before {
|
||||
content: '>';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-right: 8px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
}
|
||||
|
||||
.js-show-hide-toggle::before,
|
||||
.js-show-hide.collapsed .js-show-hide-toggle:hover::before {
|
||||
content: 'v';
|
||||
left: -28px;
|
||||
top: 10px;
|
||||
border-left: 8px solid transparent;
|
||||
border-top: 8px solid rebeccapurple;
|
||||
}
|
||||
|
||||
.js-show-hide-toggle:hover::before,
|
||||
.js-show-hide.collapsed .js-show-hide-toggle::before {
|
||||
border-left: 8px solid rebeccapurple;
|
||||
border-top: 8px solid transparent;
|
||||
top: 5px;
|
||||
left: -22px;
|
||||
}
|
||||
|
||||
.js-show-hide.collapsed > .js-show-hide-target {
|
||||
|
||||
@ -16,7 +16,7 @@ table.js-sortable th.sorted-desc::after {
|
||||
right: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: 7px;
|
||||
top: 3px;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
}
|
||||
|
||||
@ -93,13 +93,14 @@ input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"] {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
padding: 7px 3px 4px;
|
||||
padding: 13px 3px 4px;
|
||||
border: none;
|
||||
outline: 0;
|
||||
border-bottom: 2px solid rebeccapurple;
|
||||
color: var(--base-font-color);
|
||||
transition: all .1s;
|
||||
font-size: 16px;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
@ -142,4 +143,67 @@ button:not([disabled]):hover {
|
||||
|
||||
.form-group {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*CUSTOM CHECKBOXES AND RADIO BOXES*/
|
||||
.checkbox,
|
||||
.radio {
|
||||
position: relative;
|
||||
}
|
||||
.checkbox > [type="checkbox"],
|
||||
.radio > [type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
.checkbox > label,
|
||||
.radio > label {
|
||||
padding: 7px 13px 7px 30px;
|
||||
background-color: rebeccapurple;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
.checkbox > label::before,
|
||||
.radio > label::before,
|
||||
.checkbox > label::after,
|
||||
.radio > label::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 4px;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: white;
|
||||
transform: scale(0.2, 0.2);
|
||||
transition: all .2s;
|
||||
}
|
||||
.radio > label::before,
|
||||
.radio > label::after {
|
||||
transform: scale(0.01, 0.01);
|
||||
}
|
||||
.checkbox > label::before,
|
||||
.radio > label::before {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
}
|
||||
.checkbox > label::after,
|
||||
.radio > label::after {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
}
|
||||
.checkbox > :checked + label,
|
||||
.radio > :checked + label {
|
||||
background-color: #451477;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.checkbox > :checked + label::before,
|
||||
.radio > :checked + label::before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.checkbox > :checked + label::after,
|
||||
.radio > :checked + label::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
<p .alert .alert-danger>Das System ist noch nicht produktiv einsetzbar
|
||||
|
||||
<!-- SHOW-HIDE-TEST -->
|
||||
<hr>
|
||||
<div .js-show-hide>
|
||||
<h2 .js-show-hide-toggle>Teilweise funktionierende Abschnitte
|
||||
|
||||
@ -25,12 +26,13 @@
|
||||
<li .list-group-item>
|
||||
<a href=@{SubmissionListR}>Dateien hochladen und abrufen
|
||||
|
||||
<hr>
|
||||
<div>
|
||||
<h2>SORTABLE-TEST
|
||||
<h2>Sortierbare Tabelle
|
||||
<table .js-sortable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID
|
||||
<th .sorted-asc>ID
|
||||
<th>TH1
|
||||
<th>TH2
|
||||
<th>TH3
|
||||
@ -56,8 +58,10 @@
|
||||
<td>T2C2
|
||||
<td>35
|
||||
|
||||
<hr>
|
||||
<div>
|
||||
<h2>FORM-TEST & STYLEGUIDE
|
||||
<h2>form-Tests
|
||||
<p>(Senden-Button wird aktiviert, sobald alle benötigten Felder ausgefüllt sind.)
|
||||
<form method=post action=@{HomeR}>
|
||||
<div .form-group>
|
||||
<label .reactive-label for=text>Vorname*
|
||||
@ -69,8 +73,44 @@
|
||||
<label .reactive-label for=email>Email*
|
||||
<input type=email id=email required=true>
|
||||
<div .form-group>
|
||||
<label for=date>Date
|
||||
<label for=date>Geburtsdatum:
|
||||
<input type=date id=date>
|
||||
|
||||
<div .form-group>
|
||||
<div>
|
||||
<input type=submit value="Senden" id=submit-btn>
|
||||
|
||||
<div .form-group>
|
||||
<textarea>No content yet
|
||||
|
||||
<p>Bitte wähle aus (auch mehrere):
|
||||
<div .form-group>
|
||||
<div .checkbox>
|
||||
<input type=checkbox id=chkbox1>
|
||||
<label for=chkbox1>Opt A
|
||||
<div .checkbox>
|
||||
<input type=checkbox id=chkbox2>
|
||||
<label for=chkbox2>Opt B
|
||||
<div .checkbox>
|
||||
<input type=checkbox id=chkbox3>
|
||||
<label for=chkbox3>Opt C
|
||||
<div .checkbox>
|
||||
<input type=checkbox id=chkbox4>
|
||||
<label for=chkbox4>Opt D
|
||||
|
||||
<p>Wähle aus diesen Optionen eines aus:
|
||||
<div .form-group>
|
||||
<div .radio>
|
||||
<input type=radio name=group1[] id=rdbtn1>
|
||||
<label for=rdbtn1>Opt A
|
||||
<div .radio>
|
||||
<input type=radio name=group1[] id=rdbtn2>
|
||||
<label for=rdbtn2>Opt B
|
||||
<div .radio>
|
||||
<input type=radio name=group1[] id=rdbtn3>
|
||||
<label for=rdbtn3>Opt C
|
||||
|
||||
<p>Wähle eines aus der Liste aus:
|
||||
<div .form-group>
|
||||
<select required=true>
|
||||
<option>Option 1
|
||||
@ -78,24 +118,10 @@
|
||||
<option>Option 3
|
||||
|
||||
<div .form-group>
|
||||
<textarea>No content yet
|
||||
|
||||
<div .form-group>
|
||||
<label for=chkbox1>Opt A
|
||||
<input type=checkbox id=chkbox1>
|
||||
<label for=chkbox2>Opt B
|
||||
<input type=checkbox id=chkbox2>
|
||||
|
||||
<div .form-group>
|
||||
<label for=rdbtn1>Exkl Opt A
|
||||
<input type=radio name=group1[] id=rdbtn1>
|
||||
<label for=rdbtn2>Exkl Opt B
|
||||
<input type=radio name=group1[] id=rdbtn2>
|
||||
|
||||
<input type=submit value="Senden" id=submit-btn>
|
||||
|
||||
<input type=button value="Test">
|
||||
<h3>Test-Button. Does nothing.
|
||||
<input type=button value="Test">
|
||||
|
||||
<hr>
|
||||
<div>
|
||||
<h2>Funktionen zum Testen
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user