@sb1/ffe-core 22.1.0 → 23.0.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/less/waves.less +87 -60
  2. package/package.json +2 -2
package/less/waves.less CHANGED
@@ -1,87 +1,114 @@
1
1
  @import 'colors';
2
2
 
3
3
  .ffe-wave {
4
- min-height: 1000px;
5
- mask-repeat: repeat-x;
6
- mask-size: 469px;
7
- mask-position: 431px;
4
+ position: relative;
8
5
 
9
- @media (min-width: @breakpoint-sm) {
10
- mask-size: 875px;
11
- mask-position: 897px;
6
+ &__content {
7
+ position: absolute;
8
+ z-index: 1;
12
9
  }
13
10
 
14
- @media (min-width: @breakpoint-md) {
15
- mask-size: 2000px;
16
- mask-position: 1806px;
11
+ &__wave {
12
+ min-height: 130px;
13
+ mask-repeat: repeat-x;
14
+ mask-size: 469px;
15
+ mask-position: 431px;
17
16
  }
18
- }
19
17
 
20
- .ffe-wave--rotate {
21
- rotate: 180deg;
22
- }
18
+ &--flip &__wave {
19
+ rotate: 180deg;
20
+ }
23
21
 
24
- .ffe-wave--small {
25
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 479.9 148' style='enable-background:new 0 0 479.9 148' xml:space='preserve'%3E%3Cpath d='M0 530V0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C387.4 13.8 418.2 0 478.9 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C866.3 13.8 897.1 0 957.8 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1345.2 13.8 1376 0 1436.7 0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1824.1 13.8 1854.9 0 1915.7 0v530'/%3E%3C/svg%3E");
26
- }
22
+ &--small &__wave {
23
+ min-height: 60px;
24
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 479.9 60' style='enable-background:new 0 0 479.9 148' xml:space='preserve'%3E%3Cpath d='M0 530V0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C387.4 13.8 418.2 0 478.9 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C866.3 13.8 897.1 0 957.8 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1345.2 13.8 1376 0 1436.7 0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1824.1 13.8 1854.9 0 1915.7 0v530'/%3E%3C/svg%3E");
25
+ mask-size: 469px;
27
26
 
28
- .ffe-wave--medium {
29
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 0 482.8 148' style='enable-background:new 0 0 482.8 148' xml:space='preserve'%3E%3Cpath d='M0 595V0c61.3 0 92.3 21.7 122.4 42.7 30.4 21.2 59.1 41.2 118.1 41.2 59 0 87.7-20.1 118.1-41.2C388.6 21.7 419.7 0 481 0s92.3 21.7 122.4 42.7c30.4 21.2 59.1 41.2 118.1 41.2 58.9 0 87.7-20.1 118.1-41.2 29.9-21 61-42.7 122.2-42.7 61.3 0 92.3 21.7 122.4 42.7 30.4 21.2 59.1 41.2 118.1 41.2 58.9 0 87.7-20.1 118.1-41.2 30-20.9 61.1-42.7 122.4-42.7 61.3 0 92.3 21.7 122.4 42.7 30.4 21.2 59.1 41.2 118.1 41.2s87.7-20.1 118.1-41.2C1831.6 21.7 1862.7 0 1924 0v595'/%3E%3C/svg%3E");
30
- }
27
+ @media (min-width: @breakpoint-sm) {
28
+ min-height: 113px;
29
+ mask-size: 870px;
30
+ mask-position: 774px;
31
+ }
31
32
 
32
- .ffe-wave--large {
33
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480.8 148' style='enable-background:new 0 0 480.8 148' xml:space='preserve'%3E%3Cpath d='M0 537V0c61.4 0 92.5 27.8 122.5 54.6 30.2 27 58.8 52.6 117.1 52.6 58.4 0 86.9-25.5 117.1-52.6C386.8 27.8 417.8 0 479.3 0c61.4 0 92.5 27.8 122.5 54.6 30.2 27 58.8 52.6 117.1 52.6 58.4 0 86.9-25.5 117.1-52.6C866.1 27.8 897.1 0 958.6 0c61.4 0 92.5 27.8 122.5 54.6 30.2 27 58.8 52.6 117.1 52.6 58.4 0 86.9-25.5 117.1-52.6 30-26.9 61.1-54.6 122.5-54.6s92.5 27.8 122.5 54.6c30.2 27 58.8 52.6 117.1 52.6 58.4 0 86.9-25.5 117.1-52.6C1824.5 27.7 1855.6 0 1917 0v537'/%3E%3C/svg%3E");
34
- }
33
+ @media (min-width: @breakpoint-md) {
34
+ min-height: 121px;
35
+ mask-size: 957;
36
+ mask-position: 877px;
37
+ }
38
+ }
35
39
 
36
- // Tilgjengelige farger
37
- .ffe-wave--bg-hvit {
38
- background-color: @ffe-farge-hvit;
39
- }
40
+ &--medium &__wave {
41
+ min-height: 95px;
42
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 0 482.8 95' style='enable-background:new 0 0 482.8 148' xml:space='preserve'%3E%3Cpath d='M0 595V0c61.3 0 92.3 21.7 122.4 42.7 30.4 21.2 59.1 41.2 118.1 41.2 59 0 87.7-20.1 118.1-41.2C388.6 21.7 419.7 0 481 0s92.3 21.7 122.4 42.7c30.4 21.2 59.1 41.2 118.1 41.2 58.9 0 87.7-20.1 118.1-41.2 29.9-21 61-42.7 122.2-42.7 61.3 0 92.3 21.7 122.4 42.7 30.4 21.2 59.1 41.2 118.1 41.2 58.9 0 87.7-20.1 118.1-41.2 30-20.9 61.1-42.7 122.4-42.7 61.3 0 92.3 21.7 122.4 42.7 30.4 21.2 59.1 41.2 118.1 41.2s87.7-20.1 118.1-41.2C1831.6 21.7 1862.7 0 1924 0v595'/%3E%3C/svg%3E");
40
43
 
41
- .ffe-wave--bg-frost-30 {
42
- background-color: @ffe-farge-frost-30;
43
- }
44
+ @media (min-width: @breakpoint-sm) {
45
+ min-height: 148px;
46
+ mask-size: 740px;
47
+ mask-position: 774px;
48
+ }
49
+ }
44
50
 
45
- .ffe-wave--bg-sand-30 {
46
- background-color: @ffe-farge-sand-30;
47
- }
51
+ &--large &__wave {
52
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480.8 112' style='enable-background:new 0 0 480.8 148' xml:space='preserve'%3E%3Cpath d='M0 537V0c61.4 0 92.5 27.8 122.5 54.6 30.2 27 58.8 52.6 117.1 52.6 58.4 0 86.9-25.5 117.1-52.6C386.8 27.8 417.8 0 479.3 0c61.4 0 92.5 27.8 122.5 54.6 30.2 27 58.8 52.6 117.1 52.6 58.4 0 86.9-25.5 117.1-52.6C866.1 27.8 897.1 0 958.6 0c61.4 0 92.5 27.8 122.5 54.6 30.2 27 58.8 52.6 117.1 52.6 58.4 0 86.9-25.5 117.1-52.6 30-26.9 61.1-54.6 122.5-54.6s92.5 27.8 122.5 54.6c30.2 27 58.8 52.6 117.1 52.6 58.4 0 86.9-25.5 117.1-52.6C1824.5 27.7 1855.6 0 1917 0v537'/%3E%3C/svg%3E");
53
+ min-height: 112px;
48
54
 
49
- .ffe-wave--bg-sand-70 {
50
- background-color: @ffe-farge-sand-70;
51
- }
55
+ @media (min-width: @breakpoint-sm) {
56
+ min-height: 150px;
57
+ mask-size: 651px;
58
+ mask-position: 616px;
59
+ }
60
+ }
52
61
 
53
- .ffe-wave--bg-syrin-30 {
54
- background-color: @ffe-farge-syrin-30;
55
- }
62
+ // Tilgjengelige farger
63
+ &--bg-hvit &__wave {
64
+ background-color: @ffe-farge-hvit;
65
+ }
56
66
 
57
- .ffe-wave--bg-syrin-70 {
58
- background-color: @ffe-farge-syrin-70;
59
- }
67
+ &--bg-frost-30 &__wave {
68
+ background-color: @ffe-farge-frost-30;
69
+ }
60
70
 
61
- .ffe-wave--bg-vann {
62
- background-color: @ffe-farge-vann;
63
- }
71
+ &--bg-sand-30 &__wave {
72
+ background-color: @ffe-farge-sand-30;
73
+ }
64
74
 
65
- .ffe-wave--bg-vann-30 {
66
- background-color: @ffe-farge-vann-30;
67
- }
75
+ &--bg-sand-70 &__wave {
76
+ background-color: @ffe-farge-sand-70;
77
+ }
68
78
 
69
- .ffe-wave--bg-fjell {
70
- background-color: @ffe-farge-fjell;
71
- }
79
+ &--bg-syrin-30 &__wave {
80
+ background-color: @ffe-farge-syrin-30;
81
+ }
72
82
 
73
- .ffe-wave--dm-bg-svart {
74
- .native & {
75
- @media (prefers-color-scheme: dark) {
76
- background-color: @ffe-farge-svart;
83
+ &--bg-syrin-70 &__wave {
84
+ background-color: @ffe-farge-syrin-70;
85
+ }
86
+
87
+ &--bg-vann &__wave {
88
+ background-color: @ffe-farge-vann;
89
+ }
90
+
91
+ &--bg-vann-30 &__wave {
92
+ background-color: @ffe-farge-vann-30;
93
+ }
94
+
95
+ .ffe-wave--bg-fjell &__wave {
96
+ background-color: @ffe-farge-fjell;
97
+ }
98
+
99
+ .ffe-wave--dm-bg-svart &__wave {
100
+ .native & {
101
+ @media (prefers-color-scheme: dark) {
102
+ background-color: @ffe-farge-svart;
103
+ }
77
104
  }
78
105
  }
79
- }
80
106
 
81
- .ffe-wave--dm-bg-natt {
82
- .native & {
83
- @media (prefers-color-scheme: dark) {
84
- background-color: @ffe-farge-natt;
107
+ .ffe-wave--dm-bg-natt &__wave {
108
+ .native & {
109
+ @media (prefers-color-scheme: dark) {
110
+ background-color: @ffe-farge-natt;
111
+ }
85
112
  }
86
113
  }
87
114
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-core",
3
- "version": "22.1.0",
3
+ "version": "23.0.0",
4
4
  "description": "Rammeverk for Felles Front End",
5
5
  "license": "MIT",
6
6
  "author": "SpareBank 1",
@@ -31,5 +31,5 @@
31
31
  "publishConfig": {
32
32
  "access": "public"
33
33
  },
34
- "gitHead": "35f1eac68c249adc523d35b439175624cdf79da6"
34
+ "gitHead": "cce0149ec999aacfb7f4fb821ff8cadf3d945a99"
35
35
  }