mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-09 16:06:21 +02:00
style fixes
This commit is contained in:
@ -169,6 +169,7 @@ export class CreateNewModal extends Component {
|
|||||||
item={template}
|
item={template}
|
||||||
focusable
|
focusable
|
||||||
onClick={onTemplateSelect.bind(null, template, false)}
|
onClick={onTemplateSelect.bind(null, template, false)}
|
||||||
|
hasOptions={false}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
@ -11,7 +11,8 @@ export function ItemTile({
|
|||||||
onRemoveBtnClick,
|
onRemoveBtnClick,
|
||||||
onToggleVisibilityBtnClick,
|
onToggleVisibilityBtnClick,
|
||||||
focusable,
|
focusable,
|
||||||
inline
|
inline,
|
||||||
|
hasOptions = true
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@ -58,7 +59,7 @@ export function ItemTile({
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex flex-v-center">
|
<div className="flex flex-v-center">
|
||||||
{item.img ? (
|
{item.img ? (
|
||||||
<div>
|
<div class="d-f">
|
||||||
<img
|
<img
|
||||||
class="saved-item-tile__img"
|
class="saved-item-tile__img"
|
||||||
height="40"
|
height="40"
|
||||||
@ -82,6 +83,7 @@ export function ItemTile({
|
|||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
{hasOptions && (
|
||||||
<div class="saved-item-tile__meta">
|
<div class="saved-item-tile__meta">
|
||||||
<HStack justify="space-between">
|
<HStack justify="space-between">
|
||||||
<div>
|
<div>
|
||||||
@ -106,6 +108,7 @@ export function ItemTile({
|
|||||||
</div>
|
</div>
|
||||||
</HStack>
|
</HStack>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,3 +1,3 @@
|
|||||||
export const ProBadge = () => {
|
export const ProBadge = () => {
|
||||||
return <div className="pro-badge">PRO</div>;
|
return <div className="badge pro-badge">PRO</div>;
|
||||||
};
|
};
|
||||||
|
@ -42,5 +42,5 @@ export function Divider(props) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function BetaTag() {
|
export function BetaTag() {
|
||||||
return <span class="beta-tag">Beta</span>;
|
return <span class="badge beta-tag">Beta</span>;
|
||||||
}
|
}
|
||||||
|
@ -1697,16 +1697,6 @@ body > #demo-frame {
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.beta-tag {
|
|
||||||
border-radius: 4px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
background: #c68955;
|
|
||||||
color: white;
|
|
||||||
letter-spacing: 0.6px;
|
|
||||||
padding: 2px 5px;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-extension .web-maker-with-tag:after {
|
.is-extension .web-maker-with-tag:after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -2184,18 +2174,26 @@ while the theme CSS file is loading */
|
|||||||
.stack > * {
|
.stack > * {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
.badge {
|
||||||
.pro-badge {
|
text-transform: uppercase;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0.1rem 0.3rem;
|
padding: 0.1rem 0.3rem;
|
||||||
background: linear-gradient(45deg, var(--color-pro-1), var(--color-pro-2));
|
background: crimson;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
font-size: 0.7em;
|
font-size: 0.7em;
|
||||||
color: #222;
|
color: #222;
|
||||||
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.3);
|
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
.beta-tag {
|
||||||
|
background: #ee9d59;
|
||||||
|
}
|
||||||
|
.pro-badge {
|
||||||
|
display: inline-block;
|
||||||
|
background: linear-gradient(45deg, var(--color-pro-1), var(--color-pro-2));
|
||||||
|
color: #222;
|
||||||
|
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
.templates-container {
|
.templates-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
Reference in New Issue
Block a user