I have a list of buttons that look like this:
<button class="PatientImage-button"> <img src="1"> </button>
<button class="PatientImage-button"> <img src="2"> </button>
<button class="PatientImage-button"> <img src="3"> </button>
<button class="PatientImage-button active"> <img src="4"> </button>
<button class="PatientImage-button"> <img src="5"> </button>
And the highlighting is done through a css style border-color: #000000.
Clicking the button calls an event which updates the button's class to include active. Also hovering and focusing on the button should do that too.
I'm trying to get the sass selectors correct so that I don't have to write border-color: #000000 twice in the file. Here's what works:
.PatientImage {
&-button {
padding: 2px;
&:hover, &:focus {
border-color: #000000;
}
}
}
.active {
border-color: #000000;
}
Is there a way with Sass selectors I can do something like this? (doesn't work)
.PatientImage {
&-button {
padding: 2px;
&:hover, &:focus, .active {
border-color: #000000;
}
}
}
Try below code:
.PatientImage-button{
padding: 2px;
&:hover, &:focus,&.active{
border-color: #000000;
}
}
Related
I am trying to create a basic CSS template for a project. It needs to support both a light and dark mode.
In the html, the body tag has data-layout-color attribute. I have some toggles that allow switching between light and dark, and it is updating this attribute. In my CSS sheet, I use the attribute selector for background color, and it works! Now I need to be able to set other elements color based on the light/dark mode, but that's not working as the individual element doesn't have the attribute. I don't want to add data-layout-color to everything, and then have to update it all with my js. Any suggestions?
HTML:
<body ng-controller="myApp" data-layout-color="dark" data-layout="topnav">
<button type="button" class="btn btn-primary">PRESS ME!</button>
</body>
CSS:
body[data-layout-color="dark"]{
background-color: var(--my-body-dark-bg);
}
body[data-layout-color="light"]{
background-color: var(--my-body-light-bg);
}
.btn-primary[data-layout-color="light" {
color: var(--my-white-light);
background-color: var(--my-primary-light);
border-color: var(--my-primary-light);
}
.btn-primary[data-layout-color="dark" {
color: var(--my-white-dark);
background-color: var(--my-primary-dark);
border-color: var(--my-primary-dark);
}
You could write your selectors such that the attribute selector remains on body:
/* primary button under a "light" layout parent */
[data-layout-color="light"] .btn-primary {
color: var(--my-white-light);
background-color: var(--my-primary-light);
border-color: var(--my-primary-light);
}
But I think a better idea would be to change the custom property values so you don't need the theme-specific selectors on child elements in the first place:
[data-layout-color="dark"] {
--button-color-bg: white;
--button-color-fg: black;
}
[data-layout-color="light"] {
--button-color-bg: black;
--button-color-fg: white;
}
.btn-primary {
background-color: var(--button-color-bg);
color: var(--button-color-fg);
display: inline-block;
padding: 0.25em 1em;
border: 1px solid grey;
margin: 0.5em;
}
<div data-layout-color="dark">
<div class="btn-primary">Dark Body</div>
</div>
<div data-layout-color="light">
<div class="btn-primary">Light Body</div>
</div>
With plain css you can write it like this
body[data-layout-color="dark"]{
background-color: var(--my-body-dark-bg);
}
body[data-layout-color="dark"] .btn-primary{
color: var(--my-white-dark);
background-color: var(--my-primary-dark);
border-color: var(--my-primary-dark);
}
body[data-layout-color="dark"] .btn-primary a{
text-decoration: underline overline #FF3028;
}
I suggest you use scss though. It will make your life easier. If you'r using visualstudio code just download Live sass complier and click watch sass in the bottom right corner.
Using scss you would write it like this:
body[data-layout-color="dark"]{
background-color: var(--my-body-dark-bg);
.btn-primary{
color: var(--my-white-dark);
background-color: var(--my-primary-dark);
border-color: var(--my-primary-dark);
a{
text-decoration: underline overline #FF3028;
}
}
.btn-secondary{
color: var(--my-white-dark-secondary);
background-color: var(--my-primary-dark-secondary);
border-color: var(--my-primary-dark-secondary);
}
p{
color: var(--my-white-dark);
}
}
body[data-layout-color="light"]{
background-color: var(--my-body-light-bg);
/*etc etc*/
}
I have the following radio button from angular material, and I want to apply some CSS when it has been selected, but the CSS is not working, and I do not know why
however, the :hover works perfectly fine
I have provided both HTML and CSS
could you please help me with this?
.things {
&:focus {
background-color: red;
}
&:hover {
.thing-name {
color: #9c27b0;
}
}
}
<mat-radio-button class="things" *ngFor="let thing of things" [value]="thing.name">
<span class="thing-details">
<img class="thing-image" [src]="thing.logo" [alt]="thing.name" />
<h4 class="thing-name text-center mt-3 pt-3">{{ thing.name }}</h4>
</span>
</mat-radio-button>
I just figured it out.
the following code will both hide the circle of the radio button and changes the color of another element on its selection
::ng-deep.mat-radio-button.mat-accent.mat-radio-checked {
span .thing-name {
border: 1px solid #ffffff !important;
background-color: #28a745 !important;
}
}
// the bellow are for deleting the circle from the radio buttons
::ng-deep .mat-radio-button .mat-radio-container {
width: 0;
}
::ng-deep .mat-radio-container .mat-radio-outer-circle,
::ng-deep .mat-radio-container .mat-radio-inner-circle {
border: none;
width: 0;
}
I want to simplify my code and I was wondering if there is a way to tell CSS to effect it's children elements according to what the parents attributes are.
(Maybe this statement is too broad, below you can see more specifically what I'm trying to accomplish)
#blueBtn {
background-color: #00f;
color: white;
border-color: #00f;
}
#blueBtn:disabled {
background-color: #33f;
color: gray;
border-color: #33f;
}
#greenBtn {
background-color: #0f0;
color: white;
border-color: #0f0;
}
#greenBtn:disabled {
background-color: #393;
color: #aaa;
border-color: #393;
}
I want a way to add 3 to each number that is 0 when the button is enabled. For example, if I had a redBtn it's colors would be #f00 and when disabled #f33.
That way I would only need one selector (button.disabled) to affect any color button.
effect it's children elements according to what the parents attributes are
That's just how CSS works (Cascading Style Sheets). But what you are trying to do is get the actual value. So no, not directly in the way you are thinking (as in have access to the computed value). There are a few ways around this but one solution is to take advantage of a variable. This wouldn't work with all property value pairs, but I think this scenario is a good fit. All I did was turn down the lightness for their hsl value:
.redBtn {
--color: 0;
background-color: hsl(var(--color), 100%, 50%);
}
.blueBtn {
--color: 255;
background-color: hsl(var(--color), 100%, 50%);
}
.greenBtn {
--color: 100;
background-color: hsl(var(--color), 100%, 50%);
}
[disabled] {
background-color: hsl(var(--color),100%, 30%);
color: #aaa;
}
button { width: 150px; height: 75px; color: white; }
button:active { border: 3px solid cornflowerblue; }
<button class="redBtn" disabled>Disabled Red Button</button>
<button class="blueBtn" >Blue Button</button>
<button class="greenBtn" >Green Button</button>
<button class="greenBtn" disabled>Disabled Grn Button</button>
<button class="redBtn" >Red Button</button>
<button class="blueBtn" disabled>Disabled Blue Button</button>
<button class="redBtn" disabled>Disabled Red Button</button>
<button class="blueBtn" disabled>Disabled Blue Button</button>
<button class="redBtn" >Red Button</button>
<button class="greenBtn" disabled>Disabled Grn Button</button>
<button class="greenBtn" >Green Button</button>
<button class="blueBtn" >Blue Button</button>
Edit: Not sure how cross-browser compatible this is, as always, check IE :)
I use several menus for my app and I use angular material mat-menu component for this. I can change the style of all menus by writing css code in my global css file for menu original classes. but when I want to add some specific styles to one of them using .custom-class-name .original-material-class-name{} it doesn't apply those styles to that one menu.
here's the whole app in stackblitz: app
header.component.html:
<div>
<a mat-button class="theme-menu-toggle-button" *ngIf="!menuAvailable"
(click)="changeSidenavMode(!mode)">
<mat-icon>menu</mat-icon>
</a>
<a href="#" fxHide.lt-md fxShow.gt-sm class="theme-user" mat-button
[matMenuTriggerFor]="menu">
<img src="assets/images/user.png" class="theme-profile-image rounded-circle">
<span class="theme-profile-title">نام نامخانوادگی</span>
</a>
<mat-menu #menu="matMenu" class="profile-menu">
<button mat-menu-item *ngFor="let option of profileOptions">
<mat-icon>{{option.icon}}</mat-icon>
<span>{{option.title}}</span>
</button>
</mat-menu>
styles.css:
.profile-menu .cdk-overlay-pane::before{
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 15px solid #5E35B1;
content: " ";
position: absolute;
top: 10px !important;
animation: fadeInRightBig 0.75s;
}
Simply set whatever class you want on the mat-menu element.
<mat-menu #menu="matMenu" class="providers-menu" xPosition="after" yPosition="below">
...
</mat-menu>
You can style the menu in your component by using ::ng-deep
::ng-deep .mat-menu-panel.providers-menu {
margin-top: 65px;
background-color: #263358;
}
For more information see this github issue:
https://github.com/angular/components/issues/10322
Add custom class in the mat-menu in backdropClass:
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" backdropClass="custom__menu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
.custom__menu + * .cdk-overlay-pane > div.mat-menu-panel > div.mat-menu-content {
background-color: #777;
button.mat-menu-item {
color: white;
}
}
Add your stylings to header.component.css, and import it in your page:
#Component({
selector: 'my-selector',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
UPDATE: You need to add !important tags at end of your css tags.
.profile-menu .cdk-overlay-pane::before{
width: 0 !important;
height: 0 !important;
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-bottom: 15px solid #5E35B1 !important;
content: " " !important;
position: absolute !important;
top: 10px !important;
animation: fadeInRightBig 0.75s !important;
}
you should use id for html tag and use it in css file
What do you mean?
I am making a set of buttons for my site, and I am in need of some professional insight.
In order to reduce CSS bloat, I want to subclass my buttons for different colors, ex .button.blue .
Will the following incur issues in the future? (assuming I don't make a class of just .blue)
Do I have to use something like .button.button-blue instead?
.button {
display:inline-block;
padding: 9px 18px;
margin: 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
background: #FFE150;
}
.button.blue {
background: #49b8e7;
border:1px solid #54abcf;
border-bottom:1px solid #398fb4;
color:#FFF
text-shadow: 0 1px 0 rgba(255,255,255, 0.5);
}
.header{
height: 50px;
}
.header.blue {
background: blue;
color: #fff;
}
What you have there with the multi-classes will work fine assuming you want them to work like so:
<div class="button blue">
Will use .button and .button.blue
</div>
<div class="button">
Will only use .button
</div>
<div class="header blue">
Will use .header and .header.blue
</div>
<div class="header">
Will only use .header
</div>
<div class="blue">
Will use neither of the .blue declarations because it doesn't contain header or button.
</div>
A selector like .button.blue actually selects for an element with that has both "blue" and "button" as classes, not a class called .button.blue. See http://www.w3.org/TR/CSS21/selector.html#class-html.
You can use the .button.blue style rule you have listed, but you'll need to rearrange your HTML so that you have something like <button type="button" class="button blue"/>. However, you don't really need to have a button class since it being a button (or <input type="submit">, etc.) is enough to use in your selector. You could write a CSS rule that is simply button.blue, input[type=submit].blue{}
Seems like button.blue is enough.
The only difference between the two is if you use <button class="button blue">, or <button class="button button-blue">.
You even don't need to duplicate the painting in blue... You can just do something like this:
.button
{
// button style
}
.header
{
// header style
}
.blue
{
background: blue;
color: #fff;
}
Of course if you add the blue class to each of them. (<div class="header blue">and<button class="button blue">)
Combine the classes applying the color you want to theme.
HTML:
<input type="text" class="text-field-required default" .../>
<select class="autocomplete-drop-down blue">...</select>
<a href="#" class="button-link green" .../>
CSS:
.text-field-required {
//component css theme without colors
}
.default {
//default color css theme for any component
}
.blue {
//blue css theme for any component
}
.green {
//green css theme for any component
}