Update To 11.40.268.0
[platform/framework/web/crosswalk.git] / src / chrome / browser / resources / bookmark_manager / css / bmm.css
index 1d8cf39..cbe770d 100644 (file)
@@ -14,8 +14,8 @@ body {
 }
 
 body {
-  -webkit-flex-direction: column;
-  display: -webkit-flex;
+  display: flex;
+  flex-direction: column;
 }
 
 list {
@@ -28,7 +28,7 @@ list > * {
   -webkit-padding-end: 20px;
   -webkit-padding-start: 3px;
   color: hsl(0, 0%, 70%);
-  display: -webkit-flex;
+  display: flex;
   line-height: 20px;
   margin: 0;
   overflow: visible;
@@ -54,9 +54,9 @@ list > * > .label {
 }
 
 list > * > .url {
-  -webkit-flex: 1;
   direction: ltr; /* URLs always read LTR */
   display: none;
+  flex: 1;
 }
 
 list > :hover > .url,
@@ -201,54 +201,90 @@ list > .folder > .label,
 </if>
 
 .main {
-  -webkit-flex: 1;
-  display: -webkit-flex;
+  border-top: 1px solid rgb(156, 194, 239);
+  display: flex;
+  flex: 1;
 }
 
-#tree-container {
-  -webkit-padding-end: 5px;
-  -webkit-padding-start: 10px;
-  box-sizing: border-box;
+.pane,
+.splitter {
+  display: flex;
+  flex-direction: column;
+}
+
+.pane > :first-child,
+.splitter > :first-child {
+  background-color: rgb(235, 239, 249);
+  flex: none;
+  padding: 5px 10px;
+  white-space: nowrap;
+}
+
+.splitter > :first-child {
+  overflow: hidden;
+  padding-left: 0;
+  padding-right: 0;
+  width: 15px;
+}
+
+.splitter button {
+  visibility: hidden;  /* This button is only used for height matching. */
+}
+
+#tree-pane {
   /* min-width and max-width are used by the split pane. */
   max-width: 50%;
-  min-width: 50px;
-  overflow: auto;
-  padding-bottom: 5px;
-  padding-top: 5px;
+  min-width: 150px;
   width: 200px;
 }
 
-#tree {
-  display: inline-block;
-  min-width: 100%;
-  overflow: visible; /* let the container do the scrolling */
+#list-pane {
+  flex: 1;
 }
 
-.tree-item > .tree-row {
-  line-height: 20px;
+#list-pane > :first-child {
+  -webkit-padding-start: 0;  /* Accounts for extra splitter resize width. */
 }
 
-.tree-row .expand-icon {
-  top: 2px;
+#tree-container {
+  overflow: auto;
+}
+
+#list,
+#tree-container {
+  flex: 1;
 }
 
+#tree,
 #list {
-  -webkit-flex: 1;
   -webkit-padding-end: 5px;
   box-sizing: border-box;
+  display: inline-block;
+  min-width: 100%;
   padding-bottom: 5px;
   padding-top: 5px;
 }
 
+#tree {
+  /* Only pad the tree as the splitter adds a lot of whitespace for the list. */
+  -webkit-padding-start: 10px;
+}
+
+.tree-item > .tree-row {
+  line-height: 20px;
+}
+
+.tree-row .expand-icon {
+  top: 2px;
+}
+
 .splitter {
-  -webkit-border-end: 15px solid white;
-  -webkit-border-start: 0;
-  background-color: rgb(235, 239, 249);
+  border-left: 5px solid rgb(235, 239, 249);
   cursor: e-resize;
-  width: 5px;
 <if expr="is_macosx">
   cursor: col-resize;
 </if>
+  overflow-x: hidden;
 }
 
 .tree-row.drag-on,
@@ -291,7 +327,7 @@ list.drag-above::before {
 
 list > .drag-below,
 list > .drag-above {
-  overflow : visible;
+  overflow: visible;
 }
 
 .summary > * {
@@ -299,9 +335,10 @@ list > .drag-above {
   margin: 0;
 }
 
-.summary button {
+#folders-button,
+#organize-button,
+.splitter button {
   -webkit-appearance: none;
-  -webkit-margin-start: 16px;
   -webkit-padding-end: 11px;
   -webkit-padding-start: 0;
   background: transparent -webkit-canvas(drop-down-arrow)
@@ -313,7 +350,16 @@ list > .drag-above {
   padding-top: 0;
 }
 
-html[dir=rtl] .summary button {
+#folders-button {
+  -webkit-margin-start: 16px;
+}
+
+#organize-button {
+  -webkit-margin-start: 4px;
+}
+
+html[dir=rtl] #folders-button,
+html[dir=rtl] #organize-button {
   background-position: left center;
 }