Is this CSS properties not supposed to work in Ionic?

ionic-v1
1

This is CSS animation that I am going to integrate for button but it works for general HTML5 but not for Ionic I guess…? What property is getting rejected…?

.nav-burger {
margin: 0 auto;
width: 3.25em;
cursor: pointer;
position: relative;
transition: all .35s;
color: #ffdb9a;
.line {
height: 0.65em;
border-radius: .15em;
width: 3.25em;
background-color: #ffdb9a;
transition: all .35s;
position: relative;
}
.text {
margin: .65em 0;
text-align: center;
text-transform: uppercase;
font-family: ‘Montserrat’, sans-serif;
line-height: .4em;
font-size: 1.2em;
font-weight: 700;
transition: all .35s;
}
}

.nav-burger.active {
.line {
position: relative;
&:first-child {
-ms-transform: rotate(45deg) translate(0.513em, -0.25em);
-webkit-transform: rotate(45deg) translate(0.513em, -0.25em);
-moz-transform: rotate(45deg) translate(0.513em, -0.25em);
-o-transform: rotate(45deg) translate(0.513em, -0.25em);
transform: rotate(45deg) translate(0.513em, -0.25em);
right: 0.913em;
top: 1.25em;
}
&:last-child {
-ms-transform: rotate(-45deg) translate(0.569em, 0.25em);
-webkit-transform: rotate(-45deg) translate(0.569em, 0.25em);
-moz-transform: rotate(-45deg) translate(0.569em, 0.25em);
-o-transform: rotate(-45deg) translate(0.569em, 0.25em);
transform: rotate(-45deg) translate(0.569em, 0.25em);
top: .5em;
right: 0.969em;
}
}
.text {
opacity: 0;
font-size: .25em;
}
}

2

Can you also post button you were trying to use this on?

3

@Gajotres this is the part of html that I am using it

<div class="nav-burger" id="map-search-toggle">
  <div class="line"></div>
  <div class="text">Find</div>
  <div class="line"></div>
</div>
4

Another question, are you sure this CSS block is working in a browser environment?

Could you please use this template: http://plnkr.co/edit/SMD0nR?p=preview

And add your HTML and CSS, make it work, and I will debug it with Ionic resources turned on.

5

@Gajotres

Here it is,

6

I can’t forget I’m doing this, I was hoping it’s behind me.

I used to help jQuery Mobile developers at StackOverflow. A lot of them didn’t know how to properly bind events, you should use .on function.

Working example:

Also, $ keyword will not work with Ionic, use jQuery instead. Rest of your code is OK, CSS is intact.

7

thanks for the advice, @Gajotres

though, the click event is happening properly, I still can’t see the button being drawn correctly.

It only draws the text and no bars top and bottom.

It almost seems like its just applying only color from CSS.

8

I don’t understand you, my example now works exactly like your initial one.

Or are you talking about your own implementation?

9

yes, hm… only difference is I am adding this div into google map

var mapSearchToggle = (document.getElementById(‘map-search-toggle’));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(mapSearchToggle);

10

so I found which part is getting set wrong…
somehow, in my .css file, if .line class or .text class is inside of .nav-burger as we see there, it does not work…

I might have to modify css