Skip to main content
Arrumando tags
Link
Rafael Tavares
  • 5,2mil
  • 11
  • 31
  • 52
conteúdo editado
Fonte Link
Diego Souza
  • 16,7mil
  • 4
  • 36
  • 104

Por exemplo:

.input__field--minoru:focus + .input__label--minoru::after {

}

Estou fazendo um efeito aqui, mas não estou entendendo esse sinal de + que tem no framework.

Resultado Final

 $(document).ready(function() {

   $(".campo").on('click', function() {
     $(this).closest('div.form-group').addClass('active');
   });

 });
 div.form-group {
   width: 100%;
   max-width: 700px;
   margin: auto;
   margin-top: 20px;
   position: relative;
   z-index: 1;
 }
 div.active input[type="text"]:focus + label:after {
   animation: AnimShadow 0.3s forwards;
 }
 label {
   font-family: @pf_din_text;

font-size: 16px;
   color: #959ea4;
   display: block;
   padding-top: 10px;
   padding-left: 8px;
 }
 label:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
   width: 100%;
   height: 57px;
   box-shadow: 0px 0px 0px 0px;
   color: rgba(199, 152, 157, 0.6);
 }
 input[type="text"] {
   width: 95%;
   border: none;
   font-family: "Verdana";
   font-size: 16px;
   color: #959ea4;
   background-color: #FFF;
   text-indent: 8px;
   height: 55px;
   outline: none;
   box-shadow: 0px 0px 0px 2px1px transparent;
   transition: all 0.3s ease;
 }
 input[type="text"]:focus {
   box-shadow: 0px 0px 0px 2px1px #FF9D12;
 }
body{
background-color: #f9f7f6;
}
 @keyframes AnimShadow {
   to {
     box-shadow: 0px 0px 100px 50px;
     opacity: 0;
   }
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
  <input type="text" name="nome" id="nome" class="campo" />
  <label>Nome</label>
</div>

<div class="form-group">
  <input type="text" name="email" id="email" class="campo" />
  <label>Email</label>
</div>

Por exemplo:

.input__field--minoru:focus + .input__label--minoru::after {

}

Estou fazendo um efeito aqui, mas não estou entendendo esse sinal de + que tem no framework.

Resultado Final

 $(document).ready(function() {

   $(".campo").on('click', function() {
     $(this).closest('div.form-group').addClass('active');
   });

 });
 div.form-group {
   width: 100%;
   max-width: 700px;
   margin: auto;
   margin-top: 20px;
   position: relative;
   z-index: 1;
 }
 div.active input[type="text"]:focus + label:after {
   animation: AnimShadow 0.3s forwards;
 }
 label {
   font-family: @pf_din_text;

font-size: 16px;
   color: #959ea4;
   display: block;
   padding-top: 10px;
   padding-left: 8px;
 }
 label:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
   width: 100%;
   height: 57px;
   box-shadow: 0px 0px 0px 0px;
   color: rgba(199, 152, 157, 0.6);
 }
 input[type="text"] {
   width: 95%;
   border: none;
   font-family: "Verdana";
   font-size: 16px;
   color: #959ea4;
   background-color: #FFF;
   text-indent: 8px;
   height: 55px;
   outline: none;
   box-shadow: 0px 0px 0px 2px transparent;
   transition: all 0.3s ease;
 }
 input[type="text"]:focus {
   box-shadow: 0px 0px 0px 2px #FF9D12;
 }
body{
background-color: #f9f7f6;
}
 @keyframes AnimShadow {
   to {
     box-shadow: 0px 0px 100px 50px;
     opacity: 0;
   }
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
  <input type="text" name="nome" id="nome" class="campo" />
  <label>Nome</label>
</div>

<div class="form-group">
  <input type="text" name="email" id="email" class="campo" />
  <label>Email</label>
</div>

Por exemplo:

.input__field--minoru:focus + .input__label--minoru::after {

}

Estou fazendo um efeito aqui, mas não estou entendendo esse sinal de + que tem no framework.

Resultado Final

 $(document).ready(function() {

   $(".campo").on('click', function() {
     $(this).closest('div.form-group').addClass('active');
   });

 });
 div.form-group {
   width: 100%;
   max-width: 700px;
   margin: auto;
   margin-top: 20px;
   position: relative;
   z-index: 1;
 }
 div.active input[type="text"]:focus + label:after {
   animation: AnimShadow 0.3s forwards;
 }
 label {
   font-family: @pf_din_text;

font-size: 16px;
   color: #959ea4;
   display: block;
   padding-top: 10px;
   padding-left: 8px;
 }
 label:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
   width: 100%;
   height: 57px;
   box-shadow: 0px 0px 0px 0px;
   color: rgba(199, 152, 157, 0.6);
 }
 input[type="text"] {
   width: 95%;
   border: none;
   font-family: "Verdana";
   font-size: 16px;
   color: #959ea4;
   background-color: #FFF;
   text-indent: 8px;
   height: 55px;
   outline: none;
   box-shadow: 0px 0px 0px 1px transparent;
   transition: all 0.3s ease;
 }
 input[type="text"]:focus {
   box-shadow: 0px 0px 0px 1px #FF9D12;
 }
body{
background-color: #f9f7f6;
}
 @keyframes AnimShadow {
   to {
     box-shadow: 0px 0px 100px 50px;
     opacity: 0;
   }
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
  <input type="text" name="nome" id="nome" class="campo" />
  <label>Nome</label>
</div>

<div class="form-group">
  <input type="text" name="email" id="email" class="campo" />
  <label>Email</label>
</div>

Tweeted twitter.com/StackOverflowPT/status/651801883552677888
adicionou 2170 caracteres ao conteúdo
Fonte Link
Diego Souza
  • 16,7mil
  • 4
  • 36
  • 104

Por exemplo:

.input__field--minoru:focus + .input__label--minoru::after {

}

Estou fazendo um efeito aqui, mas não estou entendendo esse sinal de + que tem no framework.

Resultado Final

 $(document).ready(function() {

   $(".campo").on('click', function() {
     $(this).closest('div.form-group').addClass('active');
   });

 });
 div.form-group {
   width: 100%;
   max-width: 700px;
   margin: auto;
   margin-top: 20px;
   position: relative;
   z-index: 1;
 }
 div.active input[type="text"]:focus + label:after {
   animation: AnimShadow 0.3s forwards;
 }
 label {
   font-family: @pf_din_text;

font-size: 16px;
   color: #959ea4;
   display: block;
   padding-top: 10px;
   padding-left: 8px;
 }
 label:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
   width: 100%;
   height: 57px;
   box-shadow: 0px 0px 0px 0px;
   color: rgba(199, 152, 157, 0.6);
 }
 input[type="text"] {
   width: 95%;
   border: none;
   font-family: "Verdana";
   font-size: 16px;
   color: #959ea4;
   background-color: #FFF;
   text-indent: 8px;
   height: 55px;
   outline: none;
   box-shadow: 0px 0px 0px 2px transparent;
   transition: all 0.3s ease;
 }
 input[type="text"]:focus {
   box-shadow: 0px 0px 0px 2px #FF9D12;
 }
body{
background-color: #f9f7f6;
}
 @keyframes AnimShadow {
   to {
     box-shadow: 0px 0px 100px 50px;
     opacity: 0;
   }
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
  <input type="text" name="nome" id="nome" class="campo" />
  <label>Nome</label>
</div>

<div class="form-group">
  <input type="text" name="email" id="email" class="campo" />
  <label>Email</label>
</div>

Por exemplo:

.input__field--minoru:focus + .input__label--minoru::after {

}

Estou fazendo um efeito aqui, mas não estou entendendo esse sinal de + que tem no framework.

Por exemplo:

.input__field--minoru:focus + .input__label--minoru::after {

}

Estou fazendo um efeito aqui, mas não estou entendendo esse sinal de + que tem no framework.

Resultado Final

 $(document).ready(function() {

   $(".campo").on('click', function() {
     $(this).closest('div.form-group').addClass('active');
   });

 });
 div.form-group {
   width: 100%;
   max-width: 700px;
   margin: auto;
   margin-top: 20px;
   position: relative;
   z-index: 1;
 }
 div.active input[type="text"]:focus + label:after {
   animation: AnimShadow 0.3s forwards;
 }
 label {
   font-family: @pf_din_text;

font-size: 16px;
   color: #959ea4;
   display: block;
   padding-top: 10px;
   padding-left: 8px;
 }
 label:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
   width: 100%;
   height: 57px;
   box-shadow: 0px 0px 0px 0px;
   color: rgba(199, 152, 157, 0.6);
 }
 input[type="text"] {
   width: 95%;
   border: none;
   font-family: "Verdana";
   font-size: 16px;
   color: #959ea4;
   background-color: #FFF;
   text-indent: 8px;
   height: 55px;
   outline: none;
   box-shadow: 0px 0px 0px 2px transparent;
   transition: all 0.3s ease;
 }
 input[type="text"]:focus {
   box-shadow: 0px 0px 0px 2px #FF9D12;
 }
body{
background-color: #f9f7f6;
}
 @keyframes AnimShadow {
   to {
     box-shadow: 0px 0px 100px 50px;
     opacity: 0;
   }
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
  <input type="text" name="nome" id="nome" class="campo" />
  <label>Nome</label>
</div>

<div class="form-group">
  <input type="text" name="email" id="email" class="campo" />
  <label>Email</label>
</div>

Fonte Link
Diego Souza
  • 16,7mil
  • 4
  • 36
  • 104
Carregando