diff options
| author | bozokopic <bozo.kopic@gmail.com> | 2018-04-15 19:14:15 +0200 |
|---|---|---|
| committer | bozokopic <bozo.kopic@gmail.com> | 2018-04-15 19:14:15 +0200 |
| commit | bb67223abd3d4a5c3654393b4a962daae0588741 (patch) | |
| tree | 90e0f4add9764f565b1c9dc2d2dc21db0bc50770 /src_web/style | |
| parent | dc7cc767859a82a087e258eead7d59e177b30d0f (diff) | |
WIP web frontend
Diffstat (limited to 'src_web/style')
| -rw-r--r-- | src_web/style/grid.scss | 53 | ||||
| -rw-r--r-- | src_web/style/main.scss | 52 | ||||
| -rw-r--r-- | src_web/style/shadow.scss | 23 |
3 files changed, 108 insertions, 20 deletions
diff --git a/src_web/style/grid.scss b/src_web/style/grid.scss new file mode 100644 index 0000000..b1e9bf8 --- /dev/null +++ b/src_web/style/grid.scss @@ -0,0 +1,53 @@ +@import './color';
+
+
+table.grid {
+ table-layout: fixed;
+ border-spacing: 0px;
+ border: 1px solid $color-grey-400;
+
+ td:not(:last-child) {
+ border-right: 1px solid $color-grey-300;
+ }
+
+ thead tr, tfoot tr {
+ background-color: $color-grey-200;
+ }
+
+ td, th {
+ padding: 4px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ tbody td {
+ background-color: white;
+ }
+
+ tbody td, tfoot td {
+ border-top: 1px solid $color-grey-400;
+ }
+
+ input {
+ width: 100%;
+ }
+
+ input[type=text] {
+ position: relative;
+ border: 1px;
+ font-size: 10pt;
+ font-family: 'Roboto';
+ }
+
+ tfoot td > div {
+ display: flex;
+
+ & > .spacer {
+ flex-grow: 1;
+ }
+ }
+
+ .invalid {
+ background-color: rgba(red, 0.2);
+ }
+}
diff --git a/src_web/style/main.scss b/src_web/style/main.scss index 6b848b4..612c2a7 100644 --- a/src_web/style/main.scss +++ b/src_web/style/main.scss @@ -1,8 +1,11 @@ @import '~normalize.css/normalize'; +@import '~izitoast/dist/css/iziToast.min'; @import './fonts/fontawesome'; @import './fonts/roboto'; @import './color'; +@import './shadow'; +@import './grid'; html, body { @@ -20,19 +23,12 @@ html, body { .left-panel { - width: 300px; + @include shadow-4dp(); + width: 400px; display: flex; flex-direction: column; background-color: $color-grey-100; - .group { - flex-shrink: 0; - display: flex; - flex-direction: column; - margin: 10px; - margin-bottom: 0px; - } - .header { flex-shrink: 0; margin: 10px; @@ -60,33 +56,49 @@ html, body { } } - .list { + .group { + flex-shrink: 0; + display: flex; + flex-direction: column; + margin: 10px; + margin-bottom: 0px; + } + + .content { flex-grow: 1; display: flex; flex-direction: column; margin: 10px; margin-bottom: 0px; + align-items: stretch; + overflow: auto; - & > * { - flex-shrink: 0; - } + table.grid { + width: 100%; - .content { - flex-grow: 1; - flex-shrink: 1; - overflow: auto; + .fixed { + width: 50px + } + + tbody td:last-child { + text-align: center; + } } - .add { - align-self: flex-end; + & > *:not(:last-child) { + margin-bottom: 10px; } } - .submit { + .calculate { flex-shrink: 0; margin: 10px; padding: 10px; } + + .invalid { + background-color: rgba(red, 0.2); + } } diff --git a/src_web/style/shadow.scss b/src_web/style/shadow.scss new file mode 100644 index 0000000..8bcb900 --- /dev/null +++ b/src_web/style/shadow.scss @@ -0,0 +1,23 @@ + +$shadow-key-umbra-opacity: 0.2 !default; +$shadow-key-penumbra-opacity: 0.14 !default; +$shadow-ambient-shadow-opacity: 0.12 !default; + + +@mixin shadow-1dp() { + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 2px 1px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 1px 2px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); +} + +@mixin shadow-2dp() { + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); +} + +@mixin shadow-4dp() { + box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity), + 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity); +} |