so i've got some colors as variables in my scss file
$primary_background: #1E1E1E;
$primary_button: #F2F2F2;
$primary_sharp: #171717;
$primary_button_active: #9D9D9D;
$primary_sharp_active: #2D2D2D;
$bluish_background: #0C002D;
$bluish_button: #C2C1EF;
$bluish_sharp: #04001E;
$bluish_button_active: #5F52AE;
$bluish_sharp_active: #0C0054;
and use them like this
.button_active {
background-color: $primary_button_active;
}
.button_text_hidden {
color: $primary_button;
}
is there any way in react i can either replace all 'primary_' with 'bluish_' styles or their values, for example:
$primary_background: #1E1E1E => $primary_background: #0C002D
i acknowledge it's probably not the best practice to change styles directly like that, but manipulating classes is the last resort here i think
Related
I have an app with React with LESS.
I have a "mixins" LESS file like this:
#STATICS: "https://should-be-set-on-env";
#STATICS_KEY: "key-should-be-set-on-env";
.completePath(#property, #path) when (#property = 'background-image'){
background-image: url("#{STATICS}/#{path}#{STATICS_KEY}") !important;
}
Currently I'm overwriting the #STATIC and #STATIC_KEY with some method that has customize-cra but now I can't use them (for X reason).
I need a way to read directly from the process.env values in order to have something like this:
#STATICS: readFromProcesEn(REACT_APP_STATICS);
#STATICS_KEY: readFromProcesEn(REACT_APP_STATICS_KEY);
How can I co it? is there a way with Less to read from an external file or some sort of JavaScript function, to get those values from process.env ?
This works for me:
#STATICS: `(function(){return process.env.REACT_APP_STATICS;})()`;
#STATICS_KEY: `(function(){return process.env.REACT_APP_STATICS_KEY;})()`;
Didn't know that Less could use javascript inside batticks.
I have not yet found any option to provide transparency to the foreground color of a component, or to the font for that matter.
What I want to do is:
Label halfTransparentLabel = new Label("Half Transparent text");
Style s = halfTransparentLabel.getAllStyles();
s.setBgColor(0);
s.setBgTransparency(255);
s.setFgColor(0xffffff);
s.setFgTransparency(128); // this method does not exist
I know drawing translucent stuff is heavy on the performance, but I want to do it on particular pieces only. would greatly improve the visual appeal and design, having this option.
Can this be worked around?
UPDATED ANSWER
Thanks to the Shai's comment, I update my answer. The workaround I suggested is not necessary. The same result of the posted screenshot can be obtained with https://www.codenameone.com/javadoc/com/codename1/ui/plaf/Style.html#setOpacity-int- or with the opacity property in the CSS, for example:
BigLabel {
font-size: 6mm;
font-family: "native:MainRegular";
color: red;
background-color: transparent;
opacity: 0.5;
}
OLD ANSWER - Yes, it's possible to workaround this problem using the .toImage() method, as in this screenshot:
I'm not sure if this workaround is the best, however it works.
The code of this example:
Form hi = new Form("Semitransparent Example", BoxLayout.y());
hi.getToolbar().setUIID("Transparent");
hi.setUIID("FormBackground");
Container cnt = FlowLayout.encloseIn(new Label("Half Transparent Text", "BigLabel"));
// .setSize() and .revalidate(), in this case, are necessary to use the .image() method
cnt.setSize(new Dimension(hi.getContentPane().getWidth(), CN.convertToPixels(8, false)));
cnt.revalidate();
hi.add(cnt.toImage().modifyAlpha((byte) 125));
hi.show();
and the CSS:
#Constants {
includeNativeBool: true;
}
Transparent {
background-color: transparent;
}
FormBackground {
background-image: url("background.jpg");
}
BigLabel {
font-size: 6mm;
font-family: "native:MainRegular";
color: red;
background-color: transparent;
}
thanks for your answers. with the above tips, the easiest solution in code is the following:
component.getAllStyles().setOpacity(128);
so what is the benefit to use CSS?
Having the designer to all the formating and styling, I already hate to do some parts in code and some in the designer. So why make it even more complex by introducing CSS? is CSS support supposed to replace the designer?
Is there a way to make class- and id-selectors work together in JavaFX 8?
E.g.: I´d like to style a progressbar the following way:
.myprogressbar #greenBar .bar {
-fx-background-color: green;
}
This solution used to work before JavaFX 8.
Your css selector is matching a Node with class "bar" which is a descendant of a Node with id "greenBar" which in turn is a descendant of a Node with class "myprogressbar".
I assume you're setting the class "myprogressbar" and the id "greenBar" on the same node (a ProgressBar). To match this, you need to remove the space between .myprogressbar and #greenBar:
.myprogressbar#greenBar .bar {
-fx-background-color: green;
}
If you want to set a css style by id but just for a part of a node, the following code snippet did the trick for me:
In my css stylesheet file I defined this:
#agile-board *.split-pane-divider {
-fx-background-color: #C9C9C9;
-fx-border-style: dashed;
-fx-border-width: 1px;
}
In my class where I wanted to use this style I did this:
this.board = new SplitPane();
this.board.setId("agile-board");
The node got the style wit the id #agile-board applied but just the divider of that SplitPane.
Good programming :-)
In Ext JS 4, they added a way to override the default coloring scheme by using SASS/Compass, so what I'm trying to do is create a new button style, using extjs-button-ui, and then applying that style to a button. The button's code is as follows:
xtype: 'button',
text: 'should be orange',
ui: 'orange'
My SASS code is as follows:
$button-default-background-color: mix(blue, red);
$orange-button-background-color: mix(yellow, red);
#import 'compass';
#import 'ext4/default/all';
#include extjs-button-ui(
'orange',
$button-small-border-radius,
$button-small-border-width,
$button-default-border-color,
$button-default-border-color-over,
$button-default-border-color-focus,
$button-default-border-color-pressed,
$button-default-border-color-disabled,
$button-small-padding,
$button-small-text-padding,
$orange-button-background-color,
$button-default-background-color-over,
$button-default-background-color-focus,
$button-default-background-color-pressed,
$button-default-background-color-disabled,
$button-default-background-gradient,
$button-default-background-gradient-over,
$button-default-background-gradient-focus,
$button-default-background-gradient-pressed,
$button-default-background-gradient-disabled,
$button-default-color,
$button-default-color-over,
$button-default-color-focus,
$button-default-color-pressed,
$button-default-color-disabled,
$button-small-font-size,
$button-small-font-size-over,
$button-small-font-size-focus,
$button-small-font-size-pressed,
$button-small-font-size-disabled,
$button-small-font-weight,
$button-small-font-weight-over,
$button-small-font-weight-focus,
$button-small-font-weight-pressed,
$button-small-font-weight-disabled,
$button-small-font-family,
$button-small-font-family-over,
$button-small-font-family-focus,
$button-small-font-family-pressed,
$button-small-font-family-disabled,
$button-small-icon-size
);
I have a couple of questions/observations. When I compile this, I get no errors and the standard Ext JS theme with purple buttons, but the button I defined above, has no style... it's just text. These variables are all included in the _all.scss file, which imports the _variables.scss file, which includes the variable definitions that are in variables/_button.scss, and if the vars were undefined, the compiler would whine.
My first question is, why is this not working/what am I missing?
And my second, more broad SASS question, how do I inherit from a mixin? The orange include is actually inheriting all of those variables from the default-small extjs-button-ui. So I want the background-color and name to be orange, but I want everything else to be inherited from the default-small include. Is this possible? I thought something like:
#include extjs-button-ui(
#include extjs-button-ui('default-small'),
'orange',
$button-default-background-color: mix(yellow, red)
}
would be the ticket, but I was apparently horribly wrong. I can inherit a mixin by doing something like:
.orange {
#include extjs-button-ui('default-small', $icon-size: 16px);
$button-default-background-color: mix(yellow, red);
}
But that's not creating an orange ui that I can use in Ext JS... just an orange CSS class that has the button values, but not my background-color. So what am I doing wrong? I've tried looking all over for ways to accomplish this, but nothing's working. Does anyone have any insight?
I need to display a window Ext.Window with a colour different to that of the default theme.
Changing the colour of the guts of the window is easy enough. Changing the colour of the chrome of all popup windows is also very easy. Changing the chrome of a single window seems extremely hard. Best as I can tell, you need to copy all the styles (x-window and similar), rename and customise them and set the baseCls of the window.
Is there an easier way to do this?
In configs for the window ...
bodyCls: 'popWindow',
and then somewhere in a css
.popWindow
{
background-color: blue;
}
You can add your own custom class to the window, then write CSS rules for that class.
Check out the cls config option or the addCls method on Ext.Window. Try it out, then inspect the class applied to your window to figure out where to apply your CSS rules.
Here's the doc for Ext.Window. In Ext 3.x, I believe the method is addClass. But the config option was still cls (I think).
Sorry to answer my own question, but I finally worked out a way to colour a single window in isolation of other windows. Initially I thought I was going to have to clone the entire x-window set of classes and modify the clone but I have since found an easier way to do it.
I got a lot of help from this link but also used a lot of trial an error as my CSS skills suck
You'll need to clone and edit the background images used by
the overriding css. The files you'll need are top-bottom.png, left-right.png, left-corners.png, right-corners.png and tool-sprites.gif
The window that you wish to colour needs to have an id ('defn_display' in this
example).
Set the bodyCls of the window to a separate class that sets the background colour. For example:
.defn_content
{
background: #FFFFDD !important;
}
You need to set up the css class selectors to override the
x-window classes based upon this id using the new images cloned in step 1.
#defn_display * .x-window-tc {
background-image: url("/static/images/defn-top-bottom.png");
}
#defn_display * .x-window-ml {
background-image: url("/static/images/defn-left-right.png");
}
#defn_display * .x-window-mr {
background-image: url("/static/images/defn-left-right.png");
}
#defn_display * .x-window-tl {
background-image: url("/static/images/defn-left-corners.png");
}
#defn_display .x-window-tl {
background-image: url("/static/images/defn-left-corners.png");
}
#defn_display * .x-window-bl {
background-image: url("/static/images/defn-left-corners.png");
}
#defn_display * .x-window-tr {
background-image: url("/static/images/defn-right-corners.png");
}
#defn_display * .x-window-br {
background-image: url("/static/images/defn-right-corners.png");
}
#defn_display * .x-window-bc {
background-image: url("/static/images/defn-top-bottom.png");
}
#defn_display .x-tool {
background-image: url("/static/images/defn-tool-sprites.gif");
}
#defn_display * .x-window-header-text {
color: #515111;
}
The CSS seems to do the trick with one exception: the drag ghost is tricky to override since it is not a child of the window. As such, I still get a blue ghost during dragging.
(Tested under FF, Chrome and IE6 with ExtJs 3.4)
Check the ui property. I never tried it by myself, but I heard on Sencha conference that it's possible. Good luck...