@smwb/ui-css 2.2.0 → 2.3.0

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.
Files changed (2) hide show
  1. package/dist/ui.css +61 -1
  2. package/package.json +2 -2
package/dist/ui.css CHANGED
@@ -641,6 +641,13 @@
641
641
  padding: 0 8px;
642
642
  font-size: 0.75rem;
643
643
  }
644
+ @media (pointer: coarse) {
645
+ .smwb-chip_size-small:is(a[href]),
646
+ .smwb-chip_size-small:has(> .smwb-chip__content[role="button"]) {
647
+ height: var(--smui-control-h-sm, 44px);
648
+ min-height: var(--smui-control-h-sm, 44px);
649
+ }
650
+ }
644
651
  .smwb-chip.smwb-chip_color-primary:not(.smwb-chip.smwb-disabled).smwb-filled {
645
652
  background-color: var(--smui-primaryColor);
646
653
  color: var(--smui-onPrimaryColor);
@@ -2639,6 +2646,11 @@
2639
2646
  .smwb-menu__item--dense {
2640
2647
  height: 32px;
2641
2648
  }
2649
+ @media (pointer: coarse) {
2650
+ .smwb-menu__item--dense {
2651
+ height: max(32px, var(--smui-control-h-sm, 44px));
2652
+ }
2653
+ }
2642
2654
  .smwb-menu__item--disabled {
2643
2655
  color: var(--smui-menuDisabledTextColor);
2644
2656
  pointer-events: none;
@@ -2765,6 +2777,11 @@
2765
2777
  opacity: 0.38;
2766
2778
  cursor: default;
2767
2779
  }
2780
+ @media (pointer: coarse) {
2781
+ .smwb-tabs__scroll-button {
2782
+ width: max(40px, var(--smui-control-h-sm, 44px));
2783
+ }
2784
+ }
2768
2785
  .smwb-tabs__overflow-trigger {
2769
2786
  display: inline-flex;
2770
2787
  align-items: center;
@@ -2788,6 +2805,11 @@
2788
2805
  opacity: 0.38;
2789
2806
  cursor: default;
2790
2807
  }
2808
+ @media (pointer: coarse) {
2809
+ .smwb-tabs__overflow-trigger {
2810
+ width: max(40px, var(--smui-control-h-sm, 44px));
2811
+ }
2812
+ }
2791
2813
  .smwb-tabs__indicator {
2792
2814
  display: flex;
2793
2815
  justify-content: center;
@@ -2974,6 +2996,11 @@
2974
2996
  letter-spacing: normal;
2975
2997
  text-transform: none;
2976
2998
  }
2999
+ @media (pointer: coarse) {
3000
+ .smwb-tabs--dense .smwb-tab {
3001
+ min-height: max(var(--smui-tabDenseHeight, 36px), var(--smui-control-h-sm, 44px));
3002
+ }
3003
+ }
2977
3004
  .smwb-tabs--fit .smwb-tab,
2978
3005
  .smwb-tabs--fit .smwb-tab-item {
2979
3006
  flex: 0 0 auto;
@@ -3617,6 +3644,11 @@
3617
3644
  padding-top: 4px;
3618
3645
  padding-bottom: 4px;
3619
3646
  }
3647
+ @media (pointer: coarse) {
3648
+ .smwb-list__item_dense {
3649
+ min-height: max(36px, var(--smui-control-h-sm, 44px));
3650
+ }
3651
+ }
3620
3652
  .smwb-list__item_divider {
3621
3653
  border-bottom: 1px solid var(--smui-dividerColor);
3622
3654
  }
@@ -3625,6 +3657,11 @@
3625
3657
  padding-top: 4px;
3626
3658
  padding-bottom: 4px;
3627
3659
  }
3660
+ @media (pointer: coarse) {
3661
+ .smwb-list_dense .smwb-list__item {
3662
+ min-height: max(36px, var(--smui-control-h-sm, 44px));
3663
+ }
3664
+ }
3628
3665
  .smwb-list__item.smwb-list__item_link,
3629
3666
  .smwb-list_dense .smwb-list__item.smwb-list__item_link {
3630
3667
  padding: 0;
@@ -7165,17 +7202,30 @@
7165
7202
  align-self: center;
7166
7203
  }
7167
7204
  .smwb-tab-groups__actions-trigger {
7205
+ --smwb-tab-groups-actions-size: var(--smui-control-h-lg, 48px);
7168
7206
  display: inline-flex;
7169
7207
  align-items: center;
7170
7208
  justify-content: center;
7209
+ box-sizing: border-box;
7171
7210
  flex: 0 0 auto;
7172
- width: 40px;
7211
+ align-self: center;
7212
+ min-width: 0;
7213
+ width: var(--smwb-tab-groups-actions-size);
7214
+ height: var(--smwb-tab-groups-actions-size);
7173
7215
  padding: 0;
7174
7216
  border: none;
7175
7217
  background: none;
7176
7218
  color: var(--smui-onSurfaceVariant);
7177
7219
  cursor: pointer;
7178
7220
  }
7221
+ .smwb-tab-groups__actions-trigger--dense {
7222
+ --smwb-tab-groups-actions-size: var(--smui-tabDenseHeight, 36px);
7223
+ }
7224
+ @media (pointer: coarse) {
7225
+ .smwb-tab-groups__actions-trigger--dense {
7226
+ --smwb-tab-groups-actions-size: max(var(--smui-tabDenseHeight, 36px), var(--smui-control-h-sm, 44px));
7227
+ }
7228
+ }
7179
7229
  .smwb-tab-groups__actions-trigger:hover:not(:disabled) {
7180
7230
  background-color: var(--smui-onSurfaceHover);
7181
7231
  }
@@ -10339,6 +10389,9 @@
10339
10389
  --smui-control-h-sm: 32px;
10340
10390
  --smui-control-h-md: 40px;
10341
10391
  --smui-control-h-lg: 48px;
10392
+ --smui-control-h-sm-coarse: 44px;
10393
+ --smui-control-h-md-coarse: 44px;
10394
+ --smui-control-h-lg-coarse: 48px;
10342
10395
  /* Border-radius scale */
10343
10396
  --smui-radius-xs: 2px;
10344
10397
  --smui-radius-sm: 4px;
@@ -10360,6 +10413,13 @@
10360
10413
  --smui-bp-lg: 1024px;
10361
10414
  --smui-bp-xl: 1200px;
10362
10415
  }
10416
+ @media (pointer: coarse) {
10417
+ :root {
10418
+ --smui-control-h-sm: var(--smui-control-h-sm-coarse, 44px);
10419
+ --smui-control-h-md: var(--smui-control-h-md-coarse, 44px);
10420
+ --smui-control-h-lg: var(--smui-control-h-lg-coarse, 48px);
10421
+ }
10422
+ }
10363
10423
  :root[data-theme="dark"] {
10364
10424
  --smui-onSurfaceVariant: #cac4d0;
10365
10425
  --smui-onSurfaceColor: #e6e1e5;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@smwb/ui-css",
3
- "version": "2.2.0",
3
+ "version": "2.3.0",
4
4
  "description": "Prebuilt aggregate stylesheet for the @smwb design system (compiled from @smwb/ui-styles). Framework-agnostic — shared by the React and SolidJS libraries.",
5
5
  "license": "MIT",
6
6
  "sideEffects": [
@@ -19,7 +19,7 @@
19
19
  "build": "lessc -rp=/ ../styles/less/components.less ./dist/ui.css"
20
20
  },
21
21
  "devDependencies": {
22
- "@smwb/ui-styles": "^2.2.0",
22
+ "@smwb/ui-styles": "^2.3.0",
23
23
  "less": "^4.6.4"
24
24
  },
25
25
  "homepage": "https://sourcecraft.dev/elfenmail/ui",