lmosele’s gists

lmosele / test.svg

Created December 11, 2019 04:01

testing

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

lmosele / Framed.js

Created October 4, 2019 14:30

Styled Components with React Frame

	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 / Usage.js

Created July 8, 2019 21:07

React On Click Outside of Element Hook

	// 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 / fieldWrapper

Created June 26, 2018 17:25

React Styled Components with State & Field Validation

	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 / _svg.scss

Created February 9, 2018 19:06

data uri svg example

.bell-ring {

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

lmosele / Sass config boiletplate

Last active December 7, 2017 21:13

	@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.css

Created May 26, 2017 14:45

Selector scoping in sass

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

lmosele / mocha-runner.js

Created May 8, 2017 17:37

Solution to `It looks like you called `mount()` without a global document being loaded.`

	// 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 / package.json

Last active May 7, 2017 19:23

extremely simple config for basic sass projects

	{
	"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 / scrollbar.js

Last active May 7, 2017 19:24

just a stupid simple jquery thing for styles on scroll

	// 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 {

Lucas Mosele lmosele