zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 18:18:53 +08:00
Code Issues Projects Releases Wiki Activity

add toolbar buttons style

Browse Source
This commit is contained in:
lana-k
2020-10-09 14:56:19 +02:00
parent 5317c415b2
commit b7bf00eb89
2 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/assets/styles/buttons.css
View File

@@ -1,3 +1,7 @@
button:focus {
outline: none;
}
button.primary { button.primary {
background: var(--color-accent); background: var(--color-accent);
border: 1px solid var(--color-accent-shade); border: 1px solid var(--color-accent-shade);
@@ -30,7 +34,21 @@ button.primary:disabled {
cursor: default; cursor: default;
} }
button.primary:focus { button.toolbar {
outline: none; background: transparent;
border: none;
box-sizing: border-box;
height: 36px;
padding: 0 12px;
color: var(--color-text-base);
font-size: 14px;
font-weight: 600;
cursor: pointer;
} }
button.toolbar:hover {
color: var(--color-accent);
}

6
src/views/MyQueries.vue
View File

@@ -3,9 +3,9 @@
<div id="my-queries-content"> <div id="my-queries-content">
<div id="my-queries-toolbar"> <div id="my-queries-toolbar">
<div id="toolbar-buttons"> <div id="toolbar-buttons">
<button>Import</button> <button class="toolbar">Import</button>
<button>Export</button> <button class="toolbar">Export</button>
<button>Delete</button> <button class="toolbar">Delete</button>
</div> </div>
<div id="toolbar-search"> <div id="toolbar-search">
<input type="text" placeholder="Search query by name"/> <input type="text" placeholder="Search query by name"/>