@financial-times/o-labels 5.1.4 → 5.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.
- package/.github/workflows/add-new-issues-and-pull-requests-to-origami-project-board.yml +0 -1
- package/.github/workflows/apply-labels.yml +0 -1
- package/.github/workflows/auto-approve.yml +17 -6
- package/.github/workflows/automatic-tag-and-release.yml +1 -1
- package/.github/workflows/release-origami-component.yml +1 -1
- package/.github/workflows/sync-repo-labels.yml +0 -1
- package/.github/workflows/test-origami-component.yml +1 -1
- package/README.md +21 -2
- package/app.json +12 -0
- package/demos/src/data/color-palette-states.json +32 -0
- package/demos/src/demo.scss +15 -0
- package/demos/src/indicators-sizes.mustache +157 -0
- package/dist/scss/_brand.scss +29 -1
- package/dist/scss/_mixins.scss +12 -17
- package/dist/scss/_placeholders.scss +12 -17
- package/dist/scss/_variables.scss +12 -6
- package/dist-esm/scss/_brand.scss +29 -1
- package/dist-esm/scss/_mixins.scss +12 -17
- package/dist-esm/scss/_placeholders.scss +12 -17
- package/dist-esm/scss/_variables.scss +12 -6
- package/origami.json +19 -0
- package/package.json +7 -4
- package/src/scss/_brand.scss +29 -1
- package/src/scss/_mixins.scss +12 -17
- package/src/scss/_placeholders.scss +12 -17
- package/src/scss/_variables.scss +12 -6
- package/.github/workflows/automerge.yml +0 -40
|
@@ -1,12 +1,23 @@
|
|
|
1
1
|
name: Auto Approve Dependabot PRs
|
|
2
2
|
|
|
3
|
-
on:
|
|
3
|
+
on:
|
|
4
|
+
pull_request_target:
|
|
5
|
+
types: [labeled]
|
|
4
6
|
|
|
5
7
|
jobs:
|
|
6
|
-
auto-
|
|
8
|
+
auto-update-dependabot:
|
|
9
|
+
name: Auto-Approve and enable Auto-Merge for all Dependabot PRs
|
|
7
10
|
runs-on: ubuntu-latest
|
|
11
|
+
if: github.event.pull_request.user.login == 'dependabot[bot]' && contains(github.event.pull_request.labels.*.name, 'dependencies')
|
|
8
12
|
steps:
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
+
|
|
14
|
+
# Enable auto-merge *before* issuing an approval.
|
|
15
|
+
- name: Enable Github Automerge
|
|
16
|
+
uses: alexwilson/enable-github-automerge-action@main
|
|
17
|
+
with:
|
|
18
|
+
github-token: "${{ secrets.ORIGAMI_FOX_ACCESS_TOKEN }}"
|
|
19
|
+
|
|
20
|
+
# We "trust" dependabot updates (this still requires all other checks to pass!)
|
|
21
|
+
- uses: hmarr/auto-approve-action@5d04a5ca6da9aeb8ca9f31a5239b96fc3e003029
|
|
22
|
+
with:
|
|
23
|
+
github-token: "${{ secrets.ORIGAMI_FOX_ACCESS_TOKEN }}"
|
|
@@ -14,7 +14,7 @@ jobs:
|
|
|
14
14
|
fetch-depth: 0
|
|
15
15
|
- run: git fetch --depth=1 origin +refs/tags/*:refs/tags/* # Get all tags from the origin
|
|
16
16
|
if: github.event.pull_request.merged # Only run on merged pull-requests
|
|
17
|
-
- uses: Financial-Times/origami-version@v1
|
|
17
|
+
- uses: Financial-Times/origami-version@v1.2.1
|
|
18
18
|
name: Create new version/tag
|
|
19
19
|
if: github.event.pull_request.merged # Only run on merged pull-requests
|
|
20
20
|
with:
|
|
@@ -7,7 +7,7 @@ jobs:
|
|
|
7
7
|
- uses: actions/checkout@v2
|
|
8
8
|
# Required for npx origami-ci branch, specifically for bundle-size-cli
|
|
9
9
|
- run: git fetch --prune --unshallow
|
|
10
|
-
- uses: actions/setup-node@v2.1.
|
|
10
|
+
- uses: actions/setup-node@v2.1.5
|
|
11
11
|
with:
|
|
12
12
|
node-version: 12.x
|
|
13
13
|
- run: npm install --only=dev
|
package/README.md
CHANGED
|
@@ -38,7 +38,7 @@ This table outlines the possible standard label sizes.
|
|
|
38
38
|
|
|
39
39
|
This table outlines the possible standard label states. Custom states may also be created.
|
|
40
40
|
|
|
41
|
-
|
|
|
41
|
+
| State | Description | Brand support |
|
|
42
42
|
|----------------------|---------------------------------------------------------------|---------------|
|
|
43
43
|
| content-commercial | Used to identify paid posts or promoted content. | master |
|
|
44
44
|
| content-premium | Used to identify premium content. | master |
|
|
@@ -52,6 +52,13 @@ This table outlines the possible standard label states. Custom states may also b
|
|
|
52
52
|
| tier-gold | Used to indicate a service with a gold service tier. | internal |
|
|
53
53
|
| tier-silver | Used to indicate a service with a silver service tier. | internal |
|
|
54
54
|
| tier-bronze | Used to indicate a service with a bronze service tier. | internal |
|
|
55
|
+
| oxford | A colour based label with no specific meaning specified. | internal |
|
|
56
|
+
| teal | A colour based label with no specific meaning specified. | internal |
|
|
57
|
+
| lemon | A colour based label with no specific meaning specified. | internal |
|
|
58
|
+
| slate | A colour based label with no specific meaning specified. | internal |
|
|
59
|
+
| jade | A colour based label with no specific meaning specified. | internal |
|
|
60
|
+
| crimson | A colour based label with no specific meaning specified. | internal |
|
|
61
|
+
| mandarin | A colour based label with no specific meaning specified. | internal |
|
|
55
62
|
|
|
56
63
|
### Indicator Label
|
|
57
64
|
|
|
@@ -61,7 +68,7 @@ The indicator label is used to show story status with new, updated, and live var
|
|
|
61
68
|
|
|
62
69
|
This table outlines the possible indicator label statuses:
|
|
63
70
|
|
|
64
|
-
|
|
|
71
|
+
| Indicator | Description | Brand support |
|
|
65
72
|
|----------------------|---------------------------------------------------------------|---------------|
|
|
66
73
|
| live | Indicate a story is live. | master |
|
|
67
74
|
| closed | Indicate a live story is no longer live. | master |
|
|
@@ -125,6 +132,18 @@ The following internal brand states are used to represent the FT's service tiers
|
|
|
125
132
|
<span class="o-labels o-labels--support-bronze">Bronze</span>
|
|
126
133
|
```
|
|
127
134
|
|
|
135
|
+
The internal brand may also use colour palette based states, these do not specify a particular usecase for flexibility:
|
|
136
|
+
|
|
137
|
+
```html
|
|
138
|
+
<span class="o-labels o-labels--oxford">oxford</span>
|
|
139
|
+
<span class="o-labels o-labels--teal">teal</span>
|
|
140
|
+
<span class="o-labels o-labels--lemon">lemon</span>
|
|
141
|
+
<span class="o-labels o-labels--slate">slate</span>
|
|
142
|
+
<span class="o-labels o-labels--jade">jade</span>
|
|
143
|
+
<span class="o-labels o-labels--crimson">crimson</span>
|
|
144
|
+
<span class="o-labels o-labels--mandarin">mandarin</span>
|
|
145
|
+
```
|
|
146
|
+
|
|
128
147
|
### Indicator Label Markup
|
|
129
148
|
|
|
130
149
|
Indicator labels have one of three statuses:
|
package/app.json
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
{
|
|
2
|
+
"states": [
|
|
3
|
+
{
|
|
4
|
+
"id": "oxford",
|
|
5
|
+
"content": "oxford"
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
"id": "teal",
|
|
9
|
+
"content": "teal"
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"id": "lemon",
|
|
13
|
+
"content": "lemon"
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"id": "slate",
|
|
17
|
+
"content": "slate"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"id": "jade",
|
|
21
|
+
"content": "jade"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"id": "crimson",
|
|
25
|
+
"content": "crimson"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"id": "mandarin",
|
|
29
|
+
"content": "mandarin"
|
|
30
|
+
}
|
|
31
|
+
]
|
|
32
|
+
}
|
package/demos/src/demo.scss
CHANGED
|
@@ -17,6 +17,19 @@ html {
|
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
+
.demo-scale-m1 {
|
|
21
|
+
@include oTypographySans($scale: -1);
|
|
22
|
+
}
|
|
23
|
+
.demo-scale-0 {
|
|
24
|
+
@include oTypographySans($scale: 0);
|
|
25
|
+
}
|
|
26
|
+
.demo-scale-1 {
|
|
27
|
+
@include oTypographySans($scale: 1);
|
|
28
|
+
}
|
|
29
|
+
.demo-scale-2 {
|
|
30
|
+
@include oTypographySans($scale: 3);
|
|
31
|
+
}
|
|
32
|
+
|
|
20
33
|
// custom standard label markup
|
|
21
34
|
.my-label {
|
|
22
35
|
@include oLabelsContent($opts: (
|
|
@@ -40,3 +53,5 @@ html {
|
|
|
40
53
|
.my-indicator-label__date {
|
|
41
54
|
@include oLabelsIndicatorContent($opts: ('element': 'timestamp'));
|
|
42
55
|
}
|
|
56
|
+
|
|
57
|
+
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
<span class="demo-scale-m1 o-labels-indicator o-labels-indicator--live{{#modifiers}} o-labels-indicator--{{.}}{{/modifiers}}">
|
|
2
|
+
<span class="o-labels-indicator__status">
|
|
3
|
+
live
|
|
4
|
+
</span>
|
|
5
|
+
</span>
|
|
6
|
+
|
|
7
|
+
<br>
|
|
8
|
+
|
|
9
|
+
<span class="demo-scale-m1 o-labels-indicator o-labels-indicator--closed{{#modifiers}} o-labels-indicator--{{.}}{{/modifiers}}">
|
|
10
|
+
<span class="o-labels-indicator__status">
|
|
11
|
+
closed
|
|
12
|
+
</span>
|
|
13
|
+
</span>
|
|
14
|
+
|
|
15
|
+
<br>
|
|
16
|
+
|
|
17
|
+
<span class="demo-scale-m1 o-labels-indicator o-labels-indicator--new{{#modifiers}} o-labels-indicator--{{.}}{{/modifiers}}">
|
|
18
|
+
<span class="o-labels-indicator__status">
|
|
19
|
+
new
|
|
20
|
+
</span>
|
|
21
|
+
<time class="o-labels-indicator__timestamp">
|
|
22
|
+
<!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
|
|
23
|
+
<time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
|
|
24
|
+
</time>
|
|
25
|
+
</span>
|
|
26
|
+
|
|
27
|
+
<br>
|
|
28
|
+
|
|
29
|
+
<span class="demo-scale-m1 o-labels-indicator o-labels-indicator--updated{{#modifiers}} o-labels-indicator--{{.}}{{/modifiers}}">
|
|
30
|
+
<span class="o-labels-indicator__status">
|
|
31
|
+
updated
|
|
32
|
+
</span>
|
|
33
|
+
<time class="o-labels-indicator__timestamp">
|
|
34
|
+
<!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
|
|
35
|
+
<time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
|
|
36
|
+
</time>
|
|
37
|
+
</span>
|
|
38
|
+
|
|
39
|
+
<hr>
|
|
40
|
+
|
|
41
|
+
<span class="demo-scale-0 o-labels-indicator o-labels-indicator--live{{#modifiers}} o-labels-indicator--{{.}}{{/modifiers}}">
|
|
42
|
+
<span class="o-labels-indicator__status">
|
|
43
|
+
live
|
|
44
|
+
</span>
|
|
45
|
+
</span>
|
|
46
|
+
|
|
47
|
+
<br>
|
|
48
|
+
|
|
49
|
+
<span class="demo-scale-0 o-labels-indicator o-labels-indicator--closed{{#modifiers}} o-labels-indicator--{{.}}{{/modifiers}}">
|
|
50
|
+
<span class="o-labels-indicator__status">
|
|
51
|
+
closed
|
|
52
|
+
</span>
|
|
53
|
+
</span>
|
|
54
|
+
|
|
55
|
+
<br>
|
|
56
|
+
|
|
57
|
+
<span class="demo-scale-0 o-labels-indicator o-labels-indicator--new{{#modifiers}} o-labels-indicator--{{.}}{{/modifiers}}">
|
|
58
|
+
<span class="o-labels-indicator__status">
|
|
59
|
+
new
|
|
60
|
+
</span>
|
|
61
|
+
<time class="o-labels-indicator__timestamp">
|
|
62
|
+
<!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
|
|
63
|
+
<time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
|
|
64
|
+
</time>
|
|
65
|
+
</span>
|
|
66
|
+
|
|
67
|
+
<br>
|
|
68
|
+
|
|
69
|
+
<span class="demo-scale-0 o-labels-indicator o-labels-indicator--updated{{#modifiers}} o-labels-indicator--{{.}}{{/modifiers}}">
|
|
70
|
+
<span class="o-labels-indicator__status">
|
|
71
|
+
updated
|
|
72
|
+
</span>
|
|
73
|
+
<time class="o-labels-indicator__timestamp">
|
|
74
|
+
<!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
|
|
75
|
+
<time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
|
|
76
|
+
</time>
|
|
77
|
+
</span>
|
|
78
|
+
|
|
79
|
+
<hr>
|
|
80
|
+
|
|
81
|
+
<span class="demo-scale-1 o-labels-indicator o-labels-indicator--live{{#modifiers}} o-labels-indicator--{{.}}{{/modifiers}}">
|
|
82
|
+
<span class="o-labels-indicator__status">
|
|
83
|
+
live
|
|
84
|
+
</span>
|
|
85
|
+
</span>
|
|
86
|
+
|
|
87
|
+
<br>
|
|
88
|
+
|
|
89
|
+
<span class="demo-scale-1 o-labels-indicator o-labels-indicator--closed{{#modifiers}} o-labels-indicator--{{.}}{{/modifiers}}">
|
|
90
|
+
<span class="o-labels-indicator__status">
|
|
91
|
+
closed
|
|
92
|
+
</span>
|
|
93
|
+
</span>
|
|
94
|
+
|
|
95
|
+
<br>
|
|
96
|
+
|
|
97
|
+
<span class="demo-scale-1 o-labels-indicator o-labels-indicator--new{{#modifiers}} o-labels-indicator--{{.}}{{/modifiers}}">
|
|
98
|
+
<span class="o-labels-indicator__status">
|
|
99
|
+
new
|
|
100
|
+
</span>
|
|
101
|
+
<time class="o-labels-indicator__timestamp">
|
|
102
|
+
<!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
|
|
103
|
+
<time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
|
|
104
|
+
</time>
|
|
105
|
+
</span>
|
|
106
|
+
|
|
107
|
+
<br>
|
|
108
|
+
|
|
109
|
+
<span class="demo-scale-1 o-labels-indicator o-labels-indicator--updated{{#modifiers}} o-labels-indicator--{{.}}{{/modifiers}}">
|
|
110
|
+
<span class="o-labels-indicator__status">
|
|
111
|
+
updated
|
|
112
|
+
</span>
|
|
113
|
+
<time class="o-labels-indicator__timestamp">
|
|
114
|
+
<!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
|
|
115
|
+
<time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
|
|
116
|
+
</time>
|
|
117
|
+
</span>
|
|
118
|
+
|
|
119
|
+
<hr>
|
|
120
|
+
|
|
121
|
+
<span class="demo-scale-2 o-labels-indicator o-labels-indicator--live{{#modifiers}} o-labels-indicator--{{.}}{{/modifiers}}">
|
|
122
|
+
<span class="o-labels-indicator__status">
|
|
123
|
+
live
|
|
124
|
+
</span>
|
|
125
|
+
</span>
|
|
126
|
+
|
|
127
|
+
<br>
|
|
128
|
+
|
|
129
|
+
<span class="demo-scale-2 o-labels-indicator o-labels-indicator--closed{{#modifiers}} o-labels-indicator--{{.}}{{/modifiers}}">
|
|
130
|
+
<span class="o-labels-indicator__status">
|
|
131
|
+
closed
|
|
132
|
+
</span>
|
|
133
|
+
</span>
|
|
134
|
+
|
|
135
|
+
<br>
|
|
136
|
+
|
|
137
|
+
<span class="demo-scale-2 o-labels-indicator o-labels-indicator--new{{#modifiers}} o-labels-indicator--{{.}}{{/modifiers}}">
|
|
138
|
+
<span class="o-labels-indicator__status">
|
|
139
|
+
new
|
|
140
|
+
</span>
|
|
141
|
+
<time class="o-labels-indicator__timestamp">
|
|
142
|
+
<!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
|
|
143
|
+
<time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
|
|
144
|
+
</time>
|
|
145
|
+
</span>
|
|
146
|
+
|
|
147
|
+
<br>
|
|
148
|
+
|
|
149
|
+
<span class="demo-scale-2 o-labels-indicator o-labels-indicator--updated{{#modifiers}} o-labels-indicator--{{.}}{{/modifiers}}">
|
|
150
|
+
<span class="o-labels-indicator__status">
|
|
151
|
+
updated
|
|
152
|
+
</span>
|
|
153
|
+
<time class="o-labels-indicator__timestamp">
|
|
154
|
+
<!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
|
|
155
|
+
<time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
|
|
156
|
+
</time>
|
|
157
|
+
</span>
|
package/dist/scss/_brand.scss
CHANGED
|
@@ -102,6 +102,27 @@ $_o-labels-shared-brand-config: (
|
|
|
102
102
|
// component needs to use these colours
|
|
103
103
|
background-color: #c0c0c0
|
|
104
104
|
),
|
|
105
|
+
'oxford': (
|
|
106
|
+
background-color: oColorsByName('oxford')
|
|
107
|
+
),
|
|
108
|
+
'teal': (
|
|
109
|
+
background-color: oColorsByName('teal')
|
|
110
|
+
),
|
|
111
|
+
'lemon': (
|
|
112
|
+
background-color: oColorsByName('lemon')
|
|
113
|
+
),
|
|
114
|
+
'slate': (
|
|
115
|
+
background-color: oColorsByName('slate')
|
|
116
|
+
),
|
|
117
|
+
'jade': (
|
|
118
|
+
background-color: oColorsByName('jade')
|
|
119
|
+
),
|
|
120
|
+
'crimson': (
|
|
121
|
+
background-color: oColorsByName('crimson')
|
|
122
|
+
),
|
|
123
|
+
'mandarin': (
|
|
124
|
+
background-color: oColorsByName('mandarin')
|
|
125
|
+
)
|
|
105
126
|
)),
|
|
106
127
|
'supports-variants': (
|
|
107
128
|
'big',
|
|
@@ -114,7 +135,14 @@ $_o-labels-shared-brand-config: (
|
|
|
114
135
|
'tier-bronze',
|
|
115
136
|
'tier-gold',
|
|
116
137
|
'tier-platinum',
|
|
117
|
-
'tier-silver'
|
|
138
|
+
'tier-silver',
|
|
139
|
+
'oxford',
|
|
140
|
+
'teal',
|
|
141
|
+
'lemon',
|
|
142
|
+
'slate',
|
|
143
|
+
'jade',
|
|
144
|
+
'crimson',
|
|
145
|
+
'mandarin'
|
|
118
146
|
)
|
|
119
147
|
));
|
|
120
148
|
}
|
package/dist/scss/_mixins.scss
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
box-sizing: border-box;
|
|
17
17
|
margin: 0;
|
|
18
18
|
text-decoration: none;
|
|
19
|
-
padding: (_oLabelsGet('padding-vertical') - _oLabelsGet('border-width')) (_oLabelsGet('padding-horizontal') - _oLabelsGet('border-width'));
|
|
19
|
+
padding: calc(#{_oLabelsGet('padding-vertical')} - #{_oLabelsGet('border-width')}) calc(#{_oLabelsGet('padding-horizontal')} - #{_oLabelsGet('border-width')});
|
|
20
20
|
color: _oLabelsGet('text-color');
|
|
21
21
|
background-color: _oLabelsGet('background-color');
|
|
22
22
|
border: solid _oLabelsGet('border-width') transparent;
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
@if $scale {
|
|
176
176
|
@include oTypographySans($scale, $line-height: 1, $include-font-family: false);
|
|
177
177
|
}
|
|
178
|
-
padding: (_oLabelsGet('padding-vertical', $size) - _oLabelsGet('border-width')) (_oLabelsGet('padding-horizontal', $size) - _oLabelsGet('border-width'));
|
|
178
|
+
padding: calc(#{_oLabelsGet('padding-vertical', $size)} - #{_oLabelsGet('border-width')}) calc(#{_oLabelsGet('padding-horizontal', $size)} - #{_oLabelsGet('border-width')});
|
|
179
179
|
}
|
|
180
180
|
|
|
181
181
|
/// Styles for a state.
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
|
|
196
196
|
// Set the spacing
|
|
197
197
|
@if _oLabelsGet('padding-vertical', $variant) and _oLabelsGet('padding-horizontal', $variant) {
|
|
198
|
-
padding: (_oLabelsGet('padding-vertical', $variant) - _oLabelsGet('border-width')) (_oLabelsGet('padding-horizontal', $variant) - _oLabelsGet('border-width'));
|
|
198
|
+
padding: calc(#{_oLabelsGet('padding-vertical', $variant)} - #{_oLabelsGet('border-width')}) calc(#{_oLabelsGet('padding-horizontal', $variant)} - #{_oLabelsGet('border-width')});
|
|
199
199
|
}
|
|
200
200
|
}
|
|
201
201
|
|
|
@@ -219,16 +219,8 @@
|
|
|
219
219
|
@extend %_o-labels-timestamp-typography;
|
|
220
220
|
|
|
221
221
|
@if($status == 'live') {
|
|
222
|
-
& > %_o-labels-indicator__status:
|
|
223
|
-
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
& > %_o-labels-indicator__status:after {
|
|
227
|
-
margin-right: calc((#{$_o-labels-indicator-circle-size-calc}) * -1);
|
|
228
|
-
opacity: 0.2;
|
|
229
|
-
transform: scale(1.5);
|
|
230
|
-
animation: _o-labels-live-pulse 1.7s ease infinite;
|
|
231
|
-
order: -1;
|
|
222
|
+
& > %_o-labels-indicator__status:before {
|
|
223
|
+
animation: _o-labels-live-pulse 1.2s ease-in-out infinite;
|
|
232
224
|
// Prevent animation of the live label if the reader has indicated
|
|
233
225
|
// that they prefer reduced motion. This may be conservative but
|
|
234
226
|
// as the live indicator is presented alongside content (including
|
|
@@ -245,13 +237,16 @@
|
|
|
245
237
|
$_o-labels-indicator-live-pulse-output: true !global;
|
|
246
238
|
@keyframes _o-labels-live-pulse {
|
|
247
239
|
0% {
|
|
248
|
-
|
|
240
|
+
opacity: 1;
|
|
241
|
+
}
|
|
242
|
+
30% {
|
|
243
|
+
opacity: 0.4;
|
|
249
244
|
}
|
|
250
|
-
|
|
251
|
-
|
|
245
|
+
70% {
|
|
246
|
+
opacity: 0.4;
|
|
252
247
|
}
|
|
253
248
|
100% {
|
|
254
|
-
|
|
249
|
+
opacity: 1;
|
|
255
250
|
}
|
|
256
251
|
}
|
|
257
252
|
}
|
|
@@ -26,19 +26,6 @@ $_o-labels-first-import: true !default;
|
|
|
26
26
|
color: oColorsByName('black-60');
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
%_o-labels-indicator-circle {
|
|
30
|
-
content: '';
|
|
31
|
-
position: relative;
|
|
32
|
-
left: 0;
|
|
33
|
-
width: calc(#{$_o-labels-indicator-circle-size-calc});
|
|
34
|
-
height: calc(#{$_o-labels-indicator-circle-size-calc});
|
|
35
|
-
margin-right: 5px;
|
|
36
|
-
border-radius: 50%;
|
|
37
|
-
background-color: currentcolor;
|
|
38
|
-
display: inline-block;
|
|
39
|
-
align-self: center;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
29
|
// timestamp block placeholders
|
|
43
30
|
%_o-labels-timestamp {
|
|
44
31
|
@extend %_o-labels-timestamp-typography;
|
|
@@ -55,15 +42,23 @@ $_o-labels-first-import: true !default;
|
|
|
55
42
|
// indicator block placeholders
|
|
56
43
|
%_o-labels-indicator {
|
|
57
44
|
@extend %_o-labels-indicator-size;
|
|
58
|
-
position: relative;
|
|
59
45
|
display: inline-block;
|
|
60
46
|
}
|
|
61
47
|
|
|
62
48
|
%_o-labels-indicator__status {
|
|
63
|
-
display: inline-flex;
|
|
64
|
-
align-items: baseline;
|
|
65
49
|
&:before {
|
|
66
|
-
|
|
50
|
+
content: '';
|
|
51
|
+
width: calc(0.5em + 4px);
|
|
52
|
+
height: calc(0.5em + 4px);
|
|
53
|
+
min-width: 10px;
|
|
54
|
+
min-height: 10px;
|
|
55
|
+
margin-right: 2px;
|
|
56
|
+
border-radius: 50%;
|
|
57
|
+
background-color: currentcolor;
|
|
58
|
+
display: inline-block;
|
|
59
|
+
vertical-align: baseline;
|
|
60
|
+
// align better with MetricWeb
|
|
61
|
+
margin-bottom: -1px;
|
|
67
62
|
}
|
|
68
63
|
}
|
|
69
64
|
}
|
|
@@ -30,16 +30,27 @@ $_o-labels-standard-sizes: (
|
|
|
30
30
|
$_o-labels-standard-states: (
|
|
31
31
|
'content-commercial',
|
|
32
32
|
'content-premium',
|
|
33
|
+
|
|
33
34
|
'lifecycle-beta',
|
|
35
|
+
|
|
34
36
|
'support-active',
|
|
35
37
|
'support-dead',
|
|
36
38
|
'support-deprecated',
|
|
37
39
|
'support-experimental',
|
|
38
40
|
'support-maintained',
|
|
41
|
+
|
|
39
42
|
'tier-bronze',
|
|
40
43
|
'tier-gold',
|
|
41
44
|
'tier-platinum',
|
|
42
|
-
'tier-silver'
|
|
45
|
+
'tier-silver',
|
|
46
|
+
|
|
47
|
+
'oxford',
|
|
48
|
+
'teal',
|
|
49
|
+
'lemon',
|
|
50
|
+
'slate',
|
|
51
|
+
'jade',
|
|
52
|
+
'crimson',
|
|
53
|
+
'mandarin'
|
|
43
54
|
);
|
|
44
55
|
|
|
45
56
|
/// Indicator label states
|
|
@@ -54,11 +65,6 @@ $_o-labels-indicator-status: (
|
|
|
54
65
|
'updated'
|
|
55
66
|
);
|
|
56
67
|
|
|
57
|
-
/// The width/height of the circle used in the indicator label.
|
|
58
|
-
/// @type Number
|
|
59
|
-
/// @access private
|
|
60
|
-
$_o-labels-indicator-circle-size-calc: #{(4/12)}em #{'+'} 6px; // 10px given 12px font size, 12px given 18px font size
|
|
61
|
-
|
|
62
68
|
/// Whether or not the animation keyframes for the live indicator
|
|
63
69
|
/// label has already been output.
|
|
64
70
|
/// @type Boolean
|
|
@@ -102,6 +102,27 @@ $_o-labels-shared-brand-config: (
|
|
|
102
102
|
// component needs to use these colours
|
|
103
103
|
background-color: #c0c0c0
|
|
104
104
|
),
|
|
105
|
+
'oxford': (
|
|
106
|
+
background-color: oColorsByName('oxford')
|
|
107
|
+
),
|
|
108
|
+
'teal': (
|
|
109
|
+
background-color: oColorsByName('teal')
|
|
110
|
+
),
|
|
111
|
+
'lemon': (
|
|
112
|
+
background-color: oColorsByName('lemon')
|
|
113
|
+
),
|
|
114
|
+
'slate': (
|
|
115
|
+
background-color: oColorsByName('slate')
|
|
116
|
+
),
|
|
117
|
+
'jade': (
|
|
118
|
+
background-color: oColorsByName('jade')
|
|
119
|
+
),
|
|
120
|
+
'crimson': (
|
|
121
|
+
background-color: oColorsByName('crimson')
|
|
122
|
+
),
|
|
123
|
+
'mandarin': (
|
|
124
|
+
background-color: oColorsByName('mandarin')
|
|
125
|
+
)
|
|
105
126
|
)),
|
|
106
127
|
'supports-variants': (
|
|
107
128
|
'big',
|
|
@@ -114,7 +135,14 @@ $_o-labels-shared-brand-config: (
|
|
|
114
135
|
'tier-bronze',
|
|
115
136
|
'tier-gold',
|
|
116
137
|
'tier-platinum',
|
|
117
|
-
'tier-silver'
|
|
138
|
+
'tier-silver',
|
|
139
|
+
'oxford',
|
|
140
|
+
'teal',
|
|
141
|
+
'lemon',
|
|
142
|
+
'slate',
|
|
143
|
+
'jade',
|
|
144
|
+
'crimson',
|
|
145
|
+
'mandarin'
|
|
118
146
|
)
|
|
119
147
|
));
|
|
120
148
|
}
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
box-sizing: border-box;
|
|
17
17
|
margin: 0;
|
|
18
18
|
text-decoration: none;
|
|
19
|
-
padding: (_oLabelsGet('padding-vertical') - _oLabelsGet('border-width')) (_oLabelsGet('padding-horizontal') - _oLabelsGet('border-width'));
|
|
19
|
+
padding: calc(#{_oLabelsGet('padding-vertical')} - #{_oLabelsGet('border-width')}) calc(#{_oLabelsGet('padding-horizontal')} - #{_oLabelsGet('border-width')});
|
|
20
20
|
color: _oLabelsGet('text-color');
|
|
21
21
|
background-color: _oLabelsGet('background-color');
|
|
22
22
|
border: solid _oLabelsGet('border-width') transparent;
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
@if $scale {
|
|
176
176
|
@include oTypographySans($scale, $line-height: 1, $include-font-family: false);
|
|
177
177
|
}
|
|
178
|
-
padding: (_oLabelsGet('padding-vertical', $size) - _oLabelsGet('border-width')) (_oLabelsGet('padding-horizontal', $size) - _oLabelsGet('border-width'));
|
|
178
|
+
padding: calc(#{_oLabelsGet('padding-vertical', $size)} - #{_oLabelsGet('border-width')}) calc(#{_oLabelsGet('padding-horizontal', $size)} - #{_oLabelsGet('border-width')});
|
|
179
179
|
}
|
|
180
180
|
|
|
181
181
|
/// Styles for a state.
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
|
|
196
196
|
// Set the spacing
|
|
197
197
|
@if _oLabelsGet('padding-vertical', $variant) and _oLabelsGet('padding-horizontal', $variant) {
|
|
198
|
-
padding: (_oLabelsGet('padding-vertical', $variant) - _oLabelsGet('border-width')) (_oLabelsGet('padding-horizontal', $variant) - _oLabelsGet('border-width'));
|
|
198
|
+
padding: calc(#{_oLabelsGet('padding-vertical', $variant)} - #{_oLabelsGet('border-width')}) calc(#{_oLabelsGet('padding-horizontal', $variant)} - #{_oLabelsGet('border-width')});
|
|
199
199
|
}
|
|
200
200
|
}
|
|
201
201
|
|
|
@@ -219,16 +219,8 @@
|
|
|
219
219
|
@extend %_o-labels-timestamp-typography;
|
|
220
220
|
|
|
221
221
|
@if($status == 'live') {
|
|
222
|
-
& > %_o-labels-indicator__status:
|
|
223
|
-
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
& > %_o-labels-indicator__status:after {
|
|
227
|
-
margin-right: calc((#{$_o-labels-indicator-circle-size-calc}) * -1);
|
|
228
|
-
opacity: 0.2;
|
|
229
|
-
transform: scale(1.5);
|
|
230
|
-
animation: _o-labels-live-pulse 1.7s ease infinite;
|
|
231
|
-
order: -1;
|
|
222
|
+
& > %_o-labels-indicator__status:before {
|
|
223
|
+
animation: _o-labels-live-pulse 1.2s ease-in-out infinite;
|
|
232
224
|
// Prevent animation of the live label if the reader has indicated
|
|
233
225
|
// that they prefer reduced motion. This may be conservative but
|
|
234
226
|
// as the live indicator is presented alongside content (including
|
|
@@ -245,13 +237,16 @@
|
|
|
245
237
|
$_o-labels-indicator-live-pulse-output: true !global;
|
|
246
238
|
@keyframes _o-labels-live-pulse {
|
|
247
239
|
0% {
|
|
248
|
-
|
|
240
|
+
opacity: 1;
|
|
241
|
+
}
|
|
242
|
+
30% {
|
|
243
|
+
opacity: 0.4;
|
|
249
244
|
}
|
|
250
|
-
|
|
251
|
-
|
|
245
|
+
70% {
|
|
246
|
+
opacity: 0.4;
|
|
252
247
|
}
|
|
253
248
|
100% {
|
|
254
|
-
|
|
249
|
+
opacity: 1;
|
|
255
250
|
}
|
|
256
251
|
}
|
|
257
252
|
}
|
|
@@ -26,19 +26,6 @@ $_o-labels-first-import: true !default;
|
|
|
26
26
|
color: oColorsByName('black-60');
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
%_o-labels-indicator-circle {
|
|
30
|
-
content: '';
|
|
31
|
-
position: relative;
|
|
32
|
-
left: 0;
|
|
33
|
-
width: calc(#{$_o-labels-indicator-circle-size-calc});
|
|
34
|
-
height: calc(#{$_o-labels-indicator-circle-size-calc});
|
|
35
|
-
margin-right: 5px;
|
|
36
|
-
border-radius: 50%;
|
|
37
|
-
background-color: currentcolor;
|
|
38
|
-
display: inline-block;
|
|
39
|
-
align-self: center;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
29
|
// timestamp block placeholders
|
|
43
30
|
%_o-labels-timestamp {
|
|
44
31
|
@extend %_o-labels-timestamp-typography;
|
|
@@ -55,15 +42,23 @@ $_o-labels-first-import: true !default;
|
|
|
55
42
|
// indicator block placeholders
|
|
56
43
|
%_o-labels-indicator {
|
|
57
44
|
@extend %_o-labels-indicator-size;
|
|
58
|
-
position: relative;
|
|
59
45
|
display: inline-block;
|
|
60
46
|
}
|
|
61
47
|
|
|
62
48
|
%_o-labels-indicator__status {
|
|
63
|
-
display: inline-flex;
|
|
64
|
-
align-items: baseline;
|
|
65
49
|
&:before {
|
|
66
|
-
|
|
50
|
+
content: '';
|
|
51
|
+
width: calc(0.5em + 4px);
|
|
52
|
+
height: calc(0.5em + 4px);
|
|
53
|
+
min-width: 10px;
|
|
54
|
+
min-height: 10px;
|
|
55
|
+
margin-right: 2px;
|
|
56
|
+
border-radius: 50%;
|
|
57
|
+
background-color: currentcolor;
|
|
58
|
+
display: inline-block;
|
|
59
|
+
vertical-align: baseline;
|
|
60
|
+
// align better with MetricWeb
|
|
61
|
+
margin-bottom: -1px;
|
|
67
62
|
}
|
|
68
63
|
}
|
|
69
64
|
}
|
|
@@ -30,16 +30,27 @@ $_o-labels-standard-sizes: (
|
|
|
30
30
|
$_o-labels-standard-states: (
|
|
31
31
|
'content-commercial',
|
|
32
32
|
'content-premium',
|
|
33
|
+
|
|
33
34
|
'lifecycle-beta',
|
|
35
|
+
|
|
34
36
|
'support-active',
|
|
35
37
|
'support-dead',
|
|
36
38
|
'support-deprecated',
|
|
37
39
|
'support-experimental',
|
|
38
40
|
'support-maintained',
|
|
41
|
+
|
|
39
42
|
'tier-bronze',
|
|
40
43
|
'tier-gold',
|
|
41
44
|
'tier-platinum',
|
|
42
|
-
'tier-silver'
|
|
45
|
+
'tier-silver',
|
|
46
|
+
|
|
47
|
+
'oxford',
|
|
48
|
+
'teal',
|
|
49
|
+
'lemon',
|
|
50
|
+
'slate',
|
|
51
|
+
'jade',
|
|
52
|
+
'crimson',
|
|
53
|
+
'mandarin'
|
|
43
54
|
);
|
|
44
55
|
|
|
45
56
|
/// Indicator label states
|
|
@@ -54,11 +65,6 @@ $_o-labels-indicator-status: (
|
|
|
54
65
|
'updated'
|
|
55
66
|
);
|
|
56
67
|
|
|
57
|
-
/// The width/height of the circle used in the indicator label.
|
|
58
|
-
/// @type Number
|
|
59
|
-
/// @access private
|
|
60
|
-
$_o-labels-indicator-circle-size-calc: #{(4/12)}em #{'+'} 6px; // 10px given 12px font size, 12px given 18px font size
|
|
61
|
-
|
|
62
68
|
/// Whether or not the animation keyframes for the live indicator
|
|
63
69
|
/// label has already been output.
|
|
64
70
|
/// @type Boolean
|
package/origami.json
CHANGED
|
@@ -76,6 +76,16 @@
|
|
|
76
76
|
"internal"
|
|
77
77
|
]
|
|
78
78
|
},
|
|
79
|
+
{
|
|
80
|
+
"name": "palette-states",
|
|
81
|
+
"title": "Colour Palette States",
|
|
82
|
+
"description": "Colour palette based states do not specify a particular usecase, and may be used flexibility.",
|
|
83
|
+
"template": "/demos/src/states.mustache",
|
|
84
|
+
"data": "demos/src/data/color-palette-states.json",
|
|
85
|
+
"brands": [
|
|
86
|
+
"internal"
|
|
87
|
+
]
|
|
88
|
+
},
|
|
79
89
|
{
|
|
80
90
|
"name": "typography",
|
|
81
91
|
"title": "Typography",
|
|
@@ -102,6 +112,15 @@
|
|
|
102
112
|
],
|
|
103
113
|
"template": "/demos/src/indicators.mustache"
|
|
104
114
|
},
|
|
115
|
+
{
|
|
116
|
+
"name": "indicators-sizes",
|
|
117
|
+
"title": "Indicator Sizes",
|
|
118
|
+
"description": "All indicator labels adapt to the set font size. This demo shows using custom CSS to set the font size of indicator labels.",
|
|
119
|
+
"brands": [
|
|
120
|
+
"master"
|
|
121
|
+
],
|
|
122
|
+
"template": "/demos/src/indicators-sizes.mustache"
|
|
123
|
+
},
|
|
105
124
|
{
|
|
106
125
|
"name": "timestamp",
|
|
107
126
|
"title": "Timestamp",
|
package/package.json
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"ft"
|
|
14
14
|
],
|
|
15
15
|
"name": "@financial-times/o-labels",
|
|
16
|
-
"version": "5.
|
|
16
|
+
"version": "5.3.0",
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@financial-times/o-colors": "^5.0.0",
|
|
19
19
|
"@financial-times/o-typography": "^6.0.0",
|
|
@@ -22,13 +22,16 @@
|
|
|
22
22
|
"@financial-times/o-editorial-typography": "^1.0.10"
|
|
23
23
|
},
|
|
24
24
|
"component": "o-labels",
|
|
25
|
-
"scripts": {
|
|
25
|
+
"scripts": {
|
|
26
|
+
"start": "npx serve ./demos/local",
|
|
27
|
+
"build": "npm_config_yes=true npx \"origami-build-tools@^10\" install && npm_config_yes=true npx \"origami-build-tools@^10\" demo"
|
|
28
|
+
},
|
|
26
29
|
"devDependencies": {
|
|
27
30
|
"eslint": "^7.8.1",
|
|
28
31
|
"eslint-config-origami-component": "^2.1.0",
|
|
29
32
|
"origami-ci-tools": "^2.0.2",
|
|
30
|
-
"remark": "^
|
|
31
|
-
"remark-lint": "^
|
|
33
|
+
"remark": "^13.0.0",
|
|
34
|
+
"remark-lint": "^8.0.0",
|
|
32
35
|
"remark-preset-lint-origami-component": "^1.1.3",
|
|
33
36
|
"stylelint": "^13.7.0",
|
|
34
37
|
"stylelint-config-origami-component": "^1.0.4"
|
package/src/scss/_brand.scss
CHANGED
|
@@ -102,6 +102,27 @@ $_o-labels-shared-brand-config: (
|
|
|
102
102
|
// component needs to use these colours
|
|
103
103
|
background-color: #c0c0c0
|
|
104
104
|
),
|
|
105
|
+
'oxford': (
|
|
106
|
+
background-color: oColorsByName('oxford')
|
|
107
|
+
),
|
|
108
|
+
'teal': (
|
|
109
|
+
background-color: oColorsByName('teal')
|
|
110
|
+
),
|
|
111
|
+
'lemon': (
|
|
112
|
+
background-color: oColorsByName('lemon')
|
|
113
|
+
),
|
|
114
|
+
'slate': (
|
|
115
|
+
background-color: oColorsByName('slate')
|
|
116
|
+
),
|
|
117
|
+
'jade': (
|
|
118
|
+
background-color: oColorsByName('jade')
|
|
119
|
+
),
|
|
120
|
+
'crimson': (
|
|
121
|
+
background-color: oColorsByName('crimson')
|
|
122
|
+
),
|
|
123
|
+
'mandarin': (
|
|
124
|
+
background-color: oColorsByName('mandarin')
|
|
125
|
+
)
|
|
105
126
|
)),
|
|
106
127
|
'supports-variants': (
|
|
107
128
|
'big',
|
|
@@ -114,7 +135,14 @@ $_o-labels-shared-brand-config: (
|
|
|
114
135
|
'tier-bronze',
|
|
115
136
|
'tier-gold',
|
|
116
137
|
'tier-platinum',
|
|
117
|
-
'tier-silver'
|
|
138
|
+
'tier-silver',
|
|
139
|
+
'oxford',
|
|
140
|
+
'teal',
|
|
141
|
+
'lemon',
|
|
142
|
+
'slate',
|
|
143
|
+
'jade',
|
|
144
|
+
'crimson',
|
|
145
|
+
'mandarin'
|
|
118
146
|
)
|
|
119
147
|
));
|
|
120
148
|
}
|
package/src/scss/_mixins.scss
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
box-sizing: border-box;
|
|
17
17
|
margin: 0;
|
|
18
18
|
text-decoration: none;
|
|
19
|
-
padding: (_oLabelsGet('padding-vertical') - _oLabelsGet('border-width')) (_oLabelsGet('padding-horizontal') - _oLabelsGet('border-width'));
|
|
19
|
+
padding: calc(#{_oLabelsGet('padding-vertical')} - #{_oLabelsGet('border-width')}) calc(#{_oLabelsGet('padding-horizontal')} - #{_oLabelsGet('border-width')});
|
|
20
20
|
color: _oLabelsGet('text-color');
|
|
21
21
|
background-color: _oLabelsGet('background-color');
|
|
22
22
|
border: solid _oLabelsGet('border-width') transparent;
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
@if $scale {
|
|
176
176
|
@include oTypographySans($scale, $line-height: 1, $include-font-family: false);
|
|
177
177
|
}
|
|
178
|
-
padding: (_oLabelsGet('padding-vertical', $size) - _oLabelsGet('border-width')) (_oLabelsGet('padding-horizontal', $size) - _oLabelsGet('border-width'));
|
|
178
|
+
padding: calc(#{_oLabelsGet('padding-vertical', $size)} - #{_oLabelsGet('border-width')}) calc(#{_oLabelsGet('padding-horizontal', $size)} - #{_oLabelsGet('border-width')});
|
|
179
179
|
}
|
|
180
180
|
|
|
181
181
|
/// Styles for a state.
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
|
|
196
196
|
// Set the spacing
|
|
197
197
|
@if _oLabelsGet('padding-vertical', $variant) and _oLabelsGet('padding-horizontal', $variant) {
|
|
198
|
-
padding: (_oLabelsGet('padding-vertical', $variant) - _oLabelsGet('border-width')) (_oLabelsGet('padding-horizontal', $variant) - _oLabelsGet('border-width'));
|
|
198
|
+
padding: calc(#{_oLabelsGet('padding-vertical', $variant)} - #{_oLabelsGet('border-width')}) calc(#{_oLabelsGet('padding-horizontal', $variant)} - #{_oLabelsGet('border-width')});
|
|
199
199
|
}
|
|
200
200
|
}
|
|
201
201
|
|
|
@@ -219,16 +219,8 @@
|
|
|
219
219
|
@extend %_o-labels-timestamp-typography;
|
|
220
220
|
|
|
221
221
|
@if($status == 'live') {
|
|
222
|
-
& > %_o-labels-indicator__status:
|
|
223
|
-
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
& > %_o-labels-indicator__status:after {
|
|
227
|
-
margin-right: calc((#{$_o-labels-indicator-circle-size-calc}) * -1);
|
|
228
|
-
opacity: 0.2;
|
|
229
|
-
transform: scale(1.5);
|
|
230
|
-
animation: _o-labels-live-pulse 1.7s ease infinite;
|
|
231
|
-
order: -1;
|
|
222
|
+
& > %_o-labels-indicator__status:before {
|
|
223
|
+
animation: _o-labels-live-pulse 1.2s ease-in-out infinite;
|
|
232
224
|
// Prevent animation of the live label if the reader has indicated
|
|
233
225
|
// that they prefer reduced motion. This may be conservative but
|
|
234
226
|
// as the live indicator is presented alongside content (including
|
|
@@ -245,13 +237,16 @@
|
|
|
245
237
|
$_o-labels-indicator-live-pulse-output: true !global;
|
|
246
238
|
@keyframes _o-labels-live-pulse {
|
|
247
239
|
0% {
|
|
248
|
-
|
|
240
|
+
opacity: 1;
|
|
241
|
+
}
|
|
242
|
+
30% {
|
|
243
|
+
opacity: 0.4;
|
|
249
244
|
}
|
|
250
|
-
|
|
251
|
-
|
|
245
|
+
70% {
|
|
246
|
+
opacity: 0.4;
|
|
252
247
|
}
|
|
253
248
|
100% {
|
|
254
|
-
|
|
249
|
+
opacity: 1;
|
|
255
250
|
}
|
|
256
251
|
}
|
|
257
252
|
}
|
|
@@ -26,19 +26,6 @@ $_o-labels-first-import: true !default;
|
|
|
26
26
|
color: oColorsByName('black-60');
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
%_o-labels-indicator-circle {
|
|
30
|
-
content: '';
|
|
31
|
-
position: relative;
|
|
32
|
-
left: 0;
|
|
33
|
-
width: calc(#{$_o-labels-indicator-circle-size-calc});
|
|
34
|
-
height: calc(#{$_o-labels-indicator-circle-size-calc});
|
|
35
|
-
margin-right: 5px;
|
|
36
|
-
border-radius: 50%;
|
|
37
|
-
background-color: currentcolor;
|
|
38
|
-
display: inline-block;
|
|
39
|
-
align-self: center;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
29
|
// timestamp block placeholders
|
|
43
30
|
%_o-labels-timestamp {
|
|
44
31
|
@extend %_o-labels-timestamp-typography;
|
|
@@ -55,15 +42,23 @@ $_o-labels-first-import: true !default;
|
|
|
55
42
|
// indicator block placeholders
|
|
56
43
|
%_o-labels-indicator {
|
|
57
44
|
@extend %_o-labels-indicator-size;
|
|
58
|
-
position: relative;
|
|
59
45
|
display: inline-block;
|
|
60
46
|
}
|
|
61
47
|
|
|
62
48
|
%_o-labels-indicator__status {
|
|
63
|
-
display: inline-flex;
|
|
64
|
-
align-items: baseline;
|
|
65
49
|
&:before {
|
|
66
|
-
|
|
50
|
+
content: '';
|
|
51
|
+
width: calc(0.5em + 4px);
|
|
52
|
+
height: calc(0.5em + 4px);
|
|
53
|
+
min-width: 10px;
|
|
54
|
+
min-height: 10px;
|
|
55
|
+
margin-right: 2px;
|
|
56
|
+
border-radius: 50%;
|
|
57
|
+
background-color: currentcolor;
|
|
58
|
+
display: inline-block;
|
|
59
|
+
vertical-align: baseline;
|
|
60
|
+
// align better with MetricWeb
|
|
61
|
+
margin-bottom: -1px;
|
|
67
62
|
}
|
|
68
63
|
}
|
|
69
64
|
}
|
package/src/scss/_variables.scss
CHANGED
|
@@ -30,16 +30,27 @@ $_o-labels-standard-sizes: (
|
|
|
30
30
|
$_o-labels-standard-states: (
|
|
31
31
|
'content-commercial',
|
|
32
32
|
'content-premium',
|
|
33
|
+
|
|
33
34
|
'lifecycle-beta',
|
|
35
|
+
|
|
34
36
|
'support-active',
|
|
35
37
|
'support-dead',
|
|
36
38
|
'support-deprecated',
|
|
37
39
|
'support-experimental',
|
|
38
40
|
'support-maintained',
|
|
41
|
+
|
|
39
42
|
'tier-bronze',
|
|
40
43
|
'tier-gold',
|
|
41
44
|
'tier-platinum',
|
|
42
|
-
'tier-silver'
|
|
45
|
+
'tier-silver',
|
|
46
|
+
|
|
47
|
+
'oxford',
|
|
48
|
+
'teal',
|
|
49
|
+
'lemon',
|
|
50
|
+
'slate',
|
|
51
|
+
'jade',
|
|
52
|
+
'crimson',
|
|
53
|
+
'mandarin'
|
|
43
54
|
);
|
|
44
55
|
|
|
45
56
|
/// Indicator label states
|
|
@@ -54,11 +65,6 @@ $_o-labels-indicator-status: (
|
|
|
54
65
|
'updated'
|
|
55
66
|
);
|
|
56
67
|
|
|
57
|
-
/// The width/height of the circle used in the indicator label.
|
|
58
|
-
/// @type Number
|
|
59
|
-
/// @access private
|
|
60
|
-
$_o-labels-indicator-circle-size-calc: #{(4/12)}em #{'+'} 6px; // 10px given 12px font size, 12px given 18px font size
|
|
61
|
-
|
|
62
68
|
/// Whether or not the animation keyframes for the live indicator
|
|
63
69
|
/// label has already been output.
|
|
64
70
|
/// @type Boolean
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
name: automerge
|
|
2
|
-
on:
|
|
3
|
-
pull_request:
|
|
4
|
-
types:
|
|
5
|
-
- labeled
|
|
6
|
-
- unlabeled
|
|
7
|
-
- synchronize
|
|
8
|
-
- opened
|
|
9
|
-
- edited
|
|
10
|
-
- ready_for_review
|
|
11
|
-
- reopened
|
|
12
|
-
- unlocked
|
|
13
|
-
pull_request_review:
|
|
14
|
-
types:
|
|
15
|
-
- submitted
|
|
16
|
-
check_suite:
|
|
17
|
-
types:
|
|
18
|
-
- completed
|
|
19
|
-
status: {}
|
|
20
|
-
jobs:
|
|
21
|
-
automerge:
|
|
22
|
-
runs-on: ubuntu-latest
|
|
23
|
-
if: github.actor == 'dependabot[bot]' || github.actor == 'dependabot-preview[bot]'
|
|
24
|
-
timeout-minutes: 120
|
|
25
|
-
steps:
|
|
26
|
-
- name: 'Wait for status checks'
|
|
27
|
-
id: waitforstatuschecks
|
|
28
|
-
uses: "WyriHaximus/github-action-wait-for-status@v1.2"
|
|
29
|
-
with:
|
|
30
|
-
ignoreActions: automerge
|
|
31
|
-
checkInterval: 13
|
|
32
|
-
env:
|
|
33
|
-
GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
|
|
34
|
-
- name: automerge
|
|
35
|
-
uses: "pascalgn/automerge-action@v0.12.0"
|
|
36
|
-
env:
|
|
37
|
-
GITHUB_TOKEN: "${{ secrets.ORIGAMI_GITHUB_TOKEN }}"
|
|
38
|
-
MERGE_LABELS: "dependencies"
|
|
39
|
-
MERGE_METHOD: "rebase"
|
|
40
|
-
MERGE_FORKS: "false"
|