middleman-oulu 0.5.22 → 0.5.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: d02d0cc45f4ed00c4b65717666a0834db014e1e8
4
- data.tar.gz: dcfacf7c44a6380b707f6a34d6ad623d8fd5f92d
3
+ metadata.gz: a6735ee7040ba132e308cde0208d093f42866896
4
+ data.tar.gz: b1d20704289252a3c3a68b02c0748b0e40502f52
5
5
  SHA512:
6
- metadata.gz: b21e7691f9532838aa070006d2790f0c8896d2b344c668a9e380d0c5d8e7bf97b547ad602e29290c2743873e1b9b225e8600cd2ae4e2940ede5aa1bbc83e07be
7
- data.tar.gz: d3d07714a687fd7ead4f8188a98e63252686c89a9f01950811933b1236946893f3e42f60ea188b6b2e0d8825109f9a95cb0118405c69d5e62398e83db88c13b9
6
+ metadata.gz: e91cffebb50effc6cd0cca4e598a08843156ed55f26b2bc2ad6729e0e6b2c86e1571286898bfc220fe97893d662ee7432c3e41e08194690d169a7fa4bc16ec56
7
+ data.tar.gz: d997cb41d2357c90d166bfc216a223d3841f23270259e2a329e1f17ca6f5e33ba77e14553057bc06889d55fff1d75177d8fe83fef3646496f138c007e665d23b
@@ -18,12 +18,6 @@
18
18
 
19
19
  // compass-rgbapng https://github.com/aaronrussell/compass-rgbapng
20
20
  @import rgbapng
21
- // SassyLists http://sassylists.com/
22
- @import SassyLists
23
- // sass-ceaser-easing https://github.com/jhardy/compass-ceaser-easing
24
- @import ceaser-easing
25
- // modular-scale https://github.com/Team-Sass/modular-scale
26
- @import modular-scale
27
21
 
28
22
  // variables
29
23
  ///////////////////
@@ -46,6 +40,7 @@
46
40
  @import settings/functions/background
47
41
  @import settings/functions/border
48
42
  @import settings/functions/animation
43
+ @import settings/functions/grid
49
44
 
50
45
  // mixins
51
46
  ///////////////////
@@ -9,6 +9,4 @@
9
9
  @import helper/base-helper
10
10
  @import helper/margin-padding
11
11
  @import helper/typoglaphy
12
- @import helper/click-actions
13
- @import helper/fade-actions
14
12
  @import helper/no-gutter-grids
@@ -1,8 +1,8 @@
1
- .#{$wrapper-class-name}
2
- +rem('max-width', $wrapper-max-width)
1
+ .#{$container-class-name}
2
+ +rem('max-width', $container-max-width)
3
3
  +box-sizing(border-box)
4
4
  +margin(horizontal, auto)
5
- +padding(horizontal, $wrapper-horizontal-padding)
5
+ +padding(horizontal, $container-horizontal-padding)
6
6
  clear: both
7
7
 
8
8
  // state
@@ -37,33 +37,10 @@
37
37
  -webkit-overflow-scrolling: touch
38
38
  width: 100%
39
39
  position: relative
40
- .is-max-wd
40
+ .is-max-width-100
41
41
  width: 100%
42
42
  display: block
43
43
 
44
- .is-mgb-0
45
- margin-bottom: 0 !important
46
- .is-pdt-0
47
- padding-top: 0 !important
48
- .is-pd-0
49
- padding: 0 !important
50
-
51
- body
52
- .is-hidden
53
- visibility: hidden
54
- display: none
55
- +opacity(0)
56
- .is-invisible
57
- margin-left: -99999px
58
- position: absolute
59
- visibility: hidden
60
- +opacity(0)
61
- .is-shown
62
- +inline-block
63
- .is-horizontal-closed
64
- width: 0
65
- overflow: hidden
66
-
67
44
  .is-z-index-100
68
45
  z-index: 100
69
46
  position: relative
@@ -18,21 +18,5 @@ body
18
18
  +rem('padding-left', #{$i*4}px)
19
19
  .is-padding-right-#{$i*4}
20
20
  +rem('padding-right', #{$i*4}px)
21
-
22
- // will delete next ver
23
- .is-mgb-#{$i*4}
24
- +rem('margin-bottom', #{$i*4}px)
25
- .is-mgt-#{$i*4}
26
- +rem('margin-top', #{$i*4}px)
27
- .is-mgl-#{$i*4}
28
- +rem('margin-left', #{$i*4}px)
29
- .is-mgr-#{$i*4}
30
- +rem('margin-right', #{$i*4}px)
31
- .is-pdb-#{$i*4}
32
- +rem('padding-bottom', #{$i*4}px)
33
- .is-pdt-#{$i*4}
34
- +rem('padding-top', #{$i*4}px)
35
- .is-pdl-#{$i*4}
36
- +rem('padding-left', #{$i*4}px)
37
- .is-pdr-#{$i*4}
38
- +rem('padding-right', #{$i*4}px)
21
+ .is-padding-horizontal-#{$i*4}
22
+ +padding(horizontal, #{$i*4}px)
@@ -1,3 +1,2 @@
1
- body
2
- .no-gutter-grids
3
- +grid-columns(0)
1
+ .no-gutter-grids
2
+ +grid-columns(0)
@@ -0,0 +1,34 @@
1
+ @function gutter_width($value)
2
+ @if $value == 0 or px($value)
3
+ @return true
4
+ @else
5
+ @return null
6
+
7
+ @function columns_count($value)
8
+ @if unitless_number($value)
9
+ @if $value > 0
10
+ @return true
11
+ @else
12
+ @return null
13
+ @else
14
+ @return null
15
+
16
+ @function break_point($value)
17
+ @if string($value) and ($value == 'xs' or $value == 'sm' or $value == 'md' or $value == 'lg' or $value == 'xl')
18
+ @return true
19
+ @else if list($value) and (nth($value, 1) == 'xs' or nth($value, 1) == 'sm' or nth($value, 1) == 'md' or nth($value, 1) == 'lg' or nth($value, 1) == 'xl')
20
+ @return true
21
+ @else
22
+ @return null
23
+
24
+ @function row_class_name($value)
25
+ @if string($value) and str-slice($value, 1, 1) == ('.')
26
+ @return true
27
+ @else
28
+ @return null
29
+
30
+ @function offsets($value)
31
+ @if string($value) and $value == offsets
32
+ @return true
33
+ @else
34
+ @return null
@@ -38,7 +38,6 @@ $screen-md-max: ($screen-lg-min - 1) !default
38
38
  @media only screen and (max-width: $screen-lg)
39
39
  @content
40
40
 
41
-
42
41
  // カラムのラッパーのクラス名
43
42
  $row-class-name: '.row' !default
44
43
  // カラムのネームスペース ※classの".(カンマ)"もネームスペースの一部
@@ -50,6 +49,7 @@ $break-point-xs-namespace: 'xs-' !default
50
49
  $break-point-sm-namespace: 'sm-' !default
51
50
  $break-point-md-namespace: 'md-' !default
52
51
  $break-point-lg-namespace: 'lg-' !default
52
+ $break-point-xl-namespace: 'xl-' !default
53
53
 
54
54
  // ブレイクポイントを配列にする
55
55
  $break-points: $break-point-xs-namespace, $break-point-sm-namespace, $break-point-md-namespace, $break-point-lg-namespace
@@ -67,7 +67,7 @@ $break-points: $break-point-xs-namespace, $break-point-sm-namespace, $break-poin
67
67
  @else if $screen-lg and $break-point == $break-point-lg-namespace
68
68
  @media only screen and (min-width: $screen-md)
69
69
  @content
70
- @else if $screen-xl and $break-point == $break-point-xl-namespace
70
+ @else if $break-point == $break-point-xl-namespace
71
71
  @media only screen and (min-width: $screen-lg)
72
72
  @content
73
73
 
@@ -77,24 +77,18 @@ $break-points: $break-point-xs-namespace, $break-point-sm-namespace, $break-poin
77
77
  +margin(horizontal, ($gutter-width / 2) * -1)
78
78
  // clearfix
79
79
  +rem('min-height', 1px)
80
- &:before,
81
- &:after
82
- display: table
83
- content: " "
84
- &:after
85
- clear: both
80
+ +pie-clearfix
86
81
 
87
82
  // カラムの基本設定
88
83
  =column($number, $columns-gutter-width: $gutter-width)
89
84
  +rem('width', 100 / $columns-count * $number * 1%)
90
- +rem('min-height', 1px)
91
85
  +padding(horizontal, $columns-gutter-width / 2)
92
- float: left
93
86
  +box-sizing(border-box)
87
+ float: left
94
88
 
95
89
  // カラムをサイズごとに作る
96
90
  @each $break-point in $break-points
97
- +break-points(#{$break-point})
91
+ +break-points($break-point)
98
92
  @for $i from 1 through $columns-count
99
93
  #{$column-namespace}#{$break-point}#{$i}
100
94
  +column($i)
@@ -105,45 +99,46 @@ $break-points: $break-point-xs-namespace, $break-point-sm-namespace, $break-poin
105
99
 
106
100
  // オフセットカラムをサイズごとに作る
107
101
  @each $break-point in $break-points
108
- +break-points(#{$break-point})
102
+ +break-points($break-point)
109
103
  @for $i from 1 through $columns-count
110
104
  #{$column-namespace}#{$break-point}#{$column-offset-namespace}#{$i}
111
105
  +column-offset($i)
112
106
 
113
- =grid-columns($columns-gutter-width: $gutter-width, $grid-columns-row-class-name: '.row')
114
- #{$grid-columns-row-class-name}
115
- // カラムのマージン分だけ両サイドにネガティブマージンを取る
116
- +margin(horizontal, ($columns-gutter-width / 2) * -1)
117
- // clearfix
118
- +rem('min-height', 1px)
119
- &:before,
120
- &:after
121
- display: table
122
- content: " "
123
- &:after
124
- clear: both
125
- // カラムをサイズごとに作る
126
- @each $break-point in $break-points
127
- +break-points(#{$break-point})
128
- @for $i from 1 through $columns-count
129
- #{$column-namespace}#{$break-point}#{$i}
130
- +column($i, $columns-gutter-width)
131
-
132
- =grid-column-offsets($columns-gutter-width: $gutter-width, $grid-columns-row-class-name: '.row')
107
+ =grid-columns($values)
108
+ $columns-gutter-width: 0 !default
109
+ $temp-columns-count: 12 !default
110
+ $temp-break-points: 'xs', 'sm', 'md', 'lg' !default
111
+ $grid-columns-row-class-name: '.row' !default
112
+ $offsets: false !default
113
+ @for $i from 1 through length($values)
114
+ @if gutter_width(nth($values, $i))
115
+ $columns-gutter-width: nth($values, $i)
116
+ @else if columns_count(nth($values, $i))
117
+ $temp-columns-count: nth($values, $i)
118
+ @else if break_point(nth($values, $i))
119
+ $temp-break-points: nth($values, $i)
120
+ @else if row_class_name(nth($values, $i))
121
+ $grid-columns-row-class-name: nth($values, $i)
122
+ @else if offsets(nth($values, $i))
123
+ $offsets: nth($values, $i)
133
124
  #{$grid-columns-row-class-name}
134
125
  // カラムのマージン分だけ両サイドにネガティブマージンを取る
135
126
  +margin(horizontal, ($columns-gutter-width / 2) * -1)
136
- // clearfix
137
- +rem('min-height', 1px)
138
- &:before,
139
- &:after
140
- display: table
141
- content: " "
142
- &:after
143
- clear: both
144
- // オフセットカラムをサイズごとに作る
145
- @each $break-point in $break-points
146
- +break-points(#{$break-point})
147
- @for $i from 1 through $columns-count
148
- #{$column-namespace}#{$break-point}#{$column-offset-namespace}#{$i}
149
- +column-offset($i)
127
+ +pie-clearfix
128
+ // カラムをサイズごとに作る
129
+ $break-points: ()
130
+ @each $temp-break-point in $temp-break-points
131
+ $break-points: append($break-points, if($temp-break-point == 'xs', $break-point-xs-namespace, null))
132
+ $break-points: append($break-points, if($temp-break-point == 'sm', $break-point-sm-namespace, null))
133
+ $break-points: append($break-points, if($temp-break-point == 'md', $break-point-md-namespace, null))
134
+ $break-points: append($break-points, if($temp-break-point == 'lg', $break-point-lg-namespace, null))
135
+ $break-points: append($break-points, if($temp-break-point == 'xl', $break-point-xl-namespace, null))
136
+ content: $temp-columns-count
137
+ @each $break-point in $break-points
138
+ +break-points($break-point)
139
+ @for $i from 1 through $temp-columns-count
140
+ #{$column-namespace}#{$break-point}#{$i}
141
+ +column($i, $columns-gutter-width)
142
+ @if $offsets
143
+ #{$column-namespace}#{$break-point}#{$column-offset-namespace}#{$i}
144
+ +column-offset($i)
@@ -1,8 +1,18 @@
1
- =dotted-line($color: rgba(#000, 1.0), $stripe: null)
2
- $stripe-width: if(length($stripe) >= 1, nth($stripe, 1), 1px)
3
- $gatter-width: if(length($stripe) >= 2, nth($stripe, 2), 4px)
4
- $size: if(length($stripe) >= 3, nth($stripe, 3), 1px)
5
- +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%)))
1
+ // +dotted-line(black, 20px 10px 4px)
2
+ =dotted-line($stripe-color: rgba(#000, 1), $stripe: null)
3
+ $stripe-width: optional_nth($stripe, 1, 1px)
4
+ $gatter-width: optional_nth($stripe, 2, 4px)
5
+ $size: optional_nth($stripe, 3, 1px)
6
+ @if length($stripe-color) == 1
7
+ +background-image(linear-gradient(left, color-stops($stripe-color, $stripe-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%)))
8
+ @else
9
+ @if percent(nth($stripe-color, 2))
10
+ $mix-stripe-color: darken(nth($stripe-color, 1), nth($stripe-color, 2))
11
+ +background-image(linear-gradient(left, color-stops($mix-stripe-color, $mix-stripe-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%)))
12
+ background-color: nth($stripe-color, 1)
13
+ @else if color(nth($stripe-color, 2))
14
+ +background-image(linear-gradient(left, color-stops(nth($stripe-color, 1), nth($stripe-color, 1) (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%)))
15
+ background-color: nth($stripe-color, 2)
6
16
  +background-size(($stripe-width + $gatter-width) ($stripe-width + $gatter-width))
7
17
  +rem('height', $size)
8
18
 
@@ -11,8 +21,12 @@
11
21
  @if length($stripe-color) == 1
12
22
  +background-image(linear-gradient(-45deg, $stripe-color 25%, transparent 25%, transparent 50%, $stripe-color 50%, $stripe-color 75%, transparent 75%, transparent))
13
23
  @else
14
- $mix-stripe-color: darken(nth($stripe-color, 1), nth($stripe-color, 2))
15
- +background-image(linear-gradient(-45deg, $mix-stripe-color 25%, transparent 25%, transparent 50%, $mix-stripe-color 50%, $mix-stripe-color 75%, transparent 75%, transparent))
16
- background-color: $background-color
24
+ @if percent(nth($stripe-color, 2))
25
+ $mix-stripe-color: darken(nth($stripe-color, 1), nth($stripe-color, 2))
26
+ +background-image(linear-gradient(-45deg, $mix-stripe-color 25%, transparent 25%, transparent 50%, $mix-stripe-color 50%, $mix-stripe-color 75%, transparent 75%, transparent))
27
+ background-color: nth($stripe-color, 1)
28
+ @else
29
+ +background-image(linear-gradient(-45deg, nth($stripe-color, 1) 25%, transparent 25%, transparent 50%, nth($stripe-color, 1) 50%, nth($stripe-color, 1) 75%, transparent 75%, transparent))
30
+ background-color: nth($stripe-color, 2)
17
31
  +background-size($size $size)
18
32
  +rem('height', $size)
@@ -1,4 +1,4 @@
1
- // https://github.com/twbs/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_responsive-utilities.scss
1
+ // https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_responsive-utilities.scss
2
2
 
3
3
  =responsive-visibility($parent)
4
4
  #{$parent}
@@ -83,7 +83,7 @@
83
83
  +filter(contrast(1.3) saturate(1.2) brightness(140%))
84
84
  position: relative
85
85
  &:after
86
- -webkit-filter: radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 92%, rgba(0, 0, 0, 0.69) 93%, rgba(0, 0, 0, 1) 100%)
86
+ +filter(radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 92%, rgba(0, 0, 0, 0.69) 93%, rgba(0, 0, 0, 1) 100%))
87
87
  +filter-setup
88
88
  +opacity(.9)
89
89
 
@@ -18,9 +18,9 @@ $rgbapng_px_size: 8 !default
18
18
  // layout
19
19
  ////////////////
20
20
 
21
- $wrapper-class-name: wrapper !default
22
- $wrapper-max-width: 1100px !default
23
- $wrapper-horizontal-padding: 16px !default
21
+ $container-class-name: container !default
22
+ $container-max-width: 1100px !default
23
+ $container-horizontal-padding: 16px !default
24
24
 
25
25
  /////////////////
26
26
  // selection
@@ -1,5 +1,5 @@
1
1
  module Middleman
2
2
  module Oulu
3
- VERSION = "0.5.22"
3
+ VERSION = "0.5.25"
4
4
  end
5
5
  end
@@ -4,10 +4,5 @@ require 'compass'
4
4
  module Middleman
5
5
  module Oulu
6
6
  require 'rgbapng'
7
- require 'SassyLists'
8
- require 'ceaser-easing'
9
- require 'modular-scale'
10
- require 'toolkit'
11
- require 'sassy-maps'
12
7
  end
13
8
  end
@@ -22,13 +22,7 @@ Gem::Specification.new do |spec|
22
22
  spec.add_dependency("rake")
23
23
  spec.add_dependency("sass", "~> 3.4.5")
24
24
  spec.add_dependency("compass", "~> 1.0.1")
25
-
26
25
  spec.add_dependency("oily_png")
27
- spec.add_dependency("ceaser-easing")
28
26
  spec.add_dependency("compass-rgbapng")
29
- spec.add_dependency("modular-scale")
30
- spec.add_dependency("SassyLists")
31
- spec.add_dependency("sassy-maps")
32
- spec.add_dependency("toolkit")
33
27
 
34
28
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: middleman-oulu
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.5.22
4
+ version: 0.5.25
5
5
  platform: ruby
6
6
  authors:
7
7
  - machida
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2014-12-27 00:00:00.000000000 Z
11
+ date: 2015-01-02 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
@@ -80,20 +80,6 @@ dependencies:
80
80
  - - ">="
81
81
  - !ruby/object:Gem::Version
82
82
  version: '0'
83
- - !ruby/object:Gem::Dependency
84
- name: ceaser-easing
85
- requirement: !ruby/object:Gem::Requirement
86
- requirements:
87
- - - ">="
88
- - !ruby/object:Gem::Version
89
- version: '0'
90
- type: :runtime
91
- prerelease: false
92
- version_requirements: !ruby/object:Gem::Requirement
93
- requirements:
94
- - - ">="
95
- - !ruby/object:Gem::Version
96
- version: '0'
97
83
  - !ruby/object:Gem::Dependency
98
84
  name: compass-rgbapng
99
85
  requirement: !ruby/object:Gem::Requirement
@@ -108,62 +94,6 @@ dependencies:
108
94
  - - ">="
109
95
  - !ruby/object:Gem::Version
110
96
  version: '0'
111
- - !ruby/object:Gem::Dependency
112
- name: modular-scale
113
- requirement: !ruby/object:Gem::Requirement
114
- requirements:
115
- - - ">="
116
- - !ruby/object:Gem::Version
117
- version: '0'
118
- type: :runtime
119
- prerelease: false
120
- version_requirements: !ruby/object:Gem::Requirement
121
- requirements:
122
- - - ">="
123
- - !ruby/object:Gem::Version
124
- version: '0'
125
- - !ruby/object:Gem::Dependency
126
- name: SassyLists
127
- requirement: !ruby/object:Gem::Requirement
128
- requirements:
129
- - - ">="
130
- - !ruby/object:Gem::Version
131
- version: '0'
132
- type: :runtime
133
- prerelease: false
134
- version_requirements: !ruby/object:Gem::Requirement
135
- requirements:
136
- - - ">="
137
- - !ruby/object:Gem::Version
138
- version: '0'
139
- - !ruby/object:Gem::Dependency
140
- name: sassy-maps
141
- requirement: !ruby/object:Gem::Requirement
142
- requirements:
143
- - - ">="
144
- - !ruby/object:Gem::Version
145
- version: '0'
146
- type: :runtime
147
- prerelease: false
148
- version_requirements: !ruby/object:Gem::Requirement
149
- requirements:
150
- - - ">="
151
- - !ruby/object:Gem::Version
152
- version: '0'
153
- - !ruby/object:Gem::Dependency
154
- name: toolkit
155
- requirement: !ruby/object:Gem::Requirement
156
- requirements:
157
- - - ">="
158
- - !ruby/object:Gem::Version
159
- version: '0'
160
- type: :runtime
161
- prerelease: false
162
- version_requirements: !ruby/object:Gem::Requirement
163
- requirements:
164
- - - ">="
165
- - !ruby/object:Gem::Version
166
- version: '0'
167
97
  description: This gem provides assets files for Middleman Project.
168
98
  email:
169
99
  - machidanohimitsu@gmail.com
@@ -218,8 +148,6 @@ files:
218
148
  - assets/stylesheets/_oulu-base.css.sass
219
149
  - assets/stylesheets/_oulu.css.sass
220
150
  - assets/stylesheets/helper/_base-helper.css.sass
221
- - assets/stylesheets/helper/_click-actions.css.sass
222
- - assets/stylesheets/helper/_fade-actions.css.sass
223
151
  - assets/stylesheets/helper/_margin-padding.css.sass
224
152
  - assets/stylesheets/helper/_no-gutter-grids.css.sass
225
153
  - assets/stylesheets/helper/_typoglaphy.css.sass
@@ -251,6 +179,7 @@ files:
251
179
  - assets/stylesheets/settings/functions/_color.css.sass
252
180
  - assets/stylesheets/settings/functions/_content.css.sass
253
181
  - assets/stylesheets/settings/functions/_cursor.css.sass
182
+ - assets/stylesheets/settings/functions/_grid.css.sass
254
183
  - assets/stylesheets/settings/functions/_image.css.sass
255
184
  - assets/stylesheets/settings/functions/_length.css.sass
256
185
  - assets/stylesheets/settings/functions/_list.css.sass
@@ -1,188 +0,0 @@
1
- .is-bounce-expansion
2
- +experimental('animation', bounce-expansion 1000ms linear both)
3
- +relative
4
-
5
- +keyframes(bounce-expansion)
6
- 0%
7
- $transform: matrix3d(1.4, 0, 0, 0, 0, 1.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
8
- +experimental('transform', $transform)
9
- 1.666667%
10
- $transform: matrix3d(1.34471, 0, 0, 0, 0, 1.34471, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
11
- +experimental('transform', $transform)
12
- 3.333333%
13
- $transform: matrix3d(1.28364, 0, 0, 0, 0, 1.28364, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
14
- +experimental('transform', $transform)
15
- 5%
16
- $transform: matrix3d(1.2213, 0, 0, 0, 0, 1.2213, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
17
- +experimental('transform', $transform)
18
- 6.666667%
19
- $transform: matrix3d(1.16126, 0, 0, 0, 0, 1.16126, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
20
- +experimental('transform', $transform)
21
- 8.333333%
22
- $transform: matrix3d(1.10616, 0, 0, 0, 0, 1.10616, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
23
- +experimental('transform', $transform)
24
- 10%
25
- $transform: matrix3d(1.05781, 0, 0, 0, 0, 1.05781, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
26
- +experimental('transform', $transform)
27
- 11.666667%
28
- $transform: matrix3d(1.01723, 0, 0, 0, 0, 1.01723, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
29
- +experimental('transform', $transform)
30
- 13.333333%
31
- $transform: matrix3d(0.98482, 0, 0, 0, 0, 0.98482, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
32
- +experimental('transform', $transform)
33
- 15%
34
- $transform: matrix3d(0.96047, 0, 0, 0, 0, 0.96047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
35
- +experimental('transform', $transform)
36
- 16.666667%
37
- $transform: matrix3d(0.94365, 0, 0, 0, 0, 0.94365, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
38
- +experimental('transform', $transform)
39
- 18.333333%
40
- $transform: matrix3d(0.93356, 0, 0, 0, 0, 0.93356, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
41
- +experimental('transform', $transform)
42
- 20%
43
- $transform: matrix3d(0.92922, 0, 0, 0, 0, 0.92922, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
44
- +experimental('transform', $transform)
45
- 21.666667%
46
- $transform: matrix3d(0.92959, 0, 0, 0, 0, 0.92959, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
47
- +experimental('transform', $transform)
48
- 23.333333%
49
- $transform: matrix3d(0.93358, 0, 0, 0, 0, 0.93358, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
50
- +experimental('transform', $transform)
51
- 25%
52
- $transform: matrix3d(0.94017, 0, 0, 0, 0, 0.94017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
53
- +experimental('transform', $transform)
54
- 26.666667%
55
- $transform: matrix3d(0.94844, 0, 0, 0, 0, 0.94844, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
56
- +experimental('transform', $transform)
57
- 28.333333%
58
- $transform: matrix3d(0.95758, 0, 0, 0, 0, 0.95758, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
59
- +experimental('transform', $transform)
60
- 30%
61
- $transform: matrix3d(0.9669, 0, 0, 0, 0, 0.9669, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
62
- +experimental('transform', $transform)
63
- 31.666667%
64
- $transform: matrix3d(0.97588, 0, 0, 0, 0, 0.97588, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
65
- +experimental('transform', $transform)
66
- 33.333333%
67
- $transform: matrix3d(0.98412, 0, 0, 0, 0, 0.98412, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
68
- +experimental('transform', $transform)
69
- 35%
70
- $transform: matrix3d(0.99135, 0, 0, 0, 0, 0.99135, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
71
- +experimental('transform', $transform)
72
- 36.666667%
73
- $transform: matrix3d(0.99742, 0, 0, 0, 0, 0.99742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
74
- +experimental('transform', $transform)
75
- 38.333333%
76
- $transform: matrix3d(1.00227, 0, 0, 0, 0, 1.00227, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
77
- +experimental('transform', $transform)
78
- 40%
79
- $transform: matrix3d(1.00591, 0, 0, 0, 0, 1.00591, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
80
- +experimental('transform', $transform)
81
- 41.666667%
82
- $transform: matrix3d(1.00843, 0, 0, 0, 0, 1.00843, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
83
- +experimental('transform', $transform)
84
- 43.333333%
85
- $transform: matrix3d(1.00994, 0, 0, 0, 0, 1.00994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
86
- +experimental('transform', $transform)
87
- 45%
88
- $transform: matrix3d(1.01059, 0, 0, 0, 0, 1.01059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
89
- +experimental('transform', $transform)
90
- 46.666667%
91
- $transform: matrix3d(1.01053, 0, 0, 0, 0, 1.01053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
92
- +experimental('transform', $transform)
93
- 48.333333%
94
- $transform: matrix3d(1.00993, 0, 0, 0, 0, 1.00993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
95
- +experimental('transform', $transform)
96
- 50%
97
- $transform: matrix3d(1.00895, 0, 0, 0, 0, 1.00895, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
98
- +experimental('transform', $transform)
99
- 51.666667%
100
- $transform: matrix3d(1.00771, 0, 0, 0, 0, 1.00771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
101
- +experimental('transform', $transform)
102
- 53.333333%
103
- $transform: matrix3d(1.00635, 0, 0, 0, 0, 1.00635, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
104
- +experimental('transform', $transform)
105
- 55%
106
- $transform: matrix3d(1.00495, 0, 0, 0, 0, 1.00495, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
107
- +experimental('transform', $transform)
108
- 56.666667%
109
- $transform: matrix3d(1.00361, 0, 0, 0, 0, 1.00361, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
110
- +experimental('transform', $transform)
111
- 58.333333%
112
- $transform: matrix3d(1.00237, 0, 0, 0, 0, 1.00237, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
113
- +experimental('transform', $transform)
114
- 60%
115
- $transform: matrix3d(1.00129, 0, 0, 0, 0, 1.00129, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
116
- +experimental('transform', $transform)
117
- 61.666667%
118
- $transform: matrix3d(1.00039, 0, 0, 0, 0, 1.00039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
119
- +experimental('transform', $transform)
120
- 63.333333%
121
- $transform: matrix3d(0.99966, 0, 0, 0, 0, 0.99966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
122
- +experimental('transform', $transform)
123
- 65%
124
- $transform: matrix3d(0.99912, 0, 0, 0, 0, 0.99912, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
125
- +experimental('transform', $transform)
126
- 66.666667%
127
- $transform: matrix3d(0.99874, 0, 0, 0, 0, 0.99874, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
128
- +experimental('transform', $transform)
129
- 68.333333%
130
- $transform: matrix3d(0.99851, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
131
- +experimental('transform', $transform)
132
- 70%
133
- $transform: matrix3d(0.99842, 0, 0, 0, 0, 0.99842, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
134
- +experimental('transform', $transform)
135
- 71.666667%
136
- $transform: matrix3d(0.99842, 0, 0, 0, 0, 0.99842, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
137
- +experimental('transform', $transform)
138
- 73.333333%
139
- $transform: matrix3d(0.99851, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
140
- +experimental('transform', $transform)
141
- 75%
142
- $transform: matrix3d(0.99866, 0, 0, 0, 0, 0.99866, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
143
- +experimental('transform', $transform)
144
- 76.666667%
145
- $transform: matrix3d(0.99885, 0, 0, 0, 0, 0.99885, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
146
- +experimental('transform', $transform)
147
- 78.333333%
148
- $transform: matrix3d(0.99905, 0, 0, 0, 0, 0.99905, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
149
- +experimental('transform', $transform)
150
- 80%
151
- $transform: matrix3d(0.99926, 0, 0, 0, 0, 0.99926, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
152
- +experimental('transform', $transform)
153
- 81.666667%
154
- $transform: matrix3d(0.99946, 0, 0, 0, 0, 0.99946, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
155
- +experimental('transform', $transform)
156
- 83.333333%
157
- $transform: matrix3d(0.99964, 0, 0, 0, 0, 0.99964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
158
- +experimental('transform', $transform)
159
- 85%
160
- $transform: matrix3d(0.99981, 0, 0, 0, 0, 0.99981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
161
- +experimental('transform', $transform)
162
- 86.666667%
163
- $transform: matrix3d(0.99994, 0, 0, 0, 0, 0.99994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
164
- +experimental('transform', $transform)
165
- 88.333333%
166
- $transform: matrix3d(1.00005, 0, 0, 0, 0, 1.00005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
167
- +experimental('transform', $transform)
168
- 90%
169
- $transform: matrix3d(1.00013, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
170
- +experimental('transform', $transform)
171
- 91.666667%
172
- $transform: matrix3d(1.00019, 0, 0, 0, 0, 1.00019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
173
- +experimental('transform', $transform)
174
- 93.333333%
175
- $transform: matrix3d(1.00022, 0, 0, 0, 0, 1.00022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
176
- +experimental('transform', $transform)
177
- 95%
178
- $transform: matrix3d(1.00024, 0, 0, 0, 0, 1.00024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
179
- +experimental('transform', $transform)
180
- 96.666667%
181
- $transform: matrix3d(1.00024, 0, 0, 0, 0, 1.00024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
182
- +experimental('transform', $transform)
183
- 98.333333%
184
- $transform: matrix3d(1.00022, 0, 0, 0, 0, 1.00022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
185
- +experimental('transform', $transform)
186
- 100%
187
- $transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
188
- +experimental('transform', $transform)
@@ -1,30 +0,0 @@
1
- //
2
- animation-name 名前
3
- animation-duration 秒
4
- animation-timing-function 動き方
5
- animation-delay 遅延(秒)
6
- animation-iteration-count 繰り返し回数(無限はinfinite)
7
- animation-direction 反転alternate 通常normal
8
-
9
- <animation-name>
10
- <animation-duration>
11
- <animation-timing-function>
12
- <animation-delay>
13
- <animation-iteration-count>
14
- <animation-direction>
15
- <animation-fill>
16
-
17
- .is-fadeout
18
- +experimental('animation', fadeout 2s linear 0s 1 alternate forwards)
19
- height: 0
20
- min-height: 0
21
- overflow: hidden
22
- +relative
23
-
24
- +keyframes(fadeout)
25
- 0%
26
- +opacity(1)
27
- height: auto
28
- 100%
29
- +opacity(0)
30
- height: 0