Blame view
assets/plugins/weather-icons-master/_docs/less/mixins.less
2.62 KB
cf76164e6
20190709
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
.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;
}
|