Skip to content

Instantly share code, notes, and snippets.

@japboy japboy/_loader.styl
Created Aug 28, 2012

Embed
What would you like to do?
My skeleton Stylus file
/*!
* CSS Ajax-loader
* ===============
*
* Written by Yu Inao, distributed under Public Domain.
*
* Usage
* -----
*
* #element {
* loader: black gray
* }
*
*/
@import 'nib'
black = rgb(0,0,0)
gray = rgba(0,0,0,0.6)
fieldSize = 100
ballSize = 10
@keyframes bounce
0%
top: 100%
100%
top: 20%
@keyframes stepon
0%
margin-top: -((ballSize / 2) / 2)px
height: ((ballSize / 3) / 2)px
transform: scale(1)
100%
margin-top: -(ballSize / 2)px
height: (ballSize / 3)px
transform: scale(0.1)
loader(ballColor=black, shadowColor=gray)
//border-color: rgb(0,0,0)
//border-style: dashed
//border-width: 1px
height: (fieldSize)px
position: absolute
width: (fieldSize)px
&::before
animation: stepon 0.5s infinite alternate
background-color: shadowColor
box-shadow: 0 0 5px 0
border-radius: 100%
content: ''
height: (ballSize / 3)px
left: 50%
margin-left: -((ballSize * 1.3) / 2)px
margin-top: -(ballSize / 3)px
position: absolute
top: 100%
width: (ballSize * 1.3)px
&::after
animation: bounce 0.5s infinite alternate
background-color: ballColor
border-radius: 100%
content: ''
height: (ballSize)px
left: 50%
margin-left: -(ballSize / 2)px
margin-top: -(ballSize) - (ballSize / 4)px
position: absolute
top: 0
width: (ballSize)px
//
// Common mixins
// My custom properties
text-stroke(number color)
text-shadow: (number * -1) (number * -1) 0 color, number (number * -1) 0 color, (number * -1) number 0 color, number number 0 color
// Filter Effects 1.0 (Editor's Draft)
// http://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
filter()
-webkit-filter: arguments
filter: arguments
filter-margin()
-webkit-filter-margin: arguments
filter-margin: arguments
filter-margin-top()
-webkit-filter-margin-top: arguments
filter-margin-top: arguments
filter-margin-right()
-webkit-filter-margin-right: arguments
filter-margin-right: arguments
filter-margin-bottom()
-webkit-filter-margin-bottom: arguments
filter-margin-bottom: arguments
filter-margin-left()
-webkit-filter-margin-left: arguments
filter-margin-left: arguments
color-interpolation-filters()
-webkit-color-interpolation-filters: arguments
color-interpolation-filters: arguments
// CSS 3 Flexbox
// http://www.w3.org/TR/css3-flexbox/
flex()
-webkit-flex: arguments
-moz-flex: arguments
-ms-flex: arguments
-o-flex: arguments
flex: arguments
flex-grow()
-webkit-flex-grow: arguments
-moz-flex-grow: arguments
-ms-flex-grow: arguments
-o-flex-grow: arguments
flex-grow: arguments
flex-shrink()
-webkit-flex-shrink: arguments
-moz-flex-shrink: arguments
-ms-flex-shrink: arguments
-o-flex-shrink: arguments
flex-shrink: arguments
flex-basis()
-webkit-flex-basis: arguments
-moz-flex-basis: arguments
-ms-flex-basis: arguments
-o-flex-basis: arguments
flex-basis: arguments
justify-content()
-webkit-justify-content: arguments
-moz-justify-content: arguments
-ms-justify-content: arguments
-o-justify-content: arguments
justify-content: arguments
align-items()
-webkit-align-items: arguments
-moz-align-items: arguments
-ms-align-items: arguments
-o-align-items: arguments
align-items: arguments
align-self()
-webkit-align-self: arguments
-moz-align-self: arguments
-ms-align-self: arguments
-o-align-self: arguments
align-self: arguments
align-content()
-webkit-align-content: arguments
-moz-align-content: arguments
-ms-align-content: arguments
-o-align-content: arguments
align-content: arguments
// CSS 3 properties using vendor prefixes
animation()
-webkit-animation: arguments
-moz-animation: arguments
-ms-animation: arguments
-o-animation: arguments
animation: arguments
animation-delay()
-webkit-animation-delay: arguments
-moz-animation-delay: arguments
-ms-animation-delay: arguments
-o-animation-delay: arguments
animation-delay: arguments
animation-direction()
-webkit-animation-direction: arguments
-moz-animation-direction: arguments
-ms-animation-direction: arguments
-o-animation-direction: arguments
animation-direction: arguments
animation-duration()
-webkit-animation-duration: arguments
-moz-animation-duration: arguments
-ms-animation-duration: arguments
-o-animation-duration: arguments
animation-duration: arguments
animation-fill-mode()
-webkit-animation-fill-mode: arguments
-moz-animation-fill-mode: arguments
-ms-animation-fill-mode: arguments
-o-animation-fill-mode: arguments
animation-fill-mode: arguments
animation-iteration-count()
-webkit-animation-iteration-count: arguments
-moz-animation-iteration-count: arguments
-ms-animation-iteration-count: arguments
-o-animation-iteration-count: arguments
animation-iteration-count: arguments
animation-name()
-webkit-animation-name: arguments
-moz-animation-name: arguments
-ms-animation-name: arguments
-o-animation-name: arguments
animation-name: arguments
animation-play-state()
-webkit-animation-play-state: arguments
-moz-animation-play-state: arguments
-ms-animation-play-state: arguments
-o-animation-play-state: arguments
animation-play-state: arguments
animation-timing-function()
-webkit-animation-timing-function: arguments
-moz-animation-timing-function: arguments
-ms-animation-timing-function: arguments
-o-animation-timing-function: arguments
animation-timing-function: arguments
border-radius()
-webkit-border-radius: arguments
-moz-border-radius: arguments
-ms-border-radius: arguments
-o-border-radius: arguments
border-radius: arguments
border-top-left-radius()
-webkit-top-left-border-radius: arguments
-moz-border-top-left-radius: arguments
-ms-border-top-left-radius: arguments
-o-border-top-left-radius: arguments
border-top-left-radius: arguments
border-top-right-radius()
-webkit-border-top-right-radius: arguments
-moz-border-top-right-radius: arguments
-ms-border-top-right-radius: arguments
-o-border-top-right-radius: arguments
border-top-right-radius: arguments
border-bottom-right-radius()
-webkit-border-bottom-right-radius: arguments
-moz-border-bottom-right-radius: arguments
-ms-border-bottom-right-radius: arguments
-o-border-bottom-right-radius: arguments
border-bottom-right-radius: arguments
border-bottom-left-radius()
-webkit-border-bottom-left-radius: arguments
-moz-border-bottom-left-radius: arguments
-ms-border-bottom-left-radius: arguments
-o-border-bottom-left-radius: arguments
border-bottom-left-radius: arguments
box-shadow()
-webkit-box-shadow: arguments
-moz-box-shadow: arguments
-ms-box-shadow: arguments
-o-box-shadow: arguments
box-shadow: arguments
perspective()
-webkit-perspective: arguments
-moz-perspective: arguments
-ms-perspective: arguments
-o-perspective: arguments
perspective: arguments
perspective-origin()
-webkit-perspective-origin: arguments
-moz-perspective-origin: arguments
-ms-perspective-origin: arguments
-o-perspective-origin: arguments
perspective-origin: arguments
transform()
-webkit-transform: arguments
-moz-transform: arguments
-ms-transform: arguments
-o-transform: arguments
transform: arguments
transform-origin()
-webkit-transform-origin: arguments
-moz-transform-origin: arguments
-ms-transform-origin: arguments
-o-transform-origin: arguments
transform-origin: arguments
transform-style()
-webkit-transform-style: arguments
-moz-transform-style: arguments
-ms-transform-style: arguments
-o-transform-style: arguments
transform-style: arguments
transition()
-webkit-transition: arguments
-moz-transition: arguments
-ms-transition: arguments
-o-transition: arguments
transition: arguments
transition-delay()
-webkit-transition-delay: arguments
-moz-transition-delay: arguments
-ms-transition-delay: arguments
-o-transition-delay: arguments
transition-delay: arguments
transition-duration()
-webkit-transition-duration: arguments
-moz-transition-duration: arguments
-ms-transition-duration: arguments
-o-transition-duration: arguments
transition-duration: arguments
transition-property()
-webkit-transition-property: arguments
-moz-transition-property: arguments
-ms-transition-property: arguments
-o-transition-property: arguments
transition-property: arguments
transition-timing-function()
-webkit-transition-timing-function: arguments
-moz-transition-timing-function: arguments
-ms-transition-timing-function: arguments
-o-transition-timing-function: arguments
transition-timing-function: arguments
//
// Common practices
// Clearfix
// Add `clearfix` class to the parent element of the `float`-ed elements
.clearfix:before,
.clearfix:after
content: " "
display: table
.clearfix:after
clear: both
//
// zurui-stylus
// based on zurui-design
// https://speakerdeck.com/ken_c_lo/zurui-design
@import 'nib'
//
// Zurui Design 1 ズルい線
line-top($op1=.2, $op2=.3)
border-top: 1px solid rgba(0,0,0,$op1)
box-shadow: rgba(255,255,255,$op2) 0 1px 0 inset
line-left($op1=.2, $op2=.3)
border-left: 1px solid rgba(0,0,0,$op1)
box-shadow: rgba(255,255,255,$op2) -1px 0 0
line-right($op1=.2, $op2=.3)
border-left: 1px solid rgba(0,0,0,$op1)
box-shadow: rgba(255,255,255,$op2) -1px 0 0 inset
line-bottom($op1=.2, $op2=.3)
border-bottom: 1px solid rgba(0,0,0,$op1)
box-shadow: rgba(255,255,255,$op2) 0 1px 0
//
// Zurui Design 2 ズルい text-shadow
ts-000($op=.4)
text-shadow: 1px -1px rgba(0,0,0,$op)
ts-fff($op=.7)
text-shadow: -1px 1px rgba(0,0,0,$op)
//
// Zurui Design 3 ズルい背景
$whiteA = #eee
$whiteB = #f8f8f8
//
// Zurui Design 4 ズルいグラデーション
gradient-top-lighten($color=#666, $lighten=10%)
background-color: $color
filter-gradient(lighten($color, $lighten), $color, vertical) // TODO: Stylus の mixin に直す
background-image(lighten($color, $lighten) 0%, $color 100%) // TODO: Stylus の mixin に直す
gradient-top-darken($color=#666, $darken=10%)
background-color: $color
filter-gradient(darken($color, $darken), $color, vertical) // TODO: Stylus の mixin に直す
background-image(darken($color, $darken) 0%, $color 100%) // TODO: Stylus の mixin に直す
//
// Zurui Design 5 ズルい角丸
//
// Zurui Design 6 ズルい box-shadow
outerline-box-shadow()
box-shadow: rgba(0,0,0,.15) 0 0 2px
innerline-box-shadow()
box-shadow: rgba(0,0,0,0.2) 0 0 0 20px inset
box-deboss($border=.1, $shadow=.1, $highlight=1)
border: 1px solid rgba(0,0,0,$border)
box-shadow: rgba(0,0,0,$shadow) -1px 1px 2px inset, rgba(255,255,255,$highlight) -1px 1px 0
box-emboss($border=.15, $shadow=.05, $highlight=1)
border: 1px solid rgba(0,0,0,$border)
box-shadow: rgba(0,0,0,$shadow) -1px 1px 0, rgba(255,255,255,$highlight) -1px 1px 0 inset
//
// Zurui Design 7 ズルいボタン
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.