Develop Reference

Bootstrap class to remove background image

Is there any bootstrap class which can remove a background image from the div?
I have this style in css:
background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0));
and i want to remove it like this:
bg-img-none
or something else,
can somebody tell me how to do it?

‍‍‍No, but you can add it yourself.
.bg-img-none {
background-image: none !important;
}
.bg-none {
background: none !important;
}

you can use bg-transparent to make the background transparent. this will not make the background as null but change the transparency of area to 0.
you can check out it at bootstrap documnetation.This documentation is for colour backgrounds.
OR
you can add a custom CSS to remove the background
.bg-img-none{
background-image: none;
background: none;
}

angular material2 select component alignment

I am using a material components and I want to know if is possible to set the size of dropdown select to be exactly with the size of mat-form-field.
the default component is like:
And I want to modify that in order to have the dropdown exactly same size as mat-form-field like this:
but I don't know how to modify the width size and position of the dropdown container, do how can I modify that width size and position.
here is a small example with the component:
https://stackblitz.com/angular/rllajkqybnmy

unfortunately, you need to add !important to the things you add since angular material adds the location as a style attribute
basically, you need to add\change 3 attributes:
max-width - don't allow the select to change if content is wider
min-width - same
transform - to change the location of the select
notice that there's still an animation placement which starts at the original position.
This is the basic change:
.mat-select-panel {
min-width: 180px !important;
max-width: 180px !important;
transform: translate(-2px, 44px) !important;
}
/* this will hide the element while it's being animated because
the animation happens for the original position */
.mat-select-panel.ng-animating {
display: none;
}
Add that to your styles.css, since this element is injected outside of the component.
demo: https://stackblitz.com/edit/angular-material-select-location?file=styles.css

My solution to fix [disableOptionCentering]="true"...
A hack I found to disable the animation:
// TS - Remove Mat-Select Dropdown animation (https://github.com/angular/components/issues/8857)
MatSelect['decorators'][0].args[0].animations[0] = trigger('transformPanel', []);
// CSS - Fix alignment
.mat-select-panel {
margin: 21px 0 35px 16px;
}

A solution which keeps the animation:
// get hold of your mat-select
#ViewChild(MatSelect)
_mySelect: MatSelect;
// assign a custom panel class to the mat-select connected overlay
ngOnInit() {
this._mySelect.overlayDir.panelClass = 'my-select-overlay';
}
// CSS (global or using ViewEncapsulation.none) - fix width with padding and/or max-width
.my-select-overlay {
padding: 0 20px;
min-width: 180px !important; //min-width needs important to override the element style
}

If you adjust the position with margin instead of transform then the animation issue will be fixed!
Example instead of:
transform: translate(-2px, 44px) !important;
do
margin-top: 44px;
margin-left: -2px;
and that will remove the animation issue.

Using 5-star CSS solution, when screen under 330px line wraps and cannot click second row

I'm using a 5-star rating system designed to be used on mobile devices. On most phones it works fine, but sometimes a phone's width registers as less than 330px which causes the row of stars to wrap, like so:
If you click on the 5th star, however, it won't register. The "box" is still on the previous row.
Here's a JS fiddle where you can see it in effect by dragging the bottom-right-hand-side render box's width: http://jsfiddle.net/yqj3bjLf/1/
And here is the relevant CSS:
/* Change span immediately following the checked radio */
.rating input:checked + span {
/*background-position: -22px 0;**
background-position: -145px 0;*/
background-position: -58px 0;
}
/* Reset all remaining stars back to default background.
This supersedes the above due to its ordering. */
.rating input:checked + span ~ span {
background-position: 0 0;
}
.star-grey:before {
content: "\f000";
font-family: FontAwesome;
color: grey;
}
.star-yellow:before {
content: "\f000";
font-family: FontAwesome;
color: #ffe43e;
}
How can I fix prevent this? I've tried applying my own CSS, but the :before CSS classes don't seem to be taking when I try to effect them with new, page-specific inline #media queries.

It's easy, set display for the container to inline-block and set white-space to nowrap. Should work. I had the same issue.
edit:
.rating {
display: inline-block !important;
white-space: nowrap !important;
}
This is the working example: http://jsfiddle.net/yqj3bjLf/7/

I suggest setting the min-width of the .rating container to at least 75px. I tried the above solutions and some other I found, but this worked for me.

Custom on hover and ul/li elements?

I'm new here, so please tell me if I formulated something wrongly, code or text-wise.
This is the code I'm currently using for my page. Yes, I know it's short and terrible, but I'm still learning HTML/CSS. If you run that on a page, you'll notice no hover events on the navbar buttons, and some fiddling with the logo will reveal that the actual navbar is a big bar. (width:100%?)
I was only wondering as to how I would go about creating an on hover that's only slightly there, something like this: (hovered on the left, not hovered on the right)
Hover showcase
I don't necessarily need it using my current setup or it being exact, but I'd like an explanation as to how this would be done. (the site I took it from has fancy fade on the text turning blue and a slide animation on the bar from the bottom, but I don't expect I'll be able to do that)
I was also wondering how I could have the logo be on the same bar as the other li elements, and then center it off how long logo + li elements (the whole bar) would be. (as opposing to having the li elements centered and a logo off to the left.) Also, a thick, colored bar above the navbar, but not below, like a margin, and having the navbar be a little thicker as well, as the picture above depicts fairly well.
Thank you for any assistance I can recieve!
Hyao

So for the hover color you can do something like:
li:hover {
color: blue;
border-bottom: 3px solid blue;
}
To add more of the animation you might want to do:
li {
display: inline-block;
vertical-align: middle;
}
li a:hover {
color: blue;
}
li a:after {
margin: 0 auto;
width: 0px;
height: 3px;
display: block;
content: "";
background-color: blue;
transition: width 0.5s linear;
}
li a:hover:after {
width: 100%;
}
li img {
padding: 14px 16px;
}
http://plnkr.co/edit/GrxqcRjoMa7aWjHvnBhA
basically you are creating a psuedo element :after which has an animation on its width. When you hover over an li element the psuedo element will grow to 100% of the width looking like an expanding underline.
To make the image inline with the other elements remove your position: absolute style for the #logo

Inherit colour and then make it darker/brighter

I have two div's one is .father and the other one is .child - as follows:
<div class="father">
<p></p>
</div>
<div class="child">
<p></p>
</div>
As you can see, the child is not inside the father (sorry if this seems doggy, the only example blinked to me). What I am trying to do; is when I give the .father a background colour lets say "background-color: #000". I want the child to inherit the colour black BUT make it brighter/darker...
I have tried to do the following:
.child {
background-color: -20%;
}
I don't know if that is a real way, I guess it's stupid - but I need to share what I did.
I have also tried to do it using CSS transparency but that will be applied to the whole div... what if the div has text inside it?
So for example, I wrap the div .child with another div and give that div a black background, then apply transparency to the div .child - but this will apply transparency to the text as well!
If I have added a around the how can I make that span inherit the colour of the div inside it? and inherit its size as well.

I'm afraid you cannot do that in pure CSS. Unless of course you work with rgba colors to make it transparent.
There is however a function in SASS (and LESS) that allows to darken/lighten colors. Take a look at these function's reference here.
More information about SASS/SCSS: http://sass-lang.com/

You can set for the child background the same color that for the father, and set a semitransparent pseudo element over it.
If the background of the pseudo element is semi-transparent white, the background-color gets lighter; if the pseudo element is semitransparent black, the child gets darker.
.father, .child {
background-color: red;
}
.child {
position: relative;
}
.child:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0,0,0,0.2);
}
.child:hover:after {
background-color: rgba(255,255,255,0.3);
}
In this example, the child gets darker red, but turns to lighter red when hovered (and works the same if the base color is whatever you want
fiddle