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>
Related
I am using a framework (vuetify) which by default inserts the following css rule:
[type="button"] {
color: inherit;
}
The problem is that this is always inserted at last and I cannot control that. So if I am using the html <button type="button" class="button">Test</button> with the style .button { color: red; }, the css rule is not used because it gets overriden by the other rule. This means that for all button classes I either have to use another selector like button.button or I have to use !important. Is there another way to globally disable the property color: inherit so that I can still use a class like .button without using a more restrictive selector?
You can get around it by not putting type="button" on your buttons, it has that (button) behaviour by "default".
.button {
color: deepskyblue;
}
.container {
color: deeppink;
}
[type="button"] {
color: inherit;
}
<div class="container">
<button class="button" type="button">What color will I have?</button>
<button class="button">What color will I have?</button>
</div>
I like the style of the default buttons from pre-Bootstrap 4. In order to try to make my own I came up with the following SASS:
.btn-default {
#extend .btn;
border-color: #A5A5A5;
}
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default.active {
color: #808080;
}
This works as expected if I used a <button> tag but not if I use a <a> tag. Why wouldn't this work on both?
<a href="#" class="btn btn-default">
Test Anchor
</a>
<button type="submit" class="btn btn-default">
Test Button
</button>
Why would this not work on the anchor tag when you can normally assign a .btn class to an anchor tag and it will style it like a button?
I don't think you need to #extend .btn since you're already using .btn.
All the other btn-* variations have a color, background-color and border-color, so in CSS you could create a btn-default with:
.btn-default{
color:#333;
background-color:#bbb;
border-color:#a5a5a5
}
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default.active {
color: #808080;
}
The Bootstrap SASS way would be to use the button-variant #mixin...
.btn-default {
#include button-variant(#bbb, #a5a5a5, #bbb, darken(#bbb, 10%), darken(#bbb, 10%), darken(#bbb, 12.5%))
}
Demo: https://www.codeply.com/go/CWJidmeI1D
Here are the params for the button-variant mixin:
button-variant($background, $border, $hover-background, $hover-border, $active-background, $active-border)
<a> tag doesn't have the behavior of a button. Inorder make it try the following code
a.btn{
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
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.
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 */
}
I am making a set of buttons for my site, and I am in need of some professional insight.
In order to reduce CSS bloat, I want to subclass my buttons for different colors, ex .button.blue .
Will the following incur issues in the future? (assuming I don't make a class of just .blue)
Do I have to use something like .button.button-blue instead?
.button {
display:inline-block;
padding: 9px 18px;
margin: 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
background: #FFE150;
}
.button.blue {
background: #49b8e7;
border:1px solid #54abcf;
border-bottom:1px solid #398fb4;
color:#FFF
text-shadow: 0 1px 0 rgba(255,255,255, 0.5);
}
.header{
height: 50px;
}
.header.blue {
background: blue;
color: #fff;
}
What you have there with the multi-classes will work fine assuming you want them to work like so:
<div class="button blue">
Will use .button and .button.blue
</div>
<div class="button">
Will only use .button
</div>
<div class="header blue">
Will use .header and .header.blue
</div>
<div class="header">
Will only use .header
</div>
<div class="blue">
Will use neither of the .blue declarations because it doesn't contain header or button.
</div>
A selector like .button.blue actually selects for an element with that has both "blue" and "button" as classes, not a class called .button.blue. See http://www.w3.org/TR/CSS21/selector.html#class-html.
You can use the .button.blue style rule you have listed, but you'll need to rearrange your HTML so that you have something like <button type="button" class="button blue"/>. However, you don't really need to have a button class since it being a button (or <input type="submit">, etc.) is enough to use in your selector. You could write a CSS rule that is simply button.blue, input[type=submit].blue{}
Seems like button.blue is enough.
The only difference between the two is if you use <button class="button blue">, or <button class="button button-blue">.
You even don't need to duplicate the painting in blue... You can just do something like this:
.button
{
// button style
}
.header
{
// header style
}
.blue
{
background: blue;
color: #fff;
}
Of course if you add the blue class to each of them. (<div class="header blue">and<button class="button blue">)
Combine the classes applying the color you want to theme.
HTML:
<input type="text" class="text-field-required default" .../>
<select class="autocomplete-drop-down blue">...</select>
<a href="#" class="button-link green" .../>
CSS:
.text-field-required {
//component css theme without colors
}
.default {
//default color css theme for any component
}
.blue {
//blue css theme for any component
}
.green {
//green css theme for any component
}