From 1b7a3ca416e51414e8dc3f395f2f58d8ceb4bb15 Mon Sep 17 00:00:00 2001 From: Luis Aleman Date: Mon, 27 Aug 2012 19:10:20 -0400 Subject: [PATCH 1/4] Changed box-shadow mixin to accept infinite, comma separated, shadows --- less/mixins.less | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/less/mixins.less b/less/mixins.less index 785ac6c2e8..989ac0d706 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -251,10 +251,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 From 96a1797af123e73ba05cc1b6ce5aa8ef0ef17694 Mon Sep 17 00:00:00 2001 From: Luis Aleman Date: Mon, 27 Aug 2012 19:13:11 -0400 Subject: [PATCH 2/4] No longer need to write box-shadows in full when using lighten or other functions --- less/mixins.less | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/less/mixins.less b/less/mixins.less index 989ac0d706..7fcd14c8e4 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 From 67eae2a5038d5203220450c2a22ea559ab52d897 Mon Sep 17 00:00:00 2001 From: Luis Aleman Date: Mon, 27 Aug 2012 19:13:37 -0400 Subject: [PATCH 3/4] Do not need to write box-shadow in full --- less/navbar.less | 4 +--- less/scaffolding.less | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/less/navbar.less b/less/navbar.less index 64e2eb7ea3..25651b14a7 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -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 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 { From 2719ac3e9bec37813e1fd69e2ab69c9a015be647 Mon Sep 17 00:00:00 2001 From: Luis Aleman Date: Mon, 27 Aug 2012 19:14:00 -0400 Subject: [PATCH 4/4] Unescaped box-shadows to take advantage of new box-shadow mixin --- less/button-groups.less | 4 ++-- less/buttons.less | 4 ++-- less/forms.less | 2 +- less/navbar.less | 8 ++++---- less/progress-bars.less | 2 +- less/responsive-navbar.less | 2 +- 6 files changed, 11 insertions(+), 11 deletions(-) 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 08ece791c4..177e20049a 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 d2445b987f..eb0971f4c9 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/navbar.less b/less/navbar.less index 25651b14a7..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)); } } @@ -274,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; @@ -446,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 {