@cafebazaar/bazaar-css - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

CHANGELOG.md

+## 0.1.0
+- fix button fab padding
+- add transition effect to button/menu/input
+- fix sz-x class bundle order
+- fix c-tab-item style
+- create display (d-{display}) section
+- create z-index (z-{index}) section
+- create hover (hvr-{type}) section
+- add example section to docs
+
+## 0.0.1
+- first release

docs-src/examples/BaristaHome.vue

+<template>
+  <Section plain title="Example 1">
+    <div class="brd-1 barista-home d-flex col">
+      <header class="sz-3xl shdw-md d-flex row ai-center z-1">
+        <div style="width: 128px" class="d-flex ai-center jc-center pds-md pde-md">
+          <img src="https://webassets.cafebazaar.ir/images/bazaar-logo.svg" alt="logo">
+        </div>
+        <ul class="c-tab sz-3xl fs-lg grow">
+          <li class="c-tab-item"> Applications </li>
+          <li class="c-tab-item" selected> Games </li>
+          <li class="c-tab-item c-menu pos-start auto-open">
+            Rest
+            <ul class="c-list c-menu-content">
+              <li class="c-list-item sz-xl" selected> Rest #1 </li>
+              <li class="c-list-item sz-xl"> Rest #2 </li>
+              <li class="c-list-item sz-xl"> Rest #3 </li>
+            </ul>
+          </li>
+          <li class="c-tab-item" disabled> Tab Item #4 (Disabled) </li>
+        </ul>
+        <div class="pdl-md pdr-md d-flex ai-center jc-center">
+          <div class="c-menu pos-center sz-md" :class="searchContentOpen && searchResult.length ? 'open' : ''">
+            <input class="c-inp has-icon typ-ghost sz-md" @focus="handleSearchInputFocus" @blur="handleSearchInputBlur" @input="handleSearchInputInput" placeholder="Type Something..." style="background-image: url('https://cdn-icons-png.flaticon.com/512/6562/6562098.png')">
+            <ul class="c-list c-menu-content w-100">
+              <li class="c-list-item sz-xl" v-for="searchItem in searchResult"> {{ searchItem }} </li>
+            </ul>
+          </div>
+        </div>
+        <div class="pdl-md pdr-md d-flex ai-center jc-center">
+          <div class="c-menu pos-end auto-open sz-3xl d-flex ai-center jc-center">
+            <button class="c-btn fab sz-md rd-50 typ-glass">
+              <svg style="width:24px;height:24px" viewBox="0 0 24 24" class="fc-gray7">
+                <path fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
+              </svg>
+            </button>
+            <ul class="c-list c-menu-content">
+              <li class="c-list-item sz-xl"> Profile </li>
+              <li class="c-list-item sz-xl"> Subscribtions </li>
+              <li class="c-list-item sz-xl"> Logout </li>
+            </ul>
+          </div>
+        </div>
+      </header>
+      <div class="pd-lg grow bc-gray2">
+        <div class="rd-md br-1 shdw-md bc-gray1 pd-md">
+          <h1 class="fs-3xl">Barista</h1>
+          <p class="fs-md"> Barista is a Good Website </p>
+        </div>
+      </div>
+      <footer class="shdw-sm d-flex col">
+        <div class="d-flex row pd-xl w-100">
+          <div class="mre-xl grow">
+            <div> Footer Link #1 </div>
+            <div> Footer Link #2 </div>
+            <div> Footer Link #3 </div>
+            <div> Footer Link #4 </div>
+          </div>
+          <div class="mre-xl grow">
+            <div> Footer Link #1 </div>
+            <div> Footer Link #2 </div>
+            <div> Footer Link #3 </div>
+            <div> Footer Link #4 </div>
+          </div>
+          <div class="grow">
+            <div> Footer Link #1 </div>
+            <div> Footer Link #2 </div>
+            <div> Link #3 </div>
+          </div>
+        </div>
+        <div class="brdt-1 pd-md fs-sm">
+          Alrights Reserved C 2008
+        </div>
+
+      </footer>
+
+    </div>
+  </Section>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  import Section from '../components/Section.vue';
+
+  const searchContentOpen = ref(false);
+  const searchResult = ref([]);
+  const handleSearchInputFocus = () => searchContentOpen.value = true;
+  const handleSearchInputBlur = () => searchContentOpen.value = false;
+  const handleSearchInputInput = (event) => {
+    let ret = [];
+    if (event.target.value) {
+      for (let i = 0; i < 5; i++) {
+        ret = [
+          ...ret,
+          `${event.target.value.padEnd(15, 'a').slice(0, 15)} #${i}`
+        ]
+      }
+    }
+    searchResult.value = ret;
+  }
+
+</script>
+
+<style scoped>
+  .barista-home {
+    min-height: 500px;
+  }
+</style>

docs-src/sections/Display.vue

+<template>
+  <Section title="Display">
+    <DocTable :class-names="classNames"/>
+  </Section>
+</template>
+
+<script setup>
+  import Section from '../components/Section.vue';
+  import DocTable from '../components/DocTable.vue';
+
+  const classNames = [
+    {
+      description: 'Apply Display CSS prop to Element',
+      type: 'main',
+      value: 'd-{display}',
+      dynamicParts: {
+        display: ['block', 'inline', 'inline-block'], 
+      },
+    },
+    {
+      description: 'Apply Display CSS prop to Element',
+      type: 'main',
+      value: 'd-{flexDisplay}',
+      dynamicParts: {
+        flexDisplay: ['flex', 'inline-flex'], 
+      },
+    },
+    {
+      description: 'Apply Flex-Direction CSS prop to a Flex Element',
+      type: 'prop',
+      value: '{direction}',
+      dynamicParts: {
+        direction: ['row', 'col'], 
+      },
+    },
+    {
+      description: 'Apply Align Items / Justify Content CSS prop to a Flex Element',
+      type: 'prop',
+      value: '{prop}{position}',
+      dynamicParts: {
+        prop: [{ name: 'ai', description: 'align-items' }, { name: 'jc', description: 'jusitify-content' }], 
+        position: ['start', 'center', 'end'], 
+      },
+    },
+    {
+      description: 'Apply Flex Grow CSS prop to a Child Element. The element must be root child of flex element',
+      type: 'main',
+      value: 'grow',
+    },
+  ];
+</script>

docs-src/sections/Hover.vue

+<template>
+  <Section title="Hover" description="hvr-{1|2}">
+    <Preview>
+      <div v-for="i in [1, 2]" class="box rd-md" :class="`hvr-${i}`">
+        {{ `hvr-${i}` }}
+      </div>
+    </Preview>
+    <DocTable :class-names="classNames"/>
+  </Section>
+</template>
+
+<script setup>
+  import Section from '../components/Section.vue';
+  import Preview from '../components/Preview.vue';
+  import DocTable from '../components/DocTable.vue';
+
+  const classNames = [
+    {
+      description: 'Apply Hover Style to Element',
+      type: 'main',
+      value: 'hvr-{type}',
+      dynamicParts: {
+        type: [{ name: 1, description: 'Apply border when hover' }, { name: 2, description: 'Apply primary color when hover' }], 
+      },
+    },
+  ];
+</script>
+
+<style lang="scss" scoped>
+  .box {
+    width: 8rem;
+    height: 8rem;
+    line-height: 8rem;
+    text-align: center;
+    margin: 2rem !important;
+    display: inline-block;
+    vertical-align: middle;
+  }
+</style>

docs-src/sections/ZIndex.vue

+<template>
+  <Section title="ZIndex">
+    <DocTable :class-names="classNames"/>
+  </Section>
+</template>
+
+<script setup>
+  import Section from '../components/Section.vue';
+  import DocTable from '../components/DocTable.vue';
+
+  const classNames = [
+    {
+      description: 'Apply Z-Index CSS prop to Element',
+      type: 'main',
+      value: 'z-{index}',
+      dynamicParts: {
+        index: [1, 2, 3, 99], 
+      },
+    },
+  ];
+</script>

src/globals/display.scss

+@each $display in (block, inline, inline-block, flex, inline-flex) {
+  .d-#{$display} {
+    display: $display;
+  }
+}
+
+.d-flex,
+.d-inline-flex {
+  @each $direction-name, $direction in (row: row, col: column) {
+    &.#{$direction-name} {
+      flex-direction: $direction;
+    }
+  }
+
+  @each $prop-name, $prop in (jc: justify-content, ai: align-items) {
+    @each $position-name, $position in (center: center, start: flex-start, end: flex-end) {
+      .#{$prop-name}-#{$position-name} {
+        #{$prop}: $position;
+      }
+    }
+  }
+
+
+  .grow {
+    flex-grow: 1;
+  }
+}

src/globals/hover.scss

+.hvr-1 {
+  cursor: pointer;
+  box-shadow: map-get($shadow-sizes, 0);
+
+  &:not([disabled]) {
+    &:hover,
+    &:focus {
+      outline: none;
+      box-shadow: map-get($shadow-sizes, md);
+    }
+  }
+}
+
+.hvr-2 {
+  cursor: pointer;
+
+  &:not([disabled]) {
+    &:hover,
+    &:focus {
+      color: map-get($colors, primary);
+    }
+  }
+}

src/globals/zindex.scss

+@each $zindex in (1, 2, 3, 999) {
+  .z-#{$zindex} {
+    z-index: $zindex;
+  }
+}

docs-src/components/Section.vue

 <template>
-  <div class="section">
-    <h2 :id="props.title" class="fs-2xl fw-hi">
+  <div class="section" :class="props.plain ? 'plain' : ''">
+    <h2 :id="props.title.replaceAll(' ', '-')" class="fs-2xl fw-hi">
       <a :href="'#' + props.title">
@@ -22,2 +22,3 @@ #{{ props.title }}
     description: String,
+    plain: Boolean,
   });
@@ -30,3 +31,3 @@ </script>
 
-    > .content:deep(> *) {
+    &:not(.plain) > .content:deep(> *) {
       margin-bottom: 1rem;
@@ -33,0 +34,0 @@ }

docs-src/main.js

@@ -9,3 +9,3 @@ import { createApp } from 'vue';
   if (location.hash) {
-    const el = document.querySelector(location.hash); // hash started with #, same as id
+    const el = document.querySelector(location.hash.replaceAll('%20', '-')); // hash started with #, same as id
     if (el) {
@@ -12,0 +12,0 @@ el.scrollIntoView({

docs-src/Main.vue

@@ -11,5 +11,8 @@ <template>
     <Space />
+    <Display />
+    <ZIndex />
     <Border />
     <Radius />
     <Shadow />
+    <Hover />
     <Button />
@@ -21,2 +24,5 @@ <Input />
   </div>
+  <div class="pd-md">
+    <BaristaHome />
+  </div>
 </template>
@@ -29,5 +35,8 @@
 import Space from './sections/Space.vue';
+import Display from './sections/Display.vue';
+import ZIndex from './sections/ZIndex.vue';
 import Border from './sections/Border.vue';
 import Radius from './sections/Radius.vue';
 import Shadow from './sections/Shadow.vue';
+import Hover from './sections/Hover.vue';
 import Button from './sections/Button.vue';
@@ -38,2 +47,4 @@ import Input from './sections/Input.vue';
 import List from './sections/List.vue';
+
+import BaristaHome from './examples/BaristaHome.vue';
 </script>

docs-src/sections/Menu.vue

@@ -48,3 +48,3 @@ <template>
       dynamicParts: {
-        position: ['start', 'center', 'end'],
+        position: ['start', 'end'],
       },
@@ -71,3 +71,2 @@ },
     start: '',
-    center: '',
     end: '',
@@ -74,0 +73,0 @@ });

docs-src/sections/Size.vue

@@ -17,3 +17,3 @@ <template>
     {
-      description: 'Apply Height (And Font) Size to an Element',
+      description: 'Apply Height (And Font) Size to Element',
       type: 'main',
@@ -25,2 +25,7 @@ value: 'sz-{size}',
     },
+    {
+      description: 'Apply Width 100% Size to Element',
+      type: 'main',
+      value: 'w-100',
+    },
   ];
@@ -27,0 +32,0 @@ </script>

docs/docs.css

 .section[data-v-4d0cebea] {
   margin-bottom: 3rem;
 }
-.section[data-v-4d0cebea] > .content[data-v-4d0cebea] > * {
+.section[data-v-4d0cebea]:not(.plain) > .content[data-v-4d0cebea] > * {
   margin-bottom: 1rem;
@@ -96,5 +96,19 @@ }
 }
+.box[data-v-02f2873a] {
+  width: 8rem;
+  height: 8rem;
+  line-height: 8rem;
+  text-align: center;
+  margin: 2rem !important;
+  display: inline-block;
+  vertical-align: middle;
+}
 .menu-toggle-btn[data-v-236b3251] {
   width: 15rem;
 }
+
+.barista-home[data-v-11320a7c] {
+    min-height: 500px;
+}
+
 *, *:before, *:after {
@@ -135,2 +149,4 @@ padding: 0;
   overflow: hidden;
+  transition-property: background-color;
+  transition-duration: 0.12s;
   /* sizes */
@@ -147,20 +163,27 @@ /* colors */
   width: 2rem;
+  padding: 0;
 }
 .c-btn.sz-sm.fab {
   width: 2.25rem;
+  padding: 0;
 }
 .c-btn.sz-md.fab {
   width: 2.5rem;
+  padding: 0;
 }
 .c-btn.sz-lg.fab {
   width: 2.75rem;
+  padding: 0;
 }
 .c-btn.sz-xl.fab {
   width: 3rem;
+  padding: 0;
 }
 .c-btn.sz-2xl.fab {
   width: 3.5rem;
+  padding: 0;
 }
 .c-btn.sz-3xl.fab {
   width: 4.25rem;
+  padding: 0;
 }
@@ -331,2 +354,4 @@ .c-btn {
   background-color: #FFF;
+  transition-property: background-color;
+  transition-duration: 0.12s;
 }
@@ -382,12 +407,12 @@ .c-inp.typ-ghost {
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
-  display: none;
-  margin-top: 0;
-  transition: margin 1.3s;
-}
-.c-menu.open > .c-menu-content, .c-menu.auto-open:hover > .c-menu-content {
-  display: block;
+  top: calc(100% + 0.5rem);
   z-index: 9999;
-  top: calc(100% + 0.5rem);
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(-0.5rem);
+  transition-property: opacity, transform;
+  transition-duration: 0.12s;
 }
-.c-menu.open > .c-menu-content::before, .c-menu.auto-open:hover > .c-menu-content::before {
+.c-menu > .c-menu-content::before {
+  pointer-events: none;
   content: "";
@@ -400,26 +425,23 @@ position: absolute;
 }
-.c-menu.open.pos-center > .c-menu-content, .c-menu.auto-open:hover.pos-center > .c-menu-content {
-  transform: translateX(-50%);
+.c-menu.open > .c-menu-content, .c-menu.auto-open:hover > .c-menu-content {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: all;
 }
-[dir=ltr] .c-menu.open.pos-center > .c-menu-content, [dir=ltr] .c-menu.auto-open:hover.pos-center > .c-menu-content {
-  left: 50%;
+.c-menu.open > .c-menu-content::before, .c-menu.auto-open:hover > .c-menu-content::before {
+  pointer-events: all;
 }
-
-[dir=rtl] .c-menu.open.pos-center > .c-menu-content, [dir=rtl] .c-menu.auto-open:hover.pos-center > .c-menu-content {
-  right: 50%;
-}
-
-[dir=ltr] .c-menu.open.pos-start > .c-menu-content, [dir=ltr] .c-menu.auto-open:hover.pos-start > .c-menu-content {
+[dir=ltr] .c-menu.pos-start > .c-menu-content {
   left: 0;
 }
 
-[dir=rtl] .c-menu.open.pos-start > .c-menu-content, [dir=rtl] .c-menu.auto-open:hover.pos-start > .c-menu-content {
+[dir=rtl] .c-menu.pos-start > .c-menu-content {
   right: 0;
 }
 
-[dir=ltr] .c-menu.open.pos-end > .c-menu-content, [dir=ltr] .c-menu.auto-open:hover.pos-end > .c-menu-content {
+[dir=ltr] .c-menu.pos-end > .c-menu-content {
   right: 0;
 }
 
-[dir=rtl] .c-menu.open.pos-end > .c-menu-content, [dir=rtl] .c-menu.auto-open:hover.pos-end > .c-menu-content {
+[dir=rtl] .c-menu.pos-end > .c-menu-content {
   left: 0;
@@ -439,2 +461,3 @@ }
   align-items: center;
+  justify-content: center;
   padding: 0 0.5rem;
@@ -516,2 +539,48 @@ color: #717485;
 
+.sz-xs {
+  height: 2rem;
+  min-height: 2rem;
+  font-size: 0.75rem;
+}
+
+.sz-sm {
+  height: 2.25rem;
+  min-height: 2.25rem;
+  font-size: 0.875rem;
+}
+
+.sz-md {
+  height: 2.5rem;
+  min-height: 2.5rem;
+  font-size: 1rem;
+}
+
+.sz-lg {
+  height: 2.75rem;
+  min-height: 2.75rem;
+  font-size: 1.125rem;
+}
+
+.sz-xl {
+  height: 3rem;
+  min-height: 3rem;
+  font-size: 1.25rem;
+}
+
+.sz-2xl {
+  height: 3.5rem;
+  min-height: 3.5rem;
+  font-size: 1.5rem;
+}
+
+.sz-3xl {
+  height: 4.25rem;
+  min-height: 4.25rem;
+  font-size: 2.125rem;
+}
+
+.w-100 {
+  width: 100%;
+}
+
 .fs-2xs {
@@ -565,46 +634,4 @@ font-size: 0.625rem;
 
-.sz-xs {
-  height: 2rem;
-  min-height: 2rem;
-  font-size: 0.75rem;
-}
-
-.sz-sm {
-  height: 2.25rem;
-  min-height: 2.25rem;
-  font-size: 0.875rem;
-}
-
-.sz-md {
-  height: 2.5rem;
-  min-height: 2.5rem;
-  font-size: 1rem;
-}
-
-.sz-lg {
-  height: 2.75rem;
-  min-height: 2.75rem;
-  font-size: 1.125rem;
-}
-
-.sz-xl {
-  height: 3rem;
-  min-height: 3rem;
-  font-size: 1.25rem;
-}
-
-.sz-2xl {
-  height: 3.5rem;
-  min-height: 3.5rem;
-  font-size: 1.5rem;
-}
-
-.sz-3xl {
-  height: 4.25rem;
-  min-height: 4.25rem;
-  font-size: 2.125rem;
-}
-
 .brd-1 {
-  border: solid 1px #D1D4DD;
+  border: solid 1px #E5E7F0;
 }
@@ -617,3 +644,3 @@
 .brdt-1 {
-  border-top: solid 1px #D1D4DD;
+  border-top: solid 1px #E5E7F0;
 }
@@ -626,3 +653,3 @@
 .brdr-1 {
-  border-right: solid 1px #D1D4DD;
+  border-right: solid 1px #E5E7F0;
 }
@@ -635,3 +662,3 @@
 .brdb-1 {
-  border-bottom: solid 1px #D1D4DD;
+  border-bottom: solid 1px #E5E7F0;
 }
@@ -644,3 +671,3 @@
 .brdl-1 {
-  border-left: solid 1px #D1D4DD;
+  border-left: solid 1px #E5E7F0;
 }
@@ -653,7 +680,7 @@
 [dir=ltr] .brds-1 {
-  border-left: solid 1px #D1D4DD;
+  border-left: solid 1px #E5E7F0;
 }
 
 [dir=rtl] .brds-1 {
-  border-right: solid 1px #D1D4DD;
+  border-right: solid 1px #E5E7F0;
 }
@@ -670,7 +697,7 @@
 [dir=ltr] .brde-1 {
-  border-right: solid 1px #D1D4DD;
+  border-right: solid 1px #E5E7F0;
 }
 
 [dir=rtl] .brde-1 {
-  border-left: solid 1px #D1D4DD;
+  border-left: solid 1px #E5E7F0;
 }
@@ -1274,2 +1301,91 @@
   box-shadow: none;
+}
+
+.hvr-1 {
+  cursor: pointer;
+  box-shadow: none;
+}
+.hvr-1:not([disabled]):hover, .hvr-1:not([disabled]):focus {
+  outline: none;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
+}
+
+.hvr-2 {
+  cursor: pointer;
+}
+.hvr-2:not([disabled]):hover, .hvr-2:not([disabled]):focus {
+  color: #0ea960;
+}
+
+.d-block {
+  display: block;
+}
+
+.d-inline {
+  display: inline;
+}
+
+.d-inline-block {
+  display: inline-block;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.d-inline-flex {
+  display: inline-flex;
+}
+
+.d-flex.row,
+.d-inline-flex.row {
+  flex-direction: row;
+}
+.d-flex.col,
+.d-inline-flex.col {
+  flex-direction: column;
+}
+.d-flex .jc-center,
+.d-inline-flex .jc-center {
+  justify-content: center;
+}
+.d-flex .jc-start,
+.d-inline-flex .jc-start {
+  justify-content: flex-start;
+}
+.d-flex .jc-end,
+.d-inline-flex .jc-end {
+  justify-content: flex-end;
+}
+.d-flex .ai-center,
+.d-inline-flex .ai-center {
+  align-items: center;
+}
+.d-flex .ai-start,
+.d-inline-flex .ai-start {
+  align-items: flex-start;
+}
+.d-flex .ai-end,
+.d-inline-flex .ai-end {
+  align-items: flex-end;
+}
+.d-flex .grow,
+.d-inline-flex .grow {
+  flex-grow: 1;
+}
+
+.z-1 {
+  z-index: 1;
+}
+
+.z-2 {
+  z-index: 2;
+}
+
+.z-3 {
+  z-index: 3;
+}
+
+.z-999 {
+  z-index: 999;
 }

package.json

 {
   "name": "@cafebazaar/bazaar-css",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Bazaar Design System Styles",
@@ -5,0 +5,0 @@ "main": "./dist/bazaar.js",

src/components/button.scss

@@ -96,2 +96,4 @@ @mixin _button-color($main-color, $alternative: false) {
   overflow: hidden;
+  transition-property: background-color;
+  transition-duration: 0.12s;
 
@@ -107,2 +109,3 @@ &:disabled,
       width: map-get($size-values, size);
+      padding: 0;
     }
@@ -109,0 +112,0 @@ }

src/components/input.scss

@@ -16,2 +16,4 @@ @use 'sass:math';
   background-color: map-get($colors, gray1);
+  transition-property: background-color;
+  transition-duration: 0.12s;
 
@@ -18,0 +20,0 @@ &.typ-ghost {

src/components/menu.scss

@@ -13,5 +13,19 @@ .c-menu {
     box-shadow: map-get($shadow-sizes, md);
-    display: none;
-    margin-top: 0;
-    transition: margin 1.3s;
+    top: calc(100% + map-get($space-sizes, sm));
+    z-index: 9999;
+    pointer-events: none;
+    opacity: 0;
+    transform: translateY(-1 * map-get($space-sizes, sm));
+    transition-property: opacity, transform;
+    transition-duration: 0.12s;
+
+    &::before {
+      pointer-events: none;
+      content: '';
+      position: absolute;
+      top: -1 * map-get($space-sizes, sm);
+      left: 0;
+      height: map-get($space-sizes, sm);
+      width: 100%;
+    }
   }
@@ -22,45 +36,29 @@
     & > .c-menu-content {
-      display: block;
-      z-index: 9999;
-      top: calc(100% + map-get($space-sizes, sm));
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: all;
 
       &::before {
-        content: '';
-        position: absolute;
-        top: -1 * map-get($space-sizes, sm);
-        left: 0;
-        height: map-get($space-sizes, sm);
-        width: 100%;
+        pointer-events: all;
       }
     }
+  }
 
-    &.pos-center > .c-menu-content {
-      @include ltr {
-        left: 50%;
-      }
-      @include rtl {
-        right: 50%;
-      }
-      transform: translateX(-50%);
+  &.pos-start > .c-menu-content {
+    @include ltr {
+      left: 0;
     }
-
-    &.pos-start > .c-menu-content {
-      @include ltr {
-        left: 0;
-      }
-      @include rtl {
-        right: 0;
-      }
+    @include rtl {
+      right: 0;
     }
+  }
 
-    &.pos-end > .c-menu-content {
-      @include ltr {
-        right: 0;
-      }
-      @include rtl {
-        left: 0;
-      }
+  &.pos-end > .c-menu-content {
+    @include ltr {
+      right: 0;
     }
+    @include rtl {
+      left: 0;
+    }
   }
-
 }

src/components/tab.scss

@@ -13,2 +13,3 @@ .c-tab {
     align-items: center;
+    justify-content: center;
     padding: 0 map-get($space-sizes, sm);
@@ -15,0 +16,0 @@ color: map-get($colors, gray7);

src/globals/border.scss

@@ -1,2 +0,2 @@
-$border-color: map-get($colors, gray5);
+$border-color: map-get($colors, gray4);
 
@@ -3,0 +3,0 @@ .brd-1 {

src/globals/size.scss

@@ -8,1 +8,5 @@ @each $size-name, $size-values in $element-sizes {
 }
+
+.w-100 {
+  width: 100%;
+}

src/main.scss

@@ -13,4 +13,4 @@ @import './imports/variables.scss';
 
+@import './globals/size.scss';
 @import './globals/typography.scss';
-@import './globals/size.scss';
 @import './globals/border.scss';
@@ -21,1 +21,4 @@ @import './globals/color.scss';
 @import './globals/shadow.scss';
+@import './globals/hover.scss';
+@import './globals/display.scss';
+@import './globals/zindex.scss';

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

626564

3.73%

Number of package files

65

14.04%

Lines of code

8079

5.28%

No dependency changes