mirror of
https://codeberg.org/likwid/likwid.git
synced 2026-02-09 21:13:09 +00:00
ux: add ui-btn variants
This commit is contained in:
parent
d9ace2d201
commit
d0afeecc62
2 changed files with 21 additions and 13 deletions
|
|
@ -371,17 +371,36 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
padding: 0.625rem 1rem;
|
padding: 0.625rem 1rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
font-weight: var(--ui-font-weight-semibold);
|
font-weight: var(--ui-font-weight-semibold);
|
||||||
font-size: var(--ui-font-size-sm);
|
font-size: var(--ui-font-size-sm);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
text-decoration: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
transition: transform var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard), opacity var(--motion-fast) var(--easing-standard);
|
transition: transform var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard), opacity var(--motion-fast) var(--easing-standard);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ui-btn-sm {
|
||||||
|
padding: 0.45rem 0.75rem;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-btn-icon {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-btn-dashed {
|
||||||
|
border-style: dashed;
|
||||||
|
}
|
||||||
|
|
||||||
.ui-btn-lg {
|
.ui-btn-lg {
|
||||||
padding: 0.875rem 1.75rem;
|
padding: 0.875rem 1.75rem;
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@ const { slug } = Astro.params;
|
||||||
<input type="text" name="option" placeholder="Option 2" required />
|
<input type="text" name="option" placeholder="Option 2" required />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" id="add-option" class="ui-btn ui-btn-secondary create-add-btn">+ Add Option</button>
|
<button type="button" id="add-option" class="ui-btn ui-btn-secondary ui-btn-dashed">+ Add Option</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="error" class="error"></div>
|
<div id="error" class="error"></div>
|
||||||
<button type="submit" class="ui-btn ui-btn-primary create-submit-btn">Create Proposal</button>
|
<button type="submit" class="ui-btn ui-btn-primary create-submit-btn">Create Proposal</button>
|
||||||
|
|
@ -55,7 +55,7 @@ const { slug } = Astro.params;
|
||||||
div.className = 'option-input';
|
div.className = 'option-input';
|
||||||
div.innerHTML = `
|
div.innerHTML = `
|
||||||
<input type="text" name="option" placeholder="Option ${optionCount}" required />
|
<input type="text" name="option" placeholder="Option ${optionCount}" required />
|
||||||
<button type="button" class="ui-btn ui-btn-danger create-remove-btn" onclick="this.parentElement.remove()">×</button>
|
<button type="button" class="ui-btn ui-btn-danger ui-btn-icon" onclick="this.parentElement.remove()">×</button>
|
||||||
`;
|
`;
|
||||||
optionsContainer?.appendChild(div);
|
optionsContainer?.appendChild(div);
|
||||||
});
|
});
|
||||||
|
|
@ -186,17 +186,6 @@ const { slug } = Astro.params;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-add-btn {
|
|
||||||
border-style: dashed;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.create-remove-btn {
|
|
||||||
width: 36px;
|
|
||||||
padding: 0;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.create-submit-btn {
|
.create-submit-btn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue