I need to write the following CSS value as a string in a makeStyles function in Material UI, how can it be done?
background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)),
url(../assets/pexels-pixabay-41949.jpg),
i tried it this way but obviosuly is incorrect
background: 'linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)),
url(../assets/pexels-pixabay-41949.jpg)',
You can use Template literals to get this work. Move the URL into a variable and then form the actual CSS property.
const url = "https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80";
const useStyles = makeStyles(() => ({
boxBackground: {
background: `linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)),url(${url
})`,
},
}));
Here is the working CodeSandbox link.
Related
I have an image with a slight black linear gradient over it to improve readablitiy
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("./images/slideshow/2.jpg");
However I am using a slideshow that only accepts divs with inline backgroundImage properties
<div
className="slideshow-image"
style={{ backgroundImage: `url(${slideshow2})`, repeat: "no-repeat" }}
>
The trouble is I cannot add the linear gradient that the image had before with inline styling.
//attempt 1
const backgroundStyle = {
backgroundImage: `url(${slideshow1})`,
linearGradient: "(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))",
};
// attempt 2
style={{
linearGradient: "(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))",
backgroundImage: `url(${slideshow1})`,
repeat: "no-repeat",
}}
//attempt 3
.slideshow-image {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
Neither of these display anything over the image. What can I try next to accomplish this?
I am trying to put together some basic reactive forms.
The problem we have is that our compliance department is not going to let us go through because all of the contrasts for material form fields are too transparent/light.
I am looking for a way to darken up all of the form fields, outlines, disabled text etc.
I have been trying to make it global by going into my primary stylesheet. However I cannot seem to figure out how to override material in this way.
I have tried the following within the scss:
.mat-input-element:disabled .mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {
opacity: 1.0 !important;
}
.mat-input-element .mat-form-field-autofill-control .ng-tns-c161-25 .ng-untouched .ng-pristine .cdk-text-field-autofill-monitored {
opacity: 1.0 !important;
}
Or higher in the themes:
// Light Theme Text
$dark-text: #000000;
$dark-primary-text: rgba($dark-text, 1.0);
$dark-accent-text: rgba($dark-primary-text, 1.0);
$dark-disabled-text: rgba($dark-primary-text, 1.0);
$dark-dividers: rgba($dark-primary-text, 1.0);
$dark-focused: rgba($dark-primary-text, 1.0);
$mat-light-theme-foreground: ( base: black, divider: $dark-dividers, dividers: $dark-dividers, disabled: $dark-disabled-text, disabled-button: rgba($dark-text, 0.26), disabled-text: $dark-disabled-text, elevation: black, secondary-text: $dark-accent-text, hint-text: $dark-disabled-text, accent-text: $dark-accent-text, icon: $dark-accent-text, icons: $dark-accent-text, text: $dark-primary-text, slider-min: $dark-primary-text, slider-off: rgba($dark-text, 0.26), slider-off-active: $dark-disabled-text, );
// Dark Theme text
$light-text: #ffffff;
$light-primary-text: $light-text;
$light-accent-text: rgba($light-primary-text, 1.0);
$light-disabled-text: rgba($light-primary-text, 1.0);
$light-dividers: rgba($light-primary-text, 1.0);
$light-focused: rgba($light-primary-text, 1.0);
$mat-dark-theme-foreground: ( base: $light-text, divider: $light-dividers, dividers: $light-dividers, disabled: $light-disabled-text, disabled-button: rgba($light-text, 0.3), disabled-text: $light-disabled-text, elevation: black, hint-text: $light-disabled-text, secondary-text: $light-accent-text, accent-text: $light-accent-text, icon: $light-text, icons: $light-text, text: $light-text, slider-min: $light-text, slider-off: rgba($light-text, 0.3), slider-off-active: rgba($light-text, 0.3), );
Neither of these approaches seem to effect the project and components in any way.
Is there a method I can use to darken the contrast of all form fields globally? Without resorting to directives or having to include the same manual css to every component.css ?
Thanks much.
EDIT: I am trying to overcome this very transparent.
You should be able to override most of the mat-form-field rules to meet your requirements. Here are some examples you can add to your top level style sheet for the 'fill' appearance:
.mat-form-field-appearance-fill {
.mat-form-field-label {
color: rgba(0, 0, 0, 1) !important;
}
.mat-form-field-flex {
background-color: rgba(0, 0, 0, 0.08);
}
}
.mat-form-field-appearance-fill.mat-form-field-disabled {
.mat-form-field-label {
color: rgba(0, 0, 0, 0.8) !important;
}
.mat-form-field-flex {
background-color: rgba(0, 0, 0, 0.04);
}
}
https://stackblitz.com/edit/angular-a7hisy?file=src%2Fstyles.scss
For appearance="outline"
.mat-form-field-appearance-outline {
.mat-form-field-label {
color: rgba(0, 0, 0, 1) !important;
}
.mat-form-field-outline {
color: rgba(0, 0, 0, 0.4);
}
}
.mat-form-field-appearance-outline.mat-form-field-disabled {
.mat-form-field-label {
color: rgba(0, 0, 0, 0.8) !important;
}
.mat-form-field-outline {
color: rgba(0, 0, 0, 0.2);
}
}
https://stackblitz.com/edit/angular-jy3hjq?file=src%2Fapp%2Fform-field-appearance-example.html
I am in the process of learning basic Java and JavaFX. I am trying to apply certain styles to a simple program. I have successfully connected the CSS and SOME styles work and others are ignored. I am especially having an issue with -fx-background-color and -fx-font-weight, thusly. The CSS is as follows:
.label{
-fx-font-size: 16px;
-fx-font-weight: bold;
-fx-font-family: Tarazedi;
-fx-text-fill: #FF9900;
}
#h1bar {
-fx-text-fill: #000000;
-fx-effect: dropshadow( gaussian, #000000, 1, 0, 1, 1 );
-fx-background-color: linear-gradient( to right,
rgba(255, 153, 0, 1) 0px,
rgba(255, 153, 0, 1) 16px,
rgba(171, 153, 0, 0.67) 32px,
rgba(171, 153, 0, 0.67) 480px,
rgba(255, 153, 0, 0.33) 720px,
rgba(255, 153, 0, 0) 960px
);
-fx-padding: 4px;
-fx-background-radius: 16px;
}
The Java is as follows:
primaryStage.setTitle("Welcome to tarazedi.com!"); // Define window and title bar.
GridPane grid = new GridPane(); // Create a GridPane
grid.setHgap(16); // Set 10px gridlines.
grid.setVgap(16);
grid.setPadding(new Insets(32, 32, 32, 32)); // TRBL padding.
Label scenetitle = new Label("\uf0a3 Welcome to tarazedi.com!");
scenetitle.setId("h1bar");
grid.add(scenetitle, 0, 0, 2, 1);
Label userName = new Label("User Name:");
grid.add(userName, 0, 1);
TextField userTextField = new TextField();
grid.add(userTextField, 1, 1);
Label pw = new Label("Password:");
grid.add(pw, 0, 2);
PasswordField pwBox = new PasswordField();
grid.add(pwBox, 1, 2);
Button btn = new Button("Sign in");
HBox hbBtn = new HBox(10);
hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
hbBtn.getChildren().add(btn);
grid.add(hbBtn, 1, 4);
final Text actiontarget = new Text();
grid.add(actiontarget, 1, 6);
btn.setOnAction((ActionEvent e) -> {
actiontarget.setFill(Color.FIREBRICK);
actiontarget.setText("Sign in button pressed");
});
Scene scene = new Scene(grid, 400, 400); // Grid is the root node.
primaryStage.setScene(scene); // Display it.
scene.getStylesheets().add(VictorSheckelsFX.class.getResource("VictorStyle.css").toExternalForm());
primaryStage.show();
The expected behavior would cause the header bar to look roughly like the orange bars on my site: http://victorsheckels.com/. Instead I have solid orange bars, no dropshadow, and no boldness on my font. The font size, family, and color are WAI as are the padding and radius.
Use percentages instead of pixels. JavaFX does not support non-percentage stops as reported here
For example:
-fx-background-color: linear-gradient(to right,
rgba(255, 153, 0, 1) 0%,
rgba(255, 153, 0, 1) 1.6%,
rgba(171, 153, 0, 0.67) 3.3%,
rgba(171, 153, 0, 0.67) 50%,
rgba(255, 153, 0, 0.33) 75%,
rgba(255, 153, 0, 0) 100%);
So i have something like this:
#color1: rgba(0, 0, 0, 0);
#color2: rgba(0, 0, 0, 0.7);
#start-view .start1 {
.imageGradientOverlay(#color1, #color2, "../images/start/start1.jpg");
}
variable for this is:
.imageGradientOverlay(#color1, #color2, #url-image) {
background-image:
linear-gradient(#color1, #color2),
url(#url-image);
background-image:
-webkit-linear-gradient(#color1, #color2),
url(#url-image);
}
and the compiled code looks like this:
#start-view .start1 {
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url("../../../images/start/start1.jpg");
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url("../../../images/start/start1.jpg");
}
The question is - Why is less when compiling adding two more ../../ ?
If i try to add this /images/start/start1.jpg the code is compiled fine but this is not what i need.
Looking at the LESS options, I believe you have rootpath set to add that prefix. So reset the rootpath and it should be fine.
You can test it here - LESS2CSS, just add that option.
For example, how to accomplish
box-shadow: 2px 2px 4px rgba(0, 0, 0, .05), -2px -2px 4px rgba(0, 0, 0, .05);
in react native stylesheet?
I don't think you can, but the hack of wrapping your component with another just for another layer of shadow is the worst hack of the century either:
<div style={{ boxShadow: "2px 2px 4px rgba(0, 0, 0, .05)"}}>
<div style={{ boxShadow: "-2px -2px 4px rgba(0, 0, 0, .05)"}}>
{ content }
</div>
</div>
I created a react component that automatically creates multiple View components for every shadow you need. It is likely to have some quirks, but it worked fine for my situation.
import React from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import * as _ from 'lodash';
const partitionByKeys = (keys, obj) => {
let pass = {};
let fail = {};
for (const key of Object.keys(obj)) {
if (keys.includes(key)) {
pass[key] = obj[key];
} else {
fail[key] = obj[key];
}
}
return [pass, fail];
};
const innerStyleKeys = [
'padding', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight',
'paddingHorizontal', 'paddingVertical',
'backgroundColor', 'flexDirection', 'justifyContent', 'alignItems',
'minHeight', 'minHeight',
];
const ShadowView = ({ level = 0, shadows, children, style, ...props }) => {
const shadow = _.head(shadows);
const [innerStyle, outerStyle] = style ? partitionByKeys(innerStyleKeys, style) : [{}, {}];
return (
<View
{...props}
style={{
shadowColor: shadow.color,
shadowOffset: shadow.offset,
shadowOpacity: shadow.opacity,
shadowRadius: shadow.radius,
...(level === 0 ? outerStyle : {}),
...(shadows.length === 1 ? innerStyle : {}),
}}
>
{ shadows.length === 1 ?
children :
<ShadowView level={level + 1} shadows={_.tail(shadows)} style={style}>{children}</ShadowView>
}
</View>
);
};
export default ShadowView;
Usage:
<ShadowView shadows={[{
color: '#FF0000',
opacity: 0.5,
offset: {
width: 0,
height: 10,
},
radius: 60,
}, {
color: '#00FF00',
opacity: 0.5,
offset: {
width: 0,
height: 3,
},
radius: 20,
}]}>...</ShadowView>