css/design40/manual/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>