aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJose Antonio Marquez2012-02-01 10:16:16 -0800
committerJose Antonio Marquez2012-02-01 10:16:16 -0800
commite824b4901817429231cd9ab6aa068cc0a0849e3a (patch)
treeeb74ddf2d1b50a6e3c123a357b605d7bf586ed09
parent372604713c2f7ac5c0b0ef475cf4043ba3194fec (diff)
downloadninja-e824b4901817429231cd9ab6aa068cc0a0849e3a.tar.gz
Applying global button styles to cloud popup
-rwxr-xr-xjs/io/ui/cloudpopup.reel/cloudpopup.html6
-rwxr-xr-xjs/io/ui/cloudpopup.reel/cloudpopup.js6
-rw-r--r--js/io/ui/cloudpopup.reel/css/cloudpopup.css29
-rwxr-xr-xjs/io/ui/cloudpopup.reel/css/cloudpopup.scss24
4 files changed, 11 insertions, 54 deletions
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.html b/js/io/ui/cloudpopup.reel/cloudpopup.html
index 5d7de347..fa4533d7 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.html
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.html
@@ -38,13 +38,13 @@
38 38
39 <label for="cloud_url">Cloud Server URL:</label><input type="text" id="cloud_url" class="cloud_url" value="http://localhost:16380" /> 39 <label for="cloud_url">Cloud Server URL:</label><input type="text" id="cloud_url" class="cloud_url" value="http://localhost:16380" />
40 40
41 <button class="btn_test">Test</button> 41 <button class="btn_test nj-skinned">Test</button>
42 42
43 <label>Status:</label><div class="status">&nbsp;</div> 43 <label>Status:</label><div class="status">&nbsp;</div>
44 44
45 <button class="btn_cancel">Cancel</button> 45 <button class="btn_cancel nj-skinned">Cancel</button>
46 46
47 <button class="btn_ok">Ok</button> 47 <button class="btn_ok nj-skinned">Ok</button>
48 48
49 </div> 49 </div>
50 </div> 50 </div>
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.js b/js/io/ui/cloudpopup.reel/cloudpopup.js
index d256f226..e8558179 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.js
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.js
@@ -28,9 +28,9 @@ exports.CloudPopup = Montage.create(Component, {
28 enumerable: false, 28 enumerable: false,
29 value: function () { 29 value: function () {
30 // 30 //
31 this.components.test_btn = this.element.getElementsByClassName('btn_test')[0]; 31 this.components.test_btn = this.element.getElementsByClassName('btn_test nj-skinned')[0];
32 this.components.ok_btn = this.element.getElementsByClassName('btn_ok')[0]; 32 this.components.ok_btn = this.element.getElementsByClassName('btn_ok nj-skinned')[0];
33 this.components.cancel_btn = this.element.getElementsByClassName('btn_cancel')[0]; 33 this.components.cancel_btn = this.element.getElementsByClassName('btn_cancel nj-skinned')[0];
34 this.components.status = this.element.getElementsByClassName('status')[0]; 34 this.components.status = this.element.getElementsByClassName('status')[0];
35 this.components.url = this.element.getElementsByClassName('cloud_url')[0]; 35 this.components.url = this.element.getElementsByClassName('cloud_url')[0];
36 } 36 }
diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.css b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
index b42263b9..eac18083 100644
--- a/js/io/ui/cloudpopup.reel/css/cloudpopup.css
+++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
@@ -68,11 +68,12 @@
68 width: 176px; 68 width: 176px;
69 border-radius: 4px; 69 border-radius: 4px;
70 text-shadow: 1px 1px 1px #222; 70 text-shadow: 1px 1px 1px #222;
71 font-family: 'Droid Sans', sans-serif;
71 border: 1px #5c5c5c solid; 72 border: 1px #5c5c5c solid;
72 background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(45%, #434343), color-stop(100%, #292929)); 73 background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(45%, #434343), color-stop(100%, #292929));
73} 74}
74 75
75/* line 80, cloudpopup.scss */ 76/* line 81, cloudpopup.scss */
76.cloud_popup .content input:focus { 77.cloud_popup .content input:focus {
77 text-shadow: none; 78 text-shadow: none;
78 background: #FFF; 79 background: #FFF;
@@ -80,29 +81,7 @@
80 color: #292929; 81 color: #292929;
81} 82}
82 83
83/* line 88, cloudpopup.scss */ 84/* line 89, cloudpopup.scss */
84.cloud_popup .content button {
85 display: block;
86 border: 0px;
87 margin: 0px;
88 padding: 4px;
89 border: 1px #333 solid;
90 background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #494949), color-stop(100%, #292929));
91 border-radius: 4px;
92 color: #FFF;
93 text-transform: uppercase;
94 cursor: pointer;
95 text-shadow: 1px 1px 1px #000;
96}
97
98/* line 103, cloudpopup.scss */
99.cloud_popup .content button:hover {
100 border: 1px #222 solid;
101 background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5c5c5c), color-stop(100%, #161616));
102 color: #EEE;
103}
104
105/* line 111, cloudpopup.scss */
106.cloud_popup .content .status { 85.cloud_popup .content .status {
107 float: left; 86 float: left;
108 clear: right; 87 clear: right;
@@ -111,7 +90,7 @@
111 width: 240px; 90 width: 240px;
112} 91}
113 92
114/* line 120, cloudpopup.scss */ 93/* line 98, cloudpopup.scss */
115.cloud_popup .content .btn_ok, .cloud_popup .content .btn_cancel { 94.cloud_popup .content .btn_ok, .cloud_popup .content .btn_cancel {
116 width: 80px; 95 width: 80px;
117 text-align: center; 96 text-align: center;
diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
index 1ae5579b..047e2dd1 100755
--- a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
+++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
@@ -72,6 +72,7 @@ $grey_light: #494949;
72 width: 176px; 72 width: 176px;
73 border-radius: 4px; 73 border-radius: 4px;
74 text-shadow: 1px 1px 1px #222; 74 text-shadow: 1px 1px 1px #222;
75 font-family: 'Droid Sans', sans-serif;
75 border: 1px lighten($grey_dark, 20%) solid; 76 border: 1px lighten($grey_dark, 20%) solid;
76 background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(45%, lighten($grey_dark, 10%)), color-stop(100%, $grey_dark)); 77 background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(45%, lighten($grey_dark, 10%)), color-stop(100%, $grey_dark));
77} 78}
@@ -84,29 +85,6 @@ $grey_light: #494949;
84 color: $grey_dark; 85 color: $grey_dark;
85} 86}
86 87
87.cloud_popup .content button
88{
89 display: block;
90 border: 0px;
91 margin: 0px;
92 padding: 4px;
93 border: 1px #333 solid;
94 background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(0%, $grey_light), color-stop(100%, $grey_dark));
95 border-radius: 4px;
96 color: #FFF;
97 text-transform: uppercase;
98 cursor: pointer;
99 text-shadow: 1px 1px 1px #000;
100}
101
102.cloud_popup .content button:hover
103{
104
105 border: 1px #222 solid;
106 background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(0%, lighten($grey_dark, 20%)), color-stop(100%, darken($grey_light, 20%)));
107 color: #EEE;
108}
109
110.cloud_popup .content .status 88.cloud_popup .content .status
111{ 89{
112 float: left; 90 float: left;