Reviewers: mp+133963_code.launchpad.net,

Message:
Please take a look.

Description:
Charm panel border to 2px (bug #1077006)

Charm panel's left border should match the UX design and be 2px wide
with an inset shadow look.

https://code.launchpad.net/~makyo/juju-gui/charm-panel-border/+merge/133963

(do not edit description out of merge proposal)


Please review this at https://codereview.appspot.com/6812107/

Affected files:
   A [revision details]
   M lib/views/stylesheet.less


Index: [revision details]
=== added file '[revision details]'
--- [revision details]	2012-01-01 00:00:00 +0000
+++ [revision details]	2012-01-01 00:00:00 +0000
@@ -0,0 +1,2 @@
+Old revision: <email address hidden>
+New revision: <email address hidden>

Index: lib/views/stylesheet.less
=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2012-11-09 14:30:56 +0000
+++ lib/views/stylesheet.less	2012-11-12 17:37:25 +0000
@@ -18,6 +18,7 @@
  @charm-panel-border-color: #BEBEBE;
  @charm-paneel-border-top-color: #E0DEDE;
  @charm-panel-padding-left: 10px;
+@charm-panel-width: 292px;
  @navbar-color: #2D2D2D!important;

  body {
@@ -117,11 +118,14 @@
              margin: 2px 0 0 0;
              padding: 20px 0 4px;
              &#charm-search-trigger-container {
-                width: 292px;
+                width: @charm-panel-width;
                  white-space: nowrap;
                  border-left: 1px solid transparent;
                  &.active-border {
-                    border-left-color: lightgray;
+                    border-left-color: darkgray;
+                    -moz-box-shadow: inset 1px 0 0 lightgray;
+                    -webkit-box-shadow: inset 1px 0 0 lightgray;
+                    box-shadow: inset 1px 0 0 lightgray;
                  }
              }
              .nav-section {
@@ -790,9 +794,12 @@
      top: 70px;
      height: 100px;
      position: absolute;
-    width: 292px;
+    width: @charm-panel-width;
      background-color: white;
-    border-left: lightgray solid 1px;
+    border-left: darkgray solid 1px;
+    -moz-box-shadow: inset 1px 0 0 lightgray;
+    -webkit-box-shadow: inset 1px 0 0 lightgray;
+    box-shadow: inset 1px 0 0 lightgray;

      .charm-panel-configure .btn {
          float: right;
@@ -836,6 +843,8 @@
        background-color: #FFFFFF;
        border-bottom: 1px solid @charm-panel-border-color;
        height: 52px;
+      width: @charm-panel-width - @charm-panel-padding-left - 1px;
+      float: right;
        padding-left: @charm-panel-padding-left;
        .btn {
            margin-top: 12px;
@@ -857,6 +866,8 @@
      .charm-panel {
          background-color: @charm-panel-background-color;
          height: 432px;
+        width: @charm-panel-width - 1px;
+        float: right;
          overflow-y: auto;
          overflow-x: hidden;
          h3 {
@@ -1016,6 +1027,8 @@
          overflow-y:auto;
          overflow-x:hidden;
          background-color: #EEEEEE;
+        width: @charm-panel-width - 1px;
+        float: right;
          .series-charms {
              h3 {
                  font-weight: normal;
@@ -1297,8 +1310,11 @@
    background-repeat: no-repeat;
    background-position: 230px 38px;
    border-top: 2px solid #dd4814;
+  border-left: 1px solid #2f2a27 + #333;
    background-color: #2F2A27;
    height: 90px;
+  width: @charm-panel-width - @charm-panel-padding-left - 1px;
+  float: right;
    padding-left: @charm-panel-padding-left;
    .title {
      font-weight: lighter;