oulu 0.19.1 → 1.0.0.beta1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA256:
-  metadata.gz: daad417c12471558fbfc4b24d546123edceddcc66bd0dc9a36b627a5240fcc71
-  data.tar.gz: 8ca595e4de9c5c5254b42ab085493af307c18c4fb28bfc457431f9bc8f506c8f
+SHA1:
+  metadata.gz: 9e18be2efd7f7f3842c69539602d2bf0568be953
+  data.tar.gz: 9a3b85be25051b69653ca9478f2ec6b98eb30962
 SHA512:
-  metadata.gz: b714a56b1a4a24279ec9541890966753e0732fe71ce5f8362cf7ca5fe96a27d8d580c8a1e9a8af510b3d075bd049e218bb68550a4941e2f5f1165dfa035daa42
-  data.tar.gz: 5921b06b65e48db8d302fbe1c10bf8681db19f40460414952f1eea9d5661d8f56e32576c723505be429e3db69184298353ca99db1dde54293af1a66714b1bf56
+  metadata.gz: dcf0665bef5ea3e6ea48e031b6e63261195eadc355cd83199bc4954ad16f999959942b9fc79591583ff9d463400313330ecab5ac5f939c7a85a314c5561e6a0e
+  data.tar.gz: f4779668f609a7e89118357f8c8063a51162216a1ac049f4995e31e9d0dd4914c83e710ed43723b4df80504120286bb281205720d989ba200a432c7a7323d7e3

data/README.md

@@ -6,36 +6,6 @@ oulu is a sass mixin libraly.
 
 [docs](http://oulu.github.io/)
 
-## import
-
-```
-// oulu-functions-before-variables
-@import oulu-functions-before-variables
-
-// oulu-variables and yours
-@import {your variables}
-@import oulu-variables
-
-// oulu-functions-after-variables (functions need variables)
-@import oulu-functions-after-variables
-
-// oulu-mixins
-@import oulu-mixins
-
-// oulu-initializers
-@import oulu-initializers
-
-// oulu-helpers
-@import oulu-helpers
-
-// oulu-modules
-@import modules/web-fonts/font-awsome
-@import modules/web-fonts/montserrat
-@import modules/web-fonts/satisfy
-@import modules/web-fonts/icomoon
-
-```
-
 ## Contributing
 
 1. Fork it

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

@@ -26,7 +26,6 @@
 // variables
 ///////////////////
 
-@import settings/variables/sanitize
 @import settings/variables/default
 @import settings/variables/modules
 
@@ -44,19 +43,18 @@
 @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/break-points
 @import settings/mixins/grid
 @import settings/mixins/responsive-utilities
 @import settings/mixins/background
 @import settings/mixins/line
 @import settings/mixins/image
-@import settings/mixins/word-wrap
 
 // initializers
 ///////////////////

data/app/assets/stylesheets/_oulu.sass

@@ -1,29 +1,14 @@
-@charset "UTF-8"
-
 //////////////
 //settings
 //////////////
 
-// functions-before-variables
-@import oulu-functions-before-variables
-
-// variables
-@import oulu-variables
-
-// oulu-functions-after-variables (functions need variables)
-@import oulu-functions-after-variables
-
-// mixins
-@import oulu-mixins
-
-//////////////
-// initializers
-//////////////
-
-@import oulu-initializers
-
-//////////////
-// helpers
-//////////////
+// oulu-base
+@import oulu-base
 
-@import oulu-helpers
+// helper-classes
+@import helpers/block
+@import helpers/border
+@import helpers/font-awsome
+@import helpers/margin-padding
+@import helpers/position
+@import helpers/typoglaphy

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

@@ -1,4 +1,7 @@
 body
+  // layout
+  .has-no-gutter-grids
+    +grid(0)
   .is-horizontal-center-block
     display: block
     +margin(horizontal, auto)
@@ -9,6 +12,19 @@ body
   .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
@@ -37,29 +53,37 @@ body
     overflow: hidden
 
   // position
-  .is-position-relative
+  .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-align-middle
+  .is-vertical-middle
     vertical-align: middle !important
-  .is-vertical-align-top
+  .is-vertical-top
     vertical-align: top !important
-  .is-vertical-align-bottom
+  .is-vertical-bottom
     vertical-align: bottom !important
 
   // display
-  .is-display-block
+  .is-block
     display: block
   .is-display-none
     display: none
   .is-display-none-important
     display: none !important
-  .is-display-inline-block
+  .is-inline-block
     display: inline-block
-  .is-display-inline
+  .is-inline
     display: inline
-  .is-display-table-row
+  .is-table-row
     display: table-row !important
-  .is-display-table-cell
+  .is-table-cell
     display: table-cell !important
+  .is-inline-blocks
+    >*
+      display: inline-block

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

@@ -1,35 +1,110 @@
-=assign-margin-padding($direction, $property, $n-px)
-  @if $direction == horizontal
-    #{$property}-left: $n-px
-    #{$property}-right: $n-px
-  @else if $direction == vertical
-    #{$property}-top: $n-px
-    #{$property}-bottom: $n-px
-  @else
-    #{$property}-#{$direction}: $n-px
 body
   @for $i from 0 through 20
-    $n: $i*4
-    $n-px: px_to_rem($n*1px)
-    $properties: margin, padding
-    $directions: top, bottom, left, right, horizontal, vertical
-    $breakpoints: xs, sm, md, lg, xl, false
-    $scopes: up, down
-    @each $property in $properties
-      @each $direction in $directions
-        @each $breakpoint in $breakpoints
-          @each $scope in $scopes
-            @if $breakpoint
-              .is-#{$property}-#{$direction}-#{$n}-#{$breakpoint}-#{$scope}
-                @if $scope == up
-                  +media-breakpoint-up($breakpoint)
-                    +assign-margin-padding($direction, $property, $n-px)
-                @else if $scope == down
-                  +media-breakpoint-down($breakpoint)
-                    +assign-margin-padding($direction, $property, $n-px)
-                @else if $scope == only
-                  +media-breakpoint-only($breakpoint)
-                    +assign-margin-padding($direction, $property, $n-px)
-            @else
-              .is-#{$property}-#{$direction}-#{$n}
-                +assign-margin-padding($direction, $property, $n-px)
+    .is-margin-bottom-#{$i*4px}
+      margin-bottom: $i*4px
+    .is-margin-top-#{$i*4px}
+      margin-top: $i*4px
+    .is-margin-left-#{$i*4px}
+      margin-left: $i*4px
+    .is-margin-right-#{$i*4px}
+      margin-right: $i*4px
+    .is-margin-horizontal-#{$i*4px}
+      +margin(horizontal, $i*4px)
+    .is-padding-bottom-#{$i*4px}
+      padding-bottom: $i*4px
+    .is-padding-top-#{$i*4px}
+      padding-top: $i*4px
+    .is-padding-left-#{$i*4px}
+      padding-left: $i*4px
+    .is-padding-right-#{$i*4px}
+      padding-right: $i*4px
+    .is-padding-horizontal-#{$i*4px}
+      +padding(horizontal, $i*4px)
+
+  // 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*4px}
+      margin-bottom: $i*4px
+    .has-margin-top-#{$i*4}
+      margin-top: $i*4px
+    .has-margin-left-#{$i*4}
+      margin-left: $i*4px
+    .has-margin-right-#{$i*4}
+      margin-right: $i*4px
+    .has-margin-horizontal-#{$i*4}
+      +margin(horizontal, $i*4px)
+    .has-padding-bottom-#{$i*4px}
+      padding-bottom: $i*4px
+    .has-padding-top-#{$i*4px}
+      padding-top: $i*4px
+    .has-padding-left-#{$i*4px}
+      padding-left: $i*4px
+    .has-padding-right-#{$i*4px}
+      padding-right: $i*4px
+    .has-padding-horizontal-#{$i*4px}
+      +padding(horizontal, $i*4px)
+
+  // 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

@@ -1,33 +1,9 @@
-=assign-position($direction, $n-px)
-  @if $direction == top
-    +top($n-px)
-  @else if $direction == bottom
-    +bottom($n-px)
-  @else if $direction == left
-    +left($n-px)
-  @else if $direction == right
-    +right($n-px)
-
 @for $i from -8 through 8
-  $n: $i*4
-  $n-px: px_to_rem($n*1px)
-  $directions: top, bottom, left, right
-  $breakpoints: xs, sm, md, lg, xl, false
-  $scopes: up, down
-  @each $direction in $directions
-    @each $breakpoint in $breakpoints
-      @each $scope in $scopes
-        @if $breakpoint
-          .is-#{$direction}-#{$n}-#{$breakpoint}-#{$scope}
-            @if $scope == up
-              +media-breakpoint-up($breakpoint)
-                +assign-position($direction, $n-px)
-            @else if $scope == down
-              +media-breakpoint-down($breakpoint)
-                +assign-position($direction, $n-px)
-            @else if $scope == only
-              +media-breakpoint-only($breakpoint)
-                +assign-position($direction, $n-px)
-        @else
-          .is-#{$direction}-#{$n}
-            +assign-position($direction, $n-px)
+  .is-top-#{$i}px
+    +top(#{$i}px)
+  .is-bottom-#{$i}px
+    +top(#{$i}px)
+  .is-left-#{$i}px
+    +left(#{$i}px)
+  .is-right-#{$i}px
+    +right(#{$i}px)

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

@@ -2,41 +2,25 @@ body
   // typoglaphy
   .is-ja
     +basic-font
+  .is-serif
+    +serif
   .is-bold-ja
     +bold-ja
   .is-serif
     +serif
-  .is-sans-serif
-    +sans-serif
 
   @for $i from 0 through 24
-    $value: px_to_rem($i * 1px)
-    .is-letter-specing-#{$i}
+    $value: $i/10
+    .is-letter-specing-#{$i}px
+      letter-spacing: $value
+    .is-letter-specing-center-#{$i}px
       letter-spacing: $value
-    .is-letter-specing-center-#{$i}
-      letter-spacing: $value * -1
       text-indent: $value
 
   .is-white-space-nowrap
     white-space: nowrap
 
-  $breakpoints: xs, sm, md, lg, xl, false
   $positions: left center right
-  $scopes: up, down, only
-  @each $breakpoint in $breakpoints
-    @each $position in $positions
-      @if $breakpoint
-        @each $scope in $scopes
-          .is-text-align-#{$position}-#{$breakpoint}-#{$scope}
-            @if $scope == up
-              +media-breakpoint-up($breakpoint)
-                text-align: $position
-            @else if $scope == down
-              +media-breakpoint-down($breakpoint)
-                text-align: $position
-            @else if $scope == only
-              +media-breakpoint-only($breakpoint)
-                text-align: $position
-      @else
-        .is-text-align-#{$position}
-          text-align: $position
+  @each $position in $positions
+    .is-text-align-#{$position}
+      text-align: $position

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

@@ -1,65 +1,40 @@
 =button-base
-  line-height: 1.45
-  display: inline-flex
-  align-items: center
-  justify-content: center
+  +inline-block(middle)
   cursor: pointer
   text-align: center
   user-select: none
   touch-action: manipulation
   text-decoration: none
   -webkit-tap-highlight-color: transparent
-  &[type="button"],
-  &[type="reset"],
-  &[type="submit"]
-    display: inline-block
-    &.is-block
-      display: block
-  .is-block
-    select
-      display: block
-      width: 100%
 
-=button-size($size, $border-width: false, $border-radius: .25rem)
+=button-size($size, $border-width: false, $border-radius: 4px)
   $font-size: ""
-  $button-height: ""
   @if $size == 'xs'
     $font-size: $xs-button-font-size
-    $button-height: $font-size * $button-xs-height-ratio - if($border-width, $border-width, 0) * 2
-    +padding(horizontal, ($button-height/$button-xs-width-ratio))
   @else if $size == 'sm'
     $font-size: $sm-button-font-size
-    $button-height: $font-size * $button-sm-height-ratio - if($border-width, $border-width, 0) * 2
-    +padding(horizontal, ($button-height/$button-sm-width-ratio))
   @else if $size == 'md'
     $font-size: $md-button-font-size
-    $button-height: $font-size * $button-md-height-ratio - if($border-width, $border-width, 0) * 2
-    +padding(horizontal, ($button-height/$button-md-width-ratio))
   @else if $size == 'lg'
     $font-size: $lg-button-font-size
-    $button-height: $font-size * $button-lg-height-ratio - if($border-width, $border-width, 0) * 2
-    +padding(horizontal, ($button-height/$button-lg-width-ratio))
   @else if $size == 'xl'
     $font-size: $xl-button-font-size
-    $button-height: $font-size * $button-xl-height-ratio - if($border-width, $border-width, 0) * 2
-    +padding(horizontal, ($button-height/$button-xl-width-ratio))
+  $button-height: round($font-size * 2.5 - if($border-width, $border-width, 0) * 2)
   @if $border-width
-    border-width: $border-width
+    +border(all, $border-width)
   @else
     $border-width: 0
-  height: auto
-  min-height: $button-height
-  $vertical-padding: ($button-height - (($font-size * 1.45) - ($border-width * 2))) / 2
+  $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 > .6875rem and .75rem > $font-size
-    font-weight: 600
-  @else if .999999rem < $font-size
-    font-weight: 700
+    +border-radius($border-radius)
+  @if $font-size > 12px
+    font-weight: bold
   i,
   .is-button-icon
-    @if $font-size > 1.75rem
+    @if $font-size > 28
       margin-right: $font-size/4
     @else
       margin-right: $font-size/3
@@ -67,7 +42,7 @@
     i,
     .is-button-icon
       margin-right: 0
-      @if $font-size > 1.75rem
+      @if $font-size > 28
         margin-left: $font-size/4
       @else
         margin-left: $font-size/3
@@ -79,7 +54,7 @@
       +position(absolute, left $button-height/2, top 0)
       line-height: $button-height - ($border-width*2)
     input
-      +padding(horizontal, ($button-height + if($font-size > 1.75rem, $font-size/4, $font-size/3)) $button-height/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)
@@ -87,85 +62,56 @@
     $button-height: $button-height
     padding-left: $icon-width
     &:before
-      +fa(fas "\f0d7")
+      +fa("\f0d7")
       +position(absolute, left 0, top 0)
-      border-right: .0625rem solid shade($secondary, 15%)
-      +text-block($icon-size ($button-height - $border-width * 2), center shade($secondary, 55%))
+      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
-    height: auto
-    $icon-width: $font-size * 2.7
-    $icon-size: $font-size * 1.3
+    $icon-width: round($font-size * 2.7)
+    $icon-size: round($font-size * 1.3)
     position: relative
-    overflow: hidden
     &:after
-      +fa(fas "\f0d7")
-      +position(absolute, right 0, top 0, bottom 0, 0)
-      +text-block($icon-size 1, center flex)
-      align-items: center
-      justify-content: center
+      +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
-      height: $button-height
-      +padding(horizontal, (($font-size * 1.4) ($font-size * 1.4) + $icon-width))
+      +padding(vertical, $vertical-padding)
       +position(relative, 1)
   &.is-radio,
   &.is-checkbox
-    $icon-space: $font-size * 3
+    $icon-space: round($font-size * 2.2)
     padding-left: $icon-space
     position: relative
-    *
-      cursor: pointer
     &:before
       content: ""
       display: block
-      +position(absolute, left 1rem, top 50%)
-      $check-base-size: $font-size * .9
+      +position(absolute, left 16px, top 50%)
+      $check-base-size: round($font-size * .9)
       +size($check-base-size)
-      margin-top: $check-base-size / -2
+      margin-top: round($check-base-size / -2)
     &:after
-      $check-icon-size: $font-size * 1.4
-      +fa(fas "\f00c")
+      $check-icon-size: round($font-size * 1.4)
+      +fa("\f00c")
       opacity: 0
       +size($check-icon-size)
-      +text-block($check-icon-size 1, $button-checked-icon-color)
-      text-shadow: rgba(black, .4) 0 .0625rem .0625rem
-      +position(absolute, left .875rem, top 50%)
-      margin-top: $check-icon-size / -2 * 1.2
-  &.is-icon
-    +padding(horizontal, $button-height/3.5)
-    font-size: $font-size * 1.4
-    i,
-    .is-button-icon
-      margin-right: 0
+      +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
-  .is-button-group >li:not(:last-child) &
-    @if $border-width / 2 < 1
-      border-right-width: 0
-    @else
-      border-right-width: $border-width / 2
-
-
-// button-grounp
-.is-button-group >li [class*="is-button"]
-  border-radius: 0
-
-// multi-lines-button-grounp
-.is-multi-lines-button-group
-  display: flex
-  flex-wrap: wrap
 
-.is-multi-lines-button-group >li
-  flex: 0 0 50%
-  +media-breakpoint-down(sm)
-    flex: 0 0 100%
 
 =button-group
   .is-button-group