useful css snippet

main.css

p {
  white-space: nowrap;
  overflow: hidden;
  // prevent text take more then one line

  text-overflow: clip | ellipsis;
  // can only be used when above two are set
}


/* Unclickable Element (>= IE 11) */
div {
  pointer-events: none;
  background: url('your_transparent.png'); /* optional */
}

/* Placeholder Style */
&:focus::-webkit-input-placeholder {
}

&:focus:-moz-placeholder { /* Firefox 18- */
}

&:focus::-moz-placeholder {  /* Firefox 19+ */
}

&:focus:-ms-input-placeholder {
}

/* Fade out for all tag with placeholder attr */
[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.5s 0.5s ease;
  opacity: 0;
}

/* Slide left effect for tag with custom-class class */
.custom-class:focus::-webkit-input-placeholder {
  transition: text-indent 0.5s 0.5s ease;
  text-indent: -100%;
  opacity: 1;
}

img {
  -webkit-user-drag: none;
}

/* Accessible with screen readers */
.visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px; width: 1px;
  margin: -1px; padding: 0; border: 0;
}

/* High res display media query */
(-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)