0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00

Use .box-shadow() mixin so we can enable/disable them

This commit is contained in:
Mark Otto 2014-07-08 21:19:14 -07:00
parent ff4ff3bd06
commit f380ca21e2
25 changed files with 56 additions and 57 deletions

View File

@ -182,7 +182,6 @@
background-color: #c12e2a;
background-image: none;
}
.thumbnail,
.img-thumbnail {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
box-shadow: 0 1px 2px rgba(0, 0, 0, .075);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -3376,8 +3376,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
margin-left: -.75rem;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
-webkit-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);
-webkit-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);
}
@media (min-width: 48em) {
.navbar-form .form-group {
@ -4635,7 +4635,6 @@ button.close {
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: .3rem;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -182,7 +182,6 @@
background-color: #c12e2a;
background-image: none;
}
.thumbnail,
.img-thumbnail {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
box-shadow: 0 1px 2px rgba(0, 0, 0, .075);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -3376,8 +3376,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
margin-left: -.75rem;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
-webkit-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);
-webkit-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);
}
@media (min-width: 48em) {
.navbar-form .form-group {
@ -4635,7 +4635,6 @@ button.close {
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: .3rem;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -117,11 +117,11 @@
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link {
box-shadow: none;
.box-shadow(none);
}
}

View File

@ -39,7 +39,7 @@
&.active {
outline: 0;
background-image: none;
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
&.disabled,
@ -48,7 +48,7 @@
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
opacity: .65;
box-shadow: none;
.box-shadow(none);
}
}
@ -90,7 +90,7 @@
&[disabled],
fieldset[disabled] & {
background-color: transparent;
box-shadow: none;
.box-shadow(none);
}
&,
&:hover,

View File

@ -17,7 +17,7 @@ code {
font-size: 90%;
color: @code-color;
background-color: @code-bg;
border-radius: @border-radius-base;
.border-radius(@border-radius-base);
}
// User input typically entered via keyboard
@ -26,13 +26,13 @@ kbd {
font-size: 90%;
color: @kbd-color;
background-color: @kbd-bg;
border-radius: @border-radius-small;
box-shadow: inset 0 -.1rem 0 rgba(0,0,0,.25);
.border-radius(@border-radius-small);
.box-shadow(inset 0 -.1rem 0 rgba(0,0,0,.25));
kbd {
padding: 0;
font-size: 100%;
box-shadow: none;
.box-shadow(none);
}
}

View File

@ -44,7 +44,7 @@
background-color: @dropdown-bg;
border: 1px solid @dropdown-border;
.border-radius(@border-radius-base);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
.box-shadow(0 6px 12px rgba(0,0,0,.175));
background-clip: padding-box;
// Dividers (basically an hr) within the dropdown

View File

@ -123,7 +123,7 @@ output {
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid @input-border;
.border-radius(@input-border-radius);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
// Customize the `:focus` state to imitate native WebKit styles.

View File

@ -5,8 +5,8 @@
border-radius: @radius;
}
.box-shadow(@shadow: 0 .1rem .2rem rgba(0,0,0,.1)) when (@enable-shadows = true) {
box-shadow: @shadow;
.box-shadow(@shadow) when (@enable-shadows = true) {
box-shadow: @arguments;
}

View File

@ -20,10 +20,11 @@
// Set the border and box shadow on specific inputs to match
.form-control {
border-color: @border-color;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075); // Redeclare so transitions work
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
border-color: darken(@border-color, 10%);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
.box-shadow(@shadow);
}
}
// Set validation states also for addons
@ -51,12 +52,12 @@
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
.form-control-focus(@color: @input-border-focus) {
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
.form-control-focus() {
&:focus {
border-color: @color;
border-color: @input-border-focus;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color-rgba;
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @input-box-shadow-focus;
.box-shadow(@shadow);
}
}

View File

@ -53,7 +53,7 @@
background-color: @modal-content-bg;
border: 1px solid @modal-content-border-color;
.border-radius(@border-radius-large);
box-shadow: 0 3px 9px rgba(0,0,0,.5);
.box-shadow(0 3px 9px rgba(0,0,0,.5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: 0;
@ -137,7 +137,7 @@
margin: 30px auto;
}
.modal-content {
box-shadow: 0 5px 15px rgba(0,0,0,.5);
.box-shadow(0 5px 15px rgba(0,0,0,.5));
}
// Modal sizes

View File

@ -52,7 +52,7 @@
padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
.box-shadow(inset 0 1px 0 rgba(255,255,255,.1));
&:extend(.clearfix all);
-webkit-overflow-scrolling: touch;
@ -63,7 +63,7 @@
@media (min-width: @grid-float-breakpoint) {
width: auto;
border-top: 0;
box-shadow: none;
.box-shadow(none);
&.collapse {
display: block !important;
@ -248,7 +248,7 @@
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
.box-shadow(none);
> li > a,
.dropdown-header {
padding: 5px 15px 5px 25px;
@ -290,7 +290,7 @@
padding: 10px @navbar-padding-horizontal;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
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)");
// Mixin behavior for optimum display
.form-inline();
@ -312,7 +312,7 @@
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
box-shadow: none;
.box-shadow(none);
}
}

View File

@ -14,10 +14,9 @@
text-align: left; // Reset given new insertion method
background-color: @popover-bg;
background-clip: padding-box;
border: 1px solid @popover-fallback-border-color;
border: 1px solid @popover-border-color;
border-radius: @border-radius-large;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
.border-radius(@border-radius-large);
.box-shadow(0 5px 10px rgba(0,0,0,.2));
// Overrides for proper insertion
white-space: normal;

View File

@ -30,7 +30,7 @@
margin-bottom: @line-height-computed;
background-color: @progress-bg;
.border-radius(@border-radius-base);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
}
// Bar of progress
@ -43,7 +43,7 @@
color: @progress-bar-color;
text-align: center;
background-color: @progress-bar-bg;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
transition: width .6s ease;
}
@ -74,7 +74,7 @@
min-width: 30px;
background-color: transparent;
background-image: none;
box-shadow: none;
.box-shadow(none);
}
}

View File

@ -19,12 +19,13 @@
.btn-warning,
.btn-danger {
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
.box-shadow(@shadow);
// Reset the shadow
&:active,
&.active {
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
}
@ -77,9 +78,8 @@
// Images
// --------------------------------------------------
.thumbnail,
.img-thumbnail {
box-shadow: 0 1px 2px rgba(0,0,0,.075);
.box-shadow(0 1px 2px rgba(0,0,0,.075));
}
@ -111,11 +111,12 @@
#gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
.reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
.border-radius(@navbar-border-radius);
box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
.box-shadow(@shadow);
.navbar-nav > .active > a {
#gradient > .vertical(@start-color: darken(@navbar-default-bg, 5%); @end-color: darken(@navbar-default-bg, 2%));
box-shadow: inset 0 3px 9px rgba(0,0,0,.075);
.box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
}
}
.navbar-brand,
@ -130,7 +131,7 @@
.navbar-nav > .active > a {
#gradient > .vertical(@start-color: @navbar-inverse-bg; @end-color: lighten(@navbar-inverse-bg, 2.5%));
box-shadow: inset 0 3px 9px rgba(0,0,0,.25);
.box-shadow(inset 0 3px 9px rgba(0,0,0,.25));
}
.navbar-brand,
@ -155,7 +156,8 @@
// Common styles
.alert {
text-shadow: 0 1px 0 rgba(255,255,255,.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
@shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
}
// Mixin for generating new styles
@ -206,7 +208,7 @@
.list-group {
.border-radius(@border-radius-base);
box-shadow: 0 1px 2px rgba(0,0,0,.075);
.box-shadow(0 1px 2px rgba(0,0,0,.075));
}
.list-group-item.active,
.list-group-item.active:hover,

View File

@ -187,6 +187,7 @@
@input-border-radius: @border-radius-base;
//** Border color for inputs on focus
@input-border-focus: #66afe9;
@input-box-shadow-focus: rgba(102,175,233,.6);
//** Placeholder text color
@input-color-placeholder: @gray-light;