New: Improved Breadcrumb Layout

Added new CSS/HTML layout for the breadcrumb component.
author: Jose Antonio Marquez 2012-07-13 11:45:09 -0700
committer: Jose Antonio Marquez 2012-07-13 11:45:09 -0700
commit: c5d59f48a8bccc8770b257f851bba18bdce61d2e (patch)
tree: 9c225bd55d10e5efbb4fdfc657d1b000b01d3cf2 /js/components/layout
parent: 644b9d5d2a3c01fd0b7515471f0fc29ddc395ec0 (diff)
download: ninja-c5d59f48a8bccc8770b257f851bba18bdce61d2e.tar.gz
3 files changed, 51 insertions, 7 deletions
diff --git a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.css b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.css
index 9d6c37a7..eb5a29e0 100755
--- a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.css
+++ b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.css
@@ -28,3 +28,48 @@ CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 POSSIBILITY OF SUCH DAMAGE.
 </copyright> */
+.breadcrumbComp {
+    float: left;
+    margin: 3px -10px 0 0;
+}
+.breadcrumbButton {
+    color: #FFF;
+    float: left;
+    background: rgb(80, 80, 80);
+    border: none;
+    padding: 0 8px 0 14px;
+    height: 20px;
+    margin: 0;
+    border-top: 1px solid rgb(60, 60, 60);
+    border-left: 1px solid rgb(60, 60, 60);
+    border-bottom: 1px solid rgb(60, 60, 60);
+    cursor: pointer; 
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+}
+.breadcrumbButton:active, .breadcrumbButton:hover, .breadcrumbButton:focus {
+    -webkit-box-shadow: none !important;
+    outline: none !important;
+}
+.breadcrumbTipMask
+{
+    display: block;
+    width: 11px;
+    height: 20px;
+    float: left;
+    overflow: hidden;
+}
+.breadcrumbTip {
+    display: block;
+    width: 14px;
+    height: 14px;
+    margin: 3px 0 0 -7px;
+    -webkit-transform: rotate(45deg);
+    background: rgb(80, 80, 80);
+    border-top: 1px solid rgb(60, 60, 60);
+    border-right: 1px solid rgb(60, 60, 60);
+}
+\ No newline at end of file
diff --git a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.html b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.html
index 6c881277..596975de 100755
--- a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.html
+++ b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.html
@@ -67,8 +67,9 @@ POSSIBILITY OF SUCH DAMAGE.
    </head>
    <body>
-        <div data-montage-id="breadcrumb_container">
+        <div data-montage-id="breadcrumb_container" class="breadcrumbComp">
-            <button data-montage-id="breadcrumb_button" class="nj-skinned"></button>
+            <button data-montage-id="breadcrumb_button" class="breadcrumbButton"></button>
+            <span class="breadcrumbTipMask"><span class="breadcrumbTip"></span></span>
        </div>
    </body>
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.css b/js/components/layout/bread-crumb.reel/bread-crumb.css
index 2dd34af3..ab00bcc8 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.css
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.css
@@ -43,9 +43,7 @@ POSSIBILITY OF SUCH DAMAGE.
    border-bottom:1px solid #000;
    margin-bottom:1px;
 }
-.breadcrumbTrail button.nj-skinned {
-    float: left;
-    width: 60px;
-    margin: 2px;
-}
+.breadcrumbTrail div:first-child {
+    margin-left: 2px;
+}
author	Jose Antonio Marquez	2012-07-13 11:45:09 -0700
committer	Jose Antonio Marquez	2012-07-13 11:45:09 -0700
commit	c5d59f48a8bccc8770b257f851bba18bdce61d2e (patch)
tree	9c225bd55d10e5efbb4fdfc657d1b000b01d3cf2 /js/components/layout
parent	644b9d5d2a3c01fd0b7515471f0fc29ddc395ec0 (diff)
download	ninja-c5d59f48a8bccc8770b257f851bba18bdce61d2e.tar.gz

diff --git a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.css b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.css index 9d6c37a7..eb5a29e0 100755 --- a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.css +++ b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.css
@@ -28,3 +28,48 @@ CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
28	ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE	28	ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
29	POSSIBILITY OF SUCH DAMAGE.	29	POSSIBILITY OF SUCH DAMAGE.
30	</copyright> */	30	</copyright> */
		31
		32	.breadcrumbComp {
		33	float: left;
		34	margin: 3px -10px 0 0;
		35	}
		36
		37	.breadcrumbButton {
		38	color: #FFF;
		39	float: left;
		40	background: rgb(80, 80, 80);
		41	border: none;
		42	padding: 0 8px 0 14px;
		43	height: 20px;
		44	margin: 0;
		45	border-top: 1px solid rgb(60, 60, 60);
		46	border-left: 1px solid rgb(60, 60, 60);
		47	border-bottom: 1px solid rgb(60, 60, 60);
		48	cursor: pointer;
		49	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
		50	}
		51
		52	.breadcrumbButton:active, .breadcrumbButton:hover, .breadcrumbButton:focus {
		53	-webkit-box-shadow: none !important;
		54	outline: none !important;
		55	}
		56
		57	.breadcrumbTipMask
		58	{
		59	display: block;
		60	width: 11px;
		61	height: 20px;
		62	float: left;
		63	overflow: hidden;
		64	}
		65
		66	.breadcrumbTip {
		67	display: block;
		68	width: 14px;
		69	height: 14px;
		70	margin: 3px 0 0 -7px;
		71	-webkit-transform: rotate(45deg);
		72	background: rgb(80, 80, 80);
		73	border-top: 1px solid rgb(60, 60, 60);
		74	border-right: 1px solid rgb(60, 60, 60);
		75	} \ No newline at end of file


diff --git a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.html b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.html index 6c881277..596975de 100755 --- a/js/components/layout/bread-crumb-button.reel/bread-crumb-button.html +++ b/js/components/layout/bread-crumb-button.reel/bread-crumb-button.html
@@ -67,8 +67,9 @@ POSSIBILITY OF SUCH DAMAGE.
67	</head>	67	</head>
68	<body>	68	<body>
69		69
70	<div data-montage-id="breadcrumb_container">	70	<div data-montage-id="breadcrumb_container" class="breadcrumbComp">
71	<button data-montage-id="breadcrumb_button" class="nj-skinned"></button>	71	<button data-montage-id="breadcrumb_button" class="breadcrumbButton"></button>
		72	<span class="breadcrumbTipMask"><span class="breadcrumbTip"></span></span>
72	</div>	73	</div>
73		74
74	</body>	75	</body>


diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.css b/js/components/layout/bread-crumb.reel/bread-crumb.css index 2dd34af3..ab00bcc8 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.css +++ b/js/components/layout/bread-crumb.reel/bread-crumb.css
@@ -43,9 +43,7 @@ POSSIBILITY OF SUCH DAMAGE.
43	border-bottom:1px solid #000;	43	border-bottom:1px solid #000;
44	margin-bottom:1px;	44	margin-bottom:1px;
45	}	45	}
46	.breadcrumbTrail button.nj-skinned {
47	float: left;
48	width: 60px;
49	margin: 2px;
50	}
51		46
		47	.breadcrumbTrail div:first-child {
		48	margin-left: 2px;
		49	}