diff --git a/source/assets/images/ico-switch-on-off.png b/source/assets/images/ico-switch-on-off.png new file mode 100644 index 00000000..cc91dafb Binary files /dev/null and b/source/assets/images/ico-switch-on-off.png differ diff --git a/source/assets/images/ico-switch.png b/source/assets/images/ico-switch.png new file mode 100644 index 00000000..b737a7f5 Binary files /dev/null and b/source/assets/images/ico-switch.png differ diff --git a/source/assets/stylesheets/locastyle.css b/source/assets/stylesheets/locastyle.css index ae0d1388..3052bc4b 100644 --- a/source/assets/stylesheets/locastyle.css +++ b/source/assets/stylesheets/locastyle.css @@ -23,6 +23,7 @@ *=require locastyle/_hopscotch *=require locastyle/_tour *=require locastyle/_login +*=require locastyle/_switch-button *=require locastyle/_select2 *=require locastyle/_forms diff --git a/source/assets/stylesheets/locastyle/_switch-button.css b/source/assets/stylesheets/locastyle/_switch-button.css new file mode 100644 index 00000000..4654655c --- /dev/null +++ b/source/assets/stylesheets/locastyle/_switch-button.css @@ -0,0 +1,102 @@ +.switch-btn { + position: relative; + display: inline-block; + user-select: none; +} +.switch-btn a { + color: #555555; +} +.switch-btn .switch-label { + display: inline-block; +} +.switch-btn .switch-label span { + display: inline-block; + vertical-align: middle; +} +.switch-btn .switch-label span:after { + content: ""; + -moz-user-select: -moz-none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; + background: #888888 url(../images/ico-switch-on-off.png) -159px center no-repeat; + height: 26px; + width: 52px; + position: relative; + z-index: 0; + margin-right: 10px; + border-radius: 4px; + display: inline-block; + cursor: pointer; +} +.switch-btn .switch-label span:before { + content: ""; + -moz-transition: all 0.25s linear; + -webkit-transition: all 0.25s linear; + transition: all 0.25s linear; + position: absolute; + top: 2px; + left: 2px; + z-index: 1; + display: block; + width: 23px; + height: 20px; + border: 1px solid rgba(34, 34, 34, 0.15); + background: white url(../images/ico-switch.png) center no-repeat; + border-radius: 4px 0 0 4px; + cursor: pointer; +} +.switch-btn .switch-label span:hover:before, .switch-btn .switch-label span:focus:before { + background-color: #ebebeb; +} +.switch-btn .switch-label span:focus { + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +.switch-btn input { + display: block; + cursor: pointer; + position: absolute; + top: 0; + left: 0; + z-index: 2; + width: 100%; + height: 24px; + opacity: 0; +} +.switch-btn input:checked + .switch-label span { + display: inline-block; +} +.switch-btn input:checked + .switch-label span:after { + box-shadow: none; + background-position: 7px center; +} +.switch-btn input:checked + .switch-label span:before { + -moz-transition: all 0.25s linear; + -webkit-transition: all 0.25s linear; + transition: all 0.25s linear; + top: 2px; + left: 25px; + border-radius: 0 4px 4px 0; +} + +@media screen and (min-width: 768px) { + .switch-btn input + .switch-label:after { + display: inline-block; + vertical-align: middle; + content: attr(data-off); + } + .switch-btn input + .switch-label span:before { + -moz-transition: none 1s; + -webkit-transition: none 1s; + transition: none 1s; + } + .switch-btn input:checked + .switch-label:after { + content: attr(data-on); + } + .switch-btn input:checked + .switch-label span:before { + -moz-transition: none 1s; + -webkit-transition: none 1s; + transition: none 1s; + } +} diff --git a/source/assets/stylesheets/locastyle/colors/_theme_base.scss b/source/assets/stylesheets/locastyle/colors/_theme_base.scss index 332ba8d1..4e288fc2 100644 --- a/source/assets/stylesheets/locastyle/colors/_theme_base.scss +++ b/source/assets/stylesheets/locastyle/colors/_theme_base.scss @@ -91,7 +91,8 @@ #{$theme_name} .pathWay li:hover, #{$theme_name} #menuPrincipal .btMenu a:hover, #{$theme_name} #menuPrincipal .btMenu a:active, -#{$theme_name} .notification header:before { +#{$theme_name} .notification header:before, +#{$theme_name} .switch-btn input:checked + label span:after{ background-color: $pallet_1; } diff --git a/source/manual/componentes/botao-switch.html.erb b/source/manual/componentes/botao-switch.html.erb new file mode 100644 index 00000000..020754cd --- /dev/null +++ b/source/manual/componentes/botao-switch.html.erb @@ -0,0 +1,36 @@ +--- +title: Componentes - Switch Button + +menu_page: sidebar-componentes.erb +--- + +
+
+

Botão Switch

+

permite a escolha de apenas uma entre duas opções (Ativado ou Desativado).

+
+ +

Você pode definir que será escrito na label utilizando os atributos data-on quando estiver checado, e data-off quando não estiver checado.

+
+ <%= partial "manual/componentes/partials/switch-button" %> +
+
+<div class="switch-btn">
+	<input type="checkbox" id="switch1">
+	<label class="switch-label" for="switch1" name="label-switch" data-off="Desativado" data-on="Ativado"><span></span></label>
+</div>
+
+ +

Botão switch com link

+

Pra deixá-lo com visual ativado é necessário que o checkbox esteja checado.

+
<%= partial "manual/componentes/partials/switch-button-link" %>
+
+<div class="switch-btn">
+	<a href="#">
+		<input type="checkbox" checked id="switch1">
+		<label class="switch-label" for="switch1" name="label-switch" data-off="Desativado" data-on="Ativado"><span></span></label>
+	</a>
+</div>
+
+ +
\ No newline at end of file diff --git a/source/manual/componentes/partials/_switch-button-link.html.erb b/source/manual/componentes/partials/_switch-button-link.html.erb new file mode 100644 index 00000000..b507a691 --- /dev/null +++ b/source/manual/componentes/partials/_switch-button-link.html.erb @@ -0,0 +1,6 @@ +
+ + + + +
\ No newline at end of file diff --git a/source/manual/componentes/partials/_switch-button.html.erb b/source/manual/componentes/partials/_switch-button.html.erb new file mode 100644 index 00000000..5f30abf1 --- /dev/null +++ b/source/manual/componentes/partials/_switch-button.html.erb @@ -0,0 +1,4 @@ +
+ + +
\ No newline at end of file diff --git a/source/manual/elementos.html.erb b/source/manual/elementos.html.erb index e8da0f53..2b773d25 100644 --- a/source/manual/elementos.html.erb +++ b/source/manual/elementos.html.erb @@ -1619,7 +1619,10 @@ layout: false

Spinner


- +
+

Botão Switch

+
+ <%= partial "manual/componentes/partials/switch-button" %>

Ícones


diff --git a/source/partials/_sidebar-componentes.erb b/source/partials/_sidebar-componentes.erb index 985957dc..04671d59 100644 --- a/source/partials/_sidebar-componentes.erb +++ b/source/partials/_sidebar-componentes.erb @@ -8,6 +8,7 @@
  • <%= link_to "Alternador de classes", "#{base_url}/manual/componentes/alternando-classes" %>
  • <%= link_to "Barra de progresso", "#{base_url}/manual/componentes/barra-progresso" %>
  • <%= link_to "Botões", "#{base_url}/manual/componentes/botoes" %>
    • +
  • <%= link_to "Botão Switch", "#{base_url}/manual/componentes/botao-switch" %>
  • <%= link_to "Classes funcionais", "#{base_url}/manual/componentes/classes-funcionais" %>
  • <%= link_to "Ícones", "#{base_url}/manual/componentes/icones" %>
  • <%= link_to "Labels", "#{base_url}/manual/componentes/labels" %>