mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-31 02:26:50 +10:00
Changes after baseliner discussion
This commit is contained in:
Vesa Luusua
parent
de414c290e
commit
5461093900
9 changed files with 88 additions and 58 deletions
|
|
@ -46,8 +46,6 @@
|
|||
background-color: transparent;
|
||||
color: var(--matterColor);
|
||||
|
||||
/* Font */
|
||||
composes: h6Font from '../../marketplace.css';
|
||||
cursor: pointer;
|
||||
|
||||
&:enabled:hover {
|
||||
|
|
@ -63,10 +61,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
.closeText {
|
||||
/* Font */
|
||||
composes: h6Font from '../../marketplace.css';
|
||||
}
|
||||
|
||||
.closeIcon {
|
||||
display: inline-block;
|
||||
margin-left: 12px;
|
||||
margin-top: 2px;
|
||||
padding: 6px 0 6px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ export class ModalComponent extends Component {
|
|||
const closeModalMessage = intl.formatMessage({ id: 'Modal.closeModal' });
|
||||
const closeBtn = isOpen
|
||||
? <Button onClick={this.handleClose} rootClassName={css.close} title={closeModalMessage}>
|
||||
<span><FormattedMessage id="Modal.close" /></span>
|
||||
<span className={css.closeText}><FormattedMessage id="Modal.close" /></span>
|
||||
<CloseIcon rootClassName={css.closeIcon} />
|
||||
</Button>
|
||||
: null;
|
||||
|
|
|
|||
|
|
@ -26,15 +26,14 @@
|
|||
*/
|
||||
.topbarDesktopLabel {
|
||||
display: inline-block;
|
||||
margin: 24px 0 16px 0;
|
||||
margin: 20px 0;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
/* logo */
|
||||
.logoLink {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 0 23px 0;
|
||||
height: 100%;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,10 +38,18 @@
|
|||
composes: withPadding;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
padding: 56px 0 0 16px;
|
||||
padding: 48px 0 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.examplesList {
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.example {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--marketplaceColor);
|
||||
}
|
||||
|
|
@ -63,23 +71,31 @@
|
|||
.typographyContent {}
|
||||
|
||||
.baselines {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 5h10M0 11h10M0 17h10" stroke="#ccc"/><path d="M0 23h10" stroke="#ddd" stroke-width="1"/></svg>');
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h10M0 06h10M0 12h10" stroke="#ccc" shape-rendering="crispEdges" /><path d="M0 18h10" stroke="#ddd" stroke-width="1" shape-rendering="crispEdges" /></svg>');
|
||||
background-repeat: repeat;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 7h10M0 15h10M0" stroke="#ccc"/><path d="M0 23h10" stroke="#ddd" stroke-width="1"/></svg>');
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h10" stroke="#ddd" stroke-width="1" shape-rendering="crispEdges" /><path d="M0 08h10M0 16h10M0" stroke="#ccc" shape-rendering="crispEdges" /></svg>');
|
||||
background-repeat: repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.spacing2x {
|
||||
margin: calc(2 * var(--spacingUnit)) 0;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
margin: calc(2 * var(--spacingUnitDesktop)) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fontsContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(4 * var(--spacingUnit));
|
||||
|
||||
@media (--desktopViewport) {
|
||||
margin-top: calc(3 * var(--spacingUnitDesktop));
|
||||
}
|
||||
}
|
||||
|
||||
.fontCard {
|
||||
|
|
@ -87,13 +103,14 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/**
|
||||
* FontCard contains 4px worth of borders, which needs to be factored in since we use
|
||||
* box-sizing: border-box;
|
||||
* In this case, we'll adjust margin-bottoms (24px - 4px = 20px)
|
||||
*/
|
||||
margin-bottom: calc(4 * var(--spacingUnit) - 4px);
|
||||
margin-right: calc(2 * var(--spacingUnit));
|
||||
margin-bottom: calc(2 * var(--spacingUnit) + 2px);
|
||||
|
||||
@media (--desktopViewport) {
|
||||
margin-right: calc(2 * var(--spacingUnitDesktop));
|
||||
margin-bottom: calc(2 * var(--spacingUnitDesktop) + 2px);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.element {
|
||||
|
|
@ -106,12 +123,16 @@
|
|||
flex-grow: 1;
|
||||
width: 100%;
|
||||
background-color: #f1f1f1;
|
||||
padding: calc(2 * var(--spacingUnit));
|
||||
padding: calc(2 * var(--spacingUnit) - 3px) calc(2 * var(--spacingUnit));
|
||||
|
||||
border-style: solid;
|
||||
border-color: #aaa;
|
||||
border-width: 1px;
|
||||
border-top-color: transparent;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
padding: calc(2 * var(--spacingUnitDesktop) - 3px) calc(2 * var(--spacingUnitDesktop));
|
||||
}
|
||||
}
|
||||
|
||||
/* Colors.example */
|
||||
|
|
@ -150,6 +171,10 @@
|
|||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: calc(2 * var(--spacingUnit));
|
||||
|
||||
@media (--desktopViewport) {
|
||||
padding: calc(2 * var(--spacingUnitDesktop) - 2px) calc(2 * var(--spacingUnitDesktop));
|
||||
}
|
||||
}
|
||||
|
||||
.marketplaceColorBackground {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const Example = props => {
|
|||
const exampleWrapperClassName = useDefaultWrapperStyles ? css.defaultWrapperStyles : '';
|
||||
const desc = description ? <p className={css.withMargin}>Description: {description}</p> : null;
|
||||
return (
|
||||
<li>
|
||||
<li className={css.example}>
|
||||
<h3 className={css.withMargin}>
|
||||
<NamedLink
|
||||
name="StyleguideComponent"
|
||||
|
|
@ -192,7 +192,7 @@ const StyleguidePage = props => {
|
|||
}
|
||||
|
||||
const html = examples.length > 0
|
||||
? <ul>
|
||||
? <ul className={css.examplesList}>
|
||||
{examples.map(ex => <Example key={`${ex.componentName}/${ex.exampleName}`} {...ex} />)}
|
||||
</ul>
|
||||
: <p>No examples with filter: {componentName}/{exampleName}</p>;
|
||||
|
|
|
|||
|
|
@ -30,72 +30,70 @@ const Fonts = () => {
|
|||
const heroTitleFontStyling = `Mobile styles:
|
||||
font-size: 48px;
|
||||
line-height: 54px;
|
||||
padding: 5px 0 1px;
|
||||
padding: 1px 0 5px;
|
||||
|
||||
Desktop styles:
|
||||
font-size: 90px;
|
||||
line-height: 96px;
|
||||
padding: 0;`;
|
||||
padding: 1px 0 7px;`;
|
||||
|
||||
const h1FontStyling = `Mobile styles:
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
padding: 3.5px 0 2.5px;
|
||||
|
||||
Desktop styles:
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
padding: 6px 0 2px;`;
|
||||
line-height: 56px;`;
|
||||
|
||||
const h2FontStyling = `Mobile styles:
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
padding: 3px 0 3px;
|
||||
padding: 5px 0 1px;
|
||||
|
||||
Desktop styles:
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
padding: 4px 0 4px;`;
|
||||
padding: 5px 0 3px;`;
|
||||
|
||||
const h3FontStyling = `Mobile styles:
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
padding: 2px 0 4px;
|
||||
padding: 4px 0 2px;
|
||||
|
||||
Desktop styles:
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
padding: 2px 0 6px;`;
|
||||
padding: 4px 0 4px;`;
|
||||
|
||||
const h4FontStyling = `Mobile styles:
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
padding: 3.5px 0 2.5px;
|
||||
padding: 0;
|
||||
|
||||
Desktop styles:
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
padding: 4px 0 4px;`;
|
||||
padding: 5px 0 3px;`;
|
||||
|
||||
const h5FontStyling = `Mobile styles:
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 1.5px 0 4.5px;
|
||||
padding: 4px 0 2px;
|
||||
|
||||
Desktop styles:
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 7px 0 1px;`;
|
||||
line-height: 16px;
|
||||
padding: 2px 0 6px;`;
|
||||
|
||||
const h6FontStyling = `Mobile styles:
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding: 2px 0 4px;
|
||||
padding: 4px 0 2px;
|
||||
|
||||
Desktop styles:
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding: 6px 0 2px;`;
|
||||
line-height: 16px;
|
||||
padding: 2px 0 6px;`;
|
||||
|
||||
const bodyFontStyling = `Mobile styles:
|
||||
font-size: 18px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
@import '../../marketplace.css';
|
||||
|
||||
:root {
|
||||
--topbarHeight: 60px;
|
||||
--logoHeight: 25px;
|
||||
}
|
||||
|
||||
.root {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -8,7 +13,7 @@
|
|||
|
||||
/* Size */
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
height: var(--topbarHeight);
|
||||
|
||||
/* Layout for child components */
|
||||
display: flex;
|
||||
|
|
@ -28,9 +33,8 @@
|
|||
}
|
||||
|
||||
.home {
|
||||
/* Home icon's height is 25px. Touch area is created with padding (covers Topbar height) */
|
||||
display: flex;
|
||||
padding: 17.5px 24px;
|
||||
padding: calc((var(--topbarHeight) - var(--logoHeight)) / 2) 24px;
|
||||
}
|
||||
|
||||
.logoutButton {
|
||||
|
|
@ -86,6 +90,7 @@
|
|||
.searchContainer {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
margin-top: 72px;
|
||||
}
|
||||
|
||||
.mobileHelp {
|
||||
|
|
@ -95,7 +100,7 @@
|
|||
/* Absolute position to avoid affecting the layout of the autocomplete
|
||||
predictions list */
|
||||
position: absolute;
|
||||
top: 115px;
|
||||
top: 114px;
|
||||
|
||||
/* Pull text behind search suggestions */
|
||||
z-index: -1;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
height: var(--topbarHeight);
|
||||
border: none;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
.mobilePredictions {
|
||||
|
|
|
|||
|
|
@ -61,13 +61,13 @@ h1, h2, h3, h4, h5, h6, p, pre {
|
|||
font-weight: 700; /* Bold */
|
||||
font-size: 48px;
|
||||
line-height: 54px;
|
||||
padding: 5px 0 1px; /* 5px + 1px = 6px */;
|
||||
padding: 1px 0 5px; /* 1px + 5px = 6px */;
|
||||
letter-spacing: -1px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
font-size: 90px;
|
||||
line-height: 96px;
|
||||
padding: 0;
|
||||
padding: 1px 0 7px; /* 1px + 7px = 8px */
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
}
|
||||
|
|
@ -79,7 +79,7 @@ h1,
|
|||
font-weight: 600; /* SemiBold */
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
padding: 3.5px 0 2.5px; /* 3.5px + 2.5px = 6px */
|
||||
padding: 0;
|
||||
letter-spacing: -0.5px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
|
|
@ -96,12 +96,12 @@ h2,
|
|||
font-weight: 600; /* SemiBold */
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
padding: 3px 0 3px; /* 3px + 3px = 6px */
|
||||
padding: 5px 0 1px; /* 5px + 1px = 6px */
|
||||
letter-spacing: -0.3px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
line-height: 32px;
|
||||
padding: 4px 0 4px; /* 4px + 4px = 8px */
|
||||
padding: 5px 0 3px;; /* 5px + 3px = 8px */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -111,11 +111,11 @@ h3,
|
|||
font-weight: 600; /* SemiBold */
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
padding: 2px 0 4px; /* 2px + 4px = 6px */
|
||||
padding: 4px 0 2px; /* 4px + 2px = 6px */
|
||||
letter-spacing: -0.2px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
padding: 2px 0 6px; /* 2px + 6px = 8px */
|
||||
padding: 4px 0 4px; /* 4px + 4px = 8px */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -125,11 +125,11 @@ h4,
|
|||
font-weight: 500; /* Medium */
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
padding: 3.5px 0 2.5px; /* 3.5px + 2.5px = 6px */
|
||||
padding: 0;
|
||||
letter-spacing: 0;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
padding: 4px 0 4px; /* 4px + 4px = 8px */
|
||||
padding: 5px 0 3px; /* 5px + 3px = 8px */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -139,12 +139,12 @@ h5,
|
|||
font-weight: 400; /* Regular */
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 1.5px 0 4.5px; /* 1.5px + 4.5px = 6px */
|
||||
padding: 4px 0 2px; /* 4px + 2px = 6px */
|
||||
letter-spacing: 0;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
line-height: 16px;
|
||||
padding: 1px 0 7px; /* 1px + 7px = 8px */
|
||||
padding: 2px 0 6px; /* 2px + 6px = 8px */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -154,7 +154,7 @@ h6,
|
|||
font-weight: 700; /* Bold */
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding: 2px 0 4px; /* 2px + 4px = 6px */
|
||||
padding: 4px 0 2px; /* 4px + 2px = 6px */
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
|
||||
|
|
@ -175,13 +175,13 @@ li,
|
|||
font-weight: 500; /* Medium */
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
padding: 2.5px 0 3.5px; /* 2.5px + 3.5px = 6px */
|
||||
padding: 0;
|
||||
letter-spacing: -0.1px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
padding: 6px 0 2px; /* 6px + 2px = 8px */
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -190,12 +190,12 @@ li,
|
|||
font-weight: 400; /* Regular */
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
padding: 2px 0 4px; /* 2px + 4px = 6px */
|
||||
padding: 3.5px 0 2.5px; /* 3.5px + 2.5px = 6px */
|
||||
letter-spacing: -0.1px;
|
||||
|
||||
@media (--desktopViewport) {
|
||||
line-height: 16px;
|
||||
padding: 1.5px 0 6.5px; /* 1.5px + 6.5px; = 8px */
|
||||
padding: 2.5px 0 5.5px; /* 1.5px + 6.5px; = 8px */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -218,7 +218,6 @@ li,
|
|||
font-weight: 700; /* Bold */
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 7.5px 0 4.5px;
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue