I feel really bad about this lab. I started with little bit of confidence on working on a different issue, which was Issue #1100. But I ended up not being able to solve the issue. I could not find out exactly what I needed to change in the code. I have used the browser inspection to figure it out, but due to lack of experience using it, I could not pin point the exact area in the code where I had to add or edit.
Issue #1722
Due to this, I decided to work on a different issue. This issue was about changing the html element's fade/refade transition time when a user hover overs an icon. To do this, I used the same approach I used for issue 1100. Used the inspector to locate the folders that contained the CSS code for each icon used in html. Then I tried to break the code by figuring out what each classes and elements did. I also had to understand what the CSS specific does did. Then I played around with the code by changing numbers, moving transition class to elements that may or may not require. After, I looked at the code carefully, and found part of the code that holds the actual transition time.
/* Transition time for hover effects */
@transitionTime: 0.15s;
.transition {
-webkit-transition: @transitionTime;
-moz-transition: @transitionTime;
-ms-transition: @transitionTime;
-o-transition: @transitionTime;
transition: @transitionTime;
}
.transition-only-opacity {
-webkit-transition: opacity @transitionTime ease-in-out;
-moz-transition: opacity @transitionTime ease-in-out;
-ms-transition: opacity @transitionTime ease-in-out;
-o-transition: opacity @transitionTime ease-in-out;
transition: opacity @transitionTime ease-in-out;
}Then I came up with the idea to simply add the transition class into appropriate CSS element that required for the animation to occur. Now all I need to do in the end is to change the numbers on both CSS files to change the transition time to the developer's preference.
