committing to mess around with styles

1 files changed, 541 insertions, 0 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss
new file mode 100644
index 000000000..b6bb8ce2b
--- /dev/null
+++ b/src/client/views/collections/CollectionNoteTakingView.scss
@@ -0,0 +1,541 @@
+@import "../global/globalCssVariables";
+
+.collectionNoteTakingView-DocumentButtons {
+  display: flex;
+  justify-content: space-between;
+  margin: auto;
+}
+
+.collectionNoteTakingView-addDocumentButton {
+  display: flex;
+  overflow: hidden;
+  margin: auto;
+  width: 100%;
+  overflow: ellipses;
+
+  .editableView-container-editing-oneLine,
+  .editableView-container-editing {
+      color: grey;
+      padding: 10px;
+      width: 100%;
+  }
+
+  .editableView-input:hover,
+  .editableView-container-editing:hover,
+  .editableView-container-editing-oneLine:hover {
+      cursor: text
+  }
+
+  .editableView-input {
+      outline-color: black;
+      letter-spacing: 2px;
+      color: grey;
+      border: 0px;
+      padding: 12px 10px 11px 10px;
+  }
+
+  font-size: 75%;
+  letter-spacing: 2px;
+  cursor: pointer;
+
+  .editableView-input {
+      outline-color: black;
+      letter-spacing: 2px;
+      color: grey;
+      border: 0px;
+      padding: 12px 10px 11px 10px;
+  }
+}
+
+.collectionMasonryView {
+    display: inline;
+}
+
+.collectionStackingView {
+    display: flex;
+}
+
+.collectionStackingMasonry-cont {
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+
+// TODO:glr Turn this into a seperate class
+.documentButtonMenu {
+    position: relative;
+    height: fit-content;
+    border-bottom: $standard-border;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+    padding: 5px 0 5px 0;
+
+    .documentExplanation {
+        width: 90%;
+        margin: 5px;
+        font-size: 11px;
+        background-color: $light-blue;
+        color: $medium-blue;
+        padding: 10px;
+        border-radius: 10px;
+        border: solid 2px $medium-blue;
+    }
+}
+
+.collectionStackingView,
+.collectionMasonryView {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    flex-wrap: wrap;
+    transition: top .5s;
+
+    >div {
+        position: relative;
+        display: block;
+    }
+
+    .collectionStackingViewFieldColumn {
+        height: max-content;
+    }
+
+    .collectionStackingViewFieldColumnDragging {
+        height: 100%;
+    }
+
+    .collectionSchemaView-previewDoc {
+        height: 100%;
+        position: absolute;
+    }
+
+    .collectionStackingView-docView-container {
+        width: 45%;
+        margin: 5% 2.5%;
+        padding-left: 2.5%;
+        height: auto;
+    }
+
+    .collectionStackingView-flexCont {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
+    .collectionStackingView-masonrySingle,
+    .collectionStackingView-masonryGrid {
+        width: 100%;
+        display: grid;
+        top: 0;
+        left: 0;
+    }
+
+    .collectionStackingView-masonrySingle {
+        height: 100%;
+        position: absolute;
+    }
+
+    .collectionStackingView-masonryGrid {
+        margin: auto;
+        height: max-content;
+        position: relative;
+        grid-auto-rows: 0px;
+    }
+
+    .collectionStackingView-masonrySingle {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        top: 0;
+        left: 0;
+        width: 100%;
+        position: absolute;
+    }
+
+    .collectionStackingView-description {
+        font-size: 100%;
+        margin-bottom: 1vw;
+        padding: 10px;
+        height: 2vw;
+        width: 100%;
+        font-family: $sans-serif;
+        background: $dark-gray;
+        color: $white;
+    }
+
+    .collectionStackingView-columnDragger {
+        width: 15;
+        height: 15;
+        position: absolute;
+        margin-left: -5;
+    }
+
+    // Documents in stacking view
+    .collectionStackingView-columnDoc {
+        display: flex;
+        // margin: auto; // Removed auto so that it is no longer center aligned - this could be something we change 
+        position: relative;
+
+        &:hover {
+          .hoverButtons{
+            opacity: 1;
+          }
+        }
+
+        .hoverButtons {
+          display: flex;
+          opacity: 0;
+          position: absolute;
+          height: 100%;
+          left: -35px;
+          justify-content: center;
+          align-items: center;
+          padding: 0px 10px;
+
+          .buttonWrapper {
+            padding: 3px;
+            border-radius: 3px;
+            
+            &:hover {
+              background: rgba(0, 0, 0, 0.26);
+            }
+          }
+        }
+    }
+
+    .collectionStackingView-masonryDoc {
+        transform-origin: top left;
+        grid-column-end: span 1;
+        height: 100%;
+        margin: auto;
+        display: inline-grid;
+    }
+
+    .collectionStackingView-masonrySection {
+        margin: auto;
+    }
+
+    .collectionStackingView-collapseBar {
+        margin-left: 2px;
+        margin-right: 2px;
+        margin-top: 2px;
+        background: $medium-gray;
+        height: 5px;
+
+        &.active {
+            margin-left: 0;
+            margin-right: 0;
+            background: red;
+        }
+    }
+
+    .collectionStackingView-miniHeader {
+        width: 100%;
+
+        .editableView-container-editing-oneLine {
+            min-height: 20px;
+            display: flex;
+            align-items: center;
+            flex-direction: row;
+        }
+
+        span::before,
+        span::after {
+            content: "";
+            width: 50%;
+            border-top: dashed gray 1px;
+            position: relative;
+            display: inline-block;
+        }
+
+        span::before {
+            margin-right: 10px;
+        }
+
+        span::after {
+            margin-left: 10px;
+        }
+
+        span {
+            position: relative;
+            text-align: center;
+            white-space: nowrap;
+            overflow: visible;
+            width: 100%;
+            display: flex;
+            color: gray;
+            align-items: center;
+        }
+    }
+
+    .collectionStackingView-sectionHeader {
+        text-align: center;
+        margin: auto;
+        margin-bottom: 10px;
+        background: $medium-gray;
+        // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong
+
+        .editableView-input {
+            color: $dark-gray;
+        }
+
+        .editableView-input:hover,
+        .editableView-container-editing:hover,
+        .editableView-container-editing-oneLine:hover {
+            cursor: text
+        }
+
+        .collectionStackingView-sectionHeader-subCont {
+            outline: none;
+            border: 0px;
+            width: 100%;
+            letter-spacing: 2px;
+            font-size: 75%;
+            transition: transform 0.2s;
+            position: relative;
+            height: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: $dark-gray;
+
+            .editableView-container-editing-oneLine,
+            .editableView-container-editing {
+                color: grey;
+                padding: 10px;
+            }
+
+            .editableView-input:hover,
+            .editableView-container-editing:hover,
+            .editableView-container-editing-oneLine:hover {
+                cursor: text;
+            }
+
+            .editableView-input {
+                padding: 12px 10px 11px 10px;
+                border: 0px;
+                color: grey;
+                text-align: center;
+                letter-spacing: 2px;
+                outline-color: black;
+            }
+        }
+
+        .collectionStackingView-sectionColor {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            display: none;
+
+            [class*="css"] {
+                max-width: 102px;
+            }
+
+            .collectionStackingView-sectionColorButton {
+                height: 30px;
+                display: inherit;
+            }
+
+            .collectionStackingView-colorPicker {
+                width: 78px;
+                z-index: 10;
+                position: relative;
+                background: white;
+
+                .colorOptions {
+                    display: flex;
+                    flex-wrap: wrap;
+                }
+
+                .colorPicker {
+                    cursor: pointer;
+                    width: 20px;
+                    height: 20px;
+                    border-radius: 10px;
+                    margin: 3px;
+
+                    &.active {
+                        border: 2px solid white;
+                        box-shadow: 0 0 0 2px lightgray;
+                    }
+                }
+            }
+        }
+
+        .collectionStackingView-sectionOptions {
+            position: absolute;
+            right: 0;
+            top: 0;
+            height: 100%;
+            display: none;
+
+            [class*="css"] {
+                max-width: 102px;
+            }
+
+            .collectionStackingView-sectionOptionButton {
+                height: 30px;
+            }
+
+            .collectionStackingView-optionPicker {
+
+                .optionOptions {
+                    display: inline;
+                }
+
+                .optionPicker {
+                    cursor: pointer;
+                    height: 20px;
+                    border-radius: 10px;
+                    margin: 3px;
+                    width: max-content;
+
+                    &.active {
+                        color: red;
+                    }
+                }
+            }
+        }
+
+        .collectionStackingView-sectionDelete {
+            position: absolute;
+            right: 25px;
+            top: 0;
+            height: 100%;
+            display: none;
+        }
+    }
+
+    .collectionStackingView-sectionHeader:hover {
+        .collectionStackingView-sectionColor {
+            display: unset;
+        }
+
+        .collectionStackingView-sectionOptions {
+            display: unset;
+        }
+
+        .collectionStackingView-sectionDelete {
+            display: unset;
+        }
+    }
+
+    .collectionStackingView-addDocumentButton,
+    .collectionStackingView-addGroupButton {
+        display: flex;
+        overflow: hidden;
+        margin: auto;
+        width: 90%;
+        overflow: ellipses;
+
+        .editableView-container-editing-oneLine,
+        .editableView-container-editing {
+            color: grey;
+            padding: 10px;
+            width: 100%;
+        }
+
+        .editableView-input:hover,
+        .editableView-container-editing:hover,
+        .editableView-container-editing-oneLine:hover {
+            cursor: text
+        }
+
+        .editableView-input {
+            outline-color: black;
+            letter-spacing: 2px;
+            color: grey;
+            border: 0px;
+            padding: 12px 10px 11px 10px;
+        }
+    }
+
+    .collectionStackingView-addDocumentButton {
+        font-size: 75%;
+        letter-spacing: 2px;
+        cursor: pointer;
+
+        .editableView-input {
+            outline-color: black;
+            letter-spacing: 2px;
+            color: grey;
+            border: 0px;
+            padding: 12px 10px 11px 10px;
+        }
+    }
+
+    .collectionStackingView-addGroupButton {
+        background: rgb(238, 238, 238);
+        font-size: 75%;
+        text-align: center;
+        letter-spacing: 2px;
+        height: fit-content;
+    }
+
+    .rc-switch {
+        position: absolute;
+        display: inline-block;
+        bottom: 4px;
+        right: 4px;
+        width: 70px;
+        height: 30px;
+        border-radius: 40px 40px;
+        background-color: lightslategrey;
+    }
+
+    .rc-switch:after {
+        position: absolute;
+        width: 22px;
+        height: 22px;
+        left: 3px;
+        top: 4px;
+        border-radius: 50% 50%;
+        background-color: #fff;
+        content: " ";
+        cursor: pointer;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
+        -webkit-transform: scale(1);
+        transform: scale(1);
+        transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+        -webkit-animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
+        animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
+        -webkit-animation-duration: 0.3s;
+        animation-duration: 0.3s;
+    }
+
+    .rc-switch-checked:after {
+        left: 44px;
+    }
+
+    .rc-switch-inner {
+        color: #fff;
+        font-size: 12px;
+        position: absolute;
+        left: 28px;
+        top: 8px;
+    }
+
+    .rc-switch-checked .rc-switch-inner {
+        left: 8px;
+    }
+}
+
+@media only screen and (max-device-width: 480px) {
+
+    .collectionStackingView .collectionStackingView-columnDragger,
+    .collectionMasonryView .collectionStackingView-columnDragger {
+        width: 0.1;
+        height: 0.1;
+        opacity: 0;
+        font-size: 0;
+    }
+}
\ No newline at end of file