<button _ngcontent-pse-c676="" mat-icon-button="" class="mat-focus-indicator setting_button mat-icon-button mat-button-base ng-star-inserted mat-button-disabled" ng-reflect-disabled="true" disabled="true">
css
.setting_button { float: right; margin-right: 8px; bottom: 10px; }
how i change the button color if the status is disable?
thanks
Use css disabled pseudo-class:
.setting_button:disabled {
background-color: red
}
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 have a fab list with fab buttons that shall have labels.
I found Fabs With Labels In Ionic 3 & whats the correct way of inserting label in an Ionic FAB list.
My HTML code is:
<ion-fab left top>
<button ion-fab color="light">
<ion-icon name="menu"></ion-icon>
</button>
<ion-fab-list side="bottom">
<button ion-fab>
<ion-icon name="person"></ion-icon>
<ion-label>Test Test Test</ion-label>
</button>
<button ion-fab>
<ion-icon name="alarm"></ion-icon>
<ion-label>Bla Bla</ion-label>
</button>
</ion-fab-list>
</ion-fab>
CSS
button[ion-fab] {
overflow: visible;
position: relative;
ion-label {
display: inline-block;
position: absolute;
top: -8px;
left: 60px;
color: white;
background-color: rgba(0,0,0,0.7);
line-height: 24px;
padding: 4px 8px;
border-radius: 4px;
pointer-events: auto;
}
contain: layout;
}
But the labels break the text to a newline if i don't specify a width.
If i do the labels don't adjust their width to the label's content.
How do i make the label content not wrap to a new line?
Issue originated from
ion-label {
white-space: normal !important;
}
from my app.scss
I have create a demo in ionic 3. You can check it:
Try this:
Stackblitz - Ionic 3 Fab button Demo Link
Just wondering if a div can be called without using javascript.
such as
my_div:hover{ add new layout}
is there a version for click eg
my_div:click{add new layout}
Thanks
Yes, if you add tabindex="0" to your div, you make it clickable and can then use the :focus pseudo-class to apply styles.
<div class="clickable" tabindex="0"></div>
.clickable {
height: 100px;
background: blue;
}
.clickable:focus {
background: red;
}
Codepen example. Clicking the div should give it focus and apply the :focus CSS to it. Clicking away from it will unfocus (blur) it and reset the default styles.
Not directly, but you can fake it using checkboxes:
input[type=checkbox] {
display: none;
}
.content {
display: none;
padding: 20px;
background-color: #dadada;
}
input[type=checkbox]:checked+label+.content {
display: block;
}
<input type="checkbox" id="check">
<label for="check">Click me</label>
<div class="content">
<h3>Content</h3>
<p>lorem20</p>
</div>
I am trying to show an edit icon on a cells hover state, using font awesome.
How can make the class name unique so I can target it with css for each row?
import {Icon} from 'react-fa'
if(this.props.day.achievements) {
listItems = this.props.day.achievements.map((achievement) => (
<div className="cell" key={achievement + "_achievements"}>
{achievement}
<div className="edit">
<a href="#">
<Icon name="pencil-square" className="edit" />
</a>
</div>
</div>
))
}
I am using the following css:
.cell:hover .edit {
display: block;
}
.edit {
padding-top: 7px;
padding-right: 7px;
position: absolute;
right: 0;
top: 0;
display: none;
}
.edit a {
color: #000;
}
How can I display the icon for each cell?
Since you're using position:absolute on the edit wrapper, try adding position:relative to the .cell. I suspect your icons ARE showing but they're all floating up to the top overlapping with each other.