app/components/yattho/alpha/menu.css in yattho_view_components-0.0.1 vs app/components/yattho/alpha/menu.css in yattho_view_components-0.1.1

- old
+ new

@@ -1,117 +2 @@ -/* menu */ - -/* A menu on the side of a page, defaults to left side. e.g. github.com/about */ - -.menu { - margin-bottom: var(--yattho-stack-gap-normal, 16px); - list-style: none; - background-color: var(--color-canvas-default); - border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default); - border-radius: var(--yattho-borderRadius-medium, 6px); -} - -.menu-item { - position: relative; - display: block; - padding: var(--yattho-control-medium-paddingInline-condensed, 8px) var(--yattho-control-medium-paddingInline-spacious, 16px); - color: var(--color-fg-default); - border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-muted); -} - -.menu-item:first-child { - border-top: 0; - border-top-left-radius: var(--yattho-borderRadius-medium, 6px); - border-top-right-radius: var(--yattho-borderRadius-medium, 6px); - } - -.menu-item:first-child::before { - border-top-left-radius: var(--yattho-borderRadius-medium, 6px); - } - -.menu-item:last-child { - border-bottom: 0; - border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px); - border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px); - } - -.menu-item:last-child::before { - border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px); - } - -.menu-item:hover { - text-decoration: none; - background-color: var(--color-neutral-subtle); - } - -.menu-item:active { - background-color: var(--color-canvas-subtle); - } - -.menu-item.selected, - .menu-item[aria-selected='true'], - .menu-item[aria-current]:not([aria-current='false']) { - cursor: default; - background-color: var(--color-menu-bg-active); - } - -.menu-item.selected::before, .menu-item[aria-selected='true']::before, .menu-item[aria-current]:not([aria-current='false'])::before { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 2px; - content: ''; - background-color: var(--color-yattho-border-active); - } - -.menu-item .octicon { - width: 16px; - margin-right: var(--yattho-control-medium-gap, 8px); - color: var(--color-fg-muted); - text-align: center; - } - -.menu-item .Counter { - float: right; - margin-left: var(--yattho-control-small-gap, 4px); - } - -.menu-item .menu-warning { - float: right; - color: var(--color-attention-fg); - } - -.menu-item .avatar { - float: left; - margin-right: var(--yattho-control-small-gap, 4px); - } - -.menu-item.alert .Counter { - color: var(--color-danger-fg); - } - -.menu-heading { - display: block; - padding: var(--yattho-control-medium-paddingInline-condensed, 8px) var(--yattho-control-medium-paddingInline-spacious, 16px); - margin-top: 0; - margin-bottom: 0; - font-size: inherit; - font-weight: var(--base-text-weight-semibold, 600); - color: var(--color-fg-default); - border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-muted); -} - -.menu-heading:hover { - text-decoration: none; - } - -.menu-heading:first-child { - border-top-left-radius: var(--yattho-borderRadius-medium, 6px); - border-top-right-radius: var(--yattho-borderRadius-medium, 6px); - } - -.menu-heading:last-child { - border-bottom: 0; - border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px); - border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px); - } +.menu{background-color:var(--color-canvas-default);border:var(--yattho-borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--yattho-borderRadius-medium,6px);list-style:none;margin-bottom:var(--yattho-stack-gap-normal,16px)}.menu-item{border-bottom:var(--yattho-borderWidth-thin,1px) solid var(--color-border-muted);color:var(--color-fg-default);display:block;padding:var(--yattho-control-medium-paddingInline-condensed,8px) var(--yattho-control-medium-paddingInline-spacious,16px);position:relative}.menu-item:first-child{border-top:0;border-top-right-radius:var(--yattho-borderRadius-medium,6px)}.menu-item:first-child,.menu-item:first-child:before{border-top-left-radius:var(--yattho-borderRadius-medium,6px)}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:var(--yattho-borderRadius-medium,6px)}.menu-item:last-child,.menu-item:last-child:before{border-bottom-left-radius:var(--yattho-borderRadius-medium,6px)}.menu-item:hover{background-color:var(--color-neutral-subtle);text-decoration:none}.menu-item:active{background-color:var(--color-canvas-subtle)}.menu-item.selected,.menu-item[aria-current]:not([aria-current=false]),.menu-item[aria-selected=true]{background-color:var(--color-menu-bg-active);cursor:default}.menu-item.selected:before,.menu-item[aria-current]:not([aria-current=false]):before,.menu-item[aria-selected=true]:before{background-color:var(--color-yattho-border-active);bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.menu-item .octicon{color:var(--color-fg-muted);margin-right:var(--yattho-control-medium-gap,8px);text-align:center;width:16px}.menu-item .Counter{float:right;margin-left:var(--yattho-control-small-gap,4px)}.menu-item .menu-warning{color:var(--color-attention-fg);float:right}.menu-item .avatar{float:left;margin-right:var(--yattho-control-small-gap,4px)}.menu-item.alert .Counter{color:var(--color-danger-fg)}.menu-heading{border-bottom:var(--yattho-borderWidth-thin,1px) solid var(--color-border-muted);color:var(--color-fg-default);display:block;font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin-bottom:0;margin-top:0;padding:var(--yattho-control-medium-paddingInline-condensed,8px) var(--yattho-control-medium-paddingInline-spacious,16px)}.menu-heading:hover{text-decoration:none}.menu-heading:first-child{border-top-left-radius:var(--yattho-borderRadius-medium,6px);border-top-right-radius:var(--yattho-borderRadius-medium,6px)}.menu-heading:last-child{border-bottom:0;border-bottom-left-radius:var(--yattho-borderRadius-medium,6px);border-bottom-right-radius:var(--yattho-borderRadius-medium,6px)} \ No newline at end of file