I can't get Stripe Elements to use Google's Lato. I know there are other questions similar to this one but I don't see anything that applies. I tried fixing this for a while with no luck
var windowHash = getWindowHash();
var stripe = Stripe(stripePubKey);
var elements = stripe.elements({
fonts: [
{
family: "'Lato'",
src: 'local("Lato"), local("lato"), url(https://fonts.gstatic.com/s/lato/v13/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format("woff2")',
weight: 300,
style: "normal",
unicodeRange: "U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF"
}
]
});
var card = elements.create('card', {
iconStyle: 'solid',
hidePostalCode: true,
style: {
base: {
iconColor: '#3cacce',
color: '#424B54',
lineHeight: '36px',
fontWeight: 300,
fontFamily: '"Lato", sans-serif',
fontSize: '13pt',
fontStyle: "normal",
'::placeholder': {
color: '#969696'
},
},
invalid: {
iconColor: '#b32903',
color: '#b32903',
}
},
classes: {
focus: 'is-focused',
empty: 'is-empty',
},
});
And somewhere else:
card.mount('.cardElement');
Any tips on how I can get this to display properly?
Update:
Found the problem! I was trying to load in Lato Light, but because the normal Lato was added, using 300 wight didn't work. Adding the Lato Light font made it work.
You can now use the cssSrc option:
let stripe = Stripe('pk_test_JYjfAwsv9ODbL7mm1qObrIXZ')
let elements = stripe.elements({
fonts: [
{
cssSrc: 'https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600'
}
]
})
Then you can reference it in in the style options when you create the card:
let card = elements.create('card', {
style: {
base: {
fontFamily: 'Montserrat'
}
}
})
card.mount('#card-element')
Source: https://stripe.com/docs/stripe-js/reference
Reason: Have to use latin link and unicode range. Not the latin-ext font face for Lato font (latin and latin-ext)
Use the following fonts parameters
fonts: [
{
family: '"Lato"',
src: 'local("Lato Regular"), local("Lato-Regular"), url(https://fonts.gstatic.com/s/lato/v13/MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2) format("woff2")',
weight: 300,
style: 'normal',
unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215'
}
]
If you're using Elements component you can specify cssSrc option to import external fonts like so.. (the code is written in typescript)
Outside the component
const ELEMENT_OPTIONS: StripeElementsOptions = {
fonts: [
{
cssSrc:
"https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400;500;600;700;900",
},
],
};
Inside the component
<Elements stripe={stripePromise} options={ELEMENT_OPTIONS}>
<StripeCheckoutForm />
</Elements>
Related
I want to change the background color of my material ui datepicker modal
import { createMuiTheme } from "#material-ui/core";
const materialTheme = createMuiTheme({
overrides: {
MuiPickersToolbar: {
toolbar: {
backgroundColor: 'red',
},
},
MuiPickersDay: {
day: {
color: 'black',
},
daySelected: {
backgroundColor: '#33abb6',
},
dayDisabled: {
color: '#ccc',
},
current: {
color: 'red',
},
},
MuiPickersModal: {
dialogAction: {
color: '#33abb6',
},
},
},
});
export default materialTheme
In the above code i was able to change colors of date and few others but not the total background color
Are there any documentation from which i can get these class names or any other option
Try in CSS:
.MuiPaper-root {
background-color: #eaea87;
}
In recent version of MUI (v5.3.1) I resolved this issue by adding sx={{ backgroundColor: 'white' }} to TextField in renderInput prop as below:
<MobileDatePicker
label="Date"
value={date}
onChange={(newValue) => {
setDate(newValue);
}}
renderInput={(params) => (
<TextField
sx={{ backgroundColor: 'white' }}
fullWidth
{...params}
/>
)}
/>
You can use createTheme to provide component overrides (see docs):
const theme = createTheme({
components: {
// Name of the component
MuiInputBase: {
styleOverrides: {
// Name of the slot
root: {
// Some CSS
backgroundColor: "white",
// add variant styles like so
"&.Mui-disabled": {
"backgroundColor": "#cccccc"
}
},
},
},
},
});
You can see the name of the component to use by inspect element and looking at the class names, and you can find the slots in the component definition, e.g. this is the slots for the MuiInput component.
Also see this source on combining class names to target disabled, hover, active etc.
MuiPickers is using Dialog Material Ui, so override all dialog component that be used in this pickers. I'm not sure with this solution below. You can try this, hope it's worked.
const materialTheme = createMuiTheme({
overrides: {
MuiPickersToolbar: {
toolbar: {
backgroundColor: 'red',
},
},
MuiPickersDay: {
day: {
color: 'black',
},
daySelected: {
backgroundColor: '#33abb6',
},
dayDisabled: {
color: '#ccc',
},
current: {
color: 'red',
},
},
MuiPickersModal: {
dialogAction: {
color: '#33abb6',
backgroundColor: 'YOUR HEX HERE',
},
},
},
});
I think the good way is send style in DialogProps
https://material-ui-pickers.dev/api/DateTimePicker (section modal wrapper)
so then you can override all dialog modal.
How can I add UTF8 to my code? I need to do this because Č, ř, č, ě etc. is not working.
const doc = new jsPDF(orientation, unit, size);
const headersZvirata = [
[
'Číslo',
'Pohlaví',
'Narozen',
'Plemeno',
'Otec',
'Matka',
'Chovatel',
'Poč-Kg',
'Poč-Kč',
'Krmné dny',
'Při-Kg',
'Pří-Kč',
'Aktuálně Kg',
'Aktuálně Kč',
'Důvod Úhynu'
]
];
const dataZvirata = ([....]);
doc.autoTable({
headStyles: {
fontSize: 10
},
bodyStyles: {
fontSize: 8,
fontStyle: 'italic'
},
head: headersZvirata,
body: dataZvirata
});
I am after creating a custom theme with material UI but cannot target individual parts of the theme as I would like:
const theme = createMuiTheme({
palette: {
primary: {
main: '#556cd6',
fontFamily: '"Indie Flower", handwriting',
},
secondary: {
main: '#19857b',
},
error: {
main: red.A400,
},
background: {
default: '#fff',
},
},
typography: {
// Use the system font instead of the default Roboto font.
h1: {
fontFamily: '"Indie Flower", handwriting',
},
},
})
Are you able to change things like default font for h1,h2,input,p etc?
I would like to use the d3pie.js library in my Angular2 project but do not know how to import it with it's typescript definitions.
I installed d3, d3pie.js using these commands:
npm install --save d3 d3pie
npm install --save-dev #types/d3 #types/d3pie
However when I try to import the #types definition like I usually do.
import * as d3pie from 'd3pie';
I get the error:
File '~/foobar/node_modules/#types/d3pie/index.d.ts' in not a module.
And with a simple import like:
import 'd3pie';
I get this error in the dev console of my app:
ERROR Error: Uncaught (in promise): ReferenceError: d3pie is not defined
This is the content of my component.ts file, the template has the test div
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-pie-chart',
templateUrl: './pie-chart.component.html',
styleUrls: ['./pie-chart.component.scss']
})
export class PieChartComponent implements OnInit {
constructor() {
}
ngOnInit() {
declare var d3pie: any;
this.testDraw();
}
public testDraw() {
const chart = new d3pie('test',
{
header: {
title: {
text: '',
color: '#333333',
fontSize: 18,
font: 'arial'
},
subtitle: {
color: '#666666',
fontSize: 14,
font: 'arial'
},
location: 'top-center',
titleSubtitlePadding: 8
},
footer: {
text: '',
color: '#666666',
fontSize: 14,
font: 'arial',
location: 'left'
},
size: {
canvasHeight: 500,
canvasWidth: 500,
pieInnerRadius: 0,
pieOuterRadius: null
},
data: {
sortOrder: 'none',
smallSegmentGrouping: {
enabled: false,
value: 1,
valueType: 'percentage',
label: 'Other',
color: '#cccccc'
},
content: []
},
labels: {
outer: {
format: 'label',
hideWhenLessThanPercentage: null,
pieDistance: 30
},
inner: {
format: 'percentage',
hideWhenLessThanPercentage: null
},
mainLabel: {
color: '#333333',
font: 'arial',
fontSize: 10
},
percentage: {
color: '#dddddd',
font: 'arial',
fontSize: 10,
decimalPlaces: 0
},
value: {
color: '#cccc44',
font: 'arial',
fontSize: 10
},
lines: {
enabled: true,
style: 'curved',
color: 'segment' // 'segment' or a hex color
}
},
effects: {
load: {
effect: 'default', // none / default
speed: 1000
},
pullOutSegmentOnClick: {
effect: 'bounce', // none / linear / bounce / elastic / back
speed: 300,
size: 10
},
highlightSegmentOnMouseover: true,
highlightLuminosity: -0.2
},
tooltips: {
enabled: false,
type: 'placeholder', // caption|placeholder
string: '',
placeholderParser: null,
styles: {
fadeInSpeed: 250,
backgroundColor: '#000000',
backgroundOpacity: 0.5,
color: '#efefef',
borderRadius: 2,
font: 'arial',
fontSize: 10,
padding: 4
}
},
misc: {
colors: {
background: null, // transparent
segments: [
'#2484c1', '#65a620', '#7b6888', '#a05d56', '#961a1a',
'#d8d23a', '#e98125', '#d0743c', '#635222', '#6ada6a',
'#0c6197', '#7d9058', '#207f33', '#44b9b0', '#bca44a',
'#e4a14b', '#a3acb2', '#8cc3e9', '#69a6f9', '#5b388f',
'#546e91', '#8bde95', '#d2ab58', '#273c71', '#98bf6e',
'#4daa4b', '#98abc5', '#cc1010', '#31383b', '#006391',
'#c2643f', '#b0a474', '#a5a39c', '#a9c2bc', '#22af8c',
'#7fcecf', '#987ac6', '#3d3b87', '#b77b1c', '#c9c2b6',
'#807ece', '#8db27c', '#be66a2', '#9ed3c6', '#00644b',
'#005064', '#77979f', '#77e079', '#9c73ab', '#1f79a7'
],
segmentStroke: '#ffffff'
},
gradient: {
enabled: false,
percentage: 95,
color: '#000000'
},
canvasPadding: {
top: 5,
right: 5,
bottom: 5,
left: 5
},
pieCenterOffset: {
x: 0,
y: 0
},
cssPrefix: null
},
callbacks: {
onload: null,
onMouseoverSegment: null,
onMouseoutSegment: null,
onClickSegment: null
}
});
}
}
Thank you!
If you are using the angular CLI you can do the following:
add to the angular-cli.json
"scripts": ["./node_modules/d3pie/d3pie/d3pie.min.js",]
then add this to your typings.d.ts
declare var d3pie:any;
Install d3, d3pie.js using these commands:
npm install --save d3
npm install --save-dev #types/d3 #types/d3pie
Please not that d3pie package from npm is outdated (as it still uses d3 v3)
Prefer the latest version from
https://github.com/benkeen/d3pie/tree/master/d3pie
npm install --save benkeen/d3pie
Edit .angular-cli.json with
"scripts": [
"../node_modules/d3/build/d3.js",
"../node_modules/d3pie/d3pie/d3pie.js"
],
Inside your component import d3pie
import 'd3pie'
Profit!
I'm having some trouble with modifying qTip's tip size (x,y).
I tried to add the style: { tip: { x:2,y:2 } } in all sorts of ways, but failed.
How can I add it to the following script?
// Status Tooltips Style
$.fn.qtip.styles.statusTooltips = {
background: '#333333',
color: 'white',
textAlign: 'center',
border: {
width: 1,
radius: 5,
color: '#333333'
},
tip: 'leftMiddle',
name: 'dark'
}
// Status Tooltips Init
$('.status[title]').qtip({
style: 'statusTooltips',
position: {
corner: {
target: 'rightMiddle',
tooltip: 'leftBottom'
}
}
});
it's simpe enough:
$("#mytip").qtip({style: { tip: { size: { x: 10, y: 10}} }});
http://craigsworks.com/projects/qtip/docs/tutorials/#tips
For qtip 2, you can just set the width and height properties of the tip object:
$("#mytip").qtip({
style: {
tip: {
width: 10,
height: 10
}
}
});
See http://qtip2.com/plugins#tips.width
Got it!
$('.status[title]').qtip({
style: {background:'#333333',
color:'white',
textAlign:'center',
border:{width: 1, radius: 5, color: '#333333'},
tip:{corner:'leftMiddle',size: { x:6,y:10 }}
},
position: {corner: {target:'rightMiddle',tooltip:'leftBottom'}}
});
Thanks, StackOverflow, for being an occasional rubber duck :)