From 42773a11220a5bba7bdf3395e3f00913dce9f5a0 Mon Sep 17 00:00:00 2001 From: Stefan Parviainen Date: Fri, 2 Jan 2015 18:14:23 +0100 Subject: Reworked switch to also display text --- view/css/mod_connect.css | 4 +- view/css/mod_group.css | 4 +- view/css/mod_settings.css | 8 +-- view/css/mod_thing.css | 4 +- view/theme/redbasic/css/style.css | 122 +++++++++++++++++--------------------- view/tpl/field_checkbox.tpl | 2 +- view/tpl/field_intcheckbox.tpl | 2 +- 7 files changed, 63 insertions(+), 83 deletions(-) diff --git a/view/css/mod_connect.css b/view/css/mod_connect.css index 218b1d2cb..e1f28484a 100644 --- a/view/css/mod_connect.css +++ b/view/css/mod_connect.css @@ -6,8 +6,6 @@ margin-top: 25px; } -/* first-of-type needed to style switches */ -#sellpage-edit label.mainlabel, -#sellpage-edit label:first-of-type { +#sellpage-edit > label { width: 300px; } diff --git a/view/css/mod_group.css b/view/css/mod_group.css index 30a954d2a..91d5b2136 100644 --- a/view/css/mod_group.css +++ b/view/css/mod_group.css @@ -3,9 +3,7 @@ margin-top: 30px; } -/* first-of-type needed to style switches */ -#group-edit-form label.mainlabel, -#group-edit-form label:first-of-type { +#group-edit-form > label { float: left; width: 300px; } diff --git a/view/css/mod_settings.css b/view/css/mod_settings.css index b066e6059..cd66684f8 100644 --- a/view/css/mod_settings.css +++ b/view/css/mod_settings.css @@ -28,9 +28,7 @@ ul#settings-privacy-macros { margin-bottom: 10px; } -/* first-of-type needed to be able to style switches */ -#settings-permissions-wrapper .field label.mainlabel, -#settings-permissions-wrapper .field label:first-of-type { +#settings-permissions-wrapper .field > label { width: 350px; } @@ -43,9 +41,7 @@ ul#settings-privacy-macros { margin-bottom: 45px; } -/* first-of-type needed to be able to style switches */ -#settings-notifications .field label.mainlabel, -#settings-notifications .field label:first-of-type { +#settings-notifications .field > label { margin-left: 20px; width: 330px; } diff --git a/view/css/mod_thing.css b/view/css/mod_thing.css index ddb2faa87..1b091860b 100644 --- a/view/css/mod_thing.css +++ b/view/css/mod_thing.css @@ -4,9 +4,7 @@ margin-left: 0; } -/* first-of-type needed to style switches */ -.field label.mainlabel, -.thing-label, .field label:first-of-type, .thing-verb-label, .thing-profile-label{ +.thing-label, .field > label, .thing-verb-label, .thing-profile-label{ float: left; width: 350px; } diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 61acc8ec7..63cf27d58 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -306,9 +306,7 @@ footer { width: 20px; } -/* first-of-type needed to style switches */ -#main-login .field.checkbox label.mainlabel, -#main-login .field.checkbox label:first-of-type { +#main-login .field.checkbox > label { margin-bottom: 0; float: left; width: 100px; @@ -376,9 +374,7 @@ footer { #profile-edit-wrapper .field { margin-top: 20px; } -/* first-of-type needed to style switches */ -#profile-edit-wrapper .field label.mainlabel, -#profile-edit-wrapper .field label:first-of-type { +#profile-edit-wrapper .field > label { width: 175px; } @@ -1245,9 +1241,7 @@ footer { width: 100% } -/* first-of-type needed to style switches */ -.field label.mainlabel, -.field label:first-of-type { +.field > label { float: left; width: 350px; } @@ -2358,69 +2352,65 @@ aside .nav > li > a:hover, aside .nav > li > a:focus { border: 1px solid #cccccc; } -/* Hide the placeholder label which is used for styling switches */ -/* Many places give a width to all labels, so need to specifically set these to 0 width */ -/* This should probably be moved to core */ -.field.checkbox label.switchlabel, -.field.checkbox label:nth-of-type(2) { - width: 0px; - margin: 0px; - float: none; -} + /* Turn checkboxes into switches */ -/* Doesn't work with IE<9. */ +.field.checkbox .fieldhelp { vertical-align:top; } +.field.checkbox > div { + position: relative; width: 70px; + -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; + display:inline-block; +} + .field.checkbox input { - position: absolute; - margin-left: -9999px; - visibility: hidden; + display: none; } -.field.checkbox input + label.switchlabel, -.field.checkbox input + label:nth-of-type(2) { - display: block; - position: relative; - cursor: pointer; - outline: none; - user-select: none; - padding: 2px; - width: 60px; - height: 24px; - background-color: #dddddd; - border-radius: 60px; - transition: background 0.4s; +.field.checkbox > div label { + display: block; overflow: hidden; cursor: pointer; + border: 2px solid #999999; + border-radius: 20px; + margin:0px; +} - float:left; +.onoffswitch-inner { + display: block; width: 200%; margin-left: -100%; + -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; + -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } -.field.checkbox input + label:before, -.field.checkbox input + label:after { - display: block; - position: absolute; - content: ""; -} -.field.checkbox input + label:before { - top: 2px; - left: 2px; - bottom: 2px; - right: 2px; - background-color: #fff; - border-radius: 30px; - transition: background 0.4s; -} -.field.checkbox input + label:after { - top: 4px; - left: 4px; - bottom: 4px; - width: 30px; - background-color: #dddddd; - border-radius: 30px; - transition: margin 0.4s, background 0.4s; -} -.field.checkbox input:checked + label { - background-color: #8ce196; -} -.field.checkbox input:checked + label:after { - margin-left: 22px; - background-color: #8ce196; +.onoffswitch-inner:before, .onoffswitch-inner:after { + display: block; float: left; width: 50%; height: 20px; padding: 0; line-height:20px; + -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; +} + +.onoffswitch-inner:before { + content: attr(data-on); + padding-left: 10px; + background-color: #EEEEEE; +} + +.onoffswitch-inner:after { + content: attr(data-off); + padding-right: 10px; + background-color: #EEEEEE; color: #999999; + text-align: right; +} + +.onoffswitch-switch { + display: block; width: 25px; margin-left: 6px; margin-right: 6px; margin-top:5%; margin-bottom:5%; + background: #A1A1A1; + border: 2px solid #999999; border-radius: 20px; + position: absolute; top: 0; bottom: 0; right: 36px; + -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; + -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; +} + +.field.checkbox > div > input:checked + label .onoffswitch-inner { + margin-left: 0; +} + +.field.checkbox > div > input:checked + label .onoffswitch-switch { + right: -2px; + background-color: #27A1CA; } diff --git a/view/tpl/field_checkbox.tpl b/view/tpl/field_checkbox.tpl index 5c7f58ad1..7a2781be0 100755 --- a/view/tpl/field_checkbox.tpl +++ b/view/tpl/field_checkbox.tpl @@ -1,4 +1,4 @@
- {{$field.3}} +
{{$field.3}}
diff --git a/view/tpl/field_intcheckbox.tpl b/view/tpl/field_intcheckbox.tpl index 1d0bd9175..847783518 100755 --- a/view/tpl/field_intcheckbox.tpl +++ b/view/tpl/field_intcheckbox.tpl @@ -1,4 +1,4 @@
- {{$field.4}} +
{{$field.4}}
-- cgit v1.2.3