mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-02 07:43:11 +03:00
Cleaned up Portal styles
This commit is contained in:
Peter Zimon
parent
4c6cf330c4
commit
db8aa33dfb
@ -549,44 +549,6 @@ video {
|
||||
--tw-backdrop-sepia: ;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.container {
|
||||
max-width: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 768px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
.container {
|
||||
max-width: 1536px;
|
||||
}
|
||||
}
|
||||
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.static {
|
||||
position: static;
|
||||
}
|
||||
@ -595,76 +557,72 @@ video {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
.m-auto {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.transform {
|
||||
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
.w-screen {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px;
|
||||
.max-w-lg {
|
||||
max-width: 51.2rem;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
.rounded-lg {
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
|
||||
.bg-\[rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1.6rem;
|
||||
}
|
||||
|
||||
.pt-8 {
|
||||
padding-top: 3.2rem;
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.outline {
|
||||
outline-style: solid;
|
||||
}
|
||||
|
||||
.blur {
|
||||
--tw-blur: blur(8px);
|
||||
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.filter {
|
||||
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.backdrop-filter {
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
/* Custom reset */
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
.transition {
|
||||
transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.ease-in-out {
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
body {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,145 +0,0 @@
|
||||
export const GlobalStyles = `
|
||||
/* Colors
|
||||
/* ----------------------------------------------------- */
|
||||
:root {
|
||||
--black: #000;
|
||||
--grey0: #1d1d1d;
|
||||
--grey1: #333;
|
||||
--grey2: #3d3d3d;
|
||||
--grey3: #474747;
|
||||
--grey4: #515151;
|
||||
--grey5: #686868;
|
||||
--grey6: #7f7f7f;
|
||||
--grey7: #979797;
|
||||
--grey8: #aeaeae;
|
||||
--grey9: #c5c5c5;
|
||||
--grey10: #dcdcdc;
|
||||
--grey11: #e1e1e1;
|
||||
--grey12: #eaeaea;
|
||||
--grey13: #f9f9f9;
|
||||
--grey14: #fbfbfb;
|
||||
--white: #fff;
|
||||
--red: #f02525;
|
||||
--yellow: #FFDC15;
|
||||
--green: #7FC724;
|
||||
}
|
||||
|
||||
/* Globals
|
||||
/* ----------------------------------------------------- */
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 1.6rem;
|
||||
height: 100%;
|
||||
line-height: 1.6em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: var(--grey2);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button,
|
||||
button span {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
*, ::after, ::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
line-height: 1.15em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 35px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.022em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.021em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.019em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 15px;
|
||||
line-height: 1.5em;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a,
|
||||
.gh-portal-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
svg {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: 10px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
letter-spacing: -0.022em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
letter-spacing: -0.021em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 26px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
letter-spacing: -0.021em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 26px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
letter-spacing: -0.019em;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default GlobalStyles;
|
||||
@ -1,6 +1,5 @@
|
||||
import Frame from './Frame';
|
||||
import AppContext from '../AppContext';
|
||||
import {getFrameStyles} from './Frame.styles';
|
||||
import {ReactComponent as SearchIcon} from '../icons/search.svg';
|
||||
import {ReactComponent as ClearIcon} from '../icons/delete.svg';
|
||||
|
||||
@ -85,21 +84,13 @@ class PopupContent extends React.Component {
|
||||
}
|
||||
|
||||
function Search() {
|
||||
let pageClass = 'search';
|
||||
|
||||
let className = 'gh-portal-popup-container';
|
||||
|
||||
const containerClassName = `${className} ${pageClass}`;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={'gh-portal-popup-wrapper'}>
|
||||
<div className={containerClassName} style={{}}>
|
||||
<div>
|
||||
<SearchIcon alt='Search' />
|
||||
<input placeholder='Search posts, tags, and authors' />
|
||||
<ClearIcon alt='Clear' />
|
||||
</div>
|
||||
<div className='bg-[rgba(0,0,0,0.2)] h-screen w-screen pt-8'>
|
||||
<div className='bg-white max-w-lg rounded-lg shadow-lg p-4 m-auto'>
|
||||
<SearchIcon alt='Search' />
|
||||
<input placeholder='Search posts, tags, and authors' />
|
||||
<ClearIcon alt='Clear' />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
@ -128,12 +119,11 @@ export default class PopupModal extends React.Component {
|
||||
}
|
||||
|
||||
renderFrameStyles() {
|
||||
const FrameStyle = getFrameStyles({});
|
||||
const styles = `
|
||||
:root {
|
||||
--brandcolor: ${this.context.brandColor || ''}
|
||||
}
|
||||
` + FrameStyle;
|
||||
`;
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -151,12 +141,10 @@ export default class PopupModal extends React.Component {
|
||||
...Styles.frame.common
|
||||
};
|
||||
|
||||
let className = 'gh-portal-popup-background';
|
||||
|
||||
return (
|
||||
<div style={Styles.modalContainer} className='gh-root-frame'>
|
||||
<Frame style={frameStyle} title="portal-popup" head={this.renderFrameStyles()}>
|
||||
<div className={className} onClick = {e => this.handlePopupClose(e)}></div>
|
||||
<div onClick = {e => this.handlePopupClose(e)}></div>
|
||||
<PopupContent />
|
||||
</Frame>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,12 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Custom reset */
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
@ -1,10 +1,101 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
|
||||
module.exports = {
|
||||
theme: {
|
||||
screens: {
|
||||
sm: '640px',
|
||||
md: '768px',
|
||||
lg: '1024px',
|
||||
xl: '1280px',
|
||||
'2xl': '1400px'
|
||||
},
|
||||
spacing: {
|
||||
px: '1px',
|
||||
0: '0px',
|
||||
0.5: '0.2rem',
|
||||
1: '0.4rem',
|
||||
1.5: '0.6rem',
|
||||
2: '0.8rem',
|
||||
2.5: '1rem',
|
||||
3: '1.2rem',
|
||||
3.5: '1.4rem',
|
||||
4: '1.6rem',
|
||||
5: '2rem',
|
||||
6: '2.4rem',
|
||||
7: '2.8rem',
|
||||
8: '3.2rem',
|
||||
9: '3.6rem',
|
||||
10: '4rem',
|
||||
11: '4.4rem',
|
||||
12: '4.8rem',
|
||||
14: '5.6rem',
|
||||
16: '6.4rem',
|
||||
20: '8rem',
|
||||
24: '9.6rem',
|
||||
28: '11.2rem',
|
||||
32: '12.8rem',
|
||||
36: '14.4rem',
|
||||
40: '16rem',
|
||||
44: '17.6rem',
|
||||
48: '19.2rem',
|
||||
52: '20.8rem',
|
||||
56: '22.4rem',
|
||||
60: '24rem',
|
||||
64: '25.6rem',
|
||||
72: '28.8rem',
|
||||
80: '32rem',
|
||||
96: '38.4rem'
|
||||
},
|
||||
maxWidth: {
|
||||
none: 'none',
|
||||
0: '0rem',
|
||||
xs: '32rem',
|
||||
sm: '38.4rem',
|
||||
md: '44.8rem',
|
||||
lg: '51.2rem',
|
||||
xl: '57.6rem',
|
||||
'2xl': '67.2rem',
|
||||
'3xl': '76.8rem',
|
||||
'4xl': '89.6rem',
|
||||
'5xl': '102.4rem',
|
||||
'6xl': '115.2rem',
|
||||
'7xl': '128rem',
|
||||
'8xl': '140rem',
|
||||
'9xl': '156rem',
|
||||
full: '100%',
|
||||
min: 'min-content',
|
||||
max: 'max-content',
|
||||
fit: 'fit-content',
|
||||
prose: '65ch'
|
||||
},
|
||||
borderRadius: {
|
||||
sm: '0.2rem',
|
||||
DEFAULT: '0.4rem',
|
||||
md: '0.6rem',
|
||||
lg: '0.8rem',
|
||||
xl: '1.2rem',
|
||||
'2xl': '1.6rem',
|
||||
'3xl': '2.4rem',
|
||||
full: '9999px'
|
||||
},
|
||||
fontSize: {
|
||||
xs: '1.2rem',
|
||||
sm: '1.4rem',
|
||||
md: '1.5rem',
|
||||
lg: '1.8rem',
|
||||
xl: '2rem',
|
||||
'2xl': '2.4rem',
|
||||
'3xl': '3rem',
|
||||
'4xl': '3.6rem',
|
||||
'5xl': ['4.8rem', '1.15'],
|
||||
'6xl': ['6rem', '1'],
|
||||
'7xl': ['7.2rem', '1'],
|
||||
'8xl': ['9.6rem', '1'],
|
||||
'9xl': ['12.8rem', '1']
|
||||
}
|
||||
},
|
||||
content: [
|
||||
'./src/**/*.{js,jsx,ts,tsx}'
|
||||
],
|
||||
theme: {
|
||||
extend: {}
|
||||
},
|
||||
plugins: []
|
||||
};
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user