@bi-digital/css 0.11.4 → 0.11.6

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 (5) hide show
  1. package/dist/components/button.css +17 -6
  2. package/dist/components/navbar.css +25 -0
  3. package/dist/components.css +42 -6
  4. package/dist/salesforce.css +42 -6
  5. package/package.json +2 -2
package/dist/components/button.css CHANGED
@@ -89,14 +89,25 @@
89
89
  padding: 0;
90
90
  }
91
91
 
92
- .bi-button[data-skewed="start"]:has(.bi-button--start-icon) {
93
- --bic-button-padding-inline: var(--bi-scale-1x) var(--bi-scale-2x);
94
- margin-left: calc((var(--bi-scale-1x) + (var(--bic-button-icon-size) * .25)) * -1);
92
+ .bi-button[data-skewed] {
93
+ --_bic-button-skew-dist: calc(var(--bi-scale-1x) + (var(--bic-button-icon-size) * .25));
94
+ --bic-button-padding-inline: var(--_bic-button-skew-dist);
95
95
  }
96
96
 
97
- .bi-button[data-skewed="end"]:has(.bi-button--end-icon) {
98
- --bic-button-padding-inline: var(--bi-scale-2x) var(--bi-scale-1x);
99
- margin-right: calc((var(--bi-scale-1x) + (var(--bic-button-icon-size) * .25)) * -1);
97
+ .bi-button[data-skewed][data-skewed="start"] {
98
+ margin-left: calc(var(--_bic-button-skew-dist) * -1);
99
+ }
100
+
101
+ .bi-button[data-skewed][data-skewed="start"]:has(.bi-button--start-icon) {
102
+ --bic-button-padding-inline: var(--bi-scale-0-50x) var(--bi-scale-2x);
103
+ }
104
+
105
+ .bi-button[data-skewed][data-skewed="end"] {
106
+ margin-right: calc(var(--_bic-button-skew-dist) * -1);
107
+ }
108
+
109
+ .bi-button[data-skewed][data-skewed="end"]:has(.bi-button--end-icon) {
110
+ --bic-button-padding-inline: var(--bi-scale-2x) var(--bi-scale-0-50x);
100
111
  }
101
112
 
102
113
  .bi-button:not([data-variant]), .bi-button[data-variant="filled"] {
package/dist/components/navbar.css CHANGED
@@ -1,3 +1,13 @@
1
+ @keyframes bi-navbar-transparent-reveal {
2
+ from {
3
+ background-color: #0000;
4
+ }
5
+
6
+ to {
7
+ background-color: var(--bic-navbar-background-color);
8
+ }
9
+ }
10
+
1
11
  .bi-navbar {
2
12
  --bic-navbar-background-color: var(--bi-basic-white);
3
13
  --bic-navbar-color: var(--bi-basic-key);
@@ -47,3 +57,18 @@
47
57
  left: 0;
48
58
  right: 0;
49
59
  }
60
+
61
+ .bi-navbar[data-fixed="true"][data-transparent="true"] {
62
+ height: 0;
63
+ animation-name: bi-navbar-transparent-reveal;
64
+ animation-timing-function: linear;
65
+ animation-fill-mode: both;
66
+ animation-timeline: scroll();
67
+ animation-range: 0px var(--bi-layout-navbar-height);
68
+ }
69
+
70
+ @media (prefers-reduced-motion: reduce) {
71
+ .bi-navbar[data-fixed="true"][data-transparent="true"] {
72
+ animation-timing-function: step-end;
73
+ }
74
+ }
package/dist/components.css CHANGED
@@ -421,14 +421,25 @@
421
421
  padding: 0;
422
422
  }
423
423
 
424
- .bi-button[data-skewed="start"]:has(.bi-button--start-icon) {
425
- --bic-button-padding-inline: var(--bi-scale-1x) var(--bi-scale-2x);
426
- margin-left: calc((var(--bi-scale-1x) + (var(--bic-button-icon-size) * .25)) * -1);
424
+ .bi-button[data-skewed] {
425
+ --_bic-button-skew-dist: calc(var(--bi-scale-1x) + (var(--bic-button-icon-size) * .25));
426
+ --bic-button-padding-inline: var(--_bic-button-skew-dist);
427
427
  }
428
428
 
429
- .bi-button[data-skewed="end"]:has(.bi-button--end-icon) {
430
- --bic-button-padding-inline: var(--bi-scale-2x) var(--bi-scale-1x);
431
- margin-right: calc((var(--bi-scale-1x) + (var(--bic-button-icon-size) * .25)) * -1);
429
+ .bi-button[data-skewed][data-skewed="start"] {
430
+ margin-left: calc(var(--_bic-button-skew-dist) * -1);
431
+ }
432
+
433
+ .bi-button[data-skewed][data-skewed="start"]:has(.bi-button--start-icon) {
434
+ --bic-button-padding-inline: var(--bi-scale-0-50x) var(--bi-scale-2x);
435
+ }
436
+
437
+ .bi-button[data-skewed][data-skewed="end"] {
438
+ margin-right: calc(var(--_bic-button-skew-dist) * -1);
439
+ }
440
+
441
+ .bi-button[data-skewed][data-skewed="end"]:has(.bi-button--end-icon) {
442
+ --bic-button-padding-inline: var(--bi-scale-2x) var(--bi-scale-0-50x);
432
443
  }
433
444
 
434
445
  .bi-button:not([data-variant]), .bi-button[data-variant="filled"] {
@@ -2550,6 +2561,16 @@ svg[data-color="white"] {
2550
2561
  background-image: url("./assets/logos/default.svg");
2551
2562
  }
2552
2563
 
2564
+ @keyframes bi-navbar-transparent-reveal {
2565
+ from {
2566
+ background-color: #0000;
2567
+ }
2568
+
2569
+ to {
2570
+ background-color: var(--bic-navbar-background-color);
2571
+ }
2572
+ }
2573
+
2553
2574
  .bi-navbar {
2554
2575
  --bic-navbar-background-color: var(--bi-basic-white);
2555
2576
  --bic-navbar-color: var(--bi-basic-key);
@@ -2600,6 +2621,21 @@ svg[data-color="white"] {
2600
2621
  right: 0;
2601
2622
  }
2602
2623
 
2624
+ .bi-navbar[data-fixed="true"][data-transparent="true"] {
2625
+ height: 0;
2626
+ animation-name: bi-navbar-transparent-reveal;
2627
+ animation-timing-function: linear;
2628
+ animation-fill-mode: both;
2629
+ animation-timeline: scroll();
2630
+ animation-range: 0px var(--bi-layout-navbar-height);
2631
+ }
2632
+
2633
+ @media (prefers-reduced-motion: reduce) {
2634
+ .bi-navbar[data-fixed="true"][data-transparent="true"] {
2635
+ animation-timing-function: step-end;
2636
+ }
2637
+ }
2638
+
2603
2639
  .bi-sub-navbar--wrapper {
2604
2640
  height: var(--bi-layout-navbar-height);
2605
2641
  position: relative;
package/dist/salesforce.css CHANGED
@@ -647,14 +647,25 @@
647
647
  padding: 0;
648
648
  }
649
649
 
650
- .bi-button[data-skewed="start"]:has(.bi-button--start-icon) {
651
- --bic-button-padding-inline: var(--bi-scale-1x) var(--bi-scale-2x);
652
- margin-left: calc((var(--bi-scale-1x) + (var(--bic-button-icon-size) * .25)) * -1);
650
+ .bi-button[data-skewed] {
651
+ --_bic-button-skew-dist: calc(var(--bi-scale-1x) + (var(--bic-button-icon-size) * .25));
652
+ --bic-button-padding-inline: var(--_bic-button-skew-dist);
653
653
  }
654
654
 
655
- .bi-button[data-skewed="end"]:has(.bi-button--end-icon) {
656
- --bic-button-padding-inline: var(--bi-scale-2x) var(--bi-scale-1x);
657
- margin-right: calc((var(--bi-scale-1x) + (var(--bic-button-icon-size) * .25)) * -1);
655
+ .bi-button[data-skewed][data-skewed="start"] {
656
+ margin-left: calc(var(--_bic-button-skew-dist) * -1);
657
+ }
658
+
659
+ .bi-button[data-skewed][data-skewed="start"]:has(.bi-button--start-icon) {
660
+ --bic-button-padding-inline: var(--bi-scale-0-50x) var(--bi-scale-2x);
661
+ }
662
+
663
+ .bi-button[data-skewed][data-skewed="end"] {
664
+ margin-right: calc(var(--_bic-button-skew-dist) * -1);
665
+ }
666
+
667
+ .bi-button[data-skewed][data-skewed="end"]:has(.bi-button--end-icon) {
668
+ --bic-button-padding-inline: var(--bi-scale-2x) var(--bi-scale-0-50x);
658
669
  }
659
670
 
660
671
  .bi-button:not([data-variant]), .bi-button[data-variant="filled"] {
@@ -2776,6 +2787,16 @@ svg[data-color="white"] {
2776
2787
  background-image: url("./assets/logos/default.svg");
2777
2788
  }
2778
2789
 
2790
+ @keyframes bi-navbar-transparent-reveal {
2791
+ from {
2792
+ background-color: #0000;
2793
+ }
2794
+
2795
+ to {
2796
+ background-color: var(--bic-navbar-background-color);
2797
+ }
2798
+ }
2799
+
2779
2800
  .bi-navbar {
2780
2801
  --bic-navbar-background-color: var(--bi-basic-white);
2781
2802
  --bic-navbar-color: var(--bi-basic-key);
@@ -2826,6 +2847,21 @@ svg[data-color="white"] {
2826
2847
  right: 0;
2827
2848
  }
2828
2849
 
2850
+ .bi-navbar[data-fixed="true"][data-transparent="true"] {
2851
+ height: 0;
2852
+ animation-name: bi-navbar-transparent-reveal;
2853
+ animation-timing-function: linear;
2854
+ animation-fill-mode: both;
2855
+ animation-timeline: scroll();
2856
+ animation-range: 0px var(--bi-layout-navbar-height);
2857
+ }
2858
+
2859
+ @media (prefers-reduced-motion: reduce) {
2860
+ .bi-navbar[data-fixed="true"][data-transparent="true"] {
2861
+ animation-timing-function: step-end;
2862
+ }
2863
+ }
2864
+
2829
2865
  .bi-sub-navbar--wrapper {
2830
2866
  height: var(--bi-layout-navbar-height);
2831
2867
  position: relative;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.11.4",
4
+ "version": "0.11.6",
5
5
  "description": "CSS for the BI Design System",
6
6
  "author": "BI Digital",
7
7
  "homepage": "https://designsystem.bi.no/",
@@ -30,7 +30,7 @@
30
30
  "browserslist": "^4.28.1",
31
31
  "lightningcss": "^1.32.0",
32
32
  "modern-normalize": "^3.0.1",
33
- "@bi-digital/tokens": "0.11.4"
33
+ "@bi-digital/tokens": "0.11.6"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "node config.js",