mirror of
https://github.com/chinchang/web-maker.git
synced 2025-03-20 10:39:45 +01:00
style fixes
This commit is contained in:
parent
b9ba819de2
commit
3f93fc8af6
@ -169,6 +169,7 @@ export class CreateNewModal extends Component {
|
||||
item={template}
|
||||
focusable
|
||||
onClick={onTemplateSelect.bind(null, template, false)}
|
||||
hasOptions={false}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
@ -11,7 +11,8 @@ export function ItemTile({
|
||||
onRemoveBtnClick,
|
||||
onToggleVisibilityBtnClick,
|
||||
focusable,
|
||||
inline
|
||||
inline,
|
||||
hasOptions = true
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
@ -58,7 +59,7 @@ export function ItemTile({
|
||||
</div>
|
||||
<div className="flex flex-v-center">
|
||||
{item.img ? (
|
||||
<div>
|
||||
<div class="d-f">
|
||||
<img
|
||||
class="saved-item-tile__img"
|
||||
height="40"
|
||||
@ -82,30 +83,32 @@ export function ItemTile({
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div class="saved-item-tile__meta">
|
||||
<HStack justify="space-between">
|
||||
<div>
|
||||
{item.updatedOn ? (
|
||||
<>
|
||||
Last updated:{' '}
|
||||
<time dateTime={item.updatedOn}>
|
||||
{getHumanDate(item.updatedOn)}
|
||||
</time>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
<div>
|
||||
<Stack gap={1} align="center">
|
||||
<Icon
|
||||
size="16"
|
||||
color="currentColor"
|
||||
name={item.isPublic ? 'eye' : 'eye-striked'}
|
||||
/>
|
||||
{item.isPublic ? 'Public' : ''}
|
||||
</Stack>
|
||||
</div>
|
||||
</HStack>
|
||||
</div>
|
||||
{hasOptions && (
|
||||
<div class="saved-item-tile__meta">
|
||||
<HStack justify="space-between">
|
||||
<div>
|
||||
{item.updatedOn ? (
|
||||
<>
|
||||
Last updated:{' '}
|
||||
<time dateTime={item.updatedOn}>
|
||||
{getHumanDate(item.updatedOn)}
|
||||
</time>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
<div>
|
||||
<Stack gap={1} align="center">
|
||||
<Icon
|
||||
size="16"
|
||||
color="currentColor"
|
||||
name={item.isPublic ? 'eye' : 'eye-striked'}
|
||||
/>
|
||||
{item.isPublic ? 'Public' : ''}
|
||||
</Stack>
|
||||
</div>
|
||||
</HStack>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -1,3 +1,3 @@
|
||||
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() {
|
||||
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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: none;
|
||||
}
|
||||
@ -2184,18 +2174,26 @@ while the theme CSS file is loading */
|
||||
.stack > * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pro-badge {
|
||||
.badge {
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
padding: 0.1rem 0.3rem;
|
||||
background: linear-gradient(45deg, var(--color-pro-1), var(--color-pro-2));
|
||||
background: crimson;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.7em;
|
||||
color: #222;
|
||||
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.3);
|
||||
font-weight: 800;
|
||||
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 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
Loading…
x
Reference in New Issue
Block a user