Merge pull request #42 from locaweb/switch-button

Switch button
locaweb · Jun 15, 2015 · 8f93034 · 8f93034
2 parents e676ec4 + ee973b6
commit 8f93034
Show file tree

Hide file tree

Showing 10 changed files with 156 additions and 2 deletions.
diff --git a/source/assets/images/ico-switch-on-off.png b/source/assets/images/ico-switch-on-off.png
diff --git a/source/assets/images/ico-switch.png b/source/assets/images/ico-switch.png
diff --git 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
@@ -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
@@ -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
@@ -0,0 +1,36 @@
+---
+title: Componentes - Switch Button
+
+menu_page: sidebar-componentes.erb
+---
+
+<article class="text">
+    <header>
+    	<h1>Botão Switch</h1>
+    	<h3>permite a escolha de apenas uma entre duas opções (Ativado ou Desativado).</h3>
+    </header>
+
+    <p>Você pode definir que será escrito na label utilizando os atributos <code>data-on</code> quando estiver checado, e <code>data-off</code> quando não estiver checado.</p>
+<div class="example">
+	<%= partial "manual/componentes/partials/switch-button" %>
+	</div>
+<pre class="lang-html prettyprint linenums">
+&lt;div class="switch-btn"&gt;
+	&lt;input type="checkbox" id="switch1"&gt;
+	&lt;label class="switch-label" for="switch1" name="label-switch" data-off="Desativado" data-on="Ativado"&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;
+&lt;/div&gt;
+</pre>
+
+	<h3>Botão switch com link</h3>
+	<p>Pra deixá-lo com visual ativado é necessário que o checkbox esteja checado.</p>
+	<div class="example">	<%= partial "manual/componentes/partials/switch-button-link" %></div>
+<pre class="lang-html prettyprint linenums">
+&lt;div class="switch-btn"&gt;
+	&lt;a href="#"&gt;
+		&lt;input type="checkbox" checked id="switch1"&gt;
+		&lt;label class="switch-label" for="switch1" name="label-switch" data-off="Desativado" data-on="Ativado"&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;
+	&lt;/a&gt;
+&lt;/div&gt;
+</pre>
+
+</article>
diff --git a/source/manual/componentes/partials/_switch-button-link.html.erb b/source/manual/componentes/partials/_switch-button-link.html.erb
@@ -0,0 +1,6 @@
+<div class="switch-btn">
+	<a href="#">
+		<input type="checkbox" checked id="switch2">
+		<label class="switch-label" for="switch2" name="label-switch2" data-off="Desativado" data-on="Ativado"><span></span></label>
+	</a>
+</div>
diff --git a/source/manual/componentes/partials/_switch-button.html.erb b/source/manual/componentes/partials/_switch-button.html.erb
@@ -0,0 +1,4 @@
+<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>
diff --git a/source/manual/elementos.html.erb b/source/manual/elementos.html.erb
@@ -1619,7 +1619,10 @@ layout: false
 				<h1>Spinner</h1>
 				<br>
 				<img src="http://assets.locaweb.com.br/locastyle/1.2.3/images/ajax-loader.gif">
-
+						<br>
+				<h1>Botão Switch</h1>
+				<br>
+				<%= partial "manual/componentes/partials/switch-button" %>
 				<hr>
 				<h1>Ícones</h1>
 				<br>

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