update: integration polls - step 1

This commit is contained in:
Marjolaine Le Bon 2020-08-20 01:59:24 +02:00
parent eb07bebdd1
commit 778950a38a
3 changed files with 206 additions and 23 deletions

View File

@ -5,6 +5,12 @@
font-weight: 400; font-weight: 400;
color: #7A7F85; color: #7A7F85;
solid-event { solid-event {
sib-display div {
max-width: 1110px;
sib-display {
margin: 0 0 20px 40px;
}
}
.red-button, .red-button,
.event-type { .event-type {
background-color: #C4262E; background-color: #C4262E;
@ -21,7 +27,7 @@
#circle-listevents { #circle-listevents {
[name="name"], [name="name"],
solid-display-link-event .mdi::before { solid-display-link-event .mdi::before {
color: #C4262E; color: #063B5C;
} }
} }
.event-place-name, .event-place-name,
@ -48,17 +54,20 @@
padding: 5px 20px; padding: 5px 20px;
color: #063B5C; color: #063B5C;
} }
sib-form sib-form-dropdown { sib-form {
label div { sib-form-dropdown {
height: 2.5rem; margin-left: 15px;
} label div {
&::before { height: 2.5rem;
font-family: "RefrigeratorDelxW01Bold"; }
font-size: 2.4rem; &::before {
line-height: 29px; font-family: "RefrigeratorDelxW01Bold";
color: #063B5C; font-size: 2.4rem;
top: -40px; line-height: 29px;
content: "Research an event"; color: #063B5C;
top: -40px;
content: "Research an event";
}
} }
} }
[name="name"] { [name="name"] {
@ -125,6 +134,14 @@
} }
} }
#events {
background-color: #f0f3f6;
}
#circle-events solid-event .events sib-form sib-form-dropdown select {
background-color: #f0f3f6;
}
.with-sidebar nav>solid-router>ul [name="circle-events"] { .with-sidebar nav>solid-router>ul [name="circle-events"] {
li::before { li::before {
content: ''; content: '';

View File

@ -1,23 +1,78 @@
#polls { #polls,
#circle-polls {
h2 { h2 {
text-transform: inherit; text-transform: inherit;
} }
/*style of poll listing*/ /*style of poll listing*/
#pollListing { #pollListing {
width: 90%;
margin: auto; margin: auto;
.headline h2 { .headline {
font-family: "RefrigeratorDelxW01Bold"; h2 {
font-size: 2.4rem; margin: 0 40px;
line-height: 3.8rem; font-family: "RefrigeratorDelxW01Bold";
color: #063B5C; font-size: 2.4rem;
line-height: 3.8rem;
color: #063B5C;
}
.add-poll {
solid-link {
float: right;
margin-top: 10px;
display: initial;
margin-right: 75px;
position: relative;
z-index: 1;
box-shadow: 0px 0px 4px 1px #CACACA;
height: 2rem;
font-size: 1.4rem;
text-transform: uppercase;
font-weight: 700;
padding: 0.55rem 2.5rem;
width: max-content;
line-height: 20px;
&::before {
font-family: "material-design-icons";
content: "\F419";
width: 1em;
display: inline-block;
margin: 0 5px 0 10px;
font-size: 2rem;
vertical-align: middle;
font-weight: 400;
}
}
}
} }
.all-polls { .all-polls {
/*make 3 polls per line*/ solid-form {
display: block;
border-bottom: solid 1px #cacaca;
height: 90px;
width: 650px;
margin: 16px 25px 25px;
max-width: 85%;
solid-form-placeholder-text {
margin-left: 15px;
input {
border-radius: 4px;
}
}
}
div:first-of-type { div:first-of-type {
display: flex;
flex-wrap: wrap;
justify-content: left;
height: 100%;
max-width: 1100px;
margin: auto;
solid-display { solid-display {
width: 330px; width: 320px;
height: 550px;
margin: 0 0 20px 40px;
>div:first-of-type { >div:first-of-type {
background-color: #fff;
-webkit-box-shadow: 0px 0px 4px 1px #CACACA;
box-shadow: 0px 0px 4px 1px #CACACA;
*[name="body"] { *[name="body"] {
/*size of tags of poll card*/ /*size of tags of poll card*/
etuc-display-votetags { etuc-display-votetags {
@ -30,6 +85,78 @@
} }
} }
} }
img {
width: 320px;
height: 230px;
object-fit: cover;
}
[name="title"] {
font-family: "RefrigeratorDelxW01Bold";
color: #063B5C;
font-size: 1.8rem;
font-weight: 600;
text-transform: uppercase;
height: 30px;
width: 100%;
display: inline-block;
}
[name="hostingOrganisation"],
[name="endDate"] {
color: #3A3A3A;
font-family: Facit;
font-size: 14px;
letter-spacing: 0;
line-height: 22px;
}
[name="hostingOrganisation"] {
&::before {
content: '\e037';
font-family: 'simple-line-icons';
color: #C4262E;
height: 22px;
width: 24px;
font-size: 16px;
letter-spacing: 0;
line-height: 22px;
display: inline-block;
text-align: center;
}
}
[name="endDate"] {
position: relative;
padding-left: 140px;
&::after {
display: inline-block;
font: normal normal normal 24px/1 "Material Design Icons";
content: "\F6AF";
color: #C4262E;
height: 22px;
width: 24px;
font-size: 20px;
letter-spacing: 0;
line-height: 22px;
display: inline-block;
text-align: center;
position: absolute;
left: 0;
top: 0;
}
&::before {
position: absolute;
left: 24px;
width: max-content;
}
}
[name="shortDescription"] {
height: 117px;
width: 316px;
color: #7A7F85;
font-family: Facit;
font-size: 14px;
letter-spacing: 0;
line-height: 22px;
text-align: center;
}
} }
} }
} }
@ -56,3 +183,27 @@
} }
} }
} }
#polls {
background-color: #f0f3f6;
}
#circle-polls #pollListing .all-polls solid-form solid-form-placeholder-text input {
background-color: #f0f3f6;
}
.with-sidebar nav>solid-router>ul [name="circle-polls"] {
li::before {
content: '';
height: 40px;
width: 40px;
mask: url('/images/vote.svg') center no-repeat;
mask-size: contain;
-webkit-mask: url('/images/vote.svg') center no-repeat;
-webkit-mask-size: contain;
background-color: var(--color-right-menu-text);
}
&[active] li::before {
background-color: var(--color-right-menu-active-text);
}
}

View File

@ -1,10 +1,16 @@
#resources { #resources,
#circle-resources {
width: 100%; width: 100%;
font-family: "Facit"; font-family: "Facit";
font-weight: 400; font-weight: 400;
color: #7A7F85; color: #7A7F85;
solid-resource { solid-resource {
background-color: #F0F3F6; sib-display div {
max-width: 1110px;
sib-display {
margin: 0 0 20px 40px;
}
}
.sib-resource { .sib-resource {
font-family: "Facit"; font-family: "Facit";
.page-title { .page-title {
@ -60,6 +66,7 @@
sib-display sib-display { sib-display sib-display {
[name="name"] { [name="name"] {
font-family: "RefrigeratorDelxW01Bold"; font-family: "RefrigeratorDelxW01Bold";
color: #063B5C;
} }
[name="link"] a { [name="link"] a {
padding-left: 35px; padding-left: 35px;
@ -108,6 +115,14 @@
} }
} }
#resources {
background-color: #f0f3f6;
}
#circle-resources .resources sib-form sib-form-dropdown select {
background-color: #f0f3f6;
}
.with-sidebar nav>solid-router>ul [name="circle-resources"] { .with-sidebar nav>solid-router>ul [name="circle-resources"] {
li::before { li::before {
content: ''; content: '';