how to locate the tooltip by scss - css

I'm using in my AngularJS project md-tooltip.
I tried to set the position by CSS by this way:
<md-tooltip class="tooltip" hide-sm hide-xs show-gt-sm><span>{{item.title}}</span></md-tooltip>
and :
.tooltip {
position: relative;
right: 20px;
}
It doesn't work. Is it impossible to do it?
Thanks for help.

Is definitely not impossible. Seems is working on
Fiddle (example here)
just by setting the class.
.tooltip {
position: relative;
right: 20px;}
I would suggest you to use the props of the tooltip if you can ( mdTooltip ) tough.
If your code is still not working, probably something overwrite it. Or is just not working the way you expect it?

Related

CSS - style for one element written inside the brackets of a different element?

Lets start out by saying that I am not great at writing CSS...so this may require some patience
I was following this tutorial: https://css-tricks.com/float-labels-css/
And it was my first time seeing CSS written with the following syntax:
form {
width: 320px;
float: left;
margin: 20px;
/* This is the part I am confused about */
> div {
position: relative;
overflow: hidden;
}
}
Maybe this is a stupid question, but is this the same as
form {
width: 320px;
float: left;
margin: 20px;
}
form > div {
position: relative;
overflow: hidden;
}
?
I am trying to utilize this syntax but I cannot quite figure it out. Can someone explain it to me please? :) Also, does this syntax have a name? I am having trouble even looking it up. Thank you!
Look for scss/sass. You will then write .scss files and then compile those to .css. You can simply install it via npm and then tell your IDE to automatically compile the files on save - or will have to make npm watch the files if you editor doesn't support it. But yeah, simply look for "how to install scss"

Why my ng-class is not working

I am trying to display spinner when the button is clicked. I had one working plunker and I am trying to implement it little bit of tweak. My Plunker is here. I referred this working Plunker but no luck. I know m missing something small here.
ng-class="{true: overlay}[madeCall]"
Ok both answers point correctly one error, but there is also a fault in logic.
In the plunker you copied it applies a class called .grey when it is true but in conjunction with the css, he has e.g: .grey .overlay, the result is the desired.
If you want to copy that exact logic you have to add the .grey class and also change your css.
e.g:
css:
.grey .overlay {
background-color: #e9e9e9;
/* display: none; */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}
and html:
<div ng-controller="mainCtrl" ng-class="{true: 'grey'}[madeCall]">
plunker
It should be:
ng-class="{overlay: madeCall}"
The syntax for ng-class is {className: Expression}, if the expression is truthy the class will be applied.
overlay should be there in quotes otherwise angular will lookup for overlay variable in scope.
ng-class="{true: 'overlay'}[madeCall]"
Demo Here

Material design's meaningful transitions for the web

(Sorry, i cant provide any code of what i am asking, because i dont really know where to start.)
About the Meaningful Transitions point in the Material design guidelines.
I m very interested in creating such smooth transition inside my web apps (especially the one where the profile picture goes from an activity to another), but i wonder how to do it using html?
Is CSS3 transition enough to do it (which style-property should i
use to move an element straightforward)?
Should i use JS/Dart to move the "shared view element" using the weird coordinates system?
Can it works on dynamic/scrolling layout or should i forget about it?
Is there any tips to move visually an node from a container to another in a smooth transition?
In a nutshell, Is HTML ready for such of stuff (any code/documentation would be appreciated)? Should we wait for some polymer tools to do this? Or should we simply dont do this in web?
Check out the Polymer core-animated-pages element https://elements.polymer-project.org/elements/neon-animation
They've got some great demos that are very similar to the meaningful transitions https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages
The "Icon to top bar" demo is probably the most similar to the one you referenced (you can just view the source to see the Polymer web components used, along w/ the necessary CSS & JS
You can import into your project via Bower:
bower install Polymer/core-animated-pages
And wrap your elements with and define transitions with an attribute like
Here's the code for that cross-fading example:
<style>
#hero1 {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: orange;
}
#hero2 {
position: absolute;
top: 200px;
left: 300px;
width: 300px;
height: 300px;
background-color: orange;
}
#bottom1, #bottom2 {
position: absolute;
bottom: 0;
top: 0;
left: 0;
height: 50px;
}
#bottom1 {
background-color: blue;
}
#bottom2 {
background-color: green;
}
</style>
// hero-transition and cross-fade are declared elsewhere
<core-animated-pages transitions="hero-transition cross-fade">
<section id="page1">
<div id="hero1" hero-id="hero" hero></div>
<div id="bottom1" cross-fade></div>
</section>
<section id="page2">
<div id="hero2" hero-id="hero" hero></div>
<div id="bottom2" cross-fade></div>
</section>
</core-animated-pages>
Polymer doesn't do anything of these things. This is all just HTML+CSS+JavaScript. And you can do all of this without Polymer.
All Polymer does, is it allows you to encapsulate these things in a custom element.
The core-elements and paper-elements are some examples. You can build such elements yourself or clone and modify/extend them.
As far as I know, polymer is supposed to be able to do all of this. If not yet, it should be able to soon.
The basic idea behind polymer is to allow you to make consistent interfaces across all devices (web, computer, android). So if Android L can do those transitions, then they most certainly mean for polymer to also have that capability.

last-child and last-of-type not working in SASS

How would you write this to be SASS compliant?
.fader { display: inline-block; }
.fader img:last-child {
position: absolute;
top: 0;
left: 0;
display: none;
}​
Basically I'm just replicating this example of fading in one image over another (found here.)
His JFiddle example: http://jsfiddle.net/Xm2Be/3/
However his example is straight CSS, I'm working on a project in SASS and am not sure about how to correctly translate it.
My Code
Note in my example below, the img hover isn't working correctly (both images are showing up and no rollover fadein action happens)
My CodePen:
http://codepen.io/leongaban/pen/xnjso
I tried
.try-me img:last-child & .tryme img:last-of-type
But the : throws SASS compile errors, the code below works
.try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
However it spits out CSS which doesn't help me:
.container .home-content .try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
UPDATE: Working Codepen:
http://codepen.io/leongaban/pen/xnjso
Nesting is not a requirement with Sass. Don't feel obligated to do so if there's no need to break up the selectors.
.try-me img:last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
If you are applying styles to the image and then specific styles to the last-of-type, then this what it would look like when you nest it:
.try-me img {
// styles
&:last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
}
Neither of the above worked for me, so.
last-of-type only plays nice with elements, you can select things with classes all you like but this gets handled by the elements. So say you have the following tree:
<div class="top-level">
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="somethingelse"></div>
</div>
To get to the last div with the class of middle, doesn't work using last-of-type.
My workaround was to simply change the type of element that somethingelse was
Hope it helps someone out, took me a while to figure that out.
Hey why don't you use only CSS? You could remove all the JS, I mean hover is support right back to ie6. I guessed that you know there is no hover event just active on tablets..
I mean you will need to set an area for the image.. But I find it use full, especially if you want an href.
http://codepen.io/Ne-Ne/pen/xlbck
Just my thoughts..

Associate ID with Class in CSS

Is there something clever I can do in CSS to indicate that an element with a particular ID should always use one or more classes? Something like:
#user_info_box {
use-class: ui-widget-content ui-corner-all;
position: fixed;
left: 10px;
...
}
Only, you know, using actual valid CSS properties.
LESS is perfect for this. Specifically, see "mixins".
#user_info_box {
.ui-widget-content;
.ui-corner-all;
position: fixed;
left: 10px;
...
}
You can't do that in CSS, however you may be interested in SASS
#user_info_box {
#extend .ui-widget-content;
#extend .ui-corner-all;
position: fixed;
left: 10px;
...
}
Check out http://lesscss.org/
it will give you more flexibility with your CSS including something similar to what you are asking.
Umm no. You could with javascript/jQuery though.

Resources