feat(navbar): blur styles improved

This commit is contained in:
Junior Garcia 2023-04-20 21:43:29 -03:00
parent 77b386e2ec
commit fd2e75b89d
53 changed files with 265 additions and 40 deletions

View File

@ -1,5 +1,12 @@
# @nextui-org/accordion
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/accordion",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
"keywords": [
"react",

View File

@ -1,5 +1,12 @@
# @nextui-org/avatar
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/avatar",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
"keywords": [
"avatar"

View File

@ -1,5 +1,12 @@
# @nextui-org/badge
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/badge",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "Badges are used as a small numerical value or status descriptor for UI elements.",
"keywords": [
"badge"

View File

@ -1,5 +1,14 @@
# @nextui-org/button
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
- @nextui-org/drip@0.0.0-dev-v2-20230421004240
- @nextui-org/spinner@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/button",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "Buttons allow users to perform actions and choose with a single tap.",
"keywords": [
"button"

View File

@ -1,5 +1,13 @@
# @nextui-org/card
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
- @nextui-org/drip@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/card",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "Card is a container for text, photos, and actions in the context of a single subject.",
"keywords": [
"card"

View File

@ -1,5 +1,12 @@
# @nextui-org/checkbox
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/checkbox",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
"keywords": [
"checkbox"

View File

@ -1,5 +1,12 @@
# @nextui-org/chip
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/chip",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "Chips help people enter information, make selections, filter content, or trigger actions.",
"keywords": [
"chip"

View File

@ -1,5 +1,12 @@
# @nextui-org/code
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/code",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "Code is a component used to display inline code.",
"keywords": [
"code"

View File

@ -1,5 +1,12 @@
# @nextui-org/drip
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/drip",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "A ripple effect for ensuring that the user fells the system is reacting instantaneously",
"keywords": [
"drip"

View File

@ -1,5 +1,13 @@
# @nextui-org/dropdown
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
- @nextui-org/popover@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/dropdown",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "A dropdown displays a list of actions or options that a user can choose.",
"keywords": [
"dropdown"

View File

@ -1,5 +1,12 @@
# @nextui-org/image
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/image",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "A simple image component",
"keywords": [
"image"

View File

@ -1,5 +1,12 @@
# @nextui-org/input
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/input",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "The input component is designed for capturing user input within a text field.",
"keywords": [
"input"

View File

@ -1,5 +1,12 @@
# @nextui-org/link
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/link",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an <a>",
"keywords": [
"link"

View File

@ -1,5 +1,12 @@
# @nextui-org/modal
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420135820
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/modal",
"version": "0.0.0-dev-v2-20230420135820",
"version": "0.0.0-dev-v2-20230421004240",
"description": "Displays a dialog with a custom content that requires attention or provides additional information.",
"keywords": [
"modal"

View File

@ -1,5 +1,12 @@
# @nextui-org/navbar
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/navbar",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
"keywords": [
"navbar"

View File

@ -1,5 +1,12 @@
# @nextui-org/pagination
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/pagination",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "The Pagination component allows you to display active page and navigate between multiple pages.",
"keywords": [
"pagination"

View File

@ -1,5 +1,13 @@
# @nextui-org/popover
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
- @nextui-org/button@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/popover",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "A popover is an overlay element positioned relative to a trigger.",
"keywords": [
"popover"

View File

@ -1,5 +1,12 @@
# @nextui-org/progress
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/progress",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
"keywords": [
"progress"

View File

@ -1,5 +1,12 @@
# @nextui-org/radio
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/radio",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "Radios allow users to select a single option from a list of mutually exclusive options.",
"keywords": [
"radio"

View File

@ -1,5 +1,13 @@
# @nextui-org/snippet
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
- @nextui-org/tooltip@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/snippet",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "Display a snippet of copyable code for the command line.",
"keywords": [
"snippet"

View File

@ -1,5 +1,12 @@
# @nextui-org/spinner
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/spinner",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "Loaders express an unspecified wait time or display the length of a process.",
"keywords": [
"loading",

View File

@ -1,5 +1,12 @@
# @nextui-org/switch
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/switch",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
"keywords": [
"switch"

View File

@ -1,5 +1,12 @@
# @nextui-org/tooltip
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/tooltip",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "A React Component for rendering dynamically positioned Tooltips",
"keywords": [
"tooltip"

View File

@ -1,5 +1,13 @@
# @nextui-org/user
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
- @nextui-org/avatar@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/user",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "Flexible User Profile Component.",
"keywords": [
"user"

View File

@ -1,5 +1,36 @@
# @nextui-org/react
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230421004240
- @nextui-org/accordion@0.0.0-dev-v2-20230421004240
- @nextui-org/avatar@0.0.0-dev-v2-20230421004240
- @nextui-org/badge@0.0.0-dev-v2-20230421004240
- @nextui-org/button@0.0.0-dev-v2-20230421004240
- @nextui-org/card@0.0.0-dev-v2-20230421004240
- @nextui-org/checkbox@0.0.0-dev-v2-20230421004240
- @nextui-org/chip@0.0.0-dev-v2-20230421004240
- @nextui-org/code@0.0.0-dev-v2-20230421004240
- @nextui-org/drip@0.0.0-dev-v2-20230421004240
- @nextui-org/dropdown@0.0.0-dev-v2-20230421004240
- @nextui-org/image@0.0.0-dev-v2-20230421004240
- @nextui-org/input@0.0.0-dev-v2-20230421004240
- @nextui-org/link@0.0.0-dev-v2-20230421004240
- @nextui-org/modal@0.0.0-dev-v2-20230421004240
- @nextui-org/navbar@0.0.0-dev-v2-20230421004240
- @nextui-org/pagination@0.0.0-dev-v2-20230421004240
- @nextui-org/popover@0.0.0-dev-v2-20230421004240
- @nextui-org/progress@0.0.0-dev-v2-20230421004240
- @nextui-org/radio@0.0.0-dev-v2-20230421004240
- @nextui-org/snippet@0.0.0-dev-v2-20230421004240
- @nextui-org/spinner@0.0.0-dev-v2-20230421004240
- @nextui-org/switch@0.0.0-dev-v2-20230421004240
- @nextui-org/tooltip@0.0.0-dev-v2-20230421004240
- @nextui-org/user@0.0.0-dev-v2-20230421004240
## 0.0.0-dev-v2-20230420135820
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/react",
"version": "0.0.0-dev-v2-20230420135820",
"version": "0.0.0-dev-v2-20230421004240",
"description": "🚀 Beautiful and modern React UI library.",
"author": "Junior Garcia <jrgarciadev@gmail.com>",
"homepage": "https://nextui.org",

View File

@ -1,5 +1,11 @@
# @nextui-org/theme
## 0.0.0-dev-v2-20230421004240
### Patch Changes
- Navbar blurriness improved
## 0.0.0-dev-v2-20230420134926
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/theme",
"version": "0.0.0-dev-v2-20230420134926",
"version": "0.0.0-dev-v2-20230421004240",
"description": "The default theme for NextUI components",
"keywords": [
"theme",

View File

@ -62,6 +62,7 @@ const navbar = tv({
wrapper: [
"flex",
"flex-row",
"relative",
"flex-nowrap",
"items-center",
"justify-between",
@ -197,15 +198,7 @@ const navbar = tv({
},
hideOnScroll: {
true: {
base: [
"sticky",
"top-0",
"inset-x-0",
// "transition-transform",
// "!duration-400",
// "translate-y-0",
// "data-[hide=true]:-translate-y-full",
],
base: ["sticky", "top-0", "inset-x-0"],
},
},
isBordered: {
@ -234,17 +227,37 @@ const navbar = tv({
isBlurred: true,
position: ["static", "sticky"],
class: {
base:
"backdrop-blur-xl backdrop-saturate-200 bg-background/50 data-[menu-open=true]:bg-background",
base: [
"before:content-['']",
"before:block",
"before:z-[-1]",
"before:absolute",
"before:-top-px",
"before:inset-0",
"before:backdrop-blur",
"before:backdrop-saturate-150",
"before:bg-background/50",
"data-[menu-open=true]:before:bg-background",
],
},
},
{
isBlurred: true,
position: "floating",
class: {
base: "bg-gradient-to-b from-background to-background/50",
wrapper:
"backdrop-blur-xl backdrop-saturate-200 bg-background/50 data-[menu-open=true]:bg-background",
base: "bg-gradient-to-b from-background to-transparent",
wrapper: [
"before:content-['']",
"before:block",
"before:z-[-1]",
"before:absolute",
"before:-top-px",
"before:inset-0",
"before:backdrop-blur",
"before:backdrop-saturate-150",
"before:bg-background/50",
"data-[menu-open=true]:before:bg-background",
],
},
},
],