StefanNieuwenhuis
/ stenciljs-modal-overlay__index.html
Created
December 27, 2018 16:01
This file contains 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
| <!DOCTYPE html> | |
| <html dir="ltr" lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> | |
| <title>Stencil Component Starter</title> | |
| <script src="/build/mycomponent.js"></script> | |
| </head> |
StefanNieuwenhuis
/ stenciljs-modal-overlay__logic-step1.tsx
Created
December 27, 2018 16:01
This file contains 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 { Component, Prop } from '@stencil/core'; | |
| @Component({ | |
| tag: 'my-component', | |
| styleUrl: 'my-component.css', | |
| shadow: true | |
| }) | |
| export class MyComponent { | |
| @Prop({mutable: true}) isActive = false; |
StefanNieuwenhuis
/ stenciljs-modal-overlay__render-template.tsx
Created
December 27, 2018 16:02
This file contains 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 { Component } from '@stencil/core'; | |
| @Component({ | |
| tag: 'my-component', | |
| styleUrl: 'my-component.css', | |
| shadow: true | |
| }) | |
| export class MyComponent { | |
| @Prop({mutable: true}) isActive = false; |
StefanNieuwenhuis
/ stenciljs-modal-overlay__styling.css
Created
December 27, 2018 16:03
This file contains 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
| .modal { | |
| display:none; | |
| position: fixed; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: auto; | |
| background-color: rgb(0,0,0); | |
| background-color: rgba(0,0,0, 0.2); |
StefanNieuwenhuis
/ my-component.e2e.ts
Last active
April 11, 2019 13:02
This file contains 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 { newE2EPage } from '@stencil/core/testing'; | |
| describe('my-component', () => { | |
| let page, component, element; | |
| beforeEach(async () => { | |
| page = await newE2EPage(); | |
| await page.setContent('<my-component></my-component>'); | |
| component = await page.find('my-component'); |
StefanNieuwenhuis
/ my-component.tsx
Last active
April 11, 2019 13:04
This file contains 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 { Component } from '@stencil/core'; | |
| @Component({ | |
| tag: 'my-component', | |
| styleUrl: 'my-component.css', | |
| shadow: true | |
| }) | |
| export class MyComponent { | |
| render() { | |
| return <div class="overlay"> |
StefanNieuwenhuis
/ my-component.css
Created
April 12, 2019 11:50
This file contains 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
| .overlay { | |
| opacity: 0; | |
| visibility: hidden; | |
| position:fixed; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; |
StefanNieuwenhuis
/ index.html
Last active
April 12, 2019 14:30
This file contains 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
| <!DOCTYPE html> | |
| <html dir="ltr" lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> | |
| <title>Stencil Component Starter</title> | |
| <script src="/build/mycomponent.js"></script> | |
| </head> |
StefanNieuwenhuis
/ my-component.tsx
Last active
April 12, 2019 14:31
This file contains 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 { Component, Prop } from '@stencil/core'; | |
| @Component({ | |
| tag: 'my-component', | |
| styleUrl: 'my-component.css', | |
| shadow: true | |
| }) | |
| export class MyComponent { | |
| @Prop() open = false; | |
| @Prop() transparent = false; |
StefanNieuwenhuis
/ my-component.e2e.ts
Last active
April 12, 2019 14:33
This file contains 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 { newE2EPage } from '@stencil/core/testing'; | |
| describe('my-component', () => { | |
| let page, component, element; | |
| beforeEach(async () => { | |
| page = await newE2EPage(); | |
| await page.setContent('<my-component></my-component>'); | |
| component = await page.find('my-component'); |