Bugfix: the new endShowHide failed in Edge and mobile browsers

Cleanup bootstrap less files
This commit is contained in:
djmaze 2020-09-02 21:30:23 +02:00
parent 7135cc38fe
commit 0e8bf13d5d
32 changed files with 167 additions and 663 deletions

View file

@ -84,23 +84,23 @@ Things might work in Edge 18, Firefox 50-62 and Chrome 54-68 due to one polyfill
|js/* |1.14.0 |native | |js/* |1.14.0 |native |
|----------- |--------: |--------: | |----------- |--------: |--------: |
|admin.js |2.130.942 | 963.108 | |admin.js |2.130.942 | 961.538 |
|app.js |4.184.455 |2.626.387 | |app.js |4.184.455 |2.624.797 |
|boot.js | 671.522 | 43.742 | |boot.js | 671.522 | 43.742 |
|libs.js | 647.614 | 312.276 | |libs.js | 647.614 | 312.276 |
|polyfills.js | 325.834 | 0 | |polyfills.js | 325.834 | 0 |
|TOTAL |7.960.367 |3.945.513 | |TOTAL |7.960.367 |3.942.353 |
|js/min/* |1.14.0 |native |gzip 1.14 |gzip |brotli | |js/min/* |1.14.0 |native |gzip 1.14 |gzip |brotli |
|--------------- |--------: |--------: |--------: |--------: |--------: | |--------------- |--------: |--------: |--------: |--------: |--------: |
|admin.min.js | 252.147 | 130.575 | 73.657 | 37.877 | 32.469 | |admin.min.js | 252.147 | 130.359 | 73.657 | 37.825 | 32.456 |
|app.min.js | 511.202 | 354.284 |140.462 | 93.363 | 74.888 | |app.min.js | 511.202 | 354.068 |140.462 | 93.278 | 74.852 |
|boot.min.js | 66.007 | 5.534 | 22.567 | 2.319 | 1.988 | |boot.min.js | 66.007 | 5.534 | 22.567 | 2.319 | 1.988 |
|libs.min.js | 572.545 | 295.771 |176.720 | 91.520 | 80.851 | |libs.min.js | 572.545 | 295.771 |176.720 | 91.520 | 80.851 |
|polyfills.min.js | 32.452 | 0 | 11.312 | 0 | 0 | |polyfills.min.js | 32.452 | 0 | 11.312 | 0 | 0 |
|TOTAL |1.434.353 | 786.164 |424.718 |225.079 |190.196 | |TOTAL |1.434.353 | 785.732 |424.718 |224.942 |190.147 |
648.189 bytes (199.639 gzip) is not much, but it feels faster. 648.621 bytes (199.776 gzip) is not much, but it feels faster.
### CSS changes ### CSS changes
@ -123,10 +123,10 @@ Things might work in Edge 18, Firefox 50-62 and Chrome 54-68 due to one polyfill
* Removed vendors/Progress.js/minified/progressjs.min.css * Removed vendors/Progress.js/minified/progressjs.min.css
|css/* |1.14.0 |native | |css/* |1.14.0 |native |gzip 1.14 |gzip |brotli |
|-------------- |--------: |--------: | |-------------- |-------: |-------: |------: |------: |------: |
|app.css | 340.334 | 263.469 | |app.css | 340.334 | 255.627 | 46,959 | 36.929 | 31.015 |
|app.min.css | 274.791 | 209.640 | |app.min.css | 274.791 | 208.711 | 39,618 | 32.226 | 27.364 |
### PHP73 branch ### PHP73 branch

5
dev/External/ko.js vendored
View file

@ -33,11 +33,6 @@ ko.bindingHandlers.editor = {
} }
}; };
ko.bindingHandlers.visibleAnimated = {
init: (element, fValueAccessor) => element.hidden = !ko.unwrap(fValueAccessor()),
update: (element, fValueAccessor) => element.hidden = !ko.unwrap(fValueAccessor())
};
ko.bindingHandlers.tooltip = { ko.bindingHandlers.tooltip = {
init: (element, fValueAccessor) => { init: (element, fValueAccessor) => {
const fValue = fValueAccessor(), const fValue = fValueAccessor(),

View file

@ -5,21 +5,19 @@ import { $htmlCL, VIEW_MODELS } from 'Common/Globals';
//import { bMobileDevice } from 'Common/Globals'; //import { bMobileDevice } from 'Common/Globals';
let currentScreen = null, let currentScreen = null,
defaultScreenName = ''; defaultScreenName = '',
popupVisibilityNames = [];
const SCREENS = {}, const SCREENS = {},
qs = s => document.querySelector(s), qs = s => document.querySelector(s),
isNonEmptyArray = values => Array.isArray(values) && values.length, isNonEmptyArray = values => Array.isArray(values) && values.length,
popupVisibilityNames = ko.observableArray([]),
autofocus = dom => { autofocus = dom => {
// if (!bMobileDevice) { // if (!bMobileDevice) {
const af = dom.querySelector('[autofocus]'); const af = dom.querySelector('[autofocus]');
af && af.focus(); af && af.focus();
}; };
export const popupVisibility = ko.computed(() => 0 < popupVisibilityNames().length); export const popupVisibility = ko.computed(() => 0 < popupVisibilityNames.length);
export const ViewType = { export const ViewType = {
Popup: 'Popups', Popup: 'Popups',
@ -165,7 +163,7 @@ function buildViewModel(ViewModelClass, vmScreen) {
// show/hide popup/modal // show/hide popup/modal
const endShowHide = e => { const endShowHide = e => {
if (e.target === vmDom && 'background-color' === e.propertyName) { if (e.target === vmDom) {
if (vmDom.classList.contains('show')) { if (vmDom.classList.contains('show')) {
autofocus(vmDom); autofocus(vmDom);
vm.onShowWithDelay && vm.onShowWithDelay(); vm.onShowWithDelay && vm.onShowWithDelay();
@ -178,19 +176,19 @@ function buildViewModel(ViewModelClass, vmScreen) {
vm.modalVisibility.subscribe(value => { vm.modalVisibility.subscribe(value => {
if (value) { if (value) {
vmDom.style.zIndex = 3000 + popupVisibilityNames().length + 10; vmDom.style.zIndex = 3000 + popupVisibilityNames.length + 10;
vmDom.hidden = false; vmDom.hidden = false;
vm.storeAndSetKeyScope(); vm.storeAndSetKeyScope();
popupVisibilityNames.push(vm.viewModelName); popupVisibilityNames.push(vm.viewModelName);
requestAnimationFrame(() => { // wait just before the next paint requestAnimationFrame(() => { // wait just before the next paint
document.body.offsetHeight; // force a reflow vmDom.offsetHeight; // force a reflow
vmDom.classList.add('show'); // trigger the transitions vmDom.classList.add('show'); // trigger the transitions
}); });
} else { } else {
vm.onHide && vm.onHide(); vm.onHide && vm.onHide();
vmDom.classList.remove('show'); vmDom.classList.remove('show');
vm.restoreKeyScope(); vm.restoreKeyScope();
popupVisibilityNames.remove(vm.viewModelName); popupVisibilityNames = popupVisibilityNames.filter(v=>v!==vm.viewModelName);
} }
vmDom.setAttribute('aria-hidden', !value); vmDom.setAttribute('aria-hidden', !value);
}); });
@ -419,8 +417,7 @@ export function startScreens(screensClasses) {
* @returns {void} * @returns {void}
*/ */
export function setHash(hash, silence = false, replace = false) { export function setHash(hash, silence = false, replace = false) {
hash = '#' === hash.substr(0, 1) ? hash.substr(1) : hash; hash = hash.replace(/^[#/]+/, '');
hash = '/' === hash.substr(0, 1) ? hash.substr(1) : hash;
const cmd = replace ? 'replaceHash' : 'setHash'; const cmd = replace ? 'replaceHash' : 'setHash';
@ -509,15 +506,13 @@ function settingsMenuKeysHandler(items) {
if (event && index) { if (event && index) {
while (index-- && !items[index].matches('.selected')); while (index-- && !items[index].matches('.selected'));
if (handler && 'up' === handler.shortcut) { if (handler && 'up' === handler.shortcut) {
index && --index; index && --index;
} else if (index < items.length - 1) { } else if (index < items.length - 1) {
++index; ++index;
} }
const resultHash = items[index].href; const resultHash = items[index].href;
if (resultHash) { resultHash && setHash(resultHash, false, true);
setHash(resultHash, false, true);
}
} }
}).throttle(200); }).throttle(200);
} }

View file

@ -41,25 +41,25 @@ html.rl-started-trigger.no-mobile .b-login-content .loginFormWrapper {
}*/ }*/
#rl-loading { #rl-loading {
.transition(opacity 0.5s linear); transition: opacity 0.5s linear;
} }
html.rl-started-delay { html.rl-started-delay {
#rl-left { #rl-left {
.transition(width 0.3s ease-out); transition: width 0.3s ease-out;
} }
#rl-right { #rl-right {
.transition(~'left 0.3s ease-out, right 0.3s ease-out'); transition: left 0.3s ease-out, right 0.3s ease-out;
} }
#rl-sub-left, #rl-sub-left .messageList .inputSearch { #rl-sub-left, #rl-sub-left .messageList .inputSearch {
.transition(width 0.3s ease-out); transition: width 0.3s ease-out;
} }
#rl-sub-right { #rl-sub-right {
.transition(left 0.3s ease-out); transition: left 0.3s ease-out;
} }
} }
@ -77,7 +77,7 @@ html.no-mobile {
.alertError { .alertError {
display: block; display: block;
opacity: 1; opacity: 1;
.transition(opacity 0.5s linear); transition: opacity 0.5s linear;
} }
.alertError[hidden] { .alertError[hidden] {
opacity: 0; opacity: 0;
@ -102,11 +102,11 @@ html.no-mobile {
} }
&.no-mobile .b-login-content .loginFormWrapper { &.no-mobile .b-login-content .loginFormWrapper {
.transition(all 0.3s ease-out); transition: all 0.3s ease-out;
} }
& .button-delete-transitions { & .button-delete-transitions {
.transition(all 0.2s linear); transition: all 0.2s linear;
} }
& .b-folders .e-item .anim-action-class { & .b-folders .e-item .anim-action-class {
@ -114,31 +114,31 @@ html.no-mobile {
} }
& .b-folders .btn.buttonContacts { & .b-folders .btn.buttonContacts {
.transition(margin 0.3s linear); transition: margin 0.3s linear;
} }
& .b-folders .b-content.opacity-on-panel-disabled { & .b-folders .b-content.opacity-on-panel-disabled {
.transition(opacity 0.3s linear); transition: opacity 0.3s linear;
} }
& .messageList { & .messageList {
.messageListItem { .messageListItem {
.transition(max-height 400ms ease); transition: max-height 400ms ease;
} }
.listDragOver { .listDragOver {
.transition(all 400ms ease); transition: all 400ms ease;
} }
} }
& .b-list-content { & .b-list-content {
.e-contact-item { .e-contact-item {
.transition(max-height 400ms ease); transition: max-height 400ms ease;
} }
} }
& .modal.b-domain-content { & .modal.b-domain-content {
.modal-body { .modal-body {
.transition(left 500ms ease); transition: left 500ms ease;
} }
} }

View file

@ -341,16 +341,7 @@
border-color: #999; border-color: #999;
} }
&::-webkit-input-placeholder { &::placeholder {
color: #ddd;
}
&::-moz-placeholder {
color: #ddd;
}
&:-moz-placeholder {
color: #ddd;
}
&:-ms-input-placeholder {
color: #ddd; color: #ddd;
} }
} }

View file

@ -30,8 +30,8 @@ html.rl-no-preview-pane {
background-color: #eee; background-color: #eee;
// #gradient > .vertical(#f4f4f4, #dfdfdf); // #gradient > .vertical(#f4f4f4, #dfdfdf);
.border-bottom-right-radius(@rlMainBorderRadius); border-bottom-right-radius: @rlMainBorderRadius;
.border-bottom-left-radius(@rlMainBorderRadius); border-bottom-left-radius: @rlMainBorderRadius;
.e-quota { .e-quota {
display: inline-block; display: inline-block;
@ -81,8 +81,8 @@ html.rl-no-preview-pane {
background-color: #eee; background-color: #eee;
// #gradient > .vertical(#f4f4f4, #dfdfdf); // #gradient > .vertical(#f4f4f4, #dfdfdf);
.border-top-right-radius(@rlMainBorderRadius); border-top-right-radius: @rlMainBorderRadius;
.border-top-left-radius(@rlMainBorderRadius); border-top-left-radius: @rlMainBorderRadius;
.checkboxCkeckAll { .checkboxCkeckAll {
margin: 5px 0; margin: 5px 0;
@ -242,7 +242,7 @@ html.rl-no-preview-pane {
display: block; display: block;
height: 1px; height: 1px;
background-color: #999; background-color: #999;
.opacity(20); opacity: 0.2;
} }
.wrapper { .wrapper {
@ -560,7 +560,7 @@ html.rl-no-preview-pane {
.delimiter { .delimiter {
background-color: #398CF2; background-color: #398CF2;
.opacity(20); opacity: 0.2;
} }
+ .messageListItem .delimiter { + .messageListItem .delimiter {

View file

@ -34,7 +34,7 @@ html.rl-no-preview-pane {
/*overflow: hidden;*/ /*overflow: hidden;*/
border: @rlLowBorderSize solid @rlMainDarkColor; border: @rlLowBorderSize solid @rlMainDarkColor;
.border-radius(@rlLowBorderRadius); border-radius: @rlLowBorderRadius;
background-color: #fff; background-color: #fff;
@ -277,10 +277,10 @@ html.rl-no-preview-pane {
z-index: 2; z-index: 2;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 5px;
.opacity(50); opacity: 0.5;
&:hover { &:hover {
.opacity(80); opacity: 0.8;
border-color: #666; border-color: #666;
background-color: #888; background-color: #888;
color: #fff; color: #fff;

View file

@ -201,7 +201,7 @@ html {
height: 15px; height: 15px;
background-color: #ddd; background-color: #ddd;
margin: 0 5px; margin: 0 5px;
.box-shadow(0px 0px 3px rgba(0, 0, 0, 0.3)); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
border-radius: 100%; border-radius: 100%;
display: inline-block; display: inline-block;

View file

@ -60,7 +60,7 @@ button.close-custom {
} }
.input-append input, .input-append select, .input-append .uneditable-input { .input-append input, .input-append select, .input-append .uneditable-input {
.border-radius(3px); border-radius: 3px;
} }
select { select {

View file

@ -17,8 +17,6 @@
.cke_top { .cke_top {
padding: 6px 4px 1px 6px !important; padding: 6px 4px 1px 6px !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important; box-shadow: none !important;
border-bottom: 1px solid #b6b6b6 !important; border-bottom: 1px solid #b6b6b6 !important;
background: #F0F0F0 !important; background: #F0F0F0 !important;

View file

@ -113,7 +113,6 @@ html.glass {
input:-webkit-autofill:hover, input:-webkit-autofill:hover,
input:-webkit-autofill:focus, input:-webkit-autofill:focus,
input:-webkit-autofill:active { input:-webkit-autofill:active {
-webkit-transition-delay: 9999s; transition: color 9999s ease-out, background-color 9999s ease-out;
-webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
} }
} }

View file

@ -8,7 +8,7 @@
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
.transition(~"border linear .2s, box-shadow linear .2s"); transition: border linear .2s, box-shadow linear .2s;
&.inputosaurus-focused { &.inputosaurus-focused {
background-color: #fff; background-color: #fff;

View file

@ -24,7 +24,7 @@ class LoginAdminView extends AbstractViewNext {
this.mobile = !!Settings.appSettingsGet('mobile'); this.mobile = !!Settings.appSettingsGet('mobile');
this.mobileDevice = !!Settings.appSettingsGet('mobileDevice'); this.mobileDevice = !!Settings.appSettingsGet('mobileDevice');
this.hideSubmitButton = !!Settings.appSettingsGet('hideSubmitButton'); this.hideSubmitButton = Settings.appSettingsGet('hideSubmitButton') ? '' : null;
this.login = ko.observable(''); this.login = ko.observable('');
this.password = ko.observable(''); this.password = ko.observable('');

View file

@ -34,7 +34,7 @@ class LoginUserView extends AbstractViewNext {
constructor() { constructor() {
super(); super();
this.hideSubmitButton = !!Settings.appSettingsGet('hideSubmitButton'); this.hideSubmitButton = Settings.appSettingsGet('hideSubmitButton') ? '' : null;
this.welcome = ko.observable(!!Settings.settingsGet('UseLoginWelcomePage')); this.welcome = ko.observable(!!Settings.settingsGet('UseLoginWelcomePage'));

View file

@ -33,7 +33,7 @@
</span> </span>
</div> </div>
</div> </div>
<div class="controls controls-submit-wrp" data-bind="hidden: hideSubmitButton"> <div class="controls controls-submit-wrp" data-bind="attr: { hidden: hideSubmitButton }">
<button type="submit" class="btn btn-large btn-block buttonLogin" data-bind="command: submitCommand"> <button type="submit" class="btn btn-large btn-block buttonLogin" data-bind="command: submitCommand">
<span data-i18n="LOGIN/BUTTON_LOGIN"></span> <span data-i18n="LOGIN/BUTTON_LOGIN"></span>
</button> </button>

View file

@ -12,7 +12,7 @@
<span class="desc" data-bind="text: loginDescription"></span> <span class="desc" data-bind="text: loginDescription"></span>
</div> </div>
{{INCLUDE/AfterLogo/PLACE}} {{INCLUDE/AfterLogo/PLACE}}
<div class="alert alertError" data-bind="visibleAnimated: '' !== submitError()" hidden=""> <div class="alert alertError" data-bind="attr: { hidden: '' === submitError() ? '' : null }" hidden="">
<button type="button" class="close" data-bind="click: function () { submitError('') }">&times;</button> <button type="button" class="close" data-bind="click: function () { submitError('') }">&times;</button>
<span data-bind="text: submitError"></span> <span data-bind="text: submitError"></span>
<div data-bind="visible: '' !== submitErrorAddidional()"> <div data-bind="visible: '' !== submitErrorAddidional()">
@ -81,7 +81,7 @@
}"></div> }"></div>
</div> </div>
{{INCLUDE/BottomControlGroup/PLACE}} {{INCLUDE/BottomControlGroup/PLACE}}
<div class="controls controls-submit-wrp" data-bind="hidden: hideSubmitButton"> <div class="controls controls-submit-wrp" data-bind="attr: { hidden: hideSubmitButton }">
<button type="submit" class="btn btn-large btn-block buttonLogin" data-bind="command: submitCommand"> <button type="submit" class="btn btn-large btn-block buttonLogin" data-bind="command: submitCommand">
<span class="i18n i18n-animation" data-i18n="LOGIN/BUTTON_SIGN_IN"></span> <span class="i18n i18n-animation" data-i18n="LOGIN/BUTTON_SIGN_IN"></span>
</button> </button>

View file

@ -12,7 +12,7 @@
text-shadow: 0 1px 0 rgba(255,255,255,.5); text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: @warningBackground; background-color: @warningBackground;
border: 1px solid @warningBorder; border: 1px solid @warningBorder;
.border-radius(4px); border-radius: 4px;
color: @warningText; color: @warningText;
} }
.alert h4 { .alert h4 {

View file

@ -8,7 +8,6 @@
position: relative; position: relative;
font-size: 0; // remove as part 1 of font-size inline-block hack font-size: 0; // remove as part 1 of font-size inline-block hack
white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page) white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
.ie7-restore-left-whitespace();
} }
// Space out series of button groups // Space out series of button groups
@ -23,7 +22,6 @@
margin-bottom: @baseLineHeight / 2; margin-bottom: @baseLineHeight / 2;
.btn-group { .btn-group {
display: inline-block; display: inline-block;
.ie7-inline-block();
} }
.btn + .btn, .btn + .btn,
.btn-group + .btn, .btn-group + .btn,
@ -35,7 +33,7 @@
// Float them, remove border radius, then re-add to first and last elements // Float them, remove border radius, then re-add to first and last elements
.btn-group > .btn { .btn-group > .btn {
position: relative; position: relative;
.border-radius(0); border-radius: 0;
} }
.btn-group > .btn + .btn { .btn-group > .btn + .btn {
margin-left: -1px; margin-left: -1px;
@ -59,41 +57,25 @@
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child { .btn-group > .btn:first-child {
margin-left: 0; margin-left: 0;
-webkit-border-top-left-radius: 4px; border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px; border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
} }
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child, .btn-group > .btn:last-child,
.btn-group > .dropdown-toggle { .btn-group > .dropdown-toggle {
-webkit-border-top-right-radius: 4px; border-top-right-radius: 4px;
-moz-border-radius-topright: 4px; border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
} }
// Reset corners for large buttons // Reset corners for large buttons
.btn-group > .btn.large:first-child { .btn-group > .btn.large:first-child {
margin-left: 0; margin-left: 0;
-webkit-border-top-left-radius: 6px; border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px; border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-left-radius: 6px;
} }
.btn-group > .btn.large:last-child, .btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle { .btn-group > .large.dropdown-toggle {
-webkit-border-top-right-radius: 6px; border-top-right-radius: 6px;
-moz-border-radius-topright: 6px; border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-right-radius: 6px;
} }
// On hover/focus/active, bring the proper btn to front // On hover/focus/active, bring the proper btn to front
@ -119,25 +101,15 @@
.btn-group > .btn + .dropdown-toggle { .btn-group > .btn + .dropdown-toggle {
padding-left: 8px; padding-left: 8px;
padding-right: 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;
} }
.btn-group > .btn-mini + .dropdown-toggle { .btn-group > .btn-mini + .dropdown-toggle {
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
*padding-top: 2px;
*padding-bottom: 2px;
}
.btn-group > .btn-small + .dropdown-toggle {
*padding-top: 5px;
*padding-bottom: 4px;
} }
.btn-group > .btn-large + .dropdown-toggle { .btn-group > .btn-large + .dropdown-toggle {
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
*padding-top: 7px;
*padding-bottom: 7px;
} }
.btn-group.open { .btn-group.open {
@ -146,7 +118,7 @@
// Remove the gradient and set the same inset shadow as the :active state // Remove the gradient and set the same inset shadow as the :active state
.dropdown-toggle { .dropdown-toggle {
background-image: none; 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 // Keep the hover's background when dropdown is open
@ -213,27 +185,26 @@
.btn-group-vertical { .btn-group-vertical {
display: inline-block; // makes buttons only take up the width they need display: inline-block; // makes buttons only take up the width they need
.ie7-inline-block();
} }
.btn-group-vertical .btn { .btn-group-vertical .btn {
display: block; display: block;
float: none; float: none;
width: 100%; width: 100%;
.border-radius(0); border-radius: 0;
} }
.btn-group-vertical .btn + .btn { .btn-group-vertical .btn + .btn {
margin-left: 0; margin-left: 0;
margin-top: -1px; margin-top: -1px;
} }
.btn-group-vertical .btn:first-child { .btn-group-vertical .btn:first-child {
.border-radius(4px 4px 0 0); border-radius: 4px 4px 0 0;
} }
.btn-group-vertical .btn:last-child { .btn-group-vertical .btn:last-child {
.border-radius(0 0 4px 4px); border-radius: 0 0 4px 4px;
} }
.btn-group-vertical .btn-large:first-child { .btn-group-vertical .btn-large:first-child {
.border-radius(6px 6px 0 0); border-radius: 6px 6px 0 0;
} }
.btn-group-vertical .btn-large:last-child { .btn-group-vertical .btn-large:last-child {
.border-radius(0 0 6px 6px); border-radius: 0 0 6px 6px;
} }

View file

@ -9,34 +9,29 @@
// Core // Core
.btn { .btn {
display: inline-block; display: inline-block;
.ie7-inline-block();
padding: 4px 14px; padding: 4px 14px;
margin-bottom: 0; // For input.btn margin-bottom: 0; // For input.btn
font-size: @baseFontSize; font-size: @baseFontSize;
line-height: @baseLineHeight; line-height: @baseLineHeight;
*line-height: @baseLineHeight;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
border: 1px solid @btnBorder; border: 1px solid @btnBorder;
*border: 0; // Remove the border to prevent IE7's black border on input:focus
border-bottom-color: darken(@btnBorder, 10%); border-bottom-color: darken(@btnBorder, 10%);
.border-radius(4px); 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 state
&:hover { &:hover {
color: @grayDark; color: @grayDark;
text-decoration: none; text-decoration: none;
background-color: darken(@white, 10%); background-color: darken(@white, 10%);
*background-color: darken(@white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
background-position: 0 -15px; background-position: 0 -15px;
// transition is only when going to hover, otherwise the background // transition is only when going to hover, otherwise the background
// behind the gradient (there for IE<=9 fallback) gets mismatched // behind the gradient (there for IE<=9 fallback) gets mismatched
.transition(background-position .1s linear); transition: background-position .1s linear;
} }
// Focus state for keyboard and accessibility // Focus state for keyboard and accessibility
@ -48,10 +43,9 @@
&.active, &.active,
&:active { &:active {
background-color: darken(@white, 10%); background-color: darken(@white, 10%);
background-color: darken(@white, 15%) e("\9");
background-image: none; background-image: none;
outline: 0; 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 // Disabled state
@ -60,8 +54,8 @@
cursor: default; cursor: default;
background-color: darken(@white, 10%); background-color: darken(@white, 10%);
background-image: none; background-image: none;
.opacity(65); opacity: 0.65;
.box-shadow(none); box-shadow: none;
} }
} }
@ -76,7 +70,7 @@
padding: 9px 14px; padding: 9px 14px;
font-size: @baseFontSize + 2px; font-size: @baseFontSize + 2px;
line-height: normal; line-height: normal;
.border-radius(5px); border-radius: 5px;
} }
.btn-large [class^="icon-"] { .btn-large [class^="icon-"] {
margin-top: 2px; margin-top: 2px;
@ -105,7 +99,7 @@
width: 100%; width: 100%;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
.box-sizing(border-box); box-sizing: border-box;
} }
.btn-block + .btn-block { .btn-block + .btn-block {
margin-top: 5px; margin-top: 5px;
@ -169,22 +163,6 @@ input[type="submit"].btn {
border: 0; border: 0;
} }
// IE7 has some default padding on button controls
*padding-top: 3px;
*padding-bottom: 3px;
&.btn-large {
*padding-top: 7px;
*padding-bottom: 7px;
}
&.btn-small {
*padding-top: 3px;
*padding-bottom: 3px;
}
&.btn-mini {
*padding-top: 1px;
*padding-bottom: 1px;
}
} }
@ -196,13 +174,13 @@ input[type="submit"].btn {
.btn-link:active { .btn-link:active {
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
.box-shadow(none); box-shadow: none;
} }
.btn-link { .btn-link {
border-color: transparent; border-color: transparent;
cursor: pointer; cursor: pointer;
color: @linkColor; color: @linkColor;
.border-radius(0); border-radius: 0;
} }
.btn-link:hover { .btn-link:hover {
color: @linkColorHover; color: @linkColorHover;

View file

@ -10,12 +10,12 @@
line-height: @baseLineHeight; line-height: @baseLineHeight;
color: @black; color: @black;
text-shadow: 0 1px 0 rgba(255,255,255,1); text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(20); opacity: 0.2;
&:hover { &:hover {
color: @black; color: @black;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
.opacity(40); opacity: 0.4;
} }
} }
@ -28,4 +28,4 @@ button.close {
background: transparent; background: transparent;
border: 0; border: 0;
-webkit-appearance: none; -webkit-appearance: none;
} }

View file

@ -7,10 +7,13 @@
code, code,
pre { pre {
padding: 0 3px 2px; padding: 0 3px 2px;
#font > #family > .monospace; font-family: @monoFontFamily;
font-size: @baseFontSize;
font-weight: normal;
line-height: @baseLineHeight;
font-size: @baseFontSize - 2; font-size: @baseFontSize - 2;
color: @grayDark; color: @grayDark;
.border-radius(3px); border-radius: 3px;
} }
// Inline code // Inline code
@ -33,9 +36,8 @@ pre {
white-space: pre; white-space: pre;
white-space: pre-wrap; white-space: pre-wrap;
background-color: #f5f5f5; background-color: #f5f5f5;
border: 1px solid #ccc; // fallback for IE7-8
border: 1px solid rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.15);
.border-radius(4px); border-radius: 4px;
// Make prettyprint styles more spaced out for readability // Make prettyprint styles more spaced out for readability
&.prettyprint { &.prettyprint {
@ -55,4 +57,4 @@ pre {
.pre-scrollable { .pre-scrollable {
max-height: 340px; max-height: 340px;
overflow-y: scroll; overflow-y: scroll;
} }

View file

@ -7,8 +7,7 @@
position: relative; position: relative;
height: 0; height: 0;
overflow: hidden; overflow: hidden;
overflow: visible \9; transition: height .35s ease;
.transition(height .35s ease);
&.in { &.in {
height: auto; height: auto;
} }

View file

@ -7,10 +7,6 @@
.dropdown { .dropdown {
position: relative; position: relative;
} }
.dropdown-toggle {
// The caret makes the toggle a bit too tall in IE7
*margin-bottom: -3px;
}
.dropdown-toggle:active, .dropdown-toggle:active,
.open .dropdown-toggle { .open .dropdown-toggle {
outline: 0; outline: 0;
@ -49,15 +45,10 @@
margin: 2px 0 0; // override default ul margin: 2px 0 0; // override default ul
list-style: none; list-style: none;
background-color: @dropdownBackground; background-color: @dropdownBackground;
border: 1px solid #ccc; // Fallback for IE7-8
border: 1px solid @dropdownBorder; border: 1px solid @dropdownBorder;
*border-right-width: 2px; border-radius: 6px;
*border-bottom-width: 2px; box-shadow: 0 5px 10px rgba(0,0,0,.2);
.border-radius(6px); background-clip: padding-box;
.box-shadow(0 5px 10px rgba(0,0,0,.2));
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
// Aligns the dropdown menu to right // Aligns the dropdown menu to right
&.pull-right { &.pull-right {
@ -121,10 +112,6 @@
// Open state for the dropdown // Open state for the dropdown
// --------------------------- // ---------------------------
.open { .open {
// IE7's z-index only goes to the nearest positioned ancestor, which would
// make the menu appear below buttons that appeared later on the page
*z-index: @zindexDropdown;
& > .dropdown-menu { & > .dropdown-menu {
display: block; display: block;
} }
@ -147,9 +134,7 @@
left: 100%; left: 100%;
margin-top: -6px; margin-top: -6px;
margin-left: -1px; margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px; border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
} }
.dropdown-submenu:hover .dropdown-menu { .dropdown-submenu:hover .dropdown-menu {
display: block; display: block;
@ -185,5 +170,5 @@
// --------- // ---------
.typeahead { .typeahead {
margin-top: 2px; // give it some space to breathe margin-top: 2px; // give it some space to breathe
.border-radius(4px); border-radius: 4px;
} }

View file

@ -42,7 +42,9 @@ input,
button, button,
select, select,
textarea { textarea {
#font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here font-size: @baseFontSize;
font-weight: normal;
line-height: @baseLineHeight;
} }
input, input,
button, button,
@ -85,7 +87,7 @@ input[type="color"],
font-size: @baseFontSize; font-size: @baseFontSize;
line-height: @baseLineHeight; line-height: @baseLineHeight;
color: @gray; color: @gray;
.border-radius(@inputBorderRadius); border-radius: @inputBorderRadius;
} }
// Reset appearance properties for textual inputs and textarea // Reset appearance properties for textual inputs and textarea
@ -117,15 +119,14 @@ input[type="color"],
.uneditable-input { .uneditable-input {
background-color: @inputBackground; background-color: @inputBackground;
border: 1px solid @inputBorder; border: 1px solid @inputBorder;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
.transition(~"border linear .2s, box-shadow linear .2s"); transition: border linear .2s, box-shadow linear .2s;
// Focus state // Focus state
&:focus { &:focus {
border-color: rgba(82,168,236,.8); border-color: rgba(82,168,236,.8);
outline: 0; 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)");
} }
} }
@ -133,8 +134,6 @@ input[type="color"],
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
margin: 4px 0 0; margin: 4px 0 0;
*margin-top: 0; /* IE7 */
margin-top: 1px \9; /* IE8-9 */
line-height: normal; line-height: normal;
cursor: pointer; cursor: pointer;
} }
@ -153,8 +152,7 @@ input[type="checkbox"] {
// Set the height of select and file controls to match text inputs // Set the height of select and file controls to match text inputs
select, select,
input[type="file"] { input[type="file"] {
height: 30px; /* In IE7, the height of the select element cannot be changed by height, only font-size */ height: 30px;
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
line-height: 30px; line-height: 30px;
} }
@ -189,7 +187,7 @@ input[type="checkbox"]:focus {
color: @grayLight; color: @grayLight;
background-color: darken(@inputBackground, 1%); background-color: darken(@inputBackground, 1%);
border-color: @inputBorder; border-color: @inputBorder;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); box-shadow: inset 0 1px 2px rgba(0,0,0,.025);
cursor: not-allowed; cursor: not-allowed;
} }
@ -210,9 +208,9 @@ input[type="checkbox"]:focus {
// ------------------------- // -------------------------
// Placeholder text gets special styles; can't be bundled together though for some reason // Placeholder text gets special styles; can't be bundled together though for some reason
input, input::placeholder,
textarea { textarea::placeholder {
.placeholder(); color: @placeholderText;
} }
@ -359,7 +357,7 @@ select:focus:required:invalid {
border-color: #ee5f5b; border-color: #ee5f5b;
&:focus { &:focus {
border-color: darken(#ee5f5b, 10%); border-color: darken(#ee5f5b, 10%);
.box-shadow(0 0 6px lighten(#ee5f5b, 20%)); box-shadow: 0 0 6px lighten(#ee5f5b, 20%);
} }
} }
@ -394,7 +392,6 @@ select:focus:required:invalid {
.help-inline { .help-inline {
display: inline-block; display: inline-block;
.ie7-inline-block();
vertical-align: middle; vertical-align: middle;
padding-left: 5px; padding-left: 5px;
} }
@ -416,10 +413,9 @@ select:focus:required:invalid {
.uneditable-input { .uneditable-input {
position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
*margin-left: 0;
font-size: @baseFontSize; font-size: @baseFontSize;
vertical-align: top; vertical-align: top;
.border-radius(0 @inputBorderRadius @inputBorderRadius 0); border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
// Make input on top when focused so blue border and shadow always show // Make input on top when focused so blue border and shadow always show
&:focus { &:focus {
z-index: 2; z-index: 2;
@ -443,7 +439,7 @@ select:focus:required:invalid {
.btn { .btn {
margin-left: -1px; margin-left: -1px;
vertical-align: top; vertical-align: top;
.border-radius(0); border-radius: 0;
} }
.active { .active {
background-color: lighten(@green, 30); background-color: lighten(@green, 30);
@ -457,18 +453,18 @@ select:focus:required:invalid {
} }
.add-on:first-child, .add-on:first-child,
.btn:first-child { .btn:first-child {
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius); border-radius: @inputBorderRadius 0 0 @inputBorderRadius;
} }
} }
.input-append { .input-append {
input, input,
select, select,
.uneditable-input { .uneditable-input {
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius); border-radius: @inputBorderRadius 0 0 @inputBorderRadius;
} }
.add-on:last-child, .add-on:last-child,
.btn:last-child { .btn:last-child {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0); border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
} }
} }
// Remove all border-radius for inputs with both prepend and append // Remove all border-radius for inputs with both prepend and append
@ -476,17 +472,17 @@ select:focus:required:invalid {
input, input,
select, select,
.uneditable-input { .uneditable-input {
.border-radius(0); border-radius: 0;
} }
.add-on:first-child, .add-on:first-child,
.btn:first-child { .btn:first-child {
margin-right: -1px; margin-right: -1px;
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius); border-radius: @inputBorderRadius 0 0 @inputBorderRadius;
} }
.add-on:last-child, .add-on:last-child,
.btn:last-child { .btn:last-child {
margin-left: -1px; margin-left: -1px;
.border-radius(0 @inputBorderRadius @inputBorderRadius 0); border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
} }
} }
@ -497,29 +493,27 @@ select:focus:required:invalid {
input.search-query { input.search-query {
padding-right: 14px; padding-right: 14px;
padding-right: 4px \9;
padding-left: 14px; padding-left: 14px;
padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
margin-bottom: 0; // Remove the default margin on all inputs margin-bottom: 0; // Remove the default margin on all inputs
.border-radius(15px); border-radius: 15px;
} }
/* Allow for input prepend/append in search forms */ /* Allow for input prepend/append in search forms */
.form-search .input-append .search-query, .form-search .input-append .search-query,
.form-search .input-prepend .search-query { .form-search .input-prepend .search-query {
.border-radius(0); // Override due to specificity border-radius: 0; // Override due to specificity
} }
.form-search .input-append .search-query { .form-search .input-append .search-query {
.border-radius(14px 0 0 14px) border-radius: 14px 0 0 14px
} }
.form-search .input-append .btn { .form-search .input-append .btn {
.border-radius(0 14px 14px 0) border-radius: 0 14px 14px 0
} }
.form-search .input-prepend .search-query { .form-search .input-prepend .search-query {
.border-radius(0 14px 14px 0) border-radius: 0 14px 14px 0
} }
.form-search .input-prepend .btn { .form-search .input-prepend .btn {
.border-radius(14px 0 0 14px) border-radius: 14px 0 0 14px
} }
@ -542,7 +536,6 @@ input.search-query {
.input-prepend, .input-prepend,
.input-append { .input-append {
display: inline-block; display: inline-block;
.ie7-inline-block();
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
} }
@ -615,13 +608,7 @@ legend + .control-group {
.controls { .controls {
// Super jank IE7 fix to ensure the inputs in .input-append and input-prepend // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
// don't inherit the margin of the parent, in this case .controls // don't inherit the margin of the parent, in this case .controls
*display: inline-block;
*padding-left: 20px;
margin-left: 160px; margin-left: 160px;
*margin-left: 0;
&:first-child {
*padding-left: 160px;
}
} }
// Remove bottom margin on block level help text since that's accounted for on .control-group // Remove bottom margin on block level help text since that's accounted for on .control-group
.help-block { .help-block {

View file

@ -18,11 +18,11 @@
// Set unique padding and border-radii // Set unique padding and border-radii
.label { .label {
padding: 1px 4px 2px; padding: 1px 4px 2px;
.border-radius(3px); border-radius: 3px;
} }
.badge { .badge {
padding: 1px 9px 2px; padding: 1px 9px 2px;
.border-radius(9px); border-radius: 9px;
} }
// Hover state, but only for links // Hover state, but only for links

View file

@ -5,7 +5,9 @@
// Container (centered, fixed-width layouts) // Container (centered, fixed-width layouts)
.container { .container {
.container-fixed(); margin-right: auto;
margin-left: auto;
.clearfix();
} }
// Fluid layouts (left aligned, with sidebar, min- & max-width content) // Fluid layouts (left aligned, with sidebar, min- & max-width content)
@ -13,4 +15,4 @@
padding-right: @gridGutterWidth; padding-right: @gridGutterWidth;
padding-left: @gridGutterWidth; padding-left: @gridGutterWidth;
.clearfix(); .clearfix();
} }

View file

@ -10,7 +10,6 @@
// -------- // --------
// For clearing floats like a boss h5bp.com/q // For clearing floats like a boss h5bp.com/q
.clearfix { .clearfix {
*zoom: 1;
&:before, &:before,
&:after { &:after {
display: table; display: table;
@ -34,132 +33,9 @@
outline-offset: -2px; outline-offset: -2px;
} }
// Center-align a block level element
// ----------------------------------
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// IE7 inline-block
// ----------------
.ie7-inline-block() {
*display: inline; /* IE7 inline-block hack */
*zoom: 1;
}
// IE7 likes to collapse whitespace on either side of the inline-block elements.
// Ems because we're attempting to match the width of a space character. Left
// version is for form buttons, which typically come after other elements, and
// right version is for icons, which come before. Applying both is ok, but it will
// mean that space between those elements will be .6em (~2 space characters) in IE7,
// instead of the 1 space in other browsers.
.ie7-restore-left-whitespace() {
*margin-left: .3em;
&:first-child {
*margin-left: 0;
}
}
.ie7-restore-right-whitespace() {
*margin-right: .3em;
}
// Sizing shortcuts
// -------------------------
.size(@height, @width) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size, @size);
}
// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
&:-moz-placeholder {
color: @color;
}
&:-ms-input-placeholder {
color: @color;
}
&::-webkit-input-placeholder {
color: @color;
}
}
// Text overflow
// -------------------------
// Requires inline-block or block for proper styling
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// CSS image replacement
// -------------------------
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
// FONTS
// --------------------------------------------------
#font {
#family {
.serif() {
font-family: @serifFontFamily;
}
.sans-serif() {
font-family: @sansFontFamily;
}
.monospace() {
font-family: @monoFontFamily;
}
}
.shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
#font > #family > .serif;
#font > .shorthand(@size, @weight, @lineHeight);
}
.sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
#font > #family > .sans-serif;
#font > .shorthand(@size, @weight, @lineHeight);
}
.monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
#font > #family > .monospace;
#font > .shorthand(@size, @weight, @lineHeight);
}
}
// FORMS // FORMS
// -------------------------------------------------- // --------------------------------------------------
// Block level inputs
.input-block-level {
display: block;
width: 100%;
min-height: 30px; // Make inputs at least the height of their button counterpart
.box-sizing(border-box); // Makes inputs behave like true block-level elements
}
// Mixin for form field states // Mixin for form field states
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
// Set the text color // Set the text color
@ -176,13 +52,11 @@
textarea { textarea {
color: @textColor; color: @textColor;
border-color: @borderColor; border-color: @borderColor;
.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 { &:focus {
border-color: darken(@borderColor, 10%); border-color: darken(@borderColor, 10%);
// Write out in full since the lighten() function isn't easily escaped // 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%); 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%);
} }
} }
// Give a small background color for input-prepend/-append // Give a small background color for input-prepend/-append
@ -196,199 +70,9 @@
// CSS3 PROPERTIES
// --------------------------------------------------
// Border Radius
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// Single Corner Border Radius
.border-top-left-radius(@radius) {
-webkit-border-top-left-radius: @radius;
-moz-border-radius-topleft: @radius;
border-top-left-radius: @radius;
}
.border-top-right-radius(@radius) {
-webkit-border-top-right-radius: @radius;
-moz-border-radius-topright: @radius;
border-top-right-radius: @radius;
}
.border-bottom-right-radius(@radius) {
-webkit-border-bottom-right-radius: @radius;
-moz-border-radius-bottomright: @radius;
border-bottom-right-radius: @radius;
}
.border-bottom-left-radius(@radius) {
-webkit-border-bottom-left-radius: @radius;
-moz-border-radius-bottomleft: @radius;
border-bottom-left-radius: @radius;
}
// Single Side Border Radius
.border-top-radius(@radius) {
.border-top-right-radius(@radius);
.border-top-left-radius(@radius);
}
.border-right-radius(@radius) {
.border-top-right-radius(@radius);
.border-bottom-right-radius(@radius);
}
.border-bottom-radius(@radius) {
.border-bottom-right-radius(@radius);
.border-bottom-left-radius(@radius);
}
.border-left-radius(@radius) {
.border-top-left-radius(@radius);
.border-bottom-left-radius(@radius);
}
// Drop shadows
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
// Transformations
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-moz-transform: rotate(@degrees);
-ms-transform: rotate(@degrees);
-o-transform: rotate(@degrees);
transform: rotate(@degrees);
}
.scale(@ratio) {
-webkit-transform: scale(@ratio);
-moz-transform: scale(@ratio);
-ms-transform: scale(@ratio);
-o-transform: scale(@ratio);
transform: scale(@ratio);
}
.translate(@x, @y) {
-webkit-transform: translate(@x, @y);
-moz-transform: translate(@x, @y);
-ms-transform: translate(@x, @y);
-o-transform: translate(@x, @y);
transform: translate(@x, @y);
}
.skew(@x, @y) {
-webkit-transform: skew(@x, @y);
-moz-transform: skew(@x, @y);
-ms-transform: skew(@x, @y);
-o-transform: skew(@x, @y);
transform: skew(@x, @y);
}
.translate3d(@x, @y, @z) {
-webkit-transform: translate3d(@x, @y, @z);
-moz-transform: translate3d(@x, @y, @z);
-o-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
.backface-visibility(@visibility){
-webkit-backface-visibility: @visibility;
-moz-backface-visibility: @visibility;
backface-visibility: @visibility;
}
// Background clipping
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
.background-clip(@clip) {
-webkit-background-clip: @clip;
-moz-background-clip: @clip;
background-clip: @clip;
}
// Background sizing
.background-size(@size){
-webkit-background-size: @size;
-moz-background-size: @size;
-o-background-size: @size;
background-size: @size;
}
// Box sizing
.box-sizing(@boxmodel) {
-webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
box-sizing: @boxmodel;
}
// User select
// For selecting text on the page
.user-select(@select) {
-webkit-user-select: @select;
-moz-user-select: @select;
-ms-user-select: @select;
-o-user-select: @select;
user-select: @select;
}
// Resize anything
.resizable(@direction) {
resize: @direction; // Options: horizontal, vertical, both
overflow: auto; // Safari fix
}
// CSS3 Content Columns
.content-columns(@columnCount, @columnGap: @gridGutterWidth) {
-webkit-column-count: @columnCount;
-moz-column-count: @columnCount;
column-count: @columnCount;
-webkit-column-gap: @columnGap;
-moz-column-gap: @columnGap;
column-gap: @columnGap;
}
// Optional hyphenation
.hyphens(@mode: auto) {
word-wrap: break-word;
-webkit-hyphens: @mode;
-moz-hyphens: @mode;
-ms-hyphens: @mode;
-o-hyphens: @mode;
hyphens: @mode;
}
// Opacity
.opacity(@opacity) {
opacity: @opacity / 100;
filter: ~"alpha(opacity=@{opacity})";
}
// BACKGROUNDS // BACKGROUNDS
// -------------------------------------------------- // --------------------------------------------------
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent {
.background(@color: @white, @alpha: 1) {
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}
.border(@color: @white, @alpha: 1) {
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
.background-clip(padding-box);
}
}
// Gradient Bar Colors for buttons and alerts // Gradient Bar Colors for buttons and alerts
.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { .gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
color: @textColor; color: @textColor;
@ -400,64 +84,11 @@
// Gradients // Gradients
#gradient { #gradient {
.horizontal(@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.vertical(@startColor: #555, @endColor: #333) { .vertical(@startColor: #555, @endColor: #333) {
background-color: mix(@startColor, @endColor, 60%); background-color: mix(@startColor, @endColor, 60%);
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x; background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
} }
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
}
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
background-color: mix(@midColor, @endColor, 80%);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop*100%, @endColor);
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
}
.radial(@innerColor: #555, @outerColor: #333) {
background-color: @outerColor;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
background-repeat: no-repeat;
}
.striped(@color, @angle: 45deg) {
background-color: @color;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
}
}
// Reset filters for IE
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
} }
@ -469,14 +100,8 @@
// ------------------------- // -------------------------
// Dividers (basically an hr) within dropdowns and nav lists // Dividers (basically an hr) within dropdowns and nav lists
.nav-divider(@top: #e5e5e5, @bottom: @white) { .nav-divider(@top: #e5e5e5, @bottom: @white) {
// IE7 needs a set width since we gave a height. Restricting just
// to IE7 to keep the 1px left/right space in other browsers.
// It is unclear where IE is getting the extra space that we need
// to negative-margin away, but so it goes.
*width: 100%;
height: 1px; height: 1px;
margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
*margin: -5px 0 5px;
overflow: hidden; overflow: hidden;
background-color: @top; background-color: @top;
border-bottom: 1px solid @bottom; border-bottom: 1px solid @bottom;
@ -485,35 +110,22 @@
// Button backgrounds // Button backgrounds
// ------------------ // ------------------
.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { .buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9 color: @textColor;
.gradientBar(@startColor, @endColor, @textColor, @textShadow); text-shadow: @textShadow;
*background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ #gradient > .vertical(@startColor, @endColor);
.reset-filter(); border-color: @endColor @endColor darken(@endColor, 15%);
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
// in these cases the gradient won't cover the background, so we override // in these cases the gradient won't cover the background, so we override
&:hover, &:active, &.active, &.disabled, &[disabled] { &:hover, &:active, &.active, &.disabled, &[disabled] {
color: @textColor; color: @textColor;
background-color: @endColor; background-color: @endColor;
*background-color: darken(@endColor, 5%);
}
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
&:active,
&.active {
background-color: darken(@endColor, 10%) e("\9");
} }
} }
// Grid System // Grid System
// ----------- // -----------
// Centered container element
.container-fixed() {
margin-right: auto;
margin-left: auto;
.clearfix();
}
// Table columns // Table columns
.tableColumns(@columnSpan: 1) { .tableColumns(@columnSpan: 1) {
float: none; // undo default grid column styles float: none; // undo default grid column styles
@ -521,18 +133,6 @@
margin-left: 0; // undo default grid column styles margin-left: 0; // undo default grid column styles
} }
// Make a Grid
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
.makeRow() {
margin-left: @gridGutterWidth * -1;
.clearfix();
}
.makeColumn(@columns: 1, @offset: 0) {
float: left;
margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
// The Grid // The Grid
#grid { #grid {
@ -599,27 +199,26 @@
.offset (@columns) { .offset (@columns) {
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2); margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
} }
.offsetFirstChild (@columns) { .offsetFirstChild (@columns) {
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth); margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
} }
.span (@columns) { .span (@columns) {
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)); width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
} }
.row-fluid { .row-fluid {
width: 100%; width: 100%;
.clearfix(); .clearfix();
[class*="span"] { [class*="span"] {
.input-block-level(); display: block;
width: 100%;
min-height: 30px; // Make inputs at least the height of their button counterpart
box-sizing: border-box; // Makes inputs behave like true block-level elements
float: left; float: left;
margin-left: @fluidGridGutterWidth; margin-left: @fluidGridGutterWidth;
*margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
} }
[class*="span"]:first-child { [class*="span"]:first-child {
margin-left: 0; margin-left: 0;

View file

@ -48,8 +48,8 @@
text-align: right; // right align buttons text-align: right; // right align buttons
background-color: #f5f5f5; background-color: #f5f5f5;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
.border-radius(0 0 6px 6px); border-radius: 0 0 6px 6px;
.box-shadow(inset 0 1px 0 @white); box-shadow: inset 0 1px 0 @white;
.clearfix(); // clear it in case folks use .pull-* classes on buttons .clearfix(); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons // Properly space out buttons

View file

@ -114,7 +114,7 @@
padding-bottom: 8px; padding-bottom: 8px;
line-height: @baseLineHeight; line-height: @baseLineHeight;
border: 1px solid transparent; border: 1px solid transparent;
.border-radius(4px 4px 0 0); border-radius: 4px 4px 0 0;
&:hover { &:hover {
border-color: @grayLighter @grayLighter #ddd; border-color: @grayLighter @grayLighter #ddd;
} }
@ -139,7 +139,7 @@
padding-bottom: 8px; padding-bottom: 8px;
margin-top: 2px; margin-top: 2px;
margin-bottom: 2px; margin-bottom: 2px;
.border-radius(5px); border-radius: 5px;
} }
// Active state // Active state
@ -168,13 +168,15 @@
} }
.nav-tabs.nav-stacked > li > a { .nav-tabs.nav-stacked > li > a {
border: 1px solid #ddd; border: 1px solid #ddd;
.border-radius(0); border-radius: 0;
} }
.nav-tabs.nav-stacked > li:first-child > a { .nav-tabs.nav-stacked > li:first-child > a {
.border-top-radius(4px); border-top-right-radius: 4px;
border-top-left-radius: 4px;
} }
.nav-tabs.nav-stacked > li:last-child > a { .nav-tabs.nav-stacked > li:last-child > a {
.border-bottom-radius(4px); border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
} }
.nav-tabs.nav-stacked > li > a:hover { .nav-tabs.nav-stacked > li > a:hover {
border-color: #ddd; border-color: #ddd;
@ -195,10 +197,10 @@
// --------- // ---------
.nav-tabs .dropdown-menu { .nav-tabs .dropdown-menu {
.border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu border-radius: 0 0 6px 6px; // remove the top rounded corners here since there is a hard edge above the menu
} }
.nav-pills .dropdown-menu { .nav-pills .dropdown-menu {
.border-radius(6px); // make rounded corners match the pills border-radius: 6px; // make rounded corners match the pills
} }
// Default dropdown links // Default dropdown links
@ -249,7 +251,7 @@
.nav li.dropdown.open a:hover .caret { .nav li.dropdown.open a:hover .caret {
border-top-color: @white; border-top-color: @white;
border-bottom-color: @white; border-bottom-color: @white;
.opacity(100); opacity: 1;
} }
// Dropdowns in stacked tabs // Dropdowns in stacked tabs
@ -303,7 +305,7 @@
margin-bottom: 0; margin-bottom: 0;
} }
.tabs-below > .nav-tabs > li > a { .tabs-below > .nav-tabs > li > a {
.border-radius(0 0 4px 4px); border-radius: 0 0 4px 4px;
&:hover { &:hover {
border-bottom-color: transparent; border-bottom-color: transparent;
border-top-color: #ddd; border-top-color: #ddd;
@ -337,7 +339,7 @@
} }
.tabs-left > .nav-tabs > li > a { .tabs-left > .nav-tabs > li > a {
margin-right: -1px; margin-right: -1px;
.border-radius(4px 0 0 4px); border-radius: 4px 0 0 4px;
} }
.tabs-left > .nav-tabs > li > a:hover { .tabs-left > .nav-tabs > li > a:hover {
border-color: @grayLighter #ddd @grayLighter @grayLighter; border-color: @grayLighter #ddd @grayLighter @grayLighter;
@ -345,7 +347,6 @@
.tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover { .tabs-left > .nav-tabs .active > a:hover {
border-color: #ddd transparent #ddd #ddd; border-color: #ddd transparent #ddd #ddd;
*border-right-color: @white;
} }
// Tabs on the right // Tabs on the right
@ -356,7 +357,7 @@
} }
.tabs-right > .nav-tabs > li > a { .tabs-right > .nav-tabs > li > a {
margin-left: -1px; margin-left: -1px;
.border-radius(0 4px 4px 0); border-radius: 0 4px 4px 0;
} }
.tabs-right > .nav-tabs > li > a:hover { .tabs-right > .nav-tabs > li > a:hover {
border-color: @grayLighter @grayLighter @grayLighter #ddd; border-color: @grayLighter @grayLighter @grayLighter #ddd;
@ -364,7 +365,6 @@
.tabs-right > .nav-tabs .active > a, .tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover { .tabs-right > .nav-tabs .active > a:hover {
border-color: #ddd #ddd #ddd transparent; border-color: #ddd #ddd #ddd transparent;
*border-left-color: @white;
} }

View file

@ -70,9 +70,8 @@
.table-bordered { .table-bordered {
border: 1px solid @tableBorder; border: 1px solid @tableBorder;
border-collapse: separate; // Done so we can round those corners! border-collapse: separate; // Done so we can round those corners!
*border-collapse: collapse; // IE7 can't round corners anyway
border-left: 0; border-left: 0;
.border-radius(4px); border-radius: 4px;
th, th,
td { td {
border-left: 1px solid @tableBorder; border-left: 1px solid @tableBorder;

View file

@ -121,7 +121,9 @@ dd {
width: 120px; width: 120px;
clear: left; clear: left;
text-align: right; text-align: right;
.text-overflow(); overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
dd { dd {
margin-left: 130px; margin-left: 130px;
@ -156,7 +158,9 @@ blockquote {
border-left: 5px solid @grayLighter; border-left: 5px solid @grayLighter;
p { p {
margin-bottom: 0; margin-bottom: 0;
#font > .shorthand(16px,300,@baseLineHeight * 1.25); font-size: 16px;
font-weight: 300;
line-height: @baseLineHeight * 1.25;
} }
small { small {
display: block; display: block;

View file

@ -10,8 +10,8 @@
margin-bottom: 20px; margin-bottom: 20px;
background-color: @wellBackground; background-color: @wellBackground;
border: 1px solid darken(@wellBackground, 7%); border: 1px solid darken(@wellBackground, 7%);
.border-radius(4px); border-radius: 4px;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
blockquote { blockquote {
border-color: #ddd; border-color: #ddd;
border-color: rgba(0,0,0,.15); border-color: rgba(0,0,0,.15);
@ -21,9 +21,9 @@
// Sizes // Sizes
.well-large { .well-large {
padding: 24px; padding: 24px;
.border-radius(6px); border-radius: 6px;
} }
.well-small { .well-small {
padding: 9px; padding: 9px;
.border-radius(3px); border-radius: 3px;
} }