advanced css calc() failback

This commit is contained in:
marijus 2015-02-17 10:58:18 +01:00
parent e0c9929325
commit 0bedf3e5d2
2 changed files with 13 additions and 10 deletions

View File

@ -1395,14 +1395,6 @@ div.jGrowl div.jGrowl-notification {
border-top: none;
}
#search-text-ac .autocomplete {
margin-top: 2px;
margin-left: $radiuspx;
border: 1px solid #ccc;
border-top: none;
width: calc(197px - $radiuspx * 2) !important;
}
#recip-ac .autocomplete,
#poke-recip-ac .autocomplete,
#id-name-ac .autocomplete,
@ -1560,6 +1552,7 @@ header {
}
.acl-list-item {
width: 48%; /* fallback if browser does not support calc() */
width: calc(50% - 10px);
border: 1px solid $acl_bordercolour;
margin: 0px 0px 10px 10px;
@ -2353,6 +2346,7 @@ aside .nav > li > a:hover, aside .nav > li > a:focus {
}
.acl-list-item {
width: 98%; /* fallback if browser does not support calc() */
width: calc(100% - 10px);
}

View File

@ -1,9 +1,18 @@
$(document).ready(function() {
if($(window).width() < 767) {
$('main').css('width', $(window).width() + 231 );
// CSS3 calc() fallback (for unsupported browsers)
$('body').append('<div id="css3-calc" style="width: 10px; width: calc(10px + 10px); display: none;"></div>');
if( $('#css3-calc').width() == 10) {
$(window).resize(function() {
if($(window).width() < 767) {
$('main').css('width', $(window).width() + 231 );
} else {
$('main').css('width', '100%' );
}
});
}
$('#css3-calc').remove(); // Remove the test element
$('#expand-aside').click(function() {
$('#expand-aside-icon').toggleClass('icon-circle-arrow-right').toggleClass('icon-circle-arrow-left');