I am building a ReactJS app and using Zurb Foundation 6. I am also using React Modal: https://reactcommunity.org/react-modal/#documentation.
I want to style the Modal launched through React Modal to look like Zurb Foundation's Reveal. The Reveal SASS looks like this:
// 28. Reveal
// ----------
$reveal-background: $white;
$reveal-width: 600px;
$reveal-max-width: $global-width;
$reveal-padding: $global-padding;
$reveal-border: 1px solid $medium-gray;
$reveal-radius: $global-radius;
$reveal-zindex: 1005;
$reveal-overlay-background: rgba($black, 0.45);
And my Modal CSS is like this:
.modal {
position: absolute;
width: 600px;
top: 20%;
left: 20%;
right: 20%;
bottom: 20%;
background-color: $white;
}
.OverlayClass {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba($black, 0.45);
}
How can I achieve this? I have been experimenting with #include, but no success. At the moment, the Modal I have is not aesthetically pleasing. Help is greatly appreciated.
.your-modal {
#extend .reveal;
/* write your custom css here */
}
instead of using .reveal, now you just need to use the start .your-modal for a modal container.
The foundation section you have there is just the config variables for the reveal. The rest of the .scss for the reveal is here https://github.com/zurb/foundation-sites/blob/develop/scss/components/_reveal.scss
You should be able to structure the rendered HTML from your component to match the elements and classes from Foundation, just avoid the Foundation JS.
Related
I’ve been trying emulate (in Webflow) this nifty 'fluid text hover' from the following codepen: https://codepen.io/robin-dela/pen/KKPYoBq
As you can see, there is a fair amount of HTML, CSS (SCSS) and JS (Babel), but I believe the pertinent code snippet to be the following:
<style>
body {
position: fixed;
height: 100%;
overflow: hidden;
}
canvas {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
.mask {
position: absolute;
z-index: 2;
background: white;
height: 100vh;
width: 100vw;
mix-blend-mode: screen;
/* THE mix-blend-mode ABOVE DISPLAYS IN RED */
}
svg {
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
When I publish my site, the 'CREATIVE' text displays, but without the interactive fluid element. I’m almost certain it’s something to do with the mix-blend-mode, as that is the only code showing up in red. I’ve seen similar questions asked on here, and have tried all the methods offered (changing the body background to white, as opposed to transparent; adding the code as a code block rather than the Inside tag, but nothing has as yet made it work. I’d really appreciate any help.
My Webflow site read-only can be found here:
https://preview.webflow.com/preview/hen-ry?utm_medium=preview_link&utm_source=designer&utm_content=hen-ry&preview=f7f278a8af346d820c843647397c8d76&pageId=6238983c269c21e6d0507afe&workflow=preview
You're probably missing the js file. If you click the little settings button at the top of the JS section, you will see a file called https://robindelaporte.fr/codepen/bundle.js, if you have not loaded this then it won't work.
I'm a front-end developer who just got off the job.
I'm portting Vue.js project to React. but I have a problem.
SCSS Code
px-contents {
margin:30px auto;
px-title{
font-size: 18px;
}
&.favGames {
position: relative;
margin: 40px auto 0;
.btn_more_text {
font-size: 13px;
position: absolute;
right: 0;
top: 0;
}
}
&.exchange__favOrder {
height: calc(100% - 10px);
}
}
Vue Code
<px-contents class="favGames">
...
</px-contents>
Our designer created a custom element with CSS like this.
Can I use this element in React?
If i use element in react.
react throws me an error like
Property 'px-title' does not exist on type 'JSX.IntrinsicElements'
Sorry for my poor English Skill.
I am currently trying to style a bootstrap 4 Modal window within Angular 5.
I have the scss imported into my global.scss and I am giving the modal window the customClass as followed.
this.modalService.open(content, { windowClass: 'tutorial'});
So far so good the popup shows up, in the bottom left corner. But what I want to achieve is a bottom modal like in this case.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_bottom
but whatever I do I cannot seem to get it working.
I just don't seem to be able to stretch the modal all the way. This is my current scss
.tutorial {
position: fixed;
top: auto;
bottom: 0px;
width: 100%;
.modal-dialog{
margin: 0;
}
}
I assumed width: 100% would be fine but somehow it doesn't work.
Any ideas?
So doing the following worked for me
.tutorial-bottom {
position: fixed;
top: auto;
bottom: 0px;
.modal-dialog{
min-width: 100%;
margin: 0;
}
.modal-header {
background: #3e8acc;
color: white;
}
}
Thx to #DahvalJardosh for pointing me in the right direction
I can't find the utility class to hide content to user but show to screen reader in Semantic-UI.
What is the Semantic-ui equivalent of Bootstrap’s sr-only?
Not sure that exists in semantic-ui. A work around is to create a class like so (copied from bootstrap's scaffolding.less #129):
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
I want to give an element a border-top with a tab at the right corner like this:
Since this will be a repeated element within an Adobe Business Catalyst template, I want it to be pure CSS or at least CSS and javascript, without the use of any images. Is there any way this can be done?
Since it's just a decorative element, it doesn't have to be cross-browser.
Have a look at this:
http://jsfiddle.net/8hB7E/
HTML:
<body>
<div class="element">
</div>
</body>
CSS:
body { background: #555 }
.element { background: #000; border-top: 2px solid #fff; height: 100px; position: relative; width: 300px; }
.element:after { background: #fff; content: " "; height: 10px; position: absolute; right: 0; top: 0; width: 20px; }
It utilises the :after pseudo-element (which I find to be really useful!)
For more info see here:
http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/
Unfortunately this won't work in IE7 or 6 - it's not core to the functionality of the website though, so I'd say it's ok as is.