scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-01-25 01:04:02 +08:00
Code Issues Projects Releases Packages Wiki Activity

Update buttons focus and active state [SCI-10249]

Browse source
This commit is contained in:
Anton 2024-03-19 14:20:30 +01:00
parent 9d371c50ba
commit 19dd06e246
3 changed files with 31 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
app/assets/stylesheets/tailwind/buttons.css
View file

@ -4,7 +4,7 @@
}
.btn {
@apply relative inline-flex items-center text-sm shrink-0 gap-2 justify-center px-4 rounded border border-solid appearance-none whitespace-nowrap cursor-pointer h-[40px] focus:outline-none;
@apply relative inline-flex items-center text-sm shrink-0 gap-2 justify-center px-4 rounded border border-solid appearance-none whitespace-nowrap cursor-pointer h-[40px];
border-color: transparent;
}
@ -41,7 +41,7 @@
}
.btn:focus {
@apply no-underline outline-none text-sn-white;
@apply no-underline outline outline-4 outline-sn-science-blue-hover text-sn-white;
}
.btn:active {
@ -58,6 +58,11 @@
@apply bg-sn-blue text-sn-white;
}
.btn.btn-primary:active,
.btn.btn-primary.active {
@apply bg-sn-blue-click;
}
.btn.btn-primary:hover,
.btn.btn-success:hover{
@apply bg-sn-blue-hover text-sn-white;
@ -79,6 +84,11 @@
@apply bg-sn-science-blue text-sn-white border-sn-white;
}
.btn.btn-secondary:active,
.btn.btn-secondary.active {
@apply bg-sn-super-light-blue;
}
.btn.btn-secondary:hover,
.btn.btn-default:hover {
@apply border-sn-blue-hover;
@ -120,6 +130,11 @@
@apply bg-sn-super-light-grey;
}
.btn.btn-light:active,
.btn.btn-light.active {
@apply bg-sn-grey-100;
}
.btn.btn-light:disabled,
.btn.btn-light.disabled {
@apply text-sn-sleepy-grey;
@ -133,6 +148,11 @@
@apply bg-sn-delete-red-hover;
}
.btn.btn-danger:active,
.btn.btn-danger.active {
@apply bg-sn-delete-red-click;
}
.btn.btn-danger:disabled,
.btn.btn-danger.disabled {
@apply bg-sn-delete-red-disabled;

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

@ -40,6 +40,9 @@
<button class="btn <%= type_class %> <%= size_class %>" disabled="true">
Button
</button>
<button class="btn active <%= type_class %> <%= size_class %>">
Active
</button>
<button class="btn <%= type_class %> <%= size_class %> icon-btn">
<i class="sn-icon sn-icon-<%= icons_list.sample %>"></i>
</button>

6
config/tailwind.config.js
View file

@ -27,11 +27,16 @@ module.exports = {
'sn-sleepy-grey': '#D0D5DD',
'sn-grey': '#98A2B3',
'sn-dark-grey': '#475467',
'sn-grey-100': '#F0F2F4',
'sn-grey-300': '#DDE0E6',
'sn-grey-500': '#BCC3CF',
'sn-grey-700': '#647081',
'sn-black': '#1D2939',
'sn-blue': '#104DA9',
'sn-science-blue': '#3B99FD',
'sn-super-light-blue': '#F0F8FF',
'sn-blue-hover': '#2D5FAA',
'sn-blue-click': '#056AD7',
'sn-science-blue-hover': '#79B4F3',
'sn-alert-green': '#5EC66F',
'sn-alert-violet': '#6F2DC1',
@ -49,6 +54,7 @@ module.exports = {
'sn-delete-red': '#CE0C24',
'sn-delete-red-hover': '#AD0015',
'sn-delete-red-disabled': '#F5D7DB',
'sn-delete-red-click': '#E9001D',
'sn-coral': '#FB565B',
'sn-background-blue': '#DBE4F2',
'sn-background-green': '#E7F7E9',