oulu 0.9.11 → 0.10.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 333991ccb6e417ab61ede08048ba4f1fdc0a4edc
-  data.tar.gz: 24075b51a44d10c3f20e29fc20676a7ab49671e8
+  metadata.gz: 6f8bb84e1c041c792b9e404d28fbd91a9d9cabd0
+  data.tar.gz: caa87c2362a7b24ba9e979f38c74cbe58fa9f7ef
 SHA512:
-  metadata.gz: b8f96857cb242c8533a09767068e424833397e266ba6ed557e34dc6947ca87aca23ae889c377ffbbfe44eb16c9bc9cef013cc0e59ef9b1318cd233d2e2236dfe
-  data.tar.gz: 29ecccb970ffdbb90ad437aa28ada0a7934921624b504d43d5dc38a3ec6938fb52f9eedc1ad80b3c0fdc32c5b01746e36fbcf604c6e56c6312ee4eeb1269dffe
+  metadata.gz: 43c2a621b4d0b4aee61fca2f43af13188d649f533544d987865ae6726e02c9d758ba8f2d823c9e381f2f17a799e4ba8653edd58087b68680a7c7c9ad05c436c5
+  data.tar.gz: 13e21d28e2b2bf0bc0cc71aa7518bb87860426be47d7c464293d3b3871bdb4a7a27db685c57bf8de8f4b4cef4671004cd1d1492aa263f72b8e4518294c5df769

data/app/assets/stylesheets/_oulu-base.sass

@@ -2,19 +2,11 @@
 //settings
 //////////////
 
-// bourbon
-///////////////////
-
-@import bourbon
-
-// variables
-///////////////////
-
-@import settings/variables/default
-
 // functions
 ///////////////////
+
 @import settings/functions/math
+@import settings/functions/timing
 @import settings/functions/list
 @import settings/functions/number
 @import settings/functions/string
@@ -31,6 +23,13 @@
 @import settings/functions/animation
 @import settings/functions/display
 
+// variables
+///////////////////
+
+@import settings/variables/default
+@import settings/variables/modules
+
+
 // mixins
 ///////////////////
 

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

@@ -2,12 +2,12 @@
   +inline-block(middle)
   cursor: pointer
   text-align: center
-  +user-select(none)
+  user-select: none
   touch-action: manipulation
   text-decoration: none
   -webkit-tap-highlight-color: transparent
 
-=button-size($size, $border-width: 0, $border-radius: 4px)
+=button-size($size, $border-width: false, $border-radius: 4px)
   $font-size: ""
   @if $size == 'xs'
     $font-size: $xs-button-font-size
@@ -19,14 +19,15 @@
     $font-size: $lg-button-font-size
   @else if $size == 'xl'
     $font-size: $xl-button-font-size
-  $height: round($font-size * 2 + $font-size/2.2)
+  $button-height: round($font-size * 2.5 - if($border-width, $border-width, 0) * 2)
   @if $border-width
     +border(all, $border-width)
   @else
     $border-width: 0
-  +text-block($font-size $height - ($border-width*2))
-  height: $height
-  +padding(horizontal, $height/1.6)
+  $vertical-padding: ($button-height - round($font-size * 1.45) - ($border-width* 2)) / 2
+  +padding(vertical, $vertical-padding)
+  +text-block($font-size 1.45)
+  +padding(horizontal, $button-height/1.6)
   @if $border-radius
     +border-radius($border-radius)
   @if $font-size > 12px
@@ -50,11 +51,67 @@
     position: relative
     i,
     .is-button-icon
-      +position(absolute, left $height/2, top 0)
-      line-height: $height - ($border-width*2)
+      +position(absolute, left $button-height/2, top 0)
+      line-height: $button-height - ($border-width*2)
     input
-      +padding(horizontal, ($height + if($font-size > 28, $font-size/4, $font-size/3)) $height/2)
-      height: $height - ($border-width*2)
+      +padding(horizontal, ($button-height + if($font-size > 28, $font-size/4, $font-size/3)) $button-height/2)
+      height: $button-height - ($border-width*2)
+  &.is-dummy-select
+    $icon-width: round($font-size * 2.7)
+    $icon-size: round($font-size * 1.3)
+    $button-height: $button-height
+    padding-left: $icon-width
+    &:before
+      +fa("\f0d7")
+      +position(absolute, left 0, top 0)
+      border-right: 1px solid shade($secondary, 15%)
+      +text-block($icon-size $button-height, center shade($secondary, 55%))
+      +size($icon-width $button-height)
+  &.is-select
+    padding: 0
+    $icon-width: round($font-size * 2.7)
+    $icon-size: round($font-size * 1.3)
+    position: relative
+    &:after
+      +fa("\f0d7")
+      +position(absolute, right 0, top 0 bottom 0, 0)
+      +text-block($icon-size $button-height, center)
+      +size($icon-width null)
+    select
+      padding: 0 (round($font-size * 1.4) + $icon-width) 0 round($font-size * 1.4)
+      font-size: inherit
+      +padding(vertical, $vertical-padding)
+      +position(relative, 1)
+  &.is-radio,
+  &.is-checkbox
+    $icon-space: round($font-size * 2.2)
+    padding-left: $icon-space
+    position: relative
+    &:before
+      content: ""
+      display: block
+      +position(absolute, left 16px, top 50%)
+      $check-base-size: round($font-size * .9)
+      +size($check-base-size)
+      margin-top: round($check-base-size / -2)
+    &:after
+      $check-icon-size: round($font-size * 1.4)
+      +fa("\f00c")
+      opacity: 0
+      +size($check-icon-size)
+      +text-block($check-icon-size 1, $checked-icon)
+      text-shadow: rgba(black, .4) 0 1px 1px
+      +position(absolute, left 14px, top 50%)
+      margin-top: round($check-icon-size / -2 * 1.2)
+
+  // button-grounp
+  .is-button-group >li &
+    border-radius: 0
+  .is-button-group >li:first-child &
+    border-radius: $border-radius 0 0 $border-radius
+  .is-button-group  >li:last-child &
+    border-radius: 0 $border-radius $border-radius 0
+
 
 =button-group
   .is-button-group

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

@@ -1,33 +1,57 @@
 // button option
 [class^="is-button"]
-  &.is-block
-    display: block
-    width: 100%
   &.has-image
     height: auto
   .is-button-note
     +inline-block
     font-size: 12px
     margin-left: 6px
+  &.is-block
+    display: block
+    width: 100%
+    select
+      display: block
+      width: 100%
+  &.is-radio,
+  &.is-checkbox
+    display: block
+    input
+      opacity: 0
+      +position(absolute)
+    &.is-checked
+      &:after
+        opacity: 1
+  &.is-radio
+    &:before
+      border-radius: 50%
+  &.is-checkbox
+    &:before
+      border-radius: 3px
+  &.is-no-move
+    &:active,
+    &.is-checked
+      top: 0
   &.is-disabled,
   &:disabled
     pointer-events: none
     cursor: default
     select
       cursor: default
+  &.is-select
+    select
+      vertical-align: middle
+      font-size: inherit
+      color: inherit
+      cursor: pointer
 
 // button-group
 .is-button-group
   font-size: 0
   >li
-    display: inline
+    display: inline-block
     letter-spacing: normal
     font-size: 0
-    [class^="is-button"]
-      border-radius: 0
-    &:first-child
-      [class^="is-button"]
-        +border-radius(left, 4px)
-    &:last-child
-      [class^="is-button"]
-        +border-radius(right, 4px)
+  @for $i from 1 through 12
+    &.is-#{$i}-items
+      >li
+        width: 100% / $i

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

@@ -1,7 +1,3 @@
-$button-sizes: xs, sm, md, lg, xl !default
-$button-color-names: default, primary, success, warning, danger !default
-$button-styles: normal, border, bold-border, flat-emboss, material, flat-round !default
-
 @import button-base
 
 // button styles
@@ -10,6 +6,7 @@ $button-styles: normal, border, bold-border, flat-emboss, material, flat-round !
 @import styles/flat-emboss
 @import styles/material
 @import styles/flat-round
+@import styles/super-bold-border
 
 @import button-helper
 
@@ -31,8 +28,11 @@ $button-styles: normal, border, bold-border, flat-emboss, material, flat-round !
     +button-size($size, false, false)
     +material-button($color)
   @else if $style == flat-round
-    +button-size($size, false, false)
+    +button-size($size, false, 1000px)
     +flat-round-button($color)
+  @else if $style == super-bold-border
+    +button-size($size, false, 3px)
+    +super-bold-border-button($color, $size)
   @each $option in $options
     @if $option == 'left'
       text-align: left
@@ -46,8 +46,8 @@ $button-styles: normal, border, bold-border, flat-emboss, material, flat-round !
   @each $button-color-name in $button-color-names
     @each $button-style in $button-styles
       .is-button-#{$button-style}-#{$button-size}-#{$button-color-name}
-        @if $button-color-name == default
-          $button-color: $default
+        @if $button-color-name == secondary
+          $button-color: $secondary
         @else if $button-color-name == primary
           $button-color: $primary
         @else if $button-color-name == success
@@ -56,4 +56,6 @@ $button-styles: normal, border, bold-border, flat-emboss, material, flat-round !
           $button-color: $warning
         @else if $button-color-name == danger
           $button-color: $danger
+        @else if $button-color-name == info
+          $button-color: $info
         +button($button-style, $button-size, $button-color)

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

@@ -1,6 +1,6 @@
 =border-button($color)
   +border(all, solid)
-  @if $color == $default
+  @if $color == $secondary
     $color: $root-color
   @else
     color: $color
@@ -13,12 +13,36 @@
   &.hover,
   &.is-hover
     color: $color
-    background-color: rgba($color, .1)
+    background-color: rgba($color, .2)
   &:active,
   &.active,
   &.is-active
-    color: $color
-    background-color: rgba($color, .3)
-  &.is-checked
     color: luma_contrast_color($color)
     background-color: $color
+
+  // radio & checkbos
+  &.is-radio,
+  &.is-checkbox
+    &:before
+      box-shadow: $color 0 0 0 1px
+
+  // checked
+  &.is-checked
+    color: luma_contrast_color($checked)
+    background-color: $checked
+    border-color: shade($checked, 20%)
+    &:before
+      box-shadow: luma_contrast_color($checked) 0 0 0 1px
+
+  // select
+  &.is-select
+    &:after
+      color: $color
+      border-left: 1px solid $color
+
+  // disabled
+  &.is-disabled,
+  &:disabled
+    $color: if(luma_bright($color), shade($color, 20%), tint($color, 20%))
+    color: rgba($color, .7)
+    border-color: $color

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

@@ -1,5 +1,5 @@
 =flat-emboss-button($color: blue)
-  +transition(.5s (background-image))
+  transition: .5s background-image
   background-color: $color
   color: luma_contrast_color($color)
   box-shadow: shade($color, 18%) 0 3px 0
@@ -22,3 +22,38 @@
       background-color: $color
     box-shadow: shade($color, 18%) 0 2px 0
     +top(1px)
+
+  // radio & checkbos
+  &.is-radio,
+  &.is-checkbox
+    &:before
+      box-shadow: rgba(black, 0.3) 0 1px 1px inset, #{if(luma_bright($color), shade($color, 40%), tint($color, 20%))} 0 0 0 1px
+      background-color: #{if(luma_bright($color), shade($color, 30%), tint($color, 30%))}
+
+  // checked
+  &.is-checked
+    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($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
+    &:after
+      color: rgba(luma_contrast_color($color), .7)
+      border-left: 1px solid
+      border-left-color: #{if(luma_bright($color), shade($color, 20%), tint($color, 20%))}
+
+  // disabled
+  &.is-disabled,
+  &:disabled
+    $color: if(luma_bright($color), shade($color, 20%), tint($color, 20%))
+    background-color: rgba($color, 7)
+    color: rgba(luma_contrast_color($color), .7)
+    border-color: shade($color, 10%) shade($color, 16%) shade($color, 26%)
+    text-shadow: none
+    box-shadow: none

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

@@ -1,9 +1,8 @@
 =flat-round-button($color: blue)
-  +transition(.5s (background-image))
+  transition: .5s (background-image)
   background-color: $color
   color: luma_contrast_color($color)
   font-weight: bold
-  border-radius: 1000px
   &:hover,
   &.hover,
   &.is-hover
@@ -21,3 +20,33 @@
     @else
       background-color: $color
     +top(1px)
+
+  // radio & checkbos
+  &.is-radio,
+  &.is-checkbox
+    &:before
+      box-shadow: rgba(black, 0.2) 0 1px 1px inset
+      background-color: #{if(luma_bright($color), shade($color, 20%), tint($color, 20%))}
+
+  // checked
+  &.is-checked
+    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($checked), shade($checked, 40%), tint($checked, 40%))}
+
+  // select
+  &.is-select
+    &:after
+      color: rgba(luma_contrast_color($color), .7)
+      border-left: 1px solid
+      border-left-color: #{if(luma_bright($color), shade($color, 20%), tint($color, 20%))}
+
+  // disabled
+  &.is-disabled,
+  &:disabled
+    $color: if(luma_bright($color), shade($color, 20%), tint($color, 20%))
+    background-color: rgba($color, 7)
+    color: rgba(luma_contrast_color($color), .7)

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

@@ -2,7 +2,7 @@
   +position(relative, 1)
   overflow: hidden
   will-change: opacity, transform
-  +transition(all .3s ease-out)
+  transition: all .3s ease-out
   .waves-ripple
     position: absolute
     border-radius: 50%
@@ -28,13 +28,13 @@
       background-color: lighten($color, 45%)
     @else
       background-color: darken($color, 20%)
-    +transition(all 0.7s ease-out)
+    transition: all 0.7s ease-out
     transition-property: transform, opacity
-    +transform(scale(0))
+    transform: scale(0)
     pointer-events: none
 
 =material-button($color: blue)
-  +transition(.2s ease-out)
+  transition: .2s ease-out
   +border-radius(2px)
   background-color: $color
   color: luma_contrast_color($color)
@@ -60,13 +60,19 @@
       background-color: $color
     box-shadow: shade($color, 18%) 0 2px 0
     +top(1px)
+  // disabled
+  &.is-disabled,
+  &:disabled
+    color: #9F9F9F
+    background-color: #DFDFDF
+    box-shadow: none
 
 .waves-effect
   +waves-effect($color: white)
 .waves-notransition
-  +transition(none #{"!important"})
+  transition: none !important
 .waves-circle
-  +transform(translateZ(0))
+  transform: translateZ(0)
   -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%)
 .waves-input-wrapper
   border-radius: .2em

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

@@ -1,7 +1,7 @@
 =normal-button-color($color, $root-color: true)
   background-color: $color
-  +background-image(linear-gradient(top, tint($color, 6%) 0%, shade($color, 6%) 100%))
-  +border(all, solid)
+  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
     color: luma_contrast_color($color)
@@ -15,11 +15,8 @@
       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)
+  transition: .5s (background-image)
+  +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,
@@ -40,3 +37,38 @@
       $color: lighten($color, 7%)
       +normal-button-color($color, false)
       box-shadow: darken($color, 12%) 0 1px 0 inset, rgba(white, .3) 0 1px 1px
+
+  // radio & checkbos
+  &.is-radio,
+  &.is-checkbox
+    &:before
+      box-shadow: rgba(black, 0.2) 0 1px 1px inset
+      background-color: #{if(luma_bright($color), shade($color, 20%), tint($color, 20%))}
+
+  // checked
+  &.is-checked
+    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($checked), tint($checked, 20%), shade($checked, 20%))}
+
+  // select
+  &.is-select
+    &:after
+      color: rgba(luma_contrast_color($color), .7)
+      border-left: 1px solid
+      border-left-color: #{if(luma_bright($color), shade($color, 20%), tint($color, 20%))}
+
+  // disabled
+  &.is-disabled,
+  &:disabled
+    $color: if(luma_bright($color), shade($color, 20%), tint($color, 20%))
+    background-color: rgba($color, 7)
+    color: rgba(luma_contrast_color($color), .7)
+    border-color: shade($color, 10%) shade($color, 16%) shade($color, 26%)
+    text-shadow: none
+    box-shadow: none

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

@@ -0,0 +1,63 @@
+=super-bold-border-button($color, $size)
+  $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: luma_contrast_color($color)
+  box-shadow: rgba(black, 0.6) 0 1px 0 1px
+  &:link,
+  &:visited
+    color: luma_contrast_color($color)
+  &:hover,
+  &.hover,
+  &.is-hover
+    $color: if(luma_bright($color), shade($color, 20%), tint($color, 20%))
+    color: luma_contrast_color($color)
+    background-color: $color
+  &:active,
+  &.active,
+  &.is-active
+    color: luma_contrast_color($color)
+    background-color: $color
+    +top(1px)
+    box-shadow: none
+
+  // radio & checkbos
+  &.is-radio,
+  &.is-checkbox
+    &:before
+      box-shadow: $default-text 0 0 0 2px
+
+  // checked
+  &.is-checked
+    color: luma_contrast_color($checked)
+    background-color: $checked
+    +top(1px)
+    box-shadow: none
+    &:before
+      box-shadow: luma_contrast_color($checked) 0 0 0 2px
+
+  // select
+  &.is-select
+    &:after
+      color: rgba(luma_contrast_color($color), .7)
+      border-left: 2px solid
+      border-left-color: rgba($default-text, .7)
+
+  // disabled
+  &.is-disabled,
+  &:disabled
+    $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/{options → modules}/glitch/_glitch.sass

@@ -1,9 +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/navs/_tabs-nav.sass

@@ -1,11 +1,3 @@
-$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