Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(148)

Side by Side Diff: Source/devtools/front_end/ui/tabbedPane.css

Issue 1176343002: DevTools: make toolbar button click targets square (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: review comments addressed Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « Source/devtools/front_end/ui/splitWidget.css ('k') | Source/devtools/front_end/ui/toolbar.css » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved. 2 * Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved.
3 * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org> 3 * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
4 * Copyright (C) 2011 Google Inc. All rights reserved. 4 * Copyright (C) 2011 Google Inc. All rights reserved.
5 * 5 *
6 * Redistribution and use in source and binary forms, with or without 6 * Redistribution and use in source and binary forms, with or without
7 * modification, are permitted provided that the following conditions are 7 * modification, are permitted provided that the following conditions are
8 * met: 8 * met:
9 * 9 *
10 * 1. Redistributions of source code must retain the above copyright 10 * 1. Redistributions of source code must retain the above copyright
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after
47 47
48 .tabbed-pane-placeholder { 48 .tabbed-pane-placeholder {
49 font-size: 14px; 49 font-size: 14px;
50 text-align: center; 50 text-align: center;
51 margin-top: 20px; 51 margin-top: 20px;
52 text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0; 52 text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
53 } 53 }
54 54
55 .tabbed-pane-header { 55 .tabbed-pane-header {
56 display: flex; 56 display: flex;
57 flex: 0 0 23px; 57 flex: 0 0 27px;
58 border-bottom: 1px solid #dadada; 58 border-bottom: 1px solid #dadada;
59 overflow: hidden; 59 overflow: hidden;
60 width: 100%; 60 width: 100%;
61 background-color: #eee; 61 background-color: #f3f3f3;
62 }
63
64 :host-context(.material) .tabbed-pane-header {
65 flex: 0 0 27px;
66 } 62 }
67 63
68 .tabbed-pane-header-contents { 64 .tabbed-pane-header-contents {
69 flex: auto; 65 flex: auto;
70 pointer-events: none; 66 pointer-events: none;
71 margin-left: 5px; 67 margin-left: 5px;
72 position: relative; 68 position: relative;
73 } 69 }
74 70
75 .tabbed-pane-header-contents > * { 71 .tabbed-pane-header-contents > * {
76 pointer-events: initial; 72 pointer-events: initial;
77 } 73 }
78 74
79 .tabbed-pane-header-tab { 75 .tabbed-pane-header-tab {
80 float: left; 76 float: left;
81 margin-top: 2px; 77 margin-top: 2px;
82 padding: 2px 4px 2px 4px; 78 padding: 2px 4px 2px 4px;
83 height: 21px; 79 height: 24px;
84 border: 1px solid transparent; 80 border: 1px solid transparent;
85 border-bottom: none; 81 border-bottom: none;
86 line-height: 15px; 82 line-height: 15px;
87 white-space: nowrap; 83 white-space: nowrap;
88 cursor: default; 84 cursor: default;
89 display: flex; 85 display: flex;
90 align-items: center; 86 align-items: center;
91 } 87 }
92 88
93 .tabbed-pane-header-tab-title { 89 .tabbed-pane-header-tab-title {
94 text-overflow: ellipsis; 90 text-overflow: ellipsis;
95 overflow: hidden; 91 overflow: hidden;
96 } 92 }
97 93
98 :host-context(.material) .tabbed-pane-header-tab {
99 height: 25px;
100 padding-top: 0;
101 }
102
103 .tabbed-pane-header-tab.measuring { 94 .tabbed-pane-header-tab.measuring {
104 visibility: hidden; 95 visibility: hidden;
105 } 96 }
106 97
107 .tabbed-pane-header-tab.selected { 98 .tabbed-pane-header-tab.selected {
108 border: 1px solid rgb(163, 163, 163); 99 border: 1px solid #ccc;
109 border-bottom: none; 100 border-bottom: none;
110 } 101 }
111 102
112 .tabbed-pane-header-tab.selected { 103 .tabbed-pane-header-tab.selected {
113 background: white; 104 background: white;
114 border-top-color: #bbb; 105 border-top-color: #ccc;
115 } 106 }
116 107
117 .tabbed-pane-header-tab .tabbed-pane-close-button { 108 .tabbed-pane-header-tab .tabbed-pane-close-button {
118 display: inline-block; 109 display: inline-block;
119 position: relative; 110 position: relative;
120 top: 2px; 111 top: 2px;
121 left: 1px; 112 left: 1px;
122 margin-left: 2px; 113 margin-left: 2px;
123 margin-top: -3px; 114 margin-top: -3px;
124 visibility: hidden; 115 visibility: hidden;
125 } 116 }
126 117
127 .tabbed-pane-header-tab:hover .tabbed-pane-close-button, 118 .tabbed-pane-header-tab:hover .tabbed-pane-close-button,
128 .tabbed-pane-header-tab.selected .tabbed-pane-close-button { 119 .tabbed-pane-header-tab.selected .tabbed-pane-close-button {
129 visibility: visible; 120 visibility: visible;
130 } 121 }
131 122
132 .tabbed-pane-header-tabs-drop-down-container { 123 .tabbed-pane-header-tabs-drop-down-container {
133 float: left; 124 float: left;
134 position: relative; 125 position: relative;
135 vertical-align: bottom; 126 vertical-align: bottom;
136 line-height: 20px; 127 line-height: 24px;
137 opacity: 0.8; 128 opacity: 0.8;
138 color: inherit; 129 color: inherit;
139 font-size: 133%; 130 font-size: 133%;
140 padding: 0 7px; 131 padding: 0 7px;
141 cursor: default; 132 cursor: default;
142 height: 23px; 133 height: 25px;
143 }
144
145 :host-context(.material) .tabbed-pane-header-tabs-drop-down-container {
146 line-height: 25px;
147 height: 28px;
148 width: 28px;
149 text-align: center;
150 padding: 0;
151 } 134 }
152 135
153 .tabbed-pane-header-tabs-drop-down-container:hover { 136 .tabbed-pane-header-tabs-drop-down-container:hover {
154 background-color: rgba(105, 105, 105, 0.1); 137 background-color: rgba(105, 105, 105, 0.1);
155 } 138 }
156 139
157 .tabbed-pane-header-tabs-drop-down-container.measuring { 140 .tabbed-pane-header-tabs-drop-down-container.measuring {
158 visibility: hidden; 141 visibility: hidden;
159 } 142 }
160 143
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after
217 200
218 .tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-tab.selected { 201 .tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-tab.selected {
219 color: inherit; 202 color: inherit;
220 border: none transparent; 203 border: none transparent;
221 border-left: 6px solid #666; 204 border-left: 6px solid #666;
222 } 205 }
223 206
224 .tabbed-pane-tab-slider { 207 .tabbed-pane-tab-slider {
225 height: 2px; 208 height: 2px;
226 position: absolute; 209 position: absolute;
227 bottom: 0; 210 bottom: -1px;
228 background-color: #3E82F7; 211 background-color: #3E82F7;
229 left: 0; 212 left: 0;
230 z-index: 50; 213 z-index: 50;
231 transform-origin: 0 0; 214 transform-origin: 0 0;
232 transition: transform 150ms cubic-bezier(0, 0, 0.2, 1); 215 transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
233 visibility: hidden; 216 visibility: hidden;
234 } 217 }
235 218
236 .tabbed-pane-tab-slider.enabled { 219 .tabbed-pane-tab-slider.enabled {
237 visibility: visible; 220 visibility: visible;
238 } 221 }
239 222
240 .tabbed-pane-header.tabbed-pane-no-header-background { 223 .tabbed-pane-header.tabbed-pane-no-header-background {
241 background-color: transparent; 224 background-color: transparent;
242 } 225 }
OLDNEW
« no previous file with comments | « Source/devtools/front_end/ui/splitWidget.css ('k') | Source/devtools/front_end/ui/toolbar.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698