Skip to content

Commit 5eaf458

Browse files
obulatobulat
committed
Adjust cards styling
Signed-off-by: Olga Bulat <obulat@gmail.com>
1 parent d54f5aa commit 5eaf458

File tree

4 files changed

+76
-150
lines changed

4 files changed

+76
-150
lines changed

‎src/components/LicenseCard.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export default {
4949
</script>
5050
<style lang="scss" scoped>
5151
div.card {
52-
height: 540px;
52+
height: 580px;
5353
border-top: 10px solid #04A635;
5454
}
5555
@media only screen and (max-width: 670px) {

‎src/components/SelectedLicenseCode.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ export default {
124124
</script>
125125
<style lang="scss">
126126
div.license-code {
127-
margin-top: 1rem;
127+
margin-top: 0.4rem;
128128
h2.vocab-h2{
129129
font-family: Roboto Condensed;
130130
font-style: normal;

‎src/components/SelectedLicenseInfo.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,9 @@ export default {
118118
#chooser-selected-description {
119119
margin-top: 2rem;
120120
}
121+
#chooser-selected-description span {
122+
margin-left: -2px;
123+
}
121124
@media only screen and (max-width: 670px) {
122125
p {
123126
font-size: 14px;

‎src/components/Stepper.vue‎

Lines changed: 71 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class='column'>
2+
<div class='column is-three-fifths-tablet is-half-desktop'>
33
<div id="stepper" class="card">
44
<header class="card-header">
55
<h2 :class="'vocab-h2'">{{ $t('select-license-heading') }}</h2>
@@ -170,153 +170,84 @@ export default {
170170
</script>
171171

172172
<style lang="scss">
173+
.card {
174+
height: 580px;
175+
}
173176
div#stepper .card-header {
174177
border-top: 10px solid #05B5DA;
178+
background-color: #05B5DA;
175179
padding-bottom: 1rem;
176180
box-shadow: none;
177181
color:white;
178182
}
179-
div#stepper.card{
180-
height: 540px;
181-
background-color: #05B5DA;
182-
div.card-content{
183-
p.stepper-instructions {
184-
padding-bottom: 1.4rem;
185-
font-size: 0.875em;
186-
opacity: 90%;
187-
}
188-
div.b-steps{
189-
nav.steps {
190-
ul.step-items {
191-
li.step-item {
192-
background-color:#05B5DA;
193-
a.step-link {
194-
div.step-marker {
195-
// This is the element that shows border/ circle
196-
background-color:#05B5DA;
197-
span.icon {
198-
svg {
199-
font-size:2rem;
200-
path {
201-
/*fill: black;*/
202-
}
203-
}
204-
}
205-
}
206-
div.step-details {
207-
padding-top:0.6rem;
208-
span.step-title {
209-
font-size:0.875rem;
210-
line-height:1;
211-
white-space: nowrap;
212-
}
213-
}
214-
}
215-
&.is-active {
216-
a div.step-marker {
217-
background:white!important;
218-
width: 2.6rem;
219-
height: 2.6rem;
220-
left: calc(50% - 1.2rem);
221-
top: -11%;
222-
}
223-
svg {
224-
width:2.3rem!important;
225-
height:2.3rem!important;
226-
path {
227-
/*fill: #ED592F!important;*/
228-
}
229-
}
230-
div.step-details span.step-title {
231-
font-weight: 800;
232-
color: #ED592F;
233-
text-decoration: underline;
234-
}
235-
&.unselected {
236-
a div.step-marker {
237-
/*border-color: #F6AC98;*/
238-
/*border-width: 2px;*/
239-
}
240-
}
241-
}
242-
&.selected {
243-
a.step-link {
244-
div.step-marker {
245-
/*background:white!important;*/
246-
span>svg>path {
247-
opacity: 100%!important;
248-
}
249-
}
250-
}
251-
div.step-details span.step-title {
252-
font-weight: 800;
253-
}
254-
}
255-
&.unselected {
256-
a.step-link {
257-
div.step-marker {
258-
span > svg > path {
259-
/*opacity: 40% !important;*/
260-
}
261-
}
262-
div.step-details span.step-title {
263-
font-weight: 500;
264-
opacity: 60%;
265-
}
266-
}
267-
}
268-
269-
&:nth-child(3) {
270-
.step-marker {
271-
left: calc(50% - 1.3rem);
272-
}
273-
}
274-
}
275-
}
276-
}
277-
section.step-content {
278-
padding-bottom: 0;
279-
height: 280px;
280-
}
281-
nav.step-navigation {
282-
display: flex;
283-
margin: 0 1rem 0.5rem auto;
284-
justify-content: flex-end;
285-
a.pagination-previous {
286-
margin-left: auto;
287-
}
288-
289-
}
290-
}
291-
}
292-
293-
hr {
294-
margin-bottom: 0!important;
295-
border: 1px solid #e0e0e0!important;
183+
.steps {
184+
margin-top: 2.5rem;
185+
margin-bottom: 1rem;
186+
}
187+
#stepper .b-steps .steps.is-small .step-items .step-item .step-details {
188+
padding-top: 0.4em;
189+
}
190+
.step-title {
191+
white-space: nowrap;
192+
}
193+
.step-content {
194+
height: 270px;
195+
}
196+
nav.step-navigation {
197+
margin-top: 0;
198+
}
199+
.steps.is-small .icon svg {
200+
font-size: 2rem!important;
201+
}
202+
div#stepper .b-steps .steps .step-items {
203+
flex-wrap: nowrap;
204+
}
205+
#stepper .b-steps .steps .step-items .step-item .step-marker {
206+
left: 50%;
207+
margin-left: -0.75rem;
208+
}
209+
#stepper .b-steps .steps .step-items .step-item.is-active .step-marker {
210+
height: 2.4rem;
211+
width: 2.4rem;
212+
top: -12%;
213+
background-color: white;
214+
color: #04a635!important;
215+
border-color: #04a635;
216+
left: 50%;
217+
margin-left: -1.2rem;
218+
}
219+
#stepper .b-steps .steps .step-items .step-item.is-step-not_selected .step-title {
220+
font-weight: normal;
221+
opacity: 70%;
222+
}
223+
#stepper .b-steps .steps .step-items .step-item.is-step-selected .step-title {
224+
font-weight: 700;
225+
opacity: 90%;
226+
}
227+
#stepper .b-steps .steps .step-items .step-item.is-step-not_selected.is-active .step-marker {
228+
border-color: #68ca86;
229+
}
230+
#stepper .b-steps .steps .step-items .step-item:not(.is-previous):not(.is-active) .step-marker {
231+
color: #b5b5b5!important;
232+
background-color: white!important;
233+
}
234+
#stepper .b-steps .steps .step-items .step-item.is-step-not_selected:not(.is-active).is-previous .step-marker,
235+
#stepper .b-steps .steps .step-items .step-item.is-step-not_selected.is-active .step-marker {
236+
color: #ed5931;
237+
background-color: white;
238+
svg path {
239+
fill-opacity: 70%;
296240
}
241+
}
297242
298-
li.attributionDetails {
299-
a > div > span > svg {
300-
font-size:1.5rem!important;
301-
border-radius: 50%;
302-
padding:5px;
303-
box-shadow: inset 0 0 0 2px #4a4a4a;
304-
&:hover {
305-
box-shadow: inset 0 0 0 3px #FB7729;
306-
}
307-
path {
308-
fill: #4a4a4a!important;
309-
&:hover {
310-
opacity: 30%;
311-
}
312-
}
313-
}
314-
&.is-active {
315-
svg {
316-
box-shadow: inset 0 0 0 2px #ED592F;
317-
}
318-
}
319-
}
243+
#stepper .b-steps .steps .step-items .step-item.is-step-selected.is-active .step-marker {
244+
background-color: white;
245+
border-color: #04a635;
246+
color: #04a635;
247+
}
248+
.is-active .icon svg {
249+
width: 2rem;
250+
height: 2rem;
320251
}
321252
@media only screen and (max-width: 670px) {
322253
div.card {
@@ -326,12 +257,4 @@ export default {
326257
height: auto;
327258
}
328259
}
329-
.selection-question {
330-
font-family: Source Sans Pro;
331-
font-style: normal;
332-
font-weight: normal;
333-
font-size: 23px;
334-
line-height: 33px;
335-
color: #333333;
336-
}
337260
</style>

0 commit comments

Comments
 (0)