From 4d523bddb0403d137b50e831e4312861cab9842d Mon Sep 17 00:00:00 2001 From: Sacha Greif Date: Fri, 11 Jul 2014 10:18:09 +0900 Subject: [PATCH] fixing css z-index bugs --- client/views/notifications/notifications.html | 2 +- .../lib/client/sass/modules/_header.scss | 183 ++++++++++++++++++ .../client/sass/modules/_notifications.scss | 13 +- .../lib/client/sass/partials/_dropdown.scss | 6 +- .../lib/client/stylesheets/screen.css | 57 +++--- 5 files changed, 229 insertions(+), 32 deletions(-) create mode 100644 packages/telescope-theme-hubble/lib/client/sass/modules/_header.scss diff --git a/client/views/notifications/notifications.html b/client/views/notifications/notifications.html index f188e65a2..f9a4f3a29 100644 --- a/client/views/notifications/notifications.html +++ b/client/views/notifications/notifications.html @@ -2,7 +2,6 @@ {{#if currentUser}} {{#if canPost}}
- {{notification_count}} {{i18n "Mark all as read"}}
+ {{notification_count}} {{/if}} {{/if}} \ No newline at end of file diff --git a/packages/telescope-theme-hubble/lib/client/sass/modules/_header.scss b/packages/telescope-theme-hubble/lib/client/sass/modules/_header.scss new file mode 100644 index 000000000..15c2d41d5 --- /dev/null +++ b/packages/telescope-theme-hubble/lib/client/sass/modules/_header.scss @@ -0,0 +1,183 @@ +// .header{ +// background:url("../images/bg-black.png") top center; +// } +// @media only screen and (-webkit-min-device-pixel-ratio: 1.5){ +// .header{ +// background:url("../images/bg-black@2x.png") top center; +// background-size:10px 10px; +// } +// } +.header{ + background:$highlight-color url("/img/bg-header.png") top center; + background-color:$highlight-color; + margin-bottom:$grid-margin; + height:$grid-unit; + position:relative; + @include cf; + border-radius: 0 0 3px 3px; + .site-nav{ + float:left; + margin-left:20px; + position:relative; + z-index:20; + } + .logo{ + position:absolute; + display:inline-block; + text-align:center; + top:10px; + left:0px; + width:100%; + color:white; + font-size:24px; + a, a:visited{ + color:white; + } + &.image{ + position:absolute; + left:50%; + a{ + display:block; + height:100%; + width:100%; + background: no-repeat center center; + font: 0/0 a; + text-shadow: none; + color: transparent; + } + } + } + .user-nav{ + float:right; + margin-right:10px; + position:relative; + z-index:20; + .submit{ + // background:$red; + // display:block; + // padding:0px 10px; + } + } +} +// @media only screen and (-webkit-min-device-pixel-ratio: 1.5){ +// .header{ +// // background-image:url("/img/bg-header@2x.png"); +// // background-size: 10px 10px; +// .logo a{ +// background-image: url('/img/logo@2x.png'); +// background-size: 124px 37px; +// } +// } +// } +.auth-buttons{ + position:relative; + z-index:20; + float:right; + margin:20px 10px 0 0; + #login-buttons{ + position:relative; + line-height:26px; + .accounts-dialog{ + @extend .popover; + } + .account-link{ + display:block; + color:white !important; + margin-bottom:10px; + float:none; + } + a{ + text-decoration:none; + color:$text; + } + a.login-link-text{ + color:#fff; + font-weight:normal; + display:inline-block; + height:26px; + } + #login-buttons-password{ + @extend .button; + float:none !important; + @include text-shadow(none); + width:auto; + line-height:1.5; + height:26px; + margin:10px 0 !important; + } + .login-header{ + font-family:inherit; + height:26px; + margin-right:10px; + cursor:pointer; + color:white; + &:before{ + color:white(0.5); + content:"Welcome, "; + } + } + #login-buttons-logout{ + color:white; + // background:none; + border:none; + font-family:inherit; + font-size:inherit; + padding:0; + height:26px; + text-shadow:none; + } + } +} +.nav{ + @include cf; + margin-top:20px; + >li{ + @include horizontal-list-item; + margin-right:10px; + + >a, >div >a{ + color:white; + font-size:16px; + line-height:26px; + height:26px; + font-weight:normal; + + &.intercom em{ + &:before{ + content:'('; + } + &:after{ + content:')'; + } + } + } + } +} +.search{ + position: relative; + .search-field{ + font-size: 14px; + padding: 4px 12px; + line-height: 1.3; + border-radius: 20px; + border: 0px; + width: 100px; + -webkit-transition: 0.2s all; + -moz-transition: 0.2s all; + background: white; + &:focus{ + outline:none; + } + } + &.empty{ + .search-field{ + background: white(0.1); + &:focus{ + background: white; + } + } + .search-clear{ + display: none; + } + } +} diff --git a/packages/telescope-theme-hubble/lib/client/sass/modules/_notifications.scss b/packages/telescope-theme-hubble/lib/client/sass/modules/_notifications.scss index 6dd89f11d..70fdae2ce 100644 --- a/packages/telescope-theme-hubble/lib/client/sass/modules/_notifications.scss +++ b/packages/telescope-theme-hubble/lib/client/sass/modules/_notifications.scss @@ -1,3 +1,5 @@ +$notifications-width: 260px; + .notifications{ @include small{ margin-bottom: 10px; @@ -11,12 +13,12 @@ @include medium-large{ position:fixed; height:100%; - width:260px; + width:$notifications-width; top:0px; - left:-260px; + left:-$notifications-width; } background:#f3f3f3; - @include single-transition(ease-out, left, 400ms, 0ms); + @include single-transition(left, 400ms, ease-out, 0ms); z-index: 1000; .mark-as-read{ display:block; @@ -54,12 +56,13 @@ } .notifications-toggle{ + @include single-transition(left, 400ms, ease-out, 0ms); @include small{ display: none; } display:block; position:absolute; - left:260px; + left:0px; top:80px; white-space:nowrap; background:white; @@ -74,6 +77,8 @@ color:$light-text; } .notifications-open &{ + @include box-shadow(0 1px 1px black(0.15)); + left: $notifications-width; background: white; color: $text; } diff --git a/packages/telescope-theme-hubble/lib/client/sass/partials/_dropdown.scss b/packages/telescope-theme-hubble/lib/client/sass/partials/_dropdown.scss index e9975a22f..622a1735f 100644 --- a/packages/telescope-theme-hubble/lib/client/sass/partials/_dropdown.scss +++ b/packages/telescope-theme-hubble/lib/client/sass/partials/_dropdown.scss @@ -12,11 +12,11 @@ } .dropdown-menu{ display:none; - top:10px; + top:20px; left:10px; position:absolute; - padding-top:20px; - z-index: 1000; + padding-top:10px; + z-index: 10000; ul{ background:white; padding:10px; diff --git a/packages/telescope-theme-hubble/lib/client/stylesheets/screen.css b/packages/telescope-theme-hubble/lib/client/stylesheets/screen.css index 1577ee6db..fec2c1793 100644 --- a/packages/telescope-theme-hubble/lib/client/stylesheets/screen.css +++ b/packages/telescope-theme-hubble/lib/client/stylesheets/screen.css @@ -489,11 +489,11 @@ body.pageslide-open { /* line 13, ../sass/partials/_dropdown.scss */ .has-dropdown .dropdown .dropdown-menu { display: none; - top: 10px; + top: 20px; left: 10px; position: absolute; - padding-top: 20px; - z-index: 1000; } + padding-top: 10px; + z-index: 10000; } /* line 20, ../sass/partials/_dropdown.scss */ .has-dropdown .dropdown .dropdown-menu ul { background: white; @@ -1745,34 +1745,34 @@ table { background: #f36c3d; color: white; } -/* line 1, ../sass/modules/_notifications.scss */ +/* line 3, ../sass/modules/_notifications.scss */ .notifications { background: #f3f3f3; - -moz-transition: ease-out left 400ms 0ms; - -o-transition: ease-out left 400ms 0ms; - -webkit-transition: ease-out left 400ms; + -moz-transition: left 400ms ease-out 0ms; + -o-transition: left 400ms ease-out 0ms; + -webkit-transition: left 400ms ease-out; -webkit-transition-delay: 0ms; - transition: ease-out left 400ms 0ms; + transition: left 400ms ease-out 0ms; z-index: 1000; } @media screen and (max-width: 30em) { - /* line 1, ../sass/modules/_notifications.scss */ + /* line 3, ../sass/modules/_notifications.scss */ .notifications { margin-bottom: 10px; } - /* line 4, ../sass/modules/_notifications.scss */ + /* line 6, ../sass/modules/_notifications.scss */ .notifications.no-notifications { display: none; } - /* line 7, ../sass/modules/_notifications.scss */ + /* line 9, ../sass/modules/_notifications.scss */ .notifications .read { display: none; } } @media screen and (min-width: 30em) { - /* line 1, ../sass/modules/_notifications.scss */ + /* line 3, ../sass/modules/_notifications.scss */ .notifications { position: fixed; height: 100%; width: 260px; top: 0px; left: -260px; } } - /* line 21, ../sass/modules/_notifications.scss */ + /* line 23, ../sass/modules/_notifications.scss */ .notifications .mark-as-read { display: block; text-align: center; @@ -1780,39 +1780,44 @@ table { font-size: 13px; border-bottom: 1px solid #dfdbdb; background: #f3f3f3; } - /* line 28, ../sass/modules/_notifications.scss */ + /* line 30, ../sass/modules/_notifications.scss */ .notifications .mark-as-read:link, .notifications .mark-as-read:visited { color: #7ac0e4; } - /* line 32, ../sass/modules/_notifications.scss */ + /* line 34, ../sass/modules/_notifications.scss */ .notifications ul { height: 100%; overflow: auto; } - /* line 35, ../sass/modules/_notifications.scss */ + /* line 37, ../sass/modules/_notifications.scss */ .notifications ul li { padding: 10px; border-bottom: 1px solid #dfdbdb; font-size: 13px; background: white; } - /* line 40, ../sass/modules/_notifications.scss */ + /* line 42, ../sass/modules/_notifications.scss */ .notifications ul li .notification-timestamp { color: #b3c1c6; font-size: 12px; } - /* line 44, ../sass/modules/_notifications.scss */ + /* line 46, ../sass/modules/_notifications.scss */ .notifications ul li.read { color: #b3c1c6; background: #f3f3f3; } - /* line 50, ../sass/modules/_notifications.scss */ + /* line 52, ../sass/modules/_notifications.scss */ .notifications-open .notifications { left: 0px; -moz-box-shadow: 1px 0px 1px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 1px 0px 1px rgba(0, 0, 0, 0.15); box-shadow: 1px 0px 1px rgba(0, 0, 0, 0.15); } -/* line 56, ../sass/modules/_notifications.scss */ +/* line 58, ../sass/modules/_notifications.scss */ .notifications-toggle { + -moz-transition: left 400ms ease-out 0ms; + -o-transition: left 400ms ease-out 0ms; + -webkit-transition: left 400ms ease-out; + -webkit-transition-delay: 0ms; + transition: left 400ms ease-out 0ms; display: block; position: absolute; - left: 260px; + left: 0px; top: 80px; white-space: nowrap; background: white; @@ -1826,18 +1831,22 @@ table { font-size: 13px; z-index: 10; } @media screen and (max-width: 30em) { - /* line 56, ../sass/modules/_notifications.scss */ + /* line 58, ../sass/modules/_notifications.scss */ .notifications-toggle { display: none; } } - /* line 71, ../sass/modules/_notifications.scss */ + /* line 74, ../sass/modules/_notifications.scss */ .notifications-toggle.no-notifications { background: rgba(255, 255, 255, 0.3); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; color: #b3c1c6; } - /* line 76, ../sass/modules/_notifications.scss */ + /* line 79, ../sass/modules/_notifications.scss */ .notifications-open .notifications-toggle { + -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); + left: 260px; background: white; color: #4a4444; }