Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Features: Switch for Checkbox & Timeline #544

Closed
wants to merge 5 commits into from
Closed

New Features: Switch for Checkbox & Timeline #544

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3e27d71
Add Switch Display mode to Checkbox
gaetan-hexadog Mar 5, 2017
ae8b953
New Feature : Timeline
Wikiki Mar 5, 2017
c4a21ac
Use of $speed and $easing variables
Wikiki Mar 8, 2017
8fad8f4
Update to fit default html code
Wikiki Mar 8, 2017
3c819b1
Minor fix (replace + label by + span)
Wikiki Mar 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions sass/components/_all.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,4 @@
@import "pagination.sass"
@import "panel.sass"
@import "tabs.sass"
@import "timeline.sass"
65 changes: 65 additions & 0 deletions sass/components/timeline.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
.timeline
border-left: 2px solid $grey
position: relative

.time-item
padding-bottom: 1px
position: relative
flex-grow: 0
flex-shrink: 0
&:after
background-color: #ffffff
border-color: $grey
border-radius: 20px
border-style: solid
border-width: 2px
bottom: 0
content: ''
height: 30px
left: 0
margin-left: -16px
position: absolute
top: 0px
width: 30px
&:before
content: " "
position: absolute
background: rgb(228, 228, 228)
top: 10px
width: 10px
height: 10px
z-index: 2
left: -6px
border-radius: 100%
&.is-danger
&:after
border-color: $danger
background-color: $danger
&:before
background-color: $danger
&.is-success
&:after
border-color: $success
background-color: $success
&:before
background-color: $success
&.is-info
&:after
border-color: $info
background-color: $info
&:before
background-color: $info


.item-content
margin-bottom: 15px
margin-left: 30px
.title
font-size: $size-6
font-weight: $weight-semibold
margin-bottom: 3px
color: $grey-light
.details
font-size: $size-6
font-weight: $weight-normal
color: $grey
50 changes: 50 additions & 0 deletions sass/elements/form.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,3 +298,53 @@ $input-radius: $radius !default
position: absolute !important
right: 0.75em
top: 0.75em


.switch
input[type="checkbox"]
display: none
+ span
position: relative
display: inline-block
cursor: pointer
font-weight: 500
text-align: left
margin: 0px
padding: 0px 44px
&:before, &:after
content: ""
position: absolute
margin: 0
outline: 0
top: 50%
transform: translate( 0, -50% )
transition: all $speed $easing
&:before
left: 1px
width: 34px
height: 14px
background-color: rgba( $grey, 0.5 )
border-radius: 8px
&:after
left: 0
width: 20px
height: 20px
background-color: $grey
border-radius: 50%
box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.084)
&:checked
+ span
&:after
transform: translate( 80%, -50% )
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
display: none
&:checked
+ span
&:before
background-color: rgba( $color, 0.5 )
&:after
background-color: $color
transform: translate( 80%, -50% )