From 1994c98063c27a41797dec01f2ca9fcbe33ceab0 Mon Sep 17 00:00:00 2001
From: Israel Lavi <israel.lavi@intl.att.com>
Date: Mon, 21 May 2018 17:42:00 +0300
Subject: init commit onap ui

Change-Id: I1dace78817dbba752c550c182dfea118b4a38646
Issue-ID: SDC-1350
Signed-off-by: Israel Lavi <il0695@att.com>
---
 components/menu/_menu.scss               | 68 ++++++++++++++++++++++++++++++++
 components/menu/popup-menu.html          |  8 ++++
 components/menu/relative-popup-menu.html |  8 ++++
 3 files changed, 84 insertions(+)
 create mode 100644 components/menu/_menu.scss
 create mode 100644 components/menu/popup-menu.html
 create mode 100644 components/menu/relative-popup-menu.html

(limited to 'components/menu')

diff --git a/components/menu/_menu.scss b/components/menu/_menu.scss
new file mode 100644
index 0000000..fe32f32
--- /dev/null
+++ b/components/menu/_menu.scss
@@ -0,0 +1,68 @@
+.sdc-menu-list {
+    position: static;
+    @include box-sizing;
+    @include box-shadow(0 2px 4px 0 rgba($black, 0.3));
+    @include border-radius(2px);
+    border: 1px solid $light-gray;
+    border-top: solid 3px $blue;
+    background: $white;
+    min-width: 150px;
+    width: -webkit-max-content;
+    width: -moz-max-content;
+    width: max-content;
+
+    .sdc-menu-item:not(.separator) {
+        @include body-1;
+        height: 40px;
+        color: $dark-gray;
+        padding: 0 12px;
+        display: flex;
+        align-items: center;
+
+        svg {
+            margin-right: 16px;
+            g, path {
+                fill: $dark-gray;
+            }
+        }
+
+        &:hover {
+            &:not(.disabled) {
+                cursor: pointer;
+                &:not(.selected) {
+                    background: $light-silver;
+                    color: $text-black;
+                    g, path {
+                        fill: $dark-gray;
+                    }
+                }
+            }
+        }
+
+        &.disabled {
+            color: $gray;
+            g, path {
+                fill: $light-gray;
+            }
+        }
+
+        &.selected {
+            background: $lighter-blue;
+            color: $light-blue;
+            g, path {
+                fill: $dark-gray;
+            }
+        }
+    }
+
+    &.relative {
+        position: relative;
+    }
+
+    .separator {
+        cursor: default;
+        border-top: 1px solid $silver;
+        margin: 0 0;
+        height: 0;
+    }
+}
diff --git a/components/menu/popup-menu.html b/components/menu/popup-menu.html
new file mode 100644
index 0000000..f4f1cbd
--- /dev/null
+++ b/components/menu/popup-menu.html
@@ -0,0 +1,8 @@
+
+<ul class="sdc-menu-list static">
+    <li class="sdc-menu-item selected">item 1 (selected)</li>
+    <li class="sdc-menu-item disabled">item 2</li>
+    <li class="separator"/>
+    <li class="sdc-menu-item">item 3</li>
+    <li class="sdc-menu-item">custom action</li>
+</ul>
\ No newline at end of file
diff --git a/components/menu/relative-popup-menu.html b/components/menu/relative-popup-menu.html
new file mode 100644
index 0000000..e5a5449
--- /dev/null
+++ b/components/menu/relative-popup-menu.html
@@ -0,0 +1,8 @@
+<div class="sdc-popup-menu">
+    <ul class="sdc-menu-list relative" style="top: 10px; left: 10px;">
+        <li class="sdc-menu-item selected">item 1 (selected)</li>
+        <li class="sdc-menu-item disabled">item 2</li>
+        <li class="separator"/>
+        <li class="sdc-menu-item">item 3</li>
+    </ul>
+</div>
\ No newline at end of file
-- 
cgit 1.2.3-korg