Skip to content

Commit 78c9f37

Browse files
borsbors
committed
Auto merge of #2284 - Turbo87:css-modules, r=locks
Convert more code to use CSS modules see https://github.com/salsify/ember-css-modules r? @locks
2 parents c103ee9 + 82c8a83 commit 78c9f37

33 files changed

+234
-235
lines changed

‎app/components/api-token-row.hbs

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<div class={{if this.api_token.isNew "row create-token" "row"}} data-test-api-token={{this.api_token.id}}>
2-
<div class='name' data-test-name>
1+
<div local-class="row {{if this.api_token.isNew "create-token"}}" data-test-api-token={{this.api_token.id}}>
2+
<div local-class="name" data-test-name>
33
{{#if this.api_token.isNew}}
44
<Input
55
@type="text"
@@ -18,7 +18,7 @@
1818
<div class='spacer'></div>
1919

2020
{{#unless this.api_token.isNew}}
21-
<div class='dates'>
21+
<div local-class='dates'>
2222
<div class='created-at' data-test-created-at>
2323
<span class='small' title={{this.api_token.created_at}}>
2424
Created {{moment-from-now this.api_token.created_at}}
@@ -38,7 +38,7 @@
3838
</div>
3939
{{/unless}}
4040

41-
<div class='actions'>
41+
<div local-class='actions'>
4242
{{#if this.api_token.isNew}}
4343
<button
4444
type="button"
@@ -68,15 +68,15 @@
6868
</div>
6969

7070
{{#if this.serverError}}
71-
<div class='row error' data-test-error>
71+
<div local-class="row error" data-test-error>
7272
<div>
7373
{{ this.serverError }}
7474
</div>
7575
</div>
7676
{{/if}}
7777

7878
{{#if this.api_token.token}}
79-
<div class='row new-token' data-test-token>
79+
<div local-class="row new-token" data-test-token>
8080
<div>
8181
Please record this token somewhere, you cannot retrieve
8282
its value again. For use on the command line you can save it to <code>~/.cargo/credentials</code>

‎app/components/api-token-row.module.scss

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.row {
2+
width: 100%;
3+
border: 1px solid #d5d3cb;
4+
border-bottom-width: 0;
5+
padding: 10px 20px;
6+
display: flex;
7+
align-items: center;
8+
9+
&:last-child { border-bottom-width: 1px; }
10+
}
11+
12+
.create-token {
13+
background-color: $main-bg-dark;
14+
15+
.name {
16+
padding-right: 20px;
17+
margin-right: 0;
18+
19+
input {
20+
width: 100%;
21+
}
22+
}
23+
}
24+
25+
.name {
26+
flex: 1;
27+
margin-right: 0.4em;
28+
font-weight: bold;
29+
}
30+
31+
.dates {
32+
flex: content;
33+
display: flex;
34+
flex-direction: column;
35+
align-items: flex-end;
36+
margin-right: 0.4em;
37+
}
38+
39+
.actions {
40+
display: flex;
41+
align-items: center;
42+
img { margin-left: 10px }
43+
}
44+
45+
.new-token {
46+
border-top-width: 0;
47+
flex-direction: column;
48+
justify-content: stretch;
49+
}
50+
51+
.error {
52+
border-top-width: 0;
53+
font-weight: bold;
54+
color: rgb(216, 0, 41);
55+
padding: 0 10px 10px 20px;
56+
}

‎app/components/crate-row.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class='desc'>
33
<div class='info'>
44
<LinkTo @route="crate" @model={{this.crate.id}} data-test-crate-link>{{ this.crate.name }}</LinkTo>
5-
<CrateTomlCopy @copyText={{this.crateTomlText}} />
5+
<CrateTomlCopy @copyText={{this.crateTomlText}} @inline={{true}} />
66
<CrateBadge @crate={{this.crate}} />
77
{{#each this.crate.annotated_badges as |badge|}}
88
{{#let (component badge.component_name) as |Badge|}}

‎app/components/crate-toml-copy.hbs

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<div class="crate-toml-copy" ...attributes>
1+
<div local-class="crate-toml-copy {{if @inline "inline" "block"}}" ...attributes>
22
<CopyButton @clipboardText={{this.copyText}} @success={{action "copySuccess"}} @error={{action "copyError"}} @title="Copy Cargo.toml snippet to clipboard">
33
{{svg-jar "copy" alt="Copy Cargo.toml snippet to clipboard"}}
4-
<div class="copy-notification {{if this.showSuccess "copy-success" "copy-failure"}}">
4+
<div local-class="copy-notification {{if this.showSuccess "copy-success" "copy-failure"}}">
55
{{#if this.showNotification}}
66
{{#if this.showSuccess}}
77
Copied!
@@ -11,5 +11,4 @@
1111
{{/if}}
1212
</div>
1313
</CopyButton>
14-
1514
</div>

‎app/components/crate-toml-copy.module.scss

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
.crate-toml-copy {
2+
button, button:active {
3+
background-color: #FFFFFF;
4+
border: none;
5+
cursor: pointer;
6+
position: relative;
7+
}
8+
9+
.copy-notification {
10+
font-size: 70%;
11+
font-weight: bold;
12+
position: absolute;
13+
14+
&.copy-success {
15+
color: $link-color;
16+
}
17+
18+
&.copy-failure {
19+
color: red;
20+
}
21+
}
22+
23+
&.inline {
24+
display: inline-block;
25+
26+
button, button:active {
27+
padding: 0 .2rem;
28+
outline: 0;
29+
30+
&:hover {
31+
background: inherit;
32+
}
33+
34+
svg {
35+
height: 1rem;
36+
width: 1rem;
37+
}
38+
39+
.copy-notification {
40+
top: -1.25rem;
41+
left: 0;
42+
padding: 0;
43+
text-align: left;
44+
width: 4rem;
45+
46+
&.copy-failure {
47+
width: 15rem;
48+
}
49+
}
50+
}
51+
}
52+
53+
&.block {
54+
display: flex;
55+
56+
button, button:active {
57+
padding: 5px 0;
58+
width: 60px;
59+
cursor: pointer;
60+
position: relative;
61+
}
62+
63+
button:hover {
64+
background: #edebdd;
65+
}
66+
67+
.copy-notification {
68+
&.copy-success {
69+
width: 100%;
70+
text-align: center;
71+
}
72+
73+
&.copy-failure {
74+
bottom: -2rem;
75+
right: 0;
76+
width: 18rem;
77+
text-align: right;
78+
}
79+
}
80+
}
81+
}

‎app/styles/app.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,9 @@ $link-color: rgb(0, 172, 91);
1212

1313
@import "application";
1414
@import "home";
15-
@import "category-slugs";
1615
@import "categories";
1716
@import "crate";
1817
@import "crate/version";
19-
@import "components/crate-toml-copy";
2018
@import "dashboard";
2119
@import "me";
2220

‎app/styles/category-slugs.scss renamed to ‎app/styles/category-slugs.module.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
#category-slugs {
1+
.list {
2+
composes: white-rows from global;
3+
padding-top: 20px;
4+
margin: 0;
5+
26
dt {
37
margin-bottom: 5px;
48
font-weight: bold;

‎app/styles/components/crate-toml-copy.scss

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎app/styles/crate.scss

Lines changed: 2 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
#crates-heading {
1+
.crates-heading {
22
width: 100%;
33
padding: 20px;
44
background-color: $main-bg-dark;
@@ -26,17 +26,11 @@
2626
flex-direction: column;
2727
}
2828
}
29-
.crate-icon {
30-
// Icon doesn't align nicely with text (which is being
31-
// aligned by their baselines) so manual adjustment needed.
32-
position: relative;
33-
top: 4px;
34-
}
3529
h1 {
3630
padding-left: 10px;
3731
padding-right: 10px;
3832
}
39-
h2 { color: $main-color-light; padding-left: 10px; }
33+
h2, small { color: $main-color-light; padding-left: 10px; }
4034
.right {
4135
flex: 2;
4236
display: flex;
@@ -124,35 +118,6 @@
124118
width: 75%;
125119
}
126120

127-
.crate-toml-copy {
128-
display: inline-block;
129-
130-
button, button:active {
131-
padding: 0 .2rem;
132-
outline: 0;
133-
134-
&:hover {
135-
background: inherit;
136-
}
137-
138-
svg {
139-
height: 1rem;
140-
width: 1rem;
141-
}
142-
143-
.copy-notification {
144-
top: -1.25rem;
145-
left: 0;
146-
padding: 0;
147-
text-align: left;
148-
width: 4rem;
149-
150-
&.copy-failure {
151-
width: 15rem;
152-
}
153-
}
154-
}
155-
}
156121
.info a {
157122
color: $main-color;
158123
font-weight: bold;

‎app/styles/crate/version.module.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.crate-icon {
2+
// Icon doesn't align nicely with text (which is being
3+
// aligned by their baselines) so manual adjustment needed.
4+
position: relative;
5+
top: 4px;
6+
}

‎app/styles/crate/version.scss

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -81,33 +81,6 @@
8181
.action { flex: 2; display: block; }
8282
code { flex: 8; }
8383
}
84-
.crate-toml-copy {
85-
display: flex;
86-
87-
button, button:active {
88-
padding: 5px 0;
89-
width: 60px;
90-
cursor: pointer;
91-
position: relative;
92-
}
93-
button:hover {
94-
background: #edebdd;
95-
}
96-
97-
.copy-notification {
98-
&.copy-success {
99-
width: 100%;
100-
text-align: center;
101-
}
102-
103-
&.copy-failure {
104-
bottom: -2rem;
105-
right: 0;
106-
width: 18rem;
107-
text-align: right;
108-
}
109-
}
110-
}
11184
}
11285
.crate-readme {
11386
line-height: 1.5;

0 commit comments

Comments
 (0)