diff --git a/gadjo/static/css/gadjo.scss b/gadjo/static/css/gadjo.scss index 7f72e5c..2cea230 100644 --- a/gadjo/static/css/gadjo.scss +++ b/gadjo/static/css/gadjo.scss @@ -507,10 +507,10 @@ div#content { } } -div#main-content > h2, -div#appbar > h2, -div#main-content .top-title h2, -div#content h2 { +#main-content > h2, +#appbar > h2, +#main-content .top-title h2, +#content h2 { margin-top: 0; font-weight: normal; color: #161c2a; @@ -1117,101 +1117,97 @@ $appicons: add, agendas, announces, bankcard, book, calendar, cards, categories, #appbar { position: relative; - & > a { - position: relative; - top: -45px; - float: right; - margin-left: 2em; + border-radius: 3px 3px 0 0; + display: flex; + flex-wrap: wrap; + align-items: baseline; + margin-bottom: 20px; + + & > h2 { + margin-bottom: 0; } span.actions { - position: absolute; - bottom: 0px; - right: 0; + position: relative; + flex: 1 1 auto; + display: flex; + flex-direction: row-reverse; + flex-wrap: wrap; + > * { - float: right; margin-left: 2em; } @media print { display: none; } - } - & > a, - span.actions > a { - @extend %button; - &.disabled { - border-color: #aaa; - color: #aaa; - background: #eee; - pointer-events: none; - &:hover { - background: #eee; + > a { + @extend %button; + &.disabled { + border-color: #aaa; color: #aaa; - } - } - } - border-radius: 3px 3px 0 0; - span.actions a.extra-actions-menu-opener, - a.extra-actions-menu-opener { - border: 1px solid transparent; - color: $primary-color; - &::before { - border-radius: 3px; - cursor: pointer; - content: "\f142"; /* ellipsis-v */ - font-family: FontAwesome; - border-bottom: 0; - position: relative; - z-index: 200; - top: 2px; - } - &.open, &.open:hover { - background: $primary-color; - color: white; - border: 1px solid transparent; - border-radius: 3px 3px 0 0; - } - } - .extra-actions-menu { - padding: 0px; - list-style: none; - position: absolute; - right: 0px; - margin-top: -20px; - background: $primary-color; - box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 0.04); - z-index: 100; - display: none; - min-width: 12em; - &.open { - border-radius: 3px 0 3px 3px; - display: block; - } - li { - margin: 0; - a { - color: white; - float: none; - display: block; - margin: 0; - padding: 5px 10px; - border: 0; + background: #eee; + pointer-events: none; &:hover { - background: lighten($primary-color, 20%); + background: #eee; + color: #aaa; } } } - } - span.actions { + a.extra-actions-menu-opener { + border: 1px solid transparent; + color: $primary-color; + &::before { + border-radius: 3px; + cursor: pointer; + content: "\f142"; /* ellipsis-v */ + font-family: FontAwesome; + border-bottom: 0; + position: relative; + z-index: 200; + top: 2px; + } + &.open, &.open:hover { + background: $primary-color; + color: white; + border: 1px solid transparent; + border-radius: 3px 3px 0 0; + } + } .extra-actions-menu { + padding: 0px; + list-style: none; + position: absolute; + right: 0px; + background: $primary-color; + box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 0.04); + z-index: 100; + display: none; + min-width: 12em; margin-top: 0px; top: 100%; + &.open { + border-radius: 3px 0 3px 3px; + display: block; + } + li { + margin: 0; + a { + color: white; + float: none; + display: block; + margin: 0; + padding: 5px 10px; + border: 0; + &:hover { + background: lighten($primary-color, 20%); + } + } + } } } &.highlight { background: linear-gradient(to right, $primary-color 30%, $secondary-color 100%); border-radius: $cell-border-radius; padding: 1rem; - padding-bottom: 5px; margin-bottom: 1rem; h2 { color: white;