lmosele

lmosele

import React from "react"; // "react": "^16.8.6",
import Frame, { FrameContextConsumer } from "react-frame-component";  // "react-frame-component": "^4.1.0",
import { StyleSheetManager, withTheme, ThemeProvider } from "styled-components"; // "styled-components": "^3.3.3",

export default withTheme(props => {
  const { theme, style = {}, children, ...rest } = props;
  return (
    <Frame
      style={{
        display: "block",

lmosele

// clicking outside of div will hide <p>
const Menu = props => {
  const { ref, isComponentVisible } = useComponentVisible(true);

  return (
    <div ref={ref}>
      {isComponentVisible && <p>{props.children}</p>}
    </div>
  );
};

lmosele

import * as React from 'react';
import styled, {css} from 'styled-components';
import { IStyledProps } from 'types/theme-types';

function validate(value) {
  if (value.length > 0) {
    return true;
  } else {
    return false;
  }

lmosele

.bell-ring {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NyA0NiI+PGRlZnM+PHN0eWxlPi5jbHMtNXtmaWxsOiM2Y2M4ZGV9PC9zdHlsZT48L2RlZnM+PGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+PGcgaWQ9IkxheWVyXzEtMiIgZGF0YS1uYW1lPSJMYXllciAxIj48cGF0aCBkPSJNMTUgMzdjLTUgMC03IDItNyA3YTEgMSAwIDAgMCAxIDJoMjB2LTl6IiBmaWxsPSIjYmRiZmM2Ii8+PHBhdGggZD0iTTI0IDEzYTEgMSAwIDAgMC0xIDF2MWExIDEgMCAwIDAgMSAxaDN2MWMtMTAgMS0xNyA4LTE3IDE3YTEgMSAwIDAgMCAxIDFoMThWMTN6IiBmaWxsPSIjZmNiZjUzIi8+PHBhdGggZD0iTTQzIDM3YzQgMCA3IDIgNyA3YTEgMSAwIDAgMS0yIDJIMjl2LTl6IiBmaWxsPSIjYzZjOWQ0Ii8+PHBhdGggZD0iTTMzIDEzYTEgMSAwIDAgMSAxIDF2MWExIDEgMCAwIDEtMSAxaC0zdjFjMTEgMSAxNyA4IDE3IDE3YTEgMSAwIDAgMS0xIDFIMjlWMTN6IiBmaWxsPSIjZmRjYTdhIi8+PHBhdGggY2xhc3M9ImNscy01IiBkPSJNNyAyMGwtNi0yYTYgNiAwIDAgMC0xIDJsNiAzaDFsMS0yLTEtMXoiLz48cGF0aCBkPSJNMTcgMTBsLTMtNGE2IDYgMCAwIDAtMiAxbDMgNGgydi0xem0xMy0zYTIgMiAwIDAgMCAwLTFWMGgtMnY2bDEgMWEzIDMgMCAwIDEgMSAwem0xNS0zbC0zIDR2MmgxbDMtNGEyMCAyMCAwIDAgMS0xLTJ6IiBmaWxsP

lmosele

@charset "utf-8";
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.otf");
}
// @font-face {
//   font-family: "Merriweather";
//   src: url("../fonts/Merriweather-Regular.ttf");
// }

lmosele

/* $this will always target the top level selector */
.filter-block {
    $this: &;
    &__title {
        color: black;
    }
    &--expandable {
        #{$this}__title {
            color: blue;
        }

lmosele

// enzyme requires you to set up jsdom for rendering
var jsdom = require('jsdom').jsdom;

var exposedProperties = ['window', 'navigator', 'document'];

global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    exposedProperties.push(property);

lmosele

{
  "name": "project",
  "main": "index.js",
  "scripts": {
    "build-css": "node-sass --include-path scss src/styles/main.scss   dist/css/main.min.css",
    "watch-css": "nodemon -e scss -x \"npm run build-css\" "
  },
  "devDependencies": {
    "node-sass": "^4.5.1",
    "nodemon": "^1.11.0"

lmosele

// This simple jquery script adds a class to an element once it reaches the bottom of a container (for example, a navbar switching colors once it reaches a new section on the page

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    var topofDiv = $(".banner").offset().top; //use the element you want to limit the styles to
    var height = $(".banner").outerHeight(); 
     
    if (scroll >= (topofDiv + height) - 80) { // the -80 should be the height of the container that's changing
          $("#topNav").addClass("scrolled"); // this is where you add the new class for the element you want to change
      } else {