I'm trying to update a antd component style.
I'm using this: https://pro.ant.design/docs/style#override-the-component-style as reference to try updating a component styling but I can't make it to work.
Here's something I'm trying: https://codesandbox.io/s/cool-wind-kkub0?file=/index.less
I don't understand what I am missing. Any suggestions?
You are using scoped styling which is achieved by ejecting your app or installing npm package for loading styled component styles. For this to work, paste your .less code in your index.css file
index.css
.ant-select-selection {
max-height: 51px;
overflow: auto;
background-color: blue;
}
.ant-select-selection-search-input {
background-color: green;
}
.ant-select-item-option-content {
background-color: orange;
}
.ant-select-item {
position: relative;
display: block;
min-height: 32px;
padding: 5px 12px;
color: red;
font-weight: normal;
font-size: 14px;
line-height: 22px;
cursor: pointer;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
background-color: #9068b0;
}
Related
i'm trying to make a react project with styled components, and i want to use a radio button, but when i try to add css to the radio when it's checked it didn't work as i expected, can you help me?
const RadioGroup = styled.div`
border: solid 3px #332f35;
display: inline-block;
margin: 20px;
border-radius: 10px;
overflow: hidden;
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: lighten(#332f35,40%);
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
}
input[type=radio]:checked + label{
color: lighten($bg,60%);
background: #ff9000;
}
input[type=radio] + label {
border-left: solid #a1a1a1;
}
`
this is the styled component i'm trying to use in the Radio button, thanks guys!
I'm working on a react JS app , and I'm using react-modal package . I don't know how to make the outside part of the Modal ,when it is opened, completely transparent .
This is the props that I pass it to the Modal :
<Modal
onRequestClose={() => {
this.setState({ modalIsOpen: false });
}}
isOpen={modalIsOpen}
className="Modal"
></Modal>
This is the CSS code :
.Modal {
text-decoration: none;
user-select: none;
align-self: center;
justify-content: center;
align-items: center;
border: 2px solid #040408;
border-radius: 30px;
background-color: white;
margin-top: 10%;
margin-bottom: auto;
width: 20.8%;
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
outline: none;
padding-left: 2px;
padding-right: 2px;
}
And this is the result that I get :
I want my modal to look just like a popup.
Do you mean background of model to be transparent? like the grey part of picture? in this case you should put it inside another div.
<div className='transparent'><Modal/></div>
Otherwise I don't understand the question.
Maybe you want to make the div fixed and max size, so it cover all the screen.
I wrote program using GTK3 with css styling and it works perfect on my KDE.
But problem is that on ubuntu and windows 10 styling only works partially.
I have css file like this:
window {
background-color: white;
}
button {
border: none;
color: white;
padding: 15px 32px;
text-decoration: none;
font-size: 16px;
background-color: #555555;
}
Everything works except changing background of buttons.
It's how I load css:
GtkCssProvider *provider = gtk_css_provider_new ();
gtk_css_provider_load_from_path (provider, "styles.css", NULL);
gtk_style_context_add_provider_for_screen(gdk_screen_get_default(),
GTK_STYLE_PROVIDER(provider),
GTK_STYLE_PROVIDER_PRIORITY_USER);
How can I make it work?
I found solution:
window {
background-color: white;
}
button {
border: none;
padding: 0px;
text-decoration: none;
font-size: 16px;
}
button > label{
padding: 15px 32px;
background-color: #555555;
color: white;
}
You can change by writing css on ~/.config/gtk-3.0/gtk.css.
button.titlebutton.close:backdrop {
background-color: transparent;
}
button.titlebutton.close {
background-color: #theme_selected_bg_color;
}
References:
https://github.com/nana-4/materia-theme/issues/370#issuecomment-481256130
https://asukiaaa.blogspot.com/2022/07/change-color-of-close-button-of-ubuntu2204.html
I'm new using styled-components and I been trying to create an input using google material design standards but I haven't been able to recreate the animation that makes the label move when the input is focused.
const Input = styled.input`
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575;
&:focus {
outline: none;
}
`;
const Label = styled.label`
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
${Input}:focus & {
top:-20px;
font-size:14px;
color:#5264AE;
}
`;
So in resume, I want the label to move 20px up, change its font-size and color when the label is focused, I'm not really sure if my approach is the correct or it will be better just to implement a normal CSS class in this case.
You are missing the ~ sign to target the label element on input focus
const Label = styled.label`
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
${Input}:focus ~ & {
top:-18px;
font-size:14px;
color:#5264AE;
}
`;
Working demo
These are AngularUI Bootstrap popovers, which are written in Angular instead of jQuery.
I have a popover in a plnkr that is working, but it's positioning is messed up. It is being cut in half by the page.
When I inspect the popover's CSS, I see some code which doesn't make any sense to me. I understand what it's doing, but where are these element.style properties coming from? They seem to be the problem.
element.style {
top: -139px;
left: 112px;
display: block;
}
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 276px;
padding: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
line-break: auto;
}
There isn't even a scroll option available. Is there a way to position a popover so that the entirety of it appears on the page, regardless of where the button is?
In the element where you whant your popover displayed, add the following directive:
popover-append-to-body="true"
Like this:
<small popover="{{form.descripcion}}" popover-trigger="mouseenter" popover-append-to-body="true">
[{{form.status}}]
</small>
The element styling is set in the source of UI Bootstrap in the tooltip section.
Tooltips and popovers are not meant to store that much data which is why they just center it over the element that it is attached to.
EDIT
For this specific example you can add this CSS:
.popover-parent + .popover {
top: 0 !important;
}
.popover-parent + .popover .arrow {
top: 15px !important;
}
The most dynamic way would be to hook into the event that shows the tooltip and calculate the position of the popover then.