Merge pull request #186 from brown-dash/secondpropertiesmenu-emily

Secondpropertiesmenu emily

1 files changed, 63 insertions, 35 deletions

diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index db30745fc..b801b3abf 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -20,22 +20,31 @@ $linkGap : 3px;
 
 .propertiesButtons-linkButton-empty,
 .propertiesButtons-linkButton-nonempty {
-    height: 25px;
-    width: 29px;
-    border-radius: 6px;
-    pointer-events: auto;
-    background-color: $dark-gray;
-    color: #fcfbf7;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    font-size: 75%;
-    transition: transform 0.2s;
-    text-align: center;
+    // margin-right: 7px;
+    // margin-left: 8px;
+    height: 28px;
+   // width: 226px;//29px;
     display: flex;
-    justify-content: center;
     align-items: center;
-    margin-right: 10px;
-    margin-left: 4px;
+    // height: 25px;
+    // width: 230px;//29px;
+    // display: flex;
+    // align-items: center;
+    // border-radius: 6px;
+    pointer-events: auto;
+    // background-color:  $dark-gray;
+    // color:  #fcfbf7;
+    // text-transform: uppercase;
+    // letter-spacing: 2px;
+    // font-size: 75%;
+    transition: transform 0.2s;
+    // text-align: center;
+  
+
+    // justify-content: center;
+    
+    // margin-right: 10px;
+    // margin-left: 4px;
 
     &:hover {
         background: $medium-gray;
@@ -46,24 +55,34 @@ $linkGap : 3px;
 .propertiesButtons-linkButton-empty.toggle-on {
     background-color: $medium-blue;
     color: $white;
+    width:100%
 }
 .propertiesButtons-linkButton-empty.toggle-hover {
     background-color: $light-blue;
     color: $black;
+    width:100%
 }
 .propertiesButtons-linkButton-empty.toggle-off {
-    background-color: $dark-gray;
-    color: white;
+    background-color: white;//$dark-gray;
+    color: black; //white;
+    width:100%
+}
+
+.propertiesButtons-icon {
+    margin-left:8px;
 }
 
 .propertiesButtons {
+    position:relative;
     width: 100%;
-    height: auto;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    padding-bottom: 5.5px;
-    gap: 5px;
+    //     margin-top: 3px;
+//    // grid-column: 1/4;
+//     width: 100%;
+//     height: auto;
+//     display: flex;
+//     // flex-direction: row;
+//     // flex-wrap: wrap;
+//     padding-bottom: 5.5px;
 }
 
 .onClickFlyout-editScript {
@@ -79,8 +98,11 @@ $linkGap : 3px;
 
 .propertiesButtons-button {
     pointer-events: auto;
-    padding-right: 5px;
-    width: 100%;
+    padding-right: 8px;//5px;
+    width: 100%;//width: 25px;
+    border-radius: 5px;
+    margin-right: 20px;
+    margin-bottom: 8px;
 }
 
 .propertiesButton-dropdownList {
@@ -106,18 +128,24 @@ $linkGap : 3px;
     }
 }
 
-.propertiesButtons-title {
-    background: $dark-gray;
-    color: $white;
-    font-size: 6px;
-    width: 37px;
-    padding: 3px;
-    height: 12px;
-    border-radius: 7px;
+.propertiesButtons-label {
     text-transform: uppercase;
-    text-align: center;
-    margin-top: -4px;
-}
+    margin-left: 8px;
+    // margin-right: 50 px;
+}
+
+// .propertiesButtons-title {
+//     background: pink; //$dark-gray;
+//     color: $white;
+//     font-size: 6px;
+//     width: 37px;
+//     padding: 3px;
+//     height: 12px;
+//     border-radius: 7px;
+//     text-transform: uppercase;
+//     text-align: center;
+//     margin-top: -4px;
+// }
 
 .propertiesButtons-linker {
     height: 25px;