Skip to content

Commit 8680e9f

Browse files
GaryJonesGaryJones
authored
Merge pull request #736 from Automattic/refactor/scss-use-forward-syntax
2 parents c2fc795 + 404765a commit 8680e9f

37 files changed

+424
-490
lines changed

‎assets/amp-rtl.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/amp.asset.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<?php return array('dependencies' => array(), 'version' => '5db12918ec532f072ef8');
1+
<?php return array('dependencies' => array(), 'version' => '3f962100a8f25a826441');

‎assets/amp.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/app-rtl.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/app.asset.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<?php return array('dependencies' => array('lodash', 'moment', 'react', 'react-dom', 'react-jsx-runtime'), 'version' => 'e0738d7ee057bf94c72f');
1+
<?php return array('dependencies' => array('lodash', 'moment', 'react', 'react-dom', 'react-jsx-runtime'), 'version' => '0b5b11c521b6d33b1979');

‎assets/app.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/styles/amp.scss‎

Lines changed: 6 additions & 234 deletions
Original file line numberDiff line numberDiff line change
@@ -1,237 +1,9 @@
1-
@use "sass:color";
2-
@use "core/utils/mq";
3-
41
// Utils
5-
@import "core/utils/defaults";
6-
@import "core/utils/colors";
7-
// Core Styles
8-
@import "core/utils/animations";
9-
@import "core/app/all";
10-
@import "core/editor/amp-required";
11-
12-
/**
13-
* Entries
14-
*/
15-
.liveblog-entry {
16-
display: flex;
17-
background: $color-grey-x-light;
18-
border-top: 2px solid $color-grey-mid-light;
19-
border-bottom: 2px solid $color-grey-mid-light;
20-
padding: 1em;
21-
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
22-
23-
@include mq.mq($until: medium) {
24-
font-size: 14px;
25-
}
26-
}
27-
28-
.liveblog-entry-main .liveblog-entry-content p {
29-
margin: 16px 0;
30-
}
31-
32-
.liveblog-entry a,
33-
.liveblog-entry a:visited {
34-
color: $color-grey-dark;
35-
}
36-
37-
.liveblog-entry-main {
38-
flex-grow: 1;
39-
}
40-
41-
.liveblog-entry.is-key-event {
42-
border-top: 2px solid $color-grey-x-dark;
43-
}
44-
45-
.liveblog-entry-edit {
46-
margin-left: 60px;
47-
48-
@include mq.mq($until: medium) {
49-
margin-left: 0;
50-
}
51-
}
52-
53-
.liveblog-entry-content {
54-
padding-top: 10px;
55-
}
56-
57-
.liveblog-meta {
58-
color: $color-grey-base;
59-
}
60-
61-
.liveblog-entry-aside {
62-
flex-basis: 70px;
63-
min-width: 70px;
64-
margin-right: 10px;
65-
}
66-
67-
.liveblog-meta-time {
68-
flex-basis: 60px;
69-
text-decoration: none;
70-
}
71-
72-
.entry-content .liveblog-meta-time,
73-
.entry-content .liveblog-meta-time:hover,
74-
.entry-content .liveblog-meta-time:focus {
75-
-webkit-box-shadow: none;
76-
box-shadow: none;
77-
}
78-
79-
.liveblog-meta-time span {
80-
font-size: 10px;
81-
line-height: 12px;
82-
}
83-
84-
.liveblog-meta-time span:first-child {
85-
font-weight: 600;
86-
color: $color-grey-dark;
87-
margin-bottom: 5px;
88-
}
89-
90-
.liveblog-meta-author-name {
91-
font-size: 13px;
92-
margin-left: 8px;
93-
}
94-
95-
.liveblog-meta-author-avatar {
96-
border-radius: 50%;
97-
overflow: hidden;
98-
width: 30px;
99-
height: 30px;
100-
}
101-
102-
.liveblog-entry-tools {
103-
margin-left: 60px;
2+
@use "core/utils" as *;
1043

105-
@include mq.mq($until: medium) {
106-
margin-left: 0;
107-
}
108-
}
109-
110-
.liveblog-hash {
111-
color: $color-primary;
112-
}
113-
114-
/**
115-
* Events
116-
*/
117-
.liveblog-event {
118-
padding-bottom: 1rem;
119-
padding-left: 1rem;
120-
}
121-
122-
.liveblog-event::before,
123-
.liveblog-event:only-child::before {
124-
content: "";
125-
position: absolute;
126-
z-index: 1;
127-
left: -4.5px;
128-
width: 10px;
129-
height: 10px;
130-
background: $color-grey-light;
131-
border-radius: 50%;
132-
transition: background 0.3s ease-in-out;
133-
}
134-
135-
.liveblog-event::after {
136-
content: "";
137-
position: absolute;
138-
z-index: 0;
139-
left: 0;
140-
height: 100%;
141-
width: 1px;
142-
background: $color-grey-light;
143-
}
144-
145-
.liveblog-event::before,
146-
.liveblog-event::after {
147-
top: 10px;
148-
}
149-
150-
.liveblog-event:only-child::after {
151-
display: none;
152-
}
153-
154-
.liveblog-event:not(:only-child):first-child::before,
155-
.liveblog-event:not(:only-child):last-child::before {
156-
height: 1px;
157-
border-radius: 0%;
158-
}
159-
160-
.liveblog-event:not(:only-child):last-child::after {
161-
display: none;
162-
}
163-
164-
.liveblog-event:hover::before {
165-
background: $color-grey-dark;
166-
transition: background 0.3s ease-in-out;
167-
}
168-
169-
.liveblog-event-content {
170-
margin-top: 5px;
171-
font-weight: 600;
172-
font-size: 14px;
173-
}
174-
175-
/**
176-
* Pagination
177-
*/
178-
.liveblog-pagination-first,
179-
.liveblog-pagination-last {
180-
background: $color-grey-mid-light;
181-
color: $color-grey-x-dark;
182-
}
183-
184-
.liveblog-pagination-pages {
185-
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
186-
}
187-
188-
.liveblog-pagination-btn,
189-
.ampstart-btn {
190-
background-color: $color-grey-x-dark;
191-
border: 0;
192-
border-radius: 2px;
193-
box-shadow: none;
194-
color: #fff;
195-
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
196-
cursor: pointer;
197-
display: inline-block;
198-
font-size: 14px;
199-
line-height: 1;
200-
padding: 0.5rem 1rem;
201-
202-
&:hover {
203-
color: #fff;
204-
background: $color-grey-dark;
205-
}
206-
207-
&:visited {
208-
color: #fff;
209-
}
210-
}
211-
212-
.ampstart-btn {
213-
color: #fff;
214-
background: $color-primary;
215-
font-size: 16px;
216-
border-radius: 50px;
217-
margin-left: auto;
218-
margin-right: auto;
219-
margin-bottom: 15px;
220-
221-
&:hover {
222-
background: color.adjust($color-primary, $lightness: 10%);
223-
}
224-
}
225-
226-
.live-list .ampstart-btn {
227-
display: none;
228-
}
4+
// Core Styles
5+
@use "core/app/all";
6+
@use "core/editor/amp-required";
2297

230-
/**
231-
* Embeds
232-
*/
233-
.liveblog-entry amp-youtube,
234-
.liveblog-entry amp-instagram,
235-
.liveblog-entry amp-vine {
236-
margin: 0 0 1.5em;
237-
}
8+
// AMP-specific styles
9+
@use "core/app/amp";

‎src/styles/core.scss‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
// Utils
2-
@use "core/utils/mq";
3-
@import "core/utils/defaults";
4-
@import "core/utils/colors";
2+
@use "core/utils" as *;
53
// Core Styles
6-
@import "core/utils/animations";
7-
@import "core/app/all";
8-
@import "core/editor/all";
4+
@use "core/app/all" as app;
5+
@use "core/editor/all" as editor;

‎src/styles/core/app/_all.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
@import "./buttons";
2-
@import "./feed";
3-
@import "./events";
4-
@import "./event";
5-
@import "./pagination";
6-
@import "./entry";
1+
@forward "./buttons";
2+
@forward "./feed";
3+
@forward "./key-events";
4+
@forward "./event-item";
5+
@forward "./pagination";
6+
@forward "./entry";
77

‎src/styles/core/app/_amp.scss‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
@use "sass:color";
2+
@use "../utils" as *;
3+
@use "theme-shared";
4+
5+
/**
6+
* AMP-specific entry styles
7+
* Additional styles on top of shared base
8+
*/
9+
.liveblog-entry {
10+
display: flex;
11+
padding: 1em;
12+
font-family: $font-family-base;
13+
14+
@include mq($until: medium) {
15+
font-size: 14px;
16+
}
17+
}
18+
19+
.liveblog-entry-main .liveblog-entry-content p {
20+
margin: 16px 0;
21+
}
22+
23+
.liveblog-entry a,
24+
.liveblog-entry a:visited {
25+
color: $color-grey-dark;
26+
}
27+
28+
.liveblog-entry-main {
29+
flex-grow: 1;
30+
}
31+
32+
.liveblog-entry-aside {
33+
flex-basis: 70px;
34+
min-width: 70px;
35+
margin-right: 10px;
36+
}
37+
38+
.liveblog-meta-time {
39+
text-decoration: none;
40+
}
41+
42+
.entry-content .liveblog-meta-time,
43+
.entry-content .liveblog-meta-time:hover,
44+
.entry-content .liveblog-meta-time:focus {
45+
-webkit-box-shadow: none;
46+
box-shadow: none;
47+
}
48+
49+
/**
50+
* AMP-specific pagination styles
51+
*/
52+
.liveblog-pagination-pages {
53+
font-family: $font-family-base;
54+
}
55+
56+
.liveblog-pagination-btn,
57+
.ampstart-btn {
58+
background-color: $color-grey-x-dark;
59+
border: 0;
60+
border-radius: 2px;
61+
box-shadow: none;
62+
color: #fff;
63+
font-family: $font-family-base;
64+
cursor: pointer;
65+
display: inline-block;
66+
font-size: 14px;
67+
line-height: 1;
68+
padding: 0.5rem 1rem;
69+
70+
&:hover {
71+
color: #fff;
72+
background: $color-grey-dark;
73+
}
74+
75+
&:visited {
76+
color: #fff;
77+
}
78+
}
79+
80+
.ampstart-btn {
81+
color: #fff;
82+
background: $color-primary;
83+
font-size: 16px;
84+
border-radius: 50px;
85+
margin-left: auto;
86+
margin-right: auto;
87+
margin-bottom: 15px;
88+
89+
&:hover {
90+
background: color.adjust($raw-color-primary, $lightness: 10%);
91+
}
92+
}
93+
94+
.live-list .ampstart-btn {
95+
display: none;
96+
}
97+
98+
/**
99+
* AMP-specific embed styles
100+
*/
101+
.liveblog-entry amp-youtube,
102+
.liveblog-entry amp-instagram,
103+
.liveblog-entry amp-vine {
104+
margin: 0 0 1.5em;
105+
}

0 commit comments

Comments
 (0)