Ey I have an accordion menu, I want to change the glyph icons, and I found some answers to people asking the same thing but no answer I found worked on mine. Probably because I dont know where to apply the code.
My menu in a Jsfiddle:
http://jsfiddle.net/3wt0ehcj/
The glyph icons I try to get in:
https://codepen.io/tofanelli/pen/waadRY
The code I need to put somewhere:
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: grey; /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}
If there is another or easier way to to this I'm all ears! :)
You can solve this using :not(checked) and checked CSS pseudo-classes.
not()
checked
Remove this part
.accordion-bral input:checked ~ .ac-label i:before {
transform: translate(2px, 0) rotate(-45deg);
}
.accordion-bral input:checked ~ .ac-label i:after {
transform: translate(-2px, 0) rotate(45deg);
}
.accordion-bral i:before, .accordion-bral i:after {
content: "";
position: absolute;
background-color: #808080;
width: 3px;
height: 9px;
}
.accordion-bral i:before {
transform: translate(-2px, 0) rotate(-45deg);
}
.accordion-bral i:after {
transform: translate(2px, 0) rotate(45deg);
}
Use the glyphicon source code and then use this code.
/* when input is checked */
.accordion-bral input:checked ~ .ac-label i:after {
content: "\e114"
}
/* when input is not checked */
.accordion-bral input:not(checked) ~ .ac-label i:after {
content: "\e080";
}
.accordion-bral i:after {
font-style: normal; /* change font style too */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: grey;
}
This is the working fiddle
http://jsfiddle.net/7zsbumax/2/
.accordion-bral {
min-height: 0;
min-width: 220px;
width: 100%;
height: 100%;
background-color: #FFF;
margin: 0px!important;
}
.accordion-bral .ac-label {
font-family: Arial, sans-serif;
padding: 5px 20px;
position: relative;
display: block;
height: auto;
cursor: pointer;
color: #777;
line-height: 33px;
font-size: 19px;
background: #EFEFEF;
border: 1px solid #CCC;
}
.accordion-bral .ac-label:hover {
background: #b70000;
color: white;
}
.accordion-bral input+.ac-label {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion-bral input:checked+.ac-label,
.accordion-bral input:checked+.ac-label:active {
background-color: #b70000;
color: #FFF;
box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.accordion-bral input.ac-input {
display: none;
}
.accordion-bral .article {
background: white;
overflow: hidden;
height: 20px;
max-height: auto;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion-bral .article p {
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
}
.accordion-bral input:checked~.article i {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.accordion-bral input:checked~.article.ac-content {
height: auto;
}
.accordion-bral i {
text-decoration: none;
margin-top: 16px;
right: 0;
}
.accordion-bral input:checked~.ac-label i:after {
content: "\e114"
}
.accordion-bral input:not(checked)~.ac-label i:after {
content: "\e080";
}
.accordion-bral i:after {
font-style: normal;
font-family: 'Glyphicons Halflings';
/* essential for enabling glyphicon */
content: "\e114";
/* adjust as needed, taken from bootstrap.css */
float: right;
/* adjust as needed */
color: grey;
}
ul.ac-list {
padding-left: 40px;
list-style-type: disc;
}
table.ac-table {
margin: 20px 0 20px 20px;
}
table.ac-table th {
text-align: left;
}
#media (max-width: 550px) {
.accordion-bral .ac-label {
font-family: Arial, sans-serif;
padding: 5px 20px;
position: relative;
display: block;
height: auto;
padding-right: 40px;
cursor: pointer;
color: #777;
line-height: 33px;
font-size: 19px;
background: #EFEFEF;
border: 1px solid #CCC;
}
.accordion-bral i {
position: absolute;
transform: translate(-30px, 0);
margin-top: 2%;
right: 0;
}
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<div class="accordion-bral">
<div>
<!-- accordion item 1 -- start -->
<input class="ac-input" id="ac-1" name="accordion-1" type="checkbox" checked/>
<label class="ac-label" for="ac-1">HTML and CSS only<i></i></label>
<div class="article ac-content">
<h1 style="position: absolute; margin-left:10px;color:#b70000;">HOUTSOORT</h1>
<div class="flex-container">
<div class="card">
<img src="maxopdracht2/eiken-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Eiken</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/beuken-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Beuken</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/grenen-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Grenen</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/maple-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Maple</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/merbau-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Merbau</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/onbekend-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Overig/onbekend</label>
</div>
</div>
</div>
</div>
</div>
<!-- accordion item 1 -- end -->
<div>
<!-- accordion item 2 -- start -->
<input class="ac-input" id="ac-2" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-2">responsive accordion<i></i></label>
<div class="article ac-content">
</div>
</div>
<!-- accordion item 2 -- end -->
<div>
<!-- accordion item 3 -- start -->
<input class="ac-input" id="ac-3" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-3">Divs to divide your things up<i></i></label>
<div class="article ac-content">
</div>
</div>
<!-- accordion item 3 -- end -->
<div>
<!-- accordion item 4 -- start -->
<input class="ac-input" id="ac-4" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-4">Forms are cool<i></i></label>
<div class="article ac-content">
</div>
</div>
</div>
Update
If you want a little animation use this:
.accordion-bral input:checked ~ .ac-label i:after {
/* transform: rotate(90deg); */
transform: rotate(-270deg);
}
.accordion-bral i:after {
content: "\e080";
font-style: normal;
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
float: right; /* adjust as needed */
color: grey;
transition: 1s ease-out;
}
http://jsfiddle.net/2eLb3ju7/
You need to adjust this part of the code:
.accordion-bral input:checked ~ .ac-label i:before {
transform: translate(2px, 0) rotate(-45deg);
}
.accordion-bral input:checked ~ .ac-label i:after {
transform: translate(-2px, 0) rotate(45deg);
}
.accordion-bral i:before, .accordion-bral i:after {
content: "";
position: absolute;
background-color: #808080;
width: 3px;
height: 9px;
}
.accordion-bral i:before {
transform: translate(-2px, 0) rotate(-45deg);
}
.accordion-bral i:after {
transform: translate(2px, 0) rotate(45deg);
}
To something like this:
.accordion-bral input:checked ~ .ac-label i:before {
content: "+"; /*Icon for the opened state*/
}
.accordion-bral i:before {
content: "-"; /*Icon for the closed state*/
}
Also remove the CSS related to the :after element.
Full code with Font Awesome as example:
.accordion-bral {
min-height: 0;
min-width: 220px;
width: 100%;
height: 100%;
background-color: #FFF;
margin: 0px!important;
}
.accordion-bral .ac-label {
font-family: Arial, sans-serif;
padding: 5px 20px;
position: relative;
display: block;
height: auto;
cursor: pointer;
color: #777;
line-height: 33px;
font-size: 19px;
background: #EFEFEF;
border: 1px solid #CCC;
}
.accordion-bral .ac-label:hover {
background: #b70000;
color: white;
}
.accordion-bral input + .ac-label {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion-bral input:checked + .ac-label,
.accordion-bral input:checked + .ac-label:active {
background-color: #b70000;
color: #FFF;
box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.accordion-bral input.ac-input {
display: none;
}
.accordion-bral .article {
background: white;
overflow: hidden;
height: 20px;
max-height: auto;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion-bral .article p {
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
}
.accordion-bral input:checked ~ .article i {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.accordion-bral input:checked ~ .article.ac-content {
height: auto;
}
.accordion-bral i {
position: absolute;
transform: translate(-30px, 0);
margin-top: 16px;
right: 0;
font-style: initial;
}
.accordion-bral input:checked ~ .ac-label i:before {
content: "\f078";
}
.accordion-bral i:before {
content: "\f054";
position: absolute;
top:-15px;
font-family:"Font Awesome 5 Free";
font-weight:900;
}
ul.ac-list {
padding-left: 40px;
list-style-type: disc;
}
table.ac-table {
margin: 20px 0 20px 20px;
}
table.ac-table th{
text-align: left;
}
#media (max-width: 550px) {
.accordion-bral .ac-label {
font-family: Arial, sans-serif;
padding: 5px 20px;
position: relative;
display: block;
height: auto;
padding-right: 40px;
cursor: pointer;
color: #777;
line-height: 33px;
font-size: 19px;
background: #EFEFEF;
border: 1px solid #CCC;
}
.accordion-bral i {
position: absolute;
transform: translate(-30px, 0);
margin-top: 2%;
right: 0;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" >
<div class="accordion-bral">
<div>
<!-- accordion item 1 -- start -->
<input class="ac-input" id="ac-1" name="accordion-1" type="checkbox" checked/>
<label class="ac-label" for="ac-1">HTML and CSS only<i></i></label>
<div class="article ac-content">
<h1 style="position: absolute; margin-left:10px;color:#b70000;">HOUTSOORT</h1>
<div class="flex-container">
<div class="card">
<img src="maxopdracht2/eiken-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Eiken</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/beuken-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Beuken</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/grenen-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Grenen</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/maple-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Maple</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/merbau-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Merbau</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/onbekend-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Overig/onbekend</label>
</div>
</div>
</div>
</div>
</div>
<!-- accordion item 1 -- end -->
<div>
<!-- accordion item 2 -- start -->
<input class="ac-input" id="ac-2" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-2">responsive accordion<i></i></label>
<div class="article ac-content">
</div>
</div>
<!-- accordion item 2 -- end -->
<div>
<!-- accordion item 3 -- start -->
<input class="ac-input" id="ac-3" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-3">Divs to divide your things up<i></i></label>
<div class="article ac-content">
</div>
</div>
<!-- accordion item 3 -- end -->
<div>
<!-- accordion item 4 -- start -->
<input class="ac-input" id="ac-4" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-4">Forms are cool<i></i></label>
<div class="article ac-content">
</div>
</div>
</div>
First step:
Did you include the link for Gryphicons in your HTML file? You need to write the below link inside the <head> tag. Usually after the <meta> tag.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Second step:
Of course the tag should contain something like:
<p class="panel-heading"></p>
Third step: your CSS code should be inside the <style> tag. (if not in a .css file)
Read more here: https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
Related
how can i make all blocks the same and have 10px margin between them?
The radio button has been changed to a radio label. The problem is that the sizes are different, so the length of the words is different. How can it be done in one size?
You can do something like this:
#radios {
position: relative;
background-color: tomato;
z-index: 5;
width: 363px;
}
input {
display: none;
}
#bckgrnd,
.labels {
width: 120px;
height: 30px;
text-align: center;
display: inline-block;
padding-top: 10px;
margin-right: -3px;
z-index: 2;
cursor: pointer;
outline: 1px solid green;
}
#bckgrnd {
background-color: orange;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
#rad1:checked ~ #bckgrnd {
transform: translateX(0);
transition: transform 0.5s ease-in-out;
}
#rad2:checked ~ #bckgrnd {
transform: translateX(120px);
transition: transform 0.5s ease-in-out;
}
#rad3:checked ~ #bckgrnd {
transform: translateX(241px);
transition: transform 0.5s ease-in-out;
}
<div id="radios">
<input id="rad1" type="radio" name="radioBtn" checked>
<label class="labels" for="rad1">First Option</label>
<input id="rad2" type="radio" name="radioBtn">
<label class="labels" for="rad2">Second Option</label>
<input id="rad3" type="radio" name="radioBtn">
<label class="labels" for="rad3">Third Option</label>
<div id="bckgrnd"></div>
</div>
I am developing a website and I want to keep few inputs horizontally.
This is my CSS code
.input-group {
position: relative;
margin: 40px 0 20px;
}
input {
display: inline block;
width: 12%;
background: #EAF6F6;
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
border: 0px solid #757575;
border-radius: 5px;
}
input:focus {
outline: none;
}
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
input:focus ~ label,
input:valid ~ label {
top: -20px;
font-size: 14px;
color: #4285f4;
}
.bar {
position: relative;
display:block;
width:14%;
}
.bar:before,
.bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4285f4;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus ~ .bar:before,
input:focus ~ .bar:after {
width: 50%;
}
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
input:focus ~ .highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}
/* animations */
#-webkit-keyframes inputHighlighter {
from { background: #4285f4; }
to { width: 0; background: transparent; }
}
#-moz-keyframes inputHighlighter {
from { background: #4285f4; }
to { width: 0; background: transparent; }
}
#keyframes inputHighlighter {
from { background: #4285f4; }
to { width: 0; background: transparent; }
}
This is my HTML code
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Quantity</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>price</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Total</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Quantity</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>price</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Total</label>
</div>
But all inputs are in vertically. As this
But I Expect like this
I tried several ways. But unable to do. How to solve it. I found some bootstrap solutions. But I Do not expect Bootstrap. Expect pure CSS.
Wrap the inputs you wish to be displayed horizontally on the page within a flex group div.
See the css class flex-group in the example snippit below
Css-Tricks on flexbox
Mozilla flexbox
/* display:flex for this class */
.flex-group {
display: flex;
margin: 10px auto; /* set to 10px auto here */
}
.input-group {
position: relative;
margin: auto; /* set margin to auto here */
}
input {
display: inline block;
background: #EAF6F6;
width: 90%; /* set to 80% width */
font-size: 18px;
padding: 10px 10px 10px 5px;
border: 0px solid #757575;
border-radius: 5px;
}
input:focus {
outline: none;
}
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
input:focus~label,
input:valid~label {
top: -20px;
font-size: 14px;
color: #4285f4;
}
.bar {
position: relative;
display: block;
width: 14%;
}
.bar:before,
.bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4285f4;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus~.bar:before,
input:focus~.bar:after {
width: 50%;
}
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
input:focus~.highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}
/* animations */
#-webkit-keyframes inputHighlighter {
from {
background: #4285f4;
}
to {
width: 0;
background: transparent;
}
}
#-moz-keyframes inputHighlighter {
from {
background: #4285f4;
}
to {
width: 0;
background: transparent;
}
}
#keyframes inputHighlighter {
from {
background: #4285f4;
}
to {
width: 0;
background: transparent;
}
}
This is my HTML code
<div class="flex-group"><!--/ added div with class of flex-group => display: flex; /-->
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Quantity</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>price</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Total</label>
</div>
</div><!--/ END flex-group /-->
<div class="flex-group"><!--/ start new flex-group class /-->
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Quantity</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>price</label>
</div>
<div class="input-group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Total</label>
</div>
</div><!--/ END flex-group /-->
i have a login form. The password label not floating when the browser using password manager auto completion. Here's the preview. Thanks (input floating label not floating on login form auto completion)and please find the attached image above. (Hello i have a login form. The password label not floating when the browser using password manager auto completion. Here's the preview. Thanks, i really love this project!)
/* login form stylings ------------------------------- */
.group {
position: relative;
margin-bottom: 30px;
}
input {
font-size: 1rem;
padding: 8px 5px 4px 5px;
display: block;
width: 100%;
border: none;
border-bottom: 1px solid #ced4da;
}
input:focus {
outline: none;
}
/* LABEL ======================================= */
.labe {
color: #999;
font-size: 1rem;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
/* active state */
input:focus ~ .labe, input:valid ~ .labe {
top: -20px;
font-size: 14px;
color: #fb9f18;
}
/* BOTTOM BARS ================================= */
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #fb9f18;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
width: 50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active state */
input:focus ~ .highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
#-webkit-keyframes inputHighlighter {
from {
background: #fb9f18;
}
to {
width: 0;
background: transparent;
}
}
#-moz-keyframes inputHighlighter {
from {
background: #fb9f18;
}
to {
width: 0;
background: transparent;
}
}
#keyframes inputHighlighter {
from {
background: #fb9f18;
}
to {
width: 0;
background: transparent;
}
}
<form class="text-center">
<div class="group">
<input type="text" id="eMail" [(ngModel)]="loginEmail" #eMail="ngModel" name="loginEmail"
autocomplete="off" required >
<span class="bar"></span>
<label class="labe " for="eMail"><i class="far fa-user mr-2"></i> Email or Username</label>
</div>
<div class="group">
<input [type]="view ? 'text' : 'password'" type="password" id="password" [(ngModel)]="loginPassword"
autocomplete="off"
#password="ngModel" name="loginpwd" required>
<span class="bar"></span>
<label class="labe" for="password"><i class="fa fa-key mr-2"></i> Password</label>
<a class="hiddenPass" (click)='view = !view'><i class="far"
[ngClass]="{'fa-eye': view, 'fa-eye-slash':!view}"></i></a>
</div>
<div *ngIf="error" class=" alert alert-danger alert-dismissible" style="font-size: .8rem;"><i
class="fas fa-exclamation-triangle mx-1"></i>{{error}}</div>
<div class="d-flex justify-content-around">
<div class="boxes">
<input type="checkbox" class="asi" id="box-1">
<label for="box-1">Remember me</label>
</div>
<div>
<a class="fpwd" routerLink="/recoverpwd"> Forgot password?</a>
</div>
</div>
<div class=" mt-0 mb-0">
<button class="login-button" type="submit btn"
(click)="Login(loginEmail,loginPassword)">Sign in
</button>
<i *ngIf="loading" class="fas fa-spinner fa-pulse" style="color: #f1bf18; font-size: 20px;"></i>
</div>
<p class="awd">Don't have an Account?
<a class="fpwd" routerLink="/register">Register</a>
</p>
</form>
This might help you for Chrome (-webkit-autofill)
input:focus ~ .labe,
input:valid ~ .labe,
input:-webkit-autofill ~ .labe {
top: -20px;
font-size: 14px;
color: #fb9f18;
}
However, I think the idea here would be that once the browser has auto filled your fields, you'd fire an onChange event, which would update your model, in turn applying a class to say the field has a value.
I don't know enough about Angular to show example code of how that'd work.
When I hover over the border, the animation does not render
The original code pen link is as shown below
https://codepen.io/anon/pen/GVvxqq
i need the product class css to remain
how do i add in the animation without affecting the product class?
//HTML
<template>
<div class="item button draw">
<b-link #click="productDetail(item.productId)">
<div class="product">
<a class="img-prod">
<img
class="img-fluid product-image"
:src="item.options[0].productImages[0].imageUrl"
alt="Product Item"
/>
<span v-if="item.discounts.length != 0" class="status">{{discountPercentageTag}}% OFF</span>
</a>
<div class="text pt-3 px-3">
<h3>{{item.productName}}</h3>
<div class="d-flex">
<div class="pricing">
<p v-if="item.discounts.length != 0" class="price">
<span class="mr-2 price-dc">${{item.price.toFixed(2)}}</span>
<span class="price-sale">${{discountPrice.toFixed(2)}}</span>
</p>
<p v-else class="price">
<span>${{item.price.toFixed(2)}}</span>
</p>
</div>
</div>
</div>
</div>
</b-link>
</div>
</template>
//CSS
i need the product class css to remain
.product{
display: block;
width: 100%;
margin-bottom: 30px;
#include media-breakpoint-down(md){
margin-bottom: 30px;
}
.button {
background: none;
border: 0;
box-sizing: border-box;
margin: 1em;
padding: 1em 2em;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
position: relative;
vertical-align: middle;
}
.button::before, .button::after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.draw {
transition: color 0.25s;
}
.draw::before, .draw::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
.draw::before {
top: 0;
left: 0;
}
.draw::after {
bottom: 0;
right: 0;
}
.draw:hover::before, .draw:hover::after {
width: 100%;
height: 100%;
}
.draw:hover::before {
border-top-color: #60daaa;
border-right-color: #60daaa;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
border-bottom-color: #60daaa;
border-left-color: #60daaa;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
.img-prod{
position: relative;
display: block;
overflow: hidden;
span.status{
position: absolute;
top: 10px;
left: -1px;
padding: 2px 15px;
color: $black;
font-weight: 300;
background: $primary;
}
img{
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
-ms-transform: scale(1.0);
-o-transform: scale(1.0);
transform: scale(1.0);
#include transition(.3s);
}
&:hover, &:focus{
img{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
}
}
Only the border colour is rendered but not the animation
I have fixed it. something wrong with template tag i have removed it and worked.
.button {
background: none;
border: 0;
box-sizing: border-box;
margin: 1em;
padding: 1em 2em;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
position: relative;
vertical-align: middle;
}
img{width:100%}
.button::before, .button::after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.draw {
transition: color 0.25s;
}
.draw::before, .draw::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
.draw::before {
top: 0;
left: 0;
}
.draw::after {
bottom: 0;
right: 0;
}
.draw:hover::before, .draw:hover::after {
width: 100%;
height: 100%;
}
.draw:hover::before {
border-top-color: #60daaa;
border-right-color: #60daaa;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
border-bottom-color: #60daaa;
border-left-color: #60daaa;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
<div class="item button draw">
<b-link #click="productDetail(item.productId)">
<div class="product">
<a class="img-prod">
<img
class="img-fluid product-image"
:src="https://colorlib.com/wp/wp-content/uploads/sites/2/store-free-template.jpg"
alt="Product Item"
/>
<spanclass="status">test OFF</span>
</a>
<div class="text pt-3 px-3">
<h3>test</h3>
<div class="d-flex">
<div class="pricing">
<p v-if="item.discounts.length != 0" class="price">
<span class="mr-2 price-dc">$5423</span>
<span class="price-sale">$5345</span>
</p>
<p v-else class="price">
<span>$435345</span>
</p>
</div>
</div>
</div>
</div>
</b-link>
</div>
You need to wrap the entire block in <section class="buttons"> and change the outermost <div> to <button> if you want to use the CSS as-is from the codepen. I have tested this and it works as expected.
<template>
<section class="buttons">
<button class="item button draw">
<b-link #click="productDetail(item.productId)">
//
// custom element content
//
</b-link>
</button>
</section>
</template>
I have a tooltip to show my search when hovering over an icon. That works fine in itself.
My problem is, that this icon is inside an inline-block navigation and cause it acts as the parent of my tooltip it has to have the large width of it which messes up my layout.So if I don't extend the width of my parent with the Icon the Tooltip messes up due to the small width of ~30px of it's parent.
If I extend the width from my parent to 300px (The size of my tooltip), it messes up my layout.
I need a way of relieving the tooltip itself from the inside of the element with the Icon.
HTML Structure:
<div id="search">
<div class="wrapper">
<div class="popper inline">
<i class="fa fa-tags" />
<div class="tooltip">
<form>
<input placeholder="Search Tags" autocomplete="off" />
<button type="submit">
<a class="btn">
<i class="fa fa-search" />
</a>
</button>
</form>
</div>
<div class="inline">
<form>
<input placeholder="Search Tags" autocomplete="off" autofocus="true" />
<button type="submit">
<a class="btn">
<i class="fa fa-search" />
</a>
</button>
</form>
</div>
</div>
</div>
CSS (Scss):
#search {
background: $secondary;
padding: .25rem;
div.popper {
background: transparent;
border: none;
font-size: .8rem;
color: $highlight;
}
.inline form {
button, input, a {
background: transparent;
border: none;
font-size: .8rem;
color: $highlight;
}
input[type="Search"] {
width: 1368px;
outline: none;
font-style: italic;
font-size: .7rem;
padding: 1rem .5rem;
}
button {
margin-left: 1rem;
}
}
}
.popper {
position: relative;
width: 300px;
}
.popper .tooltip {
background: $secondary;
bottom: 100%;
color: $highlight;
display: block;
left: -25px;
margin-bottom: 20px;
opacity: 0;
padding: .8rem;
pointer-events: none;
position: absolute;
width: 300px;
max-width: 90%;
border-radius: 3px;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.popper .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 25px;
left: 0;
position: absolute;
width: 100%;
}
/* CSS Triangles - see Trevor's post */
.popper .tooltip:after {
border-left: solid transparent 7px;
border-right: solid transparent 7px;
border-top: solid $secondary 7px;
bottom: -7px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
.popper:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
I am grateful for all Your help! If you need further information, comment please.