100 lines
2.5 KiB
SCSS
100 lines
2.5 KiB
SCSS
// avoid text selection
|
|
@mixin not-selectable-text() {
|
|
/* Firefox all */
|
|
-moz-user-select: none;
|
|
/* IE 10+ */
|
|
-ms-user-select: none;
|
|
/* Chrome all / Safari all */
|
|
-webkit-user-select: none;
|
|
/* Likely future */
|
|
user-select: none;
|
|
}
|
|
|
|
// use for retina background images @1x / @2x / @3x
|
|
@mixin image-retina($filename, $extension) {
|
|
|
|
background-image: url($filename + '.' + $extension);
|
|
|
|
@media (-webkit-min-device-pixel-ratio: 2),
|
|
(-moz-min-device-pixel-ratio: 2),
|
|
(min-resolution: 192dpi),
|
|
(min-resolution: 2dppx) {
|
|
& {
|
|
background-image: url($filename + '@2x.' + $extension);
|
|
}
|
|
}
|
|
|
|
@media (-webkit-min-device-pixel-ratio: 3),
|
|
(-moz-min-device-pixel-ratio: 3),
|
|
(min-resolution: 288dpi),
|
|
(min-resolution: 3dppx) {
|
|
& {
|
|
background-image: url($filename + '@3x.' + $extension);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// placeholder color
|
|
@mixin placeholder-color($color) {
|
|
&::-webkit-input-placeholder {
|
|
/* WebKit browsers */
|
|
color: $color !important;
|
|
opacity: 1 !important;
|
|
}
|
|
&:-moz-placeholder {
|
|
/* Mozilla Firefox 4 to 18 */
|
|
color: $color !important;
|
|
opacity: 1 !important;
|
|
}
|
|
&::-moz-placeholder {
|
|
/* Mozilla Firefox 19+ */
|
|
color: $color !important;
|
|
opacity: 1 !important;
|
|
}
|
|
&:-ms-input-placeholder {
|
|
/* Internet Explorer 10+ */
|
|
color: $color !important;
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
|
|
// placeholder font size
|
|
@mixin placeholder-font-size($font-size) {
|
|
&::-webkit-input-placeholder {
|
|
/* WebKit browsers */
|
|
font-size: $font-size !important;
|
|
}
|
|
&:-moz-placeholder {
|
|
/* Mozilla Firefox 4 to 18 */
|
|
font-size: $font-size !important;
|
|
}
|
|
&::-moz-placeholder {
|
|
/* Mozilla Firefox 19+ */
|
|
font-size: $font-size !important;
|
|
}
|
|
&:-ms-input-placeholder {
|
|
/* Internet Explorer 10+ */
|
|
font-size: $font-size !important;
|
|
}
|
|
}
|
|
|
|
// placeholder font style
|
|
@mixin placeholder-font-style($font-style) {
|
|
&::-webkit-input-placeholder {
|
|
/* WebKit browsers */
|
|
font-style: $font-style !important;
|
|
}
|
|
&:-moz-placeholder {
|
|
/* Mozilla Firefox 4 to 18 */
|
|
font-style: $font-style !important;
|
|
}
|
|
&::-moz-placeholder {
|
|
/* Mozilla Firefox 19+ */
|
|
font-style: $font-style !important;
|
|
}
|
|
&:-ms-input-placeholder {
|
|
/* Internet Explorer 10+ */
|
|
font-style: $font-style !important;
|
|
}
|
|
} |