131 lines
3.6 KiB
Plaintext
131 lines
3.6 KiB
Plaintext
// Utilities
|
|
// -------------------------
|
|
|
|
// Clearfix
|
|
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
|
|
//
|
|
// For modern browsers
|
|
// 1. The space content is one way to avoid an Opera bug when the
|
|
// contenteditable attribute is included anywhere else in the document.
|
|
// Otherwise it causes space to appear at the top and bottom of elements
|
|
// that are clearfixed.
|
|
// 2. The use of `table` rather than `block` is only necessary if using
|
|
// `:before` to contain the top-margins of child elements.
|
|
.clearfix() {
|
|
&:before,
|
|
&:after {
|
|
content: " "; // 1
|
|
display: table; // 2
|
|
}
|
|
&:after {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
// WebKit-style focus
|
|
.tab-focus() {
|
|
// Default
|
|
outline: thin dotted;
|
|
// WebKit
|
|
outline: 5px auto -webkit-focus-ring-color;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
// Center-align a block level element
|
|
.center-block() {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
// Sizing shortcuts
|
|
.size(@width; @height) {
|
|
width: @width;
|
|
height: @height;
|
|
}
|
|
.square(@size) {
|
|
.size(@size; @size);
|
|
}
|
|
|
|
// Placeholder text
|
|
.placeholder(@color: @input-color-placeholder) {
|
|
&::-moz-placeholder { color: @color; // Firefox
|
|
opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
|
|
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
|
|
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
|
|
}
|
|
|
|
// Text overflow
|
|
// Requires inline-block or block for proper styling
|
|
.text-overflow() {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
// CSS image replacement
|
|
//
|
|
// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
|
|
// mixins being reused as classes with the same name, this doesn't hold up. As
|
|
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note
|
|
// that we cannot chain the mixins together in Less, so they are repeated.
|
|
//
|
|
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
|
|
|
|
// Deprecated as of v3.0.1 (will be removed in v4)
|
|
.hide-text() {
|
|
font: ~"0/0" a;
|
|
color: transparent;
|
|
text-shadow: none;
|
|
background-color: transparent;
|
|
border: 0;
|
|
}
|
|
// New mixin to use as of v3.0.1
|
|
.text-hide() {
|
|
.hide-text();
|
|
}
|
|
|
|
// Retina images
|
|
//
|
|
// Short retina mixin for setting background-image and -size
|
|
|
|
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
|
|
background-image: url("@{file-1x}");
|
|
|
|
@media
|
|
only screen and (-webkit-min-device-pixel-ratio: 2),
|
|
only screen and ( min--moz-device-pixel-ratio: 2),
|
|
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
|
only screen and ( min-device-pixel-ratio: 2),
|
|
only screen and ( min-resolution: 192dpi),
|
|
only screen and ( min-resolution: 2dppx) {
|
|
background-image: url("@{file-2x}");
|
|
background-size: @width-1x @height-1x;
|
|
}
|
|
}
|
|
|
|
|
|
// Responsive image
|
|
//
|
|
// Keep images from scaling beyond the width of their parents.
|
|
|
|
.img-responsive(@display: block;) {
|
|
display: @display;
|
|
max-width: 100%; // Part 1: Set a maximum relative to the parent
|
|
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
|
|
}
|
|
|
|
// Responsive utilities
|
|
// -------------------------
|
|
// More easily include all the states for responsive-utilities.less.
|
|
.responsive-visibility() {
|
|
display: block !important;
|
|
table& { display: table; }
|
|
tr& { display: table-row !important; }
|
|
th&,
|
|
td& { display: table-cell !important; }
|
|
}
|
|
|
|
.responsive-invisibility() {
|
|
display: none !important;
|
|
} |