Web Inspector: spring function editor has unusual layout, should have left-aligned...
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / SpringEditor.css
1 /*
2  * Copyright (C) 2016 Devin Rousso <dcrousso+webkit@gmail.com>. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 .spring-editor {
27     width: 200px;
28     height: 200px;
29     --spring-editor-horizontal-margin: 5px;
30 }
31
32 .spring-editor > .spring-preview {
33     width: calc(100% - 10px);
34     height: 25px;
35     margin: 5px var(--spring-editor-horizontal-margin) 0;
36     border-bottom: 1px solid lightgrey;
37 }
38
39 .spring-editor > .spring-preview > div {
40     position: relative;
41     width: 20px;
42     height: 20px;
43     background-color: var(--selected-background-color);
44     border-radius: 50%;
45 }
46
47 .spring-editor > .spring-timing {
48     position: relative;
49     margin: -0.5px calc(2 * var(--spring-editor-horizontal-margin)) 10px;
50     padding: 0 1px;
51 }
52
53 .spring-editor > .spring-timing > div {
54     width: 0;
55     border-left: 4px solid transparent;
56     border-right: 4px solid transparent;
57     border-top: 4px solid black;
58     transition-timing-function: linear;
59 }
60
61 .spring-editor > .spring-timing:matches(::before, ::after) {
62     position: absolute;
63     top: 2.5px;
64     font-size: 9px;
65 }
66
67 .spring-editor > .spring-timing::before {
68     left: 0;
69     content: "0s";
70 }
71
72 .spring-editor > .spring-timing::after {
73     right: 0;
74     content: attr(data-duration) "s";
75 }
76
77 .spring-editor > :matches(.spring-preview, .spring-timing) > div {
78     transition-property: none;
79 }
80
81 .spring-editor > .animate:matches(.spring-preview, .spring-timing) > div {
82     transition-property: transform;
83 }
84
85 .spring-editor > .number-input-container > .number-input-row {
86     display: flex;
87     flex-wrap: wrap;
88     margin-bottom: 3px;
89 }
90
91 .spring-editor > .number-input-container > .number-input-row > .number-input-row-title {
92     width: 100%;
93     margin: 5px var(--spring-editor-horizontal-margin) 0;
94 }
95
96 .spring-editor > .number-input-container > .number-input-row > input {
97     width: calc(25% - 2 * var(--spring-editor-horizontal-margin));
98     text-align: right;
99     margin: 0 var(--spring-editor-horizontal-margin);
100 }
101
102 .spring-editor > .number-input-container > .number-input-row > input::-webkit-inner-spin-button {
103     -webkit-appearance: none;
104 }
105
106 .spring-editor > .number-input-container > .number-input-row > input[type="range"] {
107     width: calc(75% - 2 * var(--spring-editor-horizontal-margin));
108     background-color: transparent;
109 }