Update To 11.40.268.0

[platform/framework/web/crosswalk.git] / src / chrome / browser / resources / history / history.css

diff --git a/src/chrome/browser/resources/history/history.css b/src/chrome/browser/resources/history/history.css
index e7a10f0..1ac53bd 100644 (file)
--- a/src/chrome/browser/resources/history/history.css
+++ b/src/chrome/browser/resources/history/history.css
@@ -55,9 +55,13 @@ html[dir='rtl'] #notification-bar.alone {
 }
 
 #filter-controls {
+  display: flex;
   margin-bottom: 4px;
   margin-top: 4px;
-  overflow: auto;
+}
+
+#filter-controls > * {
+  flex: 1;
 }
 
 #editing-controls {
@@ -73,10 +77,6 @@ html[dir='rtl'] #editing-controls {
   -webkit-margin-start: 0;
 }
 
-#filter-controls select {
-  -webkit-margin-end: 0;
-}
-
 #range-next,
 #range-previous {
   background-image: url('../disclosure_triangle_small.png'),
@@ -136,45 +136,28 @@ html[dir='rtl'] #range-previous {
   -webkit-margin-end: 0;
 }
 
-#display-filter-controls {
-  float: right;
-}
-
-html[dir='rtl'] #display-filter-controls {
-  float: left;
-}
-
-.display-filter-button {
-  float: left;
-}
-
-html[dir='rtl'] .display-filter-button {
-  float: right;
-}
-
-#display-filter-controls label input[type='radio'] {
-  display: none;
+#timeframe-controls {
+  display: flex;
+  justify-content: flex-end;
 }
 
-#display-filter-controls label span {
-  -webkit-appearance: none;
-  -webkit-user-select: none;
-  align-items: flex-start;
+#timeframe-controls input[type='radio'] {
   background-color: buttonface;
   background-image: -webkit-linear-gradient(rgb(237, 237, 237),
                                             rgb(237, 237, 237) 38%,
                                             rgb(222, 222, 222));
   border: 1px solid rgba(0, 0, 0, 0.25);
   border-radius: 0;
+  bottom: auto;
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
               inset 0 1px 2px rgba(255, 255, 255, 0.75);
   box-sizing: border-box;
   color: rgb(68, 68, 68);
   display: inline-block;
+  height: 100%;
   letter-spacing: normal;
   line-height: 2em;
-  margin-left: -1px;
-  margin-right: -1px;
+  margin: 0;
   min-height: 2em;
   min-width: 4em;
   text-align: center;
@@ -182,29 +165,48 @@ html[dir='rtl'] .display-filter-button {
   text-shadow: 0 1px 0 rgb(240, 240, 240);
   text-transform: none;
   vertical-align: middle;
+  width: auto;
   word-spacing: normal;
 }
 
-html[dir='rtl'] #display-filter-controls label span.last-button-component,
-#display-filter-controls label span.first-button-component {
+#timeframe-controls input[type='radio']:not(:first-of-type) {
+  -webkit-border-start-width: 0;
+}
+
+#timeframe-controls input[type='radio']:not(:first-of-type):focus {
+  -webkit-border-start-width: 1px;
+  -webkit-margin-start: -1px;
+}
+
+html[dir='ltr'] #timeframe-controls input[type='radio']:first-of-type,
+html[dir='rtl'] #timeframe-controls input[type='radio']:last-of-type {
   border-bottom-left-radius: 2px;
   border-top-left-radius: 2px;
-  margin-left: 0;
 }
 
-html[dir='rtl'] #display-filter-controls label span.first-button-component,
-#display-filter-controls label span.last-button-component {
+html[dir='ltr'] #timeframe-controls input[type='radio']:last-of-type,
+html[dir='rtl'] #timeframe-controls input[type='radio']:first-of-type {
   border-bottom-right-radius: 2px;
   border-top-right-radius: 2px;
-  margin-right: 0;
 }
 
-#display-filter-controls input:checked ~ span {
+#timeframe-controls input[type='radio']:checked {
   background-image: -webkit-linear-gradient(rgb(185, 185, 185),
                                             rgb(216, 216, 216) 38%,
                                             rgb(167, 167, 167));
-  border-left-color: rgb(173, 173, 173);
-  border-right-color: rgb(173, 173, 173);
+}
+
+#timeframe-controls input[type='radio']:focus {
+  border-color: rgb(77, 144, 254);
+}
+
+#timeframe-controls input[type='radio']::before {
+  display: none;  /* Hide the ( )/(O). */
+}
+
+#timeframe-controls input[type='radio']::after {
+  content: attr(aria-label);
+  padding: 0 1em;
 }
 
 #results-display {
@@ -406,17 +408,6 @@ html[dir='rtl'] .site-domain {
   background-color: rgb(225, 255, 205);
   color: rgb(148, 148, 148);
 }
-
-/* TODO(sergiu): If this is the final icon replace it with a separate resource.
- */
-.blocked-indicator {
-  background: url('../ssl/images/roadblock.png');
-  background-size: 30%;
-}
-
-.blocked-indicator .title {
-  color: rgb(151, 156, 160);
-}
 </if>
 
 .entry-box,
@@ -450,7 +441,11 @@ html[dir='rtl'] .site-domain {
 .site-domain {
   /* Make room for the favicon. */
   -webkit-padding-start: 16px;
+}
 
+.entry .visit-entry,
+.site-domain,
+.blocked-indicator {
   /* Control the favicon appearance. */
   background-position-y: center;
   background-repeat: no-repeat;
@@ -458,10 +453,24 @@ html[dir='rtl'] .site-domain {
 }
 
 html[dir='rtl'] .entry .visit-entry,
-html[dir='rtl'] .site-domain {
+html[dir='rtl'] .site-domain,
+html[dir='rtl'] .blocked-indicator {
   background-position-x: right;
 }
 
+<if expr="not is_android">
+/* TODO(sergiu): If this is the final icon replace it with a separate resource.
+ */
+.entry .blocked-indicator {
+  -webkit-padding-start: 20px;  /* 16px for favicon, 4px for <a> padding. */
+  background-image: url(../ssl/images/roadblock.png);
+}
+
+.blocked-indicator .title {
+  color: rgb(151, 156, 160);
+}
+</if>
+
 .site-domain button:hover {
   text-decoration: none;
 }
@@ -504,7 +513,7 @@ html .expand .site-domain-arrow {
 }
 
 .entry .title > a,
-.site-domain .link-button {
+.site-domain [is='action-link'] {
   color: rgb(48, 57, 66);
   margin: 2px;
   padding: 2px;