feat: add styles for tables

oocx · Oct 19, 2018 · e6ede15 · e6ede15
1 parent 4d38032
commit e6ede15
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 21 deletions.
diff --git a/projects/oocx-ng/src/lib/buttons.less b/projects/oocx-ng/src/lib/buttons.less
@@ -3,7 +3,7 @@
 .ox-button {
  background-color: @teritary-background-color;
  border: @input-border;
- border-color: @light-border-color;
+ border-color: @border-color;
  color: @font-color;
  cursor: pointer;
  font-family: @font-family;

diff --git a/projects/oocx-ng/src/lib/colors.less b/projects/oocx-ng/src/lib/colors.less
@@ -0,0 +1,18 @@
+@accent-color: #1f497b;
+@background-color: #fff;
+@secondary-background-color: #f5f5ff;
+@teritary-background-color: #e0e0e9;
+@font-color: #000;
+@font-color-weak: #404040;
+@font-color-weaker: #c0c0c0;
+@border-color: #9090a0;
+@light-border-color: #ddd;
+@error-color: #7b391f;
+@error-color-light: #aa491f;
+@invalid-color: #f0f040;
+
+@selection-background-color: @accent-color;
+@selection-foreground-color: @background-color;
+
+@table-background-color: @background-color;
+@table-alternating-background-color: @secondary-background-color;
diff --git a/projects/oocx-ng/src/lib/components/checkbox/checkbox.component.less b/projects/oocx-ng/src/lib/components/checkbox/checkbox.component.less
@@ -10,7 +10,7 @@ input {
  display: inline-block;
  width: 18px;
  height: 18px;
- margin: 0px 4px 2px 0;
+ margin: 2px 4px 2px 0;
  padding: 0;
 }
 
@@ -31,6 +31,7 @@ input:focus {
 
 label {
  vertical-align: top;
+ display: inline-block;
  margin: 0 8px 0 0;
  user-select: none;
 }
diff --git a/projects/oocx-ng/src/lib/oocx-ng.less b/projects/oocx-ng/src/lib/oocx-ng.less
@@ -1,18 +1,4 @@
-@accent-color: #1f497b;
-@background-color: #fff;
-@secondary-background-color: #f5f5f5;
-@teritary-background-color: #e0e0e0;
-@font-color: #000;
-@font-color-weak: #404040;
-@font-color-weaker: #c0c0c0;
-@border-color: #7A7A7A;
-@light-border-color: #ddd;
-@error-color: #7b491f;
-@error-color-light: #aa592f;
-@invalid-color: #f0f040;
-
-@selection-background-color: @accent-color;
-@selection-foreground-color: @background-color;
+@import (reference) 'colors.less';
 
 @font-family: 'Segoe UI', 'San Francisco', 'Roboto', sans-serif;
 
@@ -38,4 +24,3 @@
  background: @teritary-background-color;
  color: @font-color;
 }
-
diff --git a/projects/oocx-ng/src/lib/tables.less b/projects/oocx-ng/src/lib/tables.less
@@ -0,0 +1,78 @@
+@import (reference) 'colors.less';
+
+
+table.ox-table {
+
+ border-collapse: collapse;
+ border-spacing: 0;
+ margin-top: 0.75em;
+ border: none;
+ box-sizing: border-box;
+ width: 100%;
+
+
+ table, thead, tbody, th, td, tr {
+ overflow: hidden;
+ }
+
+ th {
+ font-size: 1.2em;
+ text-align: left;
+ border: none 0px;
+ padding: 8px 4px;
+ background-color: @table-background-color;
+ }
+
+ td {
+ padding: 8px 4px;
+ border: 0 none;
+ }
+
+ td.actions {
+ text-align: left;
+ padding: 0 0 0 4px;
+ border-top: 1px solid @table-background-color;
+ background: @table-background-color;
+ }
+
+ td.actions a {
+ padding: 4px 8px;
+ margin: 0 0 0 4px;
+ }
+
+ .colsizes, .colsizes td, .colsizes th {
+ visibility: hidden;
+ height: 0;
+ max-height: 0;
+ overflow: hidden;
+ font-size: 0;
+ padding: 0;
+ margin: 0;
+ }
+
+ tr:nth-child(2n + 1) {
+ background-color: @table-alternating-background-color;
+ }
+
+ tr.groupHeader {
+ background-color: @table-background-color !important;
+ }
+
+ tr.groupHeader h3 {
+ margin: 0;
+ }
+
+ tr.groupFooter > th {
+ padding: 4px 4px 32px 4px;
+ vertical-align: top;
+ }
+
+ tr.data-row,
+ tr.start-row {
+ border-top: 1px solid @border-color;
+ }
+
+ th {
+ text-align: left;
+ }
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -124,7 +124,50 @@ <h3>Colors</h3>
 </ul>
 
 <h3>Buttons</h3>
-<button class="ox-button">ox-button</button>
-<button class="ox-button-s">ox-button-s</button>
-<button class="ox-button-xs">ox-button-xs</button>
+<div>
+ <button class="ox-button">ox-button</button>
+ <button class="ox-button-s">ox-button-s</button>
+ <button class="ox-button-xs">ox-button-xs</button>
+</div>
+
+<h3>Tables</h3>
+<table class="ox-table">
+ <tr>
+ <th>Datum</th>
+ <th>Kennzeichen</th>
+ <th>Startzeit</th>
+ <th>Startort</th>
+ <th>Landezeit</th>
+ <th>Landeort</th>
+ <th>Dauer</th>
+ </tr>
+ <tr class="start-row">
+ <td>01.07.2018</td>
+ <td>D-1234</td>
+ <td>10:00</td>
+ <td>EDXG</td>
+ <td>10:55</td>
+ <td>EDXG</td>
+ <td>0:55</td>
+ </tr>
+ <tr class="start-row">
+ <td>01.07.2018</td>
+ <td>D-1234</td>
+ <td>10:00</td>
+ <td>EDXG</td>
+ <td>10:55</td>
+ <td>EDXG</td>
+ <td>0:55</td>
+ </tr>
+ <tr class="start-row">
+ <td>01.07.2018</td>
+ <td>D-1234</td>
+ <td>10:00</td>
+ <td>EDXG</td>
+ <td>10:55</td>
+ <td>EDXG</td>
+ <td>0:55</td>
+ </tr>
+</table>
+
 </section>
diff --git a/src/app/app.component.less b/src/app/app.component.less
@@ -1,5 +1,6 @@
 @import '../../projects/oocx-ng/src/lib/oocx-ng.less';
 @import '../../projects/oocx-ng/src/lib/buttons.less';
+@import '../../projects/oocx-ng/src/lib/tables.less';
 
 :host {
  display: block;