I need to give particular style in css just for Firefox in ExtJs 4.2
Looking in the web I found that Extjs give a particular class when you are in certain browser so I tried:
.x-body.x-gecko .x-btn-action-nav-large.x-btn-inner {
font-size: 5em;
}
or even
.x-body.x-gecko {
.x-btn-action-nav-large.x-btn-inner {
font-size: 5em;
}
}
But nothing work and is showed in Firefox
any suggestion?
Try:
.x-body.x-gecko .x-btn-action-nav-large .x-btn-inner {
font-size: 5em;
}
You need a space between the last 2 rules as the inner element is a child of the button.
You could also simply do:
.x-gecko .x-btn-action-nav-large .x-btn-inner {
font-size: 5em;
}
Related
In one file, I have typography.css:
.p.xl {
font-size: 1.375rem;
}
.p.lg {
font-size: 1.25rem;
}
.p {
font-size: 1.125rem;
}
.p.sm {
font-size: 0.875rem;
}
And in another file, I want to apply .p.lg to my .links:
.link {
#apply p lg;
}
The following code is generated and shipped to the front end:
.link {
font-size: 1.125rem;
}
Even if I change the order of lg and p and even if I inline it in the link itself with class="p lg".
Hell, even if I specify for the p styles to explicitly NOT target the lg elements it STILL generates the incorrect CSS:
Input:
.p.xl {
font-size: 1.375rem;
}
.p.lg {
font-size: 1.25rem;
}
.p:not(.xxl):not(.xl):not(.lg):not(.sm):not(.xs):not(.xxs) {
font-size: 1.125rem;
}
.p.sm {
font-size: 0.875rem;
}
Output:
.link:not(.xxl):not(.xl):not(.lg):not(.sm):not(.xs):not(.xxs) {
font-size: 1.125rem;
}
It's just stupidly copying and pasting the rest of the paragraph selector rather than running the selector logic and determining whether or not to apply the styles.
I have this exact same problem hundreds of times in my project with seemingly no solution other than to completely abandon Tailwind for half the project or to install tailwind-plugins and then enter every single combination of every class I want to apply in my tailwind.config.js.
Help is greatly appreciated. I've searched online for a while without finding anyone even having the same problem; I only found people who don't know how #apply works (well perhaps I'm one of them...). Thanks in advance.
UPDATE:
I also have:
.p {
#apply font-light;
}
.p.subheading {
#apply font-normal;
}
And of course the same issue with applying p subheading where it applies the wrong font weight and even using .p:not(.subheading) still generates the wrong styles. Will I really have no way whatsoever of styling p font-weights without also giving every single .p ANOTHER class to tell it to use one font weight? In other words, are default styles impossible?
UPDATE 2
Even when using !important it still fails to override...
.p {
#apply font-light;
}
.p.subheading {
#apply !font-normal;
}
and
.p.xl {
font-size: 1.375rem !important;
}
.p.lg {
font-size: 1.25rem !important;
}
.p {
font-size: 1.125rem;
}
.p.sm {
font-size: 0.875rem !important;
}
I STILL get the wrong font sizes and font weights generated:
.link {
font-size: 1.125rem;
}
.link {
font-weight: 300;
}
I recently started using BEM methodology and I'm confused about class inheritance, or rather - when we talk about BEM - some use cases of modifiers.
Let's look at this example, I have a simple element with few children
.b-content { width: 100%; }
.b-content__image { display: block; }
.b-content__date { font-size: 14px; }
.b-content__title { font-size: 30px; }
.b-content__text { font-size: 16px; }
Now I want to reuse my .b-content block with slightly different styles, so I use modifier .m-compact and now I'm not sure what approach is the right one (in BEM).
Whether I should append modifier class to all elements (which I find more valid according to documentation):
.b-content.m-compact { width: 50%; }
.b-content__image.m-compact { display: none; }
.b-content__date.m-compact { font-size: 12px; }
.b-content__title.m-compact { font-size: 24px; }
.b-content__text.m-compact { font-size: 14px; }
or should I append modifier only to the parent element:
.b-content.m-compact { width: 50%; }
.b-content.m-compact .b-content__image { display: none; }
.b-content.m-compact .b-content__date { font-size: 12px; }
.b-content.m-compact .b-content__title { font-size: 24px; }
.b-content.m-compact .b-content__text { font-size: 14px; }
I find this second method more logical, you know, since I'm writing cascading styles and in real world if I want to write e-mail to 10 people, I would write one and just add more recipients, but on the other hand I realize BEM is practically non-cascading approach.
So what should I use and why?
As you point out in the last lines of your question, when doing BEM you should avoid cascading so, as a corollary to this, you don't have to repeat the modifier where it isn't needed.
For your Modifier I'd write something like this:
.b-content--m-compact {
width: 50%;
}
In your example the Block and the Modifier set only the width, so this is a limited use case. In general it comes handy to use some kind of CSS preprocess to ease the code writing, e.g. in SASS:
.my-block
width: 100%
color: red
&--modifier
#extend .my-block
border: 1px solid red
which will results in:
.my-block, .my-block--modifier {
width: 100%;
color: red;
}
.my-block--modifier {
border: 1px solid red;
}
Modifier in BEM looks like this: .block_modName_modValue
You can add additional class - but it's not BEM. And also modifiers have a name and value.
Block in BEM set namespace
So you set default styles for blocks and all unique(that can be changed) place in css with modifiers. This way your styles don't messed up.
To do this you need:
Place common styles in block styles(.portfolio)
Place unique style(with modifiers) like this.(portfolio_theme_list)
In css you don't need to separate this(preprocessor will be needed).
.portfolio {
/* common styles */
&_theme_list {
/* modifiers style */
}
}
In BEM project-stub(template engine) it would look like this:
If you add modifier to block. Then compile(bemjson) to html.
{
block : 'portfolio',
mods : { theme : 'list' },
}
You will see this code
<div class="portfolio portfolio_theme_list">
</div>
You write elements correctly and understand that they need to be separated(without inheritence).
So now you need just define styles for your block with modifier(portfolio_theme_list).
You have 2 options:
1) If you have 2 different blocks - you need separate common and
unique styles. Unique styles place in styles with modified blocks.
2) If you have only 1 different block & you already have styles on
this blocks. Then you can override and don't separate common
styles(but it can cause pain if you add another modifier/instance)
In my first line I have the following style:
* {
text-align:left;
}
Which works well through the site as most of it is left aligned. However a handful of areas need to be text-align: center and it will not update, even with !important. for example:
table.footer {
text-align:center !important;
}
Any ideas on how I can fix this?
It should work as you can see in this live example.
You might want to do this instead:
table.footer td
{
text-align:center;
}
!important is not needed anyway.
Live example
I guees I know what is missing.
The table.footer selector does only match for a table with class footer, not for the elements inside it
You could do
table.footer td {
text-align: center;
}
See http://jsfiddle.net/mMM5q/
or perhaps even better
html {
text-align: left;
}
* {
text-align: inherit;
}
See http://jsfiddle.net/B3F9U/
I have the following HTML:
wide button
narrow button
I've tried using an attribute selector and combining it with the button class but it doesn't work as expected.
.button.[class*="large-"] {
font-size: 0.9em;
}
Am I using this correctly and if not, how?
You don't need the second period, unlike JavaScript the [class*="large-"] isn't compiled to return the found-string, it's simply evaluated as-is:
.button[class*="large-"] {
font-size: 0.9em;
}
JS Fiddle demo.
You are using attribute selector using [class*="large-"] and so you don't need to use period(.) ie class selector here. Just simply write this
.button[class*="large-"] {
font-size: 0.9em;
color:red;
}
JS Fiddle Demo
.button[class*="large-"] {
font-size: 0.9em;
}
wide button
narrow button
narrow button
narrow button
this seems to work
Try this:
a.button[class*=large] {
font-size: 0.9em;
}
I'm confused about double ampersand behaviour in LESS compiler.
Look:
.heading {
&&--type-small {
font-size: 15px;
}
}
Will be compiled to:
.heading.heading--type-small {
font-size: 15px;
}
And thats good.
But.
.wrapper {
.heading {
&&--type-small {
font-size: 15px;
}
}
}
Will produce:
.wrapper .heading.wrapper .heading--type-small {
font-size: 15px;
}
It looks weird. No?
Is there any advice to make this code works like:
.wrapper .heading.heading--type-small {
font-size: 15px;
}
Thanks =)
What happens when you use an ampersand in a nested rule is that the default nested structure gets ignored in the output selector and the ampersand acts as a placeholder for the complete list of outer selectors and will just insert all the parent rules all the way to the top of the hierarchy (the "path" for all nesting levels above) ... no way around that.
So using the first one - & will just join (concatenate) the nested selector to the whole list of outer selectors (appearing as if it just added it to the parent selector) and act as a combinator - see "Nested rules" at lescss.org. But then when you use the second ampersand - your selector will end up including all outer rules once again - the .wrapper and all rules in between will be added twice now. So, the behavior is not really strange. See also my answer to this question: "How to refer to two previous elements / tags / classes with LESS?" and for some more functionality of & see also seven-phases-max's comments below. Or find some examples of & being used as a "path" placeholder under "Advanced Usage of &" at lescss.org.
And to your concrete example:
I am not completely sure why you want to repeat the word "header" in the class name .header--type-small, if you are using it in addition to a class called .header ... I would just use additional classes such as .type-small, like so:
.wrapper {
//style for the wrapper
.heading{
//general style for the heading
&.type-small {
//style for the heading with class .type-small
font-size: 15px;
}
&.type-large {
//style for the heading with class .type-large ... and so on
}
}
}
with output CSS:
.wrapper .heading.type-small {
font-size: 15px;
}
but if you really really need the whole long string with the repeated names for some particular reason ... you could just do something like this:
.wrapper {
//style for the wrapper
.heading {
//general style for the heading
&.heading--type{
&-small {
//style for the heading with class .type-small
font-size: 15px;
}
}
}
}
with output CSS:
.wrapper .heading.heading--type-small {
font-size: 15px;
}