I've just included react-h5-audio-player into my project and following the README page to customise the styles by overwriting the SCSS variables responsible for the colours.
However it seems like my styles just get ignored. Do you have any idea what could be going wrong here? Thank you very much.
This is the codesandbox where I've reproduced the problem: https://codesandbox.io/s/react-and-scss-forked-yeu0q?file=/src/index.js
As you can see I've included the style.css (which contains the overwritten variables) in 3 places -- before importing audioplayer's js, before importing audioplayer's css and after both of these just in case to see if any of these works. I also randomly added !default and !important to the variables hoping that at least some of the syntax would work, but the styles are just keep being ignored.
I will also include the code to this post if someone prefers seeing it here rather in codesandbox:
style.css:
html,
body {
background-color: papayawhip;
font-family: sans-serif;
h1 {
color: tomato;
}
}
$rhap_theme-color: #ff0000; // Color of all buttons and volume/progress indicators
$rhap_background-color: #ff0000 !important; // Color of the player background
$rhap_bar-color: #ff0000 !default; // Color of volume and progress bar
$rhap_time-color: #0000ff !important !default; // Font color of current time and duration
$rhap_font-family: inherit !important; // Font family of current time and duration
index.js:
import React from "react";
import { render } from "react-dom";
import "./styles.scss";
import AudioPlayer from "react-h5-audio-player";
import "./styles.scss";
import "react-h5-audio-player/src/styles.scss";
import "./styles.scss";
const App = () => (
<div>
<h1>Hello</h1>
<AudioPlayer src="http://example.com/audio.mp3" />
</div>
);
render(<App />, document.getElementById("app"));
For another approach you can use this example:
.rhap_container {
background: #f7f7f9;
}
.rhap_controls-section {
margin-bottom: 15px;
}
.rhap_progress-section {
height: 20px;
padding-bottom: 20px;
}
.rhap_main-controls-button {
width: 80px !important;
height: 80px !important;
}
.rhap_main-controls-button {
width: 56px;
height: 56px;
display: block;
}
.rhap_main-controls-button svg {
color: #ff5555;
width: 100%;
height: 100%;
}
.rhap_progress-filled,
.rhap_progress-indicator {
background-color: #ff5555 !important;
}
.rhap_button-clear.rhap_volume-button {
color: #ff5555 !important;
}
.rhap_volume-bar, .rhap_volume-indicator {
background-color: red;
}
Related
<script>
import '#interactjs/auto-start'
import '#interactjs/actions/drag'
import '#interactjs/actions/resize'
import '#interactjs/modifiers'
import '#interactjs/dev-tools'
import interact from '#interactjs/interact'
// Step 1
const slider = interact('.slider') // target elements with the "slider" class
slider
// Step 2
.draggable({ // make the element fire drag events
origin: 'self', // (0, 0) will be the element's top-left
inertia: true, // start inertial movement if thrown
modifiers: [
interact.modifiers.restrict({
restriction: 'self' // keep the drag coords within the element
})
],
// Step 3
listeners: {
move (event) { // call this listener on every dragmove
const sliderWidth = interact.getElementRect(event.target).width
const value = event.pageX / sliderWidth
event.target.style.paddingLeft = (value * 100) + '%'
event.target.setAttribute('data-value', value.toFixed(2))
}
}
})
</script>
<style>
.sliders {
padding: 1.5em
}
/* the slider bar */
.slider {
position: relative;
width: 100%;
height: 1em;
margin: 1.5em auto;
background-color: #29e;
border-radius: 0.5em;
box-sizing: border-box;
font-size: 1em;
-ms-touch-action: none;
touch-action: none;
}
/* the slider handle */
.slider:before {
content: "";
display: block;
position: relative;
top: -0.5em;
width: 2em;
height: 2em;
margin-left: -1em;
border: solid 0.25em #fff;
border-radius: 1em;
background-color: inherit;
box-sizing: border-box;
}
/* display the value */
.slider:after {
content: attr(data-value);
position: absolute;
top: -1.5em;
width: 2em;
line-height:1em;
margin-left: -1em;
text-align: center;
}</style>
<div class="sliders">
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
</div>
I'm trying to use interact.js in rails 6, but I cannot get it to work. I am a newbie so this may be a common question, but how do I properly import an external library like interact.js. I've tried everything I've found online so I imagine I'm looking for the wrong thing. Any help will be appreciated, Thanks in advance!
this syntax:
import '#interactjs/auto-start'
import '#interactjs/actions/drag'
import '#interactjs/actions/resize'
import '#interactjs/modifiers'
import '#interactjs/dev-tools'
import interact from '#interactjs/interact'
is used for npm modules import. You can't do that in the browser without preprocessing your code. You can import the library like this, preferably in a separate script tag. But if you plan to import only one library you can set it
<script src="CDN url"></script>
Put it above your other script tag. Find an appropriate CDN host for your library. Example: https://cdnjs.com/libraries/interact.js/1.0.2
You can't use those import statements like this. If you import the library from CDN, you can use it like in the documentation. Look at https://interactjs.io/docs/installation CDN pre-bundled usage. I presume interact is globally exposed and you don't have to import anything.
If you want to go the proper way about this, you would be setting up a separate project/folder for your frontend application. That application has to be then built, and you attach the built distribution files in your Rails HTML. It depends on your purposes.
Would it be possible to create a "brightness" function using the Houdini API?
For example:
Suppose that you created a CMS in which people can customize 10 colors. Some of the details in the page, however, should have a color that is a variant of those original 10, sometimes darker, sometimes brighter.
:root {
--color-primary: #5a9e6f;
}
.box {
color: var(--color-primary);
border-color: brightness(var(--color-primary), -15%);
background-color: brightness(var(--color-primary), -40%);
}
If so, how would it be your personal take on creating that worklet?
Is using Houdini a core request, or you just want the problem to be solved?
If you want the later, you can get the idea posted here by BoltClock
https://stackoverflow.com/a/41265350/1926369
and extend it to use hsl, that will give you brightness adjustment instead of alpha:
:root {
--color: 20, 40%;
--brightness: 50%;
}
div {
width: 100px;
height: 100px;
display: inline-block;
background-color: hsl(var(--color), var(--brightness));
}
.base {
/* nothing here, default value */
}
.dark {
--brightness: 30%;
}
.light {
--brightness: 70%;
}
<div class="base">BASE</div>
<div class="dark">DARK</div>
<div class="light">LIGHT</div>
I'm trying to use Sapper with Bulma and (S)CSS.
My goal is to apply various paddings on "main" inside of src/routes/layout.html, with padding on desktop devicees, and without (or a smaller one) on mobile.
Using the predefined breakpoints or mixins doesn't work properly for me, as the following code raises an SCSS error :
EDIT: this is the svelte component:
<script>
import 'bulma/css/bulma.css'
// or import 'bulma/bulma.sass' ???
</script>
<style type="text/scss">
main {
position: relative;
max-width: 56em;
background-color: white;
margin: 0 auto;
sizing: border-box;
padding: 0.5em;
+desktop-only {
padding: 2em;
}
}
</style>
What's wrong and how to fix it ?
I am using react-d3-speedometer package for a speedometer. i am able to implement it. but it's max value and minimum value i need to display in horizontal manner. npm package
code
import React, { Component } from 'react';
import ReactSpeedometer from "react-d3-speedometer";
export default class GaugeChart extends Component {
constructor(props) {
super(props);
}
render() {
return <React.Fragment>
<ReactSpeedometer
maxValue={7000}
value={7000}
valueFormat=".1s"
needleColor="red"
startColor="#ffc7ba"
segments={630}
maxSegmentLabels={1}
endColor="#FF471A"
/>
</React.Fragment>
}
}
current view
expected view
Use Below style and add in your CSS file
<style>
text.segment-value:nth-child(1){
font-size: 16px !important;
font-weight: bold;
fill: unset !important;
transform: rotate(0deg) translate(-105px, 20px);
}
text.segment-value:nth-child(2){
font-size: 16px !important;
font-weight: bold;
fill: unset !important;
transform: rotate(0deg) translate(105px, 20px);
}
</style>
OutPut : https://prnt.sc/q5vvzg
Hope I have clear Your answer!
I would like to use styled-components in a React app to create a menu component that contains the styles in the same file thus making it very modular. I'm using react-burger-menu for the menu. Everything works correctly if I wrap BurgerMenu in a styled div like so (styles copied from react-burger-menu README.md):
import React from 'react';
import { slide as BurgerMenu } from 'react-burger-menu';
import styled from 'styled-components';
const StyledBurgerMenu = styled.div`
/* Position and sizing of burger button */
.bm-burger-button {
position: fixed;
width: 36px;
height: 30px;
left: 36px;
top: 36px;
}
/* Color/shape of burger icon bars */
.bm-burger-bars {
background: #373a47;
}
/* Position and sizing of clickable cross button */
.bm-cross-button {
height: 24px;
width: 24px;
}
/* Color/shape of close button cross */
.bm-cross {
background: #bdc3c7;
}
/* General sidebar styles */
.bm-menu {
background: #373a47;
padding: 2.5em 1.5em 0;
font-size: 1.15em;
}
/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
fill: #373a47;
}
/* Wrapper for item list */
.bm-item-list {
color: #b8b7ad;
padding: 0.8em;
}
/* Individual item */
.bm-item {
display: inline-block;
}
/* Styling of overlay */
.bm-overlay {
background: rgba(0, 0, 0, 0.3);
}
`;
export class Menu extends React.Component {
showSettings(event) {
event.preventDefault();
}
render() {
return (
<StyledBurgerMenu>
<BurgerMenu>
<a id="home" className="menu-item" href="/">Home</a>
<a id="about" className="menu-item" href="/about">About</a>
</BurgerMenu>
</StyledBurgerMenu>
);
}
}
export default Menu;
Now this is of course totally okay. However, to learn a lesson and make things a bit more elegant, I'd like to get rid of nesting BurgerMenu inside of StyledBurgerMenu by passing the former to styled(). However, this leads to the burger button being not styled (as per the docs, it's overlaid transparently across all of the screen, so I can click anywhere to open the menu and see that everything else is styled correctly). Is it possible to style the burger button in this fashion or do I have to use the outer div? Here is how I've tried to solve this:
import React from 'react';
import { slide as BurgerMenu } from 'react-burger-menu';
import styled from 'styled-components';
const StyledBurgerMenu = styled(BurgerMenu)`
/* Position and sizing of burger button */
.bm-burger-button {
position: fixed;
width: 36px;
height: 30px;
left: 36px;
top: 36px;
}
/* Color/shape of burger icon bars */
.bm-burger-bars {
background: #373a47;
}
/* Position and sizing of clickable cross button */
.bm-cross-button {
height: 24px;
width: 24px;
}
/* Color/shape of close button cross */
.bm-cross {
background: #bdc3c7;
}
/* General sidebar styles */
.bm-menu {
background: #373a47;
padding: 2.5em 1.5em 0;
font-size: 1.15em;
}
/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
fill: #373a47;
}
/* Wrapper for item list */
.bm-item-list {
color: #b8b7ad;
padding: 0.8em;
}
/* Individual item */
.bm-item {
display: inline-block;
}
/* Styling of overlay */
.bm-overlay {
background: rgba(0, 0, 0, 0.3);
}
`;
export class Menu extends React.Component {
showSettings(event) {
event.preventDefault();
}
render() {
return (
<StyledBurgerMenu>
<a id="home" className="menu-item" href="/">Home</a>
<a id="about" className="menu-item" href="/about">About</a>
</StyledBurgerMenu>
);
}
}
export default Menu;
Thanks!
Is it possible to style the burger button in this fashion or do I have
to use the outer div?
By passing your BurgerMenu to styled, you are not adding an outer div, the styled component only ensures your css is added to the document and passes the className to BurgerMenu. So in order for this to work, BurgerMenu has to render its className prop. If it does that it will work without an outer div (or any other parent).
According to https://github.com/negomi/react-burger-menu/blob/95a58dd41e546730f5661dd7ad8deb7296a725ff/src/menuFactory.js#L251 it assigns its className prop to an inner div, which is not ideal for styled-components but your styles will apply to that div. If you want to style the other elements at or above that level, you will either need to come up with some fancy selectors or assign them from outside.
This is not possible because of the way styled-components work
The styling is being applied to a child div, not the outer div:
Link to code in react-burger-menu