scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-12-28 19:24:10 +08:00
Code Issues Projects Releases Packages Wiki Activity

Using tailwind [SCI-10012]

Browse source
This commit is contained in:
Giga Chubinidze 2024-01-29 12:49:55 +04:00
parent ab2b6b589a
commit 171770a7d3
1 changed files with 258 additions and 268 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

526
app/views/design_elements/_button.html.erb
View file

@ -1,537 +1,527 @@
<h1>Button</h1>
<div class="buttons">
<div class="primary">
<br>
<div class="buttons flex flex-wrap">
<div class="mb-4 primary mx-2 box-border mb-4">
<label>Primary, large</label>
<br>
<button type="button" class="btn btn-primary btn-lg">
<button type="button" class="block btn btn-primary btn-lg">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Primary, medium</label>
<br>
<button type="button" class="btn btn-primary">
<button type="button" class="block btn btn-primary">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Primary, small</label>
<br>
<button type="button" class="btn btn-primary btn-sm">
<button type="button" class="block btn btn-primary btn-sm">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Primary, x-small</label>
<br>
<button type="button" class="btn btn-primary btn-xs">
<button type="button" class="block btn btn-primary btn-xs">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
</div>
<div class="secondary">
<br>
<div class="secondary mx-2 box-border mb-4">
<label>Secondary, large</label>
<br>
<button type="button" class="btn btn-secondary btn-lg">
<button type="button" class="block btn btn-secondary btn-lg">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Secondary, medium</label>
<br>
<button type="button" class="btn btn-secondary">
<button type="button" class="block btn btn-secondary">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Secondary, small</label>
<br>
<button type="button" class="btn btn-secondary btn-sm">
<button type="button" class="block btn btn-secondary btn-sm">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Secondary, x-small</label>
<br>
<button type="button" class="btn btn-secondary btn-xs">
<button type="button" class="block btn btn-secondary btn-xs">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
</div>
<div class="tertiary">
<br>
<div class="tertiary mx-2 box-border mb-4">
<label>Tertiary, large</label>
<br>
<button type="button" class="btn btn-tertiary btn-lg">
<button type="button" class="block btn btn-tertiary btn-lg">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Tertiary, medium</label>
<br>
<button type="button" class="btn btn-tertiary">
<button type="button" class="block btn btn-tertiary">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Tertiary, small</label>
<br>
<button type="button" class="btn btn-tertiary btn-sm">
<button type="button" class="block btn btn-tertiary btn-sm">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Tertiary, x-small</label>
<br>
<button type="button" class="btn btn-tertiary btn-xs">
<button type="button" class="block btn btn-tertiary btn-xs">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
</div>
<div class="delete">
<br>
<div class="delete mx-2 box-border mb-4">
<label>Delete, large</label>
<br>
<button type="button" class="btn btn-danger btn-lg">
<button type="button" class="block btn btn-danger btn-lg">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Delete, medium</label>
<br>
<button type="button" class="btn btn-danger ">
<button type="button" class="block btn btn-danger ">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Delete, small</label>
<br>
<button type="button" class="btn btn-danger btn-sm">
<button type="button" class="block btn btn-danger btn-sm">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Delete, x-small</label>
<br>
<button type="button" class="btn btn-danger btn-xs">
<button type="button" class="block btn btn-danger btn-xs">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
</div>
<div class="primary-disabled">
<br>
<div class="primary-disabled mx-2 box-border mb-4">
<label>Primary, disabled large</label>
<br>
<button type="button" class="disabled btn btn-primary btn-lg" disabled>
<button type="button" class="block disabled btn btn-primary btn-lg" disabled>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Primary, disabled medium</label>
<br>
<button type="button" class="disabled btn btn-primary">
<button type="button" class="block disabled btn btn-primary">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Primary, disabled small</label>
<br>
<button type="button" class="disabled btn btn-primary btn-sm">
<button type="button" class="block disabled btn btn-primary btn-sm">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Primary, disabled x-small</label>
<br>
<button type="button" class="disabled btn btn-primary btn-xs">
<button type="button" class="block disabled btn btn-primary btn-xs">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
</div>
<div class="secondary-disabled">
<br>
<div class="secondary-disabled mx-2 box-border mb-4">
<label>Secondary, disabled large</label>
<br>
<button type="button" class="disabled btn btn-secondary btn-lg">
<button type="button" class="block disabled btn btn-secondary btn-lg">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Secondary, disabled medium</label>
<br>
<button type="button" class="disabled btn btn-secondary">
<button type="button" class="block disabled btn btn-secondary">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Secondary, disabled small</label>
<br>
<button type="button" class="disabled btn btn-secondary btn-sm">
<button type="button" class="block disabled btn btn-secondary btn-sm">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Secondary, disabled x-small</label>
<br>
<button type="button" class="disabled btn btn-secondary btn-xs">
<button type="button" class="block disabled btn btn-secondary btn-xs">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
</div>
<div class="tertiary">
<br>
<div class="tertiary mx-2 box-border mb-4">
<label>Tertiary, disabled large</label>
<br>
<button type="button" class="disabled btn btn-tertiary btn-lg">
<button type="button" class="block disabled btn btn-tertiary btn-lg">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Tertiary, disabled medium</label>
<br>
<button type="button" class="disabled btn btn-tertiary ">
<button type="button" class="block disabled btn btn-tertiary ">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Tertiary, disabled small</label>
<br>
<button type="button" class="disabled btn btn-tertiary btn-sm">
<button type="button" class="block disabled btn btn-tertiary btn-sm">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Tertiary, disabled x-small</label>
<br>
<button type="button" class="disabled btn btn-tertiary btn-xs">
<button type="button" class="block disabled btn btn-tertiary btn-xs">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
</div>
<div class="delete-disabled">
<br>
<div class="delete-disabled mx-2 box-border mb-4">
<label>Delete, disabled large</label>
<br>
<button type="button" class="disabled btn btn-danger btn-lg">
<button type="button" class="block disabled btn btn-danger btn-lg">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Delete, disabled medium</label>
<br>
<button type="button" class="disabled btn btn-danger">
<button type="button" class="block disabled btn btn-danger">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Delete, disabled small</label>
<br>
<button type="button" class="disabled btn btn-danger btn-sm">
<button type="button" class="block disabled btn btn-danger btn-sm">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Delete, disabled x-small</label>
<br>
<button type="button" class="disabled btn btn-danger btn-xs">
<button type="button" class="block disabled btn btn-danger btn-xs">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
<span><%= 'Button' %><span>
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
</div>
<div class="primary-icon">
<br>
<div class="primary-icon mx-2 box-border mb-4">
<label>Primary icon, large</label>
<br>
<button type="button" class="btn btn-primary icon-btn btn-lg">
<button type="button" class="block btn btn-primary icon-btn btn-lg">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Primary icon, medium</label>
<br>
<button type="button" class="btn btn-primary icon-btn">
<button type="button" class="block btn btn-primary icon-btn">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Primary icon, small</label>
<br>
<button type="button" class="btn btn-primary icon-btn btn-sm">
<button type="button" class="block btn btn-primary icon-btn btn-sm">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Primary icon, x-small</label>
<br>
<button type="button" class="btn btn-primary icon-btn btn-xs">
<button type="button" class="block btn btn-primary icon-btn btn-xs">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
</div>
<div class="secondary-icon">
<br>
<div class="secondary-icon mx-2 box-border mb-4">
<label>Secondary icon, large</label>
<br>
<button type="button" class="btn btn-secondary icon-btn btn-lg">
<button type="button" class="block btn btn-secondary icon-btn btn-lg">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Secondary icon, medium</label>
<br>
<button type="button" class="btn btn-secondary icon-btn">
<button type="button" class="block btn btn-secondary icon-btn">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Secondary icon, small</label>
<br>
<button type="button" class="btn btn-secondary icon-btn btn-sm">
<button type="button" class="block btn btn-secondary icon-btn btn-sm">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Secondary icon, x-small</label>
<br>
<button type="button" class="btn btn-secondary icon-btn btn-xs">
<button type="button" class="block btn btn-secondary icon-btn btn-xs">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
</div>
<div class="tertiary-icon">
<br>
<div class="tertiary-icon mx-2 box-border mb-4">
<label>Tertiary icon, large</label>
<br>
<button type="button" class="btn btn-tertiary icon-btn btn-lg">
<button type="button" class="block btn btn-tertiary icon-btn btn-lg">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Tertiary icon, medium</label>
<br>
<button type="button" class="btn btn-tertiary icon-btn">
<button type="button" class="block btn btn-tertiary icon-btn">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Tertiary icon, small</label>
<br>
<button type="button" class="btn btn-tertiary icon-btn btn-sm">
<button type="button" class="block btn btn-tertiary icon-btn btn-sm">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Tertiary icon, x-small</label>
<br>
<button type="button" class="btn btn-tertiary icon-btn btn-xs">
<button type="button" class="block btn btn-tertiary icon-btn btn-xs">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
</div>
<div class="primary-icon-disabled">
<br>
<div class="primary-icon-disabled mx-2 box-border mb-4">
<label>Primary icon disabled, large</label>
<br>
<button type="button" class="disabled btn btn-primary icon-btn btn-lg">
<button type="button" class="block disabled btn btn-primary icon-btn btn-lg">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Primary icon disabled, medium</label>
<br>
<button type="button" class="disabled btn btn-primary icon-btn">
<button type="button" class="block disabled btn btn-primary icon-btn">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Primary icon disabled, small</label>
<br>
<button type="button" class="disabled btn btn-primary icon-btn btn-sm">
<button type="button" class="block disabled btn btn-primary icon-btn btn-sm">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Primary icon disabled, x-small</label>
<br>
<button type="button" class="disabled btn btn-primary icon-btn btn-xs">
<button type="button" class="block disabled btn btn-primary icon-btn btn-xs">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
</div>
<div class="secondary-icon-disabled">
<br>
<div class="secondary-icon-disabled mx-2 box-border mb-4">
<label>Secondary icon disabled, large</label>
<br>
<button type="button" class="disabled btn btn-secondary icon-btn btn-lg">
<button type="button" class="block disabled btn btn-secondary icon-btn btn-lg">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Secondary icon disabled, medium</label>
<br>
<button type="button" class="disabled btn btn-secondary icon-btn">
<button type="button" class="block disabled btn btn-secondary icon-btn">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Secondary icon disabled, small</label>
<br>
<button type="button" class="disabled btn btn-secondary icon-btn btn-sm">
<button type="button" class="block disabled btn btn-secondary icon-btn btn-sm">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Secondary icon disabled, x-small</label>
<br>
<button type="button" class="disabled btn btn-secondary icon-btn btn-xs">
<button type="button" class="block disabled btn btn-secondary icon-btn btn-xs">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
</div>
<div class="tertiary-icon-disabled">
<br>
<div class="tertiary-icon-disabled mx-2 box-border mb-4">
<label>Tertiary icon disabled, large</label>
<br>
<button type="button" class="disabled btn btn-tertiary icon-btn btn-lg">
<button type="button" class="block disabled btn btn-tertiary icon-btn btn-lg">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Tertiary icon disabled, medium</label>
<br>
<button type="button" class="disabled btn btn-tertiary icon-btn">
<button type="button" class="block disabled btn btn-tertiary icon-btn">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Tertiary icon disabled, small</label>
<br>
<button type="button" class="disabled btn btn-tertiary icon-btn btn-sm">
<button type="button" class="block disabled btn btn-tertiary icon-btn btn-sm">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Tertiary icon disabled, x-small</label>
<br>
<button type="button" class="disabled btn btn-tertiary icon-btn btn-xs">
<button type="button" class="block disabled btn btn-tertiary icon-btn btn-xs">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
</div>
<div class="delete-icon-disabled">
<br>
<div class="delete-icon-disabled mx-2 box-border mb-4">
<label>Delete icon disabled, large</label>
<br>
<button type="button" class="disabled btn btn-danger icon-btn btn-lg">
<button type="button" class="block disabled btn btn-danger icon-btn btn-lg">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Delete icon disabled, medium</label>
<br>
<button type="button" class="disabled btn btn-danger icon-btn">
<button type="button" class="block disabled btn btn-danger icon-btn">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Delete icon disabled, small</label>
<br>
<button type="button" class="disabled btn btn-danger icon-btn btn-sm">
<button type="button" class="block disabled btn btn-danger icon-btn btn-sm">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
<br>
<label>Delete icon disabled, x-small</label>
<br>
<button type="button" class="disabled btn btn-danger icon-btn btn-xs">
<button type="button" class="block disabled btn btn-danger icon-btn btn-xs">
<span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
</button>
<br>
</div>
<div class="text-buttons">
<button class="btn btn-light icon-btn sn-science-blue has-unseen">
<div class="text-button mx-2 box-borders">
<button class="block btn btn-light icon-btn sn-science-blue has-unseen">
All
</button>
</div>
</div>
<style>
.buttons {
display: flex;
flex-wrap: wrap;
}
.buttons > div {
margin: 0 10px;
box-sizing: border-box;
}
.has-unseen {
&::after {
align-items: center;