oulu 0.8.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: f8191edb3411886853b354607f9490bff19beb2e
+  data.tar.gz: ce22256b6e8d4aa0ecc68b4cef0363aea065b69d
+SHA512:
+  metadata.gz: 66ac48438ddf60beda788868ed15e74068f2ffbe6c26191e34f95861aab652f387187138e232692505284c0d484c9f38498b703789c91c0d89bf4ad5af47a95d
+  data.tar.gz: dba3350c9549b91ee25389228c0aed6c617b7155c10bc89745e54528a9572eeed4faefecbbbc81863932f841909ebc0791fea25aa6bb6875531ac073ad6b9185

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in middleman-assets.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2013 machida
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,15 @@
+# oulu
+
+oulu is a sass mixin libraly.
+
+## Usage
+
+[docs](http://oulu.github.io/)
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

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

@@ -0,0 +1,64 @@
+//////////////
+//settings
+//////////////
+
+// bourbon
+///////////////////
+
+@import bourbon
+
+// variables
+///////////////////
+
+@import settings/variables/default
+
+// functions
+///////////////////
+@import settings/functions/math
+@import settings/functions/list
+@import settings/functions/number
+@import settings/functions/string
+@import settings/functions/length
+@import settings/functions/map
+@import settings/functions/bool
+@import settings/functions/position
+@import settings/functions/text
+@import settings/functions/reverse
+@import settings/functions/color
+@import settings/functions/image
+@import settings/functions/background
+@import settings/functions/border
+@import settings/functions/animation
+@import settings/functions/display
+
+// mixins
+///////////////////
+
+@import settings/mixins/rem
+@import settings/mixins/basic-font
+@import settings/mixins/resets
+@import settings/mixins/text
+@import settings/mixins/positions
+@import settings/mixins/block
+@import settings/mixins/link
+@import settings/mixins/border
+@import settings/mixins/border-radius
+@import settings/mixins/table
+@import settings/mixins/list
+@import settings/mixins/overlay
+@import settings/mixins/balloon-tail
+@import settings/mixins/margin-padding
+@import settings/mixins/animation
+@import settings/mixins/grid/grid-framework
+@import settings/mixins/grid/grid
+@import settings/mixins/grid
+@import settings/mixins/responsive-utilities
+@import settings/mixins/background
+@import settings/mixins/line
+@import settings/mixins/image
+
+// initializers
+///////////////////
+
+@import settings/initializers/sanitize
+@import settings/initializers/reset

data/app/assets/stylesheets/_oulu.sass

@@ -0,0 +1,9 @@
+//////////////
+//settings
+//////////////
+
+// oulu-base
+@import oulu-base
+
+// helper-classes
+@import helpers/**/*

data/app/assets/stylesheets/helpers/_block.sass

@@ -0,0 +1,89 @@
+body
+  // layout
+  .has-no-gutter-grids
+    +grid(0)
+  .is-horizontal-center-block
+    display: block
+    +margin(horizontal, auto)
+
+  // clearfix
+  .is-clear
+    clear: both
+  .is-clearfix
+    +clearfix
+
+  // width
+  .is-max-width-100
+    width: 100%
+    display: block
+  .is-half
+    width: 50%
+
+  // float
+  .is-left
+    float: left
+  .is-right
+    float: right
+
+  // float
+  .is-float-left
+    float: left
+  .is-float-right
+    float: right
+
+  // block link
+  .is-block-link
+    display: block
+    text-decoration: none
+  .is-inline-block-link
+    display: inline-block
+    text-decoration: none
+  .is-clickable
+    cursor: pointer
+
+  // overflow
+  .is-scroll-x-wrapper
+    +overflow(auto hidden)
+    -webkit-overflow-scrolling: touch
+    width: 100%
+    position: relative
+  .is-overflow-visible
+    overflow: visible !important
+  .is-overflow-hidden
+    overflow: hidden
+
+  // position
+  .is-relative
+    position: relative
+  .is-fixed-default
+    +fixed(left 0, top 0)
+    width: 100%
+  .is-z-index-100
+    +position(relative, 100)
+
+  // vertical-align
+  .is-vertical-middle
+    vertical-align: middle !important
+  .is-vertical-top
+    vertical-align: top !important
+  .is-vertical-bottom
+    vertical-align: bottom !important
+
+  // display
+  .is-block
+    display: block
+  .is-display-none
+    display: none
+  .is-display-none-important
+    display: none !important
+  .is-inline-block
+    display: inline-block
+  .is-inline
+    display: inline
+  .is-table-row
+    display: table-row !important
+  .is-table-cell
+    display: table-cell !important
+  .is-inline-blocks
+    >*
+      display: inline-block

data/app/assets/stylesheets/helpers/_border.sass

@@ -0,0 +1,16 @@
+body
+  // border
+  .is-border-none
+    border: none
+  .is-horizontal-border-none
+    +border(horizontal, none)
+  .is-vertical-border-none
+    +border(vertical, none)
+  .is-border-left-none
+    border-left: none
+  .is-border-right-none
+    border-right: none
+  .is-border-top-none
+    border-top: none
+  .is-border-bottom-none
+    border-bottom: none

data/app/assets/stylesheets/helpers/_font-awsome.sass

@@ -0,0 +1,11 @@
+.fa-hatena
+  &:before
+    content: "B!"
+    font-family: Verdana
+    font-weight: bold
+.fa-triangle-o:before
+  content: "\0025b3"
+  +sans-serif
+.fa-triangle:before
+  content: "\0025b2"
+  +sans-serif

data/app/assets/stylesheets/helpers/_margin-padding.sass

@@ -0,0 +1,110 @@
+body
+  @for $i from 0 through 20
+    .is-margin-bottom-#{$i*4}
+      +rem('margin-bottom', #{$i*4}px)
+    .is-margin-top-#{$i*4}
+      +rem('margin-top', #{$i*4}px)
+    .is-margin-left-#{$i*4}
+      +rem('margin-left', #{$i*4}px)
+    .is-margin-right-#{$i*4}
+      +rem('margin-right', #{$i*4}px)
+    .is-margin-horizontal-#{$i*4}
+      +margin(horizontal, #{$i*4}px)
+    .is-padding-bottom-#{$i*4}
+      +rem('padding-bottom', #{$i*4}px)
+    .is-padding-top-#{$i*4}
+      +rem('padding-top', #{$i*4}px)
+    .is-padding-left-#{$i*4}
+      +rem('padding-left', #{$i*4}px)
+    .is-padding-right-#{$i*4}
+      +rem('padding-right', #{$i*4}px)
+    .is-padding-horizontal-#{$i*4}
+      +padding(horizontal, #{$i*4}px)
+
+  // horizontal-margin-0
+  .is-horizontal-margin-0
+    +margin(horizontal, 0)
+  .is-xs-horizontal-margin-0
+    +screen-xs
+      +margin(horizontal, 0)
+  .is-sm-horizontal-margin-0
+    +screen-sm
+      +margin(horizontal, 0)
+  .is-md-horizontal-margin-0
+    +screen-md
+      +margin(horizontal, 0)
+  .is-lg-horizontal-margin-0
+    +screen-lg
+      +margin(horizontal, 0)
+
+  // horizontal-padding-0
+  .is-horizontal-padding-0
+    +padding(horizontal, 0)
+  .is-xs-horizontal-padding-0
+    +screen-xs
+      +padding(horizontal, 0)
+  .is-sm-horizontal-padding-0
+    +screen-sm
+      +padding(horizontal, 0)
+  .is-md-horizontal-padding-0
+    +screen-md
+      +padding(horizontal, 0)
+  .is-lg-horizontal-padding-0
+    +screen-lg
+      +padding(horizontal, 0)
+
+// こっちに変更
+body
+  @for $i from 0 through 20
+    .has-margin-bottom-#{$i*4}
+      +rem('margin-bottom', #{$i*4}px)
+    .has-margin-top-#{$i*4}
+      +rem('margin-top', #{$i*4}px)
+    .has-margin-left-#{$i*4}
+      +rem('margin-left', #{$i*4}px)
+    .has-margin-right-#{$i*4}
+      +rem('margin-right', #{$i*4}px)
+    .has-margin-horizontal-#{$i*4}
+      +margin(horizontal, #{$i*4}px)
+    .has-padding-bottom-#{$i*4}
+      +rem('padding-bottom', #{$i*4}px)
+    .has-padding-top-#{$i*4}
+      +rem('padding-top', #{$i*4}px)
+    .has-padding-left-#{$i*4}
+      +rem('padding-left', #{$i*4}px)
+    .has-padding-right-#{$i*4}
+      +rem('padding-right', #{$i*4}px)
+    .has-padding-horizontal-#{$i*4}
+      +padding(horizontal, #{$i*4}px)
+
+  // horizontal-margin-0
+  .has-horizontal-margin-0
+    +margin(horizontal, 0)
+  .has-xs-horizontal-margin-0
+    +screen-xs
+      +margin(horizontal, 0)
+  .has-sm-horizontal-margin-0
+    +screen-sm
+      +margin(horizontal, 0)
+  .has-md-horizontal-margin-0
+    +screen-md
+      +margin(horizontal, 0)
+  .has-lg-horizontal-margin-0
+    +screen-lg
+      +margin(horizontal, 0)
+
+  // horizontal-padding-0
+  .has-horizontal-padding-0
+    +padding(horizontal, 0)
+  .has-xs-horizontal-padding-0
+    +screen-xs
+      +padding(horizontal, 0)
+  .has-sm-horizontal-padding-0
+    +screen-sm
+      +padding(horizontal, 0)
+  .has-md-horizontal-padding-0
+    +screen-md
+      +padding(horizontal, 0)
+  .has-lg-horizontal-padding-0
+    +screen-lg
+      +padding(horizontal, 0)

data/app/assets/stylesheets/helpers/_position.sass

@@ -0,0 +1,9 @@
+@for $i from -8 through 8
+  .is-top-#{$i}
+    +top(#{$i}px)
+  .is-bottom-#{$i}
+    +top(#{$i}px)
+  .is-left-#{$i}
+    +left(#{$i}px)
+  .is-right-#{$i}
+    +right(#{$i}px)

data/app/assets/stylesheets/helpers/_typoglaphy.sass

@@ -0,0 +1,26 @@
+body
+  // typoglaphy
+  .is-ja
+    +basic-font
+  .is-serif
+    +serif
+  .is-bold-ja
+    +bold-ja
+  .is-serif
+    +serif
+
+  @for $i from 0 through 24
+    $value: $i/10
+    .is-letter-specing-#{$i}px
+      letter-spacing: $value
+    .is-letter-specing-center-#{$i}px
+      letter-spacing: $value
+      text-indent: $value
+
+  .is-white-space-nowrap
+    white-space: nowrap
+
+  $positions: left center right
+  @each $position in $positions
+    .is-text-align-#{$position}
+      text-align: $position

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

@@ -0,0 +1,61 @@
+=button-base
+  +inline-block(middle)
+  cursor: pointer
+  text-align: center
+  +user-select(none)
+  touch-action: manipulation
+  text-decoration: none
+  -webkit-tap-highlight-color: transparent
+
+=button-size($size, $border-width: 0, $border-radius: 4px)
+  $font-size: ""
+  @if $size == 'xs'
+    $font-size: 12px
+  @else if $size == 'sm'
+    $font-size: 14px
+  @else if $size == 'md'
+    $font-size: 16px
+  @else if $size == 'lg'
+    $font-size: 18px
+  @else if $size == 'xl'
+    $font-size: 20px
+  $height: round($font-size * 2 + $font-size/2.2)
+  @if $border-width
+    +border(all, $border-width)
+  @else
+    $border-width: 0
+  +text-block($font-size $height - ($border-width*2))
+  +rem('height', $height)
+  +padding(horizontal, $height/1.6)
+  @if $border-radius
+    +border-radius($border-radius)
+  @if $font-size > 12px
+    font-weight: bold
+  i,
+  .is-button-icon
+    @if $font-size > 28
+      +rem('margin-right', $font-size/4)
+    @else
+      +rem('margin-right', $font-size/3)
+  &.has-right-icon
+    i,
+    .is-button-icon
+      margin-right: 0
+      @if $font-size > 28
+        +rem('margin-left', $font-size/4)
+      @else
+        +rem('margin-left', $font-size/3)
+  &.is-input-container
+    padding: 0
+    position: relative
+    i,
+    .is-button-icon
+      +position(absolute, left $height/2, top 0)
+      +rem('line-height', $height - ($border-width*2))
+    input
+      +padding(horizontal, ($height + if($font-size > 28, $font-size/4, $font-size/3)) $height/2)
+      +rem('height', $height - ($border-width*2))
+
+=button-group
+  .is-button-group
+    @content

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

@@ -0,0 +1,33 @@
+// button option
+[class^="is-button"]
+  &.is-block
+    display: block
+    width: 100%
+  &.has-image
+    height: auto
+  .is-button-note
+    +inline-block
+    +rem('font-size', 12px)
+    +rem('margin-left', 6px)
+  &.is-disabled,
+  &:disabled
+    pointer-events: none
+    cursor: default
+    select
+      cursor: default
+
+// button-group
+.is-button-group
+  font-size: 0
+  >li
+    display: inline
+    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)

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

@@ -0,0 +1,59 @@
+$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
+@import styles/normal
+@import styles/border
+@import styles/flat-emboss
+@import styles/material
+@import styles/flat-round
+
+@import button-helper
+
+=button($style, $size, $color, $options: false)
+  +button-base
+  @if $style == normal
+    +button-size($size, 1px, 4px)
+    +normal-button($color)
+  @else if $style == border
+    +button-size($size, 1px, 4px)
+    +border-button($color)
+  @else if $style == bold-border
+    +button-size($size, 2px, 8px)
+    +border-button($color)
+  @else if $style == flat-emboss
+    +button-size($size, false, 4px)
+    +flat-emboss-button($color)
+  @else if $style == material
+    +button-size($size, false, false)
+    +material-button($color)
+  @else if $style == flat-round
+    +button-size($size, false, false)
+    +flat-round-button($color)
+  @each $option in $options
+    @if $option == 'left'
+      text-align: left
+    @if $option == 'right'
+      text-align: right
+
+@each $button-size in $button-sizes
+  $button-color-name: ''
+  $button-color: ''
+  $button-style: ''
+  @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
+        @else if $button-color-name == primary
+          $button-color: $primary
+        @else if $button-color-name == success
+          $button-color: $success
+        @else if $button-color-name == warning
+          $button-color: $warning
+        @else if $button-color-name == danger
+          $button-color: $danger
+        +button($button-style, $button-size, $button-color)

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

@@ -0,0 +1,24 @@
+=border-button($color)
+  +border(all, solid)
+  @if $color == $default
+    $color: $text-color
+  @else
+    color: $color
+  border-color: $color
+  background-color: transparent
+  &:link,
+  &:visited
+    color: $color
+  &:hover,
+  &.hover,
+  &.is-hover
+    color: $color
+    background-color: rgba($color, .1)
+  &:active,
+  &.active,
+  &.is-active
+    color: $color
+    background-color: rgba($color, .3)
+  &.is-checked
+    color: $default-text-reversal
+    background-color: $color

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

@@ -0,0 +1,24 @@
+=flat-emboss-button($color: blue)
+  +transition(.5s (background-image))
+  background-color: $color
+  color: luma_contrast_color($color)
+  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,
+  &.is-hover
+    $color: lighten($color, 6%)
+    @if luma($color) > 90
+      background-color: #f2f2f2
+    @else
+      background-color: $color
+  &:active,
+  &.active,
+  &.is-active
+    $color: lighten($color, 6%)
+    @if luma($color) > 90
+      background-color: #f2f2f2
+    @else
+      background-color: $color
+    box-shadow: shade($color, 18%) 0 2px 0
+    +top(1px)

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

@@ -0,0 +1,23 @@
+=flat-round-button($color: blue)
+  +transition(.5s (background-image))
+  background-color: $color
+  color: luma_contrast_color($color)
+  font-weight: bold
+  border-radius: 1000px
+  &:hover,
+  &.hover,
+  &.is-hover
+    $color: lighten($color, 6%)
+    @if luma($color) > 90
+      background-color: #f2f2f2
+    @else
+      background-color: $color
+  &:active,
+  &.active,
+  &.is-active
+    $color: lighten($color, 6%)
+    @if luma($color) > 90
+      background-color: #f2f2f2
+    @else
+      background-color: $color
+    +top(1px)