This repository has been archived by the owner on Mar 8, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Removed CSX and simplified styles. Allow className everywhere.
- Loading branch information
1 parent
f58a764
commit 1c5fee3
Showing
38 changed files
with
1,235 additions
and
1,173 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,58 +1,67 @@ | ||
| import { percent, rem } from 'csx'; | ||
| import React from 'react'; | ||
| import { style } from 'typestyle'; | ||
| import { classes, style } from 'typestyle'; | ||
| import { colorAmber200, colorAmber500, colorRed700, colorWhite } from '../styling/colors'; | ||
| import { debugClassName } from '../styling/mixins'; | ||
| import { createMemoizedComponent } from '../utils/dom-utils'; | ||
| export function isModernBrowser() { | ||
| try { | ||
| return (Array.from(new Map([[1, 2]]).entries()).join(',') === '1,2' && | ||
| CSS.supports('display', 'grid') && | ||
| CSS.supports('display', 'flex')); | ||
| } | ||
| catch (e) { | ||
| // Some of these are not supported. Assume legacy browser. | ||
| return false; | ||
| } | ||
| } | ||
| // #region style | ||
| export const browseHappyClassName = style(debugClassName('browse-happy'), { | ||
| width: percent(100), | ||
| width: '100%', | ||
| position: 'fixed', | ||
| bottom: 0, | ||
| left: 0, | ||
| zIndex: 100, | ||
| backgroundColor: colorRed700, | ||
| color: colorWhite, | ||
| padding: rem(1), | ||
| paddingBottom: `calc(${rem(1)} + env(safe-area-inset-bottom))`, | ||
| textAlign: 'center', | ||
| paddingTop: '1rem', | ||
| paddingBottom: 'calc(1rem + env(safe-area-inset-bottom))', | ||
| paddingLeft: 'calc(1rem + env(safe-area-inset-left))', | ||
| paddingRight: 'calc(1rem + env(safe-area-inset-right))', | ||
| textAlign: 'center' | ||
| }); | ||
| export const browseHappyHiddenClassName = style(debugClassName('browse-happy-hidden'), { | ||
| $unique: true, | ||
| display: 'none' | ||
| }); | ||
| export const browseHappyLinkClassName = style(debugClassName('browse-happy-link'), { | ||
| $unique: true, | ||
| color: colorAmber500, | ||
| fontWeight: 'bold', | ||
| $nest: { | ||
| '&[data-hidden=true]': { display: 'none' }, | ||
| '& a': { | ||
| color: colorAmber500, | ||
| fontWeight: 'bold', | ||
| $nest: { | ||
| '&:hover, &:focus, &:active': { color: colorAmber200 } | ||
| } | ||
| } | ||
| '&:hover, &:focus, &:active': { color: colorAmber200 } | ||
| } | ||
| }); | ||
| export const BrowseHappy = createMemoizedComponent('BrowseHappy', function (props) { | ||
| var _a; | ||
| const message = (_a = props.message) !== null && _a !== void 0 ? _a : 'Your browser is obsolete. For the best browsing experience, update it for free by visiting'; | ||
| return (React.createElement("div", { id: "browseHappy", className: browseHappyClassName, "data-hidden": typeof window === 'undefined' }, | ||
| // #endregion style | ||
| export function isModernBrowser() { | ||
| try { | ||
| return (Array.from(new Map([[1, 2]]).entries()).join(',') === '1,2' && | ||
| CSS.supports('display', 'grid') && | ||
| CSS.supports('display', 'flex') && | ||
| CSS.supports('color', 'var(--var)')); | ||
| } | ||
| catch (e) { | ||
| // Some of these are not supported. Assume legacy browser. | ||
| return false; | ||
| } | ||
| } | ||
| export const BrowseHappy = createMemoizedComponent('BrowseHappy', function ({ message, className }) { | ||
| message = message !== null && message !== void 0 ? message : 'Your browser is obsolete. For the best browsing experience, update it for free by visiting'; | ||
| return (React.createElement("div", { id: "browseHappy", className: classes(browseHappyClassName, typeof window === 'undefined' && browseHappyHiddenClassName, className) }, | ||
| React.createElement("span", null, | ||
| message, | ||
| "\u00A0"), | ||
| React.createElement("a", { href: "https://browsehappy.com/", target: "_blank", rel: "noopener noreferrer" }, "BrowseHappy"), | ||
| React.createElement("a", { href: "https://browsehappy.com/", target: "_blank", rel: "noopener noreferrer", className: browseHappyLinkClassName }, "BrowseHappy"), | ||
| ".")); | ||
| }); | ||
| export const BrowseHappySSR = ` | ||
| document.addEventListener('DOMContentLoaded', function(){ | ||
| ${isModernBrowser} | ||
| document.addEventListener('DOMContentLoaded', function() { | ||
| ${isModernBrowser}; | ||
| const element = document.getElementById('browseHappy') | ||
| if(isModernBrowser()) element.remove() | ||
| else element.removeAttribute('data-hidden') | ||
| const element = document.getElementById('browseHappy'); | ||
| if(isModernBrowser()) { | ||
| element.remove(); | ||
| } else { | ||
| element.classList.remove('${browseHappyHiddenClassName}'); | ||
| } | ||
| }); | ||
| `; |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,25 @@ | ||
| import { em, percent } from 'csx'; | ||
| import React from 'react'; | ||
| import { style } from 'typestyle'; | ||
| import { classes, style } from 'typestyle'; | ||
| import { colorBlack, colorWhite } from '../styling/colors'; | ||
| import { debugClassName } from '../styling/mixins'; | ||
| import { createMemoizedComponent } from '../utils/dom-utils'; | ||
| import { Ribbon } from './ribbon'; | ||
| // #region style | ||
| export const madeInItalyClassName = style(debugClassName('made-in-italy'), { | ||
| background: 'linear-gradient(90deg, #009246, #009246 30%, #f1f2f1 30%, #f1f2f1 70%, #ce2b37 70%)', | ||
| $nest: { | ||
| '& a': { | ||
| display: 'inline-block', | ||
| width: percent(60), | ||
| fontWeight: 'bold', | ||
| fontSize: em(0.85), | ||
| lineHeight: 1, | ||
| color: colorBlack, | ||
| textShadow: `0 0 0.5rem ${colorWhite}`, | ||
| padding: em(0.5) | ||
| } | ||
| } | ||
| background: 'linear-gradient(90deg, #009246, #009246 30%, #f1f2f1 30%, #f1f2f1 70%, #ce2b37 70%)' | ||
| }); | ||
| export const MadeInItaly = createMemoizedComponent('MadeInItaly', function ({ position }) { | ||
| return (React.createElement(Ribbon, { className: madeInItalyClassName, position: position }, | ||
| React.createElement("a", { href: "http://www.italia.it", target: "_blank", rel: "noopener noreferrer" }, "Made by a proud Italian!"))); | ||
| export const madeInItalyLinkClassName = style(debugClassName('made-in-italy-link'), { | ||
| display: 'inline-block', | ||
| width: '60%', | ||
| fontWeight: 'bold', | ||
| fontSize: '0.85em', | ||
| lineHeight: 1, | ||
| color: colorBlack, | ||
| textShadow: `0 0 5px ${colorWhite}`, | ||
| padding: '5px' | ||
| }); | ||
| // #endregion style | ||
| export const MadeInItaly = createMemoizedComponent('MadeInItaly', function ({ position, className }) { | ||
| return (React.createElement(Ribbon, { className: classes(madeInItalyClassName, className), position: position }, | ||
| React.createElement("a", { className: madeInItalyLinkClassName, href: "http://www.italia.it", target: "_blank", rel: "noopener noreferrer" }, "Made by a proud Italian!"))); | ||
| }); |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,64 +1,56 @@ | ||
| import { percent, px, rem } from 'csx'; | ||
| import React from 'react'; | ||
| import { classes, media, style } from 'typestyle'; | ||
| import { maxWidth7xx } from '../styling/breakpoints'; | ||
| import { classes, style } from 'typestyle'; | ||
| import { colorGrey500, colorGrey800 } from '../styling/colors'; | ||
| import { debugClassName } from '../styling/mixins'; | ||
| import { createMemoizedComponent } from '../utils/dom-utils'; | ||
| // #region style | ||
| const ribbonBaseClassName = style(debugClassName('ribbon-base'), { | ||
| display: 'var(--rl-ribbon-display)', | ||
| position: 'fixed', | ||
| backfaceVisibility: 'hidden', | ||
| zIndex: 99, | ||
| border: `1px solid ${colorGrey800}`, | ||
| boxShadow: `0 0 0.5rem ${colorGrey500}`, | ||
| padding: '0 2%', | ||
| textAlign: 'center' | ||
| }); | ||
| // 29.28% = 100% - (100% / sqrt(2)) | ||
| export const ribbonPositionsClassesNames = { | ||
| 'top-left': style(debugClassName('ribbon-top-left'), { | ||
| top: 0, | ||
| left: 0, | ||
| bottom: 'auto', | ||
| right: 'auto', | ||
| transform: 'translate(-29.28%, -100%) rotate(-45deg)', | ||
| transformOrigin: 'bottom right' | ||
| }), | ||
| 'top-right': style(debugClassName('ribbon-top-right'), { | ||
| top: 0, | ||
| left: 'auto', | ||
| bottom: 'auto', | ||
| right: 0, | ||
| transform: 'translate(29.28%, -100%) rotate(45deg)', | ||
| transformOrigin: 'bottom left' | ||
| }), | ||
| 'bottom-right': style(debugClassName('ribbon-bottom-right'), { | ||
| top: 'auto', | ||
| left: 'auto', | ||
| bottom: 0, | ||
| right: 0, | ||
| transform: 'translate(29.28%, 100%) rotate(-45deg)', | ||
| transformOrigin: 'top left' | ||
| }), | ||
| 'bottom-left': style(debugClassName('ribbon-bottom-left'), { | ||
| top: 'auto', | ||
| left: 0, | ||
| bottom: 0, | ||
| right: 'auto', | ||
| transform: 'translate(-29.28%, 100%) rotate(45deg)', | ||
| transformOrigin: 'top right' | ||
| }) | ||
| }; | ||
| export const Ribbon = createMemoizedComponent('Ribbon', function ({ position, className, children }) { | ||
| let positionCss = null; | ||
| // ${percent(29.28)} = ${percent(100)} - (${percent(100)} / sqrt(2)) | ||
| switch (position) { | ||
| case 'top-left': | ||
| positionCss = { | ||
| top: 0, | ||
| left: 0, | ||
| bottom: 'auto', | ||
| right: 'auto', | ||
| transform: `translate(${percent(-29.28)}, ${percent(-100)}) rotate(-45deg)`, | ||
| transformOrigin: 'bottom right' | ||
| }; | ||
| break; | ||
| case 'bottom-left': | ||
| positionCss = { | ||
| top: 'auto', | ||
| left: 0, | ||
| bottom: 0, | ||
| right: 'auto', | ||
| transform: `translate(${percent(-29.28)}, ${percent(100)}) rotate(45deg)`, | ||
| transformOrigin: 'top right' | ||
| }; | ||
| break; | ||
| case 'bottom-right': | ||
| positionCss = { | ||
| top: 'auto', | ||
| left: 'auto', | ||
| bottom: 0, | ||
| right: 0, | ||
| transform: `translate(${percent(29.28)}, ${percent(100)}) rotate(-45deg)`, | ||
| transformOrigin: 'top left' | ||
| }; | ||
| break; | ||
| default: | ||
| // top-right by default | ||
| positionCss = { | ||
| top: 0, | ||
| left: 'auto', | ||
| bottom: 'auto', | ||
| right: 0, | ||
| transform: `translate(${percent(29.28)}, ${percent(-100)}) rotate(45deg)`, | ||
| transformOrigin: 'bottom left' | ||
| }; | ||
| break; | ||
| } | ||
| const baseClassName = style(debugClassName('ribbon'), { | ||
| position: 'fixed', | ||
| backfaceVisibility: 'hidden', | ||
| zIndex: 99, | ||
| border: `${px(1)} solid ${colorGrey800}`, | ||
| boxShadow: `0 0 ${rem(0.5)} ${colorGrey500}`, | ||
| padding: `0 ${percent(2)}`, | ||
| textAlign: 'center' | ||
| }, positionCss, media({ maxWidth: maxWidth7xx }, { display: 'none' })); | ||
| return React.createElement("div", { className: classes(baseClassName, className) }, children); | ||
| var _a; | ||
| const positionClassName = (_a = ribbonPositionsClassesNames[position]) !== null && _a !== void 0 ? _a : ribbonPositionsClassesNames['top-right']; | ||
| return React.createElement("div", { className: classes(ribbonBaseClassName, positionClassName, className) }, children); | ||
| }); |
Oops, something went wrong.