I use the Twemoji library to get emoji icons in my Next js App, they appear as <span><img></span> in the final HTML and I can override their default width and height using !important in my globals.scss file:
.customize { //Parent class containers 3 buttons, each one has an emoji element
top: 88%;
right: calc(50vw - (52.2px + 3rem));
button {
span img[style]{
width: 35px !important;
height: 35px !important;
}
}
}
Then I tried to extract it as a [].module.scss file, everything works but the images don't change size whatsoever. Why?
Edit
Here is the component I'm trying to style:
import ThemeButton from '../components/themeCustomizeButton' // a button that renders an emoji
import LanguageSwitcher from '../components/LanguageSwitch' // a button that renders an emoji
import Complex from '../components/ComplexitySwitch' // a button that renders an emoji
import styles from "../styles/local/components/customize.module.scss" // importing .module.scss
function Customizing() {
return(
<section className={styles.customize}>
<ThemeButton />
<LanguageSwitcher />
<Complex />
</section>
)
}
export default Customizing
Just use this code before wherever you are trying to extract
$(document).ready(function () {
// Set the size of the rendered Emojis
// This can be set to 16x16, 36x36, or 72x72
twemoji.size = '36x36';
});
Related
Im trying to edit the mat-dialog-container but Im not able to, I tried with :host::ng-deep and also I look for answers of this and I found that I should be ablo to give it style by adding a class, but the style is not changin, here is the code about what I found
for the style.css file
.custom-dialog-container .mat-dialog-container {
overflow-y: hidden !important;
display: flex !important;
background-color: red;
}
For the ts componen
abrirForm(id:number){
const data = id??null
this.ventana.open(ModalInspeccionComponent,{data:data, disableClose:true,maxWidth: '100vw', panelClass: 'custom-dialog-container'}).afterClosed().subscribe(e =>{
if (e) {
console.log(e);
}
})
}
The dialog opens outside of the component, so styles in the component file will not be applied to it. Place your styles for .custom-dialog-container in your root css/scss file, and they should apply to the dialog then.
Here is a minimal example: https://stackblitz.com/edit/angular-ivy-ggzfwu?file=src/styles.css
We are adding custombuttons to our fullcalendar like below.
Is there a way to change the background and foreground color of the button?
And is there a way to set padding or margins to the custom buttons?
var calendar = new Calendar(calendarEl, {
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}
});
Yes, you can set any properties you like using CSS.
On inspecting how fullCalendar renders the buttons in HTML, I noticed it gives each one a class according to the property name of the button.
For example, if - per your sample code - you call the button myCustomButton then fullCalendar will give the rendered <button a CSS class called fc-myCustomButton-button. This means you can specify any rules you like for that class, e.g.:
.fc-myCustomButton-button
{
background-color: red !important;
}
(You need the !important so that fullCalendar's other CSS rules don't override it.)
Demo: https://codepen.io/ADyson82/pen/WNJqXLM
I am working on a react project and I am creating a note taking application with a simple text editor. I have a simple note component that is just a div element with an h3 inside that has these styles:
note {
border-bottom: 1px solid gray;
width: 100%;
padding: 1rem;
box-sizing: border-box;
}
.note h3 {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.note:hover {
cursor: pointer;
}
.note.selected {
background: #c9d4d1;
}
Here is also the React code for the note component:
import { useContext, useEffect } from 'react';
import { NotesContext } from '../../App';
import { ResponsiveContext } from '../containers/AppContainer/AppContainer';
import './Note.css';
const Note = ({ note }) => {
const { selectedNoteId, setSelectedNoteId } = useContext(NotesContext);
const toggleEditorView = useContext(ResponsiveContext);
const handleClick = () => {
setSelectedNoteId(note.id);
toggleEditorView();
console.log(note.id);
}
const calculateStyles = selectedNoteId === note.id ? 'note selected' : 'note';
return (
<div onClick={handleClick}
className={calculateStyles}>
<h3>{note.displayTitle || 'New Note'}</h3>
</div>
)
};
export default Note;
I also have a note list which lists all the notes on the left but posting that code as well would make this post so long, you can go to the github repo to see all the code.
When I try to style the text using the text editor and make it a heading (this happens only when I try to make it a heading, when I try to make the text bold and italic it works fine) the first note's text gets pushed to the left if it is long enough (it only happens on the first note no matter which note you are styling with the text editor) and I don't see any updates through the elements tab on the dev tools the element doesn't flash. It is kind of hard to explain what the problem is so I recorded a video showing the exact problem that I am having.
My app in Ionic 4 but I can’t understand how to customize components.
And i want to display alignment position top right corner.
I have tried in global.css file as well as component.css file , but didn't any luck.
async getNotifications() {
const popover = await this.popoverController.create({
component: NotificationComponent,
// event: ev,
cssClass: 'notificationCSS',
translucent: true
});
return await popover.present();
}
In notificationCSS :
.notificationCSS{
top: 0px !important;
right: 0px !important;
}
Ref. Url
I had a similar problem in ionic for dynamically (maybe not exactly correct in angnular world) rendered html elements. My component css file didn't pick up the classes that I was targetting. However global.css did. I would try put your css in global again.
I know how to get SVG icons loading on my website, but what I can't figure out is how to satisfy all the following constraints:
Ability to use SVG icons in CSS
No flash of missing icons (FOMI)
Minimal initial page size
Cached SVGs
Ability to use a CDN
Must be able to use fill: currentColor to make the icon match the current text color, just like icon-fonts
Bonus: Pixel-align the SVGs so they always look sharp
1,2,3 and 4 can be satisfied by using an external sprite map like so:
<svg viewBox="0 0 100 100">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="/assets/sprite-4faa5ef477.svg#icon-asterisk-50af6"></use>
</svg>
But we can't use a CDN until browsers fix the CORS issue.
We can patch in support for external domains, but I'm pretty sure this won't work for CSS because it only watches the DOM (sorry, haven't tested yet), and also it causes your browser to make a whole bunch of failed requests to a file it can't fetch (one for each icon on the page).
We can use a CDN if instead we either inline the entire SVG (increased page size, no caching) or we AJAX it in (causes FOMI).
So, are there any solutions that satisfy all 5 7 constraints?
Basically I want SVGs to be just as convenient as icon-fonts or there's no point switching over. SVGs support multiple colors and are more accessible but I can't get them to look as good, or load as efficiently.
The closest I could get is loading an SVG in an image element and then using it like an "old-fashioned" image sprite. This, as far as I can tell, satisfies all of your constraints. The only disadvantage I can think of is that you lose the ability to modify specific parts of the SVG using CSS. This is however not one of your constraints (correct me if I'm wrong) and it is still possible to modify all of the icon, as you can see in my demo. I created a fiddle and for completeness also include a code snippet.
To emulate a CDN, I created an SVG file and uploaded it to some image hosting service. My apologies to future readers if this service is now down. The SVG file simply has all icons next to each other in it (I created a black square, circle and triangle for now). The difference with SVG sprite maps is thus that the icons are in the SVG itself, not in the defs. It should be quite easy to combine multiple SVGs in a single one, I have not looked for tools that would automate this process.
.icon {
display: inline-block;
vertical-align: top;
width: 30px; /* can be anything */
height: 30px;
background-image: url('http://imgh.us/icons_36.svg');
border: 1px solid #000; /* just to see where the icon is */
}
/* sizes */
.icon.large {
width: 50px;
height: 50px;
background-size: 150px auto;
}
/* icons */
.icon.circle { background-position: -30px 0; }
.icon.large.circle { background-position: -50px 0; }
.icon.triangle { background-position: -60px 0; }
.icon.large.triangle { background-position: -100px 0; }
/* styles */
.icon.info {
/* based on http://stackoverflow.com/a/25524145/962603,
* but you can of course also use an SVG filter (heh) */
filter: invert(100%) sepia(100%) saturate(50000%) hue-rotate(90deg) brightness(70%);
}
.icon.highlight {
/* based on http://stackoverflow.com/a/25524145/962603,
* but you can of course also use an SVG filter (heh) */
filter: invert(100%) sepia(100%) saturate(10000%) hue-rotate(30deg) brightness(50%);
}
<span class="icon square"></span>
<span class="icon circle"></span>
<span class="icon triangle"></span>
<span class="icon circle highlight"></span>
<span class="icon triangle large info"></span>
My best guess is to use data uris, which have pretty great browser support. Via something like Grunticon or their web app Grumpicon.
The output is 2 css files and 1 js that should work seamlessly with your CDN.
The rendered output is very flexible and customizable.
I had pretty much the same problem. This probably doesn't satisfy the FOMI requirement, but it's an interesting hack that got me out of a bind. Basically, this script just swaps every img in the DOM that imports an svg with inline SVG, so you can style it how you want.
// replaces img tags with svg tags if their source is an svg
// allows SVGs to be manipulated in the DOM directly
// 💡 returns a Promise, so you can execute tasks AFTER fetching SVGs
let fetchSVGs = () => {
//gets all the SRCs of the SVGs
let parentImgs = Array.from(document.querySelectorAll('img')).map((img) => {
if(img.src.endsWith('.svg')) {
return img
}
});
let promises = [];
parentImgs.forEach((img) => {
promises.push(
fetch(img.src).then((response) => {
// Error handling
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// saves the SVG
return response.text();
})
)
});
// All fetch() calls have been made
return Promise
.all(promises)
.then((texts)=> {
texts.forEach((text, i) => {
let img = parentImgs[i];
let div = document.createElement('div');
div.innerHTML = text;
img.parentNode.appendChild(div);
let svg = div.firstChild;
img.parentNode.appendChild(svg);
// makes the SVG inherit the class from its parent
svg.classList = img.className;
// removes the junk we don't need.
div.remove();
img.parentNode.removeChild(img);
})
})
.catch((error) => {
console.log(error);
})
};
Otherwise, I came across this on Twitter today
https://twitter.com/chriscoyier/status/1124064712067624960
and applying this CSS to a div allowed me to make a colourable svg icon that can be stored in a CDN
.icon-mask {
display: inline-block;
width: 80px;
height: 80px;
background: red;
-webkit-mask: url(https://cdnjs.cloudflare.com/ajax/libs/simple-icons/3.0.1/codepen.svg);
-webkit-mask-size: cover;
}
Browser support isn't perfect yet though.
Hope this helps someone 😄
for cache you can try HTML5 app cache
https://www.w3schools.com/html/html5_app_cache.asp