@skyscanner/backpack-web 4.1.0 → 5.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.
- package/bpk-component-price/README.md +4 -2
- package/bpk-component-price/index.js +3 -2
- package/bpk-component-price/package.json +1 -1
- package/bpk-component-price/src/BpkPrice.js +16 -12
- package/bpk-component-price/src/BpkPrice.module.scss +16 -10
- package/bpk-component-price/src/common-types.js +29 -0
- package/bpk-component-ticket/README.md +0 -1
- package/bpk-component-ticket/package.json +1 -1
- package/bpk-component-ticket/src/BpkTicket.js +0 -40
- package/bpk-component-ticket/src/BpkTicket.module.scss +13 -165
- package/package.json +1 -1
|
@@ -12,14 +12,15 @@ npm install bpk-component-price --save-dev
|
|
|
12
12
|
|
|
13
13
|
```js
|
|
14
14
|
import React from 'react';
|
|
15
|
-
import BpkPrice, { SIZES } from 'bpk-component-price';
|
|
15
|
+
import BpkPrice, { SIZES, ALIGNS } from 'bpk-component-price';
|
|
16
16
|
|
|
17
17
|
export default () => (
|
|
18
18
|
<BpkPrice
|
|
19
19
|
size={SIZES.large}
|
|
20
|
+
align={ALIGNS.left}
|
|
20
21
|
subtitle="£209"
|
|
21
22
|
title="£1,830"
|
|
22
|
-
description="
|
|
23
|
+
description="a night"
|
|
23
24
|
/>
|
|
24
25
|
);
|
|
25
26
|
```
|
|
@@ -30,6 +31,7 @@ export default () => (
|
|
|
30
31
|
| --------- | -------- | -------- | ------------- |
|
|
31
32
|
| title | string | true | - |
|
|
32
33
|
| size | oneOf(SIZES) | false | SIZES.small |
|
|
34
|
+
| align | oneOf(ALIGNS) | false | ALIGNS.left |
|
|
33
35
|
| subtitle | string | false | null |
|
|
34
36
|
| description | string | false | null |
|
|
35
37
|
| className | string | false | null |
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
*/
|
|
18
18
|
/* @flow strict */
|
|
19
19
|
|
|
20
|
-
import BpkPrice
|
|
20
|
+
import BpkPrice from './src/BpkPrice';
|
|
21
|
+
import { SIZES, ALIGNS } from './src/common-types';
|
|
21
22
|
|
|
22
23
|
export default BpkPrice;
|
|
23
|
-
export { SIZES };
|
|
24
|
+
export { SIZES, ALIGNS };
|
|
@@ -24,15 +24,12 @@ import { cssModules } from '../../bpk-react-utils';
|
|
|
24
24
|
import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
|
|
25
25
|
|
|
26
26
|
import STYLES from './BpkPrice.module.scss';
|
|
27
|
-
|
|
28
|
-
export const SIZES = {
|
|
29
|
-
small: 'small',
|
|
30
|
-
large: 'large',
|
|
31
|
-
};
|
|
27
|
+
import { SIZES, ALIGNS } from './common-types';
|
|
32
28
|
|
|
33
29
|
type Props = {
|
|
34
30
|
title: string,
|
|
35
31
|
size: $Values<typeof SIZES>,
|
|
32
|
+
align: $Values<typeof ALIGNS>,
|
|
36
33
|
className: ?string,
|
|
37
34
|
subtitle: ?string,
|
|
38
35
|
description: ?string,
|
|
@@ -41,15 +38,17 @@ type Props = {
|
|
|
41
38
|
const getClassName = cssModules(STYLES);
|
|
42
39
|
|
|
43
40
|
const BpkPrice = (props: Props) => {
|
|
44
|
-
const { className, description, size, subtitle, title, ...rest } =
|
|
41
|
+
const { align, className, description, size, subtitle, title, ...rest } =
|
|
42
|
+
props;
|
|
45
43
|
|
|
46
44
|
const isSmall = size === SIZES.small;
|
|
45
|
+
const isAlignRight = align === ALIGNS.right;
|
|
47
46
|
|
|
48
47
|
return (
|
|
49
48
|
<div
|
|
50
49
|
className={getClassName(
|
|
51
50
|
'bpk-price',
|
|
52
|
-
|
|
51
|
+
isAlignRight && 'bpk-price--right',
|
|
53
52
|
className,
|
|
54
53
|
)}
|
|
55
54
|
// $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
|
|
@@ -64,9 +63,15 @@ const BpkPrice = (props: Props) => {
|
|
|
64
63
|
{subtitle}
|
|
65
64
|
</BpkText>
|
|
66
65
|
)}
|
|
67
|
-
<div
|
|
66
|
+
<div
|
|
67
|
+
className={isAlignRight && getClassName('bpk-price__column-container')}
|
|
68
|
+
>
|
|
68
69
|
<BpkText
|
|
69
70
|
textStyle={isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl}
|
|
71
|
+
className={getClassName(
|
|
72
|
+
'bpk-price__title',
|
|
73
|
+
!isAlignRight && 'bpk-price__spacing',
|
|
74
|
+
)}
|
|
70
75
|
tagName="span"
|
|
71
76
|
>
|
|
72
77
|
{title}
|
|
@@ -75,10 +80,7 @@ const BpkPrice = (props: Props) => {
|
|
|
75
80
|
<BpkText
|
|
76
81
|
textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
|
|
77
82
|
tagName="span"
|
|
78
|
-
className={getClassName(
|
|
79
|
-
'bpk-price__description',
|
|
80
|
-
!isSmall && 'bpk-price__descriptionSpacing',
|
|
81
|
-
)}
|
|
83
|
+
className={getClassName('bpk-price__description')}
|
|
82
84
|
>
|
|
83
85
|
{description}
|
|
84
86
|
</BpkText>
|
|
@@ -91,6 +93,7 @@ const BpkPrice = (props: Props) => {
|
|
|
91
93
|
BpkPrice.propTypes = {
|
|
92
94
|
title: PropTypes.string.isRequired,
|
|
93
95
|
size: PropTypes.oneOf(Object.keys(SIZES)),
|
|
96
|
+
align: PropTypes.oneOf(Object.keys(ALIGNS)),
|
|
94
97
|
className: PropTypes.string,
|
|
95
98
|
subtitle: PropTypes.string,
|
|
96
99
|
description: PropTypes.string,
|
|
@@ -98,6 +101,7 @@ BpkPrice.propTypes = {
|
|
|
98
101
|
|
|
99
102
|
BpkPrice.defaultProps = {
|
|
100
103
|
size: SIZES.small,
|
|
104
|
+
align: ALIGNS.left,
|
|
101
105
|
className: null,
|
|
102
106
|
subtitle: null,
|
|
103
107
|
description: null,
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
display: flex;
|
|
23
23
|
flex-direction: column;
|
|
24
24
|
|
|
25
|
-
&--
|
|
25
|
+
&--right {
|
|
26
26
|
text-align: right;
|
|
27
27
|
|
|
28
28
|
@include bpk-rtl {
|
|
@@ -35,21 +35,27 @@
|
|
|
35
35
|
text-decoration-line: line-through;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
&
|
|
38
|
+
&__column-container {
|
|
39
39
|
display: flex;
|
|
40
40
|
flex-direction: column;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
&
|
|
44
|
-
|
|
43
|
+
&__title {
|
|
44
|
+
word-break: break-all;
|
|
45
|
+
}
|
|
45
46
|
|
|
46
|
-
|
|
47
|
-
|
|
47
|
+
&__spacing::after {
|
|
48
|
+
content: '';
|
|
49
|
+
margin-right: bpk-spacing-sm();
|
|
48
50
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
}
|
|
51
|
+
@include bpk-rtl {
|
|
52
|
+
margin-right: unset;
|
|
53
|
+
margin-left: bpk-spacing-sm();
|
|
53
54
|
}
|
|
54
55
|
}
|
|
56
|
+
|
|
57
|
+
&__description {
|
|
58
|
+
color: $bpk-color-sky-gray-tint-02;
|
|
59
|
+
white-space: nowrap;
|
|
60
|
+
}
|
|
55
61
|
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Backpack - Skyscanner's Design System
|
|
3
|
+
*
|
|
4
|
+
* Copyright 2016 Skyscanner Ltd
|
|
5
|
+
*
|
|
6
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
7
|
+
* you may not use this file except in compliance with the License.
|
|
8
|
+
* You may obtain a copy of the License at
|
|
9
|
+
*
|
|
10
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
11
|
+
*
|
|
12
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
13
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
14
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
|
+
* See the License for the specific language governing permissions and
|
|
16
|
+
* limitations under the License.
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
/* @flow strict */
|
|
20
|
+
|
|
21
|
+
export const SIZES = {
|
|
22
|
+
small: 'small',
|
|
23
|
+
large: 'large',
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export const ALIGNS = {
|
|
27
|
+
left: 'left',
|
|
28
|
+
right: 'right',
|
|
29
|
+
};
|
|
@@ -33,7 +33,6 @@ type Props = {
|
|
|
33
33
|
stubProps: { [string]: any },
|
|
34
34
|
padded: boolean,
|
|
35
35
|
vertical: boolean,
|
|
36
|
-
withNotches: boolean,
|
|
37
36
|
className: ?string,
|
|
38
37
|
stubClassName: ?string,
|
|
39
38
|
href: ?string,
|
|
@@ -49,7 +48,6 @@ const BpkTicket = (props: Props) => {
|
|
|
49
48
|
stubClassName,
|
|
50
49
|
stubProps,
|
|
51
50
|
vertical,
|
|
52
|
-
withNotches,
|
|
53
51
|
...rest
|
|
54
52
|
} = props;
|
|
55
53
|
|
|
@@ -57,7 +55,6 @@ const BpkTicket = (props: Props) => {
|
|
|
57
55
|
'bpk-ticket',
|
|
58
56
|
className,
|
|
59
57
|
vertical && 'bpk-ticket--vertical',
|
|
60
|
-
withNotches && 'bpk-ticket--with-notches',
|
|
61
58
|
);
|
|
62
59
|
|
|
63
60
|
const mainClassNames = getClassName(
|
|
@@ -66,7 +63,6 @@ const BpkTicket = (props: Props) => {
|
|
|
66
63
|
padded && 'bpk-ticket__main--padded',
|
|
67
64
|
vertical && 'bpk-ticket__main--vertical',
|
|
68
65
|
!vertical && 'bpk-ticket__main--horizontal',
|
|
69
|
-
withNotches && 'bpk-ticket__paper--with-notches',
|
|
70
66
|
);
|
|
71
67
|
|
|
72
68
|
const mainInnerClassNames = getClassName(
|
|
@@ -82,7 +78,6 @@ const BpkTicket = (props: Props) => {
|
|
|
82
78
|
padded && 'bpk-ticket__stub--padded',
|
|
83
79
|
vertical && 'bpk-ticket__stub--vertical',
|
|
84
80
|
!vertical && 'bpk-ticket__stub--horizontal',
|
|
85
|
-
withNotches && 'bpk-ticket__paper--with-notches',
|
|
86
81
|
);
|
|
87
82
|
|
|
88
83
|
const stubInnerClassNames = getClassName(
|
|
@@ -91,30 +86,6 @@ const BpkTicket = (props: Props) => {
|
|
|
91
86
|
!vertical && 'bpk-ticket__stub-inner--horizontal',
|
|
92
87
|
);
|
|
93
88
|
|
|
94
|
-
const punchlineClassNames = getClassName(
|
|
95
|
-
'bpk-ticket__punchline',
|
|
96
|
-
vertical &&
|
|
97
|
-
(withNotches
|
|
98
|
-
? 'bpk-ticket__punchline--horizontal-with-notches'
|
|
99
|
-
: 'bpk-ticket__punchline--horizontal'),
|
|
100
|
-
!vertical &&
|
|
101
|
-
(withNotches
|
|
102
|
-
? 'bpk-ticket__punchline--vertical-with-notches'
|
|
103
|
-
: 'bpk-ticket__punchline--vertical'),
|
|
104
|
-
);
|
|
105
|
-
|
|
106
|
-
const startNotchClassNames = getClassName(
|
|
107
|
-
'bpk-ticket__notch',
|
|
108
|
-
vertical && 'bpk-ticket__notch--left',
|
|
109
|
-
!vertical && 'bpk-ticket__notch--top',
|
|
110
|
-
);
|
|
111
|
-
|
|
112
|
-
const endNotchClassNames = getClassName(
|
|
113
|
-
'bpk-ticket__notch',
|
|
114
|
-
vertical && 'bpk-ticket__notch--right',
|
|
115
|
-
!vertical && 'bpk-ticket__notch--bottom',
|
|
116
|
-
);
|
|
117
|
-
|
|
118
89
|
const mainContent = padded ? (
|
|
119
90
|
children
|
|
120
91
|
) : (
|
|
@@ -131,15 +102,6 @@ const BpkTicket = (props: Props) => {
|
|
|
131
102
|
<div key="main" className={mainClassNames}>
|
|
132
103
|
{mainContent}
|
|
133
104
|
</div>,
|
|
134
|
-
<div
|
|
135
|
-
key="punchline"
|
|
136
|
-
className={punchlineClassNames}
|
|
137
|
-
role="presentation"
|
|
138
|
-
aria-hidden="true"
|
|
139
|
-
>
|
|
140
|
-
{withNotches && <div className={startNotchClassNames} />}
|
|
141
|
-
{withNotches && <div className={endNotchClassNames} />}
|
|
142
|
-
</div>,
|
|
143
105
|
// $FlowFixMe[cannot-spread-indexer] - inexact rest. See 'decisions/flowfixme.md'.
|
|
144
106
|
<div key="stub" className={stubClassNames} {...stubProps}>
|
|
145
107
|
{stubContent}
|
|
@@ -172,7 +134,6 @@ BpkTicket.propTypes = {
|
|
|
172
134
|
vertical: PropTypes.bool,
|
|
173
135
|
stubClassName: PropTypes.string,
|
|
174
136
|
stubProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
|
|
175
|
-
withNotches: PropTypes.bool,
|
|
176
137
|
};
|
|
177
138
|
|
|
178
139
|
BpkTicket.defaultProps = {
|
|
@@ -182,7 +143,6 @@ BpkTicket.defaultProps = {
|
|
|
182
143
|
vertical: false,
|
|
183
144
|
stubClassName: null,
|
|
184
145
|
stubProps: {},
|
|
185
|
-
withNotches: true,
|
|
186
146
|
};
|
|
187
147
|
|
|
188
148
|
export default BpkTicket;
|
|
@@ -41,7 +41,6 @@ $bpk-spacing-v2: true;
|
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
.bpk-ticket {
|
|
44
|
-
$notch-size: bpk-spacing-md();
|
|
45
44
|
$ticket-padding: bpk-spacing-base();
|
|
46
45
|
|
|
47
46
|
position: relative;
|
|
@@ -49,12 +48,14 @@ $bpk-spacing-v2: true;
|
|
|
49
48
|
display: flex;
|
|
50
49
|
flex-direction: row;
|
|
51
50
|
align-items: stretch;
|
|
51
|
+
flex: none;
|
|
52
52
|
color: $bpk-card-color;
|
|
53
53
|
text-decoration: none;
|
|
54
|
+
box-shadow: 0 5px 12px rgba($bpk-button-outline-background-color, 0.08),
|
|
55
|
+
0 3px 12px rgba($bpk-button-outline-background-color, 0.08);
|
|
54
56
|
cursor: pointer;
|
|
55
57
|
|
|
56
|
-
@include bpk-
|
|
57
|
-
@include bpk-border-radius-sm;
|
|
58
|
+
@include bpk-border-radius-md;
|
|
58
59
|
@include hidden-box-shadow-after;
|
|
59
60
|
|
|
60
61
|
@include bpk-hover {
|
|
@@ -71,35 +72,22 @@ $bpk-spacing-v2: true;
|
|
|
71
72
|
flex-direction: column;
|
|
72
73
|
}
|
|
73
74
|
|
|
74
|
-
&--with-notches {
|
|
75
|
-
box-shadow: none;
|
|
76
|
-
|
|
77
|
-
&::after {
|
|
78
|
-
content: none;
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
75
|
&__paper {
|
|
83
76
|
position: relative;
|
|
84
77
|
background-color: $bpk-card-background-color;
|
|
85
|
-
|
|
86
|
-
&--with-notches {
|
|
87
|
-
@include bpk-box-shadow-sm;
|
|
88
|
-
@include hidden-box-shadow-after;
|
|
89
|
-
}
|
|
90
78
|
}
|
|
91
79
|
|
|
92
80
|
@mixin main-styles {
|
|
93
81
|
&--horizontal {
|
|
94
|
-
border-radius: $bpk-border-radius-
|
|
82
|
+
border-radius: $bpk-border-radius-md 0 0 $bpk-border-radius-md;
|
|
95
83
|
|
|
96
84
|
@include bpk-rtl {
|
|
97
|
-
border-radius: 0 $bpk-border-radius-
|
|
85
|
+
border-radius: 0 $bpk-border-radius-md $bpk-border-radius-md 0;
|
|
98
86
|
}
|
|
99
87
|
}
|
|
100
88
|
|
|
101
89
|
&--vertical {
|
|
102
|
-
border-radius: $bpk-border-radius-
|
|
90
|
+
border-radius: $bpk-border-radius-md $bpk-border-radius-md 0 0;
|
|
103
91
|
}
|
|
104
92
|
}
|
|
105
93
|
|
|
@@ -123,15 +111,18 @@ $bpk-spacing-v2: true;
|
|
|
123
111
|
@mixin stub-styles {
|
|
124
112
|
&--horizontal {
|
|
125
113
|
min-width: 30%;
|
|
126
|
-
border-radius: 0 $bpk-border-radius-
|
|
114
|
+
border-radius: 0 $bpk-border-radius-md $bpk-border-radius-md 0;
|
|
115
|
+
box-shadow: inset $bpk-one-pixel-rem 0 0 $bpk-color-sky-gray-tint-05;
|
|
127
116
|
|
|
128
117
|
@include bpk-rtl {
|
|
129
|
-
border-radius: $bpk-border-radius-
|
|
118
|
+
border-radius: $bpk-border-radius-md 0 0 $bpk-border-radius-md;
|
|
119
|
+
box-shadow: inset (-$bpk-one-pixel-rem) 0 0 $bpk-color-sky-gray-tint-05;
|
|
130
120
|
}
|
|
131
121
|
}
|
|
132
122
|
|
|
133
123
|
&--vertical {
|
|
134
|
-
border-radius: 0 0 $bpk-border-radius-
|
|
124
|
+
border-radius: 0 0 $bpk-border-radius-md $bpk-border-radius-md;
|
|
125
|
+
box-shadow: inset 0 $bpk-one-pixel-rem 0 $bpk-color-sky-gray-tint-05;
|
|
135
126
|
}
|
|
136
127
|
}
|
|
137
128
|
|
|
@@ -151,147 +142,4 @@ $bpk-spacing-v2: true;
|
|
|
151
142
|
|
|
152
143
|
@include stub-styles;
|
|
153
144
|
}
|
|
154
|
-
|
|
155
|
-
&__punchline {
|
|
156
|
-
position: relative;
|
|
157
|
-
z-index: 1;
|
|
158
|
-
flex: 0 0 auto;
|
|
159
|
-
background-color: $bpk-card-background-color;
|
|
160
|
-
|
|
161
|
-
&--horizontal {
|
|
162
|
-
height: $bpk-one-pixel-rem * 2;
|
|
163
|
-
background-image: linear-gradient(
|
|
164
|
-
$bpk-color-sky-gray-tint-06,
|
|
165
|
-
$bpk-color-sky-gray-tint-06
|
|
166
|
-
);
|
|
167
|
-
background-repeat: repeat-x;
|
|
168
|
-
background-position: 0 50%;
|
|
169
|
-
background-size: 8 * $bpk-one-pixel-rem 2 * $bpk-one-pixel-rem;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
&--horizontal-with-notches {
|
|
173
|
-
height: $notch-size * 2;
|
|
174
|
-
margin: auto $notch-size;
|
|
175
|
-
padding: 0 $notch-size;
|
|
176
|
-
background-image: linear-gradient(
|
|
177
|
-
$bpk-color-sky-gray-tint-06,
|
|
178
|
-
$bpk-color-sky-gray-tint-06
|
|
179
|
-
);
|
|
180
|
-
background-repeat: repeat-x;
|
|
181
|
-
background-position: 0 50%;
|
|
182
|
-
background-size: 8 * $bpk-one-pixel-rem 2 * $bpk-one-pixel-rem;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
&--vertical {
|
|
186
|
-
width: $bpk-one-pixel-rem * 2;
|
|
187
|
-
background-image: linear-gradient(
|
|
188
|
-
$bpk-color-sky-gray-tint-06,
|
|
189
|
-
$bpk-color-sky-gray-tint-06
|
|
190
|
-
);
|
|
191
|
-
background-repeat: repeat-y;
|
|
192
|
-
background-position: 50% 0;
|
|
193
|
-
background-size: 2 * $bpk-one-pixel-rem 8 * $bpk-one-pixel-rem;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
&--vertical-with-notches {
|
|
197
|
-
width: $notch-size * 2;
|
|
198
|
-
margin: $notch-size auto;
|
|
199
|
-
padding: $notch-size 0;
|
|
200
|
-
background-image: linear-gradient(
|
|
201
|
-
$bpk-color-sky-gray-tint-06,
|
|
202
|
-
$bpk-color-sky-gray-tint-06
|
|
203
|
-
);
|
|
204
|
-
background-repeat: repeat-y;
|
|
205
|
-
background-position: 50% 0;
|
|
206
|
-
background-size: 2 * $bpk-one-pixel-rem 8 * $bpk-one-pixel-rem;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
&--fallback {
|
|
210
|
-
display: table-cell;
|
|
211
|
-
width: 2 * $bpk-one-pixel-rem;
|
|
212
|
-
background-image: linear-gradient(
|
|
213
|
-
$bpk-color-sky-gray-tint-06,
|
|
214
|
-
$bpk-color-sky-gray-tint-06
|
|
215
|
-
);
|
|
216
|
-
background-repeat: repeat-y;
|
|
217
|
-
background-position: 50% 0;
|
|
218
|
-
background-size: 2 * $bpk-one-pixel-rem 8 * $bpk-one-pixel-rem;
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
&__notch {
|
|
223
|
-
position: absolute;
|
|
224
|
-
width: $notch-size * 2;
|
|
225
|
-
height: $notch-size;
|
|
226
|
-
overflow: hidden;
|
|
227
|
-
|
|
228
|
-
&::after {
|
|
229
|
-
position: relative;
|
|
230
|
-
content: '';
|
|
231
|
-
display: block;
|
|
232
|
-
width: $notch-size * 4;
|
|
233
|
-
height: $notch-size * 4;
|
|
234
|
-
transform: translate3d(
|
|
235
|
-
0,
|
|
236
|
-
0,
|
|
237
|
-
0
|
|
238
|
-
); // BPK-1011 fix rendering bug in safari 11
|
|
239
|
-
|
|
240
|
-
border: $notch-size solid $bpk-color-white;
|
|
241
|
-
border-radius: $notch-size * 2;
|
|
242
|
-
box-shadow: $bpk-box-shadow-sm inset;
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
&--top {
|
|
246
|
-
top: -$notch-size;
|
|
247
|
-
|
|
248
|
-
&::after {
|
|
249
|
-
right: -50%;
|
|
250
|
-
bottom: 200%;
|
|
251
|
-
left: -50%;
|
|
252
|
-
}
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
&--right {
|
|
256
|
-
right: -$notch-size;
|
|
257
|
-
width: $notch-size;
|
|
258
|
-
height: $notch-size * 2;
|
|
259
|
-
|
|
260
|
-
&::after {
|
|
261
|
-
right: 100%;
|
|
262
|
-
bottom: 50%;
|
|
263
|
-
|
|
264
|
-
@include bpk-rtl {
|
|
265
|
-
right: auto;
|
|
266
|
-
left: 200%;
|
|
267
|
-
}
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
&--bottom {
|
|
272
|
-
bottom: -$notch-size;
|
|
273
|
-
|
|
274
|
-
&::after {
|
|
275
|
-
right: -50%;
|
|
276
|
-
bottom: 100%;
|
|
277
|
-
left: -50%;
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
&--left {
|
|
282
|
-
left: -$notch-size;
|
|
283
|
-
width: $notch-size;
|
|
284
|
-
height: $notch-size * 2;
|
|
285
|
-
|
|
286
|
-
&::after {
|
|
287
|
-
right: 200%;
|
|
288
|
-
bottom: 50%;
|
|
289
|
-
|
|
290
|
-
@include bpk-rtl {
|
|
291
|
-
right: auto;
|
|
292
|
-
left: 100%;
|
|
293
|
-
}
|
|
294
|
-
}
|
|
295
|
-
}
|
|
296
|
-
}
|
|
297
145
|
}
|