From 44e55888f256169bc79805c6abce60fc03aa2295 Mon Sep 17 00:00:00 2001 From: John Leider Date: Wed, 3 Apr 2024 20:23:30 -0500 Subject: [PATCH] feat(opacity): add new utility classes --- packages/docs/src/data/nav.json | 1 + .../docs/src/examples/opacity/misc-hover.vue | 19 ++++ .../src/examples/opacity/misc-opacity.vue | 40 ++++++++ packages/docs/src/pages/en/styles/opacity.md | 95 +++++++++++++++++++ .../src/styles/settings/_utilities.scss | 5 + .../src/styles/settings/_variables.scss | 24 +++++ 6 files changed, 184 insertions(+) create mode 100644 packages/docs/src/examples/opacity/misc-hover.vue create mode 100644 packages/docs/src/examples/opacity/misc-opacity.vue create mode 100644 packages/docs/src/pages/en/styles/opacity.md diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json index 3e1397b2798..b2ffa5659a7 100644 --- a/packages/docs/src/data/nav.json +++ b/packages/docs/src/data/nav.json @@ -68,6 +68,7 @@ "elevation", "flex", "float", + "opacity", "overflow", "position", "sizing", diff --git a/packages/docs/src/examples/opacity/misc-hover.vue b/packages/docs/src/examples/opacity/misc-hover.vue new file mode 100644 index 00000000000..aa787dbcfcb --- /dev/null +++ b/packages/docs/src/examples/opacity/misc-hover.vue @@ -0,0 +1,19 @@ + diff --git a/packages/docs/src/examples/opacity/misc-opacity.vue b/packages/docs/src/examples/opacity/misc-opacity.vue new file mode 100644 index 00000000000..cc6e9b571f1 --- /dev/null +++ b/packages/docs/src/examples/opacity/misc-opacity.vue @@ -0,0 +1,40 @@ + diff --git a/packages/docs/src/pages/en/styles/opacity.md b/packages/docs/src/pages/en/styles/opacity.md new file mode 100644 index 00000000000..96d8e0ec46b --- /dev/null +++ b/packages/docs/src/pages/en/styles/opacity.md @@ -0,0 +1,95 @@ +--- +emphasized: true +meta: + title: Opacity + description: Use opacity utilities to quickly style the opacity of any element. + keywords: opacity classes, opacity utilities, vuetify opacity helper classes +related: + - /styles/opacity-radius/ + - /styles/display/ + - /styles/content/ +features: + report: true +--- + +# Opacity + +Utilities for controlling the opacity of elements in your application. + + + +::: success + +This feature was introduced in [v3.6.0 (Nebula)](/getting-started/release-notes/?version=v3.6.0) + +::: + +| Class | Properties | +| - | - | +| **opacity-0** | opacity: 0; | +| **opacity-10** | opacity: .1; | +| **opacity-20** | opacity: .2; | +| **opacity-30** | opacity: .3; | +| **opacity-40** | opacity: .4; | +| **opacity-50** | opacity: .5; | +| **opacity-60** | opacity: .6; | +| **opacity-70** | opacity: .7; | +| **opacity-80** | opacity: .8; | +| **opacity-90** | opacity: .9; | +| **opacity-100** | opacity: 1; | +| **opacity-hover** | opacity: var(--v-hover-opacity); | +| **opacity-focus** | opacity: var(--v-focus-opacity); | +| **opacity-selected** | opacity: var(--v-selected-opacity); | +| **opacity-activated** | opacity: var(--v-activated-opacity); | +| **opacity-pressed** | opacity: var(--v-pressed-opacity); | +| **opacity-dragged** | opacity: var(--v-dragged-opacity); { style="max-height: 420px;" fixed-header } | + + + +## Usage + +The `opacity` utilities allow you to quickly change the opacity of any element. + + + +### Hover + +Using the [v-hover](/components/hover/) component, conditionally apply an opacity class when the element is hovered over. + + + +## SASS variables + +You can also use the following SASS variables to customize the opacity color and width: + +```sass { resource="src/styles/settings.scss" } +@use 'vuetify/settings' with ( + $opacities: ( + hover: var(--v-hover-opacity), + focus: var(--v-focus-opacity), + selected: var(--v-selected-opacity), + activated: var(--v-activated-opacity), + pressed: var(--v-pressed-opacity), + dragged: var(--v-dragged-opacity), + 0: 0, + 10: .1, + 20: .2, + 30: .3, + 40: .4, + 50: .5, + 60: .6, + 70: .7, + 80: .8, + 90: .9, + 100: 1 + ) +); +``` + +Disable opacity class generation by setting the $opacities variable to **false**. + +```sass { resource="src/styles/settings.scss" } +@use 'vuetify/settings' with ( + $opacities: false +); +``` diff --git a/packages/vuetify/src/styles/settings/_utilities.scss b/packages/vuetify/src/styles/settings/_utilities.scss index ae429e8d3da..4e8b979563c 100644 --- a/packages/vuetify/src/styles/settings/_utilities.scss +++ b/packages/vuetify/src/styles/settings/_utilities.scss @@ -472,6 +472,11 @@ $utilities: () !default; class: text, values: (break: break-word) ), + "opacity": ( + property: opacity, + class: opacity, + values: variables.$opacities + ), "text-opacity": ( property: color, class: text, diff --git a/packages/vuetify/src/styles/settings/_variables.scss b/packages/vuetify/src/styles/settings/_variables.scss index e29c25c62dd..e346f6bb160 100644 --- a/packages/vuetify/src/styles/settings/_variables.scss +++ b/packages/vuetify/src/styles/settings/_variables.scss @@ -47,6 +47,30 @@ $border-opacities: map-deep-merge( $border-opacities ); +$opacities: () !default; +$opacities: map-deep-merge( + ( + hover: var(--v-hover-opacity), + focus: var(--v-focus-opacity), + selected: var(--v-selected-opacity), + activated: var(--v-activated-opacity), + pressed: var(--v-pressed-opacity), + dragged: var(--v-dragged-opacity), + 0: 0, + 10: .1, + 20: .2, + 30: .3, + 40: .4, + 50: .5, + 60: .6, + 70: .7, + 80: .8, + 90: .9, + 100: 1 + ), + $opacities +); + $states: () !default; $states: map-deep-merge( (