diff options
Diffstat (limited to 'components/menu')
| -rw-r--r-- | components/menu/_menu.scss | 68 | ||||
| -rw-r--r-- | components/menu/popup-menu.html | 8 | ||||
| -rw-r--r-- | components/menu/relative-popup-menu.html | 8 |
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 |