@sb1/ffe-core 22.1.0 → 23.0.1

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 +89 -60
  2. package/package.json +2 -2
package/less/waves.less CHANGED
@@ -1,87 +1,116 @@
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;
5
+ width: 100%;
8
6
 
9
- @media (min-width: @breakpoint-sm) {
10
- mask-size: 875px;
11
- mask-position: 897px;
7
+ &__content {
8
+ position: absolute;
9
+ z-index: 1;
10
+ width: 100%;
12
11
  }
13
12
 
14
- @media (min-width: @breakpoint-md) {
15
- mask-size: 2000px;
16
- mask-position: 1806px;
13
+ &__wave {
14
+ min-height: 130px;
15
+ mask-repeat: repeat-x;
16
+ mask-size: 469px;
17
+ mask-position: 431px;
17
18
  }
18
- }
19
19
 
20
- .ffe-wave--rotate {
21
- rotate: 180deg;
22
- }
20
+ &--flip &__wave {
21
+ rotate: 180deg;
22
+ }
23
23
 
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
- }
24
+ &--small &__wave {
25
+ min-height: 60px;
26
+ 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");
27
+ mask-size: 469px;
27
28
 
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
- }
29
+ @media (min-width: @breakpoint-sm) {
30
+ min-height: 113px;
31
+ mask-size: 870px;
32
+ mask-position: 774px;
33
+ }
31
34
 
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
- }
35
+ @media (min-width: @breakpoint-md) {
36
+ min-height: 121px;
37
+ mask-size: 957;
38
+ mask-position: 877px;
39
+ }
40
+ }
35
41
 
36
- // Tilgjengelige farger
37
- .ffe-wave--bg-hvit {
38
- background-color: @ffe-farge-hvit;
39
- }
42
+ &--medium &__wave {
43
+ min-height: 95px;
44
+ 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
45
 
41
- .ffe-wave--bg-frost-30 {
42
- background-color: @ffe-farge-frost-30;
43
- }
46
+ @media (min-width: @breakpoint-sm) {
47
+ min-height: 148px;
48
+ mask-size: 740px;
49
+ mask-position: 774px;
50
+ }
51
+ }
44
52
 
45
- .ffe-wave--bg-sand-30 {
46
- background-color: @ffe-farge-sand-30;
47
- }
53
+ &--large &__wave {
54
+ 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");
55
+ min-height: 112px;
48
56
 
49
- .ffe-wave--bg-sand-70 {
50
- background-color: @ffe-farge-sand-70;
51
- }
57
+ @media (min-width: @breakpoint-sm) {
58
+ min-height: 150px;
59
+ mask-size: 651px;
60
+ mask-position: 616px;
61
+ }
62
+ }
52
63
 
53
- .ffe-wave--bg-syrin-30 {
54
- background-color: @ffe-farge-syrin-30;
55
- }
64
+ // Tilgjengelige farger
65
+ &--bg-hvit &__wave {
66
+ background-color: @ffe-farge-hvit;
67
+ }
56
68
 
57
- .ffe-wave--bg-syrin-70 {
58
- background-color: @ffe-farge-syrin-70;
59
- }
69
+ &--bg-frost-30 &__wave {
70
+ background-color: @ffe-farge-frost-30;
71
+ }
60
72
 
61
- .ffe-wave--bg-vann {
62
- background-color: @ffe-farge-vann;
63
- }
73
+ &--bg-sand-30 &__wave {
74
+ background-color: @ffe-farge-sand-30;
75
+ }
64
76
 
65
- .ffe-wave--bg-vann-30 {
66
- background-color: @ffe-farge-vann-30;
67
- }
77
+ &--bg-sand-70 &__wave {
78
+ background-color: @ffe-farge-sand-70;
79
+ }
68
80
 
69
- .ffe-wave--bg-fjell {
70
- background-color: @ffe-farge-fjell;
71
- }
81
+ &--bg-syrin-30 &__wave {
82
+ background-color: @ffe-farge-syrin-30;
83
+ }
72
84
 
73
- .ffe-wave--dm-bg-svart {
74
- .native & {
75
- @media (prefers-color-scheme: dark) {
76
- background-color: @ffe-farge-svart;
85
+ &--bg-syrin-70 &__wave {
86
+ background-color: @ffe-farge-syrin-70;
87
+ }
88
+
89
+ &--bg-vann &__wave {
90
+ background-color: @ffe-farge-vann;
91
+ }
92
+
93
+ &--bg-vann-30 &__wave {
94
+ background-color: @ffe-farge-vann-30;
95
+ }
96
+
97
+ .ffe-wave--bg-fjell &__wave {
98
+ background-color: @ffe-farge-fjell;
99
+ }
100
+
101
+ .ffe-wave--dm-bg-svart &__wave {
102
+ .native & {
103
+ @media (prefers-color-scheme: dark) {
104
+ background-color: @ffe-farge-svart;
105
+ }
77
106
  }
78
107
  }
79
- }
80
108
 
81
- .ffe-wave--dm-bg-natt {
82
- .native & {
83
- @media (prefers-color-scheme: dark) {
84
- background-color: @ffe-farge-natt;
109
+ .ffe-wave--dm-bg-natt &__wave {
110
+ .native & {
111
+ @media (prefers-color-scheme: dark) {
112
+ background-color: @ffe-farge-natt;
113
+ }
85
114
  }
86
115
  }
87
116
  }
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.1",
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": "6b569f310458cf252746dc4d67068201eb8267e7"
35
35
  }