feat(core): adds some simple CSS transitions for smother looking

ThatOpen · Jul 17, 2024 · b5c2e6f · b5c2e6f
1 parent 7a259d7
commit b5c2e6f
Show file tree

Hide file tree

Showing 11 changed files with 34 additions and 14 deletions.
diff --git a/packages/core/src/components/Checkbox/index.ts b/packages/core/src/components/Checkbox/index.ts
@@ -23,6 +23,7 @@ export class Checkbox extends LitElement implements HasValue {
       column-gap: 0.5rem;
       width: 100%;
       align-items: center;
+      transition: all 0.15s;
     }
 
     :host([inverted]) .parent {
@@ -37,6 +38,7 @@ export class Checkbox extends LitElement implements HasValue {
       border: none;
       outline: none;
       accent-color: var(--bim-checkbox--c, var(--bim-ui_main-base));
+      transition: all 0.15s;
     }
 
     input:focus {

diff --git a/packages/core/src/components/ColorInput/example.html b/packages/core/src/components/ColorInput/example.html
@@ -13,6 +13,10 @@
     body {
       background-color: var(--bim-ui_bg-base);
     }
+
+    bim-color-input {
+      width: 15rem;
+    }
   </style>
 </head>
 

diff --git a/packages/core/src/components/ContextMenu/index.ts b/packages/core/src/components/ContextMenu/index.ts
@@ -13,8 +13,8 @@ import { styles } from "../../core/Manager/src/styles";
 
 export class ContextMenu extends LitElement {
   /**
-  * CSS styles for the component.
-  */
+   * CSS styles for the component.
+   */
   static styles = [
     styles.scrollbar,
     css`

diff --git a/packages/core/src/components/Icon/index.ts b/packages/core/src/components/Icon/index.ts
@@ -6,8 +6,8 @@ import "iconify-icon";
  */
 export class Icon extends LitElement {
   /**
-  * CSS styles for the component.
-  */
+   * CSS styles for the component.
+   */
   static styles = css`
     :host {
       height: var(--bim-icon--fz, var(--bim-ui_size-sm));
@@ -18,6 +18,7 @@ export class Icon extends LitElement {
       height: var(--bim-icon--fz, var(--bim-ui_size-sm));
       width: var(--bim-icon--fz, var(--bim-ui_size-sm));
       color: var(--bim-icon--c);
+      transition: all 0.15s;
     }
   `;
 

diff --git a/packages/core/src/components/Input/index.ts b/packages/core/src/components/Input/index.ts
@@ -7,8 +7,8 @@ import { HasValue, HasName } from "../../core/types";
  */
 export class Input extends LitElement implements HasValue, HasName {
   /**
-  * CSS styles for the component.
-  */
+   * CSS styles for the component.
+   */
   static styles = css`
     :host {
       flex: 1;
@@ -46,6 +46,7 @@ export class Input extends LitElement implements HasValue, HasName {
       outline: var(--bim-input--olw, 2px) solid
         var(--bim-input--olc, transparent);
       border-radius: var(--bim-input--bdrs, var(--bim-ui_size-4xs));
+      transition: all 0.15s;
     }
 
     :host(:not([vertical])) .input {

diff --git a/packages/core/src/components/Label/index.ts b/packages/core/src/components/Label/index.ts
@@ -7,8 +7,8 @@ import { convertString } from "../../core/utils";
  */
 export class Label extends LitElement {
   /**
-  * CSS styles for the component.
-  */
+   * CSS styles for the component.
+   */
   static styles = css`
     :host {
       --bim-icon--c: var(--bim-label--c);
@@ -18,6 +18,7 @@ export class Label extends LitElement {
       display: block;
       white-space: nowrap;
       line-height: 1.1rem;
+      transition: all 0.15s;
     }
 
     .parent {

diff --git a/packages/core/src/components/NumberInput/example.html b/packages/core/src/components/NumberInput/example.html
@@ -13,6 +13,10 @@
     body {
       background-color: var(--bim-ui_bg-base);
     }
+
+    bim-number-input {
+      width: 15rem;
+    }
   </style>
 </head>
 

diff --git a/packages/core/src/components/Option/index.ts b/packages/core/src/components/Option/index.ts
@@ -8,8 +8,8 @@ import { convertString } from "../../core/utils";
  */
 export class Option extends LitElement {
   /**
-  * CSS styles for the component.
-  */
+   * CSS styles for the component.
+   */
   static styles = css`
     :host {
       --bim-label--c: var(--bim-ui_bg-contrast-100);
@@ -18,6 +18,7 @@ export class Option extends LitElement {
       flex: 1;
       padding: 0rem 0.5rem;
       border-radius: var(--bim-ui_size-4xs);
+      transition: all 0.15s;
     }
 
     :host(:hover) {

diff --git a/packages/core/src/components/Panel/example.html b/packages/core/src/components/Panel/example.html
@@ -49,6 +49,10 @@
     <div id="panels">
       <bim-panel name="panelA" label="Panel A" icon="fluent:puzzle-cube-piece-20-filled">
         <!-- bim-panel usually have bim-panel-section as children, but it can be any other form of section you want -->
+        <bim-panel-section label="asdasd">
+          <bim-number-input></bim-number-input>
+          <bim-dropdown></bim-dropdow>
+        </bim-panel-section>
         <div class="section">
           <div style="display: flex; gap: 0.375rem">
             <bim-number-input vertical name="x" label="Length" pref="X" suffix="m"></bim-number-input>

diff --git a/packages/core/src/components/Panel/src/Section.ts b/packages/core/src/components/Panel/src/Section.ts
@@ -9,8 +9,8 @@ import { getElementValue } from "../../../core/utils";
  */
 export class PanelSection extends LitElement implements HasName, HasValue {
   /**
-  * CSS styles for the component.
-  */
+   * CSS styles for the component.
+   */
   static styles = [
     styles.scrollbar,
     css`
@@ -63,6 +63,7 @@ export class PanelSection extends LitElement implements HasName, HasValue {
 
       :host(:not([fixed])[collapsed]) .components {
         display: none;
+        height: 0px;
       }
 
       bim-label {

diff --git a/packages/core/src/components/Tabs/src/Tabs.ts b/packages/core/src/components/Tabs/src/Tabs.ts
@@ -8,8 +8,8 @@ import { styles } from "../../../core/Manager/src/styles";
  */
 export class Tabs extends LitElement {
   /**
-  * CSS styles for the component.
-  */
+   * CSS styles for the component.
+   */
   static styles = [
     styles.scrollbar,
     css`
@@ -48,6 +48,7 @@ export class Tabs extends LitElement {
         padding: 0rem 0.75rem;
         display: flex;
         justify-content: center;
+        transition: all 0.15s;
       }
 
       :host([switchers-full]) .switcher {