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

Add toggles

Browse source
This commit is contained in:
aignatov-bio 2019-12-01 16:13:25 +01:00
parent 7bfefd8659
commit 443ab8645f
2 changed files with 117 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
app/assets/stylesheets/shared_styles/elements/toggles.scss Normal file
View file

@ -0,0 +1,100 @@
input[type="checkbox"].sci-toggle-checkbox {
cursor: pointer;
flex-shrink: 0;
height: 16px;
margin: 0;
opacity: 0;
position: relative;
width: 24px;
z-index: 2;
+ .sci-toggle-checkbox-label {
animation-timing-function: $timing-function-sharp;
background: $color-alto;
border-radius: 8px;
display: inline-block;
flex-shrink: 0;
height: 16px;
margin-left: -27px;
position: relative;
transition: .2s;
width: 24px;
&::before {
animation-timing-function: $timing-function-sharp;
background: $color-white;
border-radius: 7px;
content: "";
height: 12px;
left: 0;
margin: 2px;
position: absolute;
transition: .2s;
width: 12px;
}
}
&.hidden + .sci-toggle-checkbox-label {
display: none;
}
&:checked + .sci-toggle-checkbox-label {
background: $brand-primary;
&::before {
left: 8px;
}
}
&:disabled + .sci-toggle-checkbox-label {
&::before {
background: $color-silver-chalice;
}
}
}
.sci-toggles-group {
align-items: center;
display: flex;
position: relative;
input[type="radio"].sci-toggle-item {
cursor: pointer;
height: 36px;
margin: 0;
opacity: 0;
position: relative;
width: 48px;
z-index: 2;
+ .sci-toggle-item-label {
animation-timing-function: $timing-function-sharp;
background: $color-white;
border: $border-default;
border-left-color: transparent;
display: inline-block;
height: 36px;
line-height: 34px;
margin-left: -48px;
position: relative;
text-align: center;
transition: .2s;
width: 48px;
&:first-of-type {
border-left-color: $color-silver-chalice;
border-radius: $border-radius-default 0 0 $border-radius-default;
}
&:last-of-type {
border-radius: 0 $border-radius-default $border-radius-default 0;
}
}
&:checked + .sci-toggle-item-label {
background: $brand-primary;
border: 1px solid $brand-primary;
color: $color-white;
}
}
}

17
app/views/projects/index.html.erb
View file

@ -222,4 +222,21 @@
<input type="radio" name="test" class="sci-radio" disabled>
<span class="sci-radio-label"></span>
</div>
<hr>
<div>
<input type="checkbox" class="sci-toggle-checkbox">
<span class="sci-toggle-checkbox-label"></span>
<span style="display: inline-block; width: 20px"></span>
<input type="checkbox" class="sci-toggle-checkbox" disabled>
<span class="sci-toggle-checkbox-label"></span>
</div>
<hr>
<div class="sci-toggles-group">
<input type="radio" name="test1" class="sci-toggle-item">
<span class="sci-toggle-item-label"><i class="fas fa-th-large"></i></span>
<input type="radio" name="test1" class="sci-toggle-item">
<span class="sci-toggle-item-label"><i class="fas fa-th-list"></i></span>
<input type="radio" name="test1" class="sci-toggle-item">
<span class="sci-toggle-item-label"><i class="fas fa-th"></i></span>
</div>
</div>