Commit @bf543af3d8f878bbe37e26fe9628007d5169ad3a

Jihan Kim 2014-05-09

UIKit: update with recent yobiUI style

@bf543af3d8f878bbe37e26fe9628007d5169ad3a

452924b

bf543af

app/views/help/UIKit.scala.html

--- app/views/help/UIKit.scala.html

+++ app/views/help/UIKit.scala.html


 <title>Yobi UI</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.ico")">
-<link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("bootstrap/css/bootstrap.css")">
-<link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("stylesheets/yobi.css")">
-<link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("stylesheets/fontello/css/fontello.css")">
-<link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("stylesheets/fontello/css/animation.css")">
+<link rel="stylesheet" type="text/css" media="all" href="@routes.Assets.at("bootstrap/css/bootstrap.css")">
+<link rel="stylesheet" type="text/css" media="all" href="@routes.Assets.at("stylesheets/yobicon/style.css")">
+<link rel="stylesheet" type="text/css" media="all" href="@routes.Assets.at("javascripts/lib/select2/select2.css")"/>
+<link rel="stylesheet" type="text/css" media="all" href="@routes.Assets.at("stylesheets/yobi.css")">
 <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/jquery/jquery-1.9.0.js")"></script>
 <script type="text/javascript" src="@routes.Assets.at("bootstrap/js/bootstrap.js")"></script>
 <script type="text/javascript" src="@routes.Assets.at("bootstrap/js/bootstrap-switch.js")"></script>

 <body>
 
 <header class="gnb-outer">
-	<span class="gnb-logo orange">Yobi</span>
-	<span class="subtitle">User Interface Kit</span>
+    <span class="subtitle">Yobi UI</span>
 </header>
 <div class="page-wrap-outer">
     <div class="container page-wrap">
     	<div class="page">
     		<h3>Buttons</h5>
     		<div>
-    			<pre>.nbtn</pre>
+    			<pre>.ybtn</pre>
     			<p>
-    				<a href="#" class="nbtn medium">Default Button</a><!--
-    			 --><button type="button" class="nbtn medium orange">Primary Button</button><!--
-    			 --><a href="#" class="nbtn medium black">Secondary Button</a><!--
-                 --><button href="#" class="nbtn medium red">Delete Button</button>
-                 </p>
-                 <p>
-    			    <a href="#" class="nbtn medium white">Action Button</a><!--
-    			 --><button href="#" class="nbtn medium green">Action Button</button><!--
-    			 --><a href="#" class="nbtn medium blue">Action Button</a><!--
-    			 --><button href="#" class="nbtn medium mint">Action Button</button>
+                    <a href="#" class="ybtn">Default</a>
+                    <button type="button" class="ybtn ybtn-primary">Primary</button>
+                    <a href="#" class="ybtn ybtn-inverse">Inverse</a>
+                    <button type="button" class="ybtn ybtn-info">Info</button>
+                    <a href="#" class="ybtn ybtn-watching">Watching</a>
+                    <button type="button" class="ybtn ybtn-warning">Warning</button>
+                    <a href="#" class="ybtn ybtn-danger">Danger</a>
+                    <button type="button" class="ybtn ybtn-disabled">Disabled</button>
     			</p>
-    <xmp class="css"><a href="#" class="nbtn medium">Default Button</a>
-    <button type="button" class="nbtn medium orange">Primary Button</button>
-    <a href="#" class="nbtn medium black">Secondary Button</a>
-    <button href="#" class="nbtn medium red">Delete Button</button>
+    <xmp class="css">
+        <a href="#" class="ybtn">Default</a>
+        <button type="button" class="ybtn ybtn-primary">Primary</button>
+        <a href="#" class="ybtn ybtn-inverse">Inverse</a>
+        <button type="button" class="ybtn ybtn-info">Info</button>
+        <a href="#" class="ybtn ybtn-watching">Watching</a>
+        <button type="button" class="ybtn ybtn-warning">Warning</button>
+        <a href="#" class="ybtn ybtn-danger">Danger</a>
     </xmp>
     <hr/>
     			<div class="btn-wrap">

         </div>
     </div>
     </xmp>
-
-    			<p>&nbsp;</p>
-    			<p>
-    				<a href="#" class="nbtn large orange">Create your project</a>
-    			</p>
-    			<p>
-    				<a href="#" class="nbtn small">Small button</a>
-    				<button type="button" class="nbtn medium">Medium button</button>
-    				<a href="#" class="nbtn large">Large button</a>
-    			</p>
     		</div>
     		<!-- // buttons -->
     		<hr/>

      --><button type="button" class="btn">검색</button>
     </form></xmp>
     <hr/>
-    			<pre>.form-searchbar</pre>
-    			<form class="form-searchbar">
-    				<input type="text" class="text" name="filter"><!--
-    			 --><button type="button" class="ico ico-search"></button>
-    			</form>
-    <xmp class="css"><form class="form-searchbar">
-        <input type="text" class="text" name="filter"><!--
-     --><button type="button" class="ico ico-search"></button>
-    </form></xmp>
+    			<pre>.search-bar</pre>
+                <div class="search">
+                    <div class="search-bar">
+                        <input name="filter" class="textbox full" type="text">
+                        <button type="submit" class="search-btn"><i class="yobicon-search"></i></button>
+                    </div>
+                </div>
+                <xmp class="css"><div class="search">
+                    <div class="search-bar">
+                        <input name="filter" class="textbox full" type="text">
+                        <button type="submit" class="search-btn"><i class="yobicon-search"></i></button>
+                    </div>
+                </div>
+                </xmp>
     		</div>
     		<hr/>
     		<!-- // input -->

 </div>
 <footer class="page-footer-outer">
 	<div class="page-footer">
-		<span class="provider">&copy; <strong>NHN Corp.</strong></span>
+		<span class="provider">&copy; <strong>NAVER Corp.</strong></span>
 	</div>
 </footer>
-<script type="text/javascript">
-</script>
 </body>
 </html>

Add a comment

Open 0
Closed 0

List

...	...	@@ -26,10 +26,10 @@
26	26	<title>Yobi UI</title>
27	27	<meta name="viewport" content="width=device-width, initial-scale=1.0">
28	28	<link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.ico")">
29		-<link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("bootstrap/css/bootstrap.css")">
30		-<link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("stylesheets/yobi.css")">
31		-<link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("stylesheets/fontello/css/fontello.css")">
32		-<link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("stylesheets/fontello/css/animation.css")">
	29	+<link rel="stylesheet" type="text/css" media="all" href="@routes.Assets.at("bootstrap/css/bootstrap.css")">
	30	+<link rel="stylesheet" type="text/css" media="all" href="@routes.Assets.at("stylesheets/yobicon/style.css")">
	31	+<link rel="stylesheet" type="text/css" media="all" href="@routes.Assets.at("javascripts/lib/select2/select2.css")"/>
	32	+<link rel="stylesheet" type="text/css" media="all" href="@routes.Assets.at("stylesheets/yobi.css")">
33	33	<script type="text/javascript" src="@routes.Assets.at("javascripts/lib/jquery/jquery-1.9.0.js")"></script>
34	34	<script type="text/javascript" src="@routes.Assets.at("bootstrap/js/bootstrap.js")"></script>
35	35	<script type="text/javascript" src="@routes.Assets.at("bootstrap/js/bootstrap-switch.js")"></script>
...	...	@@ -47,31 +47,32 @@
47	47	<body>
48	48
49	49	<header class="gnb-outer">
50		- <span class="gnb-logo orange">Yobi</span>
51		- <span class="subtitle">User Interface Kit</span>
	50	+ <span class="subtitle">Yobi UI</span>
52	51	</header>
53	52	<div class="page-wrap-outer">
54	53	<div class="container page-wrap">
55	54	<div class="page">
56	55	<h3>Buttons</h5>
57	56	<div>
58		- <pre>.nbtn</pre>
	57	+ <pre>.ybtn</pre>
59	58	<p>
60		- <a href="#" class="nbtn medium">Default Button</a><!--
61		- --><button type="button" class="nbtn medium orange">Primary Button</button><!--
62		- --><a href="#" class="nbtn medium black">Secondary Button</a><!--
63		- --><button href="#" class="nbtn medium red">Delete Button</button>
64		- </p>
65		- <p>
66		- <a href="#" class="nbtn medium white">Action Button</a><!--
67		- --><button href="#" class="nbtn medium green">Action Button</button><!--
68		- --><a href="#" class="nbtn medium blue">Action Button</a><!--
69		- --><button href="#" class="nbtn medium mint">Action Button</button>
	59	+ <a href="#" class="ybtn">Default</a>
	60	+ <button type="button" class="ybtn ybtn-primary">Primary</button>
	61	+ <a href="#" class="ybtn ybtn-inverse">Inverse</a>
	62	+ <button type="button" class="ybtn ybtn-info">Info</button>
	63	+ <a href="#" class="ybtn ybtn-watching">Watching</a>
	64	+ <button type="button" class="ybtn ybtn-warning">Warning</button>
	65	+ <a href="#" class="ybtn ybtn-danger">Danger</a>
	66	+ <button type="button" class="ybtn ybtn-disabled">Disabled</button>
70	67	</p>
71		- <xmp class="css"><a href="#" class="nbtn medium">Default Button</a>
72		- <button type="button" class="nbtn medium orange">Primary Button</button>
73		- <a href="#" class="nbtn medium black">Secondary Button</a>
74		- <button href="#" class="nbtn medium red">Delete Button</button>
	68	+ <xmp class="css">
	69	+ <a href="#" class="ybtn">Default</a>
	70	+ <button type="button" class="ybtn ybtn-primary">Primary</button>
	71	+ <a href="#" class="ybtn ybtn-inverse">Inverse</a>
	72	+ <button type="button" class="ybtn ybtn-info">Info</button>
	73	+ <a href="#" class="ybtn ybtn-watching">Watching</a>
	74	+ <button type="button" class="ybtn ybtn-warning">Warning</button>
	75	+ <a href="#" class="ybtn ybtn-danger">Danger</a>
75	76	</xmp>
76	77	<hr/>
77	78	<div class="btn-wrap">
...	...	@@ -87,16 +88,6 @@
87	88	</div>
88	89	</div>
89	90	</xmp>
90		-
91		- <p> </p>
92		- <p>
93		- <a href="#" class="nbtn large orange">Create your project</a>
94		- </p>
95		- <p>
96		- <a href="#" class="nbtn small">Small button</a>
97		- <button type="button" class="nbtn medium">Medium button</button>
98		- <a href="#" class="nbtn large">Large button</a>
99		- </p>
100	91	</div>
101	92	<!-- // buttons -->
102	93	<hr/>
...	...	@@ -190,15 +181,20 @@
190	181	--><button type="button" class="btn">검색</button>
191	182	</form></xmp>
192	183	<hr/>
193		- <pre>.form-searchbar</pre>
194		- <form class="form-searchbar">
195		- <input type="text" class="text" name="filter"><!--
196		- --><button type="button" class="ico ico-search"></button>
197		- </form>
198		- <xmp class="css"><form class="form-searchbar">
199		- <input type="text" class="text" name="filter"><!--
200		- --><button type="button" class="ico ico-search"></button>
201		- </form></xmp>
	184	+ <pre>.search-bar</pre>
	185	+ <div class="search">
	186	+ <div class="search-bar">
	187	+ <input name="filter" class="textbox full" type="text">
	188	+ <button type="submit" class="search-btn"><i class="yobicon-search"></i></button>
	189	+ </div>
	190	+ </div>
	191	+ <xmp class="css"><div class="search">
	192	+ <div class="search-bar">
	193	+ <input name="filter" class="textbox full" type="text">
	194	+ <button type="submit" class="search-btn"><i class="yobicon-search"></i></button>
	195	+ </div>
	196	+ </div>
	197	+ </xmp>
202	198	</div>
203	199	<hr/>
204	200	<!-- // input -->
...	...	@@ -339,10 +335,8 @@
339	335	</div>
340	336	<footer class="page-footer-outer">
341	337	<div class="page-footer">
342		- <span class="provider">© <strong>NHN Corp.</strong></span>
	338	+ <span class="provider">© <strong>NAVER Corp.</strong></span>
343	339	</div>
344	340	</footer>
345		-<script type="text/javascript">
346		-</script>
347	341	</body>
348	342	</html>

Delete comment