Latest Threat Research:SANDWORM_MODE: Shai-Hulud-Style npm Worm Hijacks CI Workflows and Poisons AI Toolchains.Details →
@cafebazaar/bazaar-css
Advanced tools
@cafebazaar/bazaar-css - npm Package Compare versions
+8
-0
@@ -0,1 +1,9 @@ | ||
| ## 0.2.1 | ||
| - fix npm bin file path | ||
| ## 0.2.0 | ||
| - update display classes (add d-none and change classnames) | ||
| - add 'auto' to space section value (margin and padding) | ||
| - add mnw-{size} and mxw-{size} (min-width and max-width) classes to size section | ||
| - update docs | ||
| ## 0.1.0 | ||
@@ -2,0 +10,0 @@ - fix button fab padding |
| <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> | ||
| <Section plain title="Barista Desktop"> | ||
| <div class="brd-1 barista-home d-flex fd-col"> | ||
| <header class="sz-3xl shdw-md z-1"> | ||
| <div class="w-100 mxw-smdesktop mrl-auto mrr-auto d-flex row ai-center pds-md pde-md"> | ||
| <div class="d-flex ai-center jc-center mre-md mnw-fit"> | ||
| <img style="width:96px;" src="https://webassets.cafebazaar.ir/images/bazaar-logo.svg" alt="logo"> | ||
| </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> | ||
| <ul class="c-tab sz-3xl fs-lg f-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="mrs-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="mrs-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> | ||
| </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 class="f-grow bc-gray2 pdt-lg pdb-lg"> | ||
| <div class="rd-md br-1 bc-gray1 brd-1 bc-gray1 w-100 mxw-smdesktop mrl-auto mrr-auto "> | ||
| <div class="pd-md pdt-sm pdb-sm brdb-1 d-flex ai-center"> | ||
| <h3 class="fs-2xl fw-md f-grow">Softwares and Games</h3> | ||
| <div class="hvr-2 fc-gray8"> | ||
| More Apps | ||
| </div> | ||
| </div> | ||
| <div class="pd-md d-flex fd-row" style="overflow: auto"> | ||
| <div v-for="i in 10" class="rd-md mnw-fit hvr-1 d-iflex fd-col pd-sm mre-md"> | ||
| <img src="https://cafe.bzrcdn.net/1/icons/cab.snapp.passenger_128x128.png?x-img=v1/resize,h_105,w_105/format,type_webp" class="rd-md"> | ||
| <div class="mrt-md"> | ||
| <h4 class="fs-md fw-md"> Snapp! </h4> | ||
| <h4 class="fs-sm fw-md fc-gray7"> Maps & Navigation </h4> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </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> | ||
| <footer class="shdw-sm d-flex fd-col"> | ||
| <div class="d-flex fd-row ai-center pd-md w-100 mxw-smdesktop mrl-auto mrr-auto pdt-lg pdb-md"> | ||
| <div class="f-grow pde-md"> | ||
| <div class="fs-xl fw-hi">The most popular Android AppStore for Persian speakers</div> | ||
| <div class="fs-sm fw-md fc-gray8">Download and Install thousands of free and paid Android apps in Iran. Also, Download and Install thousands of free and paid Android apps in Iran. BTW, You can Download and Install thousands of free and paid Android apps in Iran.</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 class="brd-1 rd-md d-flex fd-row pd-md mnw-fit"> | ||
| <img src="https://webassets.cafebazaar.ir/images/footer-download.png" class="mre-md" alt="Download"> | ||
| <div class="d-flex fd-col"> | ||
| <div class="f-grow pdb-md"> | ||
| <div class="fs-xl fw-hi">Download Bazaar Application</div> | ||
| <div class="fs-xs fw-md fc-gray7">The most popular Android AppStore for Persian speakers</div> | ||
| </div> | ||
| <div> | ||
| <button class="c-btn typ-line sz-sm clr-primary mre-sm"> Andoird Phone </button> | ||
| <button class="c-btn typ-line sz-sm clr-primary"> Andoird TV </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="grow"> | ||
| <div> Footer Link #1 </div> | ||
| <div> Footer Link #2 </div> | ||
| <div> Link #3 </div> | ||
| </div> | ||
| <div class="brdt-1 w-100 mxw-smdesktop mrl-auto mrr-auto mrt-md mrb-md" /> | ||
| <div class="d-flex ai-center fd-row pd-md w-100 mxw-smdesktop mrl-auto mrr-auto "> | ||
| <div class="f-grow pde-md d-flex fd-row"> | ||
| <div class="mre-xl f-grow"> | ||
| <div class="hvr-2 mrb-sm fc-gray8"> Install Bazaar </div> | ||
| <div class="hvr-2 mrb-sm fc-gray8"> Android Games </div> | ||
| <div class="hvr-2 mrb-sm fc-gray8"> Android Applications </div> | ||
| </div> | ||
| <div class="mre-xl f-grow"> | ||
| <div class="hvr-2 mrb-sm fc-gray8"> Developers Panel </div> | ||
| <div class="hvr-2 mrb-sm fc-gray8"> Job Positions </div> | ||
| <div class="hvr-2 mrb-sm fc-gray8"> Badge </div> | ||
| </div> | ||
| <div class="mre-xl f-grow"> | ||
| <div class="hvr-2 mrb-sm fc-gray8"> Terms and Conditions </div> | ||
| <div class="hvr-2 mrb-sm fc-gray8"> Privacy and Policy </div> | ||
| <div class="hvr-2 mrb-sm fc-gray8"> Support </div> | ||
| </div> | ||
| <div class="f-grow"> | ||
| <div class="hvr-2 mrb-sm fc-gray8"> News Blog </div> | ||
| <div class="hvr-2 mrb-sm fc-gray8"> About Us </div> | ||
| <div class="hvr-2 mrb-sm fc-gray8"> Contact Us </div> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <img class="mnw-fit mre-md" src="https://webassets.cafebazaar.ir/images/licences/Enamad.png"> | ||
| <img class="mnw-fit" src="https://webassets.cafebazaar.ir/images/licences/Ecunion.png"> | ||
| </div> | ||
| </div> | ||
| <div class="brdt-1 pd-md fs-sm"> | ||
| Alrights Reserved C 2008 | ||
| <div class="brdt-1" /> | ||
| <div class="pd-md fs-sm w-100 mxw-smdesktop mrl-auto mrr-auto "> | ||
| Copyright © Hezaardastan: All rights reserved. | ||
| </div> | ||
@@ -101,8 +146,2 @@ | ||
| </script> | ||
| <style scoped> | ||
| .barista-home { | ||
| min-height: 500px; | ||
| } | ||
| </style> | ||
| </script> |
@@ -7,2 +7,3 @@ <template> | ||
| <div class="pd-md"> | ||
| <h2 class="fs-2xl fw-hi brdb-1 mrt-md mrb-md">Classes & Components:</h2> | ||
| <Typography /> | ||
@@ -25,2 +26,3 @@ <Size /> | ||
| <div class="pd-md"> | ||
| <h2 class="fs-2xl fw-hi brdb-1 mrt-md mrb-md">Examples:</h2> | ||
| <BaristaHome /> | ||
@@ -27,0 +29,0 @@ </div> |
@@ -17,3 +17,3 @@ <template> | ||
| dynamicParts: { | ||
| display: ['block', 'inline', 'inline-block'], | ||
| display: ['block', 'inline', 'inline-block', 'none'], | ||
| }, | ||
@@ -32,3 +32,3 @@ }, | ||
| type: 'prop', | ||
| value: '{direction}', | ||
| value: 'fd-{direction}', | ||
| dynamicParts: { | ||
@@ -50,5 +50,5 @@ direction: ['row', 'col'], | ||
| type: 'main', | ||
| value: 'grow', | ||
| value: 'f-grow', | ||
| }, | ||
| ]; | ||
| </script> |
@@ -29,2 +29,18 @@ <template> | ||
| }, | ||
| { | ||
| description: 'Max Width', | ||
| type: 'main', | ||
| value: 'mxw-{size}', | ||
| dynamicParts: { | ||
| size: ['mobile', 'phablet', 'tablet', 'smdesktop'], | ||
| }, | ||
| }, | ||
| { | ||
| description: 'Min Width', | ||
| type: 'main', | ||
| value: 'mnw-{size}', | ||
| dynamicParts: { | ||
| size: ['fit'], | ||
| }, | ||
| }, | ||
| ]; | ||
@@ -31,0 +47,0 @@ </script> |
@@ -27,3 +27,3 @@ <template> | ||
| side: [{ name: '', description: 'Apply to all sides'}, { name: 't', description: 'Top' }, { name: 'r', description: 'Right' }, { name: 'b', description: 'Bottom' }, { name: 'l', description: 'Left' }, { name: 's', description: 'Start (Right in RTL and Left in LTR)' }, { name: 'e', description: 'End (Left in RTL and Right in LTR)' }], | ||
| size: ['xs', 'sm', 'md', 'lg', 'xl', '0'], | ||
| size: ['xs', 'sm', 'md', 'lg', 'xl', '0', 'auto'], | ||
| }, | ||
@@ -30,0 +30,0 @@ }, |
+2
-2
| { | ||
| "name": "@cafebazaar/bazaar-css", | ||
| "version": "0.1.0", | ||
| "version": "0.2.1", | ||
| "description": "Bazaar Design System Styles", | ||
@@ -16,3 +16,3 @@ "main": "./dist/bazaar.js", | ||
| }, | ||
| "bin": "./run-docs.js", | ||
| "bin": "./serve-docs", | ||
| "author": "Amir Momenian <nainemom@gmail.com>", | ||
@@ -19,0 +19,0 @@ "license": "ISC", |
@@ -1,2 +0,2 @@ | ||
| $border-color: map-get($colors, gray4); | ||
| $border-color: map-get($colors, gray3); | ||
@@ -3,0 +3,0 @@ .brd-1 { |
@@ -1,3 +0,3 @@ | ||
| @each $display in (block, inline, inline-block, flex, inline-flex) { | ||
| .d-#{$display} { | ||
| @each $display-name, $display in (block: block, inline: inline, iblock: inline-block, flex: flex, iflex: inline-flex, none: none) { | ||
| .d-#{$display-name} { | ||
| display: $display; | ||
@@ -8,5 +8,5 @@ } | ||
| .d-flex, | ||
| .d-inline-flex { | ||
| .d-iflex { | ||
| @each $direction-name, $direction in (row: row, col: column) { | ||
| &.#{$direction-name} { | ||
| &.fd-#{$direction-name} { | ||
| flex-direction: $direction; | ||
@@ -25,5 +25,5 @@ } | ||
| .grow { | ||
| .f-grow { | ||
| flex-grow: 1; | ||
| } | ||
| } |
| .hvr-1 { | ||
| cursor: pointer; | ||
| box-shadow: map-get($shadow-sizes, 0); | ||
| transition: box-shadow 0.15s; | ||
@@ -10,2 +11,3 @@ &:not([disabled]) { | ||
| box-shadow: map-get($shadow-sizes, md); | ||
| transition: box-shadow 0s; | ||
| } | ||
@@ -12,0 +14,0 @@ } |
@@ -11,2 +11,12 @@ @each $size-name, $size-values in $element-sizes { | ||
| width: 100%; | ||
| } | ||
| @each $device-name, $device-size in $device-max-sizes { | ||
| .mxw-#{$device-name} { | ||
| max-width: $device-size; | ||
| } | ||
| } | ||
| .mnw-fit { | ||
| min-width: fit-content; | ||
| } |
@@ -5,2 +5,3 @@ $device-max-sizes: ( | ||
| tablet: 960px, | ||
| smdesktop: 1366px, | ||
| desktop: 9999px, | ||
@@ -91,2 +92,3 @@ ); | ||
| 0: 0, | ||
| auto: auto, | ||
| ); | ||
@@ -93,0 +95,0 @@ |
New alerts
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 2 instances in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 2 instances in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
630741
0.67%No dependency changes