npm - @pocketprep/ui-kit - Versions diffs - 3.4.20 → 3.4.22 - Mend

@pocketprep/ui-kit 3.4.20 → 3.4.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/@pocketprep/ui-kit.js +1039 -1055
package/dist/@pocketprep/ui-kit.js.map +1 -1
package/dist/@pocketprep/ui-kit.umd.cjs +1 -1
package/dist/@pocketprep/ui-kit.umd.cjs.map +1 -1
package/dist/style.css +1 -1
package/lib/components/Filters/FilterOptions.vue +1 -0
package/lib/components/Forms/Input.vue +13 -7
package/lib/components/Forms/Textarea.vue +11 -9
package/lib/components/Icons/IconEyeHide.vue +3 -5
package/lib/components/Icons/IconEyeShow.vue +2 -6
package/lib/components/SidePanels/SidePanel.vue +12 -1
package/package.json +1 -1

package/lib/components/Filters/FilterOptions.vue CHANGED Viewed

@@ -278,6 +278,7 @@ export default class FilterOptions extends Vue {
             color: $slate;
             width: 11px;
             height: 10px;
+            margin-top: 2px;
             &--dark {
                 color: $pewter;

package/lib/components/Forms/Input.vue CHANGED Viewed

@@ -194,18 +194,18 @@ export default class Input extends Vue {
         }
         &--hover {
-            border: 1px solid $baby-blue;
+            border: 1.5px solid $baby-blue;
             &--dark {
-                border: 1px solid rgba($banana-bread, 0.4);
+                border: 1.5px solid rgba($banana-bread, 0.4);
             }
         }
         &--focus {
-            border: 1px solid $brand-blue;
+            border: 1.5px solid $brand-blue;
             &--dark {
-                border: 1px solid $banana-bread;
+                border: 1.5px solid $banana-bread;
             }
         }
@@ -266,7 +266,8 @@ export default class Input extends Vue {
         align-items: center;
         width: 36px;
         height: 36px;
-        color: $slate-01;
+        background-color: $white;
+        color: $ash;
         z-index: 1;
         outline: none;
         cursor: pointer;
@@ -283,7 +284,7 @@ export default class Input extends Vue {
         }
         &:hover {
-            background-color: rgba($brand-black, 0.1);
+            background-color: $gray-background;
         }
         &:focus {
@@ -301,11 +302,16 @@ export default class Input extends Vue {
         }
         &--dark {
-            color: rgba($white, 0.8);
+            color: $fog;
+            background-color: $moonlit-ocean;
             &::before {
                 border-color: $pewter;
             }
+            &:hover {
+                background-color: $brand-black;
+            }
         }
     }
 }

package/lib/components/Forms/Textarea.vue CHANGED Viewed

@@ -68,9 +68,10 @@ export default class Textarea extends Vue {
 .uikit-textarea {
     &__label {
         font-size: 13px;
+        font-weight: 600;
         line-height: 14px;
         margin: 0 0 6px 11px;
-        color: $slate-01;
+        color: $pickled-bluewood;
         display: block;
         &--dark {
@@ -78,7 +79,7 @@ export default class Textarea extends Vue {
         }
         &--hover {
-            color: $slate-03;
+            color: $slate;
             &--dark {
                 color: $fog;
@@ -117,11 +118,11 @@ export default class Textarea extends Vue {
         &:disabled {
             background: $gray-background;
-            border: 1px solid $gray-background;
-            color: $slate-03;
+            border: 1px solid rgba($pewter, 0.5);
+            color: $slate;
             &::placeholder {
-                color: $slate-03;
+                color: $slate;
             }
         }
@@ -132,21 +133,22 @@ export default class Textarea extends Vue {
             caret-color: $banana-bread;
             &:disabled {
-                border-color: $moonlit-ocean;
+                border: 1px solid rgba($pewter, 0.5);
                 background-color: $moonlit-ocean;
+                color: $steel;
             }
         }
         &--hover {
-            border: 1px solid $baby-blue;
+            border: 1.5px solid $baby-blue;
             &--dark {
-                border: 0.5px solid $banana-bread;
+                border-color: rgba($banana-bread, 0.4);
             }
         }
         &--focus {
-            border: 1px solid $brand-blue;
+            border: 1.5px solid $brand-blue;
             &--dark {
                 border-color: $banana-bread;

package/lib/components/Icons/IconEyeHide.vue CHANGED Viewed

@@ -1,11 +1,9 @@
 <template>
     <!-- eslint-disable -->
-    <svg width="18px" height="16px" viewBox="0 0 18 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <svg width="21" height="21" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <title>{{ title }}</title>
-        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-            <g transform="translate(-12.000000, -9.000000)" fill="currentColor" fill-rule="nonzero">
-                <path d="M27.66,8.86819193 L28.7206602,9.9288521 L13.52,25.1318081 L12.4593398,24.0711479 L15.4795073,21.0505385 C14.0951623,20.122522 12.9626647,18.8351994 12.2092977,17.318493 C13.7759431,14.1629851 16.98436,12 20.6877074,12 C21.8317445,12 22.9285496,12.2064167 23.944327,12.5847535 L27.66,8.86819193 Z M25.9964713,13.6541762 C27.3354034,14.5767955 28.4315401,15.8385909 29.166586,17.3188146 C27.5988319,20.4738099 24.3906856,22.6363636 20.6877074,22.6363636 C19.5897834,22.6363636 18.5353604,22.4462518 17.5543101,22.096519 L18.7565078,20.8951351 C19.2892419,21.0305932 19.8406255,21.1109688 20.4036617,21.1312525 L20.6877074,21.1363636 C23.4422663,21.1363636 25.9494267,19.6969763 27.4059016,17.3933448 L27.451,17.318 L27.4058921,17.2437906 C26.7591252,16.2203054 25.9049158,15.3673705 24.9137062,14.7354223 L25.9964713,13.6541762 Z M23.5008038,16.1509846 C23.6610905,16.5182023 23.75,16.9237182 23.75,17.35 C23.75,19.0068542 22.4068542,20.35 20.75,20.35 C20.3236383,20.35 19.9180502,20.2610572 19.550778,20.1007136 L23.5008038,16.1509846 Z M20.6877074,13.5 C17.9328144,13.5 15.4255637,14.9397142 13.9699238,17.2434669 L13.924,17.318 L13.9699523,17.3932512 C14.6390745,18.4518841 15.5301424,19.328009 16.5651886,19.965806 L17.9933101,18.5354385 C17.8367343,18.1718121 17.75,17.771035 17.75,17.35 C17.75,15.6931458 19.0931458,14.35 20.75,14.35 C21.1711616,14.35 21.5720531,14.4367865 21.9357665,14.5934514 L22.7524065,13.7764315 C22.1784899,13.6196627 21.5819796,13.5270972 20.9717822,13.5051122 L20.6877074,13.5 Z"></path>
-            </g>
+        <g id="vector">
+            <path id="Shape" d="M12 6.72727C15.4455 6.72727 18.5182 8.66364 20.0182 11.7273C19.4818 12.8364 18.7273 13.7909 17.8273 14.5636L19.1091 15.8455C20.3727 14.7273 21.3727 13.3273 22 11.7273C20.4273 7.73636 16.5455 4.90909 12 4.90909C10.8455 4.90909 9.73636 5.09091 8.69091 5.42727L10.1909 6.92727C10.7818 6.80909 11.3818 6.72727 12 6.72727ZM11.0273 7.76364L12.9091 9.64545C13.4273 9.87273 13.8455 10.2909 14.0727 10.8091L15.9545 12.6909C16.0273 12.3818 16.0819 12.0545 16.0819 11.7182C16.0909 9.46364 14.2545 7.63636 12 7.63636C11.6636 7.63636 11.3455 7.68182 11.0273 7.76364ZM2.91818 4.79091L5.35455 7.22727C3.87273 8.39091 2.7 9.93636 2 11.7273C3.57273 15.7182 7.45455 18.5455 12 18.5455C13.3818 18.5455 14.7091 18.2818 15.9273 17.8L19.0364 20.9091L20.3182 19.6273L4.2 3.5L2.91818 4.79091ZM9.73636 11.6091L12.1091 13.9818C12.0727 13.9909 12.0364 14 12 14C10.7455 14 9.72727 12.9818 9.72727 11.7273C9.72727 11.6818 9.73636 11.6545 9.73636 11.6091ZM6.64545 8.51818L8.23636 10.1091C8.02727 10.6091 7.90909 11.1545 7.90909 11.7273C7.90909 13.9818 9.74545 15.8182 12 15.8182C12.5727 15.8182 13.1182 15.7 13.6091 15.4909L14.5 16.3818C13.7 16.6 12.8636 16.7273 12 16.7273C8.55455 16.7273 5.48182 14.7909 3.98182 11.7273C4.61818 10.4273 5.54545 9.35455 6.64545 8.51818Z" fill="currentColor"/>
         </g>
     </svg>
     <!-- eslint-enable -->

package/lib/components/Icons/IconEyeShow.vue CHANGED Viewed

@@ -1,12 +1,8 @@
 <template>
     <!-- eslint-disable -->
-    <svg width="18px" height="11px" viewBox="0 0 18 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <svg width="21" height="21" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <title>{{ title }}</title>
-        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-            <g transform="translate(-12.000000, -12.000000)" fill="currentColor" fill-rule="nonzero">
-                <path d="M20.7896965,12 C24.4930439,12 27.7014608,14.1629851 29.268575,17.3188146 C27.700821,20.4738099 24.4926747,22.6363636 20.7896965,22.6363636 C17.0867183,22.6363636 13.878572,20.4738099 12.3112868,17.318493 C13.8779322,14.1629851 17.0863491,12 20.7896965,12 Z M20.7896965,13.5 C18.0348034,13.5 15.5275528,14.9397142 14.0719128,17.2434669 L14.025989,17.318 L14.0719413,17.3932512 C15.4777992,19.6174898 17.8634149,21.0360645 20.5056508,21.1312525 L20.7896965,21.1363636 C23.5442554,21.1363636 26.0514157,19.6969763 27.5078907,17.3933448 L27.552989,17.318 L27.5078811,17.2437906 C26.1020949,15.0191849 23.7162759,13.6003198 21.0737712,13.5051122 L20.7896965,13.5 Z M20.851989,14.35 C22.5088433,14.35 23.851989,15.6931458 23.851989,17.35 C23.851989,19.0068542 22.5088433,20.35 20.851989,20.35 C19.1951348,20.35 17.851989,19.0068542 17.851989,17.35 C17.851989,15.6931458 19.1951348,14.35 20.851989,14.35 Z"></path>
-            </g>
-        </g>
+        <path d="M12 6.81818C15.4455 6.81818 18.5182 8.75455 20.0182 11.8182C18.5182 14.8818 15.4455 16.8182 12 16.8182C8.55455 16.8182 5.48182 14.8818 3.98182 11.8182C5.48182 8.75455 8.55455 6.81818 12 6.81818ZM12 5C7.45455 5 3.57273 7.82727 2 11.8182C3.57273 15.8091 7.45455 18.6364 12 18.6364C16.5455 18.6364 20.4273 15.8091 22 11.8182C20.4273 7.82727 16.5455 5 12 5ZM12 9.54545C13.2545 9.54545 14.2727 10.5636 14.2727 11.8182C14.2727 13.0727 13.2545 14.0909 12 14.0909C10.7455 14.0909 9.72727 13.0727 9.72727 11.8182C9.72727 10.5636 10.7455 9.54545 12 9.54545ZM12 7.72727C9.74545 7.72727 7.90909 9.56364 7.90909 11.8182C7.90909 14.0727 9.74545 15.9091 12 15.9091C14.2545 15.9091 16.0909 14.0727 16.0909 11.8182C16.0909 9.56364 14.2545 7.72727 12 7.72727Z" fill="currentColor"/>
     </svg>
     <!-- eslint-enable -->
 </template>

package/lib/components/SidePanels/SidePanel.vue CHANGED Viewed

@@ -94,7 +94,13 @@
                 </div>
             </slot>
             <slot name="sidePanelFooter">
-                <div class="uikit-side-panel__foot" :class="{ 'uikit-side-panel__foot--dark': isDarkMode }">
+                <div
+                    class="uikit-side-panel__foot"
+                    :class="{
+                        'uikit-side-panel__foot--dark': isDarkMode,
+                        'uikit-side-panel__foot--teach-side-panel': isTeachSidePanel,
+                    }"
+                >
                     <div class="uikit-side-panel__foot-left">
                         <slot name="details" />
                     </div>
@@ -384,6 +390,7 @@ export default class SidePanel extends Vue {
         &--teach-side-panel {
             background-color: $barely-background;
+            border-bottom: 1px solid $gray-divider;
         }
         &--dark {
@@ -603,6 +610,10 @@ export default class SidePanel extends Vue {
             padding: 10px 18px;
         }
+        &--teach-side-panel {
+            border-top: 1px solid $gray-divider;
+        }
         &--dark {
             background: $brand-black;
             border-top-color: $charcoal;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.20",
+  "version": "3.4.22",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {