oulu 0.8.2

data/app/assets/stylesheets/modules/buttons/styles/_material.sass

@@ -0,0 +1,89 @@
+=waves-effect($color: black)
+  +position(relative, 1)
+  overflow: hidden
+  will-change: opacity, transform
+  +transition(all .3s ease-out)
+  .waves-ripple
+    position: absolute
+    border-radius: 50%
+    +block-size(20px)
+    +rem('margin-top', -10px)
+    +rem('margin-left', -10px)
+    opacity: 0
+    @if $color == 'light'
+      background-color: rgba(white, 0.45)
+    @else if $color == 'red'
+      background-color: rgba(#F44336, .70)
+    @else if $color == 'yellow'
+      background-color: rgba(#FFEB3B, .70)
+    @else if $color == 'orange'
+      background-color: rgba(#FF9800, .70)
+    @else if $color == 'purple'
+      background-color: rgba(#9C27B0, 0.70)
+    @else if $color == 'green'
+      background-color: rgba(#4CAF50, 0.70)
+    @else if $color == 'teal'
+      background-color: rgba(#009688, 0.70)
+    @else if luma_bright(lighten($color, 5%))
+      background-color: lighten($color, 45%)
+    @else
+      background-color: darken($color, 20%)
+    +transition(all 0.7s ease-out)
+    -webkit-transition-property: -webkit-transform, opacity
+    -moz-transition-property: -moz-transform, opacity
+    -o-transition-property: -o-transform, opacity
+    transition-property: transform, opacity
+    +transform(scale(0))
+    pointer-events: none
+
+=material-button($color: blue)
+  +transition(.2s ease-out)
+  +border-radius(2px)
+  background-color: $color
+  color: luma_contrast_color($color)
+  box-shadow: 0 2px 5px 0 rgba(black, .16), 0 2px 10px 0 rgba(black, .12)
+  +rem('letter-spacing', .5px)
+  +waves-effect($color)
+  &:hover,
+  .hover,
+  .is-hover
+    $color: lighten($color, 5%)
+    box-shadow: 0 5px 11px 0 rgba(black, .18), 0 4px 15px 0 rgba(black, .15)
+    @if $color == white
+      background-color: #f4f4f4
+    @else
+      background-color: $color
+  &:active,
+  .active,
+  .is-active
+    $color: lighten($color, 6%)
+    @if $color == white
+      background-color: #f4f4f4
+    @else
+      background-color: $color
+    box-shadow: shade($color, 18%) 0 2px 0
+    +top(1px)
+
+.waves-effect
+  +waves-effect($color: white)
+.waves-notransition
+  +transition(none #{"!important"})
+.waves-circle
+  +transform(translateZ(0))
+  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%)
+.waves-input-wrapper
+  border-radius: 0.2em
+  vertical-align: bottom
+  .waves-button-input
+    +position(relative, 1, top 0, left 0)
+.waves-circle
+  text-align: center
+  +size(2.5em)
+  line-height: 2.5em
+  border-radius: 50%
+  -webkit-mask-image: none
+.waves-block
+  display: block
+/* Firefox Bug: link not triggered */
+a.waves-effect .waves-ripple
+  z-index: -1

data/app/assets/stylesheets/modules/buttons/styles/_normal.sass

@@ -0,0 +1,42 @@
+=normal-button-color($color, $text-color: true)
+  background-color: $color
+  +background-image(linear-gradient(top, tint($color, 6%) 0%, shade($color, 6%) 100%))
+  +border(all, solid)
+  border-color: shade($color, 10%) shade($color, 16%) shade($color, 26%)
+  @if $text-color
+    color: luma_contrast_color($color)
+    text-shadow: if(luma_bright($color), lighten($color, 18%) 0 1px 0, darken($color, 18%) 0 -1px 0)
+    &:hover,
+    &.hover,
+    &.is-hover,
+    &:active,
+    &.active,
+    &.is-active
+      color: luma_contrast_color($color)
+
+=normal-button($color: blue)
+  +transition(.5s (background-image))
+  @if luma($color) > 90
+    +normal-button-color(#f2f2f2)
+  @else
+    +normal-button-color($color)
+  box-shadow: tint($color, 32%) 0 1px 0 inset, shade($color, 26%) 0 1px 0, rgba(black, .15) 0 2px 1px
+  &:hover,
+  &.hover,
+  &.is-hover
+    @if luma($color) > 90
+      +normal-button-color(lighten(#f2f2f2, 5%), false)
+    @else
+      +normal-button-color(lighten($color, 5%), false)
+  &:active,
+  &.active,
+  &.is-active
+    +top(1px)
+    @if luma($color) > 90
+      $color: lighten(#f2f2f2, 7%)
+      +normal-button-color($color, false)
+      box-shadow: darken($color, 12%) 0 1px 0 inset, rgba(white, .3) 0 1px 1px
+    @else
+      $color: lighten($color, 7%)
+      +normal-button-color($color, false)
+      box-shadow: darken($color, 12%) 0 1px 0 inset, rgba(white, .3) 0 1px 1px

data/app/assets/stylesheets/modules/navs/_tabs-nav.sass

@@ -0,0 +1,38 @@
+$tabs-nav-border-color: black !default
+$tabs-nav-background-color: white !default
+$tabs-nav-border-width: 2px !default
+$tabs-nav-font-size: 16px !default
+$tabs-nav-item-gutter: 8px !default
+$tabs-nav-font-color: black !default
+$tabs-nav-current-font-color: red !default
+
+.tabs-nav__items
+  font-size: 0
+  position: relative
+  &:before
+    content: ""
+    display: block
+    +block-size(100% $tabs-nav-border-width)
+    background-color: $tabs-nav-border-color
+    +position(absolute, left 0, bottom 0)
+.tabs-nav__item
+  +inline-block(bottom)
+  +rem('margin-right', 8px)
+  &:last-child
+    margin-right: 0
+.tabs-nav__link
+  +block-link
+  +border(top horizontal, $tabs-nav-border-width solid $tabs-nav-border-color)
+  +rem('padding-bottom', $tabs-nav-border-width)
+  +text-block($tabs-nav-font-size round($tabs-nav-font-size*2.6), center $tabs-nav-font-color)
+  +padding(horizontal, $tabs-nav-font-size*1.6)
+  position: relative
+  &:before
+    display: block
+    +block-size(100% $tabs-nav-border-width)
+    background-color: $tabs-nav-background-color
+    +position(absolute, left 0, bottom 0)
+  &.is-current
+    color: $tabs-nav-current-font-color
+    &:before
+      content: ""

data/app/assets/stylesheets/options/amazlet/_amazlet.sass

@@ -0,0 +1,32 @@
+$text-color: $black !default
+
+.amazlet-box
+  +rem('margin-bottom', 32px, !important)
+  .amazlet-image
+    float: none !important
+    +rem('margin', 0 0 16px, !important)
+    a[target="_blank"]
+      &:after
+        content: none
+    img
+      max-width: 100%
+      +rem('width', 260px)
+      display: block
+      +margin(horizontal, auto)
+      margin-bottom: 0 !important
+.amazlet-info
+  text-align: center
+.amazlet-name
+  a
+    text-decoration: none
+    color: $text-color
+.amazlet-detail
+  +rem('font-size', 12px)
+  +rem('margin-bottom', 8px, !important)
+.amazlet-sub-info
+  float: none !important
+  text-align: right
+.amazlet-link
+  display: none
+.amazlet-powered-date
+  display: none !important

data/app/assets/stylesheets/options/glitch/_glitch.sass

@@ -0,0 +1,31 @@
++keyframes(noise-anim)
+  $steps: 20
+  @for $i from 0 through $steps
+    #{percentage($i * 1 / $steps)}
+      clip: rect(random(100) + px, 9999px, random(100) + px, 0)
++keyframes(noise-anim-2)
+  $steps: 20
+  @for $i from 0 through $steps
+    #{percentage($i * 1 / $steps)}
+      clip: rect(random(100) + px, 9999px, random(100) + px, 0)
+
+=glitch($cl: white, $bg-col: black)
+  position: relative
+  overflow: hidden
+  display: inline-block
+  color: $cl
+  &:after,
+  &:before
+    content: attr(data-text)
+    color: $cl
+    background-color: $bg-col
+    overflow: hidden
+    clip: rect(0, 900px, 0, 0)
+  &:after
+    +position(absolute, left 1px, top 0)
+    +rem('text-shadow', -1px 0 0 rgba(red, 0.4))
+    +animation(noise-anim 2s infinite linear alternate-reverse)
+  &:before
+    +position(absolute, left -1px, top 0)
+    +rem('text-shadow', 1px 0 0 rgba(blue, 0.4))
+    +animation(noise-anim-2 3s infinite linear alternate-reverse)

data/app/assets/stylesheets/options/web-fonts/_cousine.sass

@@ -0,0 +1,12 @@
+@import url(//fonts.googleapis.com/css?family=Cousine:400,700,400italic,700italic)
+
+=cousine($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'Cousine'
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_droid-sans.sass

@@ -0,0 +1,11 @@
+@import url(//fonts.googleapis.com/css?family=Droid+Sans:400,700)
+=droid-sans($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'Droid Sans', sans-serif
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_font-awsome.sass

@@ -0,0 +1,17 @@
+=fa($icon: null)
+  display: inline-block
+  font-family: FontAwesome
+  font-style: normal
+  font-weight: normal
+  line-height: 1
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  content: "#{$icon}"
+
+=fa-icon($icon: '\f105', $size: 16px 12px, $options: null, $position1:null, $position2: null)
+  &:before
+    +fa($icon)
+    @if $position1
+      +position(absolute, if($position1, $position1, null), if($position2, $position2, null))
+    @if $size
+      +text-block($size, $options)

data/app/assets/stylesheets/options/web-fonts/_icomoon.sass

@@ -0,0 +1,10 @@
+=icomoon
+  font-family: 'icomoon'
+  speak: none
+  font-style: normal
+  font-weight: normal
+  font-variant: normal
+  text-transform: none
+  line-height: 1
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale

data/app/assets/stylesheets/options/web-fonts/_inconsolata.sass

@@ -0,0 +1,11 @@
+@import url(//fonts.googleapis.com/css?family=Inconsolata:400,700)
+=inconsolata($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'Inconsolata', monospace
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_lato.sass

@@ -0,0 +1,11 @@
+@import url(//fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic)
+=lato($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'Lato', sans-serif
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_merriweather-sans.sass

@@ -0,0 +1,11 @@
+@import url(//fonts.googleapis.com/css?family=Merriweather+Sans:400,800,300,300italic,400italic,700italic,700,800italic)
+=merriweather-sans($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'Merriweather Sans', sans-serif
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_montserrat.sass

@@ -0,0 +1,12 @@
+@import url(//fonts.googleapis.com/css?family=Montserrat:400,700)
+// 備考:モントセラト（モントセラート、モンセラット）と読む
+=montserrat($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'Montserrat', sans-serif
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_old-standard.sass

@@ -0,0 +1,11 @@
+@import url(//fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic,700)
+=old-standard($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'Old Standard TT', serif
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_open-sans.sass

@@ -0,0 +1,11 @@
+@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800)
+=open-sans($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'Open Sans', sans-serif
+  font-weight: $fw
+  @if not $ls == 0
+    +rem('letter-spacing', $ls)
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_podkova.sass

@@ -0,0 +1,11 @@
+@import url(//fonts.googleapis.com/css?family=Podkova:400,700)
+=podkova($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'Podkova', serif
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_pt-sans.sass

@@ -0,0 +1,11 @@
+@import url(//fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic)
+=pt-sans($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'PT Sans', sans-serif
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_raleway.sass

@@ -0,0 +1,11 @@
+@import url(//fonts.googleapis.com/css?family=Raleway:400,900,100,200,300,500,600,700,800)
+=raleway($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'Raleway', sans-serif
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_roboto-condensed.sass

@@ -0,0 +1,12 @@
+@import url(//fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300)
+=roboto-condensed($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // 300 400 700
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'Roboto Condensed', sans-serif
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_roboto.sass

@@ -0,0 +1,11 @@
+@import url(//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900)
+=roboto($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'Roboto', sans-serif
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_satisfy.sass

@@ -0,0 +1,12 @@
+@import url(//fonts.googleapis.com/css?family=Satisfy)
+=satisfy($fw: null, $ls: null, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'Satisfy', cursive
+  @if $fw
+    font-weight: $fw
+  @if $ls
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_source-code-pro.sass

@@ -0,0 +1,12 @@
+@import url(//fonts.googleapis.com/css?family=Source+Code+Pro:200,300,400,500,600,700,900)
+// 備考:Adobeの等幅フォント
+=source-code-pro($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'Source Code Pro', monospace
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_source-sans-pro.sass

@@ -0,0 +1,12 @@
+@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic)
+// 備考:Adobeのsans-serif
+=source-sans-pro($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'Source Sans Pro', sans-serif
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_special-elite.sass

@@ -0,0 +1,11 @@
+@import url(//fonts.googleapis.com/css?family=Special+Elite)
+=special-elite($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'Special Elite', cursive
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_tauri.sass

@@ -0,0 +1,11 @@
+@import url(//fonts.googleapis.com/css?family=Tauri)
+=tauri($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  font-family: 'Tauri', sans-serif
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility
+    

data/app/assets/stylesheets/options/web-fonts/_ubuntu-mono.sass

@@ -0,0 +1,11 @@
+@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic)
+=ubuntu-mono($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'Ubuntu Mono', monospace
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_ubuntu.sass

@@ -0,0 +1,11 @@
+@import url(//fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic)
+=ubuntu($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'Ubuntu', sans-serif
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_varela-round.sass

@@ -0,0 +1,12 @@
+// ヒラギノ丸を使うときに使う
+@import url(//fonts.googleapis.com/css?family=Varela+Round)
+=varela-round($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'Varela Round', sans-serif
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/options/web-fonts/_vt323.sass

@@ -0,0 +1,11 @@
+@import url(//fonts.googleapis.com/css?family=VT323)
+=inconsolata($fw: 400, $ls: 0, $fs: null, $tx-rendering: true)
+  // $fw: フォントの太さ, $ls: 字間, $fs: フォントスタイル
+  font-family: 'VT323', monospace
+  font-weight: $fw
+  @if not $ls == 0
+    letter-spacing: $ls
+  @if (not $fs == null)
+    font-style: italic
+  @if $tx-rendering
+    text-rendering: optimizelegibility

data/app/assets/stylesheets/settings/functions/_animation.sass

@@ -0,0 +1,90 @@
+@function time($value)
+  @if unit_number($value) and unit($value) == 's'
+    @return true
+  @else
+    @return null
+
+@function timing_function($value)
+  @if string($value)
+    @if $value == 'ease' or $value == 'linear' or $value == 'ease-in' or $value == 'ease-out' or $value == 'ease-in-out' or str-slice($value, 1, 12) == 'cubic-bezier'
+      @return true
+    @else
+      @return null
+  @else
+    @return null
+
+@function delay($value)
+  @if string($value) and str-slice($value, 1, 1) == '/' and str-slice($value, -1, -1) == 's'
+    @return str-slice($value, 2)
+  @else
+    @return null
+
+//////////////////
+// transition
+//////////////////
+
+@function transition_duration($value)
+  @return time($value)
+
+@function transition_timing_function($value)
+  @return timing_function($value)
+
+@function transition_delay($value)
+  @return delay($value)
+
+@function transition-property($value)
+  @if string($value)
+    @if not transition_timing_function($value) or not transition_duration($value) or not transition_delay($value)
+      @return true
+    @else
+      @return null
+  @else if list($value)
+    @return true
+  @else
+    @return null
+
+//////////////////
+// animation
+//////////////////
+
+@function animation_duration($value)
+  @return time($value)
+
+@function animation_timing_function($value)
+  @return timing_function($value)
+
+@function animation_delay($value)
+  @return delay($value)
+
+@function animation_iteration_count($value)
+  @if unitless_number($value) or (string($value) and $value == 'infinite')
+    @return true
+  @else
+    @return null
+
+@function animation_direction($value)
+  @if string($value) and ($value == 'normal' or $value == 'alternate')
+    @return true
+  @else
+    @return null
+
+@function animation_fill_mode($value)
+  @if string($value) and ($value == 'nonel' or $value == 'forwards' or $value == 'backwards' or $value == 'both')
+    @return true
+  @else
+    @return null
+
+@function animation_play_state($value)
+  @if string($value) and ($value == 'running' or $value == 'paused')
+    @return true
+  @else
+    @return null
+
+@function animation_name($value)
+  @if string($value)
+    @if animation_timing_function($value) or animation_duration($value) or animation_delay($value) or animation_iteration_count($value) or animation_direction($value) or animation_fill_mode($value) or animation_play_state($value)
+      @return null
+    @else
+      @return true
+  @else
+    @return null