@volverjs/style 0.1.11-beta.1 → 0.1.11-beta.3

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.
package/package.json CHANGED
@@ -24,7 +24,7 @@
24
24
  "bugs": {
25
25
  "url": "https://github.com/volverjs/style/issues"
26
26
  },
27
- "version": "0.1.11-beta.1",
27
+ "version": "0.1.11-beta.3",
28
28
  "engines": {
29
29
  "node": ">= 12.x"
30
30
  },
@@ -38,46 +38,46 @@
38
38
  ],
39
39
  "devDependencies": {
40
40
  "@iconify/vue": "^4.1.1",
41
- "@vitejs/plugin-vue": "^4.2.2",
41
+ "@vitejs/plugin-vue": "^4.2.3",
42
42
  "@vueuse/core": "^10.1.2",
43
43
  "@vueuse/head": "^1.1.26",
44
- "eslint": "^8.40.0",
44
+ "eslint": "^8.41.0",
45
45
  "eslint-config-prettier": "^8.8.0",
46
- "eslint-plugin-vue": "^9.12.0",
47
- "glob": "^10.2.3",
46
+ "eslint-plugin-vue": "^9.14.0",
47
+ "glob": "^10.2.6",
48
48
  "icss-utils": "^5.1.0",
49
49
  "markdown-it-anchor": "^8.6.7",
50
50
  "markdown-it-prism": "^2.3.0",
51
51
  "postcss": "^8.4.23",
52
52
  "postcss-html": "^1.5.0",
53
- "postcss-preset-env": "^8.3.2",
53
+ "postcss-preset-env": "^8.4.1",
54
54
  "prism-themes": "^1.9.0",
55
- "prismjs": "1.29.0",
56
- "remark": "^14.0.2",
55
+ "prismjs": "^1.29.0",
56
+ "remark": "^14.0.3",
57
57
  "remark-frontmatter": "^4.0.1",
58
58
  "remark-gfm": "^3.0.1",
59
- "remark-lint": "^9.1.1",
59
+ "remark-lint": "^9.1.2",
60
60
  "sass": "^1.62.1",
61
- "stylelint": "^15.6.1",
61
+ "stylelint": "^15.6.2",
62
62
  "stylelint-config-prettier": "^9.0.5",
63
- "stylelint-config-recommended-scss": "^11.0.0",
63
+ "stylelint-config-recommended-scss": "^12.0.0",
64
64
  "stylelint-config-recommended-vue": "^1.4.0",
65
65
  "stylelint-config-standard-scss": "^9.0.0",
66
- "unplugin-auto-import": "^0.15.3",
66
+ "unplugin-auto-import": "^0.16.2",
67
67
  "unplugin-vue-components": "^0.24.1",
68
- "vite": "^4.3.5",
68
+ "vite": "^4.3.8",
69
69
  "vite-plugin-css-export": "^2.0.0",
70
70
  "vite-plugin-eslint": "^1.8.1",
71
71
  "vite-plugin-handlebars": "^1.6.0",
72
72
  "vite-plugin-markdown": "^2.1.0",
73
- "vite-plugin-pages": "^0.29.0",
73
+ "vite-plugin-pages": "^0.30.1",
74
74
  "vite-plugin-stylelint": "^4.3.0",
75
75
  "vite-plugin-vue-layouts": "^0.8.0",
76
76
  "vite-ssg": "^0.22.2",
77
77
  "vite-ssg-sitemap": "^0.5.1",
78
- "vue": "^3.3.1",
79
- "vue-live": "2.5.3",
80
- "vue-router": "^4.2.0"
78
+ "vue": "^3.3.4",
79
+ "vue-live": "^2.5.3",
80
+ "vue-router": "^4.2.1"
81
81
  },
82
82
  "exports": {
83
83
  ".": "./dist/volver.css",
@@ -1,5 +1,6 @@
1
1
  $vv-dropdown: (
2
2
  --dropdown-border-radius: 0px,
3
+ --dropdown-custom-position: false,
3
4
  position: relative,
4
5
  z-index: var(--z-dropdown),
5
6
  display: flex,
@@ -108,5 +109,87 @@ $vv-dropdown: (
108
109
  ),
109
110
  ),
110
111
  ),
112
+ dialog: (
113
+ --dropdown-border-radius: var(--rounded-lg),
114
+ --dropdown-custom-position: true,
115
+ position: fixed,
116
+ display: flex,
117
+ inset: 0,
118
+ width: auto,
119
+ height: auto,
120
+ z-index: var(--z-modal-backdrop),
121
+ background-color: var(--color-backdrop),
122
+ backdrop-filter: var(--blur-sm),
123
+ justify-content: flex-end,
124
+ align-items: center,
125
+ padding: var(--spacing-lg),
126
+ gap: var(--spacing-md),
127
+ state: (
128
+ close: (
129
+ display: none,
130
+ ),
131
+ ),
132
+ element: (
133
+ list: (
134
+ max-width: clamp(30dvw, 40rem, 90dvw),
135
+ z-index: var(--z-modal),
136
+ ),
137
+ ),
138
+ ),
139
+ mobile: (
140
+ breakpoint: (
141
+ down-xs: (
142
+ --dropdown-border-radius: var(--rounded-lg),
143
+ --dropdown-custom-position: true,
144
+ position: fixed,
145
+ inset: 0,
146
+ width: auto,
147
+ height: auto,
148
+ z-index: var(--z-modal-backdrop),
149
+ background-color: var(--color-backdrop),
150
+ backdrop-filter: var(--blur-sm),
151
+ justify-content: flex-end,
152
+ padding: var(--spacing-lg),
153
+ gap: var(--spacing-md),
154
+ ),
155
+ ),
156
+ element: (
157
+ list: (
158
+ breakpoint: (
159
+ down-xs: (
160
+ z-index: var(--z-modal),
161
+ ),
162
+ ),
163
+ ),
164
+ ),
165
+ ),
166
+ ),
167
+ transition: (
168
+ fade-block: (
169
+ active: (
170
+ transition: var(--transition-opacity),
171
+ element: (
172
+ list: (
173
+ transition: var(--transition-transform),
174
+ ),
175
+ ),
176
+ ),
177
+ enter-from: (
178
+ opacity: var(--opacity-0),
179
+ element: (
180
+ list: (
181
+ transform: translateY(100%),
182
+ ),
183
+ ),
184
+ ),
185
+ leave-to: (
186
+ opacity: var(--opacity-0),
187
+ element: (
188
+ list: (
189
+ transform: translateY(100%),
190
+ ),
191
+ ),
192
+ ),
193
+ ),
111
194
  ),
112
195
  ) !default;
@@ -1,4 +1,5 @@
1
1
  @use 'sass:map';
2
+ @use 'sass:list';
2
3
 
3
4
  // Breakpoint viewport sizes and media queries.
4
5
  // Breakpoints are defined as a map of (name: minimum width), order from small to large:
@@ -667,7 +667,68 @@
667
667
  }
668
668
  @if type-of(map.get($map, $key)) == 'map' {
669
669
  @each $breakpoint, $value in map.get($map, $key) {
670
- @if map.has-key($bps, $breakpoint) {
670
+ @if string.index($breakpoint, '-') {
671
+ $operator: list.nth(string.split($breakpoint, '-'), 1);
672
+ $bp: list.nth(string.split($breakpoint, '-'), 2);
673
+
674
+ @if map.has-key($bps, $bp) {
675
+ @if $operator == 'up' {
676
+ @include wrap-with-where(
677
+ $selector: '#{$modifier}#{$block}',
678
+ $enabled: $zero-specificity
679
+ ) {
680
+ @include media-breakpoint-up($bp, $bps) {
681
+ @include spread-map-into-attrs(
682
+ $original: $original,
683
+ $map: $value,
684
+ $prefix: $prefix,
685
+ $variant: #{$key}-#{$breakpoint},
686
+ $deep: true,
687
+ $props: $props
688
+ );
689
+ }
690
+ }
691
+ }
692
+ @if $operator == 'down' {
693
+ @include wrap-with-where(
694
+ $selector: '#{$modifier}#{$block}',
695
+ $enabled: $zero-specificity
696
+ ) {
697
+ @include media-breakpoint-down($bp, $bps) {
698
+ @include spread-map-into-attrs(
699
+ $original: $original,
700
+ $map: $value,
701
+ $prefix: $prefix,
702
+ $variant: #{$key}-#{$breakpoint},
703
+ $deep: true,
704
+ $props: $props
705
+ );
706
+ }
707
+ }
708
+ }
709
+ @if map.has-key($bps, $operator) {
710
+ @include wrap-with-where(
711
+ $selector: '#{$modifier}#{$block}',
712
+ $enabled: $zero-specificity
713
+ ) {
714
+ @include media-breakpoint-between(
715
+ $operator,
716
+ $bp,
717
+ $bps
718
+ ) {
719
+ @include spread-map-into-attrs(
720
+ $original: $original,
721
+ $map: $value,
722
+ $prefix: $prefix,
723
+ $variant: #{$key}-#{$breakpoint},
724
+ $deep: true,
725
+ $props: $props
726
+ );
727
+ }
728
+ }
729
+ }
730
+ }
731
+ } @else if map.has-key($bps, $breakpoint) {
671
732
  @include wrap-with-where(
672
733
  $selector: '#{$modifier}#{$block}',
673
734
  $enabled: $zero-specificity