I am using the SweetAlert2 Library in a Vue.js project. The library is working fine with all its features except custom styling.
Based on the documentation, to customize a popup you should add a customClass field to the options object where you define custom class names for each component of the popup.
That is exactly what I did. but the styles do not change.
The code used to include the library:
import Swal from 'sweetalert2'
The code used to fire a swal popup:
Swal.fire({
confirmButtonText: this.confirmBtnTxt,
allowOutsideClick: false,
showCancelButton: false,
title: `Hello ${this.user.firstName} ${this.user.lastName}`,
text: 'Can you please confirm your company',
input: 'select',
customClass: {
container: 'pp-container',
popup: 'pp',
header: 'pp-header',
title: 'pp-title',
content: 'pp-content',
htmlContainer:'pp-html-container',
input: 'pp-input'
},
I have provided all the necessary custom class names, and I am giving those classes styling rules in the styles section of the component:
// Customising swal alerts
.pp {
box-shadow: 0 3px 20px -10px #4a4a4a;
background:black;
}
.pp-title {
display: flex;
font-size: 1.2rem;
color: black;
font-weight: 500;
}
.pp-input {
display: flex;
border: none;
background: #f0f2f7;
padding: 0.7rem 1rem;
font-size: 1rem;
font-weight: 400;
margin-top: 2rem;
}
.pp-html-container {
display: block;
font-size: 0.9rem;
color: #9a9a9a;
}
But the styling doesn't change (see screenshot below).
What am I missing?
I tried this and it is working for me.
Check the demo.
const showAlert = () => {
Swal.fire("Update Successful", "Changes updated successfully!", "success");
}
.swal2-popup {
background: #222 !important;
border: 1px solid white !important;
color: whitesmoke !important;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11.6.0/dist/sweetalert2.all.js"></script>
<button onclick="showAlert()">Show Alert</button>
Related
Image of the problem.
So i have themes and colors defined in my React app.
Everything works well except these labels. When i change the theme to green and then change it back to blue and then when i focus on the input, the color again changes to the opposite theme. I don't understand what I'm doing wrong. Also this problem only occurs after i change the theme. Initially when i focus on the input the label remains blue.
This is my code for the theme part.
{
type: "light",
primaryColor1: "#33b2ff", //lightest
primaryColor2: themeColor === "blue" ? "#009fff" : "#00b05d", //ChangeColor()
primaryColor3: "#007fcc", //darkest
textColor1: "#111", //darkest
textColor2: "#555",
textColor3: "#888", //lightest
backgroundColor1: "#fcfcfc", //lightest
backgroundColor2: "#e3e3e3",
backgroundColor3: "#cacaca", //darkest
borderColor: "009fff",
white: "#fff",
black: "000",
}
This object returns all my theming colors but the primary color part is where it checks a state called themeColor which when set to blue, returns blue as the primary color for the entire app or green if otherwise. The entire app is wrapped with useContext's Provider and the Theme is passed via styled-components' ThemeProvider like so:
import { ThemeProvider } from "styled-components";
<ThemeContext.Provider value={{theme,themeToggler,themeColor,setThemeColor}}>
<ThemeProvider theme={themeStyle}>
{children}
</ThemeProvider>
</ThemeContext.Provider>
This is the CSS part using styled-components for the Input and Label elements:
export const Input = styled.input( ({theme}) => `
border-radius: 10px;
width: 100%;
font-size: 1rem;
background: ${theme.backgroundColor3};
border: 0;
color: ${theme.textColor1};
line-height: 50px;
padding: 5px 20px;
box-sizing: border-box;
font-family: Montserrat;
&:focus
{
outline: none;
}
&[type=password]
{
font-size: 1.75rem;
}
`);
export const Label = styled.label( ({theme}) => `
font-size: 1rem;
font-family: Montserrat;
color: ${theme.textColor3};
cursor: text;
position: absolute;
top: 30%;
left: 5.5%;
border: 1px solid ${theme.borderColor};
transition: 0.2s ease all;
background: none;
${Input}:focus + &,
${Input}:not(:placeholder-shown) + &
{
background: ${theme.primaryColor2};
padding: 0.2rem 0.5rem 0.2rem;
border-radius: 0.5rem;
top: -15%;
left: 3%;
font-size: 0.9rem;
color: #fff;
}
`);
Maybe !important rule solve your problem. You can try write !important after your css properties.
Example:
background: ${theme.primaryColor2} !important;
I am using Stripe as my payment processor on BigCommerce. It works perfectly. The problem is that my site theme has a black background. When you type in your credit card info, the text is black in the Stripe inputs so you can't see it. I've tried to use CSS in both checkout.scss and optimized-checkout.scss to try and overwrite it, but since Stripe is loaded via JS and in what looks to be an iFrame, I can't figure it out.
I've added this css to both and it still doesn't work
input {
color: #eee !important;
}
May be you can use JavaScript for this,
document.getElementById("element_id").style etc...
I did not do that thing earlier, but this solution works on these types of scenarios!
but since Stripe is loaded via JS and in what looks to be an iFrame, I can't figure it out.
Indeed! It doesn't use the styling in your CSS, you have to specify it via Javascript by passing a style object when creating the Element:
https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-style
https://stripe.dev/elements-examples/
If you're not the one writing the code that interacts with stripe.js at this level you probably want to reach out to Bigcommerce or something to ask them to expose access in some way.
var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
var elements = stripe.elements();
var card = elements.create('card', {
style: {
base: {
iconColor: '#666EE8',
color: 'white', // color of the text : https://stripe.com/docs/js/appendix/style
lineHeight: '40px',
fontWeight: 300,
fontFamily: 'Helvetica Neue',
fontSize: '15px',
'::placeholder': {
color: '#CFD7E0',
},
},
}
});
card.mount('#card-element');
* {
font-family: "Helvetica Neue", Helvetica;
font-size: 15px;
font-variant: normal;
padding: 0;
margin: 0;
}
body {
background: #171515;
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
}
form {
width: 480px;
margin: 20px 0;
}
.group {
box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10),
0 3px 6px 0 rgba(0,0,0,0.08);
border-radius: 4px;
margin-bottom: 20px;
}
label {
position: relative;
color: #8898AA;
font-weight: 300;
height: 40px;
line-height: 40px;
margin-left: 20px;
display: flex;
flex-direction: row;
}
.group label:not(:last-child) {
border-bottom: 1px solid #F0F5FA;
}
label > span {
width: 80px;
text-align: right;
margin-right: 30px;
}
.field {
background: transparent;
font-weight: 300;
border: 0;
color: #31325F;
outline: none;
flex: 1;
padding-right: 10px;
padding-left: 10px;
cursor: text;
}
.field::-webkit-input-placeholder { color: #CFD7E0; }
.field::-moz-placeholder { color: #CFD7E0; }
<script src="https://js.stripe.com/v3/"></script>
<body>
<form>
<div class="group">
<label>
<span>Card</span>
<div id="card-element" class="field"></div>
</label>
</div>
</form>
</body>
I am building a react video component based on VideoJS and I used to style VideoJS player using a stylesheet of mine but since I import it as recommended by Next.js documentation, some class targeting seem not to work properly and my custom CSS does not apply to .video-js css components.
This works:
.video {
font-family: 'Inter', -apple-system, Helvetica;
font-weight: bold;
}
.video *:before {
text-shadow: 1px 1px 7px rgba(10, 10, 10, 0.5);
}
This doesn't work:
/* Big play button */
.video .vjs-big-play-button {
height: 2em;
width: 2em;
font-size: 5em;
line-height: 2em;
border: none !important;
border-radius: 9999px;
}
My VideoPlayer component:
import { useCallback, useEffect, useState } from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css'
import styles from '../styles/video-player.module.css';
function VideoPlayer(props) {
const [videoEl, setVideoEl] = useState(null);
const onVideo = useCallback((el) => {
setVideoEl(el)
}, [])
useEffect(() => {
if (videoEl == null) return
const player = videojs(videoEl, props)
return () => {
player.dispose()
}
}, [props, videoEl])
return (
<div data-vjs-player>
<video className={`video-js ${styles.video} vjs-big-play-centered`} ref={onVideo}/>
</div>
)
}
export default VideoPlayer;
As I mentioned, I used to style video.js player this way and it always worked perfectly until I switched to Next.js. Even stranger, the .video class doesn't appear in the browser's developer tools when inspecting the page.
Is there a way I could apply my custom styling properly with Next.js ?
So after looking for a workaround, I found that styling my custom video component in my global.scss file would actually work. I don't particularly know why specifically but here's how you can do:
This is my global.scss file:
/* Base styling */
/* .class { ... } */
/* VideoJS styling -> */
.video-js.video {
* {
& :before {
text-shadow: 1px 1px 7px rgba(10, 10, 10, 0.5);
}
}
&:hover {
.vjs-big-play-button {
background-color: rgba(255, 255, 255, 1);
}
}
.vjs-big-play-button {
height: initial;
width: initial;
font-size: 5em;
line-height: 6.15rem;
padding: 1em;
border: none;
border-radius: 9999px;
background-color: rgba(255, 255, 255, 0.8);
& :before {
margin: 0;
padding: 0;
}
}
.vjs-control-bar {
width: 90%;
min-height: 5em;
margin: 2rem auto;
padding: 0 1em;
border-radius: 1em;
}
}
So you won't have to import '../styles/video-player/module.scss' in VideoPlayer React component
I have an input field defined by Algolia InstantSearch v3.35.1 widget ais-search-box that is not responding to overrides in my custom .css file.
I show the relevant info below. Looking at the input field element using the browser debugger, it does appear that the correct widget style to override is input.ais-SearchBox-input. The style override also appears correct, having successfully done it in other areas.
Any ideas on what my mistake is?
Thanks,
Bob
Snip from Browser Debugger
Widget Style
.ais-SearchBox-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0.3rem 1.7rem;
width: 100%;
position: relative;
background-color: #fff;
border: 1px solid #c4c8d8;
border-radius: 5px; }
.ais-SearchBox-input::-webkit-input-placeholder {
color: #a5aed1; }
.ais-SearchBox-input::-moz-placeholder {
color: #a5aed1; }
.ais-SearchBox-input:-ms-input-placeholder {
color: #a5aed1; }
.ais-SearchBox-input:-moz-placeholder {
color: #a5aed1; }
Override Style - tmd_basic.css
.mySearchField .input.ais-SearchBox-input{
font-size: 14px;
font-weight: 600;
padding-left: 5px;
padding-bottom: 10px;
background-color: red;
}
search.component.ts
import {Component, OnInit} from '#angular/core';
import {FadeInTop} from "../../shared/animations/fade-in-top.decorator";
import {ActivatedRoute} from '#angular/router';
import algoliasearch from 'algoliasearch/lite';
#FadeInTop()
#Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['../../../assets/css/tmd_basic.css']
})
export class SearchComponent implements OnInit {
search.component.html
<ais-instantsearch [config]="config">
<ais-search-box placeholder="Let's find something on TMD..." class="mySearchField"></ais-search-box>
</ais-instantsearch>
Try the below CSS.
mySearchField .ais-SearchBox-input{
font-size: 14px !important;
font-weight: 600 !important;
padding-left: 5px !important;
padding-bottom: 10px !important;
background-color: red !important;
}
I'm currently working on a project that contains vuejs and I have a need to develop a datepicker. To do this, I've decided to use the following package v-calendar
I've been able to implement the component and works as expected out-of-the-box, however I'm trying some customization like styles (following the documentation) but it just won't work of some cases, can't figure out why.
The idea is to achieve this:
I've been able to set the header style through setupCalendar, however, when I try to apply the style to the content it won't change.
After searching further in the documentation, I've noticed that they were passing the style as attributes, to which I've tried to replicate without any success.
I also wanted to know, if it's possible to submit the received $attrs that are inherited by the father-component into the input? At the moment I'm passing 1 by 1 using input-props but I'm wondering if theres a better approach.
right now it's like this:
any suggestions?
<template>
<date-picker
:attributes="attributes"
v-model="date"
:input-props="{
id: $attrs.id,
name: $attrs.name,
class: 'input--default color--white',
autocomplete: 'nope',
readonly: true
}"
>
</date-picker>
</template>
<script>
// packages
import { setupCalendar, DatePicker } from 'v-calendar'
import 'v-calendar/lib/v-calendar.min.css';
setupCalendar({
locale: 'pt-PT',
themeStyles: {
wrapper: {
fontSize: '17px',
lineHeight: '21px',
boxShadow: '5px 5px 10px 1px rgba( 0, 0, 0, .10 )',
},
header: {
color: '#f7890b',
textTransform: 'capitalize'
},
weekdays: {
color: '#ededed'
},
},
attributes: [{
contentStyle: {
color: '#ff4d4d', // Red
fontWeight: 600,
fontSize: '10px',
},
popover: { color: 'yellow', },
highlight: {
backgroundColor: 'purple',
},
}]
});
export default {
inheritAttrs: false,
components: {
DatePicker
},
data () {
return {
date: null,
attributes: [{
contentStyle: {
color: '#ff4d4d', // Red
fontWeight: 600,
fontSize: '10px',
},
popover: { color: 'yellow', },
highlight: {
backgroundColor: 'purple',
},
}]
}
}
}
</script>
<style>
</style>
If using vue-datepicker you can change the css style adding this styles to your .css or in your view inside <style> ...</style>
Here an example of the elements, i already use to change the input as bootstrap style
body {
font-family: "Helvetica Neue Light", Helvetica, sans-serif;
padding: 1em 2em 2em;
}
input,
select {
padding: 0.75em 0.5em;
font-size: 100%;
border: 1px solid #ccc;
width: 100%;
}
select {
height: 2.5em;
}
.example {
background: #f2f2f2;
border: 1px solid #ddd;
padding: 0em 1em 1em;
margin-bottom: 2em;
}
code,
pre {
margin: 1em 0;
padding: 1em;
border: 1px solid #bbb;
display: block;
background: #ddd;
border-radius: 3px;
}
.settings {
margin: 2em 0;
border-top: 1px solid #bbb;
background: #eee;
}
h5 {
font-size: 100%;
padding: 0;
}
.form-group {
margin-bottom: 1em;
}
.form-group label {
font-size: 80%;
display: block;
}