Revision a58ef474
Von Andreas Rudin vor etwa 6 Jahren hinzugefügt
- ID a58ef474faf36f03eb7d4bc2e9022ccfb39c84ca
- Vorgänger 3fc38171
| 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/images/Tabelle_Horizontal_mit_Elementen.svg | ||
|---|---|---|
| 1 |
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 1280 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><rect id="ArtBoard2" x="0" y="0" width="1280" height="800" style="fill:none;"/><rect x="177.358" y="278.872" width="604.6" height="363.666" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="177.358" y="229.138" width="604.6" height="35.8" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="177.358" y="642.538" width="604.6" height="35.8" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="177.358" y="166.404" width="178.355" height="42.678" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="177.358" y="113.003" width="601.004" height="42.678" style="fill:#ccc;stroke:#000;stroke-width:1px;"/><rect x="359.965" y="166.404" width="421.993" height="42.678" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M357.341,278.872l0,166.862" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M357.341,229.318l0,35.8" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M361.341,642.538l0,35.8" style="fill:none;stroke:#000;stroke-width:1px;"/><text x="19.296px" y="197.27px" style="font-family:'Monaco';font-size:24px;">colgroup</text><text x="19.296px" y="144.004px" style="font-family:'Monaco';font-size:24px;">caption</text><text x="179.975px" y="197.27px" style="font-family:'Monaco';font-size:24px;">col.wi-small</text><text x="179.975px" y="100.695px" style="font-family:'Monaco';font-size:24px;">table.tbl-horizontal</text><text x="370.063px" y="197.27px" style="font-family:'Monaco';font-size:24px;">col.wi-wide</text><text x="431.249px" y="318.757px" style="font-family:'Monaco';font-size:24px;">input.wi-wide</text><text x="369.05px" y="318.757px" style="font-family:'Monaco';font-size:24px;">td</text><g transform="matrix(1,0,0,0.901023,144.122,-629.664)"><text x="36.526px" y="1050.26px" style="font-family:'Monaco';font-size:26.636px;">th</text><g transform="matrix(0.901023,0,0,1,8.36148,0)"><text x="84.479px" y="1050.26px" style="font-family:'Monaco';font-size:26.636px;">(label)</text></g></g><text x="180.771px" y="254.497px" style="font-family:'Monaco';font-size:24px;">th</text><text x="368.09px" y="256.314px" style="font-family:'Monaco';font-size:24px;">th</text><text x="369.05px" y="377.757px" style="font-family:'Monaco';font-size:24px;">td</text><text x="737.061px" y="377.757px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:29.791px;">kg</text><text x="180.771px" y="377.757px" style="font-family:'Monaco';font-size:24px;">th</text><text x="369.05px" y="429.757px" style="font-family:'Monaco';font-size:24px;">td</text><text x="180.771px" y="429.757px" style="font-family:'Monaco';font-size:24px;">th</text><text x="369.05px" y="670.269px" style="font-family:'Monaco';font-size:24px;">td</text><text x="180.771px" y="479.757px" style="font-family:'Monaco';font-size:24px;">th colspan=2</text><text x="200.612px" y="514.757px" style="font-family:'Monaco';font-size:24px;">span.label.above</text><text x="180.771px" y="670.269px" style="font-family:'Monaco';font-size:24px;">th</text><text x="431.249px" y="376.17px" style="font-family:'Monaco';font-size:24px;">input.wi-wide</text><text x="201.005px" y="549.325px" style="font-family:'Monaco';font-size:24px;">textarea.wi-small-wide</text><text x="431.249px" y="428.992px" style="font-family:'Monaco';font-size:24px;">select.wi-wide</text><text x="19.936px" y="256.308px" style="font-family:'Monaco';font-size:24px;">thead</text><text x="19.936px" y="314.02px" style="font-family:'Monaco';font-size:24px;">tbody</text><text x="19.936px" y="668.734px" style="font-family:'Monaco';font-size:24px;">tfoot</text><rect x="422.469" y="292.493" width="304.914" height="33.685" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="422.469" y="349.906" width="304.914" height="33.685" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="194.529" y="523.549" width="532.855" height="109.878" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M727.383,411.149c0,-4.648 -3.773,-8.421 -8.421,-8.421l-288.072,0c-4.647,0 -8.421,3.773 -8.421,8.421l0,16.842c0,4.648 3.774,8.422 8.421,8.422l288.072,0c4.648,0 8.421,-3.774 8.421,-8.422l0,-16.842Z" style="fill:none;stroke:#000;stroke-width:1px;"/><path id="New" d="M736.65,298.411l21.921,0l-1.461,1.462l-18.998,0l0,24.843l24.843,0l0,-18.998l1.461,-1.461l0,21.92l-27.766,0l0,-27.766Zm28.059,-1.9l-14.176,14.249l1.535,1.534l14.175,-14.248l1.096,1.023l-14.467,14.467l-4.823,1.169l1.169,-4.749l14.468,-14.468l1.023,1.023Zm5.407,-1.242l-2.558,-2.557c-0.292,-0.292 -0.73,-0.292 -1.023,0l-1.68,1.68l3.58,3.581l1.681,-1.681c0.219,-0.292 0.219,-0.731 0,-1.023Z"/><path d="M781.958,340.287l-604.6,0" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M781.958,393.864l-604.6,0" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M781.958,444.61l-604.6,0" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M709.844,431.465l-12.133,-8.712l24.265,0l-12.132,8.712Z" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M709.844,407.753l12.132,8.712l-24.265,0l12.133,-8.712Z" style="fill:none;stroke:#000;stroke-width:1px;"/><text x="819.651px" y="426.445px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">P<tspan x="834.456px 839.387px 851.732px 857.899px 868.998px 875.165px 881.332px 893.677px 901.069px 907.236px 913.403px 924.501px 936.846px 949.191px 960.29px 966.457px 981.262px 987.429px 1002.23px 1014.58px 1021.97px 1033.07px 1045.41px 1056.51px 1062.68px 1068.85px 1081.19px 1092.29px " y="426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px 426.445px ">latz für Icons & Kürzesttext</tspan></text><text x="819.651px" y="197.27px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">B<tspan x="834.456px 841.848px 854.193px 859.124px 865.291px 877.636px 889.981px 902.326px 914.671px 927.016px 939.361px 951.706px 964.05px 976.395px 982.562px 988.729px 1001.07px 1008.47px 1014.63px 1029.44px 1041.78px 1054.13px 1059.06px 1065.23px 1077.57px " y="197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px 197.27px ">reitenangaben für Spalten</tspan></text><g transform="matrix(1,0,0,1,-22.9286,-995.21)"><g transform="matrix(1.10985,0,0,1,-92.5568,0)"><text x="842.579px" y="1238.41px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Spalten-Überschriften</text></g><g transform="matrix(1.10985,0,0,1,-92.5568,0)"><text x="842.579px" y="1259.07px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">(seltene <tspan x="918.294px 931.634px " y="1259.07px 1259.07px ">Au</tspan>snahme)</text></g></g><text x="819.651px" y="667.418px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">S<tspan x="834.456px 846.801px 865.291px 883.781px 896.126px 908.471px 914.638px 922.03px 934.375px 939.306px 951.651px 959.043px 964.107px 978.912px 991.257px 1002.36px 1014.7px 1027.05px 1039.39px 1057.88px 1070.22px " y="667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px 667.418px ">ummen (hier Ausnahme)</tspan></text><text x="819.651px" y="143.414px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Ü<tspan x="835.681px 848.026px 860.371px 867.762px 878.861px 889.959px 902.304px 909.696px 914.627px 920.794px 926.962px 933.129px 945.473px 957.818px 965.21px 971.016px 982.358px 994.703px 1007.05px 1019.39px 1024.32px 1029.26px 1041.6px 1047.77px 1055.16px 1067.5px 1079.85px " y="143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px 143.414px ">berschrift der Tabelle (h3)</tspan></text><g transform="matrix(1,0,0,1,-23.8305,-689.091)"><g transform="matrix(1.10985,0,0,1,-92.5568,0)"><text x="842.579px" y="1238.41px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Kombinierte Breitenangabe für</text></g><g transform="matrix(1.10985,0,0,1,-92.5568,0)"><text x="842.579px" y="1259.07px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">rechtsbündige <tspan x="972.786px 986.126px " y="1259.07px 1259.07px ">Au</tspan>srichtung</text></g></g><path d="M802.645,419.465l-48.47,0" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><path d="M812.223,542.153l-256.03,0" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><path d="M812.223,508.789l-346.362,0" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><rect x="163.002" y="73.72" width="631.009" height="617.19" style="fill:none;stroke:#000;stroke-width:1px;"/><text x="368.075px" y="732.995px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Datenspalte(n)</text><g transform="matrix(1,0,0,1,-184.427,-829.442)"><text x="372.075px" y="1562.44px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Feldbeschriftungen</text><text x="372.075px" y="1583.09px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">(Label)</text></g><g transform="matrix(1,0,0,1,-52.1965,-1027.53)"><text x="870.902px" y="1522.05px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Feldbeschriftung (Block) oberhalb für</text><text x="870.902px" y="1542.7px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">kombinierte <tspan x="978.734px 992.074px " y="1542.7px 1542.7px ">An</tspan>lage in einem Feld</text></g><text x="17.823px" y="51.016px" style="font-family:'Arial-BoldMT', 'Arial', sans-serif;font-weight:700;font-size:30px;">Horizontale T<tspan x="205.601px 222.286px " y="51.016px 51.016px ">ab</tspan>elle mit <tspan x="351.207px 372.872px " y="51.016px 51.016px ">Ab</tspan>messungen und Formular-Elementen</text><path d="M272.619,710.829l0,-32.491" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><path d="M430.023,710.829l0,-32.491" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><path d="M812.223,542.153l-256.03,0" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/></svg> |
|
| css/developement/images/Tabellen_in_Wrapper-Bloecken.svg | ||
|---|---|---|
| 1 |
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 1127 729" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><rect id="ArtBoard2" x="-20.02" y="-29.541" width="1280" height="800" style="fill:none;"/><rect x="157.338" y="249.331" width="604.6" height="363.666" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="157.338" y="199.597" width="604.6" height="35.8" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="157.338" y="612.997" width="604.6" height="35.8" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="157.338" y="136.863" width="178.355" height="42.678" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="157.338" y="83.462" width="601.004" height="42.678" style="fill:#ccc;stroke:#000;stroke-width:1px;"/><rect x="339.945" y="136.863" width="421.993" height="42.678" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M337.321,249.331l0,166.862" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M337.321,199.777l0,35.8" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M341.321,612.997l0,35.8" style="fill:none;stroke:#000;stroke-width:1px;"/><text x="-0.724px" y="167.729px" style="font-family:'Monaco';font-size:24px;">colgroup</text><text x="-0.724px" y="114.463px" style="font-family:'Monaco';font-size:24px;">caption</text><text x="159.954px" y="167.729px" style="font-family:'Monaco';font-size:24px;">col.wi-small</text><text x="159.954px" y="71.154px" style="font-family:'Monaco';font-size:24px;">table.tbl-horizontal</text><text x="350.043px" y="167.729px" style="font-family:'Monaco';font-size:24px;">col.wi-wide</text><text x="411.228px" y="289.216px" style="font-family:'Monaco';font-size:24px;">input.wi-wide</text><text x="349.03px" y="289.216px" style="font-family:'Monaco';font-size:24px;">td</text><g transform="matrix(1,0,0,0.901023,124.102,-659.206)"><text x="36.526px" y="1050.26px" style="font-family:'Monaco';font-size:26.636px;">th</text><g transform="matrix(0.901023,0,0,1,8.36148,0)"><text x="84.479px" y="1050.26px" style="font-family:'Monaco';font-size:26.636px;">(label)</text></g></g><text x="160.751px" y="224.956px" style="font-family:'Monaco';font-size:24px;">th</text><text x="348.07px" y="226.773px" style="font-family:'Monaco';font-size:24px;">th</text><text x="349.03px" y="348.216px" style="font-family:'Monaco';font-size:24px;">td</text><text x="717.04px" y="348.216px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:29.791px;">kg</text><text x="160.751px" y="348.216px" style="font-family:'Monaco';font-size:24px;">th</text><text x="349.03px" y="400.216px" style="font-family:'Monaco';font-size:24px;">td</text><text x="160.751px" y="400.216px" style="font-family:'Monaco';font-size:24px;">th</text><text x="349.03px" y="640.728px" style="font-family:'Monaco';font-size:24px;">td</text><text x="160.751px" y="450.216px" style="font-family:'Monaco';font-size:24px;">th colspan=2</text><text x="180.592px" y="485.216px" style="font-family:'Monaco';font-size:24px;">span.label.above</text><text x="160.751px" y="640.728px" style="font-family:'Monaco';font-size:24px;">th</text><text x="411.228px" y="346.629px" style="font-family:'Monaco';font-size:24px;">input.wi-wide</text><text x="180.985px" y="519.784px" style="font-family:'Monaco';font-size:24px;">textarea.wi-small-wide</text><text x="411.228px" y="399.451px" style="font-family:'Monaco';font-size:24px;">select.wi-wide</text><text x="-0.084px" y="226.767px" style="font-family:'Monaco';font-size:24px;">thead</text><text x="-0.084px" y="284.479px" style="font-family:'Monaco';font-size:24px;">tbody</text><text x="-0.084px" y="639.193px" style="font-family:'Monaco';font-size:24px;">tfoot</text><rect x="402.449" y="262.952" width="304.914" height="33.685" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="402.449" y="320.365" width="304.914" height="33.685" style="fill:none;stroke:#000;stroke-width:1px;"/><rect x="174.508" y="494.008" width="532.855" height="109.878" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M707.363,381.608c0,-4.648 -3.774,-8.421 -8.421,-8.421l-288.072,0c-4.648,0 -8.421,3.773 -8.421,8.421l0,16.842c0,4.648 3.773,8.422 8.421,8.422l288.072,0c4.647,0 8.421,-3.774 8.421,-8.422l0,-16.842Z" style="fill:none;stroke:#000;stroke-width:1px;"/><path id="New" d="M716.63,268.87l21.921,0l-1.462,1.462l-18.998,0l0,24.843l24.844,0l0,-18.998l1.461,-1.461l0,21.92l-27.766,0l0,-27.766Zm28.058,-1.9l-14.175,14.249l1.535,1.534l14.175,-14.248l1.096,1.023l-14.468,14.467l-4.822,1.169l1.169,-4.749l14.467,-14.468l1.023,1.023Zm5.407,-1.242l-2.557,-2.557c-0.292,-0.292 -0.731,-0.292 -1.023,0l-1.68,1.68l3.58,3.581l1.68,-1.681c0.22,-0.292 0.22,-0.731 0,-1.023Z"/><path d="M761.938,310.746l-604.6,0" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M761.938,364.323l-604.6,0" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M761.938,415.069l-604.6,0" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M689.823,401.924l-12.133,-8.712l24.266,0l-12.133,8.712Z" style="fill:none;stroke:#000;stroke-width:1px;"/><path d="M689.823,378.212l12.133,8.712l-24.266,0l12.133,-8.712Z" style="fill:none;stroke:#000;stroke-width:1px;"/><text x="799.631px" y="396.904px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">P<tspan x="814.436px 819.367px 831.712px 837.879px 848.978px 855.145px 861.312px 873.657px 881.048px 887.215px 893.383px 904.481px 916.826px 929.171px 940.269px 946.436px 961.242px 967.409px 982.214px 994.559px 1001.95px 1013.05px 1025.39px 1036.49px 1042.66px 1048.83px 1061.17px 1072.27px " y="396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px 396.904px ">latz für Icons & Kürzesttext</tspan></text><text x="799.631px" y="167.729px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">B<tspan x="814.436px 821.828px 834.172px 839.104px 845.271px 857.616px 869.961px 882.306px 894.651px 906.995px 919.34px 931.685px 944.03px 956.375px 962.542px 968.709px 981.054px 988.446px 994.613px 1009.42px 1021.76px 1034.11px 1039.04px 1045.21px 1057.55px " y="167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px 167.729px ">reitenangaben für Spalten</tspan></text><g transform="matrix(1,0,0,1,-42.9489,-1024.75)"><g transform="matrix(1.10985,0,0,1,-92.5568,0)"><text x="842.579px" y="1238.41px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Spalten-Überschriften</text></g><g transform="matrix(1.10985,0,0,1,-92.5568,0)"><text x="842.579px" y="1259.07px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">(seltene <tspan x="918.294px 931.634px " y="1259.07px 1259.07px ">Au</tspan>snahme)</text></g></g><text x="799.631px" y="637.877px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">S<tspan x="814.436px 826.781px 845.271px 863.761px 876.106px 888.451px 894.618px 902.01px 914.355px 919.286px 931.631px 939.023px 944.086px 958.892px 971.237px 982.335px 994.68px 1007.02px 1019.37px 1037.86px 1050.2px " y="637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px 637.877px ">ummen (hier Ausnahme)</tspan></text><text x="799.631px" y="113.873px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Ü<tspan x="815.661px 828.005px 840.35px 847.742px 858.841px 869.939px 882.284px 889.676px 894.607px 900.774px 906.941px 913.108px 925.453px 937.798px 945.19px 950.996px 962.338px 974.683px 987.027px 999.372px 1004.3px 1009.24px 1021.58px 1027.75px 1035.14px 1047.48px 1059.83px " y="113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px 113.873px ">berschrift der Tabelle (h3)</tspan></text><g transform="matrix(1,0,0,1,-43.8507,-718.632)"><g transform="matrix(1.10985,0,0,1,-92.5568,0)"><text x="842.579px" y="1238.41px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Kombinierte Breitenangabe für</text></g><g transform="matrix(1.10985,0,0,1,-92.5568,0)"><text x="842.579px" y="1259.07px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">rechtsbündige <tspan x="972.786px 986.126px " y="1259.07px 1259.07px ">Au</tspan>srichtung</text></g></g><path d="M782.625,389.924l-48.47,0" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><path d="M792.203,512.612l-256.03,0" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><path d="M792.203,479.248l-346.362,0" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><rect x="142.982" y="44.179" width="631.009" height="617.19" style="fill:none;stroke:#000;stroke-width:1px;"/><text x="348.055px" y="703.454px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Datenspalte(n)</text><g transform="matrix(1,0,0,1,-204.447,-858.983)"><text x="372.075px" y="1562.44px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Feldbeschriftungen</text><text x="372.075px" y="1583.09px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">(Label)</text></g><g transform="matrix(1,0,0,1,-72.2167,-1057.07)"><text x="870.902px" y="1522.05px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">Feldbeschriftung (Block) oberhalb für</text><text x="870.902px" y="1542.7px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:20px;">kombinierte <tspan x="978.734px 992.074px " y="1542.7px 1542.7px ">An</tspan>lage in einem Feld</text></g><text x="-2.197px" y="21.475px" style="font-family:'Arial-BoldMT', 'Arial', sans-serif;font-weight:700;font-size:30px;">Horizontale T<tspan x="185.581px 202.266px " y="21.475px 21.475px ">ab</tspan>elle mit <tspan x="331.187px 352.852px " y="21.475px 21.475px ">Ab</tspan>messungen und Formular-Elementen</text><path d="M252.599,681.288l0,-32.491" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><path d="M410.002,681.288l0,-32.491" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/><path d="M792.203,512.612l-256.03,0" style="fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:3,3;"/></svg> |
|
| css/developement/todo.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: To Do's 2018</title> |
|
| 7 |
</head> |
|
| 8 |
<body class="developing"> |
|
| 9 |
<header> |
|
| 10 |
<h1>Pendenzen betreffend Kivitendo-Design 4.0</h1> |
|
| 11 |
<nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav> |
|
| 12 |
</header> |
|
| 13 |
<div class="wrapper"> |
|
| 14 |
<h2>Feldbeschriftungen kürzen</h2> |
|
| 15 |
<p>Um eine ruhige, gleichmässige horizontale Tabelle mit Feldbezeichnungsspalte und Datenspalte zu erhalten, ist es notwenig, speziell für die Standard-Bildschirmauflösung bestimmte Feldbezeichnungen zu kürzen. Somit kann die Bezeichnungspalte relativ schmal gehalten werden. Manchmal reicht es, wenn nur drei Buchstaben eingespart werden können.</p> |
|
| 16 |
<ul> |
|
| 17 |
<li>Einzelbegriffe mit Abschluss «…nummer» kürzen, Beispiel: Bestellnummer ➔ <i>Bestellnr.</i></li> |
|
| 18 |
<li>Datum <b>«Von» … «bis»</b> ➔ <i>Generell Begriff <b>«Von»</b> entfernen, sofern unnötig</i></li> |
|
| 19 |
<li>Bestellnummer des Kunden ➔ <i>Bestellnr.d.Kunden</i></li> |
|
| 20 |
<li>Bestellnummer beim Lieferanten ➔ <i>Bestellnr.b.Lieferantne</i></li> |
|
| 21 |
<li>Vorgangsbezeichnung ➔ <i>Vorgangsbezeichn.</i></li> |
|
| 22 |
</ul> |
|
| 23 |
<h2>Tag-Funktionen verbessern oder erweitern</h2> |
|
| 24 |
<p>Einige Funktionen könnten wirklich mal verbessert werden, indem z.B. die Übergabe einer Klasse möglich wird. Damit lassen sich Elemente deutlich besser mit CSS designen.</p> |
|
| 25 |
<ul> |
|
| 26 |
<li><b>L.date_tag:</b> Übergabe einer Klasse, die dann wirksam als Attribut-/Werte-Paar angezeigt wird, z.B. class="wi-date".<br>Alternativ könnte </li> |
|
| 27 |
<li><b>L.input_tag:</b> Standardgrösse anwenden, falls Attribut SIZE nicht übergeben wurde. Beim Übermitteln von Formulardaten gab es häufig Probleme, wenn das Attribut nicht gesetzt werden. Als Standard schlage ich <i>«size=10»</i> vor</li> |
|
| 28 |
</ul> |
|
| 29 |
|
|
| 30 |
</div> |
|
| 31 |
</body> |
|
| 32 |
</html> |
|
| css/less/READ_ME.md | ||
|---|---|---|
| 1 |
# About this less stuff |
|
| 2 |
|
|
| 3 |
## What is LESS? |
|
| 4 |
Read this excellent short german overview: http://www.lesscss.de<br> |
|
| 5 |
It is recommended to install lessc/node-less server-side. |
|
| 6 |
LESS contains mainly CSS/LESS statements, and yes!, also pure and |
|
| 7 |
valid CSS-Code is also accepted and compiled. The compiler (lessc) creates |
|
| 8 |
pure and valid css code with your LESS and CSS code. |
|
| 9 |
|
|
| 10 |
## How to create a style.css for kivitendo |
|
| 11 |
First set the cursor of your terminal to <code>/css/less/</code> (<code>cd /css/less</code>)<br> |
|
| 12 |
Use following command: <code>lessc style.less ../style.css</code><br> |
|
| 13 |
For minifiying the output css: <code>lessc -x style.less ../style.css</code><br> |
|
| 14 |
Then a new <code>/css/style.css</code> is created except when errors occurs. |
|
| 15 |
|
|
| 16 |
## Developing kivitendo CSS (not customizing) |
|
| 17 |
Read style.less.<br> |
|
| 18 |
This is the comand center for the whole less stuff.<br> |
|
| 19 |
Variables can be set or changed in variables.less.<br> |
|
| 20 |
Variables are efficacious in the other less files. |
|
| 21 |
|
|
| 22 |
## Overriding original stuff |
|
| 23 |
There are several overriding LESS files. Some of the files are for |
|
| 24 |
customizing the original kivitendo LESS stuff. |
|
| 25 |
|
|
| 26 |
* <b>jquery-ui-overrides.less</b> (overrides original jquery css) |
|
| 27 |
* <b>main-overrides</b> (overrides a lot of kivitendo less/css stuff) |
|
| 28 |
* <b>custom-variables.less</b> (overrides variables in variable.less) |
|
| 29 |
* <b>custom.less</b> (overrides all the original kivitendo LESS stuff) |
|
| 30 |
|
|
| 31 |
Overriding is useful for occurences of standard elements in a special |
|
| 32 |
context. For example: a standard table occurs in a toggle panel or in other |
|
| 33 |
control panels. |
|
| 34 |
|
|
| 35 |
## jQuery and overriding jQuery-CSS |
|
| 36 |
The jQuery LESS stuff contains the original jQuery CSS stuff (pure CSS). |
|
| 37 |
Overriding the jQuery stuff (you can call it customizing for kivitendo) is |
|
| 38 |
the best way to preserve full functionality of the jQuery JS. It is intended |
|
| 39 |
just to change colors, font-sizes & -families etc. with the override-file |
|
| 40 |
(jquery-overrides.less). |
|
| 41 |
|
|
| 42 |
If there's a new jQuery-Version just paste the whole CSS code into the |
|
| 43 |
corresponding LESS file. That's (almost) all, folks. |
|
| 44 |
|
|
| 45 |
## Customizing kivitendo CSS (not developing) |
|
| 46 |
For customisation do not touch the original (developers) LESS files.<br> |
|
| 47 |
Therefore it is recommended to edit only these two files: |
|
| 48 |
|
|
| 49 |
* <b>custom-variables.less</b> (overrides variables in variable.less) |
|
| 50 |
* <b>custom.less</b> (overrides all the original kivitendo LESS stuff) |
|
| 51 |
|
|
| 52 |
These files can be empty if you do not want to customize the kivitendo CSS |
|
| 53 |
stuff. The original custom files contains only comments and deactivated example |
|
| 54 |
code. |
|
| 55 |
|
|
| 56 |
Customization only with these two files gives you comfort in your GIT |
|
| 57 |
habit. |
|
| 58 |
|
|
| css/less/buttons.less | ||
|---|---|---|
| 1 |
// ---------------------------------------------------------------------------- |
|
| 2 |
// |
|
| 3 |
// BUTTONS (FORM BUTTONS & LINKS AS BUTTONS) |
|
| 4 |
// |
|
| 5 |
// ---------------------------------------------------------------------------- |
|
| 6 |
// DESCRIPTION: all kind of buttons |
|
| 7 |
// |
|
| 8 |
// CONTENTS: |
|
| 9 |
// - FORM BUTTONS |
|
| 10 |
// - input, button |
|
| 11 |
// - .clear |
|
| 12 |
// - Dimensions |
|
| 13 |
// - button.icon |
|
| 14 |
// - Action STRONG (submission to server page) |
|
| 15 |
// - Action SOFT/NEUTRAL (no submission to server page) |
|
| 16 |
// - button |
|
| 17 |
// - .below |
|
| 18 |
// - LINK AND LABELS DESIGNED AS BUTTONS |
|
| 19 |
// - BUTTONS CONTAINER |
|
| 20 |
// - IMAGE-BUTTONS |
|
| 21 |
// ---------------------------------------------------------------------------- |
|
| 22 |
|
|
| 23 |
|
|
| 24 |
|
|
| 25 |
// -------------------------------------- |
|
| 26 |
// FORM BUTTONS |
|
| 27 |
// -------------------------------------- |
|
| 28 |
// At first we tried to nest the buttons within the form element, |
|
| 29 |
// but it is not possible because some forms do not have a form element |
|
| 30 |
// (e.g. print dialog) |
|
| 31 |
//form {
|
|
| 32 |
|
|
| 33 |
// General |
|
| 34 |
input[type="button"], |
|
| 35 |
input[type="submit"], |
|
| 36 |
input[type="reset"], |
|
| 37 |
button {
|
|
| 38 |
|
|
| 39 |
.mx-button ; // Mixin |
|
| 40 |
|
|
| 41 |
&.clear { clear: left; }
|
|
| 42 |
|
|
| 43 |
// DIMENSIONS |
|
| 44 |
&.wi-verysmall { min-width: @input-wi-verysmall ; }
|
|
| 45 |
&.wi-small { min-width: @input-wi-small ; }
|
|
| 46 |
&.wi-mediumsmall { min-width: @input-wi-mediumsmall ; }
|
|
| 47 |
&.wi-normal { min-width: @input-wi-normal ; }
|
|
| 48 |
&.wi-lightwide { width: @input-wi-lightwide ; }
|
|
| 49 |
&.wi-wide { width: @input-wi-wide ; }
|
|
| 50 |
&.wi-wider { width: @input-wi-wider ; }
|
|
| 51 |
&.wi-verywide { width: @input-wi-verywide ; }
|
|
| 52 |
&.wi-tiny {
|
|
| 53 |
width: auto ; |
|
| 54 |
padding: 0.16em 0.2em 0.1em 0.2em; |
|
| 55 |
margin: -0.3em 0 0 0.2em; |
|
| 56 |
//float: right; |
|
| 57 |
display: inline-block; |
|
| 58 |
font-size: 84% ; |
|
| 59 |
min-height: 23px; |
|
| 60 |
max-height: 23px; |
|
| 61 |
} |
|
| 62 |
&.wi-verytiny{
|
|
| 63 |
font-size: 8pt !important; |
|
| 64 |
padding: 0.0em 0.3em 0.1em 0.3em; |
|
| 65 |
display: inline-block; |
|
| 66 |
min-height: 17px; |
|
| 67 |
max-height: 17px; |
|
| 68 |
} |
|
| 69 |
|
|
| 70 |
|
|
| 71 |
} // /input[type="button etc."] /button |
|
| 72 |
|
|
| 73 |
button.icon{
|
|
| 74 |
padding: 0 ; |
|
| 75 |
margin: 0 ; |
|
| 76 |
background: none !important; |
|
| 77 |
border: none; |
|
| 78 |
display: inline-block; |
|
| 79 |
img { vertical-align: middle ; }
|
|
| 80 |
} |
|
| 81 |
|
|
| 82 |
// ------------------- |
|
| 83 |
// Action STRONG (submission to server page) |
|
| 84 |
input[type="submit"], |
|
| 85 |
input[type="button"], |
|
| 86 |
input[type="button"].button, |
|
| 87 |
button[type="submit"], |
|
| 88 |
button[type="button"] {
|
|
| 89 |
color: @btn-default-color ; |
|
| 90 |
background-color: @btn-default-bg; |
|
| 91 |
border-color: @btn-default-border ; |
|
| 92 |
&:hover{
|
|
| 93 |
color: @btn-default-hover-color ; |
|
| 94 |
background-color: @btn-default-hover-bg; |
|
| 95 |
border-color: @btn-default-hover-border ; |
|
| 96 |
} |
|
| 97 |
&:active, |
|
| 98 |
&:focus{
|
|
| 99 |
color: @btn-default-active-color ; |
|
| 100 |
background-color: @btn-default-active-bg; |
|
| 101 |
border-color: @btn-default-active-border ; |
|
| 102 |
} |
|
| 103 |
} |
|
| 104 |
|
|
| 105 |
// ------------------- |
|
| 106 |
// Action SOFT/NEUTRAL (no submission to server page) |
|
| 107 |
input[type="button"].neutral, |
|
| 108 |
input[type="submit"].neutral, |
|
| 109 |
input[type="reset"], |
|
| 110 |
input[type="reset"].neutral, |
|
| 111 |
button.neutral, |
|
| 112 |
button[type="reset"] {
|
|
| 113 |
color: @btn-neutral-color ; |
|
| 114 |
background-color: @btn-neutral-bg; |
|
| 115 |
border-color: @btn-neutral-border ; |
|
| 116 |
&:hover {
|
|
| 117 |
color: @btn-neutral-hover-color ; |
|
| 118 |
background-color: @btn-neutral-hover-bg; |
|
| 119 |
border-color: @btn-neutral-hover-border ; |
|
| 120 |
} |
|
| 121 |
&:active, |
|
| 122 |
&:focus {
|
|
| 123 |
color: @btn-neutral-active-color; |
|
| 124 |
background-color: @btn-neutral-active-bg; |
|
| 125 |
border-color: @btn-neutral-active-border ; |
|
| 126 |
} |
|
| 127 |
} |
|
| 128 |
|
|
| 129 |
// PENDENT: Neu |
|
| 130 |
input[type="button"]{
|
|
| 131 |
&.below{
|
|
| 132 |
clear: both !important; |
|
| 133 |
float: none; |
|
| 134 |
margin-top: 0.3em; |
|
| 135 |
overflow: hidden ; |
|
| 136 |
} |
|
| 137 |
} |
|
| 138 |
//} // /form |
|
| 139 |
|
|
| 140 |
|
|
| 141 |
|
|
| 142 |
|
|
| 143 |
// -------------------------------------- |
|
| 144 |
// LINKS DESIGNED AS BUTTONS |
|
| 145 |
// They may be placed inside or outside a form |
|
| 146 |
// -------------------------------------- |
|
| 147 |
a {
|
|
| 148 |
&.button {
|
|
| 149 |
|
|
| 150 |
.mx-button ; |
|
| 151 |
|
|
| 152 |
&.below { clear: both !important; }
|
|
| 153 |
|
|
| 154 |
// STANDARD colors |
|
| 155 |
.mx-button-standard ; |
|
| 156 |
.mx-button-standard-hover-focus ; |
|
| 157 |
|
|
| 158 |
// NEUTRAL (no Submission) |
|
| 159 |
&.neutral {
|
|
| 160 |
&:link, |
|
| 161 |
&:visited{
|
|
| 162 |
.mx-button-neutral ; // Mixin |
|
| 163 |
} |
|
| 164 |
.mx-button-neutral-hover-focus ; // Mixin |
|
| 165 |
} // /.neutral |
|
| 166 |
|
|
| 167 |
&.wi-smallest { width: @input-wi-smallest ; }
|
|
| 168 |
&.wi-verysmall { width: @input-wi-verysmall ; }
|
|
| 169 |
&.wi-small { width: @input-wi-small ; }
|
|
| 170 |
&.wi-mediumsmall { width: @input-wi-mediumsmall ; }
|
|
| 171 |
&.wi-normal { width: @input-wi-normal ; }
|
|
| 172 |
&.wi-lightwide { width: @input-wi-lightwide ; }
|
|
| 173 |
&.wi-wide { width: @input-wi-wide ; }
|
|
| 174 |
&.wi-wider { min-width: @input-wi-wider ; }
|
|
| 175 |
&.wi-verywide { min-width: @input-wi-verywide ; }
|
|
| 176 |
// Tiny button (one letter button) |
|
| 177 |
&.wi-tiny {
|
|
| 178 |
display: inline-block; |
|
| 179 |
width: auto ; |
|
| 180 |
padding: 0.16em 0.2em 0.1em 0.2em; |
|
| 181 |
margin: -0.3em 0 0 0.2em; |
|
| 182 |
font-size: 84% ; |
|
| 183 |
} |
|
| 184 |
|
|
| 185 |
// Toggle (for filters e.g.) |
|
| 186 |
&.toggle {
|
|
| 187 |
&.off::after{
|
|
| 188 |
content: " ▸"; |
|
| 189 |
padding-right: 1.0em; |
|
| 190 |
} |
|
| 191 |
&.on::after {
|
|
| 192 |
content: " ▾"; |
|
| 193 |
padding-right: 1.0em; |
|
| 194 |
} |
|
| 195 |
&.with-panel{
|
|
| 196 |
margin-bottom: 0 ; |
|
| 197 |
border-bottom: none; |
|
| 198 |
border-bottom-left-radius: 0px ; |
|
| 199 |
border-bottom-right-radius: 0px ; |
|
| 200 |
} |
|
| 201 |
&:hover{
|
|
| 202 |
background-color: @btn-neutral-bg !important; |
|
| 203 |
border-color: @btn-neutral-border !important ; |
|
| 204 |
color: @btn-neutral-color; |
|
| 205 |
text-decoration: none; |
|
| 206 |
} |
|
| 207 |
} // /.toggle |
|
| 208 |
} // /.button |
|
| 209 |
}// /a |
|
| 210 |
|
|
| 211 |
|
|
| 212 |
|
|
| 213 |
// -------------------------------------- |
|
| 214 |
// LABELS DESIGNED AS BUTTONS |
|
| 215 |
// They may be placed inside or outside a form |
|
| 216 |
// -------------------------------------- |
|
| 217 |
#content label.button {
|
|
| 218 |
|
|
| 219 |
.mx-button ; // Mixin |
|
| 220 |
|
|
| 221 |
// STANDARD colors |
|
| 222 |
.mx-button-standard ; // Mixin |
|
| 223 |
|
|
| 224 |
.mx-button-standard-hover-focus ; // Mixin |
|
| 225 |
|
|
| 226 |
// NEUTRAL (no Submission) |
|
| 227 |
&.neutral {
|
|
| 228 |
.mx-button-neutral ; // Mixin |
|
| 229 |
.mx-button-neutral-hover-focus ; // Mixin |
|
| 230 |
} // /.neutral |
|
| 231 |
|
|
| 232 |
} // /.button |
|
| 233 |
|
|
| 234 |
|
|
| 235 |
|
|
| 236 |
// -------------------------------------- |
|
| 237 |
// BUTTONS CONTAINER |
|
| 238 |
// -------------------------------------- |
|
| 239 |
// Container fuer Buttons |
|
| 240 |
div.buttons {
|
|
| 241 |
padding: 1.0em ; |
|
| 242 |
clear: left ; |
|
| 243 |
display: block; |
|
| 244 |
// PENDENT: anschauen, ist fuer Anzeige von Positionsdetails |
|
| 245 |
&.positions {
|
|
| 246 |
margin: 0 0 -2.0em 26.0em; |
|
| 247 |
padding: 0em; |
|
| 248 |
} |
|
| 249 |
&.below {
|
|
| 250 |
padding: 0 ; |
|
| 251 |
margin: 0 ; |
|
| 252 |
} |
|
| 253 |
} |
|
| 254 |
.col > .buttons, |
|
| 255 |
.wrapper * .buttons {
|
|
| 256 |
padding: 1.0em 1.0em 1.0em 0 !important; |
|
| 257 |
} |
|
| 258 |
|
|
| 259 |
|
|
| 260 |
|
|
| 261 |
// -------------------------------------- |
|
| 262 |
// IMAGE BUTTONS () |
|
| 263 |
// -------------------------------------- |
|
| 264 |
.button-image {
|
|
| 265 |
display: inline-block ; |
|
| 266 |
// Info or details button |
|
| 267 |
&.info { }
|
|
| 268 |
// Delete (cross) button |
|
| 269 |
&.delete { }
|
|
| 270 |
// Edit (pencil) button |
|
| 271 |
&.edit { }
|
|
| 272 |
// Map (globus / planet earth) button |
|
| 273 |
&.map { }
|
|
| 274 |
} |
|
| 275 |
td, |
|
| 276 |
th {
|
|
| 277 |
.button-image { vertical-align: middle; }
|
|
| 278 |
} |
|
| 279 |
input[type="button"].button-image{
|
|
| 280 |
&.delete {
|
|
| 281 |
background-image: url("image/cross.png");
|
|
| 282 |
background-repeat: no-repeat; |
|
| 283 |
background-position: 0 0; |
|
| 284 |
color: #fff; |
|
| 285 |
background-color:transparent; |
|
| 286 |
border-color: none; |
|
| 287 |
border-width: 0; |
|
| 288 |
} |
|
| 289 |
} |
|
| 290 |
|
|
| css/less/control_panels.less | ||
|---|---|---|
| 1 |
// ---------------------------------------------------------------------------- |
|
| 2 |
// |
|
| 3 |
// CONTROL PANELS |
|
| 4 |
// |
|
| 5 |
// ---------------------------------------------------------------------------- |
|
| 6 |
// DESCRIPTION: all kind boxes/tools for selecting, including and entering data |
|
| 7 |
// |
|
| 8 |
// CONTENTS: |
|
| 9 |
// - FORM-ADDITION |
|
| 10 |
// - SELECT ITEM |
|
| 11 |
// - FILTER-TOGGLE-PANEL |
|
| 12 |
// - INPUT-PANEL |
|
| 13 |
// - PAGINATE |
|
| 14 |
// - JUMP-TO |
|
| 15 |
// ---------------------------------------------------------------------------- |
|
| 16 |
|
|
| 17 |
|
|
| 18 |
|
|
| 19 |
// -------------------------------------- |
|
| 20 |
// CONTROL-PANEL |
|
| 21 |
// -------------------------------------- |
|
| 22 |
// General Class for all control panels |
|
| 23 |
.control-panel {
|
|
| 24 |
border: @controlpanel-border; |
|
| 25 |
background-color: @controlpanel-bg; |
|
| 26 |
border-radius: @controlpanel-radius; |
|
| 27 |
color: red ; |
|
| 28 |
overflow: hidden ; |
|
| 29 |
} |
|
| 30 |
|
|
| 31 |
// -------------------------------------- |
|
| 32 |
// FORM-ADDITION |
|
| 33 |
// -------------------------------------- |
|
| 34 |
// Settings for including fields in a report |
|
| 35 |
.form-addition{
|
|
| 36 |
padding: @controlpanel-padding-bold ; |
|
| 37 |
margin: @controlpanel-margin !important ; |
|
| 38 |
width: auto !important ; |
|
| 39 |
display: inline-block ; |
|
| 40 |
|
|
| 41 |
h3{
|
|
| 42 |
color: @controlpanel-h3-color !important; |
|
| 43 |
font-size: @controlpanel-h3-size !important; |
|
| 44 |
font-weight: @controlpanel-h3-weight !important; |
|
| 45 |
margin: 0.3em 0 0.1em 0 !important; |
|
| 46 |
padding: 0 ; |
|
| 47 |
} |
|
| 48 |
h4{
|
|
| 49 |
color: @controlpanel-h4-color !important;; |
|
| 50 |
font-size: @controlpanel-h4-size; |
|
| 51 |
font-weight: @controlpanel-h4-weight; |
|
| 52 |
font-style: @controlpanel-h4-style; |
|
| 53 |
} |
|
| 54 |
|
|
| 55 |
div.list{
|
|
| 56 |
margin-top: 0.2em !important ; |
|
| 57 |
&.col{
|
|
| 58 |
// min-width: 130px ; |
|
| 59 |
// max-width: 240px ; |
|
| 60 |
} |
|
| 61 |
} |
|
| 62 |
} // /.form-addition |
|
| 63 |
|
|
| 64 |
|
|
| 65 |
|
|
| 66 |
// -------------------------------------- |
|
| 67 |
// SELECT ITEM |
|
| 68 |
// -------------------------------------- |
|
| 69 |
// for selecting a hidden Record (e.g. Contacts, Delivery Address etc.) |
|
| 70 |
.select-item{
|
|
| 71 |
display: inline-block ; |
|
| 72 |
width: auto ; |
|
| 73 |
height: auto; |
|
| 74 |
padding: @controlpanel-select-item-padding ; |
|
| 75 |
margin: @controlpanel-margin ; |
|
| 76 |
border: @controlpanel-border ; |
|
| 77 |
border-radius: @controlpanel-radius ; |
|
| 78 |
background-color: @controlpanel-bg ; |
|
| 79 |
color: @controlpanel-color ; |
|
| 80 |
font-size: @font-size-smaller ; |
|
| 81 |
input, |
|
| 82 |
select{
|
|
| 83 |
margin-left: 0.6em ; |
|
| 84 |
} |
|
| 85 |
span.label{
|
|
| 86 |
float: left ; |
|
| 87 |
color: @controlpanel-color ; |
|
| 88 |
} |
|
| 89 |
table{
|
|
| 90 |
margin: 0 ; |
|
| 91 |
td, th{ color: @controlpanel-color ; }
|
|
| 92 |
} |
|
| 93 |
|
|
| 94 |
// see /controller.pl?action=FinancialOverview |
|
| 95 |
// PENDENT: anders loesen oder einfacher benennen |
|
| 96 |
.floating-boxes {
|
|
| 97 |
display: table ; |
|
| 98 |
margin: 0.4em 0 0.8em 0 ; |
|
| 99 |
|
|
| 100 |
.floating-box {
|
|
| 101 |
display: table-cell ; |
|
| 102 |
float: left ; |
|
| 103 |
font-size: @font-size-smaller ; |
|
| 104 |
height: 1.9em ; |
|
| 105 |
vertical-align: middle; |
|
| 106 |
padding: 0 2.0em 0 0 ; |
|
| 107 |
.button, button{
|
|
| 108 |
margin: 0 ; |
|
| 109 |
} |
|
| 110 |
label, |
|
| 111 |
span.label{
|
|
| 112 |
width: auto; |
|
| 113 |
display: inline-block; |
|
| 114 |
height: 160%; |
|
| 115 |
} |
|
| 116 |
input[type="checkbox"]{ margin: 0 0.4em 0 0 ; }
|
|
| 117 |
select { margin: -0.3em 0 0 0; }
|
|
| 118 |
} |
|
| 119 |
} |
|
| 120 |
} // /.select-item |
|
| 121 |
// Select function within standard wrapper |
|
| 122 |
.ui-tabs-panel > .select-item {
|
|
| 123 |
margin: @contentbox-margin; |
|
| 124 |
} |
|
| 125 |
.wrapper > .select-item {
|
|
| 126 |
margin: 0.8em 0 1.0em 0 ; |
|
| 127 |
} |
|
| 128 |
|
|
| 129 |
|
|
| 130 |
|
|
| 131 |
// -------------------------------------- |
|
| 132 |
// FILTER-TOGGLE-PANEL |
|
| 133 |
// -------------------------------------- |
|
| 134 |
// for togglin a filter panel |
|
| 135 |
// see inlcude file /templates/webpages/common/filter-toggle.html |
|
| 136 |
.toggle_panel{
|
|
| 137 |
& > a.button.toggle {
|
|
| 138 |
padding: 0.2em 0 0.2em 1.4em; |
|
| 139 |
&:hover {
|
|
| 140 |
background-color: @controlpanel-bg !important; |
|
| 141 |
text-decoration: underline ; |
|
| 142 |
} |
|
| 143 |
} |
|
| 144 |
span.summary {
|
|
| 145 |
font-size: @font-size-small; |
|
| 146 |
padding-left: 2.0em; |
|
| 147 |
color: @gray-mediumdark; |
|
| 148 |
} |
|
| 149 |
.toggle_panel_block {
|
|
| 150 |
display: block; |
|
| 151 |
overflow: hidden; |
|
| 152 |
padding: @controlpanel-padding ; |
|
| 153 |
margin: 2em 1em 0em 0; ; |
|
| 154 |
|
|
| 155 |
border-bottom-left-radius: @controlpanel-radius ; |
|
| 156 |
border-bottom-right-radius: @controlpanel-radius ; |
|
| 157 |
border-top-right-radius: @controlpanel-radius ; |
|
| 158 |
margin-top: -1px ; |
|
| 159 |
|
|
| 160 |
.buttons{
|
|
| 161 |
clear: left ; |
|
| 162 |
padding: 0 !important; |
|
| 163 |
margin: 0; |
|
| 164 |
} |
|
| 165 |
} |
|
| 166 |
|
|
| 167 |
.tbl-horizontal {
|
|
| 168 |
th{ color: @brand-darkest ; }
|
|
| 169 |
} |
|
| 170 |
|
|
| 171 |
} |
|
| 172 |
|
|
| 173 |
|
|
| 174 |
|
|
| 175 |
|
|
| 176 |
// -------------------------------------- |
|
| 177 |
// INPUT-PANEL |
|
| 178 |
// -------------------------------------- |
|
| 179 |
// Panel for entering data via jQuery-Scripts etc. |
|
| 180 |
#content .input-panel {
|
|
| 181 |
overflow: hidden; |
|
| 182 |
padding: @controlpanel-padding ; |
|
| 183 |
margin: @margin-from-wrapper ; |
|
| 184 |
background-color: @controlpanel-bg; |
|
| 185 |
border: @controlpanel-border ; |
|
| 186 |
border-bottom-left-radius: @controlpanel-radius ; |
|
| 187 |
border-bottom-right-radius: @controlpanel-radius ; |
|
| 188 |
border-top-right-radius: @controlpanel-radius ; |
|
| 189 |
border-top-left-radius: @controlpanel-radius ; |
|
| 190 |
width: auto ; |
|
| 191 |
min-width: 30% ; |
|
| 192 |
//max-width: 70% ; |
|
| 193 |
display: inline-block; |
|
| 194 |
|
|
| 195 |
& > h3 {
|
|
| 196 |
margin-top: 0 ; |
|
| 197 |
} |
|
| 198 |
p {
|
|
| 199 |
font-size: @font-size-smaller ; |
|
| 200 |
margin: 0 0 0.4em 0 ; |
|
| 201 |
} |
|
| 202 |
} |
|
| 203 |
|
|
| 204 |
|
|
| 205 |
|
|
| 206 |
// -------------------------------------- |
|
| 207 |
// PAGINATE |
|
| 208 |
// -------------------------------------- |
|
| 209 |
.paginate{
|
|
| 210 |
display: inline-block ; |
|
| 211 |
width: auto ; |
|
| 212 |
height: auto; |
|
| 213 |
padding: 0; |
|
| 214 |
margin: @controlpanel-margin ; |
|
| 215 |
border: @controlpanel-border; |
|
| 216 |
border-radius: @controlpanel-radius ; |
|
| 217 |
background-color: @controlpanel-bg; |
|
| 218 |
color: @controlpanel-color ; |
|
| 219 |
|
|
| 220 |
& > a, |
|
| 221 |
& > span {
|
|
| 222 |
padding: 0.4em 0.6em !important; |
|
| 223 |
margin-top: -1px; |
|
| 224 |
} |
|
| 225 |
|
|
| 226 |
.paginate-prev {
|
|
| 227 |
display: inline-block ; |
|
| 228 |
&::before{ content: "◄"; }
|
|
| 229 |
&:hover{
|
|
| 230 |
border-bottom-left-radius: @controlpanel-radius; |
|
| 231 |
border-top-left-radius: @controlpanel-radius; |
|
| 232 |
} |
|
| 233 |
} |
|
| 234 |
.paginate-next {
|
|
| 235 |
display: inline-block ; |
|
| 236 |
&::after{ content: "►"; }
|
|
| 237 |
&:hover{
|
|
| 238 |
border-bottom-right-radius: @controlpanel-radius; |
|
| 239 |
border-top-right-radius: @controlpanel-radius; |
|
| 240 |
} |
|
| 241 |
} |
|
| 242 |
.paginate-page {
|
|
| 243 |
display: inline-block ; |
|
| 244 |
padding: 0 ; |
|
| 245 |
} |
|
| 246 |
span.paginate-page {
|
|
| 247 |
background-color: @controlpanel-active-bg; |
|
| 248 |
color: @controlpanel-active-text; |
|
| 249 |
} |
|
| 250 |
a:link, a:visited{ }
|
|
| 251 |
a:hover, |
|
| 252 |
a:active{
|
|
| 253 |
background-color: @controlpanel-bg-hover; |
|
| 254 |
color: @controlpanel-bg-hover-text; |
|
| 255 |
text-decoration: none; |
|
| 256 |
} |
|
| 257 |
} |
|
| 258 |
|
|
| 259 |
|
|
| 260 |
|
|
| 261 |
// -------------------------------------- |
|
| 262 |
// JUMP-TO |
|
| 263 |
// -------------------------------------- |
|
| 264 |
// for jumping e.g. to a address within a browser window |
|
| 265 |
// PENDENT: anders und allgemein loesen |
|
| 266 |
table.jump-to {
|
|
| 267 |
&.right { float: right; }
|
|
| 268 |
|
|
| 269 |
border: @controlpanel-border; |
|
| 270 |
border-radius: 0.2em ; |
|
| 271 |
background-color: @controlpanel-bg; |
|
| 272 |
margin: 0.8em 2.0em 0 1.2em !important; |
|
| 273 |
} |
|
| 274 |
|
|
| 275 |
|
|
| 276 |
|
|
| 277 |
// ------------------- |
|
| 278 |
// FLOAT-CELLS TABLE |
|
| 279 |
// Table with left-floating cell |
|
| 280 |
div.float-cells-table{
|
|
| 281 |
display: block ; |
|
| 282 |
width: 100% ; |
|
| 283 |
overflow: hidden; |
|
| 284 |
font-size: 80% ; |
|
| 285 |
|
|
| 286 |
div.caption{
|
|
| 287 |
float: left; |
|
| 288 |
display: block; |
|
| 289 |
width: auto: |
|
| 290 |
padding: 0 2.0em 0 0; |
|
| 291 |
margin: 0; |
|
| 292 |
|
|
| 293 |
} |
|
| 294 |
div.cells{
|
|
| 295 |
float: left; |
|
| 296 |
display: block; |
|
| 297 |
overflow: hidden; |
|
| 298 |
width: 100%; |
|
| 299 |
background-color: #F66; |
|
| 300 |
|
|
| 301 |
div.cell{
|
|
| 302 |
float: left; |
|
| 303 |
padding: 0 2.0em 0 0; |
|
| 304 |
border-right: 1px #fff solid; |
|
| 305 |
background-color: #FC6; |
|
| 306 |
} |
|
| 307 |
} |
|
| 308 |
} |
|
| 309 |
|
|
| 310 |
|
|
| 311 |
|
|
| css/less/custom.less | ||
|---|---|---|
| 1 |
// ---------------------------------------------------------------------------- |
|
| 2 |
// |
|
| 3 |
// CUSTOM LESS STUFF (ONLY FOR OVERRIDES OF THE STANDARD-KIVITENDO-STUFF) |
|
| 4 |
// |
|
| 5 |
// ---------------------------------------------------------------------------- |
|
| 6 |
// DESCRIPTION: Place your custom less/css stuff here |
|
| 7 |
// Override the Kivitendo-Less-Stuff only in custom.less |
|
| 8 |
// |
|
| 9 |
// |
|
| 10 |
// |
|
| 11 |
// CONTENTS: |
|
| 12 |
// - SUBJECT |
|
| 13 |
// - - My special class |
|
| 14 |
// - - My overridden class // PENDENT: bessere Beschreibung |
|
| 15 |
// ---------------------------------------------------------------------------- |
|
| 16 |
|
|
| 17 |
|
|
| 18 |
// |
|
| 19 |
// ********************************** |
|
| 20 |
// MY SPECIAL CLASS |
|
| 21 |
// ********************************** |
|
| 22 |
|
|
| 23 |
//.my-class-padding: 0.2em ; // just an example |
|
| 24 |
|
|
| 25 |
// |
|
| 26 |
// ********************************** |
|
| 27 |
// MY OVERRIDDEN CLASSES // PENDENT: bessere Beschreibung |
|
| 28 |
// ********************************** |
|
| 29 |
|
|
| 30 |
// You can delete or disable/enable the following CSS code |
|
| 31 |
// This is just an exemple |
|
| 32 |
// Do run "lessc style.less ../style.css" in your terminal session with cursor on the folder /css/less |
|
| 33 |
|
|
| 34 |
/* Custom overrides */ |
|
| 35 |
|
|
| 36 |
/* |
|
| 37 |
table.tbl-horizontal {
|
|
| 38 |
display: table ; |
|
| 39 |
background-color: #ccc; |
|
| 40 |
border-bottom: 12px #ccc solid ; |
|
| 41 |
border-top-left-radius: 0 ; |
|
| 42 |
border-top-right-radius: 0 ; |
|
| 43 |
border-bottom-left-radius: 6px ; |
|
| 44 |
border-bottom-right-radius: 6px ; |
|
| 45 |
|
|
| 46 |
& > caption{
|
|
| 47 |
color: #ffffff !important; |
|
| 48 |
background-color: @gray-mediumdark; |
|
| 49 |
padding-left: 0.8em; |
|
| 50 |
border-top-left-radius: 6px ; |
|
| 51 |
border-top-right-radius: 6px ; |
|
| 52 |
//margin: -24px -12px 0.6em -12px ; |
|
| 53 |
& > a, & > a:link, & > a:visited { decoration: none; color: #fff !important; }
|
|
| 54 |
} |
|
| 55 |
th{ padding-left: 0.3em; }
|
|
| 56 |
td{ padding-right: 0.3em; }
|
|
| 57 |
tbody { border-top: 8px #ccc solid; }
|
|
| 58 |
&.checkered {
|
|
| 59 |
tbody { border-top: none ; }
|
|
| 60 |
border-bottom: none; |
|
| 61 |
} |
|
| 62 |
tbody > tr > td:first-child, |
|
| 63 |
tbody > tr > th:first-child, |
|
| 64 |
thead > tr > th:first-child{
|
|
| 65 |
padding-left: 1.0em ; |
|
| 66 |
} |
|
| 67 |
tbody > tr:first-child {
|
|
| 68 |
& > th { padding-top: 0.5em ; }
|
|
| 69 |
& > td { padding-top: 0.5em ; }
|
|
| 70 |
} |
|
| 71 |
th.caption{
|
|
| 72 |
color: #fff !important; |
|
| 73 |
background-color: @gray-mediumdark; |
|
| 74 |
padding: 0.4em 0 0.3em 0.8em; |
|
| 75 |
border-top: 6px solid #ccc; |
|
| 76 |
border-bottom: 8px solid #ccc; |
|
| 77 |
margin-bottom: 0.6em ; |
|
| 78 |
//margin: -24px -12px 0.6em -18px ; |
|
| 79 |
} |
|
| 80 |
} |
|
| 81 |
|
|
| 82 |
.col{
|
|
| 83 |
padding-bottom: 0.4em ; |
|
| 84 |
|
|
| 85 |
& > table.tbl-horizontal {
|
|
| 86 |
margin-right: 0 !important; |
|
| 87 |
//border-top-left-radius: 0 ; |
|
| 88 |
//border-top-right-radius: 0 ; |
|
| 89 |
border-radius: 0 ; |
|
| 90 |
padding-bottom: 0 ; |
|
| 91 |
|
|
| 92 |
caption{
|
|
| 93 |
border-top-left-radius: 0 ; |
|
| 94 |
border-top-right-radius: 0 ; |
|
| 95 |
} |
|
| 96 |
} |
|
| 97 |
& > table.tbl-horizontal:first-child{
|
|
| 98 |
border-top-left-radius: 0 ; |
|
| 99 |
border-top-right-radius: 0 ; |
|
| 100 |
border-bottom-left-radius: 0 ; |
|
| 101 |
border-bottom-right-radius: 0 ; |
|
| 102 |
margin-bottom: 0 ; |
|
| 103 |
caption{
|
|
| 104 |
border-top-left-radius: 6px ; |
|
| 105 |
border-top-right-radius: 6px ; |
|
| 106 |
} |
|
| 107 |
} |
|
| 108 |
& > table.tbl-horizontal:last-child{
|
|
| 109 |
border-bottom-left-radius: 6px ; |
|
| 110 |
border-bottom-right-radius: 6px ; |
|
| 111 |
margin-bottom: 0 ; |
|
| 112 |
} |
|
| 113 |
} |
|
| 114 |
|
|
| 115 |
.cke_editable{
|
|
| 116 |
margin-left: 0.0em !important; |
|
| 117 |
} |
|
| 118 |
*/ |
|
| 119 |
|
|
| 120 |
|
|
| css/less/custom_ tables.less | ||
|---|---|---|
| 1 |
// Benutzerdefinierte Tabellen-Angaben |
|
| 2 |
// Diese uebersteuern alle Anweisungen aus tables.less |
|
| 3 |
// Es dürfen nur Tabellen mit Zusatzklassen oder mit IDs uebersteuert werden. |
|
| 4 |
// Uebersteuern Sie nur wenige, bestehende Elemente, um ein einheitliches |
|
| 5 |
// Design zu gewaehrleisten |
|
| 6 |
// Diese Datei wird am Schluss von tables.less includiert. |
|
| 7 |
|
|
| 8 |
table{
|
|
| 9 |
|
|
| 10 |
// Zusatzklasse zur Tabelle (Beispiel) |
|
| 11 |
// Betreff: xyz |
|
| 12 |
// Autor: hanspeter.schlaepfer@revamp-it.ch |
|
| 13 |
&.meine-tabellen-klasse {
|
|
| 14 |
|
|
| 15 |
} |
|
| 16 |
|
|
| 17 |
// Tabelle mit spezieller ID (Beispiel) |
|
| 18 |
// Betreff: xyz |
|
| 19 |
// Autor: hanspeter.schlaepfer@revamp-it.ch |
|
| 20 |
&#meine-spezielle-tabelle {
|
|
| 21 |
|
|
| 22 |
} |
|
| 23 |
|
|
| 24 |
|
|
| 25 |
// Tabelle mit Konten-Uebersicht (Kontoplan) |
|
| 26 |
// Betreff: Kontoplan |
|
| 27 |
// Autor: hanspeter.schlaepfer@revamp-it.ch |
|
| 28 |
&#konten-plan {
|
|
| 29 |
tbody tr{
|
|
| 30 |
td:first-child {
|
|
| 31 |
text-align: right !important; |
|
| 32 |
} |
|
| 33 |
&.heading td {
|
|
| 34 |
font-size: @font-size-large; |
|
| 35 |
border-top: 1px #999 solid; |
|
| 36 |
} |
|
| 37 |
} |
|
| 38 |
tr:first-child {
|
|
| 39 |
&.heading td {
|
|
| 40 |
border: none; |
|
| 41 |
} |
|
| 42 |
} |
|
| 43 |
} |
|
| 44 |
|
|
| 45 |
|
|
| 46 |
// PENDENT: genauer anschauen |
|
| 47 |
|
|
| 48 |
&#eurtable {
|
|
| 49 |
border-collapse: collapse; |
|
| 50 |
width: 100%; |
|
| 51 |
} |
|
| 52 |
|
|
| 53 |
tr.category {
|
|
| 54 |
// background set via jquery |
|
| 55 |
} |
|
| 56 |
|
|
| 57 |
tr.chart {
|
|
| 58 |
border: 0; |
|
| 59 |
} |
|
| 60 |
|
|
| 61 |
td.chartname {
|
|
| 62 |
padding-left: 50px; |
|
| 63 |
} |
|
| 64 |
|
|
| 65 |
tr.chartrow {
|
|
| 66 |
font-size: 75%; |
|
| 67 |
} |
|
| 68 |
|
|
| 69 |
.guv_row_background {
|
|
| 70 |
background:#f0f0f0; |
|
| 71 |
} |
|
| 72 |
|
|
| 73 |
.tr_error {
|
|
| 74 |
background-color: #ffc9c9; |
|
| 75 |
} |
|
| 76 |
|
|
| 77 |
|
|
| 78 |
} |
|
| css/less/custom_variables.less | ||
|---|---|---|
| 1 |
// ---------------------------------------------------------------------------- |
|
| 2 |
// |
|
| 3 |
// CUSTOM VARIABLES (ONLY FOR OVERRIDES IN CUSTOM.LESS) |
|
| 4 |
// |
|
| 5 |
// ---------------------------------------------------------------------------- |
|
| 6 |
// DESCRIPTION: Place your custom variables here |
|
| 7 |
// For more information about variables see variables.less |
|
| 8 |
// Copy variables from variable.less into this files here |
|
| 9 |
// Do not change variables and less stuff in the original source files |
|
| 10 |
// then you will be happy with your git work |
|
| 11 |
// |
|
| 12 |
// CONTENTS: |
|
| 13 |
// - SUBJECT |
|
| 14 |
// - - My override variables |
|
| 15 |
// - - My own variables |
|
| 16 |
// ---------------------------------------------------------------------------- |
|
| 17 |
|
|
| 18 |
|
|
| 19 |
// |
|
| 20 |
// ********************************** |
|
| 21 |
// MY OVERRIDE VARIABLES |
|
| 22 |
// ********************************** |
|
| 23 |
|
|
| 24 |
|
|
| 25 |
|
|
| 26 |
|
|
| 27 |
|
|
| 28 |
|
|
| 29 |
// |
|
| 30 |
// ********************************** |
|
| 31 |
// MY SPECIAL VARIABLES |
|
| 32 |
// ********************************** |
|
| 33 |
|
|
| 34 |
//@my-class-padding: 0.2em ; // just an example |
|
| css/less/developing_demo.less | ||
|---|---|---|
| 1 |
// ---------------------------------------------------------------------------- |
|
| 2 |
// |
|
| 3 |
// DEVELOPERS DEMO |
|
| 4 |
// |
|
| 5 |
// ---------------------------------------------------------------------------- |
|
| 6 |
// DESCRIPTION: All colors for the demo color page in /css/developing/farben-demo.html |
|
| 7 |
// use following statement for creating the demo-css-file: |
|
| 8 |
// lessc developing-demo.less ../css/developement/farben-demo.css |
|
| 9 |
// |
|
| 10 |
// For creating the HTML demo blocks from variables.less use following grep patterns |
|
| 11 |
// @([a-z-]+)[ ]*:[ ]*[@][0-9a-z-]+[ ]*; replace with: |
|
| 12 |
// .\1 { background-color: @\1 } or .$1 { background-color: @$1 }
|
|
| 13 |
// ---------------------------------------------------------------------------- |
|
| 14 |
|
|
| 15 |
|
|
| 16 |
@import 'variables'; |
|
| 17 |
|
|
| 18 |
// -------------- |
|
| 19 |
// Grey shades |
|
| 20 |
.gray-darker { background-color: @gray-darker }
|
|
| 21 |
.gray-dark { background-color: @gray-dark }
|
|
| 22 |
.gray-mediumdark { background-color: @gray-mediumdark }
|
|
| 23 |
.gray { background-color: @gray }
|
|
| 24 |
.gray-medium { background-color: @gray-medium }
|
|
| 25 |
.gray-light { background-color: @gray-light }
|
|
| 26 |
.gray-lighter { background-color: @gray-lighter }
|
|
| 27 |
.gray-morelighter { background-color: @gray-morelighter }
|
|
| 28 |
.gray-verylight { background-color: @gray-verylight }
|
|
| 29 |
.gray-superlight { background-color: @gray-superlight }
|
|
| 30 |
// -------------- |
|
| 31 |
// Divers Color Specications |
|
| 32 |
// for message and other coloured stuff |
|
| 33 |
// error |
|
| 34 |
.color-red-strong { background-color: @color-red-strong }
|
|
| 35 |
.color-red-light { background-color: @color-red-light }
|
|
| 36 |
// ok |
|
| 37 |
.color-green-strong { background-color: @color-green-strong }
|
|
| 38 |
.color-green-light { background-color: @color-green-light }
|
|
| 39 |
// info/hint |
|
| 40 |
.color-blue-strong { background-color: @color-blue-strong }
|
|
| 41 |
.color-blue-light { background-color: @color-blue-light }
|
|
| 42 |
// warning |
|
| 43 |
.color-orange-strong { background-color: @color-orange-strong } // more brown
|
|
| 44 |
.color-orange-light { background-color: @color-orange-light }
|
|
| 45 |
// divers |
|
| 46 |
.rainbow-green { background-color: @rainbow-green }
|
|
| 47 |
.rainbow-blue { background-color: @rainbow-blue }
|
|
| 48 |
.rainbow-red { background-color: @rainbow-red }
|
|
| 49 |
.rainbow-yellow { background-color: @rainbow-yellow }
|
|
| 50 |
|
|
| 51 |
// -------------- |
|
| 52 |
// Brand colors |
|
| 53 |
|
|
| 54 |
// Text (Label & data) |
|
| 55 |
.brand-primary { background-color: @brand-primary }
|
|
| 56 |
.brand-label { background-color: @brand-label }
|
|
| 57 |
.brand-label-bg { background-color: @brand-label-bg }
|
|
| 58 |
|
|
| 59 |
// Messages & info types |
|
| 60 |
.brand-info { background-color: @brand-info }
|
|
| 61 |
.brand-info-bg { background-color: @brand-info-bg }
|
|
| 62 |
|
|
| 63 |
.brand-ok { background-color: @brand-ok }
|
|
| 64 |
.brand-ok-bg { background-color: @brand-ok-bg }
|
|
| 65 |
|
|
| 66 |
.brand-warning { background-color: @brand-warning }
|
|
| 67 |
.brand-warning-bg { background-color: @brand-warning-bg }
|
|
| 68 |
|
|
| 69 |
.brand-error { background-color: @brand-error }
|
|
| 70 |
.brand-error-bg { background-color: @brand-error-bg }
|
|
| 71 |
|
|
Auch abrufbar als: Unified diff
HP neue Dateien Oktober 2018