diff options
| author | Zog | 2018-01-04 16:29:38 +0100 |
|---|---|---|
| committer | Zog | 2018-01-04 16:30:14 +0100 |
| commit | f715e258311b487a2df90431c6629c18b3eb1f98 (patch) | |
| tree | 89edca82dcf0e0b5d13d900c7e578c40f4567c15 | |
| parent | a5e99f3f49c055fba455a4e94b5c5ed8fb584fd1 (diff) | |
| download | chouette-core-f715e258311b487a2df90431c6629c18b3eb1f98.tar.bz2 | |
Refs #5466; Fix truncation in the sticky header5466-fix-title-overflow-in-stick-header
:warning: Makes us of the flex layout, which is not supported on all
browsers yet.
What is our strategy here ?
| -rw-r--r-- | app/assets/stylesheets/components/_main_nav.sass | 32 |
1 files changed, 10 insertions, 22 deletions
diff --git a/app/assets/stylesheets/components/_main_nav.sass b/app/assets/stylesheets/components/_main_nav.sass index f102c4617..2af070389 100644 --- a/app/assets/stylesheets/components/_main_nav.sass +++ b/app/assets/stylesheets/components/_main_nav.sass @@ -245,7 +245,7 @@ $menuW: 300px & > .menu-item max-width: 75% - + .menu-item padding: 0 10px @@ -337,47 +337,35 @@ $menuW: 300px height: $menuH padding: 0 50px 0 75px margin-top: -4px + display: flex > * display: inline-block &.sticky-ptitle - width: 60% + flex: 1 1 height: $menuH + position: relative h1 - position: relative + position: absolute + left: 0 + right: 10px + top: 0 line-height: 1.1 white-space: nowrap max-height: 1.1em margin: 0 -1.4em 0 0 padding: 0 1.4em 5px 0 overflow: hidden - - &:before - content: '[...]' - font-size: 0.65em - position: absolute - z-index: 6 - right: 0 - bottom: 9px - - &:after - content: '' - position: absolute - z-index: 5 - right: 0 - width: 1.4em - height: 1em - margin-top: 0.2em - background-color: $blue + text-overflow: ellipsis .small.fa color: #fff margin-left: 0.5em &.sticky-paction - width: 40% + flex: 0 0 auto text-align: right vertical-align: top |