scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-09-09 14:46:47 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #7756 from aignatov-bio/ai-sci-10913-update-radio-button-design

Browse source 
Update radio buttons [SCI-10913]
This commit is contained in:
aignatov-bio 2024-07-25 14:11:14 +02:00 • committed by GitHub
commit cf518768b0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 67 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/stylesheets/application.tailwind.css
View file

@ -2,6 +2,7 @@
@import "tailwind/buttons";
@import "tailwind/modals";
@import "tailwind/flyouts";
@import "tailwind/radio";
@import "tailwind/loader.css";
@tailwind base;
@ -69,6 +70,6 @@ html {
@keyframes shine-lines {
0% { background-position: -150px }
40%, 100% { background-position: 320px }
}

3
app/assets/stylesheets/shared_styles/elements/radio_buttons.scss
View file

@ -1,5 +1,5 @@
// scss-lint:disable SelectorDepth QualifyingElement
/*
:root {
--sci-radio-size: 16px;
}
@ -85,3 +85,4 @@ input[type="radio"].sci-radio {
}
}
}
*/

42
app/assets/stylesheets/tailwind/radio.css Normal file
View file

@ -0,0 +1,42 @@
@layer components {
.sci-radio-container {
@apply inline-block h-4 w-4 relative;
}
input[type="radio"].sci-radio {
@apply cursor-pointer shrink-0 h-4 w-4 m-0 opacity-0 relative z-[2];
}
input[type="radio"].sci-radio + .sci-radio-label {
@apply inline-block shrink-0 h-4 w-4 absolute left-0;
}
input[type="radio"].sci-radio + .sci-radio-label::before {
@apply border-[1px] border-solid border-sn-black rounded-full text-white text-center transition-all
h-4 w-4 left-0 absolute;
content: "";
}
input[type="radio"].sci-radio + .sci-radio-label::after{
@apply bg-white rounded-full text-white text-center transition-all
absolute w-2.5 h-2.5 top-[3px] left-[3px] ;
content: "";
}
input[type="radio"].sci-radio:checked + .sci-radio-label::before {
@apply !border-sn-blue;
}
input[type="radio"].sci-radio:checked + .sci-radio-label::after {
@apply !bg-sn-science-blue;
}
input[type="radio"].sci-radio:disabled + .sci-radio-label::before {
@apply !border-sn-sleepy-grey;
}
input[type="radio"].sci-radio:checked:disabled + .sci-radio-label::after {
@apply !bg-sn-sleepy-grey;
}
}

19
app/views/design_elements/_radio.html.erb Normal file
View file

@ -0,0 +1,19 @@
<h1>Radio</h1>
<div class="flex flex-items gap-8 p-6">
<div class="sci-radio-container">
<input type="radio" name="test_1" class="sci-radio">
<span class="sci-radio-label">
</div>
<div class="sci-radio-container">
<input type="radio" name="test_1" class="sci-radio" checked>
<span class="sci-radio-label">
</div>
<div class="sci-radio-container">
<input type="radio" name="test_2" class="sci-radio" disabled>
<span class="sci-radio-label">
</div>
<div class="sci-radio-container">
<input type="radio" name="test_2" class="sci-radio" checked disabled>
<span class="sci-radio-label">
</div>
</div>

2
app/views/design_elements/index.html.erb
View file

@ -10,6 +10,8 @@
end
%>
<%= render partial: 'radio' %>
<%= render partial: 'select' %>
<%= render partial: 'modals' %>