| OLD | NEW |
|---|
| (Empty) |
| 1 /* | |
| 2 * Copyright (c) 2015 The Chromium Authors. All rights reserved. | |
| 3 * Use of this source code is governed by a BSD-style license that can be | |
| 4 * found in the LICENSE file. | |
| 5 */ | |
| 6 | |
| 7 :host { | |
| 8 width: 270px; | |
| 9 height: 350px; | |
| 10 -webkit-user-select: none; | |
| 11 padding: 16px; | |
| 12 overflow: hidden; | |
| 13 } | |
| 14 | |
| 15 .bezier-preset-selected > svg { | |
| 16 background-color: rgb(56, 121, 217); | |
| 17 } | |
| 18 | |
| 19 .bezier-preset-label { | |
| 20 font-size: 10px; | |
| 21 } | |
| 22 | |
| 23 .bezier-preset { | |
| 24 width: 50px; | |
| 25 height: 50px; | |
| 26 padding: 5px; | |
| 27 margin: auto; | |
| 28 background-color: #f5f5f5; | |
| 29 border-radius: 3px; | |
| 30 } | |
| 31 | |
| 32 .bezier-preset line.bezier-control-line { | |
| 33 stroke: #666; | |
| 34 stroke-width: 1; | |
| 35 stroke-linecap: round; | |
| 36 fill: none; | |
| 37 } | |
| 38 | |
| 39 .bezier-preset circle.bezier-control-circle { | |
| 40 fill: #666; | |
| 41 } | |
| 42 | |
| 43 .bezier-preset path.bezier-path { | |
| 44 stroke: black; | |
| 45 stroke-width: 2; | |
| 46 stroke-linecap: round; | |
| 47 fill: none; | |
| 48 } | |
| 49 | |
| 50 .bezier-preset-selected path.bezier-path, .bezier-preset-selected line.bezier-co
ntrol-line { | |
| 51 stroke: white; | |
| 52 } | |
| 53 | |
| 54 .bezier-preset-selected circle.bezier-control-circle { | |
| 55 fill: white; | |
| 56 } | |
| 57 | |
| 58 .bezier-curve line.linear-line { | |
| 59 stroke: #eee; | |
| 60 stroke-width: 2; | |
| 61 stroke-linecap: round; | |
| 62 fill: none; | |
| 63 } | |
| 64 | |
| 65 .bezier-curve line.bezier-control-line { | |
| 66 stroke: #9C27B0; | |
| 67 stroke-width: 2; | |
| 68 stroke-linecap: round; | |
| 69 fill: none; | |
| 70 opacity: 0.6; | |
| 71 } | |
| 72 | |
| 73 .bezier-curve circle.bezier-control-circle { | |
| 74 fill: #9C27B0; | |
| 75 cursor: pointer; | |
| 76 } | |
| 77 | |
| 78 .bezier-curve path.bezier-path { | |
| 79 stroke: black; | |
| 80 stroke-width: 3; | |
| 81 stroke-linecap: round; | |
| 82 fill: none; | |
| 83 } | |
| 84 | |
| 85 .bezier-preview-container { | |
| 86 position: relative; | |
| 87 background-color: white; | |
| 88 overflow: hidden; | |
| 89 border-radius: 20px; | |
| 90 width: 200%; | |
| 91 height: 20px; | |
| 92 z-index: 2; | |
| 93 flex-shrink: 0; | |
| 94 opacity: 0; | |
| 95 } | |
| 96 | |
| 97 .bezier-preview-animation { | |
| 98 background-color: #9C27B0; | |
| 99 width: 20px; | |
| 100 height: 20px; | |
| 101 border-radius: 20px; | |
| 102 position: absolute; | |
| 103 } | |
| 104 | |
| 105 .bezier-preview-onion { | |
| 106 margin-top: -20px; | |
| 107 position: relative; | |
| 108 z-index: 1; | |
| 109 } | |
| 110 | |
| 111 .bezier-preview-onion > .bezier-preview-animation { | |
| 112 opacity: 0.1; | |
| 113 } | |
| 114 | |
| 115 svg.bezier-preset-modify { | |
| 116 background-color: #f5f5f5; | |
| 117 border-radius: 35px; | |
| 118 display: inline-block; | |
| 119 visibility: hidden; | |
| 120 transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1); | |
| 121 cursor: pointer; | |
| 122 position: absolute; | |
| 123 } | |
| 124 | |
| 125 svg.bezier-preset-modify:hover, .bezier-preset:hover { | |
| 126 background-color: #999; | |
| 127 } | |
| 128 | |
| 129 .bezier-preset-selected .bezier-preset:hover { | |
| 130 background-color: rgb(56, 121, 217); | |
| 131 } | |
| 132 | |
| 133 .bezier-preset-modify path { | |
| 134 stroke-width: 2; | |
| 135 stroke: black; | |
| 136 fill: none; | |
| 137 } | |
| 138 | |
| 139 .bezier-preset-selected .bezier-preset-modify { | |
| 140 opacity: 1; | |
| 141 } | |
| 142 | |
| 143 .bezier-preset-category { | |
| 144 width: 50px; | |
| 145 margin: 20px 0; | |
| 146 cursor: pointer; | |
| 147 transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1); | |
| 148 } | |
| 149 | |
| 150 span.bezier-display-value { | |
| 151 width: 100%; | |
| 152 -webkit-user-select: text; | |
| 153 display: block; | |
| 154 text-align: center; | |
| 155 line-height: 20px; | |
| 156 height: 20px; | |
| 157 cursor: text; | |
| 158 white-space: nowrap !important; | |
| 159 } | |
| 160 | |
| 161 .bezier-container { | |
| 162 display: flex; | |
| 163 margin-top: 38px; | |
| 164 } | |
| 165 | |
| 166 svg.bezier-curve { | |
| 167 margin-left: 32px; | |
| 168 margin-top: -8px; | |
| 169 } | |
| 170 | |
| 171 svg.bezier-preset-modify.bezier-preset-plus { | |
| 172 right: 0; | |
| 173 } | |
| 174 | |
| 175 .bezier-header { | |
| 176 margin-top: 16px; | |
| 177 } | |
| 178 | |
| 179 svg.bezier-preset-modify:active, | |
| 180 .-theme-selection-color { | |
| 181 transform: scale(1.1); | |
| 182 background-color: rgb(56, 121, 217); | |
| 183 } | |
| 184 | |
| 185 .bezier-preset-category:active { | |
| 186 transform: scale(1.05); | |
| 187 } | |
| 188 | |
| 189 .bezier-header-active > svg.bezier-preset-modify { | |
| 190 visibility: visible; | |
| 191 } | |
| 192 | |
| 193 .bezier-preset-modify:active path { | |
| 194 stroke: white; | |
| 195 } | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2299473002:
DevTools: Move BezierEditor from elements/ to ui/ (Closed)
