I need to implement this statement in Sass or CSS:
IF :host.form-control IS .ng-valid[required] OR .ng-valid.required
THEN
:host ::ng-deep input.form-control = border-left: 5px solid #42A948;
Thanks
This is not an 'Angular' question,
by the way you can try this
*:host {
$self: &;
&.ng-valid[required], &.ng-valid.required {
#{$self}::ng-deep input.form-control {
border-left: 5px solid #42A948;
}
}
}
Related
I am trying show the ngx-datatable data on print view, But Table data CSS is not working properly.So How to resolve this issue.
app.component.css:
#media print {
:host ::ng-deep .datatable-body-cell {
padding: 10px !important;
border: 2px solid #000;
}
:host ::ng-deep .datatable-body-cell-label {
background-color: #ccc;
}
:host ::ng-deep .datatable-header-cell {
background-color: #ccc;
border: 2px solid #000;
}
}
app.component.ts:
printView() {
var tblData = document.getElementById("tblData");
var win = window.open("", "", "height=700,width=700");
win.document.write(tblData.outerHTML);
win.document.close();
win.print();
}
Demo: https://stackblitz.com/edit/angular-ngx-datatable-z1v7vy?file=app%2Fapp.component.scss
Is there a way to use SASS/CSS to set a style for an element that has a common class as well as another. For example, I would like the border to appear for elements that are either:
<div class="plate eggs"></div>
<div class="plate bacon"></div>
but not:
<div class="plate"></div>
The code I have at the moment but I'm sure there's a way to combine the two rules?
.plate {
border: none;
&.eggs {
border: 1px solid red;
}
&.bacon {
border: 1px solid red;
}
}
SCSS:
.plate {
border: none;
&.eggs,&.bacon {
border: 1px solid red;
}
}
SASS:
.plate
border: none
&.eggs,&.bacon
border: 1px solid red
You can validate your styles in sassmeister.
Why not add another class ? But if that's not the case, I'd use :not([class]) . Ormaybe even further, you can consider using div[class^="eggs"]
Below is my scss code, it gives expected output. But I feel it looks dirty that the -nrb repeats in both __red and __green, is there a way to simplify this?
$cell-header: '.cell-header';
#{$cell-header} {
&__red {
#extend .ui-grid-column-menu-button;
color: $red-cell-color;
background-color: $red-cell-bgcolor;
border: solid 1px $red-cell-color;
// no right border
&-nrb{
#extend .cell-header__red;
border-right: none;
}
}
&__green {
#extend .ui-grid-column-menu-button;
color: $green-cell-color;
background-color: $green-cell-bgcolor;
border: solid 1px $green-cell-color;
// no right border
&-nrb{
#extend .cell-header__green;
border-right: none;
}
}
}
Also, what is the correct way of extending the underlying class? Right now I have hard-coded the class name in #extend in -nrb, some keywords like this
You can group red and green:
$cell-header: '.cell-header';
#{$cell-header} {
&__red {
color: $red-cell-color;
background-color: $red-cell-bgcolor;
border: solid 1px $red-cell-color;
}
&__green {
color: $green-cell-color;
background-color: $green-cell-bgcolor;
border: solid 1px $green-cell-color;
}
&__red, &__green{
#extend .ui-grid-column-menu-button;
// no right border
&-nrb{
#extend .cell-header__green;
border-right: none;
}
}
}
I guess you could do some thing like this
$cell-header: '.cell-header';
#mixin headermixin ($cell-color, $cell-bgcolor) {
#extend .ui-grid-column-menu-button;
color: $cell-color;
background-color: $cell-bgcolor;
border: solid 1px $cell-color;
}
#{$cell-header} {
&__red {
#include headermixin($red-cell-color,$red-cell-bgcolor,.cell-header__red)
&-nrb{
#extend .cell-header__red;
border-right: none;
}
}
&__green {
#include headermixin($green-cell-color,$green-cell-bgcolor,.cell-header__green)
&-nrb{
#extend $cell-header__green
border-right: none;
}
}
}
Hope this helps
Thanks
I have the following LESS:
button {
background: #eee;
border: 1px solid #BBB;
color: #000;
&:hover:not(.nohover) {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
&.correct {
background-color: #00ff00;
border: 1px solid #00ff00;
}
&.incorrect {
background-color: #ff0000;
}
&.current {
background-color: #000;
border: 1px solid #000;
color: white !important;
}
}
I'm confused about how to add multiple additional classes. How can I make it so that if the button has a class of current and correct that the text color will be #00ff00 and if the classes are current and incorrect the text color will be #ff0000?
With LESS you can use the & selector to keep stacking class selectors to the same element.
button {
&.current {
background-color: #000;
border: 1px solid #000;
color: white !important;
&.correct {
// add CSS here for button.current.correct
}
&.incorrect {
// add CSS here for button.current.incorrect
}
}
}
Alternatively if you don't like the deeper nesting:
button {
&.current.correct {
// add CSS here for button.current.correct
}
&.current.incorrect {
// add CSS here for button.current.incorrect
}
}
I'm trying to apply what I learned in the CSS foundation course (codeschool) to style my d3 objects and so far I'm not getting it right.
I have a bunch of CSS classes which style my charts. I have two types of charts, for the second type I need to override one color.
Main CSS (I didn't create this myself)
.horizon {
border-bottom: solid 1px #000;
overflow: hidden;
position: relative;
}
.horizon {
border-top: solid 1px #000;
border-bottom: solid 1px #000;
}
.horizon + .horizon {
border-top: none;
}
.horizon canvas {
display: block;
}
.horizon .title,
.horizon .value {
bottom: 0;
line-height: 30px;
margin: 0 6px;
position: absolute;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
white-space: nowrap;
}
.horizon .title {
left: 0;
}
.horizon .value {
right: 0;
}
Override CSS (For my second type I needed a different color)
(This used to be the first file with changing all horizons to horizon_small which is bad I know.)
.horizon .horizon_small {
border-top: solid 1px #bdbdbd;
border-bottom: solid 1px #bdbdbd;
}
Applying this here:
d3.select("#mychart")
.selectAll(".horizon")
.data(data).enter().insert("div", ".bottom")
.attr("class", ["horizon", "horizon_small"]) // used to be "horizon_small" only
but it doesn't work, not sure where the problem is.
Many things were wrong I went back to my css notes from the tutorial
(1) in the css file, the following means apply horizon_small if the parent is horizon
.horizon .horizon_small {
border-top: solid 1px #bdbdbd;
border-bottom: solid 1px #bdbdbd;
}
while the following means apply both horizon and horizon_small (which is the correct version)
.horizon.horizon_small {
border-top: solid 1px #bdbdbd;
border-bottom: solid 1px #bdbdbd;
}
Next, thanks to the answers/comments, the d3 part should be like the following:
d3.select("#mychart")
.selectAll(".horizon .horizon_small")
.data(data).enter().insert("div", ".bottom")
.attr("class", "horizon horizon_small")
The selector ".horizon .horizon_small" targets an element with a class "horizon_small" inside (at some level) some other element with class "horizon". If you want to only target elements with both classes, the selector should be ".horizon.horizon_small".
source : http://www.w3.org/TR/CSS2/selector.html#class-html