I want to suffix all my rules with !important, how can I do this with stylus?
like I have
body
width 100%
color #fff
...
and I want this as output:
body {
width: 100% !important;
color: #fff !important;
...
}
afaik stylus does'nt have built in functionality to do something like this.
I think you could achieve what you want with some simple regex maybe you should look here for some advice,
although I don't recommend overusing !important.
Some advice on !important usage
It is a task better suited for something like PostCSS, but you can do this in Stylus too, but you'll need to list all the properties you'd like to override:
make_important()
{called-from}: arguments (!important in arguments ? unquote('') : !important)
// List all the properties you'd like to override
props = background, width, height, padding-left, margin-left, color, margin-bottom, font-size, border-left, font, opacity, transition, display, padding-bottom, margin-top, border, background-position, margin, padding
for prop in props
define(''+prop, #(){
make_important(arguments)
})
Live demo: http://jsbin.com/lopora/edit?css,output
Related
I'm new to React and wanted to ask what's the cleanest way to implement a background design like this. I want to know how you could change the background to blue and have the images overlap into the white area or the rings in the corners. So what is the best approach? And I don't want to use a background image
Background I want to implement
position: fixed;
background: "your image or some colors";
width: 100%;
height: 100vh;
Other contents should appear accordingly if you apply proper z-index
There are several options.
You can add !important behind the code that wnna be overwrite.
add z-index for the each element. note : the higher z-index number of the element, it will be place at the top.
in-line style. where you can add tag style={{ your style here}} within your element. example
<div style={{z-index : 10, backgroundImage : black}} > Text here </div>
manual CSS with tag backgroud-image.
So, previously i was using the 'ml-auto' class for my navbar, for my dropdown to push itself all the way over to the left. However, i dont want it to push itself all the way to the left when it goes into a small screen, and the navbar changes into a vertical orientation.
I tried giving my NavDropdown the following class and id
className={styles.naviDropdown}
id='navigationDropdown'
and apply the following style to it
.naviDropdown #navigationDropdown {
margin-left: auto !important;
}
#media (max-width: 768px) {
.naviDropdown #navigationDropdown {
margin-left: 0 !important;
}
}
However, this does not work, despite using the !important tag, which i previously thought was a universal trump card that would override everything else, regardless of the high amount of specificity that i already have, but alas, it does nothing.
So i thought, hmm, maybe i have to go all the way up to my custom.scss, which is theming my bootstrap, and already overriding some stuff.
Well, unfortunately, there isn't a $dropdown-margin-left variable that i can easily just change myself, so i attempted to implement it like this
.dropdown {
#navigationDropdown {
margin-left: auto !important;
}
}
#media (max-width: 768px) {
.dropdown {
#navigationDropdown {
margin-left: 0 !important;
}
I have been enjoying the bootstrap components, but man if they don't make it as hard as possible for you to simply override their css, it's like they want to force you into doing things a certain way.
Edit:
So, ive found out, through the inspector, that for some reason, the id is being applied to the a tag generated by React Bootstrap, not the encompassing div, which is given the proper class. Any ideas what might be going on?
Since your element has both the class and the id, your selector needs to be:
.naviDropdown#navigationDropdown
with no spaces.
My problem
I set my custom theme and it works fine.
But I get black text color on orange( accent) button, but I want to have white color.
My solution
In #material/theme/_variables.scss we have code like this :
$mdc-theme-primary: #3f51b5 !default; /* Indigo 500 */
$mdc-theme-accent: #ff4081 !default; /* Pink A200 */
$mdc-theme-background: #fff !default; /* White */
/* Which set of text colors to use for each main theme color (light or dark) */
$mdc-theme-primary-tone: mdc-theme-light-or-dark($mdc-theme-primary);
$mdc-theme-accent-tone: mdc-theme-light-or-dark($mdc-theme-accent);
$mdc-theme-background-tone: mdc-theme-light-or-dark($mdc-theme-background);
From the above code, we can see first three params have !default which means use this as default , if they are already declared dont override.
For that reason we can specify the custom colors.
But for properties like $mdc-theme-accent-tone we are forced to use the calculated values.
If I change the above code (source code of MDC ) to
$mdc-theme-accent-tone: mdc-theme-light-or-dark($mdc-theme-accent) !default;
and in my styles
$mdc-theme-accent-tone : "light"
It works fine. But obviously I can not change the source code. How to achieve this.
I realized this is according to the material design spec. So, expecting a provision to override is wrong.
But for all practical reasons, to override them do this :
#import "#material/theme/mdc-theme";
:root {
--mdc-theme-text-primary-on-accent: white;
}
Remember the override style should be written after importing mdc-theme
There is simple form and some textfields on this form. I have to set colors
(background and font) in two of them on runtime.
I tried to do it two ways:
1) fieldInstance.addClass('aaa') with css like this
.aaa .x-form-field {
background-color: black;
color: red;
}
2) fieldInstance.setFieldStyle('font-weight: bold;color: red;background-color: black;');
both methods are working because I see the bottom age of both is
fields is thick in black color, and both fields are working the same (almost) way.
Before enter and after exit background color is white.
When I start to edit this fields, background of first
is always white, background of the second is black until
I leave the field.
Could you explain me whats wrong?
For <input> element applied many classes beside x-form-field, like x-form-text and some of them define color and background-color aswell. So I guess that some of that classes may be more specific than .aaa .x-form-field. Try to use !important within your CSS rules:
.aaa .x-form-field {
background-color: black !important;
color: red !important;
}
I think that the 1st function append a class to the Others already presents.
In the second case you replace values of style already setted.
Maybe to have the same issue you need to modify the x-form-field fields, instead of append Others.
I Always use the second option if i have to modify style on Runtime.
maybe posting other code i can see better where the problem could present
I need to change the color of the titlebar to white color . What is the steps to be done Without using sass. I should be able to do that without theming in sencha touch.
Here is the style which you have to add in your css file.
.x-toolbar-dark {
background-color: white !important;
background-image: none !important;
}
By adding this style, you are simply overriding the sencha titlebar's default styling and now color of titlebar will become white.
NB: I would prefer you to use SASS if possible. Comment here if you need to change your sass file. Thank you.