mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-11-01 10:49:03 +08:00
Jack Franklin
98adbb535c
The new toolbar's icons are 16px, not 18px (temporarily until we roll out new icons), and as such we unfortunately need a new variant within the Button component. Bug: 1344101 Change-Id: I5a3ffb54971ac8ddeaa3f899aceb0c69b89b3d2c Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3757652 Commit-Queue: Wolfgang Beyer <wolfi@chromium.org> Reviewed-by: Wolfgang Beyer <wolfi@chromium.org> Auto-Submit: Jack Franklin <jacktfranklin@chromium.org> Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
70 lines
1.8 KiB
HTML
70 lines
1.8 KiB
HTML
<!--
|
|
Copyright 2021 The Chromium Authors. All rights reserved.
|
|
Use of this source code is governed by a BSD-style license that can be
|
|
found in the LICENSE file.
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<title>Button example</title>
|
|
<style>
|
|
#container {
|
|
padding: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
#toolbar {
|
|
background-color: var(--color-background);
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--color-details-hairline);
|
|
padding: 0px 5px;
|
|
height: 29px;
|
|
}
|
|
#small-toolbar {
|
|
background-color: var(--color-background);
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--color-details-hairline);
|
|
padding: 0px 5px;
|
|
height: 23px;
|
|
}
|
|
#unified-toolbar {
|
|
background-color: var(--color-background);
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--color-details-hairline);
|
|
padding: 5px 6px;
|
|
height: 26px;
|
|
}
|
|
.separator {
|
|
background-color: var(--color-details-hairline);
|
|
width: 1px;
|
|
height: 17px;
|
|
margin: 0px 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
</div>
|
|
<div id="toolbar">
|
|
</div>
|
|
<div id="small-toolbar">
|
|
</div>
|
|
<div id="unified-toolbar">
|
|
</div>
|
|
<form onsubmit="event.preventDefault(); alert('submitted');" id="form">
|
|
<input name="field" placeholder="Enter smth" />
|
|
</form>
|
|
<script type="module" src="./basic.js"></script>
|
|
</body>
|
|
</html>
|