Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
99 lines (89 sloc) 3.15 KB
// Für das Beispiel ist die UI eher zweitranging, daher hier so wenig Styling wie möglich.
.coffeeBreakApp {
background: beige;
color: black;
padding: 10px;
// Sicherheitshalber die Einstellungen der Umgebung ignorieren.
select {
background: white;
color: black;
}
// Der Einfachheit halber alle Feldnamen mit einer festen Breite - im Allgemeinen würde man hier ein Feintuning per Formular machen.
label > span:first-child {
display: inline-block;
width: 10rem;
}
// Markierung von ungültigen Eingaben über die Farbe der Feldnamen.
label.coffeeBreakInvalid > span:first-child {
color: red;
}
// Falls ein Formular Schaltflächen zur Bestätigung hat setzen wir die ein bißchen ab.
.coffeeBreakActions {
margin-top: 10px;
}
// Manche Schaltflächen stehen mit kurzen Texten diskret hinter Eingabefeldern.
.coffeeBreakSelectorButton, .coffeeBreakNewTypeButton {
padding: 4px 6px;
min-width: 2rem;
}
// Unsichtbar machen braucht man irgendwie in jeder Anwendung - alternativ über jQuery show/hide.
.coffeeBreakHidden {
display: none;
}
// Das grundsätzliche Aussehen einer Tabelle, auch hier versuchen wir die Umgebung zu ignorieren.
table {
border-collapse: collapse;
td {
background-color: white;
border: 1px solid black;
padding: 2px 4px;
}
> thead > tr > td {
font-weight: bold;
}
}
// Bei Spalten mit Zahlen werden die Zellinhalte zentriert - sicher auch im Normalfall mit expliziten CSS Klassen eleganter zu lösen, e.g. .coffeeBreakNumericCell etc.
table.coffeeBreakDonationTable > tbody > tr > td:nth-child(2), table.coffeeBreakDonationTable > tbody > tr > td:nth-child(3), table.coffeeBreakDonationTimeGroupTable > tbody > tr > td:not(:first-child) {
text-align: center;
}
// Der obere Bereich der Startseite ist in zwei horizontale nebeneinanderstehende Bereiche unterteilt - zumindest solange der Platz reicht.
.coffeeBreakDashboardLayout {
> div:first-child {
margin-bottom: 10px;
> div {
float: left;
}
> div:nth-child(2) {
margin-left: 10px;
> label, > a {
display: block;
}
}
> div:last-child {
float: none;
clear: both;
}
}
}
}
// Der Auswahldialog wird gesondert konfiguriert, hier wird auf die primitivste Art ein Wert aus einer Liste (ul/li) ausgewählt.
.coffeeBreakSelectionDialog {
ul {
list-style: none;
padding: 0;
}
li {
margin: 2px 4px;
padding: 2px 4px;
border: 1px solid black;
list-style: none;
}
// Natürlich mit ein bißchen Feedback bei der Auswahl durch den Anwender.
li:hover {
background: deepskyblue;
}
}
// Hier kommen sich jQueryUI und das CSS von SharePoint in die Quere und machen das Schliessen Icon des Dialogs sehr breit.
.coffeeBreakDialog .ui-button {
min-width: 0px;
}