From 778950a38a420716d582de7a7af1f39261db3ac8 Mon Sep 17 00:00:00 2001 From: Marjolaine Le Bon Date: Thu, 20 Aug 2020 01:59:24 +0200 Subject: [PATCH] update: integration polls - step 1 --- src/styles/layout/events/events.scss | 41 +++-- src/styles/layout/polls/_polls.scss | 169 +++++++++++++++++++-- src/styles/layout/resources/resources.scss | 19 ++- 3 files changed, 206 insertions(+), 23 deletions(-) diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index 1c3511d..f3e3681 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -5,6 +5,12 @@ font-weight: 400; color: #7A7F85; solid-event { + sib-display div { + max-width: 1110px; + sib-display { + margin: 0 0 20px 40px; + } + } .red-button, .event-type { background-color: #C4262E; @@ -21,7 +27,7 @@ #circle-listevents { [name="name"], solid-display-link-event .mdi::before { - color: #C4262E; + color: #063B5C; } } .event-place-name, @@ -48,17 +54,20 @@ padding: 5px 20px; color: #063B5C; } - sib-form sib-form-dropdown { - label div { - height: 2.5rem; - } - &::before { - font-family: "RefrigeratorDelxW01Bold"; - font-size: 2.4rem; - line-height: 29px; - color: #063B5C; - top: -40px; - content: "Research an event"; + sib-form { + sib-form-dropdown { + margin-left: 15px; + label div { + height: 2.5rem; + } + &::before { + font-family: "RefrigeratorDelxW01Bold"; + font-size: 2.4rem; + line-height: 29px; + color: #063B5C; + top: -40px; + content: "Research an event"; + } } } [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"] { li::before { content: ''; diff --git a/src/styles/layout/polls/_polls.scss b/src/styles/layout/polls/_polls.scss index c30cc40..923882c 100644 --- a/src/styles/layout/polls/_polls.scss +++ b/src/styles/layout/polls/_polls.scss @@ -1,23 +1,78 @@ -#polls { +#polls, +#circle-polls { h2 { text-transform: inherit; } /*style of poll listing*/ #pollListing { - width: 90%; margin: auto; - .headline h2 { - font-family: "RefrigeratorDelxW01Bold"; - font-size: 2.4rem; - line-height: 3.8rem; - color: #063B5C; + .headline { + h2 { + margin: 0 40px; + font-family: "RefrigeratorDelxW01Bold"; + 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 { - /*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 { + display: flex; + flex-wrap: wrap; + justify-content: left; + height: 100%; + max-width: 1100px; + margin: auto; solid-display { - width: 330px; + width: 320px; + height: 550px; + margin: 0 0 20px 40px; >div:first-of-type { + background-color: #fff; + -webkit-box-shadow: 0px 0px 4px 1px #CACACA; + box-shadow: 0px 0px 4px 1px #CACACA; *[name="body"] { /*size of tags of poll card*/ 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; + } } } } @@ -55,4 +182,28 @@ } } } +} + +#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); + } } \ No newline at end of file diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index e665949..0b876c1 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -1,10 +1,16 @@ -#resources { +#resources, +#circle-resources { width: 100%; font-family: "Facit"; font-weight: 400; color: #7A7F85; solid-resource { - background-color: #F0F3F6; + sib-display div { + max-width: 1110px; + sib-display { + margin: 0 0 20px 40px; + } + } .sib-resource { font-family: "Facit"; .page-title { @@ -60,6 +66,7 @@ sib-display sib-display { [name="name"] { font-family: "RefrigeratorDelxW01Bold"; + color: #063B5C; } [name="link"] a { 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"] { li::before { content: '';