Skip to content

Instantly share code, notes, and snippets.

@subratastack
Forked from dmitrykuznetsovdev/_mixins.styl
Created October 10, 2019 09:56
Show Gist options
  • Save subratastack/aa7f09ad789200f0e229dd5c18de3701 to your computer and use it in GitHub Desktop.
Save subratastack/aa7f09ad789200f0e229dd5c18de3701 to your computer and use it in GitHub Desktop.
mixins.stylus
// Display:
// appearance
// box-align
// box-flex
// box-sizing
// box-orient
// box-pack
// display-box
// overflow-sroll
// user-select
//
// Decoration
// background-linear-gradient
// background-radial-gradient
// border-radius
// border-top-left-radius
// border-top-right-radius
// border-bottom-left-radius
// border-bottom-right-radius
// box-shadow
// text-shadow
//
// Transformation
// backface-visibility
// matrix
// perspective
// perspective-origin
// rotate
// scale
// skew
// transform
// transform-origin
// transform-style
// translate
// translate3d
//
// Animation
// transition
// @see http://www.w3.org/TR/css3-flexbox/
// @see http://www.html5rocks.com/en/tutorials/flexbox/quick/
//
//display-box()
// display: -webkit-box
///* @alternate */
// display: -moz-box
///* @alternate */
// display: -ms-box
///* @alternate */
// display: -o-box
///* @alternate */
// display: box
// @param value : horizontal | vertical | inherit
//
// @see http://www.w3.org/TR/css3-flexbox/
// @see http://www.html5rocks.com/en/tutorials/flexbox/quick/
box-orient(value)
-webkit-box-orient: value
-moz-box-orient: value
-ms-box-orient: value
-o-box-orient: value
box-orient: value
// @param value : start | end | center | justify
//
// @see http://www.w3.org/TR/css3-flexbox/
// @see http://www.html5rocks.com/en/tutorials/flexbox/quick/
box-pack(value)
display-box()
-webkit-box-pack: value
-moz-box-pack: value
-ms-box-pack: value
-o-box-pack: value
box-pack: value
// @param value : start | end | center | baseline | stretch
//
// @see http://www.w3.org/TR/css3-flexbox/
// @see http://www.html5rocks.com/en/tutorials/flexbox/quick/
box-align(value)
display-box()
-webkit-box-align: value
-moz-box-align: value
-ms-box-align: value
-o-box-align: value
box-align: value
// @param value : 0 | Integer
//
// @see http://www.w3.org/TR/css3-flexbox/
// @see http://www.html5rocks.com/en/tutorials/flexbox/quick/
box-flex(value)
display-box()
-webkit-box-flex: value
-moz-box-flex: value
-ms-box-flex: value
-o-box-flex: value
box-flex: value
// @param value : content-box | padding-box | border-box | inherit
// @see http://www.w3.org/TR/css3-ui/#box-sizing
box-sizing(value)
-webkit-box-sizing: value
-moz-box-sizing: value
box-sizing: value
overflow-scroll()
-webkit-overflow-scrolling: touch
overflow: scroll
// @param value : none | text | toggle | element | elements | all | inherit
// @see http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select
user-select(value)
-webkit-touch-callout: value
-webkit-user-select: value
-moz-user-select: value
-ms-user-select: value
-o-user-select: value
user-select: value
// @param value : button | push-button | hyperlink radio-button | checkbox |
// pop-up-menu | list-menu | radio-group | checkbox-group |
// field | password | normal | inherit | none
//
// @see http://www.w3.org/TR/css3-ui/#appearance
// @see http://www.cssportal.com/css-properties/appearance.htm
// @see https://developer.mozilla.org/en/CSS/-moz-appearance
appearance(value)
-webkit-appearance: value
-moz-appearance: value
-ms-appearance: value
-o-appearance: value
appearance: value
// @param top-left-radius : px, em, %
// @param top-right-radius : px, em, %
// @param bottom-right-radius : px, em, %
// @param bottom-left-radius : px, em, %
//
// @see http://www.w3.org/TR/css3-background/#border-radius
border-radius(value)
-webkit-border-radius: value
-moz-border-radius: value
border-radius: value
-webkit-background-clip: padding-box
-moz-background-clip: padding
background-clip: padding-box
border-top-left-radius(value)
-webkit-border-top-left-radius: value
-moz-border-radius-topleft: value
-ms-border-top-left-radius: value
-o-border-top-left-radius: value
border-top-left-radius: value
border-top-right-radius(value)
-webkit-border-top-right-radius: value
-moz-border-radius-topright: value
-ms-border-top-right-radius: value
-o-border-top-right-radius: value
border-top-right-radius: value
border-bottom-left-radius(value)
-webkit-border-bottom-left-radius: value
-moz-border-radius-bottomleft: value
-ms-border-bottom-left-radius: value
-o-border-bottom-left-radius: value
border-bottom-left-radius: value
border-bottom-right-radius(value)
-webkit-border-bottom-right-radius: value
-moz-border-radius-bottomright: value
-ms-border-bottom-right-radius: value
-o-border-bottom-right-radius: value
border-bottom-right-radius: value
box-shadow(value)
-webkit-box-shadow: value
-moz-box-shadow: value
box-shadow: value
// @param colour : #000, rgba, hsla
// @param horizontal-offset : px, em
// @param vertical-offset : px, em
// @param blur-radius : px, em
//
// @see http://www.w3.org/TR/css3-text/#text-shadow
text-shadow(value)
text-shadow: value
// @param angle : top, left, 90deg
// @param colourA : #000 0%, red 0%
// @param colourB : #000 50%, red 50%
// @param colourC : #000 100%, red 100%
//
// @example background-linear-gradient("top, crimson 0%, black 100%");
//
// @see http://dev.w3.org/csswg/css3-images/#linear-gradients
background-linear-gradient(value) {
background-image: -webkit-linear-gradient(value)
/* @alternate */
background-image: -moz-linear-gradient(value)
/* @alternate */
background-image: -ms-linear-gradient(value)
/* @alternate */
background-image: -o-linear-gradient(value)
/* @alternate */
background-image: linear-gradient(value)
}
// @param location : left top, 50% 50%
// @param shape : circle, ellipse, 100% 75%
// @param colourA : #000 0%, red 0%
// @param colourB : #000 50%, red 50%
// @param colourC : #000 100%, red 100%
//
// @example background-radial-gradient("50% 50%, circle, crimson 0%, black 100%");
//
// @see http://dev.w3.org/csswg/css3-images/#radial-gradients
background-radial-gradient(value){
background-image: -webkit-radial-gradient(value)
/* @alternate */
background-image: -moz-radial-gradient(value)
/* @alternate */
background-image: -ms-radial-gradient(value)
/* @alternate */
background-image: -o-radial-gradient(value)
/* @alternate */
background-image: radial-gradient(value)
}
// @param functions : matrix(), translate(), scale(), rotate(), skew()
//
// @see http://www.w3.org/TR/css3-2d-transforms/
transform(value)
-webkit-transform: value
-moz-transform: value
-ms-transform: value
-o-transform: value
transform: value
// @param value : left | center | right | px | em | %
//
// @see http://www.w3.org/TR/css3-3d-transforms/#transform-origin-property
transform-origin(value)
-webkit-transform-origin: value
-moz-transform-origin: value
-ms-transform-origin: value
-o-transform-origin: value
transform-origin: value
// @param value : preserve-3d | flat
//
// @see http://www.w3.org/TR/css3-3d-transforms/#transform-style-property
transform-style(value)
-webkit-transform-style: value
-moz-transform-style: value
-ms-transform-style: value
-o-transform-style: value
transform-style: value
// @param value : none | 0, 1, 100, 1000, etc
//
// @see http://www.w3.org/TR/css3-3d-transforms/#perspective-property
perspective(value)
-webkit-perspective: value
-moz-perspective: value
-ms-perspective: value
-o-perspective: value
perspective: value
// @param value: left | center | right | px | em | %
//
// @see http://www.w3.org/TR/css3-3d-transforms/#perspective-origin-property
perspective-origin(value)
-webkit-perspective-origin: value
-moz-perspective-origin: value
-ms-perspective-origin: value
-o-perspective-origin: value
perspective-origin: value
// @param value : visible | hidden
//
// @see http://www.w3.org/TR/css3-3d-transforms/#backface-visibility-property
backface-visibility(value)
-webkit-backface-visibility: value
-moz-backface-visibility: value
-ms-backface-visibility: value
-o-backface-visibility: value
backface-visibility: value
// @param a : Number
// @param b : Number
// @param c : Number
// @param d : Number
// @param e : Number
// @param f : Number
//
// @see http://www.w3.org/TR/css3-3d-transforms/#transform-functions
matrix(value)
-webkit-transform: matrix(value)
-moz-transform: matrix(value)
-ms-transform: matrix(value)
-o-transform: matrix(value)
transform: matrix(value)
// @param translate-x : px
// @param translate-y : px
//
// http://www.w3.org/TR/css3-3d-transforms/#transform-functions
transform-translate(value)
-webkit-transform: translate(value)
-moz-transform: translate(value)
-ms-transform: translate(value)
-o-transform: translate(value)
transform: translate(value)
transform-translate3d(value)
-webkit-transform: translate3d(value)
-moz-transform: translate3d(value)
-ms-transform: translate3d(value)
-o-transform: translate3d(value)
transform: translate3d(value)
// @param scale-x : 0.5, 2, etc
// @param scale-y : 0.5, 2, etc
//
// @see http://www.w3.org/TR/css3-3d-transforms/#transform-functions
transform-scale(value)
-webkit-transform: scale(value)
-moz-transform: scale(value)
-ms-transform: scale(value)
-o-transform: scale(value)
transform: scale(value)
// @param angle : 0deg
//
// @see http://www.w3.org/TR/css3-3d-transforms/#transform-functions
transform-rotate(value)
-webkit-transform: rotate(value)
-moz-transform: rotate(value)
-ms-transform: rotate(value)
-o-transform: rotate(value)
transform: rotate(value)
// @param axis-x : 0deg
// @param axis-y : 0deg
//
// @see http://www.w3.org/TR/css3-3d-transforms/#transform-functions
skew(value)
-webkit-transform: skew(value)
-moz-transform: skew(value)
-ms-transform: skew(value)
-o-transform: skew(value)
transform: skew(value)
// @param properties : all, left, opacity, etc
// @param duration : 1s, 1000ms
// @param delay : 1s, 1000ms
// @param easing : linear, ease-in-out, etc
//
// @see http://www.w3.org/TR/css3-transitions/
transition(value)
-webkit-transition: value
-moz-transition: value
-ms-transition: value
-o-transition: value
transition: value
animate(name = fadeIn, duration = 1s, delay = .2s, function = ease, mode = both)
-moz-animation: name duration delay function mode
-webkit-animation: name duration delay function mode
animation: name duration delay function mode
animate-delay(delay = .0s)
-moz-animation-delay: delay
-webkit-animation-delay: delay
-ms-animation-delay: delay
-o-animation-delay: delay
animation-delay: delay
animate-duration(duration = 1s)
-moz-animation-duration: duration
-webkit-animation-duration: duration
-ms-animation-duration: duration
-o-animation-duration: duration
animation-delay: duration
@-webkit-keyframes preloader
0%
25%
transform-scale(1.1)
50%
transform-scale(1.2)
75%
transform-scale(1.1)
@-moz-keyframes preloader
0%
25%
transform-scale(1.1)
50%
transform-scale(1.2)
75%
transform-scale(1.1)
@-o-keyframes preloader
0%
25%
transform-scale(1.1)
50%
transform-scale(1.2)
75%
transform-scale(1.1)
@keyframes preloader
0%
25%
transform-scale(1.1)
50%
transform-scale(1.2)
75%
transform-scale(1.1)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment