code reorganising and updates

1 files changed, 103 insertions, 0 deletions

diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss
new file mode 100644
index 000000000..d4f1b9379
--- /dev/null
+++ b/src/client/views/nodes/button/FontIconBox.scss
@@ -0,0 +1,103 @@
+@import "../../global/globalCssVariables";
+
+.fontIconBox-label {
+    color: $white;
+    margin-right: 4px;
+    margin-top: 1px;
+    position: relative;
+    text-align: center;
+    font-size: 7px;
+    letter-spacing: normal;
+    background-color: inherit;
+    border-radius: 8px;
+    margin-top: -8px;
+    padding: 0;
+    width: 100%;
+}
+
+.fontIconBadge-container {
+    position:absolute;
+    z-index: 1000;
+    top: 12px;
+
+    .fontIconBadge {
+        position: absolute;
+        top: -10px;
+        right: -10px;
+        color: $white;
+        background: $pink;
+        font-weight: 300;
+        border-radius: 100%;
+        width: 25px;
+        height: 25px;
+        text-align: center;
+        padding-top: 4px;
+        font-size: 12px;
+    }
+}
+
+.menuButton-circle,
+.menuButton-round {
+    border-radius: 100%;
+    background-color: $dark-gray;
+    padding: 0;
+
+    .fontIconBox-label {
+        //margin-left: -10px; // button padding is 10px;
+        bottom: 0;
+        position: absolute;
+    }
+
+    &:hover {
+        background-color: $light-gray;
+    }
+}
+
+.menuButton-square {
+    padding-top: 3px;
+    padding-bottom: 3px;
+    background-color: $dark-gray;
+
+    .fontIconBox-label {
+        border-radius: 0px;
+        margin-top: 0px;
+        border-radius: "inherit";
+    }
+}
+
+.menuButton,
+.menuButton-circle,
+.menuButton-round,
+.menuButton-square {
+    margin-left: -5%;
+    width: 110%;
+    height: 100%;
+    pointer-events: all;
+    touch-action: none;
+
+    .menuButton-wrap {
+        touch-action: none;
+        border-radius: 8px;
+        width: 100%;
+    }
+
+    .menuButton-icon-square {
+        width: auto;
+        height: 29px;
+        padding: 4px;
+    }
+
+    svg {
+        width: 95% !important;
+        height: 95%;
+    }
+}
+.menuButton-round {
+    width: 100%;
+    svg {
+        width: 50% !important;
+        height: 50%;
+        position: relative;
+        bottom: 2px;
+    }
+}
\ No newline at end of file