Skip to content

Commit 23fb390

Browse files
ststimacststimac
committed
Style Categories LP and add individual rule LP
1 parent eb770ac commit 23fb390

File tree

6 files changed

+165
-57
lines changed

6 files changed

+165
-57
lines changed

‎src/sonarwhal-theme/layout/docs.hbs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<link rel="stylesheet" href="/core/css/tables-lists.css">
1919
<link rel="stylesheet" href="/components/treeview/treeview.css">
2020
<link rel="stylesheet" href="/components/anchor-top/anchor-top.css">
21+
<link rel="stylesheet" href="/components/placement/placement.css">
2122
<link rel="stylesheet" href="/core/css/documentation.css">
2223
<!-- endbuild -->
2324
</head>

‎src/sonarwhal-theme/layout/partials/rule-category.hbs

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div class="subtitle category-description">
2+
<p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. </p>
3+
</div>
4+
<div class="layout layout--thirds">
5+
<div class="module">
6+
<ul>
7+
<li><a href="rule-axe/"><code>axe</code></a></li>
8+
<li><a href="rule-meta-charset-utf-8/"><code>meta-charset-utf-8</code></a></li>
9+
</ul>
10+
</div>
11+
</div>

‎src/sonarwhal-theme/layout/partials/rules-index.hbs

Lines changed: 49 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,56 @@
1-
<div class="module module--primary">
2-
<div class="layout layout--thirds">
3-
<div class="module placement">
4-
<p class="title">Accessibility</p>
5-
<p class="base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor
6-
sit amet lacus accumsan et viverra justo commodo.</p>
7-
<div class="placement--rules">
8-
<p class="subtitle">2 Rules</p>
9-
<a class="button button--cta" href="#">View All</a>
10-
</div>
1+
<div class="layout layout--halves">
2+
<div class="module placement">
3+
<p class="title icon--categories icon--a11y">Accessibility</p>
4+
<p class="placement__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor
5+
sit amet lacus accumsan et viverra justo commodo.</p>
6+
<div class="placement__rules">
7+
<p class="subtitle--alt">2 Rules</p>
8+
<a class="button--alt placement__button" href="#">View All</a>
119
</div>
12-
<div class="module placement">
13-
<p class="title">Development</p>
14-
<p class="base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor
15-
sit amet lacus accumsan et viverra justo commodo.</p>
16-
<div class="placement--rules">
17-
<p class="subtitle">2 Rules</p>
18-
<a class="button button--cta" href="#">View All</a>
19-
</div>
10+
</div>
11+
<div class="module placement">
12+
<p class="title icon--categories icon--dev">Development</p>
13+
<p class="placement__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor
14+
sit amet lacus accumsan et viverra justo commodo.</p>
15+
<div class="placement__rules">
16+
<p class="subtitle--alt">2 Rules</p>
17+
<a class="button--alt placement__button" href="#">View All</a>
2018
</div>
21-
<div class="module placement">
22-
<p class="title">Interoperability</p>
23-
<p class="base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor
24-
sit amet lacus accumsan et viverra justo commodo.</p>
25-
<div class="placement--rules">
26-
<p class="subtitle">2 Rules</p>
27-
<a class="button button--cta" href="#">View All</a>
28-
</div>
19+
</div>
20+
<div class="module placement">
21+
<p class="title icon--categories icon--interop">Interoperability</p>
22+
<p class="placement__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor
23+
sit amet lacus accumsan et viverra justo commodo.</p>
24+
<div class="placement__rules">
25+
<p class="subtitle--alt">2 Rules</p>
26+
<a class="button--alt placement__button" href="#">View All</a>
2927
</div>
30-
<div class="module placement">
31-
<p class="title">Performance</p>
32-
<p class="base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor
33-
sit amet lacus accumsan et viverra justo commodo.</p>
34-
<div class="placement--rules">
35-
<p class="subtitle">2 Rules</p>
36-
<a class="button button--cta" href="#">View All</a>
37-
</div>
28+
</div>
29+
<div class="module placement">
30+
<p class="title icon--categories icon--perf">Performance</p>
31+
<p class="placement__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor
32+
sit amet lacus accumsan et viverra justo commodo.</p>
33+
<div class="placement__rules">
34+
<p class="subtitle--alt">2 Rules</p>
35+
<a class="button--alt placement__button" href="#">View All</a>
3836
</div>
39-
<div class="module placement">
40-
<p class="title">PWAs</p>
41-
<p class="base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor
42-
sit amet lacus accumsan et viverra justo commodo.</p>
43-
<div class="placement--rules">
44-
<p class="subtitle">2 Rules</p>
45-
<a class="button button--cta" href="#">View All</a>
46-
</div>
37+
</div>
38+
<div class="module placement">
39+
<p class="title icon--categories icon--pwa">PWAs</p>
40+
<p class="placement__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor
41+
sit amet lacus accumsan et viverra justo commodo.</p>
42+
<div class="placement__rules">
43+
<p class="subtitle--alt">2 Rules</p>
44+
<a class="button--alt placement__button" href="#">View All</a>
4745
</div>
48-
<div class="module placement">
49-
<p class="title">Security</p>
50-
<p class="base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor
51-
sit amet lacus accumsan et viverra justo commodo.</p>
52-
<div class="placement--rules">
53-
<p class="subtitle">2 Rules</p>
54-
<a class="button button--cta" href="#">View All</a>
55-
</div>
46+
</div>
47+
<div class="module placement">
48+
<p class="title icon--categories icon--security">Security</p>
49+
<p class="placement__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor
50+
sit amet lacus accumsan et viverra justo commodo.</p>
51+
<div class="placement__rules">
52+
<p class="subtitle--alt">2 Rules</p>
53+
<a class="button--alt placement__button" href="#">View All</a>
5654
</div>
5755
</div>
58-
</div>
56+
</div>

‎src/sonarwhal-theme/source/components/placement/placement.css

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
2+
/*
3+
* PLACEMENT
4+
* =============================================
5+
* @Dependencies: base.css, color.css, controls.css,
6+
* layouts.css, structure.css, type.css
7+
*/
8+
9+
.placement {
10+
position: relative;
11+
}
12+
13+
.placement__title {
14+
margin-top: 1.2rem;
15+
font-weight: 700;
16+
}
17+
18+
.placement:hover .placement__title {
19+
text-decoration: underline;
20+
}
21+
22+
.placement__text {
23+
margin-top: .4rem;
24+
}
25+
26+
.placement .button--cta {
27+
padding-left: 0;
28+
text-align: left;
29+
}
30+
31+
.placement .button--cta,
32+
.placement .button--cta:hover,
33+
.placement .button--cta:active {
34+
background: transparent;
35+
border: 0;
36+
color: #0078d7;
37+
}
38+
39+
.placement .button--cta:hover {
40+
text-decoration: underline;
41+
}
42+
43+
.placement .button--cta::before {
44+
position: absolute;
45+
top: 0;
46+
right: 0;
47+
bottom: 0;
48+
left: 0;
49+
content: "";
50+
}

‎src/sonarwhal-theme/source/core/css/documentation.css

Lines changed: 53 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -130,27 +130,38 @@ a > .documentation-card__main > img {
130130
/* RULES LANDING PAGE */
131131

132132
.icon--a11y::before {
133-
content: url("images/results-a11y.svg");
133+
content: url("/images/results-a11y.svg");
134+
width: 3.5rem;
134135
}
135136

136137
.icon--dev::before {
137-
content: url("images/results-a11y.svg");
138+
content: url("/images/results-a11y.svg");
139+
width: 3.5rem;
138140
}
139141

140142
.icon--interop::before {
141-
content: url("images/results-interop.svg");
143+
content: url("/images/results-interop.svg");
144+
width: 3.5rem;
142145
}
143146

144147
.icon--perf::before {
145-
content: url("images/results-perf.svg");
148+
content: url("/images/results-perf.svg");
149+
width: 3.5rem;
146150
}
147151

148152
.icon--pwa::before {
149-
content: url("images/results-pwa.svg");
153+
content: url("/images/results-pwa.svg");
154+
width: 3.5rem;
150155
}
151156

152157
.icon--security::before {
153-
content: url("images/results-security.svg");
158+
content: url("/images/results-security.svg");
159+
width: 3.5rem;
160+
}
161+
162+
.icon--categories {
163+
position: relative;
164+
padding-left: 5rem;
154165
}
155166

156167
.icon--categories::before {
@@ -159,4 +170,40 @@ a > .documentation-card__main > img {
159170
top: 0;
160171
left: 0;
161172
line-height: 1;
173+
}
174+
175+
.placement__body {
176+
font-size: 1.6rem;
177+
margin-top: 1.2rem;
178+
line-height: 2.4rem;
179+
}
180+
181+
.placement__rules {
182+
display: flex;
183+
align-items: baseline;
184+
justify-content: space-between;
185+
margin-top: 1.2rem;
186+
padding-bottom: 1.2rem;
187+
color: #4046dd;
188+
border-bottom: 1px solid #e6e6e6;
189+
}
190+
191+
.placement__button {
192+
min-width: 3rem;
193+
font-size: 1.6rem;
194+
}
195+
196+
.placement__button::after {
197+
display: inline-block;
198+
content: url(/static/images/next-arrow.svg);
199+
margin-left: .8rem;
200+
margin-top: .3rem;
201+
width: .7rem;
202+
vertical-align: middle;
203+
}
204+
205+
/* INDIVIDUAL CATEGORY PAGES */
206+
207+
.category-description {
208+
margin-bottom: 2.4rem;
162209
}

‎src/sonarwhal-theme/source/core/css/type.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ legend,
4343
.subtitle--alt,
4444
.caption--alt,
4545
.button,
46+
.button--alt,
4647
.scan-heading,
4748
.category,
4849
.rule-list,

0 commit comments

Comments
 (0)