I tried to do
.btn, .btn-large, .btn-small{
#extend .pink, .accent-1
}
Is there an issue with the specificity?
You can just override the default btn class by changing background-color property like:
.btn {
background-color: red;
color: white;
}
Button would be like
<button class="btn btn-lg">Hello</button>
I'm not sure if you're only looking for an answer in SASS, but here's a solution in pure CSS.
From the Materialize.css docs get the hex colour code for pink-accent-1 #ff80ab and apply !important parameter to the background-colour for the buttons just to be sure to override the default Materialize classes.
.btn , .btn-small, .btn-large{
background-color: #ff80ab !important;
}
Here's a working fiddle.
Oh! It seems like I misplaced my styles.min.css file. Sorry, everyone. It's really nice to know I have these kinds of resources if I need them.
Related
I am working on Angular, and now I have problem with dropdown z-index issue.
When I inspect in chrome, there is a new class called dropdown.
In this dropdown class there some information include z-index (z-index: 1050).
However, there is no dropdown class found in my html file and the whole project as well.
.dropdown {
z-index: 1052;
background-color: red;
}
I updated my scss code with dropdown class, and it changed color to red, but z-index is not change to 1052.
Note: position of dropdown is absolute.
Can anyone help or suggest me how to solve this issue? Thank you!
.dropdown {
z-index: 1052 !important;
background-color: red;
}
It works now!
Just add !important to set z-index value.
Maybe !important help z-index value that set here overwrite to its default value???
I want to make new gnome-shell theme which now the theming is lack of documentation yet.
Please look on the image below,
I want to get rid of the border-bottom (likely). And I tried in several ways and just change other element, not the one I mean.
Here, I try to manipulate element with .panel-button class,
.panel-button {
border: 1px solid #ff0;
}
.panel-button:active,
.panel-button:checked,
.panel-button:focus,
.panel-button:hover,
.panel-button:overview {
border: 1px solid #ff0;
}
But nope, it produce unexpected result.
It's a strange way, but I myself found by looking inside gnome-shell-viva-theme source.
We can use gradient with the same color,
.panel-button:active,
.panel-button:checked,
.panel-button:focus,
.panel-button:hover,
.panel-button:overview {
background-gradient-direction: vertical;
background-gradient-start: $bg-color;
background-gradient-end: $bg-color;
}
It is not a perfect answer, still looking the better one.
The property must to be changed is a box-shadow property.
#panel .panel-button:active,
#panel .panel-button:overview,
#panel .panel-button:focus,
#panel .panel-button:checked {
box-shadow: none;
}
I don't know why but while compiling with grunt or anything there is an error called invalid property name
#flotTip {
border: none !important;
font-size: $font-size-small !important;
line-height: 1px !important;
#extend .tooltip-inner() !important;
}
in the above code in the line-height it produces an undefined property. My task was to convert all less files into sass files. Used many solutions to convert all of them to sass as far as I can find. But this one I can't find any solution. Can anyone answer what might be the problem?
Extend is only for extending simple selectors, like class, element, or id. You cannot use !important with #extend. This is the correct way to use extend:
.foo {
color: red;
}
#flotTip {
#extend .foo;
}
You may be confused confusing extends with mixins, which also cannot use !important. This is the correct way to use mixins:
#mixin foo() {
color: red;
}
#flotTip {
#include foo();
}
The line-height: 1px !important; line looks fine. The problem is with the following line. If you're trying to include a mixin, use #include and don't prefix the mixin's name with . (dot). Also, don't put !important after it.
I would guess that you are using #extend incorrectly. See the docs here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#how_it_works
Is there a way to give SASS styles applied using the #extend feature the status of being !important? I tried this:
.somestyles {
width: 1000px;
}
.importantstyle {
#extend .somestyles !important;
}
Didn't work, but how might this be done? Or is it just not possible?
What you're asking for is not possible. You could increase the specificity of the selector that's doing the extending.
body .importantstyle {
#extend .somestyles;
}
I am trying to apply css class style to my #Html.TextBoxFor control in mvc3 razor view. But I am not able to see the defined style applied to the control. Below is my code:
In my .cshtml file I have the control as:
#Html.TextBoxFor(model => model.project.ProjectName, new { #class = "myStyle"})
In .css file I have defined the style as:
.myStyle
{
width: 150px;
font-family:Arial, Helvetica, sans-serif;
font-size: 1.00em;
}
What am I doing wrong? Can anyone help me please?
Thanks,
Balaji
If you are sure that your style sheet is properly loaded to the page (check the path to style sheet is correct), possible reason for the probelm could be, some other styles are overriding your defined style. Use IMPORTANT to make this override everything else
input.myStyle
{
width: 150px !IMPORTANT;
font-family:Arial, Helvetica, sans-serif !IMPORTANT;
font-size: 1.00em !IMPORTANT;
}
The .cshtml code looks correct to me. I would inspect the HTML source that gets generated to verify that class="myStyle" is present on the ProjectName input. If it is present, then the problem lies with your CSS (e.g. another style may be overriding myStyle).