diff --git a/less/button-groups.less b/less/button-groups.less index 7bd639aac4..62e53f373a 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -120,7 +120,7 @@ .btn-group > .btn + .dropdown-toggle { padding-left: 8px; padding-right: 8px; - .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); + .box-shadow(inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)); *padding-top: 5px; *padding-bottom: 5px; } @@ -147,7 +147,7 @@ // Remove the gradient and set the same inset shadow as the :active state .dropdown-toggle { background-image: none; - .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); + .box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)); } // Keep the hover's background when dropdown is open diff --git a/less/buttons.less b/less/buttons.less index c80986ea7b..3fd1e95f5f 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -24,7 +24,7 @@ border-bottom-color: darken(@btnBorder, 10%); .border-radius(4px); .ie7-restore-left-whitespace(); // Give IE7 some love - .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); + .box-shadow(inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)); // Hover state &:hover { @@ -51,7 +51,7 @@ background-color: darken(@white, 15%) e("\9"); background-image: none; outline: 0; - .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); + .box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)); } // Disabled state diff --git a/less/forms.less b/less/forms.less index 17fbaf857b..b4b86f907d 100644 --- a/less/forms.less +++ b/less/forms.less @@ -126,7 +126,7 @@ input[type="color"], border-color: rgba(82,168,236,.8); outline: 0; outline: thin dotted \9; /* IE6-9 */ - .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)); } } diff --git a/less/mixins.less b/less/mixins.less index 0aba0be63c..51ee3e3362 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -183,10 +183,7 @@ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work &:focus { border-color: darken(@borderColor, 10%); - // Write out in full since the lighten() function isn't easily escaped - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%); - -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%); + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%)); } } // Give a small background color for input-prepend/-append @@ -251,10 +248,11 @@ } // Drop shadows -.box-shadow(@shadow) { - -webkit-box-shadow: @shadow; - -moz-box-shadow: @shadow; - box-shadow: @shadow; +.box-shadow(@shadowA, @shadowB:X, ...){ + @props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`; + -webkit-box-shadow: @props; + -moz-box-shadow: @props; + box-shadow: @props; } // Transitions diff --git a/less/navbar.less b/less/navbar.less index 64e2eb7ea3..3514c40e0f 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -202,7 +202,7 @@ .navbar-fixed-top, .navbar-static-top { .navbar-inner { - .box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)"); + .box-shadow(inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)); } } @@ -210,7 +210,7 @@ .navbar-fixed-bottom { bottom: 0; .navbar-inner { - .box-shadow(~"inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1)"); + .box-shadow(inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1)); } } @@ -262,9 +262,7 @@ color: @navbarLinkColorActive; text-decoration: none; background-color: @navbarLinkBackgroundActive; - -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.125); - -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.125); - box-shadow: inset 0 3px 8px rgba(0,0,0,.125); + .box-shadow(inset 0 3px 8px rgba(0,0,0,.125)); } // Navbar button for toggling navbar items in responsive layouts @@ -276,7 +274,7 @@ margin-left: 5px; margin-right: 5px; .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%)); - .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)"); + .box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)); } .navbar .btn-navbar .icon-bar { display: block; @@ -448,7 +446,7 @@ color: @white; background-color: @navbarInverseSearchBackground; border-color: @navbarInverseSearchBorder; - .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)"); + .box-shadow(inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)); .transition(none); .placeholder(@navbarInverseSearchPlaceholderColor); diff --git a/less/progress-bars.less b/less/progress-bars.less index 36744d89c7..0486371aa8 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -66,7 +66,7 @@ .transition(width .6s ease); } .progress .bar + .bar { - .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)"); + .box-shadow(inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)); } // Striped bars diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index 4ffa5a9fec..c454dd5e39 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -129,7 +129,7 @@ margin: (@baseLineHeight / 2) 0; border-top: 1px solid @navbarBackground; border-bottom: 1px solid @navbarBackground; - .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)"); + .box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)); } .navbar-inverse .nav-collapse .navbar-form, .navbar-inverse .nav-collapse .navbar-search { diff --git a/less/scaffolding.less b/less/scaffolding.less index 342dcf7051..4c735ba88c 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -41,9 +41,7 @@ a:hover { background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.2); - -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1); - -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1); - box-shadow: 0 1px 3px rgba(0,0,0,.1); + .box-shadow(0 1px 3px rgba(0,0,0,.1)); } .img-circle {