Revision f88ca788
Von Hans P. Schlaepfer vor fast 4 Jahren hinzugefügt
| css/developement/anleitung.html | ||
|---|---|---|
| 1 |
<!DOCTYPE html> |
|
| 2 |
<html lang="de"> |
|
| 3 |
<head> |
|
| 4 |
<meta charset="utf-8" /> |
|
| 5 |
<link href="../style.css" rel="stylesheet"> |
|
| 6 |
<title>Kivitendo-Design: Anleitung & Grundsätze</title> |
|
| 7 |
</head> |
|
| 8 |
<body class="developing"> |
|
| 9 |
<header> |
|
| 10 |
<h1>Anleitung und Grunsätze</h1> |
|
| 11 |
<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav> |
|
| 12 |
</header> |
|
| 13 |
<div class="wrapper"> |
|
| 14 |
<h2>Grundregeln</h2> |
|
| 15 |
|
|
| 16 |
<h3>INPUT-Tag:</h3> |
|
| 17 |
<p>Da das INPUT-Element sehr vielseitig ist und via CSS das TYPE-Attribut abgefangen werden kann, muss dieses <b>TYPE-Attribut zwingend</b> mit den reservierten Begriffen gesetzt sein, da Webbrowser mitsamt ihrer CSS-Fähigkeiten das Fehlen missinterpretieren können. Standard ist TEXT, im weiteren dürfen vorerst SUBMIT, RESET, CHECKBOX und RADIO verwendet werden. Fehlt dieses Attribut oder wird ein ungehöriges gesetzt, wird das Feld vom Browser nicht korrekt dargestellt.</p> |
|
| 18 |
<p>Korrekt: <code><input type="text" name="name" id="name"></code><br>Falsch: <code><input name="name" id="name"></code> (häufig aufgetreten)<p> |
|
| 19 |
<h3>H1 (Header 1):</h3><p>Dieses Element sollte nur <b>einmal pro Seite</b> eingesetzt werden, und zwar einzig für den Seitentitel. Zudem sollte dieses Attribut <b>gleich zu Beginn der Template-Datei</b> gesetzt werden, und nicht innerhalb eines Formular- oder Wrapper-Elements. Das unkorrekte Setzen dieses Elements ist zwar durch den CSS-Code abgefangen, die Darstellung könnte aber in solchen Fällen nicht den Vorstellungen entsprechen.</p> |
|
| 20 |
|
|
| 21 |
|
|
| 22 |
</div> |
|
| 23 |
</body> |
|
| 24 |
</html> |
|
| css/developement/farben-demo.css | ||
|---|---|---|
| 1 |
.gray-darker {
|
|
| 2 |
background-color: #222222; |
|
| 3 |
} |
|
| 4 |
.gray-dark {
|
|
| 5 |
background-color: #555555; |
|
| 6 |
} |
|
| 7 |
.gray-mediumdark {
|
|
| 8 |
background-color: #666666; |
|
| 9 |
} |
|
| 10 |
.gray {
|
|
| 11 |
background-color: #888888; |
|
| 12 |
} |
|
| 13 |
.gray-medium {
|
|
| 14 |
background-color: #aaaaaa; |
|
| 15 |
} |
|
| 16 |
.gray-light {
|
|
| 17 |
background-color: #cfcfcf; |
|
| 18 |
} |
|
| 19 |
.gray-lighter {
|
|
| 20 |
background-color: #dedede; |
|
| 21 |
} |
|
| 22 |
.gray-morelighter {
|
|
| 23 |
background-color: #e0e0e0; |
|
| 24 |
} |
|
| 25 |
.gray-verylight {
|
|
| 26 |
background-color: #ececec; |
|
| 27 |
} |
|
| 28 |
.gray-superlight {
|
|
| 29 |
background-color: #efefef; |
|
| 30 |
} |
|
| 31 |
.color-red-strong {
|
|
| 32 |
background-color: #ae0014; |
|
| 33 |
} |
|
| 34 |
.color-red-light {
|
|
| 35 |
background-color: #ffd6d6; |
|
| 36 |
} |
|
| 37 |
.color-green-strong {
|
|
| 38 |
background-color: #088604; |
|
| 39 |
} |
|
| 40 |
.color-green-light {
|
|
| 41 |
background-color: #c9ee8e; |
|
| 42 |
} |
|
| 43 |
.color-blue-strong {
|
|
| 44 |
background-color: #209ec8; |
|
| 45 |
} |
|
| 46 |
.color-blue-light {
|
|
| 47 |
background-color: #b6e6e5; |
|
| 48 |
} |
|
| 49 |
.color-orange-strong {
|
|
| 50 |
background-color: #6d613e; |
|
| 51 |
} |
|
| 52 |
.color-orange-light {
|
|
| 53 |
background-color: #f6d972; |
|
| 54 |
} |
|
| 55 |
.rainbow-green {
|
|
| 56 |
background-color: #408000; |
|
| 57 |
} |
|
| 58 |
.rainbow-blue {
|
|
| 59 |
background-color: #0080ff; |
|
| 60 |
} |
|
| 61 |
.rainbow-red {
|
|
| 62 |
background-color: #ff0000; |
|
| 63 |
} |
|
| 64 |
.rainbow-yellow {
|
|
| 65 |
background-color: #ffff00; |
|
| 66 |
} |
|
| 67 |
.brand-primary {
|
|
| 68 |
background-color: #000000; |
|
| 69 |
} |
|
| 70 |
.brand-label {
|
|
| 71 |
background-color: #888888; |
|
| 72 |
} |
|
| 73 |
.brand-label-bg {
|
|
| 74 |
background-color: #dedede; |
|
| 75 |
} |
|
| 76 |
.brand-info {
|
|
| 77 |
background-color: #209ec8; |
|
| 78 |
} |
|
| 79 |
.brand-info-bg {
|
|
| 80 |
background-color: #b6e6e5; |
|
| 81 |
} |
|
| 82 |
.brand-ok {
|
|
| 83 |
background-color: #088604; |
|
| 84 |
} |
|
| 85 |
.brand-ok-bg {
|
|
| 86 |
background-color: #c9ee8e; |
|
| 87 |
} |
|
| 88 |
.brand-warning {
|
|
| 89 |
background-color: #6d613e; |
|
| 90 |
} |
|
| 91 |
.brand-warning-bg {
|
|
| 92 |
background-color: #f6d972; |
|
| 93 |
} |
|
| 94 |
.brand-error {
|
|
| 95 |
background-color: #ae0014; |
|
| 96 |
} |
|
| 97 |
.brand-error-bg {
|
|
| 98 |
background-color: #ffd6d6; |
|
| 99 |
} |
|
| 100 |
.brand-positive {
|
|
| 101 |
background-color: #088604; |
|
| 102 |
} |
|
| 103 |
.brand-positive-bg {
|
|
| 104 |
background-color: #c9ee8e; |
|
| 105 |
} |
|
| 106 |
.brand-negative {
|
|
| 107 |
background-color: #ae0014; |
|
| 108 |
} |
|
| 109 |
.brand-negative-bg {
|
|
| 110 |
background-color: #ffd6d6; |
|
| 111 |
} |
|
| 112 |
.button-strong {
|
|
| 113 |
background-color: #000000; |
|
| 114 |
} |
|
| 115 |
.button-strong-bg {
|
|
| 116 |
background-color: #cfcfcf; |
|
| 117 |
} |
|
| 118 |
.button-strong-border {
|
|
| 119 |
background-color: #cfcfcf; |
|
| 120 |
} |
|
| 121 |
.button-strong-hover {
|
|
| 122 |
background-color: #000000; |
|
| 123 |
} |
|
| 124 |
.button-strong-hover-bg {
|
|
| 125 |
background-color: #cfcfcf; |
|
| 126 |
} |
|
| 127 |
.button-strong-hover-border {
|
|
| 128 |
background-color: #cfcfcf; |
|
| 129 |
} |
|
| 130 |
.button-strong-active {
|
|
| 131 |
background-color: #000000; |
|
| 132 |
} |
|
| 133 |
.button-strong-active-bg {
|
|
| 134 |
background-color: #cfcfcf; |
|
| 135 |
} |
|
| 136 |
.button-strong-active-border {
|
|
| 137 |
background-color: #cfcfcf; |
|
| 138 |
} |
|
| 139 |
.button-soft {
|
|
| 140 |
background-color: #555555; |
|
| 141 |
} |
|
| 142 |
.button-soft-bg {
|
|
| 143 |
background-color: #ececec; |
|
| 144 |
} |
|
| 145 |
.button-soft-border {
|
|
| 146 |
background-color: #ececec; |
|
| 147 |
} |
|
| 148 |
.button-soft-hover {
|
|
| 149 |
background-color: #555555; |
|
| 150 |
} |
|
| 151 |
.button-soft-hover-bg {
|
|
| 152 |
background-color: #ececec; |
|
| 153 |
} |
|
| 154 |
.button-soft-hover-border {
|
|
| 155 |
background-color: #ececec; |
|
| 156 |
} |
|
| 157 |
.button-soft-active {
|
|
| 158 |
background-color: #555555; |
|
| 159 |
} |
|
| 160 |
.button-soft-active-bg {
|
|
| 161 |
background-color: #ececec; |
|
| 162 |
} |
|
| 163 |
.button-soft-active-border {
|
|
| 164 |
background-color: #ececec; |
|
| 165 |
} |
|
| 166 |
.body-bg {
|
|
| 167 |
background-color: #efefef; |
|
| 168 |
} |
|
| 169 |
.content-bg {
|
|
| 170 |
background-color: #ffffff; |
|
| 171 |
} |
|
| 172 |
.tabs-bg {
|
|
| 173 |
background-color: #efefef; |
|
| 174 |
} |
|
| 175 |
.heading-bg {
|
|
| 176 |
background-color: #cfcfcf; |
|
| 177 |
} |
|
| 178 |
.controlpanel-bg {
|
|
| 179 |
background-color: #e0e0e0; |
|
| 180 |
} |
|
| 181 |
.text-color {
|
|
| 182 |
background-color: #000000; |
|
| 183 |
} |
|
| 184 |
.heading-color {
|
|
| 185 |
background-color: #888888; |
|
| 186 |
} |
|
| 187 |
.caption-color {
|
|
| 188 |
background-color: #888888; |
|
| 189 |
} |
|
| 190 |
#demo h1, |
|
| 191 |
#demo h2 {
|
|
| 192 |
clear: both; |
|
| 193 |
color: #888888 !important; |
|
| 194 |
padding: 0 ; |
|
| 195 |
margin: 0 ; |
|
| 196 |
} |
|
| 197 |
#demo h1 {
|
|
| 198 |
font-size: 14pt; |
|
| 199 |
padding-top: 1.0em ; |
|
| 200 |
} |
|
| 201 |
#demo h2 {
|
|
| 202 |
font-size: 12pt; |
|
| 203 |
margin-top: 0.2em ; |
|
| 204 |
} |
|
| 205 |
#demo div.selector {
|
|
| 206 |
display: block ; |
|
| 207 |
width: 8.0em ; |
|
| 208 |
float: left ; |
|
| 209 |
margin: 0 1.0em 0 0 ; |
|
| 210 |
overflow: hidden ; |
|
| 211 |
padding: 0 ; |
|
| 212 |
} |
|
| 213 |
#demo div.selector h3 {
|
|
| 214 |
color: #888888 !important; |
|
| 215 |
font-size: 9pt; |
|
| 216 |
font-weight: normal; |
|
| 217 |
height: 2.8em ; |
|
| 218 |
display: table-cell; |
|
| 219 |
vertical-align: bottom ; |
|
| 220 |
} |
|
| 221 |
#demo div.selector div.color {
|
|
| 222 |
width: 8.0em ; |
|
| 223 |
height: 8.0em ; |
|
| 224 |
display: block; |
|
| 225 |
overflow: hidden ; |
|
| 226 |
padding: 0 ; |
|
| 227 |
margin: 0; |
|
| 228 |
border: 1px #000 solid ; |
|
| 229 |
} |
|
| 230 |
#demo .group {
|
|
| 231 |
display: inline-block; |
|
| 232 |
float: left; |
|
| 233 |
overflow: hidden ; |
|
| 234 |
} |
|
| css/developement/farben-demo.html | ||
|---|---|---|
| 1 |
<!DOCTYPE html> |
|
| 2 |
<html lang="de"> |
|
| 3 |
<head> |
|
| 4 |
<meta charset="utf-8" /> |
|
| 5 |
<link href="../style.css" rel="stylesheet"> |
|
| 6 |
<link href="farben-demo.css" rel="stylesheet"> |
|
| 7 |
<title>Kommunikation mit Farben in Kivitendo</title> |
|
| 8 |
|
|
| 9 |
<script type="text/javascript" src="../../js/jquery.js"></script> |
|
| 10 |
<script type="text/javascript" src="../../js/common.js"></script> |
|
| 11 |
<script type="text/javascript" src="../../js/namespace.js"></script> |
|
| 12 |
<script type="text/javascript" src="../../js/kivi.js"></script> |
|
| 13 |
<script type="text/javascript" src="../../js/locale/de.js"></script> |
|
| 14 |
<script type="text/javascript" src="../../js/jquery-ui.js"></script> |
|
| 15 |
<script type="text/javascript" src="../../js/kivi.QuickSearch.js"></script> |
|
| 16 |
<script type="text/javascript" src="../../js/kivi.ActionBar.js"></script> |
|
| 17 |
<script type="text/javascript" src="../../js/kivi.Draft.js"></script> |
|
| 18 |
<script type="text/javascript" src="../../js/kivi.File.js"></script> |
|
| 19 |
<script type="text/javascript" src="../../js/kivi.SalesPurchase.js"></script> |
|
| 20 |
<script type="text/javascript" src="../../js/kivi.Part.js"></script> |
|
| 21 |
<script type="text/javascript" src="../../js/ckeditor/ckeditor.js"></script> |
|
| 22 |
<script type="text/javascript" src="../../js/ckeditor/adapters/jquery.js"></script> |
|
| 23 |
<script type="text/javascript" src="../../js/kivi.io.js"></script> |
|
| 24 |
<script type="text/javascript" src="../../js/client_js.js"></script> |
|
| 25 |
<script type="text/javascript" src="../../js/jquery.cookie.js"></script> |
|
| 26 |
<script type="text/javascript" src="../../js/jquery.checkall.js"></script> |
|
| 27 |
<script type="text/javascript" src="../../js/jquery.download.js"></script> |
|
| 28 |
<script type="text/javascript" src="../../js/jquery/jquery.form.js"></script> |
|
| 29 |
<script type="text/javascript" src="../../js/jquery/fixes.js"></script> |
|
| 30 |
<script type="text/javascript" src="../../js/jquery/jquery.tooltipster.min.js"></script> |
|
| 31 |
<script type="text/javascript" src="../../js/jquery/ui/i18n/jquery.ui.datepicker-de.js"></script> |
|
| 32 |
</head> |
|
| 33 |
<body class="developing"> |
|
| 34 |
<header> |
|
| 35 |
<h1>Anzeige aller Farben in Kivitendo</h1> |
|
| 36 |
<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav> |
|
| 37 |
</header> |
|
| 38 |
<div class="wrapper" id="demo"> |
|
| 39 |
<!-- |
|
| 40 |
For creating the blocks from the less-code use following grep: |
|
| 41 |
\.([a-z-]+)[ ]*\{[^\n]+ replace with
|
|
| 42 |
<div class="selector"><h3>\1</h3><div class="color \1"></div></div> or |
|
| 43 |
<div class="selector"><h3>$1</h3><div class="color $1"></div></div> |
|
| 44 |
--> |
|
| 45 |
|
|
| 46 |
<h1>more brown</h1> |
|
| 47 |
<div class="selector"><h3>.gray-darker</h3><div class="color gray-darker"></div></div> |
|
| 48 |
<div class="selector"><h3>.gray-dark</h3><div class="color gray-dark"></div></div> |
|
| 49 |
<div class="selector"><h3>.gray-mediumdark</h3><div class="color gray-mediumdark"></div></div> |
|
| 50 |
<div class="selector"><h3>.gray</h3><div class="color gray"></div></div> |
|
| 51 |
<div class="selector"><h3>.gray-medium</h3><div class="color gray-medium"></div></div> |
|
| 52 |
<div class="selector"><h3>.gray-light</h3><div class="color gray-light"></div></div> |
|
| 53 |
<div class="selector"><h3>.gray-lighter</h3><div class="color gray-lighter"></div></div> |
|
| 54 |
<div class="selector"><h3>.gray-morelighter</h3><div class="color gray-morelighter"></div></div> |
|
| 55 |
<div class="selector"><h3>.gray-verylight</h3><div class="color gray-verylight"></div></div> |
|
| 56 |
<div class="selector"><h3>.gray-superlight</h3><div class="color gray-superlight"></div></div> |
|
| 57 |
|
|
| 58 |
<h1>Divers Color Specications</h1> |
|
| 59 |
<div class="group"> |
|
| 60 |
<h2>ok</h2> |
|
| 61 |
<div class="selector"><h3>.color-green-strong</h3><div class="color color-green-strong"></div></div> |
|
| 62 |
<div class="selector"><h3>.color-green-light</h3><div class="color color-green-light"></div></div> |
|
| 63 |
</div> |
|
| 64 |
<div class="group"> |
|
| 65 |
<h2>error</h2> |
|
| 66 |
<div class="selector"><h3>.color-red-strong</h3><div class="color color-red-strong"></div></div> |
|
| 67 |
<div class="selector"><h3>.color-red-light</h3><div class="color color-red-light"></div></div> |
|
| 68 |
</div> |
|
| 69 |
<div class="group"> |
|
| 70 |
<h2>info/hint</h2> |
|
| 71 |
<div class="selector"><h3>.color-blue-strong</h3><div class="color color-blue-strong"></div></div> |
|
| 72 |
<div class="selector"><h3>.color-blue-light</h3><div class="color color-blue-light"></div></div> |
|
| 73 |
</div> |
|
| 74 |
<div class="group"> |
|
| 75 |
<h2>warning</h2> |
|
| 76 |
<div class="selector"><h3>.color-orange-strong</h3><div class="color color-orange-strong"></div></div> |
|
| 77 |
<div class="selector"><h3>.color-orange-light</h3><div class="color color-orange-light"></div></div> |
|
| 78 |
</div> |
|
| 79 |
|
|
| 80 |
|
|
| 81 |
<h2>divers</h2> |
|
| 82 |
<div class="selector"><h3>.rainbow-green</h3><div class="color rainbow-green"></div></div> |
|
| 83 |
<div class="selector"><h3>.rainbow-blue</h3><div class="color rainbow-blue"></div></div> |
|
| 84 |
<div class="selector"><h3>.rainbow-red</h3><div class="color rainbow-red"></div></div> |
|
| 85 |
<div class="selector"><h3>.rainbow-yellow</h3><div class="color rainbow-yellow"></div></div> |
|
| 86 |
|
|
| 87 |
<h1>Brand colors</h1> |
|
| 88 |
|
|
| 89 |
<h2>Text (Label & data)</h2> |
|
| 90 |
<div class="selector"><h3>.brand-primary</h3><div class="color brand-primary"></div></div> |
|
| 91 |
<div class="selector"><h3>.brand-label</h3><div class="color brand-label"></div></div> |
|
| 92 |
<div class="selector"><h3>.brand-label-bg</h3><div class="color brand-label-bg"></div></div> |
|
| 93 |
|
|
| 94 |
<h1>Messages & info types</h1> |
|
| 95 |
<div class="selector"><h3>.brand-ok</h3><div class="color brand-ok"></div></div> |
|
| 96 |
<div class="selector"><h3>.brand-ok-bg</h3><div class="color brand-ok-bg"></div></div> |
|
| 97 |
|
|
| 98 |
<div class="selector"><h3>.brand-error</h3><div class="color brand-error"></div></div> |
|
| 99 |
<div class="selector"><h3>.brand-error-bg</h3><div class="color brand-error-bg"></div></div> |
|
| 100 |
|
|
| 101 |
<div class="selector"><h3>.brand-info</h3><div class="color brand-info"></div></div> |
|
| 102 |
<div class="selector"><h3>.brand-info-bg</h3><div class="color brand-info-bg"></div></div> |
|
| 103 |
|
|
| 104 |
<div class="selector"><h3>.brand-warning</h3><div class="color brand-warning"></div></div> |
|
| 105 |
<div class="selector"><h3>.brand-warning-bg</h3><div class="color brand-warning-bg"></div></div> |
|
| 106 |
|
|
| 107 |
<h1>Positive & negative colors</h1> |
|
| 108 |
<div class="selector"><h3>.brand-positive</h3><div class="color brand-positive"></div></div> |
|
| 109 |
<div class="selector"><h3>.brand-positive-bg</h3><div class="color brand-positive-bg"></div></div> |
|
| 110 |
<div class="selector"><h3>.brand-negative</h3><div class="color brand-negative"></div></div> |
|
| 111 |
<div class="selector"><h3>.brand-negative-bg</h3><div class="color brand-negative-bg"></div></div> |
|
| 112 |
|
|
| 113 |
|
|
| 114 |
<h1>Buttons</h1> |
|
| 115 |
<h2>Button with manipulation (submit etc.)</h2> |
|
| 116 |
<div class="selector"><h3>.button-strong</h3><div class="color button-strong"></div></div> |
|
| 117 |
<div class="selector"><h3>.button-strong-bg</h3><div class="color button-strong-bg"></div></div> |
|
| 118 |
<div class="selector"><h3>.button-strong-border</h3><div class="color button-strong-border"></div></div> |
|
| 119 |
<div class="selector"><h3>.button-strong-hover</h3><div class="color button-strong-hover"></div></div> |
|
| 120 |
<div class="selector"><h3>.button-strong-hover-bg</h3><div class="color button-strong-hover-bg"></div></div> |
|
| 121 |
<div class="selector"><h3>.button-strong-hover-border</h3><div class="color button-strong-hover-border"></div></div> |
|
| 122 |
<div class="selector"><h3>.button-strong-active</h3><div class="color button-strong-active"></div></div> |
|
| 123 |
<div class="selector"><h3>.button-strong-active-bg</h3><div class="color button-strong-active-bg"></div></div> |
|
| 124 |
<div class="selector"><h3>.button-strong-active-border</h3><div class="color button-strong-active-border"></div></div> |
|
| 125 |
<h2>button withoud data manipulation (reset, cancel, open, show etc.)</h2> |
|
| 126 |
<div class="selector"><h3>.button-soft</h3><div class="color button-soft"></div></div> |
|
| 127 |
<div class="selector"><h3>.button-soft-bg</h3><div class="color button-soft-bg"></div></div> |
|
| 128 |
<div class="selector"><h3>.button-soft-border</h3><div class="color button-soft-border"></div></div> |
|
| 129 |
<div class="selector"><h3>.button-soft-hover</h3><div class="color button-soft-hover"></div></div> |
|
| 130 |
<div class="selector"><h3>.button-soft-hover-bg</h3><div class="color button-soft-hover-bg"></div></div> |
|
| 131 |
<div class="selector"><h3>.button-soft-hover-border</h3><div class="color button-soft-hover-border"></div></div> |
|
| 132 |
<div class="selector"><h3>.button-soft-active</h3><div class="color button-soft-active"></div></div> |
|
| 133 |
<div class="selector"><h3>.button-soft-active-bg</h3><div class="color button-soft-active-bg"></div></div> |
|
| 134 |
<div class="selector"><h3>.button-soft-active-border</h3><div class="color button-soft-active-border"></div></div> |
|
| 135 |
|
|
| 136 |
|
|
| 137 |
<h1>SCAFFOLDING</h1> |
|
| 138 |
<div class="selector"><h3>.body-bg</h3><div class="color body-bg"></div></div> |
|
| 139 |
<div class="selector"><h3>.content-bg</h3><div class="color content-bg"></div></div> |
|
| 140 |
<div class="selector"><h3>.tabs-bg</h3><div class="color tabs-bg"></div></div> |
|
| 141 |
<div class="selector"><h3>.heading-bg</h3><div class="color heading-bg"></div></div> |
|
| 142 |
<div class="selector"><h3>.controlpanel-bg</h3><div class="color controlpanel-bg"></div></div> |
|
| 143 |
|
|
| 144 |
<div class="selector"><h3>.text-color</h3><div class="color text-color"></div></div> |
|
| 145 |
<div class="selector"><h3>.heading-color</h3><div class="color heading-color"></div></div> |
|
| 146 |
<div class="selector"><h3>.caption-color</h3><div class="color caption-color"></div></div> |
|
| 147 |
|
|
| 148 |
|
|
| 149 |
|
|
| 150 |
|
|
| 151 |
</div> |
|
| 152 |
</body> |
|
| 153 |
</html> |
|
| css/developement/farben.html | ||
|---|---|---|
| 1 |
<!DOCTYPE html> |
|
| 2 |
<html lang="de"> |
|
| 3 |
<head> |
|
| 4 |
<meta charset="utf-8" /> |
|
| 5 |
<link href="../style.css" rel="stylesheet"> |
|
| 6 |
<title>Kommunikation mit Farben in Kivitendo</title> |
|
| 7 |
|
|
| 8 |
<script type="text/javascript" src="../../js/jquery.js"></script> |
|
| 9 |
<script type="text/javascript" src="../../js/common.js"></script> |
|
| 10 |
<script type="text/javascript" src="../../js/namespace.js"></script> |
|
| 11 |
<script type="text/javascript" src="../../js/kivi.js"></script> |
|
| 12 |
<script type="text/javascript" src="../../js/locale/de.js"></script> |
|
| 13 |
<script type="text/javascript" src="../../js/jquery-ui.js"></script> |
|
| 14 |
<script type="text/javascript" src="../../js/kivi.QuickSearch.js"></script> |
|
| 15 |
<script type="text/javascript" src="../../js/kivi.ActionBar.js"></script> |
|
| 16 |
<script type="text/javascript" src="../../js/kivi.Draft.js"></script> |
|
| 17 |
<script type="text/javascript" src="../../js/kivi.File.js"></script> |
|
| 18 |
<script type="text/javascript" src="../../js/kivi.SalesPurchase.js"></script> |
|
| 19 |
<script type="text/javascript" src="../../js/kivi.Part.js"></script> |
|
| 20 |
<script type="text/javascript" src="../../js/ckeditor/ckeditor.js"></script> |
|
| 21 |
<script type="text/javascript" src="../../js/ckeditor/adapters/jquery.js"></script> |
|
| 22 |
<script type="text/javascript" src="../../js/kivi.io.js"></script> |
|
| 23 |
<script type="text/javascript" src="../../js/autocomplete_customer.js"></script> |
|
| 24 |
<script type="text/javascript" src="../../js/client_js.js"></script> |
|
| 25 |
<script type="text/javascript" src="../../js/jquery.cookie.js"></script> |
|
| 26 |
<script type="text/javascript" src="../../js/jquery.checkall.js"></script> |
|
| 27 |
<script type="text/javascript" src="../../js/jquery.download.js"></script> |
|
| 28 |
<script type="text/javascript" src="../../js/jquery/jquery.form.js"></script> |
|
| 29 |
<script type="text/javascript" src="../../js/jquery/fixes.js"></script> |
|
| 30 |
<script type="text/javascript" src="../../js/jquery/jquery.tooltipster.min.js"></script> |
|
| 31 |
<script type="text/javascript" src="../../js/jquery/ui/i18n/jquery.ui.datepicker-de.js"></script> |
|
| 32 |
|
|
| 33 |
</head> |
|
| 34 |
<body class="developing"> |
|
| 35 |
<header> |
|
| 36 |
<h1>Bedeutung & Anwendung von Farben in Kivitendo</h1> |
|
| 37 |
<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav> |
|
| 38 |
</header> |
|
| 39 |
<div class="wrapper"> |
|
| 40 |
<h2>Buttons</h2> |
|
| 41 |
<form action="#"> |
|
| 42 |
<h3>Formular absenden (Datenmanipulation, unwiderrufbar)</h3> |
|
| 43 |
<p>Diese Buttons starten den Versand der Formulardaten an den Server (Submit). Aus diesem Grunde sind diese entsprechend prominent eingefärbt.</p> |
|
| 44 |
<div class="buttons"> |
|
| 45 |
<table> |
|
| 46 |
<tbody> |
|
| 47 |
<tr> |
|
| 48 |
<td><input type="submit" value="Absenden" class="wi-small"></td> |
|
| 49 |
<td><input type="submit" value="Absenden" class="hover wi-small"></td> |
|
| 50 |
<td><input type="submit" value="Absenden" class="active wi-small"></td> |
|
| 51 |
<td>(INPUT[type=submit])</td> |
|
| 52 |
</tr> |
|
| 53 |
<tr> |
|
| 54 |
<td><input type="button" value="Absenden" class="wi-small"></td> |
|
| 55 |
<td><input type="button" value="Absenden" class="hover wi-small"></td> |
|
| 56 |
<td><input type="button" value="Absenden" class="active wi-small"></td> |
|
| 57 |
<td>(INPUT[type=button])</td> |
|
| 58 |
</tr> |
|
| 59 |
<tr> |
|
| 60 |
<td><button type="button" class=" wi-small">Speichern</button></td> |
|
| 61 |
<td><button type="button" class="hover wi-small">Speichern</button></td> |
|
| 62 |
<td><button type="button" class="active wi-small">Speichern</button></td> |
|
| 63 |
<td>(BUTTON)</td> |
|
| 64 |
</tr> |
|
| 65 |
<tr> |
|
| 66 |
<td><a href="#" class="button wi-small">Absenden</a></td> |
|
| 67 |
<td><a href="#" class="button hover wi-small">Absenden</a></td> |
|
| 68 |
<td><a href="#" class="button active wi-small">Absenden</a></td> |
|
| 69 |
<td>(A.button-Tag)</td> |
|
| 70 |
</tr> |
|
| 71 |
</tbody> |
|
| 72 |
</table> |
|
| 73 |
</div><!-- ./buttons --> |
|
| 74 |
|
|
| 75 |
<h3>Navigation & User Interface</h3> |
|
| 76 |
<p>Diese Buttons dienen zur Bedienung der grafischen Benutzer-Schnittstelle im Client und verursachen KEINE unwiderrufliche Datenmanipulationen auf Seiten des Servers.<br>Aus diesem Grunde wird die Klasse <b>«.neutral»</b> bereitgestellt.</p> |
|
| 77 |
<div class="buttons"> |
|
| 78 |
<table> |
|
| 79 |
<tbody> |
|
| 80 |
<tr> |
|
| 81 |
<td><input type="reset" value="Zurücksetzen" class="neutral wi-normal"></td> |
|
| 82 |
<td><input type="reset" value="Zurücksetzen" class="neutral-hover wi-normal"></td> |
|
| 83 |
<td><input type="reset" value="Zurücksetzen" class="neutral-active wi-normal"></td> |
|
| 84 |
<td>(INPUT[submit].neutral-Tag)</td> |
|
| 85 |
</tr> |
|
| 86 |
<tr> |
|
| 87 |
<td><button class="neutral wi-normal">Details anzeigen</button></td> |
|
| 88 |
<td><button class="neutral-hover wi-normal">Details anzeigen</button></td> |
|
| 89 |
<td><button class="neutral-active wi-normal">Details anzeigen</button></td> |
|
| 90 |
<td>(BUTTON.neutral-Tag)</td> |
|
| 91 |
</tr> |
|
| 92 |
<tr> |
|
| 93 |
<td><a href="#" class="button neutral wi-normal">Filter anzeigen</a></td> |
|
| 94 |
<td><a href="#" class="button neutral-hover wi-normal">Filter anzeigen</a></td> |
|
| 95 |
<td><a href="#" class="button neutral-active wi-normal">Filter anzeigen</a></td> |
|
| 96 |
<td>(A.button.neutral-Tag)</td> |
|
| 97 |
</tr> |
|
| 98 |
</tbody> |
|
| 99 |
</table> |
|
| 100 |
</div><!-- ./buttons --> |
|
| 101 |
</form> |
|
| 102 |
|
|
| 103 |
<h2>Nachrichten (Messages)</h2> |
|
| 104 |
<p>Es gibt zwei ggf. sogar drei Message-<b>Container-Varianten</b> in Kivitendo:</p> |
|
| 105 |
<ul> |
|
| 106 |
<li>Flash_Messages</li> |
|
| 107 |
<li>Old_Style</li> |
|
| 108 |
</ul> |
|
| 109 |
<p>Dann gibt es mind. 4 <b>Message-Arten</b>:</p> |
|
| 110 |
<ul> |
|
| 111 |
<li>Error</li> |
|
| 112 |
<li>Warning</li> |
|
| 113 |
<li>Info oder Hint</li> |
|
| 114 |
<li>OK</li> |
|
| 115 |
</ul> |
|
| 116 |
<p>Nachfolgend werden jeweils zuerst die komplexen Flash-Messages, dann die einfachen Old Style-Messages in P- & DIV-Containern aufgeführt.</p> |
|
| 117 |
|
|
| 118 |
|
|
| 119 |
<h3>Error</h3> |
|
| 120 |
|
|
| 121 |
<p>Fehlermeldung, die ein Grund zur Sorge sein sollten. Diese Nachrichten-Art nur in schwerwiegenden Fällen einsetzen, damit der Benutzer sofort erkennt, dass was schiefgelaufen ist.</p> |
|
| 122 |
<div id="flash_error" class="flash_message flash_message_error"> |
|
| 123 |
<div class="button-container"> |
|
| 124 |
<a href="#flash_error" style="float:right" class="icon-close button wi-tiny">✕</a> |
|
| 125 |
<span id="flash_error_disp" class="display" style="float:left;"> |
|
| 126 |
<a href="#flash_error" style="float:left;" onclick="$('#flash_detail_error').toggle();" class="button wi-tiny">Details</a>
|
|
| 127 |
</span> |
|
| 128 |
</div> |
|
| 129 |
<div class="message-container"> |
|
| 130 |
<span class="flash_title" style="float:left;">Fehler:</span> |
|
| 131 |
<div class="flash_notification" style="float:left;"> |
|
| 132 |
<span id="flash_error_content" class="content">Es ist ein schwerwiegender Fehler aufgetreten!</span> |
|
| 133 |
<div id="flash_detail_error" class="detail" style="display:none;"> |
|
| 134 |
<span id="flash_error_detail">Details zum aufgetretenen, schwerwiegenden Fehler. Hierbei handelt es sich aber nicht um einen Rechtschreibefehler.</span> |
|
| 135 |
<a href="#flash_error" style="float:left" onclick="$('#flash_detail_error').hide()" class="icon-close button wi-tiny">✕</a>
|
|
| 136 |
</div> |
|
| 137 |
</div> |
|
| 138 |
</div> |
|
| 139 |
</div> |
|
| 140 |
<p class="message message_error">Es ist ein Fehler aufgetreten! (P.message_error)</p> |
|
| 141 |
<div class="message message_error">Es ist ein Fehler aufgetreten! (DIV.message_error)</div> |
|
| 142 |
|
|
| 143 |
|
|
| 144 |
<h3>Warning</h3> |
|
| 145 |
|
|
| 146 |
<p>Wichtige Mitteilung, die aber kein Grund zur Sorge geben sollte. Diese Nachricht unterstützt den Benutzer bei kritischen Prozessen, sollte ihn aber bei täglichem Einsatz nicht von der Arbeit abhalten.</p> |
|
| 147 |
<div id="flash_warning" class="flash_message flash_message_warning"> |
|
| 148 |
<div class="button-container"> |
|
| 149 |
<a href="#flash_warning" style="float:right" class="icon-close button wi-tiny">✕</a> |
|
| 150 |
<span id="flash_warning_disp" class="display" style="float:left;"> |
|
| 151 |
<a href="#flash_warning" style="float:left;" onclick="$('#flash_detail_warning').toggle();" class="button wi-tiny">Details</a>
|
|
| 152 |
</span> |
|
| 153 |
</div> |
|
| 154 |
<div class="message-container"> |
|
| 155 |
<span class="flash_title" style="float:left;">Warnung:</span> |
|
| 156 |
<div class="flash_notification" style="float:left;"> |
|
| 157 |
<span id="flash_warning_content" class="content">Diesen Hinweis sollten Sie ernst nehmen, aber es besteht beim Lesen noch kein Grund zur Beunruhigung.</span> |
|
| 158 |
<div id="flash_detail_warning" class="detail" style="display:none;"> |
|
| 159 |
<span id="flash_warning_detail">Sie sollten diesen Hinweis ernst nehmen, und vielleicht kommt er Ihnen auch hinlänglich bekannt vor, sodass Sie wissen, wie Sie damit umzugehen haben. Sie sollten sich darüber im Klaren sein, was diese Warnung bedeutet.</span> |
|
| 160 |
<a href="#flash_warning" style="float:left" onclick="$('#flash_detail_warning').hide()" class="icon-close button wi-tiny">✕</a>
|
|
| 161 |
</div> |
|
| 162 |
</div> |
|
| 163 |
</div> |
|
| 164 |
</div> |
|
| 165 |
<p class="message message_warning">Achtung, wichtiger Hinweis! (P.message_warning)</p> |
|
| 166 |
<div class="message message_warning">Achtung, wichtiger Hinweis! (DIV.message_warning)</div> |
|
| 167 |
|
|
| 168 |
|
|
| 169 |
<h3>Info / Hint</h3> |
|
| 170 |
|
|
| 171 |
<p>Hier handelt es sich eher um neutrale, ggf. zu ignorierende Routine-Nachrichten, die den Benutzer auch eine gewisse Sicherheit geben sollten. Nicht im Übermass einsetzen, da die Benutzer das Kivitendo-System u.U. täglich bedienen müssen.</p> |
|
| 172 |
<div id="flash_info" class="flash_message flash_message_info"> |
|
| 173 |
<div class="button-container"> |
|
| 174 |
<a href="#flash_info" style="float:right" class="icon-close button wi-tiny">✕</a> |
|
| 175 |
<span id="flash_info_disp" class="display" style="float:left;"> |
|
| 176 |
<a href="#flash_info" style="float:left;" onclick="$('#flash_detail_info').toggle();" class="button wi-tiny"> Details </a>
|
|
| 177 |
</span> |
|
| 178 |
</div> |
|
| 179 |
<div class="message-container"> |
|
| 180 |
<span class="flash_title" style="float:left;">Information:</span> |
|
| 181 |
<div class="flash_notification" style="float:left;"> |
|
| 182 |
<span id="flash_info_content" class="content">Absolut kein Grund zur Beunruhigung, aber lesen sollten Sie die Nachricht vielleicht einmal in Ihrem Leben.</span> |
|
| 183 |
<div id="flash_detail_info" class="detail" style="display:none;"> |
|
| 184 |
<span id="flash_info_detail">Manchmal ist es einfacher, solche Nachrichten zu lesen als gleich das Manual durchrackern zu müssen, was sowieso nur wenige Prozent der Kivitendo-Nutzer machen, ausser eben die karrierebewussten Anwender oder die innerbetrieblich Verantwortlichen.</span> |
|
| 185 |
<a href="#flash_info" style="float:left" onclick="$('#flash_detail_info').hide()" class="icon-close button wi-tiny">✕</a>
|
|
| 186 |
</div> |
|
| 187 |
</div> |
|
| 188 |
</div> |
|
| 189 |
</div> |
|
| 190 |
<p class="message message_hint">Es wurden keine Dokumente gefunden, was durchaus korrekt sein kann! (P.message_<b>hint</b>)</p> |
|
| 191 |
<div class="message message_hint">Die Buchungen sind noch nicht abgespeichert worden! (DIV.message_<b>hint</b>)</div> |
|
| 192 |
|
|
| 193 |
|
|
| 194 |
<h3>OK</h3> |
|
| 195 |
|
|
| 196 |
<p>Reine Info, die man getrost ignorieren könnte oder dürfte, aber dem Benutzer die Gewissheit gibt, dass der ausgeführte Prozess erfolgreich abgelaufen ist.</p> |
|
| 197 |
<div id="flash_ok" class="flash_message flash_message_ok"> |
|
| 198 |
<div class="button-container"> |
|
| 199 |
<a href="#flash_ok" style="float:right" class="icon-close button wi-tiny">✕</a> |
|
| 200 |
<span id="flash_ok_disp" class="display" style="float:left;"> |
|
| 201 |
<a href="#flash_ok" style="float:left;" onclick="$('#flash_detail_ok').toggle();" class="button wi-tiny">Details</a>
|
|
| 202 |
</span> |
|
| 203 |
</div> |
|
| 204 |
<div class="message-container"> |
|
| 205 |
<span class="flash_title" style="float:left;">OK:</span> |
|
| 206 |
<div class="flash_notification" style="float:left;"> |
|
| 207 |
<span id="flash_ok_content" class="content">Sie haben erfolgreich einen Prozess ausführen lassen, gratuliere.</span> |
|
| 208 |
<div id="flash_detail_ok" class="detail" style="display:none;"> |
|
| 209 |
<span id="flash_ok_detail">Das ist aber noch kein Grund zur Freude. Lesen Sie doch bitte hier, was es im weiteren zu beachten gibt.</span> |
|
| 210 |
<a href="#flash_ok" style="float:left" onclick="$('#flash_detail_ok').hide()" class="icon-close button wi-tiny">✕</a>
|
|
| 211 |
</div> |
|
| 212 |
</div> |
|
| 213 |
</div> |
|
| 214 |
</div> |
|
| 215 |
<p class="message message_ok">Achtung, wichtiger Hinweis! (P.message_ok)</p> |
|
| 216 |
<div class="message message_ok">Achtung, wichtiger Hinweis! (DIV.message_ok)</div> |
|
| 217 |
|
|
| 218 |
|
|
| 219 |
</div> |
|
| 220 |
</body> |
|
| 221 |
</html> |
|
| css/developement/form-elements-special.html | ||
|---|---|---|
| 1 |
<!DOCTYPE html> |
|
| 2 |
<html lang="de"> |
|
| 3 |
<head> |
|
| 4 |
<meta charset="utf-8" /> |
|
| 5 |
<link href="../style.css" rel="stylesheet"> |
|
| 6 |
|
|
| 7 |
<script type="text/javascript" src="../../js/jquery.js"></script> |
|
| 8 |
<script type="text/javascript" src="../../js/common.js"></script> |
|
| 9 |
<script type="text/javascript" src="../../js/namespace.js"></script> |
|
| 10 |
<script type="text/javascript" src="../../js/kivi.js"></script> |
|
| 11 |
<script type="text/javascript" src="../../js/locale/de.js"></script> |
|
| 12 |
<script type="text/javascript" src="../../js/jquery-ui.js"></script> |
|
| 13 |
<script type="text/javascript" src="../../js/kivi.QuickSearch.js"></script> |
|
| 14 |
<script type="text/javascript" src="../../js/kivi.ActionBar.js"></script> |
|
| 15 |
<script type="text/javascript" src="../../js/kivi.Draft.js"></script> |
|
| 16 |
<script type="text/javascript" src="../../js/kivi.File.js"></script> |
|
| 17 |
<script type="text/javascript" src="../../js/kivi.SalesPurchase.js"></script> |
|
| 18 |
<script type="text/javascript" src="../../js/kivi.Part.js"></script> |
|
| 19 |
<script type="text/javascript" src="../../js/ckeditor/ckeditor.js"></script> |
|
| 20 |
<script type="text/javascript" src="../../js/ckeditor/adapters/jquery.js"></script> |
|
| 21 |
<script type="text/javascript" src="../../js/kivi.io.js"></script> |
|
| 22 |
<script type="text/javascript" src="../../js/autocomplete_customer.js"></script> |
|
| 23 |
<script type="text/javascript" src="../../js/client_js.js"></script> |
|
| 24 |
<script type="text/javascript" src="../../js/jquery.cookie.js"></script> |
|
| 25 |
<script type="text/javascript" src="../../js/jquery.checkall.js"></script> |
|
| 26 |
<script type="text/javascript" src="../../js/jquery.download.js"></script> |
|
| 27 |
<script type="text/javascript" src="../../js/jquery/jquery.form.js"></script> |
|
| 28 |
<script type="text/javascript" src="../../js/jquery/fixes.js"></script> |
|
| 29 |
<script type="text/javascript" src="../../js/jquery/jquery.tooltipster.min.js"></script> |
|
| 30 |
<script type="text/javascript" src="../../js/jquery/ui/i18n/jquery.ui.datepicker-de.js"></script> |
|
| 31 |
<script type="text/javascript" src="../../js/jquery.multiselect2side.js"></script> |
|
| 32 |
<script type="text/javascript" src="../../js/jquery.selectboxes.js"></script> |
|
| 33 |
|
|
| 34 |
<title>Spezielle Formular-Elemente</title> |
|
| 35 |
</head> |
|
| 36 |
<body class="developing"> |
|
| 37 |
<header> |
|
| 38 |
<h1>Spezielle Formular-Elemente</h1> |
|
| 39 |
<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav> |
|
| 40 |
</header> |
|
| 41 |
<form action="#"> |
|
| 42 |
|
|
| 43 |
<div class="wrapper"> |
|
| 44 |
|
|
| 45 |
|
|
| 46 |
<div class="col"> |
|
| 47 |
<h2>ms2side (.ms2side / MultiSelect2Side)</h2> |
|
| 48 |
|
|
| 49 |
<div class="ms2side"> |
|
| 50 |
<p>Folgende Elemente können einer Gruppe zugeordnet werden:</p> |
|
| 51 |
<!-- vormals:.clearfix --> |
|
| 52 |
<select name="group_usersms2side__orig" multiple="" id="group_users" style="display: none;"> |
|
| 53 |
<option value="2">Element 2</option> |
|
| 54 |
<option value="1">Element 1</option> |
|
| 55 |
</select> |
|
| 56 |
<script type="text/javascript"> |
|
| 57 |
$().ready(function() {
|
|
| 58 |
$('#group_users').multiselect2side({ moveOptions: false, labeldx: "Gruppenmitglieder", labelsx: "Alle BenutzerInnen" });
|
|
| 59 |
}); |
|
| 60 |
</script> |
|
| 61 |
<div class="ms2side__div"> |
|
| 62 |
<div class="ms2side__select"> |
|
| 63 |
<div class="ms2side__header"> |
|
| 64 |
Alle verfügbaren Elemente |
|
| 65 |
</div> |
|
| 66 |
<select title="Alle BenutzerInnen" name="group_usersms2side__sx" id="group_usersms2side__sx" size="undefined" multiple="multiple"> |
|
| 67 |
<option value="2">Element 2</option> |
|
| 68 |
<option value="1">Element 1</option> |
|
| 69 |
</select> |
|
| 70 |
</div> |
|
| 71 |
<div class="ms2side__options" style="padding-top: 7.333333492279053px;"> |
|
| 72 |
<p class="AddOne ms2side__hide" title="Add Selected">›</p> |
|
| 73 |
<p class="AddAll" title="Add All">»</p> |
|
| 74 |
<p class="RemoveOne ms2side__hide" title="Remove Selected">‹</p> |
|
| 75 |
<p class="RemoveAll ms2side__hide" title="Remove All">«</p> |
|
| 76 |
</div> |
|
| 77 |
<div class="ms2side__select"> |
|
| 78 |
<div class="ms2side__header"> |
|
| 79 |
Zugeordnete Elemente |
|
| 80 |
</div> |
|
| 81 |
<select title="Gruppenmitglieder" name="group_usersms2side__dx" id="group_usersms2side__dx" size="undefined" multiple="multiple"> |
|
| 82 |
</select> |
|
| 83 |
</div> |
|
| 84 |
<span id="group_usersms2side_hidden" style="display: none;"></span> |
|
| 85 |
</div> |
|
| 86 |
<script type="text/javascript"> |
|
| 87 |
$().ready(function() {
|
|
| 88 |
$('#group_clients').multiselect2side({ moveOptions: false, labeldx: "Mandanten, für die diese Gruppe gültig ist", labelsx: "Alle Mandanten" });
|
|
| 89 |
}); |
|
| 90 |
</script> |
|
| 91 |
|
|
| 92 |
</div> |
|
| 93 |
|
|
| 94 |
<div class="buttons"> |
|
| 95 |
<a class="button neutral" href="#">Zurück</a> |
|
| 96 |
<input value="Speichern" type="button"> |
|
| 97 |
</div> |
|
| 98 |
|
|
| 99 |
</div> |
|
| 100 |
|
|
| 101 |
|
|
| 102 |
|
|
| 103 |
<div class="col wi-wide"> |
|
| 104 |
<h2>Boxes (.boxes)</h2> |
|
| 105 |
<div class="boxes"> |
|
| 106 |
<h3 title="Select/Deselect all"><input title="Select/Deselect" value="1" name="dummy1" type="checkbox" id="dummy1"> |
|
| 107 |
<label for="dummy1">Überschrift (Select all)</label> |
|
| 108 |
<script type="text/javascript">$('#dummy1').checkall('.checkallgroup1');</script>
|
|
| 109 |
</h3> |
|
| 110 |
<div> |
|
| 111 |
<input value="1" class="checkallgroup1" id="group_rights_map_customer_vendor_edit" name="group.rights_map.customer_vendor_edit" type="checkbox"> |
|
| 112 |
<label for="group_rights_map_customer_vendor_edit">Option 1</label> |
|
| 113 |
</div> |
|
| 114 |
<div> |
|
| 115 |
<input value="1" id="group_rights_map_customer_vendor_all_edit" class="checkallgroup1" name="group.rights_map.customer_vendor_all_edit" type="checkbox"> |
|
| 116 |
<label for="group_rights_map_customer_vendor_all_edit">Option 2</label> |
|
| 117 |
</div> |
|
| 118 |
<div> |
|
| 119 |
<input value="1" name="group.rights_map.part_service_assembly_edit" id="group_rights_map_part_service_assembly_edit" type="checkbox" class="checkallgroup1"> |
|
| 120 |
<label for="group_rights_map_part_service_assembly_edit">Option 3</label> |
|
| 121 |
</div> |
|
| 122 |
<div> |
|
| 123 |
<input value="1" name="group.rights_map.part_service_assembly_details" id="group_rights_map_part_service_assembly_details" class="checkallgroup1" type="checkbox"> |
|
| 124 |
<label for="group_rights_map_part_service_assembly_details">Option 4</label> |
|
| 125 |
</div> |
|
| 126 |
<div> |
|
| 127 |
<input value="1" id="group_rights_map_project_edit" type="checkbox" name="group.rights_map.project_edit" class="checkallgroup1"> |
|
| 128 |
<label for="group_rights_map_project_edit">Option 4</label> |
|
| 129 |
</div> |
|
| 130 |
</div> |
|
| 131 |
</div> |
|
| 132 |
|
|
| 133 |
|
|
| 134 |
</div><!-- /.wrapper --> |
|
| 135 |
|
|
| 136 |
|
|
| 137 |
|
|
| 138 |
<div class="form-addition"> |
|
| 139 |
<h3 class="h4">In Bericht aufnehmen</h3> |
|
| 140 |
<div class="list col"> |
|
| 141 |
<h4> Numbers & IDs </h4> |
|
| 142 |
<div> |
|
| 143 |
<input name="l_id" id="l_id" type="checkbox" value="Y"> |
|
| 144 |
<label for="l_id"> Buchungsnummer </label> |
|
| 145 |
</div> |
|
| 146 |
<div> |
|
| 147 |
<input name="l_customernumber" id="l_customernumber" type="checkbox" value="Y" checked=""> |
|
| 148 |
<label for="l_customernumber"> Kundennummer </label> |
|
| 149 |
</div> |
|
| 150 |
<div> |
|
| 151 |
<input name="l_taxnumber" id="l_taxnumber" type="checkbox" value="Y"> |
|
| 152 |
<label for="l_taxnumber"> Steuernummer </label> |
|
| 153 |
</div> |
|
| 154 |
<div> |
|
| 155 |
<input name="l_invnumber" id="l_invnumber" type="checkbox" value="Y"> |
|
| 156 |
<label for="l_invnumber"> Rechnungen </label> |
|
| 157 |
</div> |
|
| 158 |
</div> |
|
| 159 |
<div class="list col"> |
|
| 160 |
<h4> Kunde </h4> |
|
| 161 |
<div> |
|
| 162 |
<input name="l_name" id="l_name" type="checkbox" value="Y" checked=""> |
|
| 163 |
<label for="l_name"> Kundenname </label> |
|
| 164 |
</div> |
|
| 165 |
<div> |
|
| 166 |
<input name="l_contact" id="l_contact" type="checkbox" value="Y" checked=""> |
|
| 167 |
<label for="l_contact"> Kontakt </label> |
|
| 168 |
</div> |
|
| 169 |
</div> |
|
| 170 |
<div class="list col"> |
|
| 171 |
<h4> Adresse </h4> |
|
| 172 |
<div> |
|
| 173 |
<input name="l_street" id="l_street" type="checkbox" value="Y" checked=""> |
|
| 174 |
<label for="l_street"> Straße </label> |
|
| 175 |
</div> |
|
| 176 |
<div> |
|
| 177 |
<input name="l_zipcode" id="l_zipcode" type="checkbox" value="Y" checked=""> |
|
| 178 |
<label for="l_zipcode"> PLZ </label> |
|
| 179 |
</div> |
|
| 180 |
<div> |
|
| 181 |
<input name="l_city" id="l_city" type="checkbox" value="Y" checked=""> |
|
| 182 |
<label for="l_city"> Stadt </label> |
|
| 183 |
</div> |
|
| 184 |
<div> |
|
| 185 |
<input name="l_country" id="l_country" type="checkbox" value="Y" checked=""> |
|
| 186 |
<label for="l_country"> Land </label> |
|
| 187 |
</div> |
|
| 188 |
<div> |
|
| 189 |
<input name="l_gln" id="l_gln" type="checkbox" value="Y" checked=""> |
|
| 190 |
<label for="l_gln"> GLN </label> |
|
| 191 |
</div> |
|
| 192 |
</div> |
|
| 193 |
<div class="list col"> |
|
| 194 |
<h4> Benutzerdefinierte Variablen </h4> |
|
| 195 |
<!-- PENDENT: bessere Loesung suchen --> |
|
| 196 |
<input type="checkbox" name="l_cvar_Geburtsdatum" id="l_cvar_Geburtsdatum" value="Y"> |
|
| 197 |
<label for="l_cvar_Geburtsdatum">Geburtsdatum</label> |
|
| 198 |
</div> |
|
| 199 |
</div> |
|
| 200 |
|
|
| 201 |
|
|
| 202 |
<div class="wrapper"> |
|
| 203 |
<div class="filter_toggle" style="display: block;"> |
|
| 204 |
<a href="#" onclick="javascript:$('.filter_toggle').toggle()" class="button toggle off neutral">Filter zeigen</a>
|
|
| 205 |
</div> |
|
| 206 |
<div class="filter_toggle" style="display: none;"> |
|
| 207 |
<a href="#" onclick="javascript:$('.filter_toggle').toggle()" class="button toggle on neutral with-panel">Filter verbergen</a>
|
|
| 208 |
<!-- PENDENT: Panel einbauen --> |
|
| 209 |
<div class="filter-toggle-panel"> |
|
| 210 |
<table id="filter_table" class="tbl-horizontal"> |
|
| 211 |
<caption>Ware</caption> |
|
| 212 |
<tbody> |
|
| 213 |
<tr> |
|
| 214 |
<th>Beschreibung</th> |
|
| 215 |
<td><input value="" name="filter.name:substr::ilike" type="text" id="filter_name_substr_ilike" class="wi-normal" size="20"> |
|
| 216 |
</td> |
|
| 217 |
</tr> |
|
| 218 |
<tr> |
|
| 219 |
<th>Typ</th> |
|
| 220 |
<td> |
|
| 221 |
<select name="filter.type" id="price_rule_filter_type" class="wi-normal"> |
|
| 222 |
<option value=""></option> |
|
| 223 |
<option value="customer">Preisregeln (Verkauf)</option> |
|
| 224 |
<option value="vendor">Preisregeln (Einkauf)</option> |
|
| 225 |
</select> |
|
| 226 |
</td> |
|
| 227 |
</tr> |
|
| 228 |
<tr> |
|
| 229 |
<th>Ware</th> |
|
| 230 |
<td><span class="part_picker"><input data-part-picker-data="{'class':'wi-normal'}" value="" name="filter.item_type_matches[].part" id="filter_item_type_matches5719277_part" type="hidden" class="wi-normal part_autocomplete">
|
|
| 231 |
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input value="" name="" type="text" class="wi-normal ui-autocomplete-input" id="filter_item_type_matches5719277_part_name" autocomplete="off"> |
|
| 232 |
<span class="ppp_popup_button"></span></span></td> |
|
| 233 |
</tr> |
|
| 234 |
<tr> |
|
| 235 |
<th>Warengruppe</th> |
|
| 236 |
<td> |
|
| 237 |
<select name="filter.item_type_matches[].partsgroup" id="filter_item_type_matches5719278_partsgroup" class="wi-normal"> |
|
| 238 |
<option value=""></option> |
|
| 239 |
<option value="447">Computer Occasion</option> |
|
| 240 |
<option value="448">Hardwareteile Occasion</option> |
|
| 241 |
<option value="449">Computer neu</option> |
|
| 242 |
<option value="450">Hardwareteile neu</option> |
|
| 243 |
<option value="451">Peripheriegeräte neu</option> |
|
| 244 |
<option value="452">Peripheriegeräte Occasion</option> |
|
| 245 |
<option value="528">Dienstleistung</option> |
|
| 246 |
<option value="594">Lizenzgebühren</option> |
|
| 247 |
<option value="635">Zubehör</option> |
|
| 248 |
<option value="681">Verbrauchsmaterial</option> |
|
| 249 |
<option value="920">Geldbetraege</option> |
|
| 250 |
<option value="13376">0Kundengerät</option> |
|
| 251 |
<option value="27265">Dienstleistung (Stunden)</option> |
|
| 252 |
</select> |
|
| 253 |
</td> |
|
| 254 |
</tr> |
|
| 255 |
<tr> |
|
| 256 |
<th>Menge</th> |
|
| 257 |
<td><input value="" name="filter.item_type_matches[].qty" type="text" id="filter_item_type_matches5719279_qty" class="wi-normal"> |
|
| 258 |
</td> |
|
| 259 |
</tr> |
|
| 260 |
<tr id="price_rule_filter_customer_tr" style="display:none"> |
|
| 261 |
<th>Kunde</th> |
|
| 262 |
<td><span class="customer_vendor_picker"><input value="" name="filter.item_type_matches[].customer" id="price_rule_filter_customer" type="hidden" class="wi-normal customer_vendor_autocomplete" data-customer-vendor-picker-data="{'type':'customer','class':'wi-normal'}">
|
|
| 263 |
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input value="" name="" class="wi-normal ui-autocomplete-input" type="customer" id="price_rule_filter_customer_name" autocomplete="off"> |
|
| 264 |
</span></td> |
|
| 265 |
</tr> |
|
| 266 |
<tr id="price_rule_filter_vendor_tr" style="display:none"> |
|
| 267 |
<!-- PENDENT: Korrekt mit customer? --> |
|
| 268 |
<th>Lieferant</th> |
|
| 269 |
<td><span class="customer_vendor_picker"><input value="" name="filter.item_type_matches[].vendor" id="price_rule_filter_vendor" type="hidden" class="wi-normal customer_vendor_autocomplete" data-customer-vendor-picker-data="{'type':'vendor','class':'wi-normal'}">
|
|
| 270 |
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input value="" name="" class="wi-normal ui-autocomplete-input" type="vendor" id="price_rule_filter_vendor_name" autocomplete="off"> |
|
| 271 |
</span></td> |
|
| 272 |
</tr> |
|
| 273 |
<tr> |
|
| 274 |
<th>Kunden-/Lieferantentyp</th> |
|
| 275 |
<td> |
|
| 276 |
<select name="filter.item_type_matches[].business" id="filter_item_type_matches5719280_business" class="wi-normal"> |
|
| 277 |
<option value=""></option> |
|
| 278 |
<option value="23353">LehrerInnen</option> |
|
| 279 |
<option value="23347">IT-Firma</option> |
|
| 280 |
<option value="41723">Behörde</option> |
|
| 281 |
<option value="158">Firma</option> |
|
| 282 |
<option value="157">Privatperson</option> |
|
| 283 |
</select> |
|
| 284 |
</td> |
|
| 285 |
</tr> |
|
| 286 |
</tbody> |
|
| 287 |
</table> |
|
| 288 |
<table id="filter_table" class="tbl-horizontal"> |
|
| 289 |
<caption>Dates</caption> |
|
| 290 |
<tbody> |
|
| 291 |
<tr> |
|
| 292 |
<th>Liefertermin</th> |
|
| 293 |
<td><input value="" name="filter.item_type_matches[].reqdate" type="text" class="datepicker wi-date hasDatepicker" id="filter_item_type_matches5719281_reqdate" data-validate="date" size="11"> |
|
| 294 |
<img class="ui-datepicker-trigger" src="image/calendar.png" alt="..." title="..."></td> |
|
| 295 |
</tr> |
|
| 296 |
<tr> |
|
| 297 |
<th>Buchungsdatum Beleg</th> |
|
| 298 |
<td><input value="" name="filter.item_type_matches[].transdate" type="text" class="datepicker wi-date hasDatepicker" id="filter_item_type_matches5719282_transdate" data-validate="date" size="11"> |
|
| 299 |
<img class="ui-datepicker-trigger" src="image/calendar.png" alt="..." title="..."></td> |
|
| 300 |
</tr> |
|
| 301 |
<tr> |
|
| 302 |
<th class="caption" colspan="2">Prices & Discounts</th> |
|
| 303 |
</tr> |
|
| 304 |
<tr> |
|
| 305 |
<th>Preisgruppe</th> |
|
| 306 |
<td> |
|
| 307 |
<select name="filter.item_type_matches[].pricegroup" id="filter_item_type_matches5719283_pricegroup" class="wi-normal"> |
|
| 308 |
<option value=""></option> |
|
| 309 |
<option value="0">keine Preisgruppe</option> |
|
| 310 |
<option value="27267">50 CHF pro Stunde</option> |
|
| 311 |
<option value="27268">100 CHF pro Stunde</option> |
|
| 312 |
</select> |
|
| 313 |
<br> |
|
| 314 |
</td> |
|
| 315 |
</tr> |
|
| 316 |
<tr> |
|
| 317 |
<th>Preis</th> |
|
| 318 |
<td><input value="" name="filter.price:number" type="text" id="filter_price_number" class="wi-normal" size="20"> |
|
| 319 |
</td> |
|
| 320 |
</tr> |
|
| 321 |
<tr> |
|
| 322 |
<th>Abschlag</th> |
|
| 323 |
<td><input value="" name="filter.reduction:number" type="text" id="filter_reduction_number" class="wi-normal" size="20"> |
|
| 324 |
</td> |
|
| 325 |
</tr> |
|
| 326 |
<tr> |
|
| 327 |
<th>Rabatt</th> |
|
| 328 |
<td><input value="" name="filter.discount:number" type="text" id="filter_discount_number" class="wi-normal" size="20"> |
|
| 329 |
</td> |
|
| 330 |
</tr> |
|
| 331 |
<tr> |
|
| 332 |
<th class="caption" colspan="2">Status</th> |
|
| 333 |
</tr> |
|
| 334 |
<tr> |
|
| 335 |
<th>Priorität</th> |
|
| 336 |
<td> |
|
| 337 |
<select name="filter.priority" id="filter_priority" class="wi-normal"> |
|
| 338 |
<option value="" selected="">Alle</option> |
|
| 339 |
<option value="3">Normal</option> |
|
| 340 |
<option value="4">Override</option> |
|
| 341 |
</select> |
|
| 342 |
</td> |
|
| 343 |
</tr> |
|
| 344 |
<tr> |
|
| 345 |
<th>Ungültig</th> |
|
| 346 |
<td> |
|
| 347 |
<select name="filter.obsolete" id="filter_obsolete" class="wi-normal"> |
|
| 348 |
<option value="">Beide</option> |
|
| 349 |
<option value="0" selected="">Gültig</option> |
|
| 350 |
<option value="1">Ungültig</option> |
|
| 351 |
</select> |
|
| 352 |
</td> |
|
| 353 |
</tr> |
|
| 354 |
</tbody> |
|
| 355 |
</table> |
|
| 356 |
<div class="col list"> |
|
| 357 |
<h3 class="caption">Hat Regeltypen</h3> |
|
| 358 |
<div> |
|
| 359 |
<input value="part" name="filter.has_item_type[]" id="filter_has_item_type5719284" type="checkbox"> |
|
| 360 |
<label for="filter_has_item_type5719284">Ware</label> |
|
| 361 |
<br> |
|
| 362 |
<input value="customer" name="filter.has_item_type[]" id="filter_has_item_type5719285" type="checkbox"> |
|
| 363 |
<label for="filter_has_item_type5719285">Kunde</label> |
|
| 364 |
<br> |
|
| 365 |
<input value="vendor" name="filter.has_item_type[]" id="filter_has_item_type5719286" type="checkbox"> |
|
| 366 |
<label for="filter_has_item_type5719286">Lieferant</label> |
|
| 367 |
<br> |
|
| 368 |
<input value="business" name="filter.has_item_type[]" id="filter_has_item_type5719287" type="checkbox"> |
|
| 369 |
<label for="filter_has_item_type5719287">Kunden-/Lieferantentyp</label> |
|
| 370 |
<br> |
|
| 371 |
<input value="partsgroup" name="filter.has_item_type[]" id="filter_has_item_type5719288" type="checkbox"> |
|
| 372 |
<label for="filter_has_item_type5719288">Warengruppe</label> |
|
| 373 |
<br> |
|
| 374 |
<input value="qty" name="filter.has_item_type[]" id="filter_has_item_type5719289" type="checkbox"> |
|
| 375 |
<label for="filter_has_item_type5719289">Menge</label> |
|
| 376 |
<br> |
|
| 377 |
<input value="reqdate" name="filter.has_item_type[]" id="filter_has_item_type5719290" type="checkbox"> |
|
| 378 |
<label for="filter_has_item_type5719290">Liefertermin</label> |
|
| 379 |
<br> |
|
| 380 |
<input value="transdate" name="filter.has_item_type[]" id="filter_has_item_type5719291" type="checkbox"> |
|
| 381 |
<label for="filter_has_item_type5719291">Buchungsdatum</label> |
|
| 382 |
<br> |
|
| 383 |
<input value="pricegroup" name="filter.has_item_type[]" id="filter_has_item_type5719292" type="checkbox"> |
|
| 384 |
<label for="filter_has_item_type5719292">Preisgruppe</label> |
|
| 385 |
<br> |
|
| 386 |
</div> |
|
| 387 |
</div> |
|
| 388 |
<input value="name" name="sort_by" id="sort_by" type="hidden"> |
|
| 389 |
<input value="0" name="sort_dir" id="sort_dir" type="hidden"> |
|
| 390 |
<input value="1" name="page" id="page" type="hidden"> |
|
| 391 |
<div class="buttons"> |
|
| 392 |
<input value="Reset Filter" class="neutral" type="reset" onclick="$('#search_form').resetForm()">
|
|
| 393 |
</div> |
|
| 394 |
</div> |
|
| 395 |
<!-- /.filter-toggle-panel --> |
|
| 396 |
</div> |
|
| 397 |
<!-- /.filter_toggle --> |
|
| 398 |
</div> |
|
| 399 |
|
|
| 400 |
|
|
| 401 |
|
|
| 402 |
|
|
| 403 |
|
|
| 404 |
</form> |
|
| 405 |
</body> |
|
| 406 |
</html> |
|
| css/developement/form-elements.html | ||
|---|---|---|
| 1 |
<!DOCTYPE html> |
|
| 2 |
<html lang="de"> |
|
| 3 |
<head> |
|
| 4 |
<meta charset="utf-8" /> |
|
| 5 |
<link href="../style.css" rel="stylesheet"> |
|
| 6 |
<title>Test und Entwicklung des Kivitendo-CSS</title> |
|
| 7 |
</head> |
|
| 8 |
<body class="developing"> |
|
| 9 |
<header> |
|
| 10 |
<h1>Kivitendo-Formular-Elemente</h1> |
|
| 11 |
<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav> |
|
| 12 |
</header> |
|
| 13 |
|
|
| 14 |
<form action="#"> |
|
| 15 |
|
|
| 16 |
|
|
| 17 |
|
|
| 18 |
|
|
| 19 |
<div class="wrapper"> |
|
| 20 |
|
|
| 21 |
|
|
| 22 |
<h2>Formular-Elemente mit Standard-Einstellungen</h2> |
|
| 23 |
|
|
| 24 |
|
|
| 25 |
<table class="tbl-horizontal"> |
|
| 26 |
<caption>Klassische Input-Elemente</caption> |
|
| 27 |
<colgroup> <col class="wi-small"><col class="wi-mediumsmall"> </colgroup> |
|
| 28 |
<tbody> |
|
| 29 |
<tr> |
|
| 30 |
<th>Text</th> |
|
| 31 |
<td><input type="text" name="input-type-text"></td> |
|
| 32 |
</tr> |
|
| 33 |
<tr> |
|
| 34 |
<th>Password</th> |
|
| 35 |
<td><input type="password" name="input-type-password"></td> |
|
| 36 |
</tr> |
|
| 37 |
<tr> |
|
| 38 |
<th>Checkbox</th> |
|
| 39 |
<td> |
|
| 40 |
<input type="checkbox" name="input-type-checkbox" value="cb1" id="cb1-1"><label for="cb1-1">1</label> |
|
| 41 |
<input type="checkbox" name="input-type-checkbox" value="cb2" id="cb1-2"><label for="cb1-2">2</label> |
|
| 42 |
</td> |
|
| 43 |
</tr> |
|
| 44 |
<tr> |
|
| 45 |
<th>Radio</th> |
|
| 46 |
<td> |
|
| 47 |
<input type="radio" name="input-type-radio" value="Yes" id="rd1-1"><label for="rd1-1">Yes</label> |
|
| 48 |
<input type="radio" name="input-type-radio" value="No" id="rd1-2"><label for="rd1-2">No</label> |
|
| 49 |
</td> |
|
| 50 |
</tr> |
|
| 51 |
<tr> |
|
| 52 |
<th>Submit</th> |
|
| 53 |
<td><input type="submit" name="sbmt1"></td> |
|
| 54 |
</tr> |
|
| 55 |
<tr> |
|
| 56 |
<th>Reset</th> |
|
| 57 |
<td><input type="reset" name="rst1"></td> |
|
| 58 |
</tr> |
|
| 59 |
<tr> |
|
| 60 |
<th>Button</th> |
|
| 61 |
<td><input type="button" name="btn1" value="Anzeigen"></td> |
|
| 62 |
</tr> |
|
| 63 |
<tr> |
|
| 64 |
<th>Image</th> |
|
| 65 |
<td><input type="image" name="input-type-image"></td> |
|
| 66 |
</tr> |
|
| 67 |
<tr> |
|
| 68 |
<th>File</th> |
|
| 69 |
<td><input type="file" name="input-type-file"></td> |
|
| 70 |
</tr> |
|
| 71 |
</tbody> |
|
| 72 |
</table> |
|
| 73 |
|
|
| 74 |
|
|
| 75 |
<table class="tbl-horizontal"> |
|
| 76 |
<caption>Andere Formular-Elemente</caption> |
|
| 77 |
<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> |
|
| 78 |
<tbody> |
|
| 79 |
<tr> |
|
| 80 |
<th>Select</th> |
|
| 81 |
<td> |
|
| 82 |
<select id="slct1" name="slct1"> |
|
| 83 |
<option value=""></option> |
|
| 84 |
<option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option> |
|
| 85 |
<option value="Douglas Rushkow" selected>Douglas Rushkow</option> |
|
| 86 |
<option value="Timothy Leary">Timothy Leary</option> |
|
| 87 |
<option value="Joseph Weizenbaum">Joseph Weizenbaum</option> |
|
| 88 |
</select> |
|
| 89 |
</td> |
|
| 90 |
</tr> |
|
| 91 |
<tr> |
|
| 92 |
<th>Textarea</th> |
|
| 93 |
<td><textarea name="txtarea1">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td> |
|
| 94 |
</tr> |
|
| 95 |
<tr> |
|
| 96 |
<th>Button</th> |
|
| 97 |
<td> |
|
| 98 |
<button name="bttn1-1" type="button">Type Button</button><br> |
|
| 99 |
<button name="bttn1-2" type="submit">Type Submit</button><br> |
|
| 100 |
<button name="bttn1-3" type="reset">Type Reset</button> |
|
| 101 |
</td> |
|
| 102 |
</tr> |
|
| 103 |
</tbody> |
|
| 104 |
</table> |
|
| 105 |
|
|
| 106 |
<table class="tbl-horizontal"> |
|
| 107 |
<caption>Neue Input-Elemente in HTML5</caption> |
|
| 108 |
<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> |
|
| 109 |
<tbody> |
|
| 110 |
<tr> |
|
| 111 |
<th>Search</th> |
|
| 112 |
<td><input type="search" name="input-type-search"></td> |
|
| 113 |
</tr> |
|
| 114 |
<tr> |
|
| 115 |
<th>Tel</th> |
|
| 116 |
<td><input type="tel" name="input-type-tel"></td> |
|
| 117 |
</tr> |
|
| 118 |
<tr> |
|
| 119 |
<th>URL</th> |
|
| 120 |
<td><input type="url" name="input-type-url"></td> |
|
| 121 |
</tr> |
|
| 122 |
<tr> |
|
| 123 |
<th>Email</th> |
|
| 124 |
<td><input type="email" name="input-type-email"></td> |
|
| 125 |
</tr> |
|
| 126 |
<tr> |
|
| 127 |
<th>Datetime</th> |
|
| 128 |
<td><input type="datetime" name="input-type-datetime"></td> |
|
| 129 |
</tr> |
|
| 130 |
<tr> |
|
| 131 |
<th>Date</th> |
|
| 132 |
<td><input type="date" name="input-type-date"></td> |
|
| 133 |
</tr> |
|
| 134 |
<tr> |
|
| 135 |
<th>Time</th> |
|
| 136 |
<td><input type="time" name="input-type-time"></td> |
|
| 137 |
</tr> |
|
| 138 |
<tr> |
|
| 139 |
<th>Month</th> |
|
| 140 |
<td><input type="month" name="input-type-month"></td> |
|
| 141 |
</tr> |
|
| 142 |
<tr> |
|
| 143 |
<th>Week</th> |
|
| 144 |
<td><input type="week" name="input-type-week"></td> |
|
| 145 |
</tr> |
|
| 146 |
<tr> |
|
| 147 |
<th>Datetime-Local</th> |
|
| 148 |
<td><input type="datetime-local" name="input-type-datetime-local"></td> |
|
| 149 |
</tr> |
|
| 150 |
<tr> |
|
| 151 |
<th>Number</th> |
|
| 152 |
<td><input type="number" name="input-type-number"></td> |
|
| 153 |
</tr> |
|
| 154 |
<tr> |
|
| 155 |
<th>Range</th> |
|
| 156 |
<td><input type="range" name="input-type-range"></td> |
|
| 157 |
</tr> |
|
| 158 |
<tr> |
|
| 159 |
<th>Color</th> |
|
| 160 |
<td><input type="color" name="input-type-color"></td> |
|
| 161 |
</tr> |
|
| 162 |
</tbody> |
|
| 163 |
</table> |
|
| 164 |
|
|
| 165 |
|
|
| 166 |
<table class="tbl-horizontal"> |
|
| 167 |
<caption>Abmessungen (Beispiel Input[type=text])</caption> |
|
| 168 |
<colgroup> <col class="wi-mediumsmall"><col class="wi-verysmall"><col class="wi-lightwide"> </colgroup> |
|
| 169 |
<tbody> |
|
| 170 |
<tr> |
|
| 171 |
<th>wi-smallest</th> |
|
| 172 |
<th>44px</th> |
|
| 173 |
<td><input type="text" name="input-type-text" class="wi-smallest"></td> |
|
| 174 |
</tr> |
|
| 175 |
<tr> |
|
| 176 |
<th>wi-verysmall</th> |
|
| 177 |
<th>63px</th> |
|
| 178 |
<td><input type="text" name="input-type-text" class="wi-verysmall"></td> |
|
| 179 |
</tr> |
|
| 180 |
<tr> |
|
| 181 |
<th>wi-small</th> |
|
| 182 |
<th>95px</th> |
|
| 183 |
<td><input type="text" name="input-type-text" class="wi-small"></td> |
|
| 184 |
</tr> |
|
| 185 |
<tr> |
|
| 186 |
<th>wi-mediumsmall</th> |
|
| 187 |
<th>121px</th> |
|
| 188 |
<td><input type="text" name="input-type-text" class="wi-mediumsmall"></td> |
|
| 189 |
</tr> |
|
| 190 |
<tr> |
|
| 191 |
<th>wi-normal</th> |
|
| 192 |
<th>161px</th> |
|
| 193 |
<td><input type="text" name="input-type-text" class="wi-normal"></td> |
|
| 194 |
</tr> |
|
| 195 |
<tr> |
|
| 196 |
<th>wi-lightwide</th> |
|
| 197 |
<th>188px</th> |
|
| 198 |
<td><input type="text" name="input-type-text" class="wi-lightwide"></td> |
|
| 199 |
</tr> |
|
| 200 |
<tr> |
|
| 201 |
<th>wi-wide</th> |
|
| 202 |
<th>249px</th> |
|
| 203 |
<td><input type="text" name="input-type-text" class="wi-wide"></td> |
|
| 204 |
</tr> |
|
| 205 |
<tr> |
|
| 206 |
<th>wi-wider</th> |
|
| 207 |
<th>329px</th> |
|
| 208 |
<td><input type="text" name="input-type-text" class="wi-wider"></td> |
|
| 209 |
</tr> |
|
| 210 |
<tr> |
|
| 211 |
<th>wi-verywide</th> |
|
| 212 |
<th>489px</th> |
|
| 213 |
<td><input type="text" name="input-type-text" class="wi-verywide"></td> |
|
| 214 |
</tr> |
|
| 215 |
</tbody> |
|
| 216 |
</table> |
|
| 217 |
|
|
| 218 |
</div><!-- /.wrapper --> |
|
| 219 |
|
|
| 220 |
|
|
| 221 |
<div class="wrapper"> |
|
| 222 |
|
|
| 223 |
|
|
| 224 |
<h2>Abmessungen mit assoziativen Klassennamen</h2> |
|
| 225 |
|
|
| 226 |
|
|
| 227 |
<table class="tbl-horizontal col"> |
|
| 228 |
<caption>Klasse wi-normal</caption> |
|
| 229 |
<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> |
|
| 230 |
<tbody> |
|
| 231 |
<tr> |
|
| 232 |
<th>Text</th> |
|
| 233 |
<td><input type="text" name="input-type-text-2" class="wi-normal"></td> |
|
| 234 |
</tr> |
|
| 235 |
<tr> |
|
| 236 |
<th>Password</th> |
|
| 237 |
<td><input type="password" name="input-type-password-2" class="wi-normal"></td> |
|
| 238 |
</tr> |
|
| 239 |
<tr> |
|
| 240 |
<th>Submit</th> |
|
| 241 |
<td><input type="submit" name="sbmt2" class="wi-normal"></td> |
|
| 242 |
</tr> |
|
| 243 |
<tr> |
|
| 244 |
<th>Reset</th> |
|
| 245 |
<td><input type="reset" name="rst2" class="wi-normal"></td> |
|
| 246 |
</tr> |
|
| 247 |
<tr> |
|
| 248 |
<th>Button</th> |
|
| 249 |
<td><input type="button" name="btn2" value="Anzeigen" class="wi-normal"></td> |
|
| 250 |
</tr> |
|
| 251 |
<tr> |
|
| 252 |
<th>Select</th> |
|
| 253 |
<td> |
|
| 254 |
<select id="slct1" name="slct2" class="wi-normal"> |
|
| 255 |
<option value=""></option> |
|
| 256 |
<option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option> |
|
| 257 |
<option value="Douglas Rushkow" selected>Douglas Rushkow</option> |
|
| 258 |
<option value="Timothy Leary">Timothy Leary</option> |
|
| 259 |
<option value="Joseph Weizenbaum">Joseph Weizenbaum</option> |
|
| 260 |
</select> |
|
| 261 |
</td> |
|
| 262 |
</tr> |
|
| 263 |
<tr> |
|
| 264 |
<th>Textarea</th> |
|
| 265 |
<td><textarea name="txtarea2" class="wi-normal">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td> |
|
| 266 |
</tr> |
|
| 267 |
<tr> |
|
| 268 |
<th>Button (Tag)</th> |
|
| 269 |
<td> |
|
| 270 |
<button name="bttn1-1" type="button" class="wi-normal">Type Button</button><br> |
|
| 271 |
<button name="bttn1-2" type="submit" class="wi-normal">Type Submit</button><br> |
|
| 272 |
<button name="bttn1-3" type="reset" class="wi-normal">Type Reset</button> |
|
| 273 |
</td> |
|
| 274 |
</tr> |
|
| 275 |
</tbody> |
|
| 276 |
</table> |
|
| 277 |
|
|
| 278 |
<table class="tbl-horizontal col"> |
|
| 279 |
<caption>Klasse wi-smallest</caption> |
|
| 280 |
<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> |
|
| 281 |
<tbody> |
|
| 282 |
<tr> |
|
| 283 |
<th>Text</th> |
|
| 284 |
<td><input type="text" name="input-type-text-2" class="wi-smallest"></td> |
|
| 285 |
</tr> |
|
| 286 |
<tr> |
|
| 287 |
<th>Password</th> |
|
| 288 |
<td><input type="password" name="input-type-password-2" class="wi-smallest"></td> |
|
| 289 |
</tr> |
|
| 290 |
<tr> |
|
| 291 |
<th>Submit</th> |
|
| 292 |
<td><input type="submit" name="sbmt2" class="wi-smallest"></td> |
|
| 293 |
</tr> |
|
| 294 |
<tr> |
|
| 295 |
<th>Reset</th> |
|
| 296 |
<td><input type="reset" name="rst2" class="wi-smallest"></td> |
|
| 297 |
</tr> |
|
| 298 |
<tr> |
|
| 299 |
<th>Button</th> |
|
| 300 |
<td><input type="button" name="btn2" value="Anzeigen" class="wi-smallest"></td> |
|
| 301 |
</tr> |
|
| 302 |
<tr> |
|
| 303 |
<th>Select</th> |
|
| 304 |
<td> |
|
| 305 |
<select id="slct1" name="slct2" class="wi-smallest"> |
|
| 306 |
<option value=""></option> |
|
| 307 |
<option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option> |
|
| 308 |
<option value="Douglas Rushkow" selected>Douglas Rushkow</option> |
|
| 309 |
<option value="Timothy Leary">Timothy Leary</option> |
|
| 310 |
<option value="Joseph Weizenbaum">Joseph Weizenbaum</option> |
|
| 311 |
</select> |
|
| 312 |
</td> |
|
| 313 |
</tr> |
|
| 314 |
<tr> |
|
| 315 |
<th>Textarea</th> |
|
| 316 |
<td><textarea name="txtarea2" class="wi-smallest">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td> |
|
| 317 |
</tr> |
|
| 318 |
<tr> |
|
| 319 |
<th>Button (Tag)</th> |
|
| 320 |
<td> |
|
| 321 |
<button name="bttn1-1" type="button" class="wi-smallest">Type Button</button><br> |
|
| 322 |
<button name="bttn1-2" type="submit" class="wi-smallest">Type Submit</button><br> |
|
| 323 |
<button name="bttn1-3" type="reset" class="wi-smallest">Type Reset</button> |
|
| 324 |
</td> |
|
| 325 |
</tr> |
|
| 326 |
</tbody> |
|
| 327 |
</table> |
|
| 328 |
|
|
| 329 |
<table class="tbl-horizontal col"> |
|
| 330 |
<caption>Klasse wi-verysmall</caption> |
|
| 331 |
<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> |
|
| 332 |
<tbody> |
|
| 333 |
<tr> |
|
| 334 |
<th>Text</th> |
|
| 335 |
<td><input type="text" name="input-type-text-2" class="wi-verysmall"></td> |
|
| 336 |
</tr> |
|
| 337 |
<tr> |
|
| 338 |
<th>Password</th> |
|
| 339 |
<td><input type="password" name="input-type-password-2" class="wi-verysmall"></td> |
|
| 340 |
</tr> |
|
| 341 |
<tr> |
|
| 342 |
<th>Submit</th> |
|
| 343 |
<td><input type="submit" name="sbmt2" class="wi-verysmall"></td> |
|
| 344 |
</tr> |
|
| 345 |
<tr> |
|
| 346 |
<th>Reset</th> |
|
| 347 |
<td><input type="reset" name="rst2" class="wi-verysmall"></td> |
|
| 348 |
</tr> |
|
| 349 |
<tr> |
|
| 350 |
<th>Button</th> |
|
| 351 |
<td><input type="button" name="btn2" value="Anzeigen" class="wi-verysmall"></td> |
|
| 352 |
</tr> |
|
| 353 |
<tr> |
|
| 354 |
<th>Select</th> |
|
| 355 |
<td> |
|
| 356 |
<select id="slct1" name="slct2" class="wi-verysmall"> |
|
| 357 |
<option value=""></option> |
|
| 358 |
<option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option> |
|
| 359 |
<option value="Douglas Rushkow" selected>Douglas Rushkow</option> |
|
| 360 |
<option value="Timothy Leary">Timothy Leary</option> |
|
| 361 |
<option value="Joseph Weizenbaum">Joseph Weizenbaum</option> |
|
| 362 |
</select> |
|
| 363 |
</td> |
|
| 364 |
</tr> |
|
| 365 |
<tr> |
|
| 366 |
<th>Textarea</th> |
|
| 367 |
<td><textarea name="txtarea2" class="wi-verysmall">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td> |
|
| 368 |
</tr> |
|
| 369 |
<tr> |
|
| 370 |
<th>Button (Tag)</th> |
|
| 371 |
<td> |
|
| 372 |
<button name="bttn1-1" type="button" class="wi-verysmall">Type Button</button><br> |
|
| 373 |
<button name="bttn1-2" type="submit" class="wi-verysmall">Type Submit</button><br> |
|
| 374 |
<button name="bttn1-3" type="reset" class="wi-verysmall">Type Reset</button> |
|
| 375 |
</td> |
|
| 376 |
</tr> |
|
| 377 |
</tbody> |
|
| 378 |
</table> |
|
| 379 |
|
|
| 380 |
<table class="tbl-horizontal col"> |
|
| 381 |
<caption>Klasse wi-small</caption> |
|
| 382 |
<colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup> |
|
| 383 |
<tbody> |
|
| 384 |
<tr> |
|
| 385 |
<th>Text</th> |
|
| 386 |
<td><input type="text" name="input-type-text-2" class="wi-small"></td> |
|
| 387 |
</tr> |
|
| 388 |
<tr> |
|
| 389 |
<th>Password</th> |
|
| 390 |
<td><input type="password" name="input-type-password-2" class="wi-small"></td> |
|
| 391 |
</tr> |
|
| 392 |
<tr> |
|
| 393 |
<th>Submit</th> |
|
| 394 |
<td><input type="submit" name="sbmt2" class="wi-small"></td> |
|
| 395 |
</tr> |
|
| 396 |
<tr> |
|
| 397 |
<th>Reset</th> |
|
| 398 |
<td><input type="reset" name="rst2" class="wi-small"></td> |
|
| 399 |
</tr> |
|
| 400 |
<tr> |
|
| 401 |
<th>Button</th> |
|
| 402 |
<td><input type="button" name="btn2" value="Anzeigen" class="wi-small"></td> |
|
| 403 |
</tr> |
|
| 404 |
<tr> |
|
| 405 |
<th>Select</th> |
|
| 406 |
<td> |
|
| 407 |
<select id="slct1" name="slct2" class="wi-small"> |
|
| 408 |
<option value=""></option> |
|
| 409 |
<option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option> |
|
| 410 |
<option value="Douglas Rushkow" selected>Douglas Rushkow</option> |
|
| 411 |
<option value="Timothy Leary">Timothy Leary</option> |
|
| 412 |
<option value="Joseph Weizenbaum">Joseph Weizenbaum</option> |
|
| 413 |
</select> |
|
| 414 |
</td> |
|
| 415 |
</tr> |
|
| 416 |
<tr> |
|
| 417 |
<th>Textarea</th> |
|
| 418 |
<td><textarea name="txtarea2" class="wi-small">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td> |
|
| 419 |
</tr> |
|
| 420 |
<tr> |
|
Auch abrufbar als: Unified diff
css/developement (Doku)