Merge pull request #108 from mixed/enhance-demo

docs(infiniteGrid): enhance demo
naver · Feb 14, 2018 · dbb9153 · dbb9153
2 parents f311e9d + d8055b2
commit dbb9153
Show file tree

Hide file tree

Showing 13 changed files with 470 additions and 32 deletions.
diff --git a/demo/assets/css/frame.css b/demo/assets/css/frame.css
@@ -1,14 +1,99 @@
 body {
-	padding: 0;
 	margin: 0;
-	background: #EDEDF0;
-	font-size: 15px;
+	left: 0;
 }
 .container {
 	position: relative;
 	width: 1200px;
 	margin: 0px auto;
 }
+.header {
+	position: relative;
+	height: 60px;
+	padding: 20px 20px;
+	margin: 0px 0px 10px 0px;
+	border-bottom: 1px solid #ddd;
+	background: #FAFAFA;
+
+}
+.header-container {
+	position: relative;
+}
+.header .logo {
+	height: 100%;
+	vertical-align: middle;
+}
+.header .search {
+	position: absolute;
+	display: inline-block;
+	top: 10px;
+	left: 145px;
+	vertical-align: middle;
+	padding: 3px;
+	background: #8C532E;
+	width: 400px;
+	height: 40px;
+}
+.header .search .search-input {
+	position: absolute;
+	display: block;
+	left: 3px;
+	right: 45px;
+	height: 40px;
+}
+.header .search input {
+	position: absolute;
+	display: block;
+	width: 100%;
+	height: 100%;
+	border: 0;
+	font-weight: bold;
+	text-indent: 10;
+	font-size: 16px;
+	appearance: none;
+	-webkit-appearance: none;
+	outline: none;
+}
+.header .search .submit {
+	position: absolute;
+	display: inline-block;
+	background: transparent;
+	box-shadow: none;
+	border: 0;
+	margin: 0;
+	vertical-align: top;
+	width: 40px;
+	height: 40px;
+	right: 3px;
+}
+.header .search .submit:before, .header .search .submit:after {
+	position: absolute;
+	content: "";
+}
+.header .search .submit:before {
+	width: 40%;
+	height: 40%;
+	border: 2px solid white;
+	border-radius: 50%;
+	-webkit-border-radius: 50%;
+	left: 20%;
+	top: 20%;
+}
+.header .search .submit:after {
+	width: 30%;
+	height: 2px;
+	left: 60%;
+	top: 60%;
+	background: #fff;
+	transform-origin: 0 50%;
+	-ms-transform-origin: 0 50%;
+	-webkit-transform-origin: 0 50%;
+
+	transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	-webkit-transform: rotate(45deg);	
+}
+
 .item {
 	height: 100%;
 	width: 150px;
@@ -27,4 +112,5 @@ body {
 }
 .item .description {
 	line-height: 1.4;
-}
+}
+
diff --git a/demo/assets/css/frame2.css b/demo/assets/css/frame2.css
@@ -1,23 +1,105 @@
+
 body {
-	padding: 0;
 	margin: 0;
-	background: #EDEDF0;
-	font-size: 15px;
-}
-.started {
-	position: fixed;
-	top: 50px;
-	font-size: 40px;
-	left: 100px;
+	left: 0;
 }
+
 .container {
 	position: absolute;
 	width: 80%;
 	margin: 0px auto;
 	min-width: 850px;
-	top: 150px;
+	top: 120px;
 	bottom: 50px;
 }
+.header {
+	position: fixed;
+	width : 100%;
+	height: 60px;
+	padding: 20px 20px;
+	margin: 0px 0px 10px 0px;
+	border-bottom: 1px solid #ddd;
+	background: #FAFAFA;
+
+}
+.header-container {
+	position: relative;
+}
+.header .logo {
+	height: 100%;
+	vertical-align: middle;
+}
+.header .search {
+	position: absolute;
+	display: inline-block;
+	top: 10px;
+	left: 145px;
+	vertical-align: middle;
+	padding: 3px;
+	background: #8C532E;
+	width: 400px;
+	height: 40px;
+}
+.header .search .search-input {
+	position: absolute;
+	display: block;
+	left: 3px;
+	right: 45px;
+	height: 40px;
+}
+.header .search input {
+	position: absolute;
+	display: block;
+	width: 100%;
+	height: 100%;
+	border: 0;
+	font-weight: bold;
+	text-indent: 10;
+	font-size: 16px;
+	appearance: none;
+	-webkit-appearance: none;
+	outline: none;
+}
+.header .search .submit {
+	position: absolute;
+	display: inline-block;
+	background: transparent;
+	box-shadow: none;
+	border: 0;
+	margin: 0;
+	vertical-align: top;
+	width: 40px;
+	height: 40px;
+	right: 3px;
+}
+.header .search .submit:before, .header .search .submit:after {
+	position: absolute;
+	content: "";
+}
+.header .search .submit:before {
+	width: 40%;
+	height: 40%;
+	border: 2px solid white;
+	border-radius: 50%;
+	-webkit-border-radius: 50%;
+	left: 20%;
+	top: 20%;
+}
+.header .search .submit:after {
+	width: 30%;
+	height: 2px;
+	left: 60%;
+	top: 60%;
+	background: #fff;
+	transform-origin: 0 50%;
+	-ms-transform-origin: 0 50%;
+	-webkit-transform-origin: 0 50%;
+
+	transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	-webkit-transform: rotate(45deg);	
+}
+
 .item {
 	height: 100%;
 	width: 400px;

diff --git a/demo/assets/css/grid.css b/demo/assets/css/grid.css
@@ -1,3 +1,93 @@
+body {
+	margin: 0;
+	left: 0;
+}
+.header {
+	position: relative;
+	height: 60px;
+	padding: 20px 20px;
+	margin: 0px 0px 10px 0px;
+	border-bottom: 1px solid #ddd;
+	background: #FAFAFA;
+}
+.header-container {
+	position: relative;
+}
+.header .logo {
+	height: 100%;
+	vertical-align: middle;
+}
+.header .search {
+	position: absolute;
+	display: inline-block;
+	top: 10px;
+	left: 145px;
+	vertical-align: middle;
+	padding: 3px;
+	background: #8C532E;
+	width: 400px;
+	height: 40px;
+}
+.header .search .search-input {
+	position: absolute;
+	display: block;
+	left: 3px;
+	right: 45px;
+	height: 40px;
+}
+.header .search input {
+	position: absolute;
+	display: block;
+	width: 100%;
+	height: 100%;
+	border: 0;
+	font-weight: bold;
+	text-indent: 10;
+	font-size: 16px;
+	appearance: none;
+	-webkit-appearance: none;
+	outline: none;
+}
+.header .search .submit {
+	position: absolute;
+	display: inline-block;
+	background: transparent;
+	box-shadow: none;
+	border: 0;
+	margin: 0;
+	vertical-align: top;
+	width: 40px;
+	height: 40px;
+	right: 3px;
+}
+.header .search .submit:before, .header .search .submit:after {
+	position: absolute;
+	content: "";
+}
+.header .search .submit:before {
+	width: 40%;
+	height: 40%;
+	border: 2px solid white;
+	border-radius: 50%;
+	-webkit-border-radius: 50%;
+	left: 20%;
+	top: 20%;
+}
+.header .search .submit:after {
+	width: 30%;
+	height: 2px;
+	left: 60%;
+	top: 60%;
+	background: #fff;
+	transform-origin: 0 50%;
+	-ms-transform-origin: 0 50%;
+	-webkit-transform-origin: 0 50%;
+
+	transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	-webkit-transform: rotate(45deg);	
+}
+
 .item {
 	width: 250px;
 	opacity: 0;