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

Side by Side Diff: Source/devtools/front_end/responsiveDesignView.css

Issue 307973002: DevTools: brush up responsive design toolbar css. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 6 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/ResponsiveDesignView.js ('k') | no next file » | 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 2014 The Chromium Authors. All rights reserved. 2 * Copyright 2014 The Chromium Authors. All rights reserved.
3 * Use of this source code is governed by a BSD-style license that can be 3 * Use of this source code is governed by a BSD-style license that can be
4 * found in the LICENSE file. 4 * found in the LICENSE file.
5 */ 5 */
6 6
7 .responsive-design { 7 .responsive-design {
8 overflow: hidden; 8 overflow: hidden;
9 position: relative; 9 position: relative;
10 } 10 }
(...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after
70 70
71 .responsive-design-resolution-width { 71 .responsive-design-resolution-width {
72 top: 0; 72 top: 0;
73 } 73 }
74 74
75 .responsive-design-resolution-height { 75 .responsive-design-resolution-height {
76 left: 0; 76 left: 0;
77 } 77 }
78 78
79 .responsive-design-toolbar { 79 .responsive-design-toolbar {
80 flex: 0 0 24px; 80 flex: none;
81 background-color: rgb(64, 64, 64); 81 background-color: rgb(64, 64, 64);
82 color: rgb(180, 180, 180); 82 color: rgb(180, 180, 180);
83 display: flex;
84 align-items: center;
85 border-bottom: 1px solid rgb(163, 163, 163);
86 white-space: nowrap;
87 } 83 }
88 84
89 .responsive-design-toolbar fieldset, 85 .responsive-design-toolbar fieldset,
90 .responsive-design-toolbar p { 86 .responsive-design-toolbar p {
91 margin: 0; 87 margin: 0;
92 padding: 0; 88 padding: 0;
93 border: 0; 89 border: 0;
94 display: inline-block; 90 display: inline-block;
95 } 91 }
96 92
97 .responsive-design-toolbar fieldset {
98 padding: 0 7px 0 0;
99 height: 23px;
100 }
101
102 .responsive-design-toolbar .responsive-design-section { 93 .responsive-design-toolbar .responsive-design-section {
103 border-left: 1px solid rgb(163, 163, 163); 94 display: inline-flex;
104 } 95 height: 24px;
105 96 border: 1px solid rgb(163, 163, 163);
106 .responsive-design-toolbar fieldset:first-child { 97 border-left: none;
107 border-right: none; 98 margin-top: -1px;
99 white-space: nowrap;
100 align-items: center;
101 padding-right: 3px;
108 } 102 }
109 103
110 .responsive-design-toolbar .field-error-message { 104 .responsive-design-toolbar .field-error-message {
111 display: none; 105 display: none;
112 } 106 }
113 .responsive-design-toolbar fieldset > label {
114 display: inline-flex;
115 height: 22px;
116 align-items: center;
117 }
118 107
119 .responsive-design-toolbar input[type='text'] { 108 .responsive-design-toolbar input[type='text'] {
120 color: rgb(255, 156, 0); 109 color: rgb(255, 156, 0);
121 text-align: center; 110 text-align: center;
122 background-color: transparent; 111 background-color: transparent;
123 border: none; 112 border: none;
124 margin: 0; 113 margin: 0;
125 padding: 3px 0; 114 padding: 3px 0;
126 } 115 }
127 116
128 .responsive-design-toolbar input:disabled, 117 .responsive-design-toolbar input:disabled,
129 .responsive-design-toolbar button:disabled { 118 .responsive-design-toolbar button:disabled {
130 opacity: 0.7; 119 opacity: 0.7;
131 } 120 }
132 121
133 .responsive-design-toolbar input[type='checkbox'] { 122 .responsive-design-toolbar input[type='checkbox'] {
134 -webkit-appearance: none; 123 -webkit-appearance: none;
135 margin: 0 5px 0 7px; 124 margin: 0 5px 0 7px;
136 border: 1px solid rgb(45, 45, 45); 125 border: 1px solid rgb(45, 45, 45);
137 border-radius: 3px; 126 border-radius: 3px;
138 background-color: rgb(102, 102, 102); 127 background-color: rgb(102, 102, 102);
128 position: relative;
129 top: 1px;
139 } 130 }
140 131
141 .responsive-design-toolbar input[type='checkbox']:after { 132 .responsive-design-toolbar input[type='checkbox']:after {
142 content: ''; 133 content: '';
143 line-height: 10px; 134 line-height: 10px;
144 position: absolute; 135 position: absolute;
145 cursor: pointer; 136 cursor: pointer;
146 width: 12px; 137 width: 12px;
147 height: 12px; 138 height: 12px;
148 background: none; 139 background: none;
149 } 140 }
150 141
151 .responsive-design-toolbar input[type='checkbox']:checked:after { 142 .responsive-design-toolbar input[type='checkbox']:checked:after {
152 background: rgb(220, 220, 220); 143 background: rgb(220, 220, 220);
153 } 144 }
154 145
155 .responsive-design-toolbar input.error-input { 146 .responsive-design-toolbar input.error-input {
156 color: red; 147 color: red;
157 text-decoration: line-through; 148 text-decoration: line-through;
158 } 149 }
159 150
160 .responsive-design-toolbar select { 151 .responsive-design-toolbar select {
161 width: 150px; 152 width: 150px;
162 background-color: transparent; 153 background-color: transparent;
163 color: rgb(255, 156, 0); 154 color: rgb(255, 156, 0);
164 border: 0; 155 border: 0;
165 margin-left: 10px; 156 margin-left: 10px;
166 line-height: 16px; 157 line-height: 16px;
158 position: relative;
159 top: 1px;
167 } 160 }
168 161
169 .responsive-design-toolbar input:focus { 162 .responsive-design-toolbar input:focus {
170 background-color: rgb(102, 102, 102) 163 background-color: rgb(102, 102, 102)
171 } 164 }
172 165
173 .responsive-design-icon { 166 .responsive-design-icon {
174 background-color: rgb(180, 180, 180); 167 background-color: rgb(180, 180, 180);
175 -webkit-mask-image: url(Images/responsiveDesign.png); 168 -webkit-mask-image: url(Images/responsiveDesign.png);
176 -webkit-mask-size: 48px 16px; 169 -webkit-mask-size: 48px 16px;
(...skipping 67 matching lines...) Expand 10 before | Expand all | Expand 10 after
244 float: left; 237 float: left;
245 margin-right: 4px; 238 margin-right: 4px;
246 margin-left: 2px; 239 margin-left: 2px;
247 } 240 }
248 241
249 @media (-webkit-min-device-pixel-ratio: 1.5) { 242 @media (-webkit-min-device-pixel-ratio: 1.5) {
250 .responsive-design-warning::before { 243 .responsive-design-warning::before {
251 background-image: url(Images/statusbarButtonGlyphs_2x.png); 244 background-image: url(Images/statusbarButtonGlyphs_2x.png);
252 } 245 }
253 } /* media */ 246 } /* media */
OLDNEW
« no previous file with comments | « Source/devtools/front_end/ResponsiveDesignView.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698