I have mi en place in my application an angular theme with scss variables that are in a separate file. Here are some variables :
font-family: map-get-value($map, primary-font-family);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-40);
line-height: var(--line-spacing-33);
letter-spacing: var(--character-spacing-0);
color: var(--text-color) !important;
I call my variable file in my scss style file :
#import "assets/scss/cerba/variables";
And I use my variables as that :
font-size: var(--font-size-10);
color: var(--text-color-medium);
I try to create a second variable file to put different colors on it for the same keys as my existing one and according to a variable in my angular code put in place this or that variable file. Is it possible
I am trying to edit the color of inside text of an ion select when i pick an option, but once i edit the shadow part in the component, the rest of the ion selects (in other components) are taking this change. I just want to encapsulate this color change, but i can not without editing the shadow part and affecting the rest as they have different colors.
I have tried to put them in different css files but i doesnt work of course.
Example, i have an ion select in a component with this css
ion-select::part(text){
font-weight: 900;
color: white;
}
but it gets overwritten with the css of another component that i edit
ion-select::part(text){
font-weight: 900;
color: #c00000;
}
Any help with CSS shadow parts it's appreciate it
For anybody trying to aim a shadow part inside a class selector, this is the right way to do it. In this example, "selector-red" would be the class name in the ion-select component
ion-select.selector-red::part(text){
font-weight: 900;
color: #c00000;
}
What should I write into scss file to set font-weight: bold; for the innner content of the component (so that the inner tags inherit it)?
using
:host {
font-weight: bold;
}
does this work but it makes it for the component tag itself as well.
What's the best technique in this case?
Also, I would avoid to stick with using div, p, span or whatever tag is a child of the component tag.
Thank you.
You can use the universal selector. Inside your component .scss place:
* {
font-weight: bold;
}
The angular compiler will add the content host tag to the selector, which will result in something like *[_ngcontent-uch-c0].
Using the wildcard could have some performance impact though, so use carefully
You can turn off encapsulation of the component
#Component({
...
encapsulation: ViewEncapsulation.None
})
Take care if you do this then all global style could apply on the DOM inside of your component.
I suspect this is more of a LESS question and may not be specific to Ant Design other than the way they implemented some of their components is preventing me from overriding or extending the styles.
Specifically, I want to change the font size and weight for the title area of the PageHeader component. Unfortunately, the component's style does not use the LESS variables defined in the default.less theme for these two settings. The source code can be found here: https://github.com/ant-design/ant-design/blob/master/components/page-header/style/index.less
I have no issues changing the color, for instance, or any other variables defined in the theme but I am new to LESS and not sure how to go about overriding the styles defined for an individual component like this. Oh, and I don't want to use inline styles. We use this component in many places in our application, so I want to define the overrides in one place, once and have them be global for the application (like I can do with the theme variables).
So, how do I override the font-weight and font-size styles defined on lines 45 and 46 of the referenced file?
Here an example of how I have done it in my project:
Using .css file
Override the CSS class by .css/.scss and so on:
// Main layout where all antd componets used.
import './MyLayout.css';
/* MyLayout.css */
.ant-tooltip-inner {
background-color: white;
color: black;
}
Here I reversed all tooltips (default are black).
Using Styled-Components
Same like above just as CSS-JS:
const LayoutStyled = styled(Layout)`
height: 100vh;
* {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.ant-layout-sider-light .ant-layout-sider-trigger {
border-right: 1px solid ${HCOLOR.border};
}
`;
Here I overrode all fonts and added the right border to antd sider trigger (default no border).
Conclusion
Find the css-class / css-property with dev-tools (Ctrl+Shift+C in Chrome) and override it as you like.
Use less files to apply the styling as mentioned in the antd docs here.
If I want to limit font family usage across my site, say to 2 or 3 font different typefaces (e.g. Times, Arial, etc). Is there a way I can organize my CSS so that I have something like
fontType1 is font-family: "Times New Roman", Times, serif;
fontType2 is font-family: Arial, sans-serif
Then for each of my UI elements that I style in the CSS, pick from the available font types, i.e. fontType1, fontType2. Likewise for my set of color choices.
If I change the font-family of fontType1, I want it go all the way across the site/stylesheet. I don't want to have to go into each css declaration and change it. If I want to change one of my site's "dark colors", I want it to go all the way across the site; I don't want to go into each usage of it and change it.
If I understand your issue correctly, the best way (without using a preprocessor) would be:
h1,h2,h3,h4,h5,h6,
.button, .promo{ /* Your list of selectors that need to use this font stack */
font-family:one;
}
p,ul,
.small-print,.error{ /* Your list of selectors that need to use this font stack */
font-family:two;
}
#nav,#footer{ /* Your list of selectors that need to use this font stack */
font-family:three;
}
This doesn't rely on JS, it won't bloat your HTML, and the best thing is that you can update all instances at once :)
This way you only need to add new selectors to your list, and don't have to redefine your families. Have that in a 'Shared' section. I write about it here: http://coding.smashingmagazine.com/2011/08/26/writing-css-for-others/ (do a find for 'Shared').
H
There's no way to do this directly with CSS but it's one of the major features of libraries such as Sass, LESS, and Compass. LESS can be compiled by server-side or client-side Javascript, and Sass is compiled with Ruby. Compass is a library that allows compiling Sass outside the context of a Rails or Ruby web app.
Here's an example of what you can do with Sass:
$color: #4D926F;
#header {
color: $color;
}
h2 {
color: $color;
}
And the CSS that it's compiled into:
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
In addition to variables, as shows above, you also get mixins (which are basically functions) and nested selectors.
Have something like so:
.font-type1 { font-family: font1, font2, font3; }
.font-type2 { font-family: font4, font5, font6; }
.font-type3 { font-family: font7, font8, font9; }
And set them on the <body> element.
If you wish to dynamically change it with JavaScript:
HTML
<a class=changefont data-font="font-type1" href=#>Font 1</a>
<a class=changefont data-font="font-type2" href=#>Font 2</a>
<a class=changefont data-font="font-type3" href=#>Font 3</a>
JavaScript
And with javascript (I'm using jQuery for simplicity, can be done with js alone too)
$('.changefont').click(function() { $('body').removeClass().addClass($(this).data('font')); });
Here's an Example!
By changing a higher level ancestor class, you cause a nice cascade (Cascading Style Sheet) over the entire document.
Another way of doing this is adding some classes to UI elements.
CSS:
.fontType1 {font-family: "Times New Roman", Times, serif}
.fontType2 {font-family: Arial, sans-serif}
HTML:
<h1 class="fontType1">Header 1</h1>
<p class="someOtherCssClass fontType2">paragraph text goes here</p>