mirror of
https://github.com/vale981/Vulcan
synced 2025-03-06 10:01:40 -05:00
fixing css z-index bugs
This commit is contained in:
Sacha Greif
parent
6495b63201
commit
4d523bddb0
5 changed files with 229 additions and 32 deletions
|
|
@ -2,7 +2,6 @@
|
|||
{{#if currentUser}}
|
||||
{{#if canPost}}
|
||||
<div class="notifications {{notification_class}}">
|
||||
<a href="#" class="notifications-toggle {{notification_class}}">{{notification_count}}</a>
|
||||
<a href="#" class="mark-as-read">{{i18n "Mark all as read"}}</a>
|
||||
<ul>
|
||||
{{#each notifications}}
|
||||
|
|
@ -10,6 +9,7 @@
|
|||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#" class="notifications-toggle {{notification_class}}">{{notification_count}}</a>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</template>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue