oulu-rails 0.5.7

data/vendor/assets/stylesheets/settings/mixins/_balloon-tale.css.sass

@@ -0,0 +1,111 @@
+// +balloon-tale(top red 12px 16px 1px, null, null)
+=balloon-tale($tale, $tale-position-manual: null, $tale-border: null)
+  // $tale
+  $tale-direction: optional_nth($tale, 1)
+  $tale-color: optional_nth($tale, 2)
+  $tale-width: optional_nth($tale, 3)
+  $tale-height: optional_nth($tale, 4)
+  $parent-boder-width: optional_nth($tale, 5, 0)
+  //$tale-position-manual
+  $tale-position-manual-direction1: optional_nth($tale-position-manual, 1)
+  $tale-position-manual-value1: optional_nth($tale-position-manual, 2)
+  $tale-position-manual-direction2: optional_nth($tale-position-manual, 3)
+  $tale-position-manual-value2: optional_nth($tale-position-manual, 4)
+  //$tale-border
+  $tale-border-color: optional_nth($tale-border, 1)
+  $tale-border-width: optional_nth($tale-border, 2)
+  &:#{if($tale-border, after, before)}
+    position: absolute
+    content: ""
+    display: block
+    +border(all, solid transparent)
+    +border(horizontal, $tale-width)
+    +border(vertical, $tale-height)
+    +border(reverse($tale-direction), $tale-color)
+    @if position_vertical($tale-direction)
+      // 矢印の向きが上下
+      @if not $tale-position-manual or (length($tale-position-manual) == 2 and position_vertical($tale-position-manual-direction1))
+        // manual が 一つだけ指定 上下方向 の場合
+        left: 50%
+        +rem('margin-left', $tale-width*-1)
+      +rem($tale-direction, $tale-height*-1*2 - if($tale-border, 0, $parent-boder-width))
+      @if $tale-position-manual
+        $tale-position-manuals: ($tale-position-manual-direction1: $tale-position-manual-value1, $tale-position-manual-direction2: $tale-position-manual-value2)
+        @each $key, $value in $tale-position-manuals
+          @if position_horizontal($key)
+            // manual が left or right の場合
+            +rem($key, $value - if($tale-border, 0, $parent-boder-width))
+          @else if $tale-direction == $key
+            // 矢印の向きと manual で指定する方向が同じ場合
+            +rem($key, $value - $tale-height - if($tale-border, 0, $parent-boder-width))
+          @else if reverse($tale-direction) == $key
+            // 上向き矢印 で manual が bottom の場合 or 下向き矢印 で manual が top の場合
+            +rem($key, $value - if($tale-border, 0, $parent-boder-width))
+    @if position_horizontal($tale-direction)
+      // 矢印の向きが左右
+      @if not $tale-position-manual or (length($tale-position-manual) == 2 and position_horizontal($tale-position-manual-direction1))
+        // manual が 一つだけ指定 上下方向 の場合
+        top: 50%
+        +rem('margin-top', $tale-height*-1)
+      +rem($tale-direction, $tale-width*-1*2 - if($tale-border, 0, $parent-boder-width))
+      @if $tale-position-manual
+        $tale-position-manuals: ($tale-position-manual-direction1: $tale-position-manual-value1, $tale-position-manual-direction2: $tale-position-manual-value2)
+        @each $key, $value in $tale-position-manuals
+          @if position_vertical($key)
+            // manual が top or bottom の場合
+            +rem($key, $value)
+          @else if $tale-direction == $key
+            // 矢印の向きと manual で指定する方向が同じ場合
+            +rem($key, $value - $tale-width - if($tale-border, 0, $parent-boder-width))
+          @else if reverse($tale-direction) == $key
+            // 左向き矢印 で manual が right の場合 or 右向き矢印 で manual が left の場合
+            +rem($key, $value - if($tale-border, 0, $parent-boder-width))
+
+  @if $tale-border
+    // tale border があるとき - 以下 tale-border の設定
+    &:before
+      position: absolute
+      content: ""
+      display: block
+      +border(all, solid transparent)
+      +border(horizontal, $tale-width + $tale-border-width)
+      +border(vertical, $tale-height + $tale-border-width)
+      +border(reverse($tale-direction), $tale-border-color)
+      @if position_vertical($tale-direction)
+        // 矢印の向きが上下
+        @if not $tale-position-manual or (length($tale-position-manual) == 2 and position_vertical($tale-position-manual-direction1))
+          // manual が 一つだけ指定 上下方向 の場合
+          left: 50%
+          +rem('margin-left', $tale-width*-1 - $tale-border-width)
+        +rem($tale-direction, $tale-height*-1*2 - $tale-border-width*2)
+        @if $tale-position-manual
+          $tale-position-manuals: ($tale-position-manual-direction1: $tale-position-manual-value1, $tale-position-manual-direction2: $tale-position-manual-value2)
+          @each $key, $value in $tale-position-manuals
+            @if position_horizontal($key)
+              // manual が left or right の場合
+              +rem($key, $value - $tale-border-width)
+            @else if $tale-direction == $key
+              // 矢印の向きと manual で指定する方向が同じ場合
+              +rem($key, $value - $tale-height - $tale-border-width*2)
+            @else if reverse($tale-direction) == $key
+              // 上向き矢印 で manual が bottom の場合 or 下向き矢印 で manual が top の場合
+              +rem($key, $value)
+      @if position_horizontal($tale-direction)
+        // 矢印の向きが左右
+        @if not $tale-position-manual or (length($tale-position-manual) == 2 and position_horizontal($tale-position-manual-direction1))
+          // manual が 一つだけ指定 上下方向 の場合
+          top: 50%
+          +rem('margin-top', $tale-height*-1 - $tale-border-width)
+        +rem($tale-direction, $tale-width*-1*2 - $tale-border-width*2)
+        @if $tale-position-manual
+          $tale-position-manuals: ($tale-position-manual-direction1: $tale-position-manual-value1, $tale-position-manual-direction2: $tale-position-manual-value2)
+          @each $key, $value in $tale-position-manuals
+            @if position_vertical($key)
+              // manual が top or bottom の場合
+              +rem($key, $value - $tale-border-width)
+            @else if $tale-direction == $key
+              // 矢印の向きと manual で指定する方向が同じ場合
+              +rem($key, $value - $tale-width - $tale-border-width*2)
+            @else if reverse($tale-direction) == $key
+              // 左向き矢印 で manual が right の場合 or 右向き矢印 で manual が left の場合
+              +rem($key, $value)

data/vendor/assets/stylesheets/settings/mixins/_basic-font.css.sass

@@ -0,0 +1,40 @@
+=basic-font($text-rendering: true)
+  font-family: $basic-sans-serif
+  *font-family: $basic-legacy-ie-sans-serif
+  @if $text-rendering
+    text-rendering: optimizelegibility
+
+=sans-serif($text-rendering: true)
+  font-family: $basic-sans-serif
+  *font-family: $basic-legacy-ie-sans-serif
+  @if $text-rendering
+    text-rendering: optimizelegibility
+
+=bold-ja($text-rendering: true)
+  font-family: $basic-bold-sans-serif
+  *font-family: $basic-legacy-ie-sans-serif
+  font-weight: bold
+  @if $text-rendering
+    text-rendering: optimizelegibility
+
+=serif($text-rendering: true)
+  font-family: $basic-serif
+  *font-family: $basic-legacy-ie-sans-serif
+  @if $text-rendering
+    text-rendering: optimizelegibility
+
+=is-ja
+  &.is-ja
+    @content
+
+=is-bold-ja
+  &.is-bold-ja
+    @content
+
+=webfont-ja-sans-selif
+  @if $fw == 'bold' or $fw > 500
+    +is-bold-ja
+      +basic-bold-font
+  @else
+    +is-ja
+      +basic-font

data/vendor/assets/stylesheets/settings/mixins/_block.css.sass

@@ -0,0 +1,30 @@
+=size($values)
+  @if equal_nth($values, 2)
+    +rem('height', nth($values, 1))
+    +rem('width', nth($values, 2))
+  @else
+    +rem('width', nth($values, 1))
+    +rem('height', nth($values, 1))
+
+=center-block($values)
+  $block-width: optional_nth($values, 1)
+  $block-height: optional_nth($values, 2)
+  $block-z-index: optional_nth($values, 3)
+  +size($block-height $block-width)
+  +fixed(left 50%, top 50%, $block-z-index)
+  +rem('margin-top', $block-height / 2 * -1)
+  +rem('margin-left', $block-width / 2 * -1)
+  +box-sizing(border-box)
+
+=square-block($values)
+  $square-block-size: optional_nth($values, 1)
+  $square-block-height: optional_nth($values, 2)
+  $square-block-line-height: optional_nth($values, 3)
+  +rem('width', $square-block-size)
+  +rem('height', if($square-block-height, $square-block-height, $square-block-size))
+  @if $square-block-line-height
+    +rem('line-height', $square-block-line-height)
+  @else if $square-block-height
+    +rem('line-height', $square-block-height)
+  @else
+    +rem('line-height', $square-block-size)

data/vendor/assets/stylesheets/settings/mixins/_border.css.sass

@@ -0,0 +1,28 @@
+=assign-border-position($border-position, $border-values)
+  #{if($border-position, border-#{$border-position}, border)}:
+    @for $i from 1 through length($border-values)
+      @if border-width(nth($border-values, $i))
+        +rem('width', nth($border-values, $i))
+      @else if border-style(nth($border-values, $i))
+        style: nth($border-values, $i)
+      @else if border-color(nth($border-values, $i))
+        color: nth($border-values, $i)
+
+// 使い方
+// +border(vertical left, solid white 4px)
+=border($value1: null, $value2: null)
+  @for $i from 1 through length($value1)
+    @if all(nth($value1, $i))
+      +assign-border-position(false, $value2)
+    @else if vertical(nth($value1, $i))
+      $border-positions: $vertical
+      @each $border-position in $border-positions
+        +assign-border-position($border-position, $value2)
+    @else if horizontal(nth($value1, $i))
+      $border-positions: $horizontal
+      @each $border-position in $border-positions
+        +assign-border-position($border-position, $value2)
+    @else if four_direction(nth($value1, $i))
+      $border-positions: nth($value1, $i)
+      @each $border-position in $border-positions
+        +assign-border-position($border-position, $value2)

data/vendor/assets/stylesheets/settings/mixins/_button-base.css.sass

@@ -0,0 +1,27 @@
+=button-base($font-size: 12px, $height: 30px, $font-weight: bold, $width: auto, $is-block: null, $is-center: null, $icon-font-size: 14px, $icon-position: null)
+  +rem('font-size', $font-size)
+  +rem('height', $height)
+  +rem('line-height', $height)
+  font-weight: $font-weight
+  +rem('width', $width)
+  text-decoration: none
+  +relative(1)
+  text-align: center
+  @if $is-block == "true"
+    display: block
+  @else
+    +inline-block
+  @if $is-center == "true"
+    +margin(horizontal, auto)
+  @if $icon-font-size
+    i
+      +text-block($icon-font-size, $height)
+      +rem('width', $height)
+      display: block
+      text-align: center
+    @if $icon-position == "left"
+      i
+        +absolute(left, 0, top, 0)
+    @else if $icon-position == "right"
+      i
+        +absolute(right, 0, top, 0)

data/vendor/assets/stylesheets/settings/mixins/_clear-type.css.sass

@@ -0,0 +1,4 @@
+=clear-type
+  +transform-origin(0, 0)
+  +scale(1, 1.01)
+  -ms-transform: scale(1, 1.02)

data/vendor/assets/stylesheets/settings/mixins/_color.css.sass

@@ -0,0 +1,9 @@
+=rgba($foreground, $backdrop: white, $property: "background-color")
+  #{$property}: mix(fade-in($foreground, 1), $backdrop, percentage(opacity($foreground)))
+  // Browsers without color opacity
+  #{$property}: $foreground
+  // Decent browsers
+  #{$property}: mix(fade-in($foreground, 1), $backdrop, percentage(opacity($foreground)))\9
+  // IE8
+  @if $property == "background-color"
+    +rgba-background($foreground)

data/vendor/assets/stylesheets/settings/mixins/_filters.css.sass

@@ -0,0 +1,5 @@
+// https://gist.github.com/chriseppstein/2884618
+// 例 +filter(sepia(100%) hue-rotate(33deg) contrast(69%) unquote("saturate(2)"))
+
+=filter($var)
+	+experimental('filter', $var)

data/vendor/assets/stylesheets/settings/mixins/_form.css.sass

@@ -0,0 +1,7 @@
+=placeholder
+  &::-webkit-input-placeholder
+    @content
+  &:-moz-placeholder
+    @content
+  &.placeholder
+    @content

data/vendor/assets/stylesheets/settings/mixins/_grids.css.sass

@@ -0,0 +1,149 @@
+// Extra small screen / phone
+//** Deprecated `$screen-xs-min` as of v3.2.0
+$screen-xs-min: $screen-xs !default
+//** Deprecated `$screen-phone` as of v3.0.1
+$screen-phone: $screen-xs-min !default
+
+// Small screen / tablet
+$screen-sm-min: $screen-sm !default
+//** Deprecated `$screen-tablet` as of v3.0.1
+$screen-tablet: $screen-sm-min !default
+
+// Medium screen / desktop
+$screen-md-min: $screen-md !default
+//** Deprecated `$screen-desktop` as of v3.0.1
+$screen-desktop: $screen-md-min !default
+
+// Large screen / wide desktop
+$screen-lg-min: $screen-lg !default
+//** Deprecated `$screen-lg-desktop` as of v3.0.1
+$screen-lg-desktop: $screen-lg-min !default
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max: ($screen-sm-min - 1) !default
+$screen-sm-max: ($screen-md-min - 1) !default
+$screen-md-max: ($screen-lg-min - 1) !default
+
+// devise
+=screen-xs
+  @media only screen and (max-width: $screen-xs)
+    @content
+=screen-sm
+  @media only screen and (max-width: $screen-sm)
+    @content
+=screen-md
+  @media only screen and (max-width: $screen-md)
+    @content
+=screen-lg
+  @media only screen and (max-width: $screen-lg)
+    @content
+
+
+// カラムのラッパーのクラス名
+$row-class-name: '.row' !default
+// カラムのネームスペース ※classの".（カンマ）"もネームスペースの一部
+$column-namespace: '.col-' !default
+// オフセットカラムのネームスペース
+$column-offset-namespace: 'offset-' !default
+// ブレイクポイントごとのカラムのプレフィックスのネームスペース
+$break-point-xs-namespace: 'xs-' !default
+$break-point-sm-namespace: 'sm-' !default
+$break-point-md-namespace: 'md-' !default
+$break-point-lg-namespace: 'lg-' !default
+
+// ブレイクポイントを配列にする
+$break-points: $break-point-xs-namespace, $break-point-sm-namespace, $break-point-md-namespace, $break-point-lg-namespace
+
+// デバイスごとの media query を作る
+=break-points($break-point: $break-point-xs-namespace)
+  @if $screen-xs and $break-point == $break-point-xs-namespace
+    @content
+  @else if $screen-sm and $break-point == $break-point-sm-namespace
+    @media only screen and (min-width: $screen-xs)
+      @content
+  @else if $screen-md and $break-point == $break-point-md-namespace
+    @media only screen and (min-width: $screen-sm)
+      @content
+  @else if $screen-lg and $break-point == $break-point-lg-namespace
+    @media only screen and (min-width: $screen-md)
+      @content
+  @else if $screen-xl and $break-point == $break-point-xl-namespace
+    @media only screen and (min-width: $screen-lg)
+      @content
+
+// カラムのラッパーの設定
+#{$row-class-name}
+  // カラムのマージン分だけ両サイドにネガティブマージンを取る
+  +margin(horizontal, ($gutter-width / 2) * -1)
+  // clearfix
+  +rem('min-height', 1px)
+  &:before,
+  &:after
+    display: table
+    content: " "
+  &:after
+    clear: both
+
+// カラムの基本設定
+=column($number, $columns-gutter-width: $gutter-width)
+  +rem('width', 100 / $columns-count * $number * 1%)
+  +rem('min-height', 1px)
+  +padding(horizontal, $columns-gutter-width / 2)
+  float: left
+  +box-sizing(border-box)
+
+// カラムをサイズごとに作る
+@each $break-point in $break-points
+  +break-points(#{$break-point})
+    @for $i from 1 through $columns-count
+      #{$column-namespace}#{$break-point}#{$i}
+        +column($i)
+
+// オフセットカラムの基本設定
+=column-offset($number)
+  +rem('margin-left', 100 / $columns-count * $number * 1%)
+
+// オフセットカラムをサイズごとに作る
+@each $break-point in $break-points
+  +break-points(#{$break-point})
+    @for $i from 1 through $columns-count
+      #{$column-namespace}#{$break-point}#{$column-offset-namespace}#{$i}
+        +column-offset($i)
+
+=grid-columns($columns-gutter-width: $gutter-width, $grid-columns-row-class-name: '.row')
+  #{$grid-columns-row-class-name}
+    // カラムのマージン分だけ両サイドにネガティブマージンを取る
+    +margin(horizontal, ($columns-gutter-width / 2) * -1)
+    // clearfix
+    +rem('min-height', 1px)
+    &:before,
+    &:after
+      display: table
+      content: " "
+    &:after
+      clear: both
+  // カラムをサイズごとに作る
+  @each $break-point in $break-points
+    +break-points(#{$break-point})
+      @for $i from 1 through $columns-count
+        #{$column-namespace}#{$break-point}#{$i}
+          +column($i, $columns-gutter-width)
+
+=grid-column-offsets($columns-gutter-width: $gutter-width, $grid-columns-row-class-name: '.row')
+  #{$grid-columns-row-class-name}
+    // カラムのマージン分だけ両サイドにネガティブマージンを取る
+    +margin(horizontal, ($columns-gutter-width / 2) * -1)
+    // clearfix
+    +rem('min-height', 1px)
+    &:before,
+    &:after
+      display: table
+      content: " "
+    &:after
+      clear: both
+  // オフセットカラムをサイズごとに作る
+  @each $break-point in $break-points
+    +break-points(#{$break-point})
+      @for $i from 1 through $columns-count
+        #{$column-namespace}#{$break-point}#{$column-offset-namespace}#{$i}
+          +column-offset($i)

data/vendor/assets/stylesheets/settings/mixins/_html5-input-types.scss

@@ -0,0 +1,118 @@
+// https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_assign.scss
+
+@function assign-inputs($inputs, $pseudo: null) {
+  $list : ();
+
+  @each $input in $inputs {
+    $input: unquote($input);
+    $input: if($pseudo, $input + ":" + $pseudo, $input);
+    $list: append($list, $input, comma);
+  }
+
+  @return $list;
+}
+
+//************************************************************************//
+// Generate a variable ($all-text-inputs) with a list of all html5
+// input types that have a text-based input, excluding textarea.
+// http://diveintohtml5.org/forms.html
+//************************************************************************//
+$inputs-list: 'input[type="email"]',
+              'input[type="number"]',
+              'input[type="password"]',
+              'input[type="search"]',
+              'input[type="tel"]',
+              'input[type="text"]',
+              'input[type="url"]',
+
+              // Webkit & Gecko may change the display of these in the future
+              'input[type="color"]',
+              'input[type="date"]',
+              'input[type="datetime"]',
+              'input[type="datetime-local"]',
+              'input[type="month"]',
+              'input[type="time"]',
+              'input[type="week"]';
+
+$inputs-en-list: 'input[type="email"]',
+                 'input[type="number"]',
+                 'input[type="search"]',
+                 'input[type="tel"]',
+                 'input[type="url"]',
+
+                 // Webkit & Gecko may change the display of these in the future
+                 'input[type="color"]',
+                 'input[type="date"]',
+                 'input[type="datetime"]',
+                 'input[type="datetime-local"]',
+                 'input[type="time"]';
+
+
+// Bare inputs
+//************************************************************************//
+$all-text-inputs: assign-inputs($inputs-list);
+
+// English inputs
+//************************************************************************//
+$all-en-text-inputs: assign-inputs($inputs-en-list);
+
+// Hover Pseudo-class
+//************************************************************************//
+$all-text-inputs-hover: assign-inputs($inputs-list, hover);
+
+// Focus Pseudo-class
+//************************************************************************//
+$all-text-inputs-focus: assign-inputs($inputs-list, focus);
+
+
+
+// You must use interpolation on the variable:
+// #{$all-text-inputs}
+// #{$all-text-inputs-hover}
+// #{$all-text-inputs-focus}
+
+// Example
+//************************************************************************//
+//   #{$all-text-inputs}, textarea {
+//     border: 1px solid red;
+//   }
+
+
+
+//************************************************************************//
+// Generate a variable ($all-button-inputs) with a list of all html5
+// input types that have a button-based input, excluding button.
+//************************************************************************//
+$inputs-button-list: 'input[type="button"]',
+                     'input[type="reset"]',
+                     'input[type="submit"]';
+
+// Bare inputs
+//************************************************************************//
+$all-button-inputs: assign-inputs($inputs-button-list);
+
+// Hover Pseudo-class
+//************************************************************************//
+$all-button-inputs-hover: assign-inputs($inputs-button-list, hover);
+
+// Focus Pseudo-class
+//************************************************************************//
+$all-button-inputs-focus: assign-inputs($inputs-button-list, focus);
+
+// Active Pseudo-class
+//************************************************************************//
+$all-button-inputs-active: assign-inputs($inputs-button-list, active);
+
+
+
+// You must use interpolation on the variable:
+// #{$all-button-inputs}
+// #{$all-button-inputs-hover}
+// #{$all-button-inputs-focus}
+// #{$all-button-inputs-active}
+
+// Example
+//************************************************************************//
+//   #{$all-button-inputs}, button {
+//     border: 1px solid red;
+//   }

data/vendor/assets/stylesheets/settings/mixins/_ie-hacks.css.sass

@@ -0,0 +1,8 @@
++ie($versions: all)
+  @if $versions == 'all'
+    &.is-ie
+      @content
+  @else
+    @each $version in $versions
+      &.is-ie#{$version}
+        @content

data/vendor/assets/stylesheets/settings/mixins/_lines.css.sass

@@ -0,0 +1,18 @@
+=dotted-line($color: rgba(#000, 1.0), $stripe: null)
+  $stripe-width: if(length($stripe) >= 1, nth($stripe, 1), 1px)
+  $gatter-width: if(length($stripe) >= 2, nth($stripe, 2), 4px)
+  $size: if(length($stripe) >= 3, nth($stripe, 3), 1px)
+  +background-image(linear-gradient(left, color-stops($color, $color (strip_unit($stripe-width)/(strip_unit($stripe-width) + strip_unit($gatter-width)))*100%, transparent (strip_unit($stripe-width)/(strip_unit($stripe-width) + strip_unit($gatter-width)))*100%, transparent 100%)))
+  +background-size(($stripe-width + $gatter-width) ($stripe-width + $gatter-width))
+  +rem('height', $size)
+
+// http://codepen.io/anon/pen/tGhLp を改造
+=striped-line($stripe-color: #000000, $size: 20px)
+  @if length($stripe-color) == 1
+    +background-image(linear-gradient(-45deg, $stripe-color 25%, transparent 25%, transparent 50%, $stripe-color 50%, $stripe-color 75%, transparent 75%, transparent))
+  @else
+    $mix-stripe-color: darken(nth($stripe-color, 1), nth($stripe-color, 2))
+    +background-image(linear-gradient(-45deg, $mix-stripe-color 25%, transparent 25%, transparent 50%, $mix-stripe-color 50%, $mix-stripe-color 75%, transparent 75%, transparent))
+    background-color: $background-color
+  +background-size($size $size)
+  +rem('height', $size)

data/vendor/assets/stylesheets/settings/mixins/_link.css.sass

@@ -0,0 +1,11 @@
+=block-link
+  display: block
+  text-decoration: none
+  
+=hover-link-reverse($modifire-class: null)
+  text-decoration: underline
+  &:hover,
+  &:active
+    text-decoration: none
+  @if $modifire-class
+    #{$modifire-class}: none

data/vendor/assets/stylesheets/settings/mixins/_list.css.sass

@@ -0,0 +1,21 @@
+// +list(12px 24px, fa '\f192', 12px 3px 8px)
+=list($margins: null, $list-style: null, $icon-position: null)
+  +rem('margin-left', optional_nth($margins, 1))
+  +rem('margin-bottom', optional_nth($margins, 2))
+  content: nth($list-style, 1) == "fa"
+  @for $i from 1 through length($list-style)
+    @if list_style_type(nth($list-style, $i))
+      list-style-type: nth($list-style, $i)
+    @else if list_style_position(nth($list-style, $i))
+      list-style-position: nth($list-style, $i)
+    @else if nth($list-style, $i) == "fa"
+      list-style-type: none
+      >li
+        +relative
+        display: block
+        +rem('padding-left', optional_nth($icon-position, 1) + optional_nth($icon-position, 3))
+        &:before
+          +fa
+          +text-block(optional_nth($icon-position, 1) optional_nth($icon-position, 1))
+          content: '#{optional_nth($list-style, $i + 1)}'
+          +absolute(left 0, top optional_nth($icon-position, 2))

data/vendor/assets/stylesheets/settings/mixins/_margin-padding.css.sass

@@ -0,0 +1,69 @@
+=margin($value1, $value2: null)
+  @if number(nth($value1, 1)) or nth($value1, 1) == 'auto'
+    @if equal_nth($value1, 1)
+      +rem('margin', $value1)
+    @else if equal_nth($value1, 2)
+      +rem('margin-top', nth($value1, 1))
+      +rem('margin-bottom', nth($value1, 2))
+    @else if equal_nth($value1, 3)
+      +rem('margin-top', nth($value1, 1))
+      +rem('margin-bottom', nth($value1, 3))
+      +margin(horizontal, nth($value1, 2))
+    @else if equal_nth($value1, 4)
+      +rem('margin-top', nth($value1, 1))
+      +rem('margin-right', nth($value1, 2))
+      +rem('margin-bottom', nth($value1, 3))
+      +rem('margin-left', nth($value1, 4))
+  @else if length($value1) == 1 and nth($value1, 1) == 'vertical'
+    +rem('margin-top', if(list($value2), nth($value2, 1), $value2))
+    +rem('margin-bottom', if(list($value2),nth($value2, 2), $value2))
+  @else if length($value1) == 1 and nth($value1, 1) == 'horizontal'
+    +rem('margin-left', if(list($value2), nth($value2, 1), $value2))
+    +rem('margin-right', if(list($value2),nth($value2, 2), $value2))
+  @else
+    @each $position in $value1
+      @if $position == 'all'
+        +rem('margin', $value2)
+      @else if $position == 'vertical'
+        +rem('margin-top', $value2)
+        +rem('margin-bottom', $value2)
+      @else if $position == 'horizontal'
+        +rem('margin-left', $value2)
+        +rem('margin-right', $value2)
+      @else
+        +rem('margin-#{$position}', $value2)
+
+=padding($value1: null, $value2: null)
+  @if number(nth($value1, 1)) or nth($value1, 1) == 'auto'
+    @if equal_nth($value1, 1)
+      +rem('padding', $value1)
+    @else if equal_nth($value1, 2)
+      +rem('padding-top', nth($value1, 1))
+      +rem('padding-bottom', nth($value1, 2))
+    @else if equal_nth($value1, 3)
+      +rem('padding-top', nth($value1, 1))
+      +rem('padding-bottom', nth($value1, 3))
+      +padding(horizontal, nth($value1, 2))
+    @else if equal_nth($value1, 4)
+      +rem('padding-top', nth($value1, 1))
+      +rem('padding-right', nth($value1, 2))
+      +rem('padding-bottom', nth($value1, 3))
+      +rem('padding-left', nth($value1, 4))
+  @else if length($value1) == 1 and nth($value1, 1) == 'vertical'
+    +rem('padding-top', if(list($value2), nth($value2, 1), $value2))
+    +rem('padding-bottom', if(list($value2),nth($value2, 2), $value2))
+  @else if length($value1) == 1 and nth($value1, 1) == 'horizontal'
+    +rem('padding-left', if(list($value2), nth($value2, 1), $value2))
+    +rem('padding-right', if(list($value2),nth($value2, 2), $value2))
+  @else
+    @each $position in $value1
+      @if $position == 'all'
+        +rem('padding', $value2)
+      @else if $position == 'vertical'
+        +rem('padding-top', $value2)
+        +rem('padding-bottom', $value2)
+      @else if $position == 'horizontal'
+        +rem('padding-left', $value2)
+        +rem('padding-right', $value2)
+      @else
+        +rem('padding-#{$position}', $value2)