Merge branch 'menu_updates_geireann' of https://github.com/brown-dash/Dash-Web into menu_updates_geireann

1 files changed, 150 insertions, 0 deletions

diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.scss b/src/client/views/collections/collectionLinear/CollectionLinearView.scss
new file mode 100644
index 000000000..8fe804466
--- /dev/null
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.scss
@@ -0,0 +1,150 @@
+@import "../../global/globalCssVariables";
+@import "../../_nodeModuleOverrides";
+
+.collectionLinearView-outer {
+    overflow: visible;
+    height: 100%;
+    pointer-events: none;
+
+    &.true {
+        padding-left: 5px;
+        padding-right: 5px;
+        border-left: $standard-border;
+        background-color: $medium-blue-alt;
+    }
+
+    >input:not(:checked)~&.true {
+        background-color: transparent;
+    }
+
+    .collectionLinearView {
+        display: flex;
+        height: 100%;
+        align-items: center;
+        gap: 5px;
+
+        .collectionView {
+            overflow: visible !important;
+        }
+
+        >span {
+            background: $dark-gray;
+            color: $white;
+            border-radius: 18px;
+            margin-right: 6px;
+            cursor: pointer;
+        }
+
+        .bottomPopup-background {
+            background: $medium-blue;
+            display: flex;
+            border-radius: 10px;
+            height: 35;
+            transform: translate3d(6px, 0px, 0px);
+            align-content: center;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .bottomPopup-text {
+            color: $white;
+            display: inline;
+            white-space: nowrap;
+            padding-left: 8px;
+            padding-right: 20px;
+            vertical-align: middle;
+            font-size: 12.5px;
+        }
+
+        .bottomPopup-descriptions {
+            cursor: pointer;
+            display: inline;
+            white-space: nowrap;
+            padding-left: 8px;
+            padding-right: 8px;
+            vertical-align: middle;
+            background-color: $light-gray;
+            border-radius: 3px;
+            color: black;
+            margin-right: 5px;
+        }
+
+        .bottomPopup-exit {
+            cursor: pointer;
+            display: inline;
+            white-space: nowrap;
+            margin-right: 10px;
+            padding-left: 8px;
+            padding-right: 8px;
+            vertical-align: middle;
+            background-color: $close-red;
+            border-radius: 3px;
+            color: black;
+        }
+
+        >label {
+            pointer-events: all;
+            cursor: pointer;
+            background-color: $medium-blue;
+            padding: 5;
+            border-radius: 2px;
+            height: 25;
+            min-width: 25;
+            margin: 0;
+            color: $white;
+            display: flex;
+            font-weight: 100;
+            width: fit-content;
+            transition: transform 0.2s;
+            align-items: center;
+            justify-content: center;
+            transition: 0.2s;
+
+            &:hover{
+                filter: brightness(0.85);
+            }
+        }
+
+        >input {
+            display: none;
+        }
+
+        >input:not(:checked)~.collectionLinearView-content {
+            display: none;
+        }
+
+        >input:checked~label {
+            transform: rotate(45deg);
+            transition: transform 0.5s;
+            cursor: pointer;
+        }
+
+        .collectionLinearView-content {
+            display: flex;
+            opacity: 1;
+            position: relative;
+
+            .collectionLinearView-docBtn,
+            .collectionLinearView-docBtn-scalable {
+                position: relative;
+                margin: auto;
+                transform-origin: center 80%;
+            }
+
+            .collectionLinearView-docBtn-scalable:hover {
+                transform: scale(1.15);
+            }
+
+            .collectionLinearView-round-button {
+                width: 18px;
+                height: 18px;
+                border-radius: 18px;
+                font-size: 15px;
+            }
+
+            .collectionLinearView-round-button:hover {
+                transform: scale(1.15);
+            }
+        }
+    }
+}
\ No newline at end of file