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 styles for disabled buttons

Browse Source
This commit is contained in:
lana-k
2020-09-21 14:06:19 +02:00
parent 347ac0d649
commit 708714b3a5
3 changed files with 31 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@ button.primary {
height: 36px; height: 36px;
padding: 0 12px; padding: 0 12px;
min-width: 83px; min-width: 83px;
color: var(--color-text-white); color: var(--color-text-light);
text-shadow: var(--shadow); text-shadow: var(--shadow);
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
@@ -16,9 +16,17 @@ button.primary {
button.primary:hover { button.primary:hover {
background: var(--color-accent-shade); background: var(--color-accent-shade);
border: 1px solid var(--color-accent-shade); border: 1px solid var(--color-accent-shade);
color: var(--color-text-white); color: var(--color-text-light);
text-shadow: var(--shadow); text-shadow: var(--shadow);
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
} }
button.primary:disabled {
background: var(--color-bg-light-2);
border: 1px solid var(--color-border);
color: var(--color-text-light-2);
text-shadow: none;
cursor: default;
}

26
src/assets/styles/variables.css
View File

@@ -1,10 +1,24 @@
:root { :root {
--color-bg-light: #F3F6FA; --color-white: #ffffff;
--color-accent: #119DFF; --color-gray-light: #F3F6FA;
--color-accent-shade: #0D76BF; --color-gray-light-2: #DFE8F3;
--color-border-light: #DFE8F3; --color-gray-light-3: #C8D4E3;
--color-text-base: #506784; --color-gray-medium: #A2B1C6;
--color-text-white: #ffffff; --color-gray-dark: #506784;
--color-blue-medium: #119DFF;
--color-blue-dark: #0D76BF;
--color-bg-light: var(--color-gray-light);
--color-bg-light-2: var(--color-gray-light-2);
--color-accent: var(--color-blue-medium);
--color-accent-shade: var(--color-blue-dark);
--color-border-light: var(--color-gray-light-2);
--color-border: var(--color-gray-light-3);
--color-text-light: var(--color-white);
--color-text-light-2: var(--color-gray-medium);
--color-text-base: var(--color-gray-dark);
--color-text-medium: var(--color-gray-medium);
--shadow: 0 1px 2px rgba(42, 63, 95, 0.7); --shadow: 0 1px 2px rgba(42, 63, 95, 0.7);

2
src/components/MainMenu.vue
View File

@@ -5,7 +5,7 @@
<router-link to="/my-queries">My queries</router-link> <router-link to="/my-queries">My queries</router-link>
</div> </div>
<div> <div>
<button class="primary">Save</button> <button class="primary" disabled>Save</button>
<button class="primary">Create</button> <button class="primary">Create</button>
</div> </div>
</nav> </nav>