Initial expanded view in details.

This commit is contained in:
Mike Cao 2020-08-09 03:04:48 -07:00
parent b392a51676
commit f535dca7b9
14 changed files with 108 additions and 39 deletions

View file

@ -16,8 +16,9 @@ export default function Button({
<button
type={type}
className={classNames(styles.button, className, {
[styles.small]: size === 'small',
[styles.large]: size === 'large',
[styles.small]: size === 'small',
[styles.xsmall]: size === 'xsmall',
[styles.action]: variant === 'action',
[styles.danger]: variant === 'danger',
})}

View file

@ -20,12 +20,20 @@
margin-left: 10px;
}
.large {
font-size: var(--font-size-large);
}
.medium {
font-size: var(--font-size-normal);
}
.small {
font-size: var(--font-size-small);
}
.large {
font-size: var(--font-size-large);
.xsmall {
font-size: var(--font-size-xsmall);
}
.action {

View file

@ -2,7 +2,7 @@ import React from 'react';
import classNames from 'classnames';
import styles from './Icon.module.css';
export default function Icon({ icon, className, size = 'M' }) {
export default function Icon({ icon, className, size = 'medium' }) {
return (
<div
className={classNames(styles.icon, className, {
@ -10,6 +10,7 @@ export default function Icon({ icon, className, size = 'M' }) {
[styles.large]: size === 'large',
[styles.medium]: size === 'medium',
[styles.small]: size === 'small',
[styles.xsmall]: size === 'xsmall',
})}
>
{icon}

View file

@ -32,3 +32,8 @@
width: 12px;
height: 12px;
}
.xsmall > svg {
width: 10px;
height: 10px;
}