1.1.0 - checkmate modal, redo card elements and remeasure to grid

Author: Jimmy Lee

app/page.tsx

@@ -3,9 +3,7 @@
   color: var(--theme-text);
   flex-shrink: 0;
   cursor: pointer;
-  transition: 200ms ease all;
   font-weight: 400;
-  transition-property: background;
   padding: 0 1ch 0 1ch;
   user-select: none;
   flex-shrink: 0;
@@ -22,8 +20,6 @@
   cursor: pointer;
   padding: 0 1ch 0 1ch;
   text-transform: uppercase;
-  transition: 200ms ease all;
-  transition-property: background;
   user-select: none;
 }
 

components/ActionButton.module.scss

@@ -1,7 +1,10 @@
 .card {
   position: relative;
   display: block;
-  padding: 0 1ch calc((var(--font-size) * 0.5) * var(--theme-line-height-base)) 1ch;
+  padding-top: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 0;
   white-space: prewrap;
 }
 
@@ -11,8 +14,10 @@
     inset -2px 0 0 0 var(--theme-text),
     inset 0 -2px 0 0 var(--theme-text);
   display: block;
-  padding: calc((var(--font-size) * 0.5) * var(--theme-line-height-base)) 2ch calc(var(--font-size) * var(--theme-line-height-base)) 2ch;
-
+  padding-top: calc(var(--theme-line-height-base) * 0.5rem);
+  padding-left: 2ch;
+  padding-right: 2ch;
+  padding-bottom: calc(var(--theme-line-height-base) * 1rem);
   overflow-x: auto;
   overflow-y: hidden;
 

components/Card.module.scss

@@ -5,7 +5,10 @@
 
   position: relative;
   display: block;
-  padding: 0 1ch calc(var(--card-double-half-gutter) * var(--theme-line-height-base)) 1ch;
+  padding-top: 0;
+  padding-right: 0;
+  padding-left: 0;
+  padding-bottom: 0;
 }
 
 .children {
@@ -16,7 +19,10 @@
   border-right: var(--card-double-border-width) solid var(--theme-text);
   border-right-style: double;
   display: block;
-  padding: 10px calc(2ch - 6px) 14px calc(2ch - 6px);
+  padding-top: calc(var(--theme-line-height-base) * 0.5rem);
+  padding-left: calc(2ch - var(--card-double-border-width));
+  padding-right: calc(2ch - var(--card-double-border-width));
+  padding-bottom: calc(var(--theme-line-height-base) * 1rem - var(--card-double-border-width));
 
   overflow-x: auto;
   overflow-y: hidden;

components/CardDouble.module.scss

@@ -7,9 +7,10 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   title?: string | any;
   mode?: string | any;
+  style?: any;
 }
 
-const CardDouble: React.FC<CardProps> = ({ children, mode, title, ...rest }) => {
+const CardDouble: React.FC<CardProps> = ({ children, mode, title, style, ...rest }) => {
   let titleElement = (
     <header className={styles.action}>
       <div className={styles.left} aria-hidden="true"></div>
@@ -42,7 +43,9 @@ const CardDouble: React.FC<CardProps> = ({ children, mode, title, ...rest }) =>
     <article className={styles.card}>
       {titleElement}
       <section className={styles.children}>
-        <section className={styles.borderChildren}>{children}</section>
+        <section className={styles.borderChildren} style={style}>
+          {children}
+        </section>
       </section>
     </article>
   );

components/CardDouble.tsx

@@ -41,6 +41,7 @@ const SidebarLayout: React.FC<SidebarLayoutProps> = ({ defaultSidebarWidth = 20,
     return (
       <div className={styles.root} {...rest}>
         <div className={styles.content}>{children}</div>
+        &nbsp;
         <div
           className={styles.sidebar}
           style={{

components/SidebarLayout.tsx

@@ -4,7 +4,7 @@
   justify-content: space-between;
   width: 100%;
   flex-direction: column;
-  height: calc(var(--theme-line-height-base) * (var(--font-size) * 29));
+  height: calc(var(--theme-line-height-base) * (var(--font-size) * 29.5));
 }
 
 .customTop {
@@ -18,7 +18,7 @@
 }
 
 .root {
-  min-width: 44ch;
+  min-width: 56ch;
 }
 
 .cross {

components/examples/DashboardRadar.module.scss

@@ -57,6 +57,7 @@ const DashboardRadar = (props) => {
                 CONDITION
                 <br />
                 CODE
+                <br />
                 <ActionButton style={{ width: '100%' }}>16 S=C75C</ActionButton>
                 <ActionButton>PAST=8</ActionButton>
                 <br />
@@ -86,6 +87,7 @@ const DashboardRadar = (props) => {
             </span>
           </RowSpaceBetween>
         </Card>
+        <br />
         <Card>
           <RowSpaceBetween style={{ position: 'absolute', top: 0, left: `6ch`, right: `6ch` }}>
             <RadarMarker />

components/examples/DashboardRadar.tsx

@@ -72,7 +72,7 @@
   top: calc(var(--theme-line-height-base) * -0.5rem);
   left: 0;
   height: calc(var(--theme-line-height-base) * 0.5rem);
-  width: 13.8ch;
+  width: 14.2ch;
   background: var(--theme-background);
   position: absolute;
   box-shadow:
@@ -82,7 +82,7 @@
 }
 
 .box {
-  width: 6.9ch;
+  width: 7.1ch;
   flex-shrink: 0;
   height: calc(var(--theme-line-height-base) * 3rem);
   display: inline-flex;

components/examples/Denabase.module.scss

@@ -62,6 +62,7 @@ const Denabase = (props) => {
         <br />
         <Divider type="GRADIENT" />
       </Card>
+      <br />
       <Card>
         <SidebarLayout
           sidebar={