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

Add checkboxes and radio buttons

Browse source
This commit is contained in:
aignatov-bio 2019-11-30 21:24:50 +01:00
parent 9694117635
commit 7bfefd8659
4 changed files with 212 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
app/assets/stylesheets/shared_styles/elements/buttons.scss
View file

@ -11,6 +11,7 @@
line-height: 20px; line-height: 20px;
outline: 0; outline: 0;
padding: 7px 16px; padding: 7px 16px;
position: relative;
transition: .3s; transition: .3s;
user-select: none; user-select: none;
@ -84,4 +85,41 @@
&:focus { &:focus {
border: $border-focus; border: $border-focus;
} }
&:disabled {
background: $color-alto;
border: $border-tertiary;
color: $color-silver-chalice;
opacity: .25;
&.secondary,
&.tertiary {
background: $color-white;
&:hover {
background: $color-white;
border: $border-tertiary;
}
}
&.sensitive {
&:hover {
background: $color-alto;
}
}
}
}
.sci-btn-group {
display: inline-block;
position: relative;
.sci-btn {
float: left;
margin: 0 4px 4px 0;
&:last-of-type {
margin-right: 0;
}
}
} }

62
app/assets/stylesheets/shared_styles/elements/checkboxes.scss Normal file
View file

@ -0,0 +1,62 @@
:root {
--sci-checkbox-size: 16px;
}
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) - 3px);
position: relative;
width: var(--sci-checkbox-size);
&::before {
animation-timing-function: $timing-function-sharp;
background: $color-white;
border: $border-default;
border-radius: 1px;
color: $color-white;
content: "";
font-family: "Font Awesome 5 Free";
font-size: calc(var(--sci-checkbox-size) - var(--sci-checkbox-size) * 0.375);
font-weight: 501;
height: var(--sci-checkbox-size);
left: 0;
line-height: calc(var(--sci-checkbox-size) - 2px);
position: absolute;
text-align: center;
top: 1px;
transition: .2s;
width: var(--sci-checkbox-size);
}
}
&.hidden + .sci-checkbox-label {
display: none;
}
&:checked + .sci-checkbox-label {
&::before {
background: $brand-primary;
border: 1px solid $brand-primary;
content: "\f00c";
}
}
&:disabled + .sci-checkbox-label {
&::before {
background: $color-alto;
border: $border-tertiary;
}
}
}

80
app/assets/stylesheets/shared_styles/elements/radio_buttons.scss Normal file
View file

@ -0,0 +1,80 @@
:root {
--sci-radio-size: 16px;
}
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);
margin-left: calc((var(--sci-radio-size) * -1) - 3px);
position: relative;
width: var(--sci-radio-size);
&::before {
animation-timing-function: $timing-function-sharp;
border: $border-default;
border-radius: 50%;
color: $color-white;
content: "";
font-family: "Font Awesome 5 Free";
font-size: calc(var(--sci-radio-size) - var(--sci-radio-size) * 0.375);
font-weight: 501;
height: var(--sci-radio-size);
left: 0;
line-height: calc(var(--sci-radio-size) - 2px);
position: absolute;
text-align: center;
top: 1px;
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: 4px;
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;
}
}
}

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

@ -173,33 +173,53 @@
<!-- remove next part before merge --> <!-- remove next part before merge -->
<div class="demo-container" style="background: white; padding: 20px;"> <div class="demo-container" style="background: white; padding: 20px;">
<div> <div class="sci-btn-group">
<button class="sci-btn">Button</button> <button class="sci-btn">Button</button>
<span style="display: inline-block; width: 30px"></span>
<button class="sci-btn secondary">Button</button> <button class="sci-btn secondary">Button</button>
<span style="display: inline-block; width: 30px"></span>
<button class="sci-btn tertiary">Button</button> <button class="sci-btn tertiary">Button</button>
<span style="display: inline-block; width: 30px"></span>
<button class="sci-btn sensitive">Button</button> <button class="sci-btn sensitive">Button</button>
</div> </div>
<hr> <hr>
<div> <div class="sci-btn-group">
<button class="sci-btn"><i class="fas fa-arrow-alt-circle-right"></i>Button</button> <button class="sci-btn"><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
<span style="display: inline-block; width: 30px"></span>
<button class="sci-btn secondary"><i class="fas fa-arrow-alt-circle-right"></i>Button</button> <button class="sci-btn secondary"><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
<span style="display: inline-block; width: 30px"></span>
<button class="sci-btn tertiary"><i class="fas fa-arrow-alt-circle-right"></i>Button</button> <button class="sci-btn tertiary"><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
<span style="display: inline-block; width: 30px"></span>
<button class="sci-btn sensitive"><i class="fas fa-arrow-alt-circle-right"></i>Button</button> <button class="sci-btn sensitive"><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
</div> </div>
<hr> <hr>
<div> <div class="sci-btn-group">
<button class="sci-btn icon-btn"><i class="fas fa-arrow-alt-circle-right"></i></button> <button class="sci-btn icon-btn"><i class="fas fa-arrow-alt-circle-right"></i></button>
<span style="display: inline-block; width: 30px"></span>
<button class="sci-btn secondary icon-btn"><i class="fas fa-arrow-alt-circle-right"></i></button> <button class="sci-btn secondary icon-btn"><i class="fas fa-arrow-alt-circle-right"></i></button>
<span style="display: inline-block; width: 30px"></span>
<button class="sci-btn tertiary icon-btn"><i class="fas fa-arrow-alt-circle-right"></i></button> <button class="sci-btn tertiary icon-btn"><i class="fas fa-arrow-alt-circle-right"></i></button>
<span style="display: inline-block; width: 30px"></span>
<button class="sci-btn sensitive icon-btn"><i class="fas fa-arrow-alt-circle-right"></i></button> <button class="sci-btn sensitive icon-btn"><i class="fas fa-arrow-alt-circle-right"></i></button>
</div> </div>
<hr>
<div class="sci-btn-group">
<button class="sci-btn" disabled><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
<button class="sci-btn secondary" disabled><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
<button class="sci-btn tertiary" disabled><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
<button class="sci-btn sensitive" disabled><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
</div>
<hr>
<div>
<input type="checkbox" class="sci-checkbox">
<span class="sci-checkbox-label"></span>
<span style="display: inline-block; width: 20px"></span>
<input type="checkbox" class="sci-checkbox" disabled>
<span class="sci-checkbox-label"></span>
<span style="display: inline-block; width: 20px"></span>
<input type="checkbox" class="sci-checkbox" disabled checked>
<span class="sci-checkbox-label"></span>
</div>
<hr>
<div>
<input type="radio" name="test" class="sci-radio">
<span class="sci-radio-label"></span>
<span style="display: inline-block; width: 20px"></span>
<input type="radio" name="test" class="sci-radio">
<span class="sci-radio-label"></span>
<span style="display: inline-block; width: 20px"></span>
<input type="radio" name="test" class="sci-radio" disabled>
<span class="sci-radio-label"></span>
</div>
</div> </div>