summaryrefslogtreecommitdiffstats
path: root/client/components/forms
diff options
context:
space:
mode:
authorLauri Ojansivu <x@xet7.org>2017-10-01 09:48:52 +0300
committerLauri Ojansivu <x@xet7.org>2017-10-01 09:48:52 +0300
commita1d06727399a0d5a0cc11aee6a16ea253548727d (patch)
tree714a3cdb3f10b17e015c819ddac85dfec6c21722 /client/components/forms
parent6ec14ee52bca394189a0f1d41d20b597e90f6320 (diff)
parent7d3fed56ae2baf5d07294bff8998198b257c855a (diff)
downloadwekan-a1d06727399a0d5a0cc11aee6a16ea253548727d.tar.gz
wekan-a1d06727399a0d5a0cc11aee6a16ea253548727d.tar.bz2
wekan-a1d06727399a0d5a0cc11aee6a16ea253548727d.zip
Merge branch 'nztqa-improve-activities' into devel
Slider for Comments only in activity feed. Thanks to nztqa ! Closes #1182
Diffstat (limited to 'client/components/forms')
-rw-r--r--client/components/forms/forms.styl53
1 files changed, 53 insertions, 0 deletions
diff --git a/client/components/forms/forms.styl b/client/components/forms/forms.styl
index 646da657..1947c11d 100644
--- a/client/components/forms/forms.styl
+++ b/client/components/forms/forms.styl
@@ -630,6 +630,59 @@ button
a, .quiet
color: white
+// Material Design Toggle Switch
+.material-toggle-switch
+ display: flex
+
+.toggle-label
+ position: relative
+ display: block
+ height: 20px
+ width: 44px
+ background-color: #a6a6a6
+ border-radius: 100px
+ cursor: pointer
+ transition: all 0.3s ease
+
+ &:after
+ position: absolute
+ left: -2px
+ top: -3px
+ display: block
+ width: 26px
+ height: 26px
+ border-radius: 100px
+ background-color: #fff
+ box-shadow: 0px 3px 3px rgba(0,0,0,0.05)
+ content: ''
+ transition: all 0.3s ease
+
+ &:active
+ &:after
+ transform: scale(1.15, 0.85)
+
+.toggle-switch:checked ~ .toggle-label
+ background-color: #6fbeb5
+
+ &:after
+ left: 20px
+ background-color: #179588
+
+.toggle-switch:checked:disabled ~ .toggle-label
+ background-color: #d5d5d5
+ pointer-events: none
+
+ &:after
+ background-color: #bcbdbc
+
+.toggle-switch
+ display: none
+
+.toggle-switch-title
+ margin: 0 0.5em
+ display: flex
+
+
@media screen and (max-width: 800px)
.edit-controls,
.add-controls