I'm looking to "cut" the top left corner of a tab, like if you had folded the corner of a page down.
Are there any methods?
My code:
.tab:before {
-fx-position: absolute;
-fx-top: 0;
-fx-right: 0;
-fx-border-top: 300px solid white;
-fx-border-left: 200px solid red;
-fx-width: 0;
-fx-background-color: transparent;}
return:
.jar!/css/tabs.css: expected series of while parsing '-fx-border-top' at [9,20]
Many of these properties are not supported: I don't know where you are getting them from.
There is no -fx-position, -fx-top, -fx-right property (in general, JavaFX CSS is used for style, not for layout).
There is no -fx-border-top or -fx-border-right property: border sizes are specified by -fx-border-width: top right bottom left syntax, and similarly border colors are specified by -fx-border-color. There is a -fx-border-radius property, which I think is the one you are looking for.
There is no :before pseudoclass.
So you can try something like this (which is not tested; provide a complete example in your question if you want tested code in the answers):
.tab {
-fx-border-color: white, red ;
-fx-border-width: 1 0 0 0, 0 0 0 1 ;
-fx-border-radius: 5 0 0 0 ;
}
Refer to the JavaFX CSS reference guide for an actual list of defined properties.
It's also worth noting that in the default styles, borders are almost never used directly. The preferred way of creating a border effect in modena is to use "nested backgrounds". Using this approach your CSS might look like:
.tab {
-fx-background-color: white, red, -fx-body-color ;
-fx-background-insets: 0, 1 0 0 0, 1 0 0 1 ;
-fx-background-radius: 10 0 0 0 ;
}
For more complex shapes (other than just rectangles with rounded corners), you could also use the -fx-shape property, using SVG syntax to define the shape of the tab.
It's useful to look at the source code for the default stylesheet to see how this all works. You probably want to change the styles for .tab:selected to make selection play nicely with your styles.
I decided to do it a lazy way, set the image in the background in the format I wanted and left the background transparent.
.tab {
-fx-background-image: url("../icons/pane.png");
-fx-background-size: stretch;
-fx-background-color: transparent;
-fx-padding: 0px 20px 0px 20px;
Tab
Related
I'd like to create a customized Lumo theme in Vaadin 14.6, where the buttons (<vaadin-button>) show a double border (css: box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--some-custom-background-color);) when focussed.
While custom styles for other <vaadin-button> pseudo selectors, such as :hover, :active, etc. work well, I cannot find a way to customize the :focus appearance.
Focus styles need to be customized using the focused and focus-ring state attributes, which are applied on the host element.
The focused attribute is applied the button is focused either with a mouse/pointer or keyboard, while focus-ring is only applied when it’s focused with the keyboard (corresponds to the native :focus-visible pseudo class).
:host([focused]) {
...
}
:host([focus-ring]) {
...
}
I found that it is actually Firefox which is not showing the :focus related css. Chrome and Safari display the style as desired.
For the sake of completeness, this is the related css, which goes into 'vaadin-button.css' in the 'themes/components' folder of the application:
:host([theme~="primary"]:focus) {
height: calc(var(--my-button-size) - 6px);
border-radius: 1px;
background-color: var(--my-button-primary-background-color-focus);
box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--my-button-primary-background-color);
}
I have a select form in Bootstrap 4 with dark background, when I select an option I want the background after selection to stay dark. My example works in Chrome and Firefox. But in IE and Edge the background stays white while in focus. Check my jsfiddle, any ideas?
.form-control:focus {
background-color: #121212;
border-color: #121212;
outline: 0;
box-shadow: 0 0 0 0rem rgba(0,123,255,.25);
}
https://jsfiddle.net/cd1eyqvr/3/
Keep the .form-control:focus part and add this in your css:
.form-control:focus::-ms-value {
background-color: #242424 !important;
border-color: #121212 !important;
color: #ffffff !important;
outline: 0 !important;
box-shadow: 0 0 0 0rem rgba(0,123,255,.25);
}
This part will work in IE11 and Edge.
You can refer to the demo I made: https://jsfiddle.net/yuzhou0602/ofwvuzyr/4/
Check this link from offical docs:
https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/
It seems the edge has problems with box shadow and you must add extra css to your stylesheet Check the links blow for more help about your problem Box shadow not working in microsoft edge
And also check this link for complete box shadow in edge solutions
https://css-tricks.com/snippets/css/css-box-shadow/
My menu-button is a bit wider:
.menu-button {
-fx-pref-width: 250px;
-fx-background-color: #72b3c9;
-fx-padding: 5 16 5 16;
}
and the menu with its items (and their accelerators) is displayed as expected, like this:
But when I want to align the width of menu-item to the width of menu-button, like this:
.menu-item {
-fx-pref-width: 250px;
-fx-pref-height: 40px;
-fx-padding: 5px 16px 5px 16px;
}
then I don't get the accelerators aligned to the right of the menu items:
What I would want (and expect) is that the accelerators are following the width of the menu item and that are aligned to the right edges of their respective menu items, like this:
How can I achieve that?
Edit:
A hack to increase the left-label padding could be used, thus forcing the accelerators more to the right:
.menu-item .label {
-fx-padding: 0 120px 0 0;
}
But, that is a hard-coded platform-dependent approach that needs to be adjusted each time a menu item label text or an accelerator is changed.
Here is a solution that I managed to achieve, like that with the default color it will not appear but if you put two differents color (for Label and Background) it will be ugly for now it is the only thing That I realized. I know something is missing but I can't figure out what :
.menu-button {
-fx-pref-width: 250px;
-fx-background-color: #72b3c9;
}
.menu-item {
-fx-pref-width: 250px;
}
.menu-item > .label{
-fx-pref-width: 200px;
}
Try to perfect it, on my side I will try to find a better solution, good luck !
Its already a very old question and probably you have found some solution. But I am giving my answer here so that others can find it useful.
Don't set any width for .menu-item or it's child .menu-item > .label. Set the padding only in .accelerator-text instead as follows:
.menu-item > .accelerator-text {
-fx-padding: 0 0 0 30px;
}
Customize the left padding to adjust your menu item's width.
Is there a way to influence only separate box-shadow properties?
For instance I have these classes to set button size and button color
.btn {
background: gray;
font-size: 15px;
box-shadow: 0 2px 0 0 dark-gray;
}
.btn--primary {
background: blue;
box-shadow: 0 2px 0 0 dark-blue;
}
.btn--secondary {
background: red;
box-shadow: 0 2px 0 0 dark-red;
}
.btn--large {
font-size: 20px;
}
But now, I also want a larger box shadow on .btn--large
Problem is, I have multiple colored buttons, so I would need some sort of "box-shadow-y-size property"
How do you work around this problem? The only way I can think of right now is to do something like this...
.btn--large.btn--primary {
box-shadow: 0 4px 0 0 dark-blue;
}
.btn--large.btn--secondary {
box-shadow: 0 4px 0 0 dark-red;
}
There is sadly only one way to define a box-shadow, but in your case there might be a work-around. If you don't specify a colour for your box-shadow it will default to the colour of the color attribute. Perhaps this is something you can make use of.
For example, if you want to be able to have a differently coloured box-shadow while still retaining the original text color, one way you can achieve this by applying the box-shadow to a :before pseudo element instead of the element itself.
JSFiddle with pseudo element solution
I usually put 0 as value when i want to remove something in css. For example:
border: 0;
background: 0;
Is there any difference between 0 and none?
When used with composite styles like border and background, the values will correspond to different properties.
border: 0 will set border-width: 0 while border: none will set border-style: none.
background: 0 will set background-position: 0 while background: none will set background-image: none.
So, there is a difference. In the case of the border, the difference doesn't make any visual difference as both remove the border, but for the background it can make a difference if you also set any other background properties.