From 21930a6b535cf9aad69ea48e4decf86bd134322f Mon Sep 17 00:00:00 2001 From: Deivid Marques Date: Mon, 15 Jun 2015 16:56:02 -0300 Subject: [PATCH 1/4] adicionando novas imagens para usar no botao switch --- source/assets/images/ico-switch-on-off.png | Bin 0 -> 1236 bytes source/assets/images/ico-switch.png | Bin 0 -> 942 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 source/assets/images/ico-switch-on-off.png create mode 100644 source/assets/images/ico-switch.png 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 0000000000000000000000000000000000000000..cc91dafba74de4068ae62b8546fc098143461052 GIT binary patch literal 1236 zcmeAS@N?(olHy`uVBq!ia0vp^CxDoXgAGW2tPoTLQj#UE5hcO-X(i=}MX3yqDfvmM z3ZA)%>8U}fi7AzZCsS=07?@QuLn2Bde0{8v^Kf6`()~Xj@TAnpKdC8`Lf!&sHg;q@=(~U%$M( zT(8_%FTW^V-_X+15@d#vkuFe$ZgFK^Nn(X=Ua>OF1ees}+T7#d8#0MoBXEYLU9GXQxBrqI_HztY@Xxa#7Ppj3o=u^L<)Qdy9y zACy|0Us{w5jJPyqkW~d%&PAz-CHX}m`T04pPz=b(FUc>?$S+WE4mMNJ@J&q4%mWE% zf_3=%T6yLbmn7yTr+T{BDgn*V%gju%vaobCF?2L{H8D1GF*I~Fc62qeurzQrcQSWz zws5m>gXwk2PcF?(%`1WFO+n~&!>JdP7;+1MHoK%2WtOF;xE1B+Du6w0m5JLe&N$73 z>P^Az78jg)^?{Dj2SqJXRKtXT=?BDwCtM&0p7c}mfa$#mn6RzlPbf1mFuHlVIEGZ* zdNXsc7qg>CYkBkBNebG6lTNwiUUm&o{FareFn4{z$2#tSsSJIK=zI9pHJ-Feil87&Pqq()8{^{XrBJZ zH0*(3^<$=P*Bhrej&Bw2ldj;f-?IG>^EM01U49l!d<}ZlUz>zm_-uYB7DZU_J=py% zw8E+N_^LI+foI~5_C=`fIChLP=Gl*%X=|4kbkuug2&Wu6eag7|_{xGe+A@cn)%Hwq zm)zU2_owU=IkPzvB(`(4f0*I;;cwJcpH`KmvsKMsjNhx-qz2pqiqE-e{9e5#buCYB ufzSNP!*k@hT0cx(!{2HaE0^<8^#FsIvv*YdUNsL;IpgW-=d#Wzp$PyqhpZ$3 literal 0 HcmV?d00001 diff --git a/source/assets/images/ico-switch.png b/source/assets/images/ico-switch.png new file mode 100644 index 0000000000000000000000000000000000000000..b737a7f5e12acd03214b17c4835e9bb140e1c2c3 GIT binary patch literal 942 zcmaJ=J#W)M7`BLnqKN*0b~;=JkchvMIPoc_N@J(BR7X(~iHvpZOJb$=ne&A>5fdzQ z0`_i*4IwrLhB6`X3y={10mQ_}IgL{Wf@S;eUOmtAe%^VfeY8{9D{vgQV;vh^w&vMa z$lqZ9n{S?fWy>x#2egMrbnXzuH9R~-zzUo(>LSNmJoHNcrE!j~MP5k2}LA_ zAVAasNpKd%FwyyyE@b=EEb?Flp;Mi|3Tj|?Kob)LDnhB~O0o=8RglXSRh91pMUoX! zVy{}1%dnzCr3%&$&%6$71NMqv(zw^nkJdm!>ZA&wQ8-5YhZU4ppa%< z@0zP_<)*_BM9i~+i2oRQErJ8EN*emxV<~ObTXVhbv6Q!RMHY;hw)U@9XC^j3>2@=? z?64Vq6ta0IY_Q*dK7Y$D1+a`pKlwI%^84rQT<+P$#rM}oFJA7R+^T(wUU7Me+k^QJ Sm#4p$=?${Xw(;)p^ywcq*&|E< literal 0 HcmV?d00001 From f792e741b8c2c7af4b4d71b16226010a6b0b1dc9 Mon Sep 17 00:00:00 2001 From: Deivid Marques Date: Mon, 15 Jun 2015 16:57:09 -0300 Subject: [PATCH 2/4] add estilo do botao switch --- source/assets/stylesheets/locastyle.css | 1 + .../stylesheets/locastyle/_switch-button.css | 102 ++++++++++++++++++ .../locastyle/colors/_theme_base.scss | 3 +- 3 files changed, 105 insertions(+), 1 deletion(-) create mode 100644 source/assets/stylesheets/locastyle/_switch-button.css 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; } From cf26cb1257f5299a36cafcc59300cfa8bec3186a Mon Sep 17 00:00:00 2001 From: Deivid Marques Date: Mon, 15 Jun 2015 16:57:41 -0300 Subject: [PATCH 3/4] criando e organizando a documentacao do botao de switch --- .../manual/componentes/botao-switch.html.erb | 36 +++++++++++++++++++ .../partials/_switch-button-link.html.erb | 6 ++++ .../partials/_switch-button.html.erb | 4 +++ source/partials/_sidebar-componentes.erb | 1 + 4 files changed, 47 insertions(+) create mode 100644 source/manual/componentes/botao-switch.html.erb create mode 100644 source/manual/componentes/partials/_switch-button-link.html.erb create mode 100644 source/manual/componentes/partials/_switch-button.html.erb 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/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" %>
    • From ee973b6c414c7e65e78b60e1c4acb0480bfe2149 Mon Sep 17 00:00:00 2001 From: Deivid Marques Date: Mon, 15 Jun 2015 16:58:05 -0300 Subject: [PATCH 4/4] add exemplo do botao switch na pagina de elementos --- source/manual/elementos.html.erb | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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