diff --git a/css/animation.css b/css/animation.css index bc9f2b7..d72e1d1 100755 --- a/css/animation.css +++ b/css/animation.css @@ -8,21 +8,21 @@ login-wrapと、中身の大きさは合わせること。 ```
-
+ + +``` + +## 下部揃え + +``` +
+
+
+ flex-xs-20 +
+
+
+
+ flex-lg-18 +
+
+
+
+ flex-lg-2 +
+
+
+ +``` + +## 中央揃え + +``` +
+
+
+ flex-xs-20 +
+
+
+
+ flex-lg-18 +
+
+
+
+ flex-lg-2 +
+
+
+ +``` + +## 全均等配置 + +``` +
+
+
+ flex-xs-20 +
+
+
+
+ flex-lg-18 +
+
+
+
+ flex-lg-2 +
+
+
+ +``` + + +## 中央均等配置 + +``` +
+
+
+ flex-xs-20 +
+
+
+
+ flex-lg-18 +
+
+
+
+ flex-lg-2 +
+
+
+ +``` +*/ + +.row{ + + display: flex; + + flex-direction: row; + -webkit-flex-direction: row; + + flex-wrap: wrap; + + box-sizing: border-box; +} + +.row.left{ + justify-content: flex-start; +} +.row.right{ + justify-content: flex-end; +} +.row.center{ + justify-content: center; +} +.row.around{ + justify-content: space-around; +} +.row.between{ + justify-content: space-between; +} +.row.top{ + align-items: flex-start; +} +.row.content-top{ + align-content: flex-start; +} +.row.content-bottom{ + align-content: flex-end; +} +.row.content-center{ + align-content: center; +} +.row.content-between{ + align-content: between; +} +.row.content-around{ + align-content: around; +} +.row.bottom{ + align-items: flex-end; +} +.row.middle{ + align-items: center; +} +.row.baseline{ + align-items: baseline; +} +.row.stretch{ + align-items: stretch; +} +.row.reverse{ + flex-direction: row-reverse; + -webkit-flex-direction: row-reverse; +} + +.row.nowrap, .column.nowrap{ + flex-wrap: nowrap; +} + +.row.wrap-reverse, .column.wrap-reverse{ + flex-wrap: wrap-reverse; +} + +.column{ + + display: flex; + + flex-direction: column; + -webkit-flex-direction: column; + + flex-wrap: wrap; + + box-sizing: border-box; +} + +.column.reverse{ + flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; +} + +.flex{ + box-sizing: border-box; + align-self: auto; + padding: 4px; + max-width: 100%; + flex: 100%; +} +.hidden-xs{ + display: none; +} + +.flex-xs-auto{ + display: block; + flex: 1; +} +.flex-xs-20{ + display: block; + max-width: 100%; + flex: 100%; +} +.flex-xs-19{ + display: block; + max-width: 95%; + flex: 0 0 95%; +} +.flex-xs-18{ + display: block; + max-width: 90%; + flex: 0 0 90%; +} +.flex-xs-17{ + display: block; + max-width: 85%; + flex: 0 0 85%; +} +.flex-xs-16{ + display: block; + max-width: 80%; + flex: 0 0 80%; +} +.flex-xs-15{ + display: block; + max-width: 75%; + flex: 0 0 75%; +} +.flex-xs-14{ + display: block; + max-width: 70%; + flex: 0 0 70%; +} +.flex-xs-13{ + display: block; + max-width: 65%; + flex: 0 0 65%; +} +.flex-xs-12{ + display: block; + max-width: 60%; + flex: 0 0 60%; +} +.flex-xs-11{ + display: block; + max-width: 55%; + flex: 0 0 55%; +} +.flex-xs-10{ + display: block; + max-width: 50%; + flex: 0 0 50%; +} +.flex-xs-9{ + display: block; + max-width: 45%; + flex: 0 0 45%; +} +.flex-xs-8{ + display: block; + max-width: 40%; + flex: 0 0 40%; +} +.flex-xs-7{ + display: block; + max-width: 35%; + flex: 0 0 35%; +} +.flex-xs-6{ + display: block; + max-width: 30%; + flex: 0 0 30%; +} +.flex-xs-5{ + display: block; + max-width: 25%; + flex: 0 0 25%; +} +.flex-xs-4{ + display: block; + max-width: 20%; + flex: 0 0 20%; +} +.flex-xs-3{ + display: block; + max-width: 15%; + flex: 0 0 15%; +} +.flex-xs-2{ + display: block; + max-width: 10%; + flex: 0 0 10%; +} +.flex-xs-1{ + display: block; + max-width: 5%; + flex: 0 0 5%; +} + +@media (min-width: 768px){ + .hidden-sm{ + display: none; + } + .flex-sm-auto{ + display: block; + flex: 1; + } + .flex-sm-20{ + display: block; + max-width: 100%; + flex: 100%; + } + .flex-sm-19{ + display: block; + max-width: 95%; + flex: 0 0 95%; + } + .flex-sm-18{ + display: block; + max-width: 90%; + flex: 0 0 90%; + } + .flex-sm-17{ + display: block; + max-width: 85%; + flex: 0 0 85%; + } + .flex-sm-16{ + display: block; + max-width: 80%; + flex: 0 0 80%; + } + .flex-sm-15{ + display: block; + max-width: 75%; + flex: 0 0 75%; + } + .flex-sm-14{ + display: block; + max-width: 70%; + flex: 0 0 70%; + } + .flex-sm-13{ + display: block; + max-width: 65%; + flex: 0 0 65%; + } + .flex-sm-12{ + display: block; + max-width: 60%; + flex: 0 0 60%; + } + .flex-sm-11{ + display: block; + max-width: 55%; + flex: 0 0 55%; + } + .flex-sm-10{ + display: block; + max-width: 50%; + flex: 0 0 50%; + } + .flex-sm-9{ + display: block; + max-width: 45%; + flex: 0 0 45%; + } + .flex-sm-8{ + display: block; + max-width: 40%; + flex: 0 0 40%; + } + .flex-sm-7{ + display: block; + max-width: 35%; + flex: 0 0 35%; + } + .flex-sm-6{ + display: block; + max-width: 30%; + flex: 0 0 30%; + } + .flex-sm-5{ + display: block; + max-width: 25%; + flex: 0 0 25%; + } + .flex-sm-4{ + display: block; + max-width: 20%; + flex: 0 0 20%; + } + .flex-sm-3{ + display: block; + max-width: 15%; + flex: 0 0 15%; + } + .flex-sm-2{ + display: block; + max-width: 10%; + flex: 0 0 10%; + } + .flex-sm-1{ + display: block; + max-width: 5%; + flex: 0 0 5%; + } +} + +@media (min-width: 960px){ + .hidden-md{ + display: none; + } + .flex-md-auto{ + display: block; + flex: 1; + } + .flex-md-20{ + display: block; + max-width: 100%; + flex: 100%; + } + .flex-md-19{ + display: block; + max-width: 95%; + flex: 0 0 95%; + } + .flex-md-18{ + display: block; + max-width: 90%; + flex: 0 0 90%; + } + .flex-md-17{ + display: block; + max-width: 85%; + flex: 0 0 85%; + } + .flex-md-16{ + display: block; + max-width: 80%; + flex: 0 0 80%; + } + .flex-md-15{ + display: block; + max-width: 75%; + flex: 0 0 75%; + } + .flex-md-14{ + display: block; + max-width: 70%; + flex: 0 0 70%; + } + .flex-md-13{ + display: block; + max-width: 65%; + flex: 0 0 65%; + } + .flex-md-12{ + display: block; + max-width: 60%; + flex: 0 0 60%; + } + .flex-md-11{ + display: block; + max-width: 55%; + flex: 0 0 55%; + } + .flex-md-10{ + display: block; + max-width: 50%; + flex: 0 0 50%; + } + .flex-md-9{ + display: block; + max-width: 45%; + flex: 0 0 45%; + } + .flex-md-8{ + display: block; + max-width: 40%; + flex: 0 0 40%; + } + .flex-md-7{ + display: block; + max-width: 35%; + flex: 0 0 35%; + } + .flex-md-6{ + display: block; + max-width: 30%; + flex: 0 0 30%; + } + .flex-md-5{ + display: block; + max-width: 25%; + flex: 0 0 25%; + } + .flex-md-4{ + display: block; + max-width: 20%; + flex: 0 0 20%; + } + .flex-md-3{ + display: block; + max-width: 15%; + flex: 0 0 15%; + } + .flex-md-2{ + display: block; + max-width: 10%; + flex: 0 0 10%; + } + .flex-md-1{ + display: block; + max-width: 5%; + flex: 0 0 5%; + } +} + +@media (min-width: 1280px){ + .hidden-lg{ + display: none; + } + .flex-lg-auto{ + display: block; + flex: 1; + } + .flex-lg-20{ + display: block; + max-width: 100%; + flex: 100%; + } + .flex-lg-19{ + display: block; + max-width: 95%; + flex: 0 0 95%; + } + .flex-lg-18{ + display: block; + max-width: 90%; + flex: 0 0 90%; + } + .flex-lg-17{ + display: block; + max-width: 85%; + flex: 0 0 85%; + } + .flex-lg-16{ + display: block; + max-width: 80%; + flex: 0 0 80%; + } + .flex-lg-15{ + display: block; + max-width: 75%; + flex: 0 0 75%; + } + .flex-lg-14{ + display: block; + max-width: 70%; + flex: 0 0 70%; + } + .flex-lg-13{ + display: block; + max-width: 65%; + flex: 0 0 65%; + } + .flex-lg-12{ + display: block; + max-width: 60%; + flex: 0 0 60%; + } + .flex-lg-11{ + display: block; + max-width: 55%; + flex: 0 0 55%; + } + .flex-lg-10{ + display: block; + max-width: 50%; + flex: 0 0 50%; + } + .flex-lg-9{ + display: block; + max-width: 45%; + flex: 0 0 45%; + } + .flex-lg-8{ + display: block; + max-width: 40%; + flex: 0 0 40%; + } + .flex-lg-7{ + display: block; + max-width: 35%; + flex: 0 0 35%; + } + .flex-lg-6{ + display: block; + max-width: 30%; + flex: 0 0 30%; + } + .flex-lg-5{ + display: block; + max-width: 25%; + flex: 0 0 25%; + } + .flex-lg-4{ + display: block; + max-width: 20%; + flex: 0 0 20%; + } + .flex-lg-3{ + display: block; + max-width: 15%; + flex: 0 0 15%; + } + .flex-lg-2{ + display: block; + max-width: 10%; + flex: 0 0 10%; + } + .flex-lg-1{ + display: block; + max-width: 5%; + flex: 0 0 5%; + } +} + diff --git a/css/frame.css b/css/frame.css index 7e2173e..71d0adc 100644 --- a/css/frame.css +++ b/css/frame.css @@ -1,26 +1,34 @@ - /* -## Frame - frameは、基本的な構造設計に用いるクラスです。
z*クラスとともに用いることで、影をつけることができます。 ``` -
-
- -
-
- -
-
- - -
-
- - -
+
+
+
+ z1 frame +
+
+
+
+ z2 frame +
+
+
+
+ z3 frame +
+
+
+
+ z4 frame +
+
+
+
+ z5 frame +
+
``` */ diff --git a/css/layout.css b/css/layout.css old mode 100755 new mode 100644 index 8c0bfdd..6f08a41 --- a/css/layout.css +++ b/css/layout.css @@ -1,1111 +1,19 @@ - /* -# Layout - - -## Container - -一番大きな枠組みのcontainer - -``` -
-
This is Container
-
-
-
This is not Container
-``` -*/ - -.container { - max-width: 100%; - margin-right: auto; - margin-left: auto; -} - -@media (min-width: 768px) { - .container { - width: 750px; - } -} -@media (min-width: 992px) { - .container { - width: 970px; - } -} -@media (min-width: 1200px) { - .container { - width: 1170px; - } -} -.container-fluid { - margin-right: auto; - margin-left: auto; -} - -/* -## フレキシブルデザイン - -``` -
-
-
- flex-xs-auto -
-
-
-
- flex-xs-auto -
-
-
- -
-
-
- flex -
-
-
-
- flex -
-
-
-
- flex -
-
-
- -``` - -## 横並びフレキシブルデザイン - -横並びで揃える時 - -``` -
-
-
- flex-xs-20 -
-
-
-
- flex-lg-18 -
-
-
-
- flex-lg-2 -
-
-
-
- flex-md-10 -
-
-
-
- flex-md-10 -
-
-
-
- flex-sm-6 -
-
-
-
- flex-sm-6 -
-
-
-
- flex-sm-6 -
-
-
-
- flex-sm-2 -
-
-
- -``` - -## 横並びフレキシブルデザイン(反転) - -``` -
-
-
- flex-xs-12 -
-
-
-
- flex-xs-8 -
-
-
-
- flex-md-5 -
-
-
-
- flex-md-15 -
-
-
-``` - +# BaseLayout -## 縦並びフレキシブルデザイン +## 縦横中央に要素を配置する ``` -
-
-
- flex-xs-20 -
-
-
-
- flex-lg-18 -
-
-
-
- flex-lg-2 -
-
-
-
- flex-md-10 -
-
-
-
- flex-md-10 -
-
-
-
- flex-sm-6 -
-
-
-
- flex-sm-6 -
-
-
-
- flex-sm-6 -
-
-
-
- flex-sm-2 -
-
-
-``` - - -## 縦並びフレキシブルデザイン(反転) - -``` -
-
-
- flex-xs-12 -
-
-
-
- flex-xs-8 -
-
-
-
- flex-md-5 -
-
-
-
- flex-md-15 -
-
-
-``` - -## 折り返さないフレキシブル - -``` -
-
-
- flex-xs-12 -
-
-
-
- flex-xs-8 -
-
-
-
- flex-md-5 -
-
-
-
- flex-md-15 -
-
-
- -``` - -## 折り返す向きが逆なフレキシブル - -``` -
-
-
- flex-xs-12 -
-
-
-
- flex-xs-8 -
-
-
-
- flex-md-5 +
+
+
+
+
+ hello +
+
- ``` -## 特定の条件下で見えなくする - -``` -
- - - - -
- -``` -# グリッドデザイン - -## 中央寄せ - -``` -
-
1
-
2
-
3
-
4
-
5
-
6
-
-``` - -## 左寄せ - -``` -
-
1
-
2
-
3
-
4
-
5
-
6
-
-``` - -## 右寄せ - -``` -
-
1
-
2
-
3
-
4
-
5
-
6
-
-``` - -## 全均一配置 - -``` -
-
1
-
2
-
3
-
4
-
5
-
6
-
-``` - -## 中央均一配置 - -``` -
-
1
-
2
-
3
-
4
-
5
-
6
-
-``` - -## 縦方向上部揃え - -``` -
-
1
-
2
-
3
-
4
-
5
-
6
-
-``` - -## 縦方向下部揃え - -``` -
-
1
-
2
-
3
-
4
-
5
-
6
-
-``` - -## 縦方向中央揃え - -``` -
-
1
-
2
-
3
-
4
-
5
-
6
-
-``` - -## 縦方向ベースライン揃え - -``` -
-
1
-
2
-
3
-
4
-
5
-
6
-
-``` - - -## 縦方向高さ合わせ - -子要素に高さが指定されてない(paddingなどだけの指定された)場合、 -自動的にすべての高さを合わせる - -``` -
-
1
-
2
-
3
-
4
-
5
-
6
-
-
-
- flex-xs-20 -
-
-
-
- flex-lg-18 -
-
-
-
- flex-lg-2 -
-
-
- -``` - -## 下部揃え - -``` -
-
-
- flex-xs-20 -
-
-
-
- flex-lg-18 -
-
-
-
- flex-lg-2 -
-
-
- -``` - -## 中央揃え - -``` -
-
-
- flex-xs-20 -
-
-
-
- flex-lg-18 -
-
-
-
- flex-lg-2 -
-
-
- -``` - -## 全均等配置 - -``` -
-
-
- flex-xs-20 -
-
-
-
- flex-lg-18 -
-
-
-
- flex-lg-2 -
-
-
- -``` - - -## 中央均等配置 - -``` -
-
-
- flex-xs-20 -
-
-
-
- flex-lg-18 -
-
-
-
- flex-lg-2 -
-
-
- -``` -*/ - -.row{ - - display: flex; - - flex-direction: row; - -webkit-flex-direction: row; - - flex-wrap: wrap; - - box-sizing: border-box; -} - -.row.left{ - justify-content: flex-start; -} -.row.right{ - justify-content: flex-end; -} -.row.center{ - justify-content: center; -} -.row.around{ - justify-content: space-around; -} -.row.between{ - justify-content: space-between; -} -.row.top{ - align-items: flex-start; -} -.row.content-top{ - align-content: flex-start; -} -.row.content-bottom{ - align-content: flex-end; -} -.row.content-center{ - align-content: center; -} -.row.content-between{ - align-content: between; -} -.row.content-around{ - align-content: around; -} -.row.bottom{ - align-items: flex-end; -} -.row.middle{ - align-items: center; -} -.row.baseline{ - align-items: baseline; -} -.row.stretch{ - align-items: stretch; -} -.row.reverse{ - flex-direction: row-reverse; - -webkit-flex-direction: row-reverse; -} - -.row.nowrap, .column.nowrap{ - flex-wrap: nowrap; -} - -.row.wrap-reverse, .column.wrap-reverse{ - flex-wrap: wrap-reverse; -} - -.column{ - - display: flex; - - flex-direction: column; - -webkit-flex-direction: column; - - flex-wrap: wrap; - - box-sizing: border-box; -} - -.column.reverse{ - flex-direction: column-reverse; - -webkit-flex-direction: column-reverse; -} - -.flex{ - box-sizing: border-box; - align-self: auto; - padding: 4px; - max-width: 100%; - flex: 100%; -} -.hidden-xs{ - display: none; -} - -.flex-xs-auto{ - display: block; - flex: 1; -} -.flex-xs-20{ - display: block; - max-width: 100%; - flex: 100%; -} -.flex-xs-19{ - display: block; - max-width: 95%; - flex: 0 0 95%; -} -.flex-xs-18{ - display: block; - max-width: 90%; - flex: 0 0 90%; -} -.flex-xs-17{ - display: block; - max-width: 85%; - flex: 0 0 85%; -} -.flex-xs-16{ - display: block; - max-width: 80%; - flex: 0 0 80%; -} -.flex-xs-15{ - display: block; - max-width: 75%; - flex: 0 0 75%; -} -.flex-xs-14{ - display: block; - max-width: 70%; - flex: 0 0 70%; -} -.flex-xs-13{ - display: block; - max-width: 65%; - flex: 0 0 65%; -} -.flex-xs-12{ - display: block; - max-width: 60%; - flex: 0 0 60%; -} -.flex-xs-11{ - display: block; - max-width: 55%; - flex: 0 0 55%; -} -.flex-xs-10{ - display: block; - max-width: 50%; - flex: 0 0 50%; -} -.flex-xs-9{ - display: block; - max-width: 45%; - flex: 0 0 45%; -} -.flex-xs-8{ - display: block; - max-width: 40%; - flex: 0 0 40%; -} -.flex-xs-7{ - display: block; - max-width: 35%; - flex: 0 0 35%; -} -.flex-xs-6{ - display: block; - max-width: 30%; - flex: 0 0 30%; -} -.flex-xs-5{ - display: block; - max-width: 25%; - flex: 0 0 25%; -} -.flex-xs-4{ - display: block; - max-width: 20%; - flex: 0 0 20%; -} -.flex-xs-3{ - display: block; - max-width: 15%; - flex: 0 0 15%; -} -.flex-xs-2{ - display: block; - max-width: 10%; - flex: 0 0 10%; -} -.flex-xs-1{ - display: block; - max-width: 5%; - flex: 0 0 5%; -} - -@media (min-width: 768px){ - .hidden-sm{ - display: none; - } - .flex-sm-auto{ - display: block; - flex: 1; - } - .flex-sm-20{ - display: block; - max-width: 100%; - flex: 100%; - } - .flex-sm-19{ - display: block; - max-width: 95%; - flex: 0 0 95%; - } - .flex-sm-18{ - display: block; - max-width: 90%; - flex: 0 0 90%; - } - .flex-sm-17{ - display: block; - max-width: 85%; - flex: 0 0 85%; - } - .flex-sm-16{ - display: block; - max-width: 80%; - flex: 0 0 80%; - } - .flex-sm-15{ - display: block; - max-width: 75%; - flex: 0 0 75%; - } - .flex-sm-14{ - display: block; - max-width: 70%; - flex: 0 0 70%; - } - .flex-sm-13{ - display: block; - max-width: 65%; - flex: 0 0 65%; - } - .flex-sm-12{ - display: block; - max-width: 60%; - flex: 0 0 60%; - } - .flex-sm-11{ - display: block; - max-width: 55%; - flex: 0 0 55%; - } - .flex-sm-10{ - display: block; - max-width: 50%; - flex: 0 0 50%; - } - .flex-sm-9{ - display: block; - max-width: 45%; - flex: 0 0 45%; - } - .flex-sm-8{ - display: block; - max-width: 40%; - flex: 0 0 40%; - } - .flex-sm-7{ - display: block; - max-width: 35%; - flex: 0 0 35%; - } - .flex-sm-6{ - display: block; - max-width: 30%; - flex: 0 0 30%; - } - .flex-sm-5{ - display: block; - max-width: 25%; - flex: 0 0 25%; - } - .flex-sm-4{ - display: block; - max-width: 20%; - flex: 0 0 20%; - } - .flex-sm-3{ - display: block; - max-width: 15%; - flex: 0 0 15%; - } - .flex-sm-2{ - display: block; - max-width: 10%; - flex: 0 0 10%; - } - .flex-sm-1{ - display: block; - max-width: 5%; - flex: 0 0 5%; - } -} - -@media (min-width: 960px){ - .hidden-md{ - display: none; - } - .flex-md-auto{ - display: block; - flex: 1; - } - .flex-md-20{ - display: block; - max-width: 100%; - flex: 100%; - } - .flex-md-19{ - display: block; - max-width: 95%; - flex: 0 0 95%; - } - .flex-md-18{ - display: block; - max-width: 90%; - flex: 0 0 90%; - } - .flex-md-17{ - display: block; - max-width: 85%; - flex: 0 0 85%; - } - .flex-md-16{ - display: block; - max-width: 80%; - flex: 0 0 80%; - } - .flex-md-15{ - display: block; - max-width: 75%; - flex: 0 0 75%; - } - .flex-md-14{ - display: block; - max-width: 70%; - flex: 0 0 70%; - } - .flex-md-13{ - display: block; - max-width: 65%; - flex: 0 0 65%; - } - .flex-md-12{ - display: block; - max-width: 60%; - flex: 0 0 60%; - } - .flex-md-11{ - display: block; - max-width: 55%; - flex: 0 0 55%; - } - .flex-md-10{ - display: block; - max-width: 50%; - flex: 0 0 50%; - } - .flex-md-9{ - display: block; - max-width: 45%; - flex: 0 0 45%; - } - .flex-md-8{ - display: block; - max-width: 40%; - flex: 0 0 40%; - } - .flex-md-7{ - display: block; - max-width: 35%; - flex: 0 0 35%; - } - .flex-md-6{ - display: block; - max-width: 30%; - flex: 0 0 30%; - } - .flex-md-5{ - display: block; - max-width: 25%; - flex: 0 0 25%; - } - .flex-md-4{ - display: block; - max-width: 20%; - flex: 0 0 20%; - } - .flex-md-3{ - display: block; - max-width: 15%; - flex: 0 0 15%; - } - .flex-md-2{ - display: block; - max-width: 10%; - flex: 0 0 10%; - } - .flex-md-1{ - display: block; - max-width: 5%; - flex: 0 0 5%; - } -} - -@media (min-width: 1280px){ - .hidden-lg{ - display: none; - } - .flex-lg-auto{ - display: block; - flex: 1; - } - .flex-lg-20{ - display: block; - max-width: 100%; - flex: 100%; - } - .flex-lg-19{ - display: block; - max-width: 95%; - flex: 0 0 95%; - } - .flex-lg-18{ - display: block; - max-width: 90%; - flex: 0 0 90%; - } - .flex-lg-17{ - display: block; - max-width: 85%; - flex: 0 0 85%; - } - .flex-lg-16{ - display: block; - max-width: 80%; - flex: 0 0 80%; - } - .flex-lg-15{ - display: block; - max-width: 75%; - flex: 0 0 75%; - } - .flex-lg-14{ - display: block; - max-width: 70%; - flex: 0 0 70%; - } - .flex-lg-13{ - display: block; - max-width: 65%; - flex: 0 0 65%; - } - .flex-lg-12{ - display: block; - max-width: 60%; - flex: 0 0 60%; - } - .flex-lg-11{ - display: block; - max-width: 55%; - flex: 0 0 55%; - } - .flex-lg-10{ - display: block; - max-width: 50%; - flex: 0 0 50%; - } - .flex-lg-9{ - display: block; - max-width: 45%; - flex: 0 0 45%; - } - .flex-lg-8{ - display: block; - max-width: 40%; - flex: 0 0 40%; - } - .flex-lg-7{ - display: block; - max-width: 35%; - flex: 0 0 35%; - } - .flex-lg-6{ - display: block; - max-width: 30%; - flex: 0 0 30%; - } - .flex-lg-5{ - display: block; - max-width: 25%; - flex: 0 0 25%; - } - .flex-lg-4{ - display: block; - max-width: 20%; - flex: 0 0 20%; - } - .flex-lg-3{ - display: block; - max-width: 15%; - flex: 0 0 15%; - } - .flex-lg-2{ - display: block; - max-width: 10%; - flex: 0 0 10%; - } - .flex-lg-1{ - display: block; - max-width: 5%; - flex: 0 0 5%; - } -} - +*/ \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index 3ac610d..502d1a7 100755 --- a/css/styles.css +++ b/css/styles.css @@ -16,6 +16,7 @@ bootstrapのように利用して簡単にサイトを構築するためのチ /* ### layout ### */ +@import url("base-layout.css"); @import url("layout.css"); /* ### animation ### */ diff --git a/css/theme.css b/css/theme.css index 119aa77..dbd3ea0 100755 --- a/css/theme.css +++ b/css/theme.css @@ -1,9 +1,24 @@ +.login-wrap.animate .visibleContent.testbox5, .login-wrap.animate .login-mask.testbox5, .login-wrap.animate .login-button.testbox5, .login-wrap.animate .login-button.testbox5:after .login-wrap.animate .visibleContent.testbox5{ + animation-iteration-count: infinite !important; + -webkit-animation-iteration-count: infinite !important; + animation-duration: 8s !important; + -webkit-animation-duration: 8s !important; + animation-direction: normal !important; + -webkit-animation-direction: normal !important; + animation-delay: 2s; + -webkit-animation-delay: 2s; +} + .testbox{ position: relative; width: 320px; height: 180px; } +.testbox4{ + width: 400px; + height: 400px; +} .testbox1{ display: block; color: white; @@ -108,6 +123,7 @@ body { .kalei-styleguide-menu { height: 100%; + width: 300px; overflow-y: auto; overflow-x: hidden; } diff --git a/img/wt4NRqA.jpg b/img/wt4NRqA.jpg new file mode 100644 index 0000000..7ad390c Binary files /dev/null and b/img/wt4NRqA.jpg differ