i added my theme as jar as described by the documentation.
now i want to add a menu-bar with a single entry for a user-menu.
But i have some trouble to create a custom css.
in the theme i import my base.css
#import url('./base.css');
#import url('lumo-css-framework/all-classes.css');
all styles are loaded, fine :)
then i add the shadow-tree css in my base.css
/* working */
vaadin-menu-bar{
border-radius: 0px;
background: aqua;
}
/* not working */
vaadin-menu-bar-button{
border-radius: 0px;
background: red;
}
/* not working */
vaadin-menu-bar [part="menu-bar-button"]{
background: yellow;
}
https://vaadin.com/docs/v14/flow/styling/styling-components
may be i did understand something wrong. Any help would great :)
so while using a JAR for the theme and the css belongs in
resource/META-INF/resources/themes/mytheme/base.css
i can use
vaadin-menu-bar.usermenu::part(menu-bar-button){
border-radius: var(--lumo-border-radius-m);
}
to set my custom style to the menubar with classname 'usermenu'
Related
I am working on custom styles for my Spartacus application and struggling with the order of the CSS rendered. Despite the order of imports in my styles.scss, my custom CSS rules are rendered in the middle of Spartacus default styling, forcing me to bump up the specificity of my rules to achieve desired results.
This is my styles.scss:
$styleVersion: 4.3;
#import '~#spartacus/styles';
#import './styles/custom/_index';
/* custom/_index.scss contains further imports of the actual styling */
and this is the snippet of the rendered CSS:
/* Spartacus defaults
...
*/
cx-wish-list-item .cx-return-button .btn-link:hover {
text-decoration: underline;
}
/* My custom code */
header .SiteLogo {
width: auto;
max-width: 150px;
}
/* Spartacus defaults continued */
cx-bulk-pricing-table table {
text-align: center;
}
/*
...
*/
Working with Spartacus 4.3 and Angular 12. My objective is to:
keep my custom code as simple and low-specificity as possible
be able to leverage Bootstrap and Spartacus variables and mixins in my SCSS
Is there a way to ensure my custom styles are rendered last, according to the imports order?
In the documentation they mention wrapping custom styles in the body tag in style.scss.
link here
Try wrapping your scss in the body tag. This worked for me.
body {
cx-wish-list-item .cx-return-button .btn-link:hover {
text-decoration: underline;
}
/* My custom code */
header .SiteLogo {
// width: auto;
width: 150px;
}
/* Spartacus defaults continued */
cx-bulk-pricing-table table {
text-align: center;
}
}
In order to control the order of styles, it is better to import the styles by yourself.
First, check the angular.json file (as there might be other Spartacus related style files) and keep only one styles file there:
"styles": [
"src/styles.scss"
],
Then, in styles file import all other styles in required order, e.g.:
#import '~#spartacus/styles/index';
#import './styles/custom/_index';
I'm trying to update Radio Button colors of an ant design radio mentioned in this link in my REACT App.
I tried using the suggestion in this post to update the colors.
But my colors are not updating. I am not sure what I'm doing incorrectly here.
Also, Its a REACT project and my package.json has a dependency for "antd": "^4.5.0"
and the import for antd.css exists in app.tsx like this
// Global styles
import "antd/dist/antd.css";
This is a code I have in one of the component files of the project.
File name: MyRadio.tsx
import { Radio } from "antd";
import styles from "./mystyles.module.scss";
return (
<Radio.Group
className={styles.toggle}
>
<Radio id="RDC" value="C">
C
</Radio>
<Radio id="RDI" value="I">
I
</Radio>
</Radio.Group>
);
Here is how mystyles.module.scss looks like:
.toggle {
width: 244px;
background: #ffffff;
border: 1px solid #d9d9d9;
box-sizing: border-box;
display: flex;
align-items: center;
float: left;
}
/* Followed suggestion from other post but didnt see colors updating, when I un-comment the following code
.ant-radio-checked .ant-radio-inner {
border-color: red !important ;
}
.ant-radio-checked .ant-radio-inner:after {
background-color: red;
}
.ant-radio:hover .ant-radio-inner {
border-color: red;
}
*/
Update 1
You need to override the below classes. It should work. Use !important only if your css is overridden by the existing classes.
You need to import "antd/dist/antd.css"; to get these in the console and then override the css
https://codesandbox.io/s/nameless-dream-4ojr4
.ant-radio-inner:after {
background: red !important;
}
.ant-radio-checked .ant-radio-inner,
.ant-radio:hover .ant-radio-inner,
.ant-radio-wrapper:hover,
.ant-radio-input:focus .ant-radio-inner {
border-color: red !important;
}
Edit - Included the codesandbox link and the hover css
I can not write comment (too low reputation), so i will write an "answer". You can try to change theme of ant-design https://ant.design/docs/react/customize-theme (This default blue color is primary one). However it requires some changes and new color will be applied globally, so its not too good for existing big projects.
I'm trying to use CSS Custom properties in my Angular 7 app but am running into issues where building down to css gets rid of the property that is set to a CSS variable.
SCSS
:root {
--my-test-var: red;
}
.testclass123 {
height: 150px;
background: var(--my-test-var);
}
Builds down to:
:root {
--my-test-var: red;
}
.testclass123 {
height: 150px;
}
If I use a fallback options like var(--my-test-var, purple); then .testclass123 will also have property background: purple;
My Angular version is 7.2.7 and Angular Material 7.3.7
If you use SCSS as global style you can define like this the color.
This is the best approach.
$product: red;
And then only you call when you need like this.
background-color: $product;
I'm trying to change the style of the md-dialog.
in my main.scss i'm importing the prebuild pink-bluegrey theme...
then in my component I import the following -->
#import "#angular/material/dialog/dialog.scss";
$mat-dialog-padding: 0;
$mat-dialog-border-radius: 0.5rem;
$background: #ffffff;
#mixin mat-dialog-container {
padding: $mat-dialog-padding;
border-radius: $mat-dialog-border-radius;
background: $background;
}
#include mat-dialog-container;
The padding and border radius is correctly applied to the dialog window.
But the background is not working... also tried the !important statement.
I'm using this in a single component...
Is there also a change to apply those styles globally?
in chrome dev tools I see those applied style changes. The background gets overwritten by the pink-bluegrey theme..
hope anyone can help.
thanks
It is better practice to add a wrapper class around your dialog, and then add styling to the children. Have a look at this article for more information.
When you open your Angular dialog, you can add a panelClass
attribute, like this:
this.dialog.open(MyDialogComponent, {panelClass: 'my-panel'}).
then, in your css (e.g. in the root styles.css file), you can add the following:
.my-panel .mat-dialog-container {
overflow: hidden;
border-radius: 5px;
padding: 5px;
}
EDIT Warning
It is also possible to add the css to another file than the root styles.css, but then you have to use ::ng-deep in the css (e.g. ::ng-deep .my-panel{ // ... }). This is not advised, as ::ng-deep is deprecated in Angular
EDIT2 Good alternative
If you are using scss, then you can place your .my-panel-style in your mydialog.component.scss file, by using a #mixin, and #import the file in styles.scss. You can then use #include to load the defined mixin.
in your mydialog.component.scss file
#mixin myPanel(){
.my-panel .mat-dialog-container {
// css here
}
}
in your styles.scss
#import 'path/to/mydialog.component.scss' // you don't need the .scss suffix
#include myPanel();
I solved this problem by including this css block in the end of file material2-app-theme.scss
.mat-dialog-container {
overflow: hidden !important;
border-radius: 5px !important;
padding: 5px !important;
}
can you use css then change background in mat dilog, at i used color transparent
mat-dialog-container {
padding: 0px !important;
background: transparent !important;
}
I use GWT 2.1.1
In package resources i have png images and one css file.
In css file i wrote:
.finishedTask {
background: white url("tick64.png") center center;
padding: 0.5em;
border: 0;
}
.unFinishedTask {
background-color: white;
padding: 0.5em;
border: 0;
}
Than i create ClientBundle interface extension. With this CSS and images.
Than in UiBunder view i try to change css style:
textArea.setStyleName(isFinished() ? res.style().finishedTask() :
res.style().unFinishedTask());
When this code executed css layout of textArea are broken but i see that class changed (FireBug). Seems bug in css.
Maybe somebody already tried do the same thing.
Probably you should use addStyleName or addStyleDependentName instead of setStyleName which remove existing styles.