├── CONTRIBUTING md
├── README.md
├── build
    └── fu.css
├── examples
    ├── index-html.html
    └── index.html
├── package.js
└── source
    ├── button.css
    ├── input.css
    ├── minify
        ├── minify.bat
        └── minify.sh
    ├── package.js
    └── tab.css


/CONTRIBUTING md:
--------------------------------------------------------------------------------
 1 | # Contributions
 2 | 
 3 | Contributions are welcome for Enyo and its associated libraries including onyx and layout.
 4 | 
 5 | Please see [Contributing to Enyo](http://enyojs.com/community/contribute/) for details
 6 | on our contribution policy and guidelines for use of the Enyo-DCO-1.0-Signed-off-by
 7 | line in your commits and pull requests.
 8 | 
 9 | If you're interested in introducing new kinds, you might also consider hosting your own repo
10 | and contributing to the [Enyo community gallery](http://enyojs.com/gallery).


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | #fu
2 | 
3 | > A very simple enyo package.


--------------------------------------------------------------------------------
/build/fu.css:
--------------------------------------------------------------------------------
  1 | 
  2 | /* button.css */
  3 | 
  4 | .theme-fu button:focus,
  5 | .theme-fu .button:focus {
  6 | 	outline: none;
  7 | }
  8 | 
  9 | .theme-fu button,
 10 | .theme-fu .button {
 11 | 	position: relative;
 12 | 	cursor: pointer;
 13 | 	/**/
 14 | 	color: #404040;
 15 | 	background-color: #CDCDCD;
 16 | 	/**/
 17 | 	/*margin: 2px 8px 2px 1px;*/
 18 | 	padding: 0.5em 0.7em;
 19 | 	border: 0;
 20 | 	-moz-border-radius: .2em;
 21 | 	border-radius: .2em;
 22 | 	/**/
 23 | 	-webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
 24 | 	-moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
 25 | 	box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
 26 | }
 27 | 
 28 | .theme-fu.dark button,
 29 | .theme-fu.dark .button {
 30 | 	background-color: #484848;
 31 | 	color: #ababab;
 32 | }
 33 | 
 34 | .theme-fu button:enabled:hover, .theme-fu button:hover, 
 35 | .theme-fu .button:enabled:hover, .theme-fu .button:hover {
 36 | 	background-color: #C0C0C0;
 37 | }
 38 | 
 39 | .theme-fu.dark button:enabled:hover, .theme-fu.dark button:hover, 
 40 | .theme-fu.dark .button:enabled:hover, .theme-fu.dark .button:hover {
 41 | 	background-color: #383838;
 42 | }
 43 | 
 44 | .theme-fu button:enabled:active, .theme-fu button:active,
 45 | .theme-fu .active, .theme-fu .button:enabled:active, .theme-fu .button:active {
 46 | 	top: 1px;
 47 | 	left: 1px;
 48 | 	-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
 49 | 	-moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
 50 | 	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
 51 | }
 52 | 
 53 | /* input.css */
 54 | 
 55 | .theme-fu input:focus,
 56 | .theme-fu .input:focus {
 57 | 	outline: none;
 58 | }
 59 | 
 60 | .theme-fu input,
 61 | .theme-fu .input {
 62 | 	padding: 0.6em;
 63 | 	border: 0;
 64 | 	border-radius: 6px;
 65 | 	/**/
 66 | 	-webkit-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5);
 67 | 	-moz-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5);
 68 | 	box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5);
 69 | }
 70 | 
 71 | /*
 72 | .theme-fu .input:enabled:hover, .theme-fu .input:hover {
 73 | 	background-color: #C0C0C0;
 74 | }
 75 | 
 76 | .theme-fu active, .theme-fu .input:enabled:active, theme-fu .input:active {
 77 | 	top: 1px;
 78 | 	left: 1px;
 79 | 	-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
 80 | 	-moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
 81 | 	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
 82 | }
 83 | */
 84 | 
 85 | /* tab.css */
 86 | 
 87 | .theme-fu .tabbar {
 88 | 	background-color: #C3C3C3;
 89 | 	white-space: nowrap;
 90 | 	position: relative;
 91 | }
 92 | 
 93 | .theme-fu .tab.focus, .theme-fu .tab:focus {
 94 | 	outline: none;
 95 | }
 96 | 
 97 | .theme-fu .tab {
 98 | 	cursor: pointer;
 99 | 	display: inline-block;
100 | 	white-space: nowrap;
101 | 	/**/
102 | 	color: #606060;
103 | 	background-color: #C3C3C3;
104 | 	/**/
105 | 	margin: 0;
106 | 	padding: 0.5em 0.7em;
107 | 	border: 1px solid rgba(50, 50, 50, 0.2);
108 | 	border-top: none;
109 | 	border-left: none;
110 | 	border-radius: 0 0 5px 5px;
111 | 	/**/
112 | 	box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3);
113 | }
114 | 
115 | .theme-fu .tab.hover, .tab:enabled:hover {
116 | 	background-color: #C0C0C0;
117 | }
118 | 
119 | .theme-fu .tab.active/*, .theme-fu .tab:active*/ {
120 | 	background-color: #D7D7D7;
121 | 	box-shadow: none;
122 | 	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
123 | 	Xfont-weight: bold;
124 | 	color: Black;
125 | }
126 | 


--------------------------------------------------------------------------------
/examples/index-html.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | 	<title></title>
 5 | 	<!-- -->
 6 | 	<link href="../source/button.css" rel="stylesheet" type="text/css" />
 7 | 	<link href="../source/tab.css" rel="stylesheet" type="text/css" />
 8 | 	<!-- -->
 9 | 	<script type="text/javascript">
10 | 		enyo = {};
11 | 	</script>
12 | 	<style>
13 | 		.unselectable {
14 | 			-webkit-user-select: none;
15 | 			-moz-user-select: none;
16 | 		}
17 | 		.unselectable::selection {
18 | 			color: transparent;
19 | 		}
20 | 	</style>
21 | 	<!-- -->
22 | 	<script src="../../../enyo/enyo.js" type="text/javascript"></script>
23 | </head>
24 | <body class="theme-fu unselectable">
25 | 	<button class="button">Button</button>
26 | 	<button class="button" style="font-size: x-large;">Button</button>
27 | 	<button class="button" style="font-size: larger">Loooooooooooooong Button</button>
28 | 	<hr/>
29 | 	<div style="background-color: #D7D7D7">&nbsp;</div>
30 | 	<div class="tabbar" style="font-size: larger;">
31 | 		<button class="tab">Tabbbitty</button><button class="tab active">Tabbbitty Tabbbitty Too</button><button class="tab">Tabbbitty</button><button class="tab">Tabbbitty Tabbbitty Too</button>
32 | 	</div>
33 | 	<hr/>
34 | 	<div style="background-color: #D7D7D7">&nbsp;</div>
35 | 	<div class="tabbar" style="font-size: larger;">
36 | 		<span class="tab">Splabboopy</span><span class="tab">Splabboopy</span><span class="tab">Splabboopy</span>
37 | 	</div>
38 | 	<hr/>
39 | 	<div style="background-color: #D7D7D7">&nbsp;</div>
40 | 	<script>
41 | 		document.write(new enyo.Control({components: [
42 | 				{classes: "tabbar", components: [
43 | 					{classes: "active tab", content: "Tabitha", onclick: "tabClick"},
44 | 					{classes: "tab", content: "Sabitia", onclick: "tabClick"},
45 | 					{classes: "tab", content: "Tablature", onclick: "tabClick"},
46 | 				]}
47 | 			],
48 | 			tabClick: function(inSender) {
49 | 				enyo.forEach(inSender.container.getClientControls(), function(inC) {
50 | 					inC.removeClass("active");
51 | 				});
52 | 				inSender.addClass("active");
53 | 			}
54 | 		}).generateHtml());
55 | 	</script>
56 | </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | 	<title></title>
 5 | 	<!-- -->
 6 | 	<link href="../source/button.css" rel="stylesheet" type="text/css" />
 7 | 	<link href="../source/tab.css" rel="stylesheet" type="text/css" />
 8 | 	<link href="../source/input.css" rel="stylesheet" type="text/css" />
 9 | 	<!-- -->
10 | 	<script type="text/javascript">
11 | 		enyo = {};
12 | 	</script>
13 | 	<style>
14 | 		.unselectable {
15 | 			-webkit-user-select: none;
16 | 			-moz-user-select: none;
17 | 		}
18 | 		.unselectable ::selection {
19 | 			color: transparent;
20 | 		}
21 | 		body {
22 | 			font-family: Verdana, Arial, Helvetica, sans-serif;
23 | 			font-size: larger;
24 | 		}
25 | 	</style>
26 | 	<!-- -->
27 | 	<script src="../../../enyo/enyo.js" type="text/javascript"></script>
28 | </head>
29 | <body class="theme-fu unselectable">
30 | 	<button class="button">Button</button>
31 | 	<button class="button" style="font-size: x-large;">Button</button>
32 | 	<button class="button" style="font-size: larger">Loooooooooooooong Button</button>
33 | 	<hr/>
34 | 	<input class="input" value="smoo" style="font-size: large"/>
35 | 	<span style="margin-left: -48px; cursor: pointer; color: silver; border: 2px solid silver; border-radius: 24px; font-size: smaller;">&nbsp;?&nbsp;</span>
36 | 	&nbsp;
37 | 	<input class="input" value="smoo" style="font-size: large"/>
38 | 	<span style="margin-left: -48px; cursor: pointer; color: silver; border: 2px solid silver; border-radius: 24px; font-size: smaller;">&nbsp;X&nbsp;</span>
39 | 	<hr/>
40 | 	<script>
41 | 		document.write(
42 | 			new enyo.Control({
43 | 				components: [
44 | 					{style: "background-color: #D7D7D7; padding: 8px; text-align: center;", content: "Tabbar"},
45 | 					{classes: "tabbar", onmousedown: "tabbarSelect", components: [
46 | 						{classes: "active tab", content: "Tabitha"},
47 | 						{classes: "tab", content: "Tablature"},
48 | 						{classes: "tab", onmousedown: "tabSelect", components: [
49 | 							{tag: "span", content: "Tablet"},
50 | 							{tag: "span", content: " [ X ]", onmousedown: "closeDown", onclick: "closeClick"}
51 | 						]},
52 | 						{classes: "tab", content: "Sabitia"}
53 | 					]}
54 | 				],
55 | 				tabbarSelect: function(inSender, inEvent) {
56 | 					if (inEvent.dispatchTarget.container == inSender) {
57 | 						this.tabSelect(inEvent.dispatchTarget);
58 | 					}
59 | 				},
60 | 				tabSelect: function(inSender) {
61 | 					enyo.forEach(inSender.container.getClientControls(), function(inC) {
62 | 						inC.removeClass("active");
63 | 					});
64 | 					inSender.addClass("active");
65 | 				},
66 | 				closeDown: function(inSender, inEvent) {
67 | 					inEvent.stopPropagation();
68 | 					return true;
69 | 				},
70 | 				closeClick: function() {
71 | 					alert("Spoo");
72 | 				}
73 | 			}).generateHtml()
74 | 		);
75 | 	</script>
76 | </body>
77 | </html>
78 | 


--------------------------------------------------------------------------------
/package.js:
--------------------------------------------------------------------------------
1 | enyo.depends(
2 | 	"build/fu.css"
3 | );
4 | 


--------------------------------------------------------------------------------
/source/button.css:
--------------------------------------------------------------------------------
 1 | .theme-fu button:focus,
 2 | .theme-fu .button:focus {
 3 | 	outline: none;
 4 | }
 5 | 
 6 | .theme-fu button,
 7 | .theme-fu .button {
 8 | 	position: relative;
 9 | 	cursor: pointer;
10 | 	/**/
11 | 	color: #404040;
12 | 	background-color: #CDCDCD;
13 | 	/**/
14 | 	/*margin: 2px 8px 2px 1px;*/
15 | 	padding: 0.5em 0.7em;
16 | 	border: 0;
17 | 	-moz-border-radius: .2em;
18 | 	border-radius: .2em;
19 | 	/**/
20 | 	-webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
21 | 	-moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
22 | 	box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
23 | }
24 | 
25 | .theme-fu.dark button,
26 | .theme-fu.dark .button {
27 | 	background-color: #484848;
28 | 	color: #ababab;
29 | }
30 | 
31 | .theme-fu button:enabled:hover, .theme-fu button:hover, 
32 | .theme-fu .button:enabled:hover, .theme-fu .button:hover {
33 | 	background-color: #C0C0C0;
34 | }
35 | 
36 | .theme-fu.dark button:enabled:hover, .theme-fu.dark button:hover, 
37 | .theme-fu.dark .button:enabled:hover, .theme-fu.dark .button:hover {
38 | 	background-color: #383838;
39 | }
40 | 
41 | .theme-fu button:enabled:active, .theme-fu button:active,
42 | .theme-fu .active, .theme-fu .button:enabled:active, .theme-fu .button:active {
43 | 	top: 1px;
44 | 	left: 1px;
45 | 	-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
46 | 	-moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
47 | 	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
48 | }


--------------------------------------------------------------------------------
/source/input.css:
--------------------------------------------------------------------------------
 1 | /*.theme-fu input:focus,*/
 2 | .theme-fu .input:focus,
 3 | .theme-fu .input.focus {
 4 | 	outline: none;
 5 | }
 6 | 
 7 | /*.theme-fu input,*/
 8 | .theme-fu .input {
 9 | 	padding: 0.6em;
10 | 	border: 0;
11 | 	border-radius: 6px;
12 | 	/**/
13 | 	-webkit-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5);
14 | 	-moz-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5);
15 | 	box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5);
16 | }
17 | 
18 | /*
19 | .theme-fu .input:enabled:hover, .theme-fu .input:hover {
20 | 	background-color: #C0C0C0;
21 | }
22 | 
23 | .theme-fu active, .theme-fu .input:enabled:active, theme-fu .input:active {
24 | 	top: 1px;
25 | 	left: 1px;
26 | 	-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
27 | 	-moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
28 | 	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
29 | }
30 | */


--------------------------------------------------------------------------------
/source/minify/minify.bat:
--------------------------------------------------------------------------------
 1 | REM @ECHO OFF
 2 | 
 3 | SET ROOT=..\..\..\..
 4 | SET NODE=%ROOT%\tools\node.exe
 5 | SET MINIFY=%ROOT%\tools\minify.js
 6 | SET ENYO=%ROOT%\enyo
 7 | 
 8 | %NODE% %MINIFY% depends.js -enyo %ENYO% -output fu
 9 | 
10 | del fu.js
11 | move /Y fu.css ../../build
12 | 


--------------------------------------------------------------------------------
/source/minify/minify.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/sh
 2 | ENYO=../../../enyo
 3 | MINIFY=$ENYO/tools/minifier/minify.js
 4 | 
 5 | if command -v node >/dev/null 2>&1
 6 | then
 7 | 	node $MINIFY ./package.js -enyo $ENYO -output fu
 8 | 	mv fu.css ../build
 9 | else
10 | 	echo "No node executable found!"
11 | 	exit 1
12 | fi
13 | 


--------------------------------------------------------------------------------
/source/package.js:
--------------------------------------------------------------------------------
1 | enyo.depends(
2 | 	"button.css",
3 | 	"input.css",
4 | 	"tab.css"
5 | );
6 | 


--------------------------------------------------------------------------------
/source/tab.css:
--------------------------------------------------------------------------------
 1 | .theme-fu .tabbar {
 2 | 	/*
 3 | 	background-color: #C3C3C3;
 4 | 	*/
 5 | 	white-space: nowrap;
 6 | 	position: relative;
 7 | }
 8 | 
 9 | .theme-fu .tab.focus, .theme-fu .tab:focus {
10 | 	outline: none;
11 | }
12 | 
13 | .theme-fu .tab {
14 | 	cursor: pointer;
15 | 	display: inline-block;
16 | 	white-space: nowrap;
17 | 	/**/
18 | 	color: #606060;
19 | 	background-color: #C3C3C3;
20 | 	/**/
21 | 	margin: 0;
22 | 	padding: 0.5em 0.7em;
23 | 	border: 1px solid rgba(50, 50, 50, 0.2);
24 | 	border-top: none;
25 | 	border-left: none;
26 | 	border-radius: 0 0 5px 5px;
27 | 	/**/
28 | 	box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3);
29 | }
30 | 
31 | .theme-fu .tab.hover, .tab:enabled:hover {
32 | 	background-color: #C0C0C0;
33 | }
34 | 
35 | .theme-fu .tab.active, .theme-fu .active-tab-bg {
36 | 	background-color: #D7D7D7;
37 | }
38 | 
39 | .theme-fu .tab.active {
40 | 	/*
41 | 	background-color: #D7D7D7;
42 | 	Xfont-weight: bold;
43 | 	*/
44 | 	box-shadow: none;
45 | 	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
46 | 	color: Black;
47 | }


--------------------------------------------------------------------------------