mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-11-08 07:21:03 +08:00
Update design for radion, buttons and checkbox [SCI-11992][SCI-11993][SCI-11999]
This commit is contained in:
Anton
parent
9bff7bc49e
commit
73cc92f512
9 changed files with 75 additions and 195 deletions
|
|
@ -5,6 +5,7 @@
|
|||
@import "tailwind/radio";
|
||||
@import "tailwind/loader.css";
|
||||
@import "tailwind/tags.css";
|
||||
@import "tailwind/checkbox";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
|
|
|
|||
|
|
@ -1,106 +0,0 @@
|
|||
// scss-lint:disable SelectorDepth QualifyingElement
|
||||
|
||||
:root {
|
||||
--sci-checkbox-size: 16px;
|
||||
}
|
||||
|
||||
.sci-checkbox-container {
|
||||
display: inline-block;
|
||||
height: var(--sci-checkbox-size);
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
width: var(--sci-checkbox-size);
|
||||
}
|
||||
|
||||
input[type="checkbox"].sci-checkbox {
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
height: var(--sci-checkbox-size);
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
width: var(--sci-checkbox-size);
|
||||
z-index: 2;
|
||||
|
||||
+ .sci-checkbox-label {
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
height: var(--sci-checkbox-size);
|
||||
margin-left: calc(var(--sci-checkbox-size) * -1);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: var(--sci-checkbox-size);
|
||||
|
||||
&::before {
|
||||
@include font-awesome;
|
||||
animation-timing-function: $timing-function-sharp;
|
||||
background: transparent;
|
||||
border: 1px solid var(--sn-black);
|
||||
border-radius: 1px;
|
||||
color: $color-white;
|
||||
content: "";
|
||||
font-size: calc(var(--sci-checkbox-size) - var(--sci-checkbox-size) * .375);
|
||||
height: var(--sci-checkbox-size);
|
||||
left: 0;
|
||||
line-height: calc(var(--sci-checkbox-size) - 2px);
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
transition: .2s;
|
||||
width: var(--sci-checkbox-size);
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden + .sci-checkbox-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:checked + .sci-checkbox-label {
|
||||
&::before {
|
||||
background-color: var(--sn-science-blue);
|
||||
background-image: image-url("icon_small/sn-check.svg");
|
||||
background-position: center;
|
||||
border: 1px solid var(--sn-science-blue);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&:indeterminate + .sci-checkbox-label {
|
||||
&::after {
|
||||
content: '';
|
||||
background: $color-volcano;
|
||||
height: calc(var(--sci-checkbox-size) - 6px);
|
||||
left: 3px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
width: calc(var(--sci-checkbox-size) - 6px);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
outline-offset: 0;
|
||||
}
|
||||
|
||||
&:focus + .sci-checkbox-label {
|
||||
outline: 4px solid var(--sn-science-blue-hover);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
|
||||
+ .sci-checkbox-label {
|
||||
&::before {
|
||||
border: $border-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + .sci-checkbox-label {
|
||||
&::before {
|
||||
background-color: var(--sn-sleepy-grey);
|
||||
border: 1px solid var(--sn-sleepy-grey);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
// scss-lint:disable SelectorDepth QualifyingElement
|
||||
/*
|
||||
:root {
|
||||
--sci-radio-size: 16px;
|
||||
}
|
||||
|
||||
.sci-radio-container {
|
||||
display: inline-block;
|
||||
height: var(--sci-radio-size);
|
||||
position: relative;
|
||||
width: var(--sci-radio-size);
|
||||
}
|
||||
|
||||
input[type="radio"].sci-radio {
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
height: var(--sci-radio-size);
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
width: var(--sci-radio-size);
|
||||
z-index: 2;
|
||||
|
||||
+ .sci-radio-label {
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
height: var(--sci-radio-size);
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: var(--sci-radio-size);
|
||||
|
||||
&::before {
|
||||
animation-timing-function: $timing-function-sharp;
|
||||
border: $border-default;
|
||||
border-radius: 50%;
|
||||
color: $color-white;
|
||||
content: "";
|
||||
font-size: calc(var(--sci-radio-size) - var(--sci-radio-size) * .375);
|
||||
height: var(--sci-radio-size);
|
||||
left: 0;
|
||||
line-height: calc(var(--sci-radio-size) - 2px);
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
transition: .2s;
|
||||
width: var(--sci-radio-size);
|
||||
}
|
||||
|
||||
&::after {
|
||||
animation-timing-function: $timing-function-sharp;
|
||||
background: $color-white;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: calc(var(--sci-radio-size) - 6px);
|
||||
left: 3px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
transition: .2s;
|
||||
width: calc(var(--sci-radio-size) - 6px);
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden + .sci-radio-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:checked + .sci-radio-label {
|
||||
&::before {
|
||||
border: 1px solid $brand-primary;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled + .sci-radio-label {
|
||||
&::before {
|
||||
background: $color-alto;
|
||||
border: $border-tertiary;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
.btn.btn-primary.disabled,
|
||||
.btn.btn-success:disabled,
|
||||
.btn.btn-success.disabled {
|
||||
@apply bg-sn-super-light-grey text-sn-grey border-sn-grey;
|
||||
@apply bg-sn-blue-disabled ;
|
||||
}
|
||||
|
||||
.btn.btn-secondary,
|
||||
|
|
|
|||
51
app/assets/stylesheets/tailwind/checkbox.css
Normal file
51
app/assets/stylesheets/tailwind/checkbox.css
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
@layer components {
|
||||
:root {
|
||||
--sci-checkbox-size: 16px;
|
||||
}
|
||||
|
||||
.sci-checkbox-container {
|
||||
@apply inline-block relative w-4 h-4;
|
||||
}
|
||||
|
||||
input[type="checkbox"].sci-checkbox {
|
||||
@apply cursor-pointer shrink-0 m-0 opacity-0 absolute left-0 top-0 z-[2] w-4 h-4;
|
||||
}
|
||||
|
||||
input[type="checkbox"].sci-checkbox + .sci-checkbox-label {
|
||||
@apply inline-block shrink-0 absolute right-0 top-0 w-4 h-4;
|
||||
}
|
||||
|
||||
input[type="checkbox"].sci-checkbox + .sci-checkbox-label::before {
|
||||
@apply bg-transparent border border-solid border-black rounded-sm inline-block
|
||||
left-0 absolute w-4 h-4 content-[''];
|
||||
}
|
||||
|
||||
input[type="checkbox"].sci-checkbox.hidden + .sci-checkbox-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"].sci-checkbox:checked + .sci-checkbox-label::before {
|
||||
@apply border-sn-science-blue bg-center bg-sn-science-blue;
|
||||
background-image: image-url("icon_small/sn-check.svg");
|
||||
}
|
||||
|
||||
input[type="checkbox"].sci-checkbox:indeterminate + .sci-checkbox-label::after {
|
||||
@apply bg-sn-sleepy-grey left-[3px] absolute top-[3px] content-[''] h-2.5 w-2.5;
|
||||
}
|
||||
|
||||
input[type="checkbox"].sci-checkbox:focus {
|
||||
@apply outline-none;
|
||||
}
|
||||
|
||||
input[type="checkbox"].sci-checkbox:focus + .sci-checkbox-label {
|
||||
@apply outline outline-4 outline-sn-science-blue-hover rounded-sm;
|
||||
}
|
||||
|
||||
input[type="checkbox"].sci-checkbox:disabled + .sci-checkbox-label::before {
|
||||
@apply border border-solid border-sn-sleepy-grey;
|
||||
}
|
||||
|
||||
input[type="checkbox"].sci-checkbox:disabled:checked + .sci-checkbox-label::before {
|
||||
@apply bg-sn-sleepy-grey border border-solid border-sn-sleepy-grey;
|
||||
}
|
||||
}
|
||||
|
|
@ -39,4 +39,8 @@
|
|||
input[type="radio"].sci-radio:checked:disabled + .sci-radio-label::after {
|
||||
@apply !bg-sn-sleepy-grey;
|
||||
}
|
||||
|
||||
input[type="radio"].sci-radio:focus + .sci-radio-label::before {
|
||||
@apply outline outline-4 outline-sn-science-blue-hover;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
15
app/views/design_elements/_checkbox.html.erb
Normal file
15
app/views/design_elements/_checkbox.html.erb
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<h1>Checkbox</h1>
|
||||
<div class="flex flex-items gap-8 p-6">
|
||||
<div class="sci-checkbox-container">
|
||||
<input type="checkbox" class="sci-checkbox">
|
||||
<span class="sci-checkbox-label">
|
||||
</div>
|
||||
<div class="sci-checkbox-container">
|
||||
<input type="checkbox" class="sci-checkbox" disabled>
|
||||
<span class="sci-checkbox-label">
|
||||
</div>
|
||||
<div class="sci-checkbox-container">
|
||||
<input type="checkbox" class="sci-checkbox" checked disabled>
|
||||
<span class="sci-checkbox-label">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -12,6 +12,8 @@
|
|||
|
||||
<%= render partial: 'table' %>
|
||||
|
||||
<%= render partial: 'checkbox' %>
|
||||
|
||||
<%= render partial: 'radio' %>
|
||||
|
||||
<%= render partial: 'inputs', locals: {icons_list: icons_list} %>
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ module.exports = {
|
|||
'sn-super-light-blue': '#F0F8FF',
|
||||
'sn-blue-hover': '#2D5FAA',
|
||||
'sn-blue-click': '#056AD7',
|
||||
'sn-blue-disabled': '#B7CAE5',
|
||||
'sn-science-blue-hover': '#79B4F3',
|
||||
'sn-alert-green': '#5EC66F',
|
||||
'sn-alert-violet': '#6F2DC1',
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue