You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.6 KiB
Plaintext
102 lines
2.6 KiB
Plaintext
.gray(@percent) {
|
|
color: hsl(0,0%,(@percent));
|
|
}
|
|
|
|
.ul-inline-no-style() {
|
|
margin: 0px;
|
|
list-style: none;
|
|
.clearfix;
|
|
li {
|
|
float: left;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.ul-block-no-style() {
|
|
margin: 0px;
|
|
list-style: none;
|
|
.clearfix;
|
|
}
|
|
|
|
// 1 pixel black and white text shadows
|
|
.textShadowBlack(@shadow) {
|
|
text-shadow: 0 1px 1px hsla(0,0%,0%,@shadow);
|
|
}
|
|
.textShadowWhite(@shadow: 0 1px 0px hsla(0,0%,100%,0.8)) {
|
|
text-shadow: @shadow;
|
|
}
|
|
|
|
|
|
// easy background image mixin
|
|
.bgi(@src, @xpos: 0, @ypos: 0, @repeat: no-repeat) {
|
|
background-image: url(@src);
|
|
background-position: @xpos @ypos;
|
|
background-attachment: scroll;
|
|
background-repeat: @repeat;
|
|
}
|
|
|
|
|
|
// Background-cover mixin yay
|
|
.background-cover(@cover: cover) {
|
|
-webkit-background-size: @cover;
|
|
-moz-background-size: @cover;
|
|
-o-background-size: @cover;
|
|
background-size: @cover;
|
|
}
|
|
|
|
|
|
// CSS3 modern box sizing - padding is included in sum
|
|
.box-sizing(@type: border-box) {
|
|
-webkit-box-sizing: @type;
|
|
-moz-box-sizing: @type;
|
|
box-sizing: @type;
|
|
}
|
|
|
|
// H Rest - resets H tags margin and padding
|
|
.hreset() {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
// the retina mixin. An example goes: .at2x(img/header@2x.png, 650px, 150px, top, left, no-repeat, scroll)
|
|
// Put the size that the image appears on a non-retina, e.g. if it's a 200px x 200px non-retina, that is the effective size. The @2x 400px x 400px is calculated automatically. The order to type it is width then height.
|
|
// A modification of the retina.js less mixin - https://github.com/imulus/retinajs
|
|
|
|
|
|
@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";
|
|
.at2x(@path, @w: auto, @h: auto, @xpos: 0, @ypos: 0, @repeat: no-repeat, @attachment: scroll) {
|
|
background-image: url(@path);
|
|
background-position: @xpos @ypos;
|
|
background-repeat: @repeat;
|
|
background-attachment: @attachment;
|
|
@at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;
|
|
@media @highdpi {
|
|
background-image: url(@at2x_path);
|
|
background-size: @w @h;
|
|
background-position: @xpos @ypos;
|
|
background-repeat: @repeat;
|
|
background-attachment: @attachment;
|
|
}
|
|
}
|
|
|
|
|
|
// the highlight color for the page
|
|
.highlight(@backgroundColor, @textColor) {
|
|
::selection, -moz::selection {
|
|
background: @backgroundColor;
|
|
color: @textColor;
|
|
}
|
|
}
|
|
.highlight(hsl(207, 100%, 52%), @white);
|
|
|
|
.noselect() {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|