diff options
Diffstat (limited to 'core/css/apps.scss')
| -rw-r--r-- | core/css/apps.scss | 87 |
1 files changed, 71 insertions, 16 deletions
diff --git a/core/css/apps.scss b/core/css/apps.scss index 691a0c07131..fc255aca676 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -737,6 +737,9 @@ kbd { } /* POPOVER MENU ------------------------------------------------------------- */ +$popoveritem-height: 38px; +$popovericon-size: 16px; + .ie, .edge { .bubble, .bubble:after, @@ -811,14 +814,13 @@ kbd { flex: 0 0 auto; > button, > a, - > .menuitem, - > label { + > .menuitem { cursor: pointer; - line-height: 36px; + line-height: $popoveritem-height; border: 0; background-color: transparent; display: flex; - align-items: center; + align-items: flex-start; height: auto; margin: 0; font-weight: 300; @@ -827,24 +829,34 @@ kbd { color: $color-main-text; /* Override the app-navigation li opacity */ opacity: .7 !important; - [class^='icon-'], - [class*=' icon-'], + span[class^='icon-'], + span[class*=' icon-'], &[class^='icon-'], &[class*=' icon-'] { min-width: 0; /* Overwrite icons*/ min-height: 0; - background-position: 10px center; - background-size: 16px; + background-position: #{($popoveritem-height - $popovericon-size) / 2} center; + background-size: $popovericon-size; } - [class^='icon-'], - [class*=' icon-'] { + span[class^='icon-'], + span[class*=' icon-'] { /* Keep padding to define the width to assure correct position of a possible text */ - padding: 18px 0 18px 36px; + padding: #{$popoveritem-height / 2} 0 #{$popoveritem-height / 2} $popoveritem-height; + } + // If no icons set, force left margin to align + &:not([class^='icon-']):not([class*='icon-']) { + > span, + > input, + > form { + &:not([class^='icon-']):not([class*='icon-']):first-child { + margin-left: $popoveritem-height; + } + } } &[class^='icon-'], &[class*=' icon-'] { - padding: 0 10px 0 36px !important; + padding: 0 #{($popoveritem-height - $popovericon-size) / 2} 0 $popoveritem-height !important; } &:hover, &:focus, &.active { opacity: 1 !important; @@ -870,9 +882,11 @@ kbd { &:not(:empty) { padding-right: 10px !important; } + /* DEPRECATED! old img in popover fallback + * TODO: to remove */ > img { - width: 16px; - padding: 0 10px; + width: $popovericon-size; + padding: #{($popoveritem-height - $popovericon-size) / 2}; } /* checkbox/radio fixes */ > input.radio + label, @@ -881,14 +895,55 @@ kbd { width: 100%; } > input.checkbox + label::before { - margin: -2px 12px 0; + margin: -2px 13px 0; } > input.radio + label::before { - margin: -2px 11px 0; + margin: -2px 12px 0; } > input:not([type=radio]):not([type=checkbox]):not([type=image]) { width: 150px; } + form { + display: flex; + flex: 1 1 auto; + /* put a small space between text and form + if there is an element before */ + &:not(:first-child) { + margin-left: 5px; + } + } + /* no margin if hidden span before */ + > span.hidden + form, + > span[style*='display:none'] + form { + margin-left: 0; + } + /* Inputs inside popover supports text, submit & reset */ + input { + min-width: #{$popoveritem-height - 4px}; /* twice the margin */ + max-height: #{$popoveritem-height - 4px}; /* twice the margin */ + margin: 2px 0; + flex: 1 1 auto; + &:not(:first-child) { + margin-left: 5px; + } + } + } + /* css hack, only first not hidden*/ + &:not(.hidden):not([style*='display:none']) { + &:first-of-type { + > button, > a, > .menuitem { + > form, > input { + margin-top: 10px; + } + } + } + &:last-of-type { + > button, > a, > .menuitem { + > form, > input { + margin-bottom: 10px; + } + } + } } > button { padding: 0; |