css – select, dropdown arrow

css arrow for html selects: in LESS @arrowColor: white; @arrow: escape(‘@{arrowColor}’); background-image: url(~”data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A@{arrow}%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A”); background-position: right 10px center; background-repeat: no-repeat; background-size: auto 50%; outline: none; appearance: none; &::-ms-expand { display: none }  

simple tooltip, multiline, pure css

.popover__title { cursor: pointer; } .popover__wrapper { position: relative; display: inline-block; } .popover__content { opacity: 0; visibility: hidden; position: absolute; left: -100px; top: 105px; right: -100px; transform: translate(0,10px); background-color: white; padding: 15px; border: 1px solid #e8e7e7; border-radius: 10px; box-shadow: 1px Read more…

rkhunter – fix warnings

Warning #1 Warning: Found enabled xinetd service: /etc/xinetd.d/ftp_psa Warning: Found enabled xinetd service: /etc/xinetd.d/poppassd_psa Warning: Found enabled xinetd service: /etc/xinetd.d/smtp_psa Warning: Found enabled xinetd service: /etc/xinetd.d/smtps_psa Warning: Found enabled xinetd service: /etc/xinetd.d/submission_psa Rkhunter and plesk xinetd services Warning #2 Unable Read more…

less helpers – spacings

// // spacing helpers // @spacings: 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50; // mixin to iterate over colors and create CSS class for each one .generate-spacing-helpers(@i: length(@spacings)) when (@i > 0) { .generate-spacing-helpers(@i – 1); Read more…

unveil.js – lazy loading image with css animation

http://luis-almeida.github.io/unveil/ https://stephanwagner.me/only-css-loading-spinner LESS // unveil image loading img.unveil-is-loading { @keyframes spinner { to {transform: rotate(360deg);} } &:before { content: ”; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; border-radius: 50%; border: 2px Read more…

grunt setup

grunt setup for web projects. package.json { “name”: “package”, “version”: “0.0.1”, “dependencies”: { “grunt”: “^1.0.1” }, “devDependencies”: { “grunt-autoprefixer”: “^3.0.4”, “grunt-contrib-concat”: “^1.0.1”, “grunt-contrib-sass”: “^1.0.0”, “grunt-contrib-uglify”: “^3.1.0”, “grunt-contrib-watch”: “^1.0.0” }, “license”: “ISC” } Gruntfile.js module.exports = function (grunt) { grunt.initConfig({ watch: Read more…