Styleguide (in Bearbeitung): Unterschied zwischen den Versionen
Aus Wiki openKONSEQUENZ
(→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.
Inhaltsverzeichnis
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
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 | |
Menü | |
Suche | |
Warnung |
technische Vorschläge
Komponenten
Standard-Steuerelemente
Eingabefeld (text)
Eingabefeld
englische Bezeichnung: | text |
HTML: | input type="text" |
Darstellung
inaktiv
aktiv
Führungstext (label)
Schaltfläche (button)
Farben
Schaltfläche | Hintergrundfarbe | Konturfarbe | Textfarbe |
---|---|---|---|
#003a5f
|
#002a45
|
#ffffff
| |
#ffffff
|
#b7cbda
|
#0b325c
| |
#80b300
|
#6e9a00
|
#ffffff
| |
#0080c0
|
#006fa7
|
#ffffff
| |
#ffb200
|
#e6a000
|
#ffffff
| |
#990000
|
#800000
|
#ffffff
| |
#337ab7
|
#2e6da4
|
#ffffff
|
Auswahl (check-box)
Optionsfeld (radio-button)
Dropdown-Liste (drop-down list)
Kalender (calendar)
Layout
Barrierefreiheit
Internationalisierung
allg. Usability-Richtlinien
allgemeine Festlegungen