Styleguide (in Bearbeitung): Unterschied zwischen den Versionen

Aus Wiki openKONSEQUENZ
Wechseln zu: Navigation, Suche
(Standard-Steuerelemente)
(Schaltfläche (button))
Zeile 132: Zeile 132:
  
 
====Schaltfläche (button)====
 
====Schaltfläche (button)====
 
+
'''Farben'''
 +
{| class="wikitable"
 +
|-
 +
! Schaltfläche
 +
! Hintergrundfarbe
 +
! Konturfarbe
 +
! Textfarbe
 +
|-
 +
| <div class="bootstrap-button" style="background:#003a5f; border-color:#002a45; color:#ffffff;">Primary</div>
 +
| <div class="color-value">#003a5f</div>
 +
| <div class="color-value">#002a45</div>
 +
| <div class="color-value">#ffffff</div>
 +
|-
 +
| <div class="bootstrap-button" style="background:#ffffff; border-color:#b7cbda; color:#0b325c;">Default</div>
 +
| <div class="color-value">#ffffff</div>
 +
| <div class="color-value">#b7cbda</div>
 +
| <div class="color-value">#0b325c</div>
 +
|-
 +
| <div class="bootstrap-button" style="background:#80b300; border-color:#6e9a00; color:#ffffff;">Success</div>
 +
| <div class="color-value">#80b300</div>
 +
| <div class="color-value">#6e9a00</div>
 +
| <div class="color-value">#ffffff</div>
 +
|-
 +
| <div class="bootstrap-button" style="background:#0080c0; border-color:#006fa7; color:#ffffff;">Info</div>
 +
| <div class="color-value">#0080c0</div>
 +
| <div class="color-value">#006fa7</div>
 +
| <div class="color-value">#ffffff</div>
 +
|-
 +
| <div class="bootstrap-button" style="background:#ffb200; border-color:e6a000#; color:#ffffff;">Warning</div>
 +
| <div class="color-value">#ffb200</div>
 +
| <div class="color-value">#e6a000</div>
 +
| <div class="color-value">#ffffff</div>
 +
|-
 +
| <div class="bootstrap-button" style="background:#990000; border-color:#800000; color:#ffffff;">Danger</div>
 +
| <div class="color-value">#990000</div>
 +
| <div class="color-value">#800000</div>
 +
| <div class="color-value">#ffffff</div>
 +
|-
 +
| <div class="bootstrap-button" style="background:#337ab7; border-color:#2e6da4; color:#ffffff;">Disabled</div>
 +
| <div class="color-value">#337ab7</div>
 +
| <div class="color-value">#2e6da4</div>
 +
| <div class="color-value">#ffffff</div>
 +
|}
  
 
====Auswahl (check-box)====
 
====Auswahl (check-box)====

Version vom 17. Mai 2019, 14:49 Uhr

zurück zur Hauptseite zurück zur Styleguide

In diesem Kapietel werden die allgemeinen Festlegungen beschrieben.

Design

Farben

Hauptfarben

Bezeichnung Farbe
Primary
#003a5f
Success
#80b300
Info
#0080c0
Default
#ffffff
Text
#333333

Farbverläufe

Bezeichnung Farbe CSS
Streifen Header
#79b61c - #0281c4
background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);
Balken Header
#e8eee7- #e5edf2
background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);

Flächen und Linien

Bezeichnung Farbe
Hintergrund
#f8fafd
Flächen/Tabellen
#f5f8fc
Hervorhebung/Eingabefelder/Tabellenzeilen
#e9f0f9
Linien
#ccdbe6
Umrandung Formularfelder
#b7cbda

Sekundärfarben

Bezeichnung Farbe
Warning
#ffb200
Danger
#990000
Disabled
#567d96

Schriftarten

Schriftfamilie

Source Sans Pro

Download-Link

WebFont-Link

Rahmenabstände

Symbole

In diesem Abschnitt werden allgemeine Bedien- und Status-Symbole beschrieben. Um ein einheitliches Aussehen der oK-Module sicherzustellen, sollen diese anwendungsübergreifend verwendet werden.

Symbol Bezeichnung
Filter.icon.svg
Filter
Menu.icon.svg
Menü
Search.icon.svg
Suche
Warning.icon.svg
Warnung

technische Vorschläge

Komponenten

Standard-Steuerelemente

Eingabefeld (text)

Eingabefeld

englische Bezeichnung: text
HTML: input type="text"

Darstellung

inaktiv

inaktives Eingabefeld mit Beschriftung "Beschreibung*"

aktiv

aktives Eingabefeld mit Beschriftung "Beschreibung*"

Führungstext (label)

Schaltfläche (button)

Farben

Schaltfläche Hintergrundfarbe Konturfarbe Textfarbe
Primary
#003a5f
#002a45
#ffffff
Default
#ffffff
#b7cbda
#0b325c
Success
#80b300
#6e9a00
#ffffff
Info
#0080c0
#006fa7
#ffffff
Warning
#ffb200
#e6a000
#ffffff
Danger
#990000
#800000
#ffffff
Disabled
#337ab7
#2e6da4
#ffffff

Auswahl (check-box)

Optionsfeld (radio-button)

Dropdown-Liste (drop-down list)

Kalender (calendar)

Layout

Barrierefreiheit

Internationalisierung

allg. Usability-Richtlinien

allgemeine Festlegungen