Skip to content

Instantly share code, notes, and snippets.

@egorvinogradov
Created February 28, 2019 15:27
Show Gist options
  • Save egorvinogradov/75917f73f78bd93f257af8b6a356813b to your computer and use it in GitHub Desktop.
Save egorvinogradov/75917f73f78bd93f257af8b6a356813b to your computer and use it in GitHub Desktop.
/* Example:
* @font-face
* @include l-font-face('Rubik', Rubik-Light, 300) */
@mixin l-font-face($name, $filename, $font-weight) {
font-family: $name;
src: url("/fonts/" + $filename + ".woff") format("woff");
font-weight: $font-weight;
font-style: normal;
}
/* Example:
* .input
* @include l-placeholder()
* color: $l-color-gray-2 */
@mixin l-placeholder {
&::-webkit-input-placeholder {
@content;
}
&::-moz-placeholder {
@content;
}
&:-ms-input-placeholder {
@content;
}
}
/* Adds '...' to multi-line block when overfilled
* Example:
* div
* @include l-text-ellipsis-multiline(2, 18px) */
@mixin l-text-ellipsis-multiline($visible-lines-count, $line-height) {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
line-height: $line-height;
height: $line-height * $visible-lines-count;
-webkit-line-clamp: $visible-lines-count;
-webkit-box-orient: vertical;
}
/* Applies the same style for normal, :hover, :focus and :active states of a link or a button:
* Example:
* @include l-normal-hover-focus-active()
* color: $l-color-gray-3 */
@mixin l-normal-hover-focus-active {
&,
&:hover,
&:focus,
&:active {
@content;
}
}
/* Applies media-queries using bootstrap-like syntax
* Examples:
*
* div
* @include l-media(xs,xs)
* font-size: 12px <-- only works for xs screen sizes (from 0 to 768px)
*
* div
* @include l-media(xs,md)
* color: red <-- works on screen sizes from xs to md (xs, sm, md)
*
* div
* @include l-media(md,lg)
* max-width: 980px <-- works on md and lg screen sizes
*
* div
* @include l-media(xs,md) <-- combining multiple conditions
* height: 80px
* @include l-media(sm,lg)
* padding-top: 0
*
* div
* @include l-media(700px,md) <-- also works with px values
* border-width: 2px
* @include l-media(200px,400px)
* border: none */
@mixin l-media($screen-size-from, $screen-size-to) {
@if $screen-size-from == lg {
@media (min-width: $screen-lg) {
& {
@content;
}
}
}
@else {
$_from: 1px;
$_to: 99999px;
@if type_of($screen-size-from) == string {
@if $screen-size-from == xs {
$_from: 0;
}
@else if $screen-size-from == sm {
$_from: $screen-sm;
}
@else if $screen-size-from == md {
$_from: $screen-md;
}
}
@else {
$_from: $screen-size-from;
}
@if type_of($screen-size-to) == string {
@if $screen-size-to == xs {
$_to: $screen-sm - 1;
}
@else if $screen-size-to == sm {
$_to: $screen-md - 1;
}
@else if $screen-size-to == md {
$_to: $screen-lg - 1;
}
}
@else {
$_to: $screen-size-to;
}
@media (min-width: $_from) and (max-width: $_to) {
& {
@content;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment