oulu 0.19.1 → 1.0.0.beta1

data/app/assets/stylesheets/modules/buttons/_button-helper.sass

@@ -1,20 +1,20 @@
 // button option
-[class*="is-button"]
-  +button-base
-  white-space: nowrap
+[class^="is-button"]
   &.has-image
     height: auto
-  &.is-block-sm-down
-    +media-breakpoint-down(sm)
-      display: flex
-      width: 100%
+  .is-button-note
+    +inline-block
+    font-size: 12px
+    margin-left: 6px
   &.is-block
-    display: flex
+    display: block
     width: 100%
-    +padding(horizontal, 0)
+    select
+      display: block
+      width: 100%
   &.is-radio,
   &.is-checkbox
-    display: flex
+    display: block
     input
       opacity: 0
       +position(absolute)
@@ -26,9 +26,7 @@
       border-radius: 50%
   &.is-checkbox
     &:before
-      border-radius: .1875rem
-  &.is-text-align-left
-    justify-content: flex-start
+      border-radius: 3px
   &.is-no-move
     &:active,
     &.is-checked
@@ -45,37 +43,12 @@
       font-size: inherit
       color: inherit
       cursor: pointer
-  &.is-multi-lines
-    height: auto
-    line-height: 1.45
-  .is-button-note
-    +inline-block
-    font-size: .75rem
-    margin-left: .375rem
-  select
-    width: 100%
-
-  &[class*="-xs-"]
-    font-size: $xs-button-font-size
-  &[class*="-sm-"]
-    font-size: $sm-button-font-size
-  &[class*="-md-"]
-    font-size: $md-button-font-size
-  &[class*="-lg-"]
-    font-size: $lg-button-font-size
-  &[class*="-xl-"]
-    font-size: $xl-button-font-size
-
-button[class*="is-button"]
-  display: inline-block
-  &.is-block
-    display: block
 
 // button-group
 .is-button-group
   font-size: 0
   >li
-    display: inline-flex
+    display: inline-block
     letter-spacing: normal
     font-size: 0
   @for $i from 1 through 12

data/app/assets/stylesheets/modules/buttons/_buttons.sass

@@ -3,32 +3,26 @@
 // button styles
 @import styles/normal
 @import styles/border
-@import styles/flat
 @import styles/flat-emboss
 @import styles/material
 @import styles/flat-round
 @import styles/super-bold-border
-@import styles/standard
-@import styles/simple
 
 @import button-helper
-@import button-sizes
 
 =button($style, $size, $color, $options: false)
+  +button-base
   @if $style == normal
-    +button-size($size, .0625rem, .25rem)
+    +button-size($size, 1px, 4px)
     +normal-button($color)
   @else if $style == border
-    +button-size($size, .0625rem, .25rem)
+    +button-size($size, 1px, 4px)
     +border-button($color)
   @else if $style == bold-border
-    +button-size($size, .125rem, .5rem)
+    +button-size($size, 2px, 8px)
     +border-button($color)
-  @else if $style == flat
-    +button-size($size, .0625rem, .25rem)
-    +flat-button($color)
   @else if $style == flat-emboss
-    +button-size($size, false, .25rem)
+    +button-size($size, false, 4px)
     +flat-emboss-button($color)
   @else if $style == material
     +button-size($size, false, false)
@@ -37,14 +31,8 @@
     +button-size($size, false, 1000px)
     +flat-round-button($color)
   @else if $style == super-bold-border
-    +button-size($size, .25rem, .375rem)
+    +button-size($size, false, 3px)
     +super-bold-border-button($color, $size)
-  @else if $style == standard
-    +button-size($size, .0625rem, .25rem)
-    +standard-button($color)
-  @else if $style == simple
-    +button-size($size, false, .1875rem)
-    +simple-button($color)
   @each $option in $options
     @if $option == 'left'
       text-align: left
@@ -70,8 +58,4 @@
           $button-color: $danger
         @else if $button-color-name == info
           $button-color: $info
-        @else if $button-color-name == twitter
-          $button-color: $twitter
-        @else if $button-color-name == facebook
-          $button-color: $facebook
         +button($button-style, $button-size, $button-color)

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

@@ -10,11 +10,13 @@
   &:visited
     color: $color
   &:hover,
-  &.hover
+  &.hover,
+  &.is-hover
     color: $color
     background-color: rgba($color, .2)
   &:active,
-  &.active
+  &.active,
+  &.is-active
     color: luma_contrast_color($color)
     background-color: $color
 
@@ -26,11 +28,11 @@
 
   // checked
   &.is-checked
-    color: luma_contrast_color($button-checked-color)
-    background-color: $button-checked-color
-    border-color: shade($button-checked-color, 20%)
+    color: luma_contrast_color($checked)
+    background-color: $checked
+    border-color: shade($checked, 20%)
     &:before
-      box-shadow: luma_contrast_color($button-checked-color) 0 0 0 1px
+      box-shadow: luma_contrast_color($checked) 0 0 0 1px
 
   // select
   &.is-select

data/app/assets/stylesheets/modules/buttons/styles/_flat-emboss.sass

@@ -5,14 +5,16 @@
   box-shadow: shade($color, 18%) 0 3px 0
   text-shadow: if(luma_bright($color), lighten($color, 8%) 0 1px 0, darken($color, 8%) 0 -1px 0)
   &:hover,
-  &.hover
+  &.hover,
+  &.is-hover
     $color: lighten($color, 6%)
     @if luma($color) > 90
       background-color: #f2f2f2
     @else
       background-color: $color
   &:active,
-  &.active
+  &.active,
+  &.is-active
     $color: lighten($color, 6%)
     @if luma($color) > 90
       background-color: #f2f2f2
@@ -30,14 +32,14 @@
 
   // checked
   &.is-checked
-    color: luma_contrast_color($button-checked-color)
-    background-color: $button-checked-color
-    text-shadow: if(luma_bright($button-checked-color), lighten($button-checked-color, 8%) 0 1px 0, darken($button-checked-color, 8%) 0 -1px 0)
-    box-shadow: shade($button-checked-color, 18%) 0 2px 0
+    color: luma_contrast_color($checked)
+    background-color: $checked
+    text-shadow: if(luma_bright($checked), lighten($checked, 8%) 0 1px 0, darken($checked, 8%) 0 -1px 0)
+    box-shadow: shade($checked, 18%) 0 2px 0
     +top(1px)
     &:before
-      box-shadow: rgba(black, 0.3) 0 1px 1px inset, #{if(luma_bright($button-checked-color), shade($button-checked-color, 40%), tint($button-checked-color, 40%))} 0 0 0 1px
-      background-color: #{if(luma_bright($button-checked-color), shade($button-checked-color, 30%), tint($button-checked-color, 30%))}
+      box-shadow: rgba(black, 0.3) 0 1px 1px inset, #{if(luma_bright($checked), shade($checked, 40%), tint($checked, 40%))} 0 0 0 1px
+      background-color: #{if(luma_bright($checked), shade($checked, 30%), tint($checked, 30%))}
 
   // select
   &.is-select

data/app/assets/stylesheets/modules/buttons/styles/_flat-round.sass

@@ -4,14 +4,16 @@
   color: luma_contrast_color($color)
   font-weight: bold
   &:hover,
-  &.hover
+  &.hover,
+  &.is-hover
     $color: lighten($color, 6%)
     @if luma($color) > 90
       background-color: #f2f2f2
     @else
       background-color: $color
   &:active,
-  &.active
+  &.active,
+  &.is-active
     $color: lighten($color, 6%)
     @if luma($color) > 90
       background-color: #f2f2f2
@@ -28,12 +30,12 @@
 
   // checked
   &.is-checked
-    color: luma_contrast_color($button-checked-color)
-    background-color: $button-checked-color
+    color: luma_contrast_color($checked)
+    background-color: $checked
     +top(1px)
     &:before
       box-shadow: rgba(black, 0.3) 0 1px 1px inset
-      background-color: #{if(luma_bright($button-checked-color), shade($button-checked-color, 40%), tint($button-checked-color, 40%))}
+      background-color: #{if(luma_bright($checked), shade($checked, 40%), tint($checked, 40%))}
 
   // select
   &.is-select

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

@@ -42,7 +42,8 @@
   letter-spacing: .5px
   +waves-effect($color)
   &:hover,
-  .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
@@ -50,7 +51,8 @@
     @else
       background-color: $color
   &:active,
-  .active
+  .active,
+  .is-active
     $color: lighten($color, 6%)
     @if $color == white
       background-color: #f4f4f4

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

@@ -1,6 +1,6 @@
 =normal-button-color($color, $root-color: true)
   background-color: $color
-  background-image: linear-gradient(to bottom, tint($color, 6%) 0%, shade($color, 6%) 100%)
+  background-image: linear-gradient(top, tint($color, 6%) 0%, shade($color, 6%) 100%)
   border-style: solid
   border-color: shade($color, 10%) shade($color, 16%) shade($color, 26%)
   @if $root-color
@@ -8,8 +8,10 @@
     text-shadow: if(luma_bright($color), lighten($color, 18%) 0 1px 0, darken($color, 18%) 0 -1px 0)
     &:hover,
     &.hover,
+    &.is-hover,
     &:active,
-    &.active
+    &.active,
+    &.is-active
       color: luma_contrast_color($color)
 
 =normal-button($color: blue)
@@ -17,13 +19,15 @@
   +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
+  &.hover,
+  &.is-hover
     @if luma($color) > 90
       +normal-button-color(lighten(#f2f2f2, 5%), false)
     @else
       +normal-button-color(lighten($color, 5%), false)
   &:active,
-  &.active
+  &.active,
+  &.is-active
     +top(1px)
     @if luma($color) > 90
       $color: lighten(#f2f2f2, 7%)
@@ -43,14 +47,14 @@
 
   // checked
   &.is-checked
-    color: luma_contrast_color($button-checked-color)
-    +normal-button-color($button-checked-color, true)
-    border-color: shade($button-checked-color, 10%) shade($button-checked-color, 16%) shade($button-checked-color, 26%)
-    box-shadow: darken($button-checked-color, 12%) 0 1px 0 inset, rgba(white, .3) 0 1px 1px
+    color: luma_contrast_color($checked)
+    +normal-button-color($checked, true)
+    border-color: shade($checked, 10%) shade($checked, 16%) shade($checked, 26%)
+    box-shadow: darken($checked, 12%) 0 1px 0 inset, rgba(white, .3) 0 1px 1px
     +top(1px)
     &:before
       box-shadow: rgba(black, 0.2) 0 1px 1px inset
-      background-color: #{if(luma_bright($button-checked-color), tint($button-checked-color, 20%), shade($button-checked-color, 20%))}
+      background-color: #{if(luma_bright($checked), tint($checked, 20%), shade($checked, 20%))}
 
   // select
   &.is-select
@@ -64,7 +68,6 @@
   &:disabled
     $color: if(luma_bright($color), shade($color, 20%), tint($color, 20%))
     background-color: rgba($color, 7)
-    background-image: none
     color: rgba(luma_contrast_color($color), .7)
     border-color: shade($color, 10%) shade($color, 16%) shade($color, 26%)
     text-shadow: none

data/app/assets/stylesheets/modules/buttons/styles/_super-bold-border.sass

@@ -1,23 +1,32 @@
 =super-bold-border-button($color, $size)
-  $border-width: .25rem !default
-  $text-color: luma_contrast_color($color)
+  $border-width: ""
+  @if $size == 'xs'
+    $border-width: $xs-button-font-size/3
+  @else if $size == 'sm'
+    $border-width: $sm-button-font-size/3
+  @else if $size == 'md'
+    $border-width: $md-button-font-size/3
+  @else if $size == 'lg'
+    $border-width: $lg-button-font-size/3
+  @else if $size == 'xl'
+    $border-width: $xl-button-font-size/3
+  border: solid $default-text $border-width
   background-color: $color
-  color: $text-color
-  border: solid $border-width $default-text
-  box-shadow: rgba(black, .4) 0 .0625rem 0 0
-  transition: background-color .3s ease-in, box-shadow .3s ease-in
-  font-weight: 800
+  color: luma_contrast_color($color)
+  box-shadow: rgba(black, 0.6) 0 1px 0 1px
   &:link,
   &:visited
-    color: $text-color
+    color: luma_contrast_color($color)
   &:hover,
-  &.hover
-    $color: if(luma_bright($color), shade($color, 15%), tint($color, 15%))
-    color: $text-color
+  &.hover,
+  &.is-hover
+    $color: if(luma_bright($color), shade($color, 20%), tint($color, 20%))
+    color: luma_contrast_color($color)
     background-color: $color
   &:active,
-  &.active
-    color: $text-color
+  &.active,
+  &.is-active
+    color: luma_contrast_color($color)
     background-color: $color
     +top(1px)
     box-shadow: none
@@ -26,16 +35,16 @@
   &.is-radio,
   &.is-checkbox
     &:before
-      box-shadow: $default-text 0 0 0 .125rem
+      box-shadow: $default-text 0 0 0 2px
 
   // checked
   &.is-checked
-    color: $text-color
-    background-color: $button-checked-color
+    color: luma_contrast_color($checked)
+    background-color: $checked
     +top(1px)
     box-shadow: none
     &:before
-      box-shadow: luma_contrast_color($button-checked-color) 0 0 0 2px
+      box-shadow: luma_contrast_color($checked) 0 0 0 2px
 
   // select
   &.is-select
@@ -47,7 +56,8 @@
   // disabled
   &.is-disabled,
   &:disabled
-    $color: if(luma_bright($color), shade($color, 15%), tint($color, 15%))
-    color: rgba($text-color, .7)
+    $color: if(luma_bright($color), shade($color, 20%), tint($color, 20%))
+    color: rgba(luma_contrast_color($color), .7)
     background-color: rgba($color, .7)
     border-color: rgba($default-text, .7)
+    box-shadow: none

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

@@ -1,10 +1,9 @@
-+keyframes(noise-anim)
+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)
+keyframes noise-anim-2
   $steps: 20
   @for $i from 0 through $steps
     #{percentage($i * 1 / $steps)}

data/app/assets/stylesheets/modules/glitch/_glitch.sass~organize-modules

@@ -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)
+    text-shadow: -1px 0 0 rgba(red, 0.4)
+    +animation(noise-anim 2s infinite linear alternate-reverse)
+  &:before
+    +position(absolute, left -1px, top 0)
+    text-shadow: 1px 0 0 rgba(blue, 0.4)
+    +animation(noise-anim-2 3s infinite linear alternate-reverse)

data/app/assets/stylesheets/modules/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/modules/web-fonts/_icomoon.sass

@@ -6,3 +6,5 @@
   font-variant: normal
   text-transform: none
   line-height: 1
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale

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-index($value, cubic-bezier)
+      @return true
+    @else
+      @return null
+  @else
+    @return null
+
+@function delay($value)
+  @if list($value) and nth($value, 1) == delay
+    @return true
+  @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

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

@@ -5,51 +5,33 @@
     @return null
 
 @function background_position($value)
-  @if list($value)
-    @if string(nth($value, 1)) and not str-index(nth($value, 1), '/')
-      @return true
-    @else if string(nth($value, 1)) and not str-index(nth($value, 1), '\/')
-      @return true
-    @else if number(nth($value, 1))
-      @return true
-    @else
-      @return null
+  @if list($value) and nth($value, 1) != size
+    @return true
   @else
     @return null
 
 @function background_size($value)
-  @if $value == auto or $value == contain or $value == cover
-    @return true
-  @else if list($value)
-    @if string(nth($value, 1)) and str-index(nth($value, 1), '\/')
-      @return ture
-    @else if string(nth($value, 1)) and str-index(nth($value, 1), '/')
-      @return ture
+  @if string($value)
+    @if $value == 'auto' or $value == 'contain' or $value == 'cover'
+      @return unquote('/') $value
     @else
       @return null
-  @else
-    @return null
-
-@function background_size_value($value)
-  @if background_size($value)
-    @if list($value)
-      @if string(nth($value, 1)) and str-index(nth($value, 1), '\/')
-        @return unquote(string-replace(nth($value, 1), '\\/', '/') + ' ' + nth($value, 2))
-      @else
-        @return unquote('/' + $value)
+  @else if list($value)
+    @if nth($value, 1) == size
+      @return unquote('/') nth($value, 2) nth($value, 3)
     @else
-      @return  unquote('/' + $value)
+      @return null
   @else
     @return null
 
 @function background_repeat($value)
-  @if $value == no-repeat or $value == repeat or $value == repeat-x or $value == repeat-y
+  @if $value == 'no-repeat' or $value == 'repeat' or $value == 'repeat-x' or $value == 'repeat-y'
     @return true
   @else
     @return null
 
 @function background_attachment($value)
-  @if $value == fixed or $value == scroll
+  @if $value == 'fixed' or $value == 'scroll'
     @return true
   @else
     @return null
@@ -70,7 +52,10 @@
     @return null
 
 @function background_clip($value)
-  @if $value == \"border" or $value == \"padding" or $value == \"content" or $value == \"text"
-    @return true
+  @if string($value)
+    @if $value == 'border' or $value == 'padding' or $value == 'content' or $value == 'text'
+      @return true
+    @else
+      @return null
   @else
     @return null