Merge pull request #147 from appwrite/style-fixes

Style fixes
appwrite · Feb 13, 2024 · 7c13ef2 · 7c13ef2
2 parents a372059 + 8a9f0a0
commit 7c13ef2
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 20 deletions.
diff --git a/apps/pink/src/pages/components/collapsible.mdx b/apps/pink/src/pages/components/collapsible.mdx
@@ -82,7 +82,7 @@ In the Appwrite console, collapsibles can contain checkboxes:
   <li class="collapsible-item">
     <details class="collapsible-wrapper" open>
       <summary class="collapsible-button">
-        <input type="checkbox" />
+        <input type="checkbox" class="is-small" />
         <span class="text">Advanced Options</span>
         <span class="collapsible-button-optional">(optional)</span>
         <div class="icon">
@@ -94,7 +94,7 @@ In the Appwrite console, collapsibles can contain checkboxes:
               <ul class="form-list">
                   <li class="form-item">
                       <label class="choice-item">
-                          <input type="checkbox" />
+                          <input type="checkbox" class="is-small" />
                           <div class="choice-item-content">
                               <div class="choice-item-title">Subheading</div>
                               <p class="choice-item-paragraph">A clear description of what will happen if you select this option</p>
@@ -103,7 +103,7 @@ In the Appwrite console, collapsibles can contain checkboxes:
                   </li>
                   <li class="form-item">
                       <label class="choice-item">
-                          <input type="checkbox" />
+                          <input type="checkbox" class="is-small" />
                           <div class="choice-item-content">
                               <div class="choice-item-title">Subheading</div>
                               <p class="choice-item-paragraph">A clear description of what will happen if you select this option</p>
@@ -112,7 +112,7 @@ In the Appwrite console, collapsibles can contain checkboxes:
                   </li>
                   <li class="form-item">
                       <label class="choice-item">
-                          <input type="checkbox" />
+                          <input type="checkbox" class="is-small" />
                           <div class="choice-item-content">
                               <div class="choice-item-title">Subheading</div>
                               <p class="choice-item-paragraph">A clear description of what will happen if you select this option</p>
@@ -127,7 +127,7 @@ In the Appwrite console, collapsibles can contain checkboxes:
   <li class="collapsible-item">
     <details class="collapsible-wrapper">
       <summary class="collapsible-button">
-        <input type="checkbox" />
+        <input type="checkbox" class="is-small" />
         <span class="text">Advanced Options</span>
         <span class="collapsible-button-optional">(optional)</span>
         <div class="icon">
@@ -142,7 +142,7 @@ In the Appwrite console, collapsibles can contain checkboxes:
   <li class="collapsible-item">
     <details class="collapsible-wrapper">
       <summary class="collapsible-button">
-        <input type="checkbox" />
+        <input type="checkbox" class="is-small" />
         <span class="text">Advanced Options</span>
         <span class="collapsible-button-optional">(optional)</span>
         <div class="icon">

diff --git a/apps/pink/src/pages/elements/input-field.mdx b/apps/pink/src/pages/elements/input-field.mdx
@@ -163,6 +163,26 @@ There are a few different types of input field that the user can interact with:
   </form>
 </Preview>
 
+| Input Type | Type        |                                          |
+| ---------- | ----------- | ---------------------------------------- |
+| `date`     | Date        | date input                               |
+| `time`     | Time        | time input                               |
+
+<Preview center>
+    <form class="form u-width-full-line u-max-width-500">
+        <ul class="form-list">
+            <li class="form-item">
+                <label class="label">Label</label>
+                <input type="date"  />
+            </li>
+            <li class="form-item">
+                <label class="label">Label</label>
+                <input type="time" />
+            </li>
+        </ul>
+    </form>
+</Preview>
+
 | Input Type | Type         |                                                               |
 | ---------- | ------------ | ------------------------------------------------------------- |
 | `text`     | Multi Select | Used to create ‘tags’ when the user types in the input field. |

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ui/src/2-resets/_custom-css-reset.scss b/packages/ui/src/2-resets/_custom-css-reset.scss
@@ -1,3 +1,4 @@
+@use '../abstract' as *;
 /** custom reset **/
 :where(dialog:modal) { all:revert; }
 
@@ -17,4 +18,12 @@ details summary::-webkit-details-marker {
   display:none;
 }
 
-summary::-webkit-details-marker { display:none!important; }
+summary::-webkit-details-marker { display:none!important; }
+
+input::-webkit-datetime-edit { line-height:1; padding:0; margin-bottom:-2px; }
+
+
+#{$theme-dark} {
+  input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(0.8); }
+  input[type="time"]::-webkit-calendar-picker-indicator { filter:invert(0.8); }
+}
diff --git a/packages/ui/src/6-elements/form/_helper.scss b/packages/ui/src/6-elements/form/_helper.scss
@@ -5,7 +5,7 @@
   font-size:var(--font-size-0); line-height:2; color:hsl(var(--p-text-color)); font-weight:400;
 
   [class*="icon"] {
-    line-height:1;
+    line-height:1.3;
     &::before { vertical-align:pxToRem(-3); }
     &:first-child { margin-inline-end:pxToRem(4); }
   }

diff --git a/packages/ui/src/6-elements/form/_text-inputs.scss b/packages/ui/src/6-elements/form/_text-inputs.scss
@@ -85,6 +85,8 @@ $input-text-wrapper: ".input-text-wrapper";
 [type="search"],
 [type="tel"],
 [type="file"],
+[type="date"],
+[type="time"],
 select,
 textarea {
   --p-text-color: var(--p-text-color-default);
@@ -112,7 +114,7 @@ textarea {
   --p-border-color-disabled: var(--p-border-color-default);
 
 
-  display:block; inline-size:100%; outline:none;
+  display:block; inline-size:100%; block-size:pxToRem(40); outline:none;
   padding-block:pxToRem(9.5); padding-inline:pxToRem(12);
   color:hsl(var(--p-text-color)); line-height:1.3572; font-weight:400;
   background-color:hsl(var(--p-bg-color));
@@ -181,7 +183,7 @@ textarea {
   }
 }
 
-textarea { block-size:pxToRem(200); }
+textarea.input-text { block-size:pxToRem(200); }
 
 [type="search"]{
   padding-inline-start: pxToRem(48);

diff --git a/packages/ui/src/7-components/_collapsible.scss b/packages/ui/src/7-components/_collapsible.scss
@@ -1,6 +1,6 @@
 @use '../abstract' as *;
 .collapsible {
-  --p-toggle-border-color:    var(--color-neutral-15);
+  --p-toggle-border-color:    var(--color-neutral-10);
   --p-toggle-optional-color:  var(--color-neutral-50);
 
   ::-webkit-details-marker  { display:none; }
@@ -32,6 +32,6 @@
     padding-block-start:0; padding-block-end:pxToRem(24);
   }
   #{$theme-dark} & {
-    --p-toggle-border-color: var(--color-neutral-70);
+    --p-toggle-border-color: var(--color-neutral-80);
   }
 }
diff --git a/packages/ui/src/7-components/_modal.scss b/packages/ui/src/7-components/_modal.scss
@@ -13,6 +13,7 @@
   $header-padding-bottom:   pxToRem(16);
   --padding-header-bottom:  #{$header-padding-bottom};
 
+  display:flex; flex-direction:column;
   box-sizing:border-box; padding:0;
 
   inline-size: fit-content;
@@ -27,7 +28,7 @@
   color: hsl(var(--p-modal-text-color));
 
   &:where([open]) { display:flex; }
-  &-form { display:flex; flex-direction:column; inline-size:100%; padding:var(--p-modal-padding); }
+  &-form { min-block-size:0; display:flex; flex-direction:column; inline-size:100%; padding:var(--p-modal-padding); }
   &.is-small  { @media #{$break2open} { inline-size:pxToRem(410); } }
   &.is-big    { @media #{$break3open} { inline-size:pxToRem(640); } }
   &.is-secondary {