Components

Komponenten sind isolierte UI Fragmente wie Buttons Inputfelder usw. Das Ziel ist es die Komponenten so zu gestalten, dass sie einfach neu gestaltet werden können ohne andere Bereiche im CSS Code zu beeinflussen. Alle CSS Komponenten fangen an mit dem Präfix c- Bspw. c-btn

Panel

siehe Panels

Überschriften

Innendienstportal


    <h1 class="o-header">Innendienstportal</h1>

Innendienstportal


    <div class="o-header__container">
      <button class="c-btn c-btn--transparent c-btn--big o-header__left">
        <span class="c-icon dvm-icon-plus"></span>A transparent Button
      </button>
      <h1 class="o-header">Innendienstportal</h1>
      <button class="c-btn c-btn--transparent c-btn--big o-header__right">
        <span class="c-icon dvm-icon-plus"></span>A transparent Button
      </button>
    </div>

Daten

Darstellung von Daten in einer "show" Ansicht bspw. auf der KMU Stammdaten Seite

DV Kundennr. Abrechnung

1234567890123

Vertragsnummer

1234567890123

Vertragsnr. Factoring

0000991022

Gesamter Ankaufrahmen

1.000,00 €

Verfügbarer Ankaufrahmen

800,00 €

Stand

12.06.2016, 20:00 Uhr


  <div class="o-panel">
    <div class="o-panel__body o-panel__padding o-data__body">
      <div class="row">
        <div class="col-md-12">
          <h1 class="o-data__header">DV-Vertagsnummer</h1>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3">
          <label class="o-data__label">DV Kundennr. Abrechnung</label>
        </div>
        <div class="col-md-4">
          <div class="o-data__value">1234567890123</div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3">
          <label class="o-data__label">Vertragsnummer</label>
        </div>
        <div class="col-md-4">
          <div class="o-data__value">1234567890123</div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          <h1 class="o-data__header o-data__header--margin">Factoring</h1>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3">
          <label class="o-data__label">Vertragsnr. Factoring</label>
        </div>
        <div class="col-md-4">
          <div class="o-data__value">0000991022</div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3">
          <label class="o-data__label">Gesamter Ankaufrahmen</label>
        </div>
        <div class="col-md-4">
          <div class="o-data__value">1.000,00 €</div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3">
          <label class="o-data__label">Verfügbarer Ankaufrahmen</label>
        </div>
        <div class="col-md-4">
          <div class="o-data__value">800,00 €</div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3">
          <label class="o-data__label">Stand</label>
        </div>
        <div class="col-md-4">
          <div class="o-data__value">12.06.2016, 20:00 Uhr</div>
        </div>
      </div>
    </div>
  </div>

Mehrspaltiges Beispiel

Buttons gibt es in den Ausprägungen:

default

Small
Big

featured

Small
Big

unfeatured

Small
Big

transparent Big
transparent white Big
transparent white Button

Buttons müssen eine Klasse für den Button Typ benutzen.

Lorem ipsum

<p>
  <button class="c-btn c-btn--default">Default button Small</button>
  <button class="c-btn c-btn--default c-btn--big">Default button Big</button>
</p>
<p>
  <button class="c-btn c-btn--feature">Featured button Small</button>
  <button class="c-btn c-btn--feature c-btn--big">Featured button Big</button>
</p>
<p>
  <button class="c-btn c-btn--feature-alternative">Featured Alternative button Small</button>
  <button class="c-btn c-btn--feature-alternative c-btn--big">Featured Alternative button Big</button>
</p>
<p>
  <button class="c-btn c-btn--unfeatured">Unfeatured button Small</button>
  <button class="c-btn c-btn--unfeatured c-btn--big">Unfeatured button Big</button>
</p>
<p>
  <button class="c-btn c-btn--unfeatured c-btn--attention">Unfeatured attention button Small</button>
  <button class="c-btn c-btn--unfeatured c-btn--attention c-btn--big">Unfeatured attention button Big</button>
</p>
<p>
  <button class="c-btn c-btn--default" disabled>Disabled via "disabled" attribute</button>
  <button class="c-btn c-btn--feature" disabled>Disabled via "disabled" attribute</button>
  <button class="c-btn c-btn--feature-alternative" disabled>Disabled via "disabled" attribute</button>
  <button class="c-btn c-btn--feature c-btn--disabled">Disabled via class</button>
  <button class="c-btn c-btn--unfeatured" disabled>Disabled unfeatured button</button>
</p>
<p>
  <button class="c-btn c-btn--transparent c-btn--big">
  <span class="c-icon dvm-icon-plus"></span>
  A transparent Button</button>
</p>
<p>
  <button class="c-btn c-btn--feature c-btn--big">A big button</button>
</p>
<p>
  <button class="c-btn c-btn--feature c-btn--big">
  <span class="c-icon dvm-icon-paper-plane"></span>
  A big button with icon</button>
</p>
<p>
  <button class="c-btn c-btn--feature c-btn--big c-btn--full">Button Big und volle Breite</button>
</p>
<div class="styleguide-header">
  <h1 class="styleguide__heading">Lorem ipsum</h1>
  <div class="styleguide__header--end">
    <button class="c-btn c-btn--transparent-white">Schliessen</button>
  </div>
</div>

Für Input Formen.

Email Adresse

Inputs take up the entire width of their parent, so you can and should use them in the grid.

Passwort

Passwort wiederholen

Suchfeld

Disabled field

Textarea

Vorname (Required)

Nachname

Land

Option 1
Option 2
Option 3
Option 4 (disabled)

Choice A
Choice B
Choice C
Choice D (disabled)

<form>
  <label class="c-label">
    Email Adresse
    <input class="c-input" placeholder="ric.flair@eos.com" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />
  </label>
  <p>Inputs take up the entire width of their parent, so you can and should use them in the grid.</p>
  <div class="o-grid">
    <div class="o-grid__col o-grid__col--1-of-2">
      <label class="c-label">
        Passwort
        <input class="c-input" placeholder="Wählen Sie ein sicheres Passwort." type="password" />
      </label>
    </div>
    <div class="o-grid__col o-grid__col--1-of-2">
      <label class="c-label">
        Passwort wiederholen
        <input class="c-input" placeholder="12345 ist kein sicheres Passwort." type="password" />
      </label>
    </div>
    <div class="o-grid__col o-grid__col--1-of-2">
      <div class="c-input__control">
      <label class="c-label">
        Suchfeld
        <input class="c-input" type="text" placeholder="Suchtext ..." />
        <span class="c-input__icon c-input__icon--label-offset c-icon dvm-icon-search"></span>
      </label>
      </div>
    </div>
    <div class="o-grid__col o-grid__col--1-of-2">
      <label class="c-label">
        Disabled field
        <input class="c-input" value="This is disabled" disabled />
      </label>
    </div>
    <div class="o-grid__col o-grid__col--1-of-2">
      <label class="c-label">
        Textarea
        <textarea class="c-input">Editiere mich...</textarea>
      </label>
    </div>
    <div class="o-grid__col o-grid__col--1-of-3">
      <label class="c-label">
        Vorname <span class="u-font-error">(Required)</span>
        <input class="c-input is-invalid" type="text" />
      </label>
    </div>
    <div class="o-grid__col o-grid__col--1-of-3">
      <label class="c-label">
        Nachname
        <input class="c-input is-valid" type="text" value="Housten" />
      </label>
    </div>
    <div class="o-grid__col o-grid__col--1-of-3">
      <label class="c-label">
        Land
        <select class="c-input">
          <option>United Kingdom</option>
          <option>United States</option>
          <option>Something else</option>
        </select>
      </label>
    </div>

    <div class="o-grid__col o-grid__col--1-of-3">
    <ul class="input-list">
        <li>
            <div class="c-radio">
                <input id="radio1" name="radio" type="radio" class="radio" checked="checked">
                <label for="radio1">Option 1</label>
            </div>
        </li>

        <li>
            <div class="c-radio">
                <input id="radio2" name="radio" type="radio" class="radio">
                <label for="radio2">Option 2</label>
            </div>
        </li>

        <li>
            <div class="c-radio">
                <input id="radio3" name="radio" type="radio" class="radio">
                <label for="radio3">Option 3</label>
            </div>
        </li>

        <li>
            <div class="c-radio">
                <input id="radio4" name="radio" type="radio" class="radio" disabled>
                <label for="radio4">Option 4 (disabled)</label>
            </div>
        </li>

    </ul>

    <ul class="input-list">
    <li>
        <div class="c-checkbox">
            <input id="checkbox1" name="checkbox" type="checkbox" checked="checked">
            <label for="checkbox1">Choice A</label>
        </div>
    </li>

    <li>
        <div class="c-checkbox">
            <input id="checkbox2" name="checkbox" type="checkbox">
            <label for="checkbox2">Choice B</label>
        </div>
    </li>

    <li>
        <div class="c-checkbox">
            <input id="checkbox3" name="checkbox" type="checkbox">
            <label for="checkbox3">Choice C</label>
        </div>
    </li>

    <li>
        <div class="c-checkbox">
            <input id="checkbox4" name="checkbox" type="checkbox" disabled>
            <label for="checkbox4">Choice D (disabled)</label>
        </div>
    </li>
</ul>
    </div>

  </div>
</form>

Bitte füllen Sie die unteren Felder korrekt aus Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit

Bitte füllen Sie die unteren Felder korrekt aus

Aktion erfolgreich Lorem ipsum

<div class="c-alert c-alert--error">
  <span class="dvm-icon-attention c-alert__icon"></span>
  Bitte füllen Sie die unteren Felder korrekt aus Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit</div>
  <br/>
  <div class="c-alert c-alert--warning">
  <span class="dvm-icon-attention c-alert__icon"></span>
  Bitte füllen Sie die unteren Felder korrekt aus</div>
  <br/>
  <div class="c-alert c-alert--success__green">
  <span class="dvm-icon-checkmark-circled c-alert__icon"></span>
  <strong>Aktion</strong> erfolgreich Lorem ipsum</div>
  <br/>
  <div class="c-alert c-alert--success__blue">
  <span class="dvm-icon-checkmark-circled c-alert__icon c-alert__icon--blue"></span>
  <strong>Aktion</strong> erfolgreich Lorem ipsum</div>


  <nav>
    <ol class="c-pager">
      <li class="c-pager__icon"><span class="dvm-icon dvm-icon-caret-left"></span>
      </li><li class="c-pager__item">1
      </li><li class="c-pager__item c-pager__item--active">2
      </li><li class="c-pager__item">3
      </li><li class="c-pager__ellipsis">&hellip;
      </li><li class="c-pager__item">10
      </li><li class="c-pager__icon"><span class="dvm-icon dvm-icon-caret-right"></span></li>
    </ol>
  </nav>

Tab 1

Tab 2

Tab 1

Tab 2

Das ist längerer Text

Tab 1

Tab 2


  <p>
  <div class="c-tabs">
    <div class="c-tab c-tab--active">Tab 1</div>
    <div class="c-tab">Tab 2</div>
  </div>
</p>
<p>
<div class="c-tabs">
  <div class="c-tab c-tab--active">Tab 1</div>
  <div class="c-tab">Tab 2</div>
  <div class="c-tab">Das ist längerer Text</div>
</div>
</p>
<p>
  <div class="c-tabs c-tabs--justify">
  <div class="c-tab">Tab 1</div>
  <div class="c-tab c-tab--active">Tab 2</div>
  </div>
</p>

1. Mahnung

Ausgeglichen

Inkasso

Angekauft

Teilankauf

Inkasso Anfrage

Storno

Ausgeglichen

Offen

Angekauft

Storno

Warten

In Prüfung

Fehler


  <p>
    <span class="c-status">--</span>
  </p>
  <p>
    <span class="c-status c-status--mahnung">1. Mahnung</span>
  </p>
  <p>
    <span class="c-status c-status--ausgeglichen">Ausgeglichen</span>
  </p>
  <p>
    <span class="c-status c-status--inkasso">Inkasso</span>
  </p>
  <p>
    <span class="c-status c-status--angekauft">Angekauft</span>
  </p>
  <p>
    <span class="c-status c-status--teilankauf">Teilankauf</span>
  </p>
  <p>
    <span class="c-status c-status--inkassoanfrage">Inkasso Anfrage</span>
  </p>
  <p>
    <span class="c-status c-status--storno">Storno</span>
  </p>
  <p>
    <span class="c-statusbeleg"><i class="c-statusbeleg--icon c-statusbeleg--ausgeglichen icon dvm-icon-checkmark-circled"></i>Ausgeglichen</span>
  </p>
  <p>
    <span class="c-statusbeleg"><i class="c-statusbeleg__circle c-statusbeleg__circle--offen"></i>Offen</span>
  </p>
  <p>
    <span class="c-statusbeleg"><i class="c-statusbeleg--icon c-statusbeleg--angekauft icon dvm-icon-checkmark-circled"></i>Angekauft</span>
  </p>
  <p>
    <span class="c-statusbeleg"><i class="c-statusbeleg--icon c-statusbeleg--storno icon dvm-icon-cancel-circled"></i>Storno</span>
  </p>
  <p>
    <span class="c-statusbeleg"><i class="c-statusbeleg--icon c-statusbeleg--warten icon dvm-icon-hourglass-half"></i>Warten</span>
  </p>
  <p>
    <span class="c-statusbeleg"><i class="c-statusbeleg--icon c-statusbeleg--pruefung icon dvm-icon-refresh"></i>In Prüfung</span>
  </p>
  <p>
    <span class="c-statusbeleg"><i class="c-statusbeleg--icon c-statusbeleg--fehler icon dvm-icon-refresh"></i>Fehler</span>
  </p>

DV Referenz

A037838383

Rechnung

2015-05

Kunde / Debitor

Max Mustermann

Rechnungsendbetrag

4.950,00

Bisherige Gutschriften

Sie möchten eine fehlerhafte oder eine fälschlicherweise gestellte Rechnung stornieren.

Rechnung

Wollen Sie die Rechnung R.150.000.006 wirklich löschen?

Die Rechnung R.150.000.006 wurde gelöscht.

Wenn Sie die Option "Rechnungen sofort abschicken" wählen, werden Ihre Rechnungen sofort an Ihren Kunden verschickt. Wählen Sie diese Option nur wenn Sie keine Anhänge und keine Ratenzahlungen vereinbaren möchten.


  <div class="row">
    <div class="col-md-8">
      <div class="c-modals">
        <span class="icon dvm-icon-cancel c-modals__icon"></span>
        <h1 class="c-modals__header">Gutschrift erzeugen</h1>
        <div class="row c-modals__row">
          <div class="col-md-6">DV Referenz</div>
          <div class="col-md-6"><a href="" class="c-modals__link">A037838383</a></div>
        </div>
        <div class="row c-modals__row">
          <div class="col-md-6">Rechnung</div>
          <div class="col-md-6">2015-05</div>
        </div>
        <div class="row c-modals__row">
          <div class="col-md-6">Kunde / Debitor</div>
          <div class="col-md-6">Max Mustermann</div>
        </div>
        <div class="row c-modals__row">
          <div class="col-md-6">Rechnungsendbetrag</div>
          <div class="col-md-6">4.950,00</div>
        </div>
        <div class="row c-modals__row">
          <div class="col-md-6">Bisherige Gutschriften</div>
          <div class="col-md-6">--</div>
        </div>
        <div class="c-modals__input">
          <h2 class="c-modals__input--header u-font-center">Bitte erfassen Sie den Gutschriftbetrag</h2>
          <div class="row">
            <div class="col-xs-offset-4 col-xs-4">
              <input class="c-input" placeholder="0,00 €"/>
            </div>
          </div>
        </div>
        <div class="c-modals__footer">
          <button class="c-btn c-btn--default c-btn--big">Weiter</button>
          <button class="c-btn c-btn--unfeatured c-btn--big">Abbrechen</button>
        </div>
      </div>
    </div>
  </div>

  <div class="row" style="margin-top: 30px">
    <div class="col-md-8">
      <div class="c-modals">
        <span class="icon dvm-icon-cancel c-modals__icon"></span>
        <h1 class="c-modals__header">Rechnung stornieren</h1>

        <div class="row c-modals__row">
          <div class="col-md-12">Sie möchten eine fehlerhafte oder eine fälschlicherweise gestellte Rechnung stornieren.</div>
        </div>

        <div class="row c-modals__row u-margin-30-t">
          <div class="col-md-6">Rechnung</div>
          <div class="col-md-6"><a href="" class="c-modals__link"><span class="c-modals__strong">A037838383</strong</a></div>
        </div>

        <div class="row c-modals__row">
          <div class="col-md-6">Kunde / Debitor</div>
          <div class="col-md-6"><span class="c-modals__strong">Max Mustermann</span></div>
        </div>

        <div class="row c-modals__row">
          <div class="col-md-6">Rechnungsendbetrag</div>
          <div class="col-md-6"><span class="c-modals__strong">4.950,00</span></div>
        </div>

        <div class="c-modals__footer">
          <button class="c-btn c-btn--default c-btn--big">Weiter</button>
          <button class="c-btn c-btn--unfeatured c-btn--big">Abbrechen</button>
        </div>
      </div>
    </div>
  </div>

  <div class="row" style="margin-top: 30px">
    <div class="col-md-8">
      <div class="c-modals">
        <span class="icon dvm-icon-cancel c-modals__icon"></span>
        <div class="row c-modals__row">
          <div class="col-md-12 u-font-center">Wollen Sie die <span class="c-modals__strong">Rechnung R.150.000.006</span> wirklich löschen?</div>
        </div>
        <div class="c-modals__footer">
          <button class="c-btn c-btn--feature c-btn--big">Löschen</button>
          <button class="c-btn c-btn--unfeatured c-btn--big">Abbrechen</button>
        </div>
      </div>
    </div>
  </div>

  <div class="row" style="margin-top: 30px">
    <div class="col-md-8">
      <div class="c-modals">
        <span class="icon dvm-icon-cancel c-modals__icon"></span>
        <div class="row c-modals__row">
          <p class="col-md-12 u-font-center">
            <span class="icon dvm-icon-checkmark-circled c-modals__texticon"></span> Die <span class="c-modals__strong">Rechnung R.150.000.006</span> wurde gelöscht.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="row" style="margin-top: 30px">
    <div class="col-md-8">
      <div class="c-modals">
        <span class="icon dvm-icon-cancel c-modals__icon"></span>
        <div class="row c-modals__row">
          <p class="col-md-12 u-font-center">
            Wenn Sie die Option <span class="c-modals__strong">"Rechnungen sofort abschicken"</span> wählen, werden Ihre Rechnungen sofort an Ihren Kunden verschickt. Wählen Sie diese Option nur wenn Sie keine Anhänge und keine Ratenzahlungen vereinbaren möchten.
          </p>
        </div>
        <div class="c-modals__footer">
          <button class="c-btn c-btn--unfeatured c-btn--big">Schliessen</button>
        </div>
      </div>
    </div>
  </div>


    <div class="c-dropdown">
      <div class="c-dropdown__button">
        <span class="icon dvm-icon-caret-down"></span>
      </div>
    </div>

  <div class="row" style="margin-bottom: 200px; margin-top: 30px">
    <div class="col-md-6">
      <div class="c-dropdown">
        <div class="c-dropdown__button c-dropdown__button--active">
          <span class="icon dvm-icon-caret-up"></span>
        </div>
        <div class="c-dropdown__container">
          <ul class="c-dropdown__itemcontainer">
            <li class="c-dropdown__item"><span class="dvm-icon-trash-empty c-dropdown__icon"></span>Löschen</li>
            <li class="c-dropdown__item is--last">
              <span class="dvm-icon-download-cloud c-dropdown__icon"></span>Originalbeleg laden
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="c-dropdown">
        <div class="c-dropdown__button c-dropdown__button--active">
          <span class="icon dvm-icon-caret-up"></span>
        </div>
        <div class="c-dropdown__container c-dropdown__container--big">
          <ul class="c-dropdown__itemcontainer">
            <li class="c-dropdown__item"><span class="dvm-icon-trash-empty c-dropdown__icon"></span>Löschen</li>
            <li class="c-dropdown__item"><span class="dvm-icon-download-cloud c-dropdown__icon"></span>Originalbeleg laden</li>
            <li class="c-dropdown__item"><span class="dvm-icon-search c-dropdown__icon"></span>Sichtprüfung</li>
            <li class="c-dropdown__item is--disabled is--last">
              <span class="dvm-icon-trash-empty c-dropdown__icon is--disabled"></span>Löschen
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

Styleguide

Components

Layouts

Panel

Überschriften

Innendienstportal

Innendienstportal

Innendienstportal

Daten

DV-Vertagsnummer

Factoring

Buttons

Lorem ipsum

Inputs und Labels

Alert Boxen

Tabs

Status

Modale Dialoge

Gutschrift erzeugen

Bitte erfassen Sie den Gutschriftbetrag

Rechnung stornieren

Dropdowns

Tables