mirror of
https://github.com/erikflowers/weather-icons.git
synced 2025-12-14 13:14:57 -07:00
94 lines
2.2 KiB
Plaintext
94 lines
2.2 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;
|
|
}
|
|
|
|
|
|
|
|
// the retina mixin. Goes .at2x(img/header.png, 650px, 150px).
|
|
// Put the effective size, it goes width then height
|
|
@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;
|
|
}
|
|
|