koffie

text-border

Creates a four colored border in the desired element's text.

Alias:

tb()

Input:

text-border( red, 1px, yellow, 1px, green, 1px, purple, 1px )

Output:

text-shadow: 1px 1px #f00, -1px -1px #ff0, 1px -1px #008000, -1px 1px #800080;

error-input($color)

Changes the placeholder, border and outline colors.

Alias:

error(), err()

Input:

error-input(red)

Output:

input {
  border: 1px solid red !important;
  color: red;
  outline-color: red;
}
input::-webkit-input-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}
input::placeholder {
  color: red;
}
input:focus {
  outline-color: red;
}

placeholder($color)

Changes the placeholder color.

Alias:

ph()

Input:

placeholder(#eee)

Output:

input::-webkit-input-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}
input::placeholder {
  color: red;
}
input:focus {
  outline-color: red;
}

fix-input()

Removes the placeholder while the input is focused and empty. Also removes the 'invalid' input state red box shadow from Firefox.

Input:

fix-input()

Output:

input:focus::-webkit-input-placeholder {
  color: transparent;
}
input:invalid {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

$antialiasing

Enables font antialiasing.

Alias:

$anti-aliasing, $font-smoothing

Input:

$antialiasing

Output:

-moz-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
-moz-text-rendering optimizeLegibility
-ms-font-smoothing antialiased
-ms-text-rendering optimizeLegibility
-o-font-smoothing antialiased
-o-text-rendering optimizeLegibility
-webkit-font-smoothing antialiased
-webkit-text-rendering optimizeLegibility
font-smoothing antialiased
text-rendering optimizeLegibility

Author: Maximilian Hoffmann & drinchev

References: Link 0 Link 1

scroll-bar($size, $background1, $background2, $radius)

Changes the scrollbar's default style (Not for Firefox).

Input:

scroll-bar(6px, transparent, #ccc, 5px)

Output:

html {
  scrollbar-3dlight-color: transparent;
  scrollbar-arrow-color: #666;
  scrollbar-base-color: transparent;
  scrollbar-darkshadow-color: transparent;
  scrollbar-face-color: #ccc;
  scrollbar-highlight-color: transparent;
  scrollbar-shadow-color: transparent;
  scrollbar-track-color: transparent;
}
html::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-thumb {
  background: #ccc;;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

Author: Drew Noakes

References: Link 0

disable-scroll-styling()

Disable scrollbar styling by not vendor-prefixed properties.

Input:

disable-scroll-styling()

Output:

scrollbar-3dlight-color: ThreeDLightShadow !important;
scrollbar-arrow-color: ButtonText !important;
scrollbar-darkshadow-color: ThreeDDarkShadow !important;
scrollbar-face-color: ThreeDFace !important;
scrollbar-highlight-color: ThreeDHighlight !important;
scrollbar-shadow-color: ThreeDDarkShadow !important;
scrollbar-track-color: Scrollbar !important;

Author: W3C

References: Link 0

border-radius($radius)

Cross-browser border-radius.

Alias:

bradius()

Input:

border-radius(5px)

Output:

-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
behavior: url('https://cdn.rawgit.com/ghaschel/koffie/master/htc/PIE.htc');
-ms-behaviour: url('https://cdn.rawgit.com/ghaschel/koffie/master/htc/PIE.htc');

References: Link 0

padding-x($value)

Wrapper function for easier use of padding-left and padding-right.

Alias:

paddingx()

Input:

padding-x(3px)

Output:

padding-left: 3px;
padding-right: 3px;

padding-y($value)

Wrapper function for easier use of padding-top and padding-bottom.

Alias:

paddingy()

Input:

padding-y(6px)

Output:

padding-bottom: 6px;
padding-top: 6px;

margin-y($value)

Wrapper function for easier use of margin-top and margin-bottom.

Alias:

marginy()

Input:

margin-y(9px)

Output:

margin-bottom: 9px;
margin-top: 9px;

margin-x($value)

Wrapper function for easier use of margin-left and margin-right.

Alias:

marginx()

Input:

margin-x(6px)

Output:

margin-left: 6px;
margin-right: 6px;

opacity($opacity)

Cross-browser opacity function.

Alias:

opc()

Input:

opacity(0.35)

Output:

-khtml-opacity: 0.35;
-moz-opacity: 0.35;
-webkit-opacity: 0.35;
opacity: 0.35;
-ms-filter: progrid:DXImageTransform.Microsoft.Alpha(opacity=35);
filter: alpha(opacity=35);

nout()

Removes the outline when focus state is active.

Input:

nout()

Output:

a {
  outline: none;
}
a:focus {
  outline: none;
}

top-triangle($size, $color)

Displays a triangle at the element's top.

Input:

span:after { top-triangle(15px, $fff) }

Output:

span:after {
  border-bottom: 15px solid #fff;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid transparent;
  content: '';
  display: inline-block;
  height: 1px;
  position: absolute;
  top: 29px;
  width: 1px;
}

bottom-triangle($size, $color)

Displays a triangle in the element's bottom.

Input:

span:after { bottom-triangle(15px, $fff) }

Output:

span:after {
  border-bottom: 15px solid transparent;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #fff;
  bottom: 29px;
  content: '';
  display: inline-block;
  height: 1px;
  position: absolute;
  width: 1px;
}

left-triangle($size, $color)

Displays a triangle in the element's left.

Input:

span:after { left-triangle(15px, $fff) }

Output:

span:after {
  border-bottom: 15px solid transparent;
  border-left: 15px solid transparent;
  border-right: 15px solid #fff;
  border-top: 15px solid transparent
  content: '';
  display: inline-block;
  height: 1px;
  left: 29px;
  position: absolute;
  width: 1px;
}

right-triangle($size, $color)

Displays a triangle in the element's right.

Input:

span:after { right-triangle(15px, $fff) }

Output:

span:after {
  border-bottom: 15px solid transparent;
  border-left: 15px solid #fff;
  border-right: 15px solid transparent;
  border-top: 15px solid transparent;
  content: '';
  display: inline-block;
  height: 1px;
  position: absolute;
  right: 29px;
  width: 1px;
}

$text-overflow

Displays reticences at the line's end in case it doesn't fit.

Alias:

$txt-ovf, $txtovf

Input:

$text-overflow

Output:

display: inline-block
max-widt: 100%
overflow: hidden
text-overflow: ellipsis
white-space: nowrap

$no-user-select

Disable user content selection.

Alias:

$nousel

Input:

$no-user-select

Output:

-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-webkit-user-select: none;
user-select: none;

user-select($color-1, $color-2)

Changes the user content selection color.

Alias:

usel()

Input:

user-select(yellow, red)

Output:

p::selection {
  color: red;
  background: yellow;
}
p::-moz-selection {
  color: yellow;
  background: red;
}

$fix-flickering

Fixes the flickering on pseudo elements when animated by transition.

Alias:

$fixfl

Input:

$fix-flickering

Output:

-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

transition($time, $ease, $where)

Function for faster transition creation.

Alias:

transition(), trans()

Input:

transition(0.3s, ease-in-out, all)

Output:

-khtml-transition: 0.3s ease-in-out all;
-moz-transition: 0.3s ease-in-out all;
-ms-transition: 0.3s ease-in-out all;
-o-transition: 0.3s ease-in-out all;
-webkit-transition: 0.3s ease-in-out all;
transition: 0.3s ease-in-out all;

$nospeak

Hides an element from screen readers.

Alias:

$no-speak

Input:

$nospeak

Output:

speak: none;

$hw-accelerated

Enables hardware acceleration. Use at the desided element's parent.

Alias:

$hwacc

Input:

$hw-accelerated

Output:

-webkit-backface-visibility hidden
-webkit-transform rotateZ( 360deg )
-webkit-perspective 1000
backface-visibility hidden
perspective 1000

fixsel()

Removes select tag's default style.

Input:

fixsel()

Output:

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  overflow: -moz-hidden-unscrollable;
  text-indent: .01px;
  text-overflow: '';
}
select::-ms-expand {
  display: none;
}

$hyphen

Add a hyphen to broken words.

Input:

$hyphen

Output:

-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;

Author: Kenneth Auchenberg

References: Link 0