David Lagacé davidlagace
davidlagace
/ FormSelect.js
Last active
January 18, 2021 03:40
REACT react-hook-form nested form with material-ui
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, {useEffect} from "react"; | |
| import {useFormContext, Controller} from "react-hook-form"; | |
| import MenuItem from "@material-ui/core/MenuItem"; | |
| import {formSelectStyles} from "./FormSelect.styles"; | |
| import {TextField} from "@material-ui/core"; | |
| import InputLabel from "@material-ui/core/InputLabel"; | |
| function FormSelect(props) { | |
| const {name, label, options} = props; | |
| const classes = formSelectStyles(); |
davidlagace
/ sticky-bottom.html
Created
July 24, 2019 19:22
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="js-position-sticky-bottom a-slide-from-bottom"> | |
| ... | |
| </div> |
davidlagace
/ _in-viewport-animation.scss
Created
June 17, 2019 20:34
Detection in viewport element to animate.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ***************************************************************************** | |
| * | |
| * Global animation setup | |
| * | |
| * ***************************************************************************** */ | |
| @keyframes fade-in-viewport { | |
| 0% { | |
| opacity: 0 | |
| } | |
| 100% { |
davidlagace
/ _in-viewport-animation.scss
Created
June 17, 2019 20:32
Detection in viewport element to animate.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ***************************************************************************** | |
| * | |
| * Global animation setup | |
| * | |
| * ***************************************************************************** */ | |
| @keyframes fade-in-viewport { | |
| 0% { | |
| opacity: 0 | |
| } | |
| 100% { |
davidlagace
/ bootstrap-4--missing-oocss-classes.scss
Created
June 14, 2019 18:19
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ***************************************************************************** | |
| * | |
| * Utilities | |
| * | |
| * ***************************************************************************** */ | |
| // Paddings | |
| // -------------------------------------------------------- | |
| .pl-card { | |
| padding-left: $card-body-padding-x; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "webpack-4-bootstrap-config", | |
| "version": "1.0.0", | |
| "description": "Simple working webpack 4, bootstrap configuration", | |
| "scripts": { | |
| "webpack:build": "webpack --mode=production --env.production", | |
| "webpack:dev": "webpack --mode=development --env.development", | |
| "webpack:watch": "webpack --mode=development --env.development --watch" | |
| }, | |
| "author": "David Lagace", |
davidlagace
/ bootstrap-4--oocss-adds-on.scss
Last active
June 14, 2019 17:52
Bootstrap 4 OOCSS class add-ons
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ---------------------------------- | |
| * Colors | |
| * | |
| * Use : .color--[my custom varibale in $theme-colors] | |
| * ---------------------------------- */ | |
| @each $color, $value in $theme-colors { | |
| .color--#{$color} { | |
| color: $value !important; | |
| } |
davidlagace
/ bootstrap-4--mixin-oocss-borders.scss
Last active
June 14, 2019 17:56
Create OOCSS class with Bootstrap 4 theme variables.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ***************************************************************************** | |
| * | |
| * Borders | |
| * | |
| * ***************************************************************************** */ | |
| /** | |
| @mixin createClassBorders($bordersMap, $themeVariantsMap) | |
| $borderMap<Map> An array of the borders property and abbreviation used for the OOCSS class name. |
davidlagace
/ bootstrap-4--mixin-media-scale.scss
Last active
June 14, 2019 17:56
Mixins for Bootstrap 4 to implement a value on multiple breakpoint of a property
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ***************************************************************************** | |
| * | |
| * Media queries mixins | |
| * | |
| * ***************************************************************************** */ | |
| /** | |
| @mixin media-scale($elem, $defaultValue, $mdValue, $lgValue) | |
| $elem The CSS property |
davidlagace
/ device-orientation-detection.js
Last active
August 2, 2018 19:01
Detect orientation (portrait/landscape) of device
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // -------------------------------- | |
| // Single use | |
| window.matchMedia("(orientation: portrait)").matches; // return true if device is in portrait | |
| // -------------------------------- | |
| // Watch for changes | |
| var mql = window.matchMedia("(orientation: portrait)"); | |
| mql.addListener(handleOrientationChange); | |
| handleOrientationChange(mql); |
NewerOlder