repository refactoring

1 files changed, 173 insertions, 0 deletions

diff --git a/src_scss/main.scss b/src_scss/main.scss
new file mode 100644
index 0000000..897847c
--- /dev/null
+++ b/src_scss/main.scss
@@ -0,0 +1,173 @@
+@import '~normalize.css/normalize';
+@import '~izitoast/dist/css/iziToast.min';
+
+@import './fonts/fontawesome';
+@import './fonts/roboto';
+@import './color';
+@import './shadow';
+@import './grid';
+
+
+html, body {
+    font-size: 10pt;
+    font-family: 'Roboto';
+    height: 100%;
+    margin: 0px;
+}
+
+
+.window {
+    height: 100%;
+    display: flex;
+}
+
+
+.left-panel {
+    @include shadow-4dp();
+    width: 450px;
+    display: flex;
+    flex-direction: column;
+    background-color: $color-grey-100;
+
+    .header {
+        flex-shrink: 0;
+        margin: 10px;
+        display: flex;
+        align-items: center;
+
+        .title {
+            flex-grow: 1;
+            font-size: 18pt;
+            font-weight: 500;
+            color: $color-grey-800;
+        }
+
+        a {
+            font-size: 24pt;
+            color: $color-grey-800;
+
+            &:visited {
+                color: $color-grey-800;
+            }
+
+            &:hover {
+                color: black;
+            }
+        }
+    }
+
+    .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;
+
+        table.grid {
+            width: 100%;
+
+            .fixed {
+                width: 55px
+            }
+
+            tbody td:last-child {
+                text-align: center;
+            }
+
+            .grid-col-width, .grid-col-height, .grid-col-quantity {
+                text-align: right;
+
+                input {
+                    text-align: right;
+                }
+            }
+        }
+
+        & > *:not(:last-child) {
+            margin-bottom: 10px;
+        }
+    }
+
+    .calculate {
+        flex-shrink: 0;
+        margin: 10px;
+        padding: 10px;
+    }
+
+    .invalid {
+        background-color: rgba(red, 0.2);
+    }
+}
+
+
+.center-panel {
+    flex-grow: 1;
+    overflow: auto;
+    padding: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+
+.right-panel {
+    @include shadow-4dp();
+    width: 200px;
+    display: flex;
+    flex-direction: column;
+    background-color: $color-grey-100;
+    overflow: auto;
+
+    .toolbar {
+        display: flex;
+        justify-content: center;
+        margin: 10px;
+        flex-shrink: 0;
+    }
+
+    .panel {
+        margin: 15px 0px;
+
+        & > *:hover {
+            background-color: $color-grey-400;
+            cursor: pointer;
+        }
+    }
+
+    .panel-name {
+        padding: 3px 10px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-weight: 600;
+        color: $color-grey-800;
+    }
+
+    .item {
+        padding: 3px 10px 3px 20px;
+        display: flex;
+
+        .item-name {
+            flex-grow: 1;
+        }
+
+        .item-rotate, .item-x, .item-y {
+            margin-left: 3px;
+            font-weight: 600;
+            color: $color-grey-800;
+        }
+    }
+
+    .selected {
+        background-color: $color-grey-400;
+    }
+}