Using Rails 4.
In my kc.scss file, which is the last one listed in application.scss, I have the following two classes, neither of which appear in any other scss file:
.kc-hilite {
color: #000;
background-color: #ffff00;
border-color: #000000;
}
.kc-wide {
width: 150px;
}
In my _buttons.html.erb partial, I have the following element:
<input name="commit" class="btn kc-wide kc-hilite" id="report" type="submit" value="Report Issue">
kc-wide works fine. The kc-hilite class is totally being ignored. If I copy it into the partial as a style, it works fine even unmodified. When it is accessed through the scss file, it doesn't seem to exist.
To debug this, I have tried it as an inline style, as I mentioned. I also changed its name. And, I listed it alone as a class in the element. Nothing made it work.
Looking in DOM Explorer, I see the following:
/*media all*/
.kc-wide {
width: 150px;
}
However, there is no entry for kc-hilite at all.
What simple issue am I blindly missing? Thanks...
I guess the issue would be with the compiled file. Could you check the compiled CSS file, and see if it contains the classes.
Related
I have Asp.net Core 5.0.1 app with multiple MVC views. I also have a CSS file, generated by an app. I want this file to be unmodified (as it will be changed in future using same app). I want separate CSS file, which styles certain elements (eg input or button) to be styled using classes from the generated CSS. I dont want to write class on each input or button etc element (there are 35 views needs to be styled).
For example if generated file has class dx-theme-text-color I want a CSS file which has something like input { color:.dx-theme-text-color}
How can I achieve this?
To clarify: the question is - how to use a class from one CSS in another by name not copy/pasting values etc
I can only think of #extend from SASS:
.dx-theme-text-color {
border: 1px solid red;
}
input, button {
#extend .dx-theme-text-color;
}
You can use css variables.
define css variavles in global scope:
:root {
--my-custom-color: #000;
}
use variables in every css file like this:
.my-element {
color: var(--my-costum-color)
}
You can also use css pre-proccesors like sass(scss), less and etc.
I am working on my first web dev project, with someone, and I am responsible for the front-end part. In my personal projects I've been using plain css, but in this template I have seen that they are using something else, a different structure, I think. I kind of figure it out how it works, but because I never crossed paths with it before, it makes developing hard for me. I would like to know what it is so I can read some documentation and understand it better. (as an example: usually ,when I use className, I put the class name between "", but here is like css.something) Can you tell me what it is ? I will leave a snippet here
.menuItem {
#apply --marketplaceListingAttributeFontStyles;
color: var(--matterColor);
/* Layout */
position: relative;
min-width: 300px;
margin: 0;
padding: 4px 30px;
display: flex;
align-items: center;
justify-content: center;
/* Override button styles */
outline: none;
text-align: left;
border: none;
white-space: nowrap;
cursor: pointer;
&:focus,
&:hover {
color: var(--matterColorDark);
}
&:hover .menuItemBorder {
width: 6px;
}
}
<button className={css.menuItem} onClick={()=> this.selectOption(queryParamName, option.key, dates)}>
This is CSS Modules and you can read more about this usage of CSS in these 2 links:
link1
link2
Although I'm not overly familiar with React, this (className={css.menuItem}) is some sort of model binding so that when React has done it's thing it will bind the value of css.menuItem to the rendered HTML probably ending up with something like
<button className=".menuItem" ...>
The Javascript format you see there is a view binding, or something we might describe as a Domain Specific Language (DSL). It is Javascript used by some framework (likely React or another frontend framework) to build the HTML you see on the page. I can't be certain since I don't know what framework I'm looking at, but I'm willing to bet that if you use the "inspect" feature in your browser, you will see this in the resulting HTML that is created by that Javascript:
<button class="menuItem" onClick="[...]">
This format should look familiar to you if you are expecting plain HTML. That Javascript you linked to just builds this HTML dynamically. In the example you provided, the curly braces ({ }) are just an indicator to the Javascript library that it need to fill in that placeholder with something, in this case css.menuItem, which translates to a class name of menuItem rendered into a css class tag (class="menuItem").
Have you looked into what that css object holds?
From what I can see, the #apply puts the css part to be in pre-compiled language like SASS or SCSS.
You have not mentioned if it is ReactJS. If it is then there is a high possibility that whatever you are dealing with is in JSS.
For some reason my Angular app doesn't use the styles I'm defining at my component's .less file. It simply ignore it.
As I am very newbie with CSS, I don't any way to debug it.
My layout is consisted by a lot of defined styles being imported by other less files. I am using trying to modify the style of a mapboxgl.
This is how the map current looks like:
And it's defined on HTML by:
<div eds-tile class="column xl-3">
<eds-tile-title>Location</eds-tile-title>
<eds-tile-actions>
<div class="action">
<eds-icon icon="maximize">
</eds-icon>
</div>
</eds-tile-actions>
<div class="map" id="map"></div>
</div>
On this component's less I have:
#import "~#eds/vanilla/variables/light";
#import (reference) "~#eds/vanilla/font/styles";
#import (reference, multiple) "~#eds/vanilla/variables/global";
#import "./map/map";
And on ./map/map.less I have a lot of theme stylization:
https://pastebin.com/b8CpakH9
My trouble is that there's some classes that are indeed being used by Angular, like this one:
.map {
min-height: 200px;
width: 100%;
height: 100%;
a {
color: #text;
}
}
But others are not, like this (you can see on image below that there's nothing related by that definition on browser's styles inspection):
.mapboxgl-ctrl-bottom-left {
display: none !important;
}
What is happening on my case?
I'm following another example that it's working fine. On the component.less file it uses:
#import (reference) "~#eds/vanilla/font/styles";
.dark {
#import "~#eds/vanilla/variables/dark";
#import (multiple) "./map/map";
}
.light {
#import "~#eds/vanilla/variables/light";
#import (multiple) "./map/map";
}
And the map.less file is the same except the by the min-height value.
The example:
You can clearly see that on this example it's using ".light .map {}" to set the style. Different that my case, that converts to ".map[_ng-content-c5] {}" for some reason. I don't have any clue of what this means.
Sorry by being so vague about the problem description. It's simply because I'm don't have enough experience even to name it.
I think I know what the problem is.
If you open your generated css file you see that there is no .mapboxgl-ctrl-bottom-left {
You will instead see something like: .mapboxgl-ctrl-bottom-left[_ngcontent...] {
That's how angular works, it adds some attributes to ensure a style only applies to one component.
You can control if styles are encapsulated or not with ViewEncapsulation
Most likely this happens because the content (in this case the map) is getting rendered with JS after the DOM is loaded and is not handled by angular itself, therefore it doesn't get the attributes.
Without any more information I can't help you any further since I don't know all the details. I don't know exactly which map you are using, maybe there is a tutorial on how to integrate it with angular somehow.
Description:
I just copy and pasted login page from other module and redesigned it.
Let's say structure is like below now:
HTML
login.html
login_redesign.html
CSS
login.css
login_redesign.css
I am including both css file in some global file in sequence of login.css first and login_redesign.css second.
Senario:
I am working on login_redesign.css
Now, to avoid my changes overriding login.css component (as I am loading login_redesign.css at last), I added
class = "new_login_page"
at top level element of login_redesign.html
login_redesign.html:
<div class = "main new_login_page">
<div>....
</div>
login.html:
<div class = "main">... </div>
Also, added that class in my login_redesign.css file as:
.new_login_page.main {
.header {
width:320px;
}
}
While, original page has as below:
.main {
.header {
width:1020px;
}
}
My concern is as follow:
What if in future if someone add back-ground color property in original css file i.e. login.css as below:
.main {
.header {
width:320px;
}
.body {
.background-color:orange // this line was there for both the codes
.leftHalf {
background-color:white; // new line added
}
}
}
It will give white color to my file's (login_redesign.html's) leftHalf part as well, because there is no background-color property defined inside .leftHalf in lgoin_redesign.css file.
How can I prevent this changes to my file?
One more level of complexity: both login.html and login_redesign.html are using css from root level file 'common.css' which is loaded even before login.css
With this added dependency, I want to block changes from login.html but not from common.css
Thank you for reading though the whole question and the answer may be really simple for this question as I am really just reading through stackoverflow to get my task done on css, which I have not worked with much.
In my Angular application, I have components pages like <app-page-home>, <app-page-login>, <app-page-documentation>, etc. that are mounted when required in my <router-outlet>.
I am trying to target all these components together from a global stylesheet (./src/styles.styl that applies everywhere in the application), but CSS doesn't seem to accept wildcards for custom tags.
I would like to avoid listing my tags one by one and instead, something like app-page-* { border : blue solid 1px; }
app-page-* {
border : blue solid 1px;
}
<app-page-login>Login stuff</app-page-login>
<br>
<app-page-documentation>Documentation</app-page-documentation>
I can't add classes (or can I?) because these component are being dynamically mounted by the router, otherwise I could obviously use something like class="page".
Any idea how to target custom tags with a wild card? Thanks
That's correct, css doesn't have partial type wildcards. Most easy solution is to just group them together, like this;
app-page-login, app-page-documentation { border: 1px solid blue; }
Or apply a class to them;
<app-page-login class="app-page" />
<app-page-documentation class="app-page" />
and target the class;
.app-page { border: 1px solid blue; }
You could do fancy stuff with attribute selectors, but imo for your use case the two solutions above are the most suitable.
-- edit; I see you can't add classes. Use the first solution then.