I am trying to learn mixin's with SCSS, I am trying to make a simple mixin to control the style of buttons, however it is not working.
I am sure I have missed something obvious, but I am pulling my hair out now.
Any advice would be much appreciated.
As you can see here - my mixin is not being applied.
html
<div class="button-collection">
<button type="button"
class="button-collection__button button-collection__button--is-blue">
Button One
</button>
<button type="button"
class="button-collection__button button-collection__button--is-pink">
Button Two
</button>
#mixin button($primary) {
background-color: $primary;
}
.button-collection__button {
display: block;
width: 400px;
height: 40px;
margin: 10px auto;
&.--is-blue {
#include button(#449dc7);
height: 400px;
}
}
You made a mistake in class name, its should be &--is-blue not &.--is-blue, without dot. Its not mixin bug, but wrong scss syntax.
Related
I'm a CSS/bootstrap learner so forgive me if this is a nonsense question....
I have a button on screen with classes "btn btn-outline-primary" applied.
Upon some event occurring in my component(Angular2) I apply my "button-invisible" class, which sets display to "none" but this doesn't happen. The button remains visible. When I check in dev tools I see that the class is applied(and I can change other style properties such as font-style etc...) but the "display: none;" is not enabled, it is struck through.
Can someone advise on why my class would be applied but certain aspects/properties overridden? The only way I can make this class function as I expect is by adding the !important rule.
Cheers
.btn from bootstrap _buttons.scss
.btn {
display: inline-block;
font-weight: $btn-font-weight;
line-height: $btn-line-height;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border: $input-btn-border-width solid transparent;
#include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
#include transition($btn-transition);
// Share hover and focus styles
#include hover-focus {
text-decoration: none;
}
&:focus,
&.focus {
outline: 0;
box-shadow: $btn-focus-box-shadow;
}
// Disabled comes first so active can properly restyle
&.disabled,
&:disabled {
cursor: $cursor-disabled;
opacity: .65;
#include box-shadow(none);
}
&:active,
&.active {
background-image: none;
#include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
}
}
my class that I am applying conditionally using ngClass...
.add-button-invisible {
display: none !important;
}
Markup where applying class:
<div class="row">
<button [ngClass]="addingNew === true ? 'add-button-invisible' : 'add-button-visible'" class="btn btn-outline-primary" (click)="addNew()">+Add {{entityType}}</button>
</div>
Bootstrap has a bigger priority, so your styles not working. You can add !important to your rule to override bootstrap rule. For example:display: block!important;
can you try to add : !important behind it, maybe the calss is not specific enough, by adding important to it css makes it more important. :)
btn class has display:inline-block, it overrides your custom class's display:none. If your custom class is going to apply only display: none;, then you can use bootstrap class hidden instead of going for custom one. check below snippet for reference.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn">Button Show</button>
<button type="button" class="btn hidden">Button Hidden</button>
I was trying to customize tooltip style with tooltip-append-to-body="true", but it is not working.
Here is my code:
<i class="fa fa-minus-square-o" tooltip-append-to-body="true" tooltip-class="customClass" tooltip="Test tooltip"></i>
And in CSS file:
.customClass .tooltip-inner {
max-width: 100px;
width: 50px;
}
But the tooltip's width never changed, it has the default 200px from bootstrap.css.
I also tried to use the following code:
<i class="fa fa-minus-square-o" tooltip="Test tooltip" tooltip-class="customClass" tooltip-append-to-body="true"> </i>
with CSS:
.tooltip.customClass .tooltip-inner {
max-width: 100px;
width: 50px;
}
and it doesn't work either.
I'm using ui-bootstrap-tpls.0.11.0, and wonder if this is because that the old version ui-bootstrap doesn't support tooltip-class. If that is the case, is there anyway I can add style for tooltip?
Take a look at this maybe it will help but the ui version is not a problem.
http://codepen.io/norcaljohnny/pen/pNOaYX
.tooltip-inner {
min-width: 100px;
max-width: 100%;
}
I know that we can import a css style into another css style. That's not the thing I'm going to talk about.
I want to create a css style that depend on other css style. In other word, I want to create my own cascading tree system. How can I do that?
For example, how I pictured it in my mind:
div.priceinfo { border: 1px solid gray; width: 200px; }
div.disabled { background-color: gray; color: 333333; }
div.shippinginfo { depend: div.pricebox; border-color: green; }
div.taxinfo { depend: div.pricebox; border-color: blue; }
so I can use it like this:
<div class="priceinfo"> ... </div>
<div class="shippinginfo"> ... </div>
<div class="taxinfo disabled"> ... </div>
but I do not want like this:
<div class="priceinfo shippinginfo"> ... </div>
<div class="priceinfo taxinfo disabled"> ... </div>
I know that the last way is possible, but I'm curious whether there's any way I can do something like the one I described earlier? Thanks for the help.
I think you have to see a LESS CSS for this. a LESS CSS provides a coding for CSS.
http://lesscss.org
Using bootstrap, I created input-group with a button and input type='file'.
It is working fine everywhere except IE9. On IE9 the browse button is being cropped from right side.
Demo: http://jsbin.com/alESiBo/6/edit
Code:
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="icon-upload-alt"></i> Upload
</button>
</span>
<input id="fileField" class="form-control" name="fileField" type="file" />
</div>
Output:
IE 9.0.8112.16421
Chrome 31.0.1650.63 m
IE Version with snapshot:
What you are seeing ( the grey part ) is the 'browse..' part of the file upload in IE9. This is 'just the way it is' for the bootstrap css. As other answers have shown, if you do not like this, yeah, just need to have a look into making your own.
Add this in your head tag to prevent further mismatches though...
<meta http-equiv='X-UA-Compatible' content='IE=edge'/>
Most common is to set this control hidden ( I agree it always looks awful and inconsistent ) and 'trigger' it from your own fake button.
Lots of great links from other answers.
Like Rob Sedgwick said in his answer this is just the way the control looks in IE, and styling it is not really allowed.
But… you can cheat: make the file input disappear, and create your own fake input. Then redirect the relevant events using JS.
HTML
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="icon-upload-alt"></i> Upload
</button>
</span>
<input id="fileField" class="form-control" name="fileField" type="file" />
<span class="form-control form-control-overlay" id="fileFieldOverlay">Choose file</span>
</div>
CSS
.form-control[type="file"] {
margin-bottom: -100%;
opacity: 0;
}
.form-control-overlay {
/* style, if you want */
cursor: pointer;
}
Javascript
var fileFieldEl = document.getElementById("fileField");
var fileFieldOverlayEl = document.getElementById("fileFieldOverlay");
// On change of file selection, update display
fileFieldEl.onchange = function(ev) {
// remove file path; it's a fake string for security
fileFieldOverlayEl.innerText = ev.target.value.replace(/^.*(\\|\/)/, '');
};
// Redirect clicks to real file input
fileFieldOverlayEl.onclick = function() {
fileFieldEl.click();
};
Run the code: http://jsbin.com/alESiBo/16/edit
add one more class :
bootstrap.css:3296
.input-group {position: relative; display: table; border-collapse: separate; width: 100%;}
try this may be it will be help you out.
Your code seems to work fine in IE9.
http://fiddle.jshell.net/XCN83/1/show/
So, make sure your compatibility mode is not on. (see red circle in the attached image)
If not, some other css you have is affecting it, use the dev tools inspector to find styles applied to the file input box and it's parents working your way up.
I will suggest to use your own custom CSS to give same look and feel across the browser and same behavior across the browser. I have used similar approach to take care of this issue in my project. Following are same details also link of JSBIN for live demo.
HTML Code:
<!--Import button-->
<div class="fileinput-button import-modal-select-file-btn" title="Import file">
<!--Name of button -->
<span>Upload</span>
<!-- Upload file control-->
<input id="importFileUploadFileId" type="file" name="file" onchange="uploadFile(this);" />
<!-- Any hidden field; Generally needed when upload button is part of form-->
<input type="hidden" name="request" value="value"/>
</div>
CSS Code (Please customize as per your need):
.fileinput-button {
border-radius: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: #e7e9eb;
border: 1px solid #454b59;
font-family: "Gill Sans","Gill Sans MT","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #454b59;
font-weight: lighter;
font-size: 16px;
cursor: pointer;
overflow: hidden;
position: relative !important;
background-image: none;
height: 30px;
outline: none;
height: 28.5px;
line-height: 28.5px;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
filter: alpha(opacity=0);
transform: translate(-300px, 0) scale(4);
font-size: 16px;
direction: ltr;
cursor: pointer;
}
.import-modal-select-file-btn {
width: 50px;
}
Following is live JSBIN link for your reference.
http://jsbin.com/EWIGUrEL/1/edit
Hope it may help.
i have this html code, and this button, now i need to give different css to this two buttons.
Can you help me with that?
<div class="modal" style="display: none;">
<button type="button" class="action confirm">Konfirmo</button>
<button type="button" class="action cancel">Anullo</button>
</div>
It should be something like .modal .button .confirm
I am trying to give different css to those two buttons. So , how can i do that!
Thanks..
I’m not quite clear on what you’re asking, but are you looking for something like this?
.modal .confirm {
color: green;
}
.modal .cancel {
color: red;
}
Style your first button with .modal button.confirm { ... } and the second with .modal button.cancel { ... }
div.modal button.confirm{
/* css for confirm buttom */
}
div.modal button.cancel{
/* css for cancel buttom */
}