summaryrefslogtreecommitdiffstats
path: root/components/menu
diff options
context:
space:
mode:
Diffstat (limited to 'components/menu')
-rw-r--r--components/menu/_menu.scss68
-rw-r--r--components/menu/popup-menu.html8
-rw-r--r--components/menu/relative-popup-menu.html8
3 files changed, 84 insertions, 0 deletions
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