I have a changed the appearance of a checkbox from "Regular" to "Switch" in Google App Maker. I would now like to change the appearance of the knob when the it is pushed from blue to green. How can I do that? The following CSS style is not working:
.app-Checkbox-Input:checked, {
background-color: green;
}
I would also like to put the label on the left side of the checkbox, if possible.
To customize the switch we need to customize the knob itself and the oval area behind it (2 things), and once we override styles for checked state we also need to redefine styles for its unchecked state (2 states). What gives us 2x2=4 custom styles. We also have multiple ways how to implement styles: override them individually for every widget, customize built-it AM style, implement all-new style from scratch or extend AM built in style using CSS class. I will not cover all these options in this answer this time, but let's start at least with something:
Styles for individual widget:
/* Styles for Checkbox widget on the page NewPage with name
GreenSwitch */
/* Recolor knob's checked state */
.app-NewPage-GreenSwitch-Label::after {
background-color: green;
}
/* Recolor knob's unckecked state */
.app-NewPage-GreenSwitch>.app-NewPage-GreenSwitch-Input:checked+.app-NewPage-GreenSwitch-Label::after {
background-color: red;
}
/* Recolor back oval checked state */
.app-NewPage-GreenSwitch-Input {
background-color: rgba(0, 128, 0, 0.4);
}
/* Recolor back oval unchecked state */
.app-NewPage-GreenSwitch-Input:checked {
background-color: rgba(128, 0, 0, 0.4);
}
Recolor all checkboxes with Switch style variant
.app-Checkbox--Switch>.app-Checkbox-Label::after {
background-color: green;
}
.app-Checkbox--Switch>.app-Checkbox-Input:checked+.app-Checkbox-Label::after {
background-color: red;
}
.app-Checkbox--Switch>.app-Checkbox-Input {
background-color: rgba(0, 128, 0, 0.4);
}
.app-Checkbox--Switch>.app-Checkbox-Input:checked {
background-color: rgba(128, 0, 0, 0.4);
}
Result
Related
I'm trying to change the Dialog background
without touching the style.css file.
As some other answers tell, there are many ways to set the Dialog style:
1- This solution works for width and height but the transparent background is "ignored".
this.dialog.open(DialogComponent, {
disableClose: true,
width: "100%",
height: "100%",
panelClass: "myClass",
});
.myClass{
background-color: transparent !important;
max-width: none !important;
}
2- You can also use ::ng-deep like this:
In this case the background color gets set to transparent but all the Dialogs aquire this property and I don't want that to happen
::ng-deep mat-dialog-container {
background-color: transparent !important;
}
For what I saw the panelClass: "myClass" option overrides this class cdk-overlay-pane
Meanwhile what I need to override is mat-dialog-container without compromising other dialogs.
Is there a way to do that without compromising the other Dialogs?
Use host in your component style-sheet, with that, you only modify the styles for that particular component:
:host ::ng-deep mat-dialog-container {
background-color: transparent !important;
}
UPDATE
So in order to customize the material dialog, you will need to create a custom css class, and set that class within your style.scss file:
style.scss
.custom-modalbox > mat-dialog-container {
background-color: transparent !important;
}
And where you have the MatDialog injected, use that css class for the panelClass property:
YourComponent.ts
onOpenDialig() {
this.dialog.open(DialogComponent, {
disableClose: true,
width: "100%",
height: "100%",
panelClass: 'custom-modalbox', // if you don't set this
// that css class won't applied
});
}
So with that, other components can use the dialog safely without affecting the look & feel if they don't use custom-modalbox
Try to use ::ng-deep but this way, for example
::ng-deep {
.mat-dialog-container{
box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 20%), 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%);
background: #7e2727;
color: rgba(0, 0, 0, 0.87);
}
}
Using the Drag and Drop behavior from the Material CDK library, I'm trying to change the cursor upon dragging a cdkDrag element.
For example, in this StackBlitz the cursor is grab upon hover. I'd like it to change to grabbing upon drag. An example of this is what happens when grabbing a row in Google Sheets:
Reading the documentation for styling a drag and drop component, it looks like adding a cursor property to this class should do the trick:
.cdk-drop-list-dragging: A class that is added to cdkDropList while the user is dragging an item.
The code looks like this:
.example-box {
/* other CSS properties */
cursor: grab;
}
.cdk-drop-list-dragging {
cursor: grabbing;
}
However, as you can see in the StackBlitz, that doesn't seem to change the cursor. I'm guessing this is because this class applies to the list and not the cursor.
Another potential was the .cdk-drag-preview class:
.cdk-drag-preview: This is the element that will be rendered next to the user's cursor as they're dragging an item in a sortable list. By default the element looks exactly like the element that is being dragged.
This doesn't seem to work either. I think it's because it changes the element rendered next to the cursor and not the cursor itself.
Any ideas on how to get the cursor to change while dragging?
The previous solutions did not work for me, but here is something that will most likely work for anyone still having issues:
first add this global CSS:
body.inheritCursors * {
cursor: inherit !important;
}
and to your cdkDrag element add cdkDragStarted and attach it to a method in your .ts file:
<div cdkDrag (cdkDragStarted)="dragStart($event)"></div>
In your .ts file you can then toggle the cursor you want when a drag starts and stops:
bodyElement: HTMLElement = document.body;
dragStart(event: CdkDragStart) {
this.bodyElement.classList.add('inheritCursors');
this.bodyElement.style.cursor = 'move';
//replace 'move' with what ever type of cursor you want
}
drop(event: CdkDragDrop<string[]>) {
this.bodyElement.classList.remove('inheritCursors');
this.bodyElement.style.cursor = 'unset';
...
...
}
Here is a link to a working example on StackBlitz
Hope this was helpful.
Just add cursor: grabbing to your example-box:active
.example-box:active {
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
cursor: grabbing;
}
The :active selector is used to select and style the active link.
A link becomes active when you click on it.
Tip: The :active selector can be used on all elements, not only links.
Additional information here
https://www.w3schools.com/cssref/sel_active.asp
Stackblitz
https://stackblitz.com/edit/angular-b8kjj3-r993mc?embed=1&file=app/cdk-drag-drop-overview-example.css
For myself, I added the following style override to re-enable the custom cursor while dragging.
.draggable-element .drag-handle{
cursor: grab;
}
.draggable-element.cdk-drag-preview .drag-handle{
pointer-events: auto;
cursor: grabbing;
}
Link to live Example
Just use onmousedown = "changeCursorPoint()" event function -
private changeCursorPoint(): void {
document.body.style.cursor = 'grabbing';
}
Clear the function again on (cdkDropListDropped) = "clearCursorEvent()"
private changeCursorToDefault(): void {
document.body.style.cursor = 'default';
}
In your linked Stackblitz example, you're not using a droplist, so you'd want your css to be:
.cdk-drag-dragging {
cursor: grabbing;
}
In my case, drag-dropping using a list on a table-body element, I used:
table tbody.cdk-drop-list-dragging td {
cursor: grabbing !important;
}
I'm trying to create an application in Electron (version 1.6.2). Within the app I have a number of elements that I want to behave like buttons but display as simple Glyphicons. I use the following React code:
private static optionsFormatter () {
return (
<div className={`${styles.fieldGlyphiconContainer}`}>
<Button className={`${styles.glyphiconButton} btn-link`}><Glyphicon glyph='edit'/></Button>
<Button className={`${styles.glyphiconButton} btn-link`}><Glyphicon glyph='remove'/></Button>
</div>
);
}
In their default state, these elements render fine:
However, when I focus one of these elements an orange outline appears around it, which I don't want:
Looking through the CSS rules in the Electron debugger, it looks like the culprit is this from the Bootstrap CSS file:
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
However, I'm not able to suppress these rules. Based on answers to similar questions such as this and this, I've tried adding the following rules to my CSS files:
.glyphicon-button {
// ...
:focus,
:active:focus,
.active:focus,
.focus,
:active.focus,
.active.focus {
outline: none !important;
}
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: none !important;
}
I've also tried disabling the rules in the Electron debugger. However, none of this has worked:
Is there any way I can get rid of the orange outline on focus?
Edit
Based on #ovokuro's comment, I've changed my CSS to this:
.glyphicon-button {
padding: 0;
color: black;
:focus,
:active:focus,
.active:focus,
.focus,
:active.focus,
.active.focus {
outline: none !important;
}
}
button:focus,
button:active:focus,
button.active:focus,
button.focus,
button:active.focus,
button.active.focus {
outline: none !important;
}
This seems to work, although it globally modifies the button focus style. The next step is just to make this only apply to '.glyphicon-button'-class buttons.
Edit 2
Tried the following but this doesn't work:
button.glyphicon-button {
button:focus,
button:active:focus,
button.active:focus,
button.focus,
button:active.focus,
button.active.focus {
outline: none !important;
}
}
Target the HTML button element with class glyphicon-button when focussed like so:
button.glyphicon-button:focus,
button.glyphicon-button:active:focus,
button.glyphicon-button.active:focus,
button.glyphicon-button.focus,
button.glyphicon-button:active.focus,
button.glyphicon-button.active.focus {
outline: none !important;
}
Be aware that removing the outline property has consquences on accessibility.
In my Vaadin App I want to change the color of a focused TextField, which is no problem. Additionaly I want to change the color of the caption which belongs to the TextField. How can I achieve this with css?
.v-textfield.textfield-default {
border: none;
border-bottom: 1px solid $non-active-field;
outline: none;
height: 3rem;
font-size: 1rem;
margin: 0 0 15px 0;
padding: 0;
box-shadow: none;
box-sizing: content-box;
transition: all 0.3s;
}
.v-textfield.textfield-default:focus {
border-bottom: 1px solid $default;
}
.v-caption-default-caption {
color: purple; //changes the text to purple
top: 0.8rem;
left: 0.75rem;
font-size: 1rem;
cursor: text;
transition: .2s ease-out;
}
.v-caption-default-caption:focus {
color: red; //is never called
}
.v-caption-default-caption:active {
color: blue; //is never called either
}
Note: I'm not a CSS/SCSS guru thus more elegant solutions may exist that I'm unaware of. The only one I could come up is Vaadin-based (also java 8), but corrections and suggestions are more than welcome.
From what I gathered, the problem in this case is that you need to update the previous sibling of the input that gets focused, aka it's caption. I've done a bit of research and so far it does not seem possible with CSS.
Also looking at the DOM (see image below), only the text-field gets foucused, hence none of the styles you've defined for the caption gets applied. Under the circumstances, a quick workaround that you can use, is to add focus & blur listeners to your text-fields, which will add & remove a custom style you're also going to define.
Step 1: The component
public class MyTextFieldsComponent extends VerticalLayout {
public MyTextFieldsComponent() {
// the text-fields
TextField myFirstField = new TextField("My first caption");
TextField mySecondField = new TextField("My second caption");
// when focused, add our custom style
FieldEvents.FocusListener focusListener = event -> event.getComponent().addStyleName("red-caption");
// when blurred, remove the custom style
FieldEvents.BlurListener blurListener = event -> event.getComponent().removeStyleName("red-caption");
// use the above listeners
myFirstField.addFocusListener(focusListener);
mySecondField.addFocusListener(focusListener);
myFirstField.addBlurListener(blurListener);
mySecondField.addBlurListener(blurListener);
// add the text-fields to the UI
addComponent(myFirstField);
addComponent(mySecondField);
}
}
Step 2: The style
.v-caption-red-caption {
color: red;
}
Step 3: The result
I need your advices. (Sorry for my eng. I hope than you'll understand me)
1) I want to create custom TabWidget and use QSS. Now it's look like this:
I want fill background under tabs (I accept property called autoFillBackground). It's need look like this:
2) When I start drag and drop tab this tab is filled with white color. And when I drop the tab this tab set custom qss.
I want to change the style when I drag and drop the tab.
Thx
(I was reading qss manual)
some code
QTabWidget::tab-bar {
background-color: black;
}
QTabBar::tab {
background-color: #4094da;
border-color:white;
font: bold 12px 'Arial';
color: white;
height:60px;
}
QTabBar::tab:!selected {
background-color: #9E9E9E;
color: white;
}
QTabBar::close-button {
background-position: center;
background-image: url(":/Appearance/close_chat_item");
}
QTabWidget::pane {
position: absolute;
}
QTabBar::tab:selected {
border-color:#4094da;
background-color: #4094da;
color: white;
}
The QTabWidget does not paint the background, you need to set the background of the parent widget of the QTabWidget.
As I understand, you willing the background color to change in any drag & drop situation(or it is my assumption). If it's like I understand, you should define hover option on your qss. For more info on Qt documentation.
Example code:
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
Your priority should be forcing to cost on qss, logic structure consider to second plan or you can use for some kind of workaround.