app/assets/stylesheets/participation.scss
// Table of Contents
//
// 01. Votes and supports
// 02. New participation
// 03. Show participation
// 04. List participation
// 05. Featured
// 06. Budgets
// 07. Proposals successful
// 08. Polls
// 09. Polls results and stats
//
// 01. Votes and supports
// ----------------------
@mixin votes {
border-top: 1px solid $border;
margin-top: $line-height;
padding: $line-height / 2 0;
position: relative;
@include breakpoint(medium) {
border-left: 1px solid $border;
border-top: 0;
margin-top: 0;
}
.icon-like,
.icon-unlike {
background: #fff;
border: 2px solid $text-light;
border-radius: rem-calc(3);
color: $text-light;
display: inline-block;
font-size: rem-calc(30);
line-height: rem-calc(30);
padding: rem-calc(3) rem-calc(6);
position: relative;
&:hover,
&:active {
color: #fff;
cursor: pointer;
opacity: 1 !important;
}
}
.icon-like {
&:hover,
&:active {
background: $like;
border: 2px solid $like;
}
}
.icon-unlike {
&:hover,
&:active {
background: $unlike;
border: 2px solid $unlike;
}
}
.like,
.unlike {
line-height: rem-calc(48);
vertical-align: super;
text-decoration: none;
.percentage {
color: $text;
display: inline-block;
font-size: $small-font-size;
line-height: $line-height * 2;
padding-right: $line-height / 2;
vertical-align: top;
@include breakpoint(medium) {
display: block;
line-height: $line-height;
padding-right: 0;
}
}
}
.voted {
.icon-like,
.icon-unlike {
color: #fff;
}
.icon-like {
background: $like;
border: 2px solid $like;
}
.icon-unlike {
background: $unlike;
border: 2px solid $unlike;
}
}
.no-voted {
.icon-like,
.icon-unlike {
opacity: 0.3;
}
}
.total-votes {
font-weight: bold;
float: right;
line-height: $line-height * 2;
@include breakpoint(medium) {
display: block;
float: none;
}
}
.divider {
margin: 0 rem-calc(6);
}
}
@mixin supports {
padding: $line-height 0;
position: relative;
.progress {
background: lighten($proposals, 35%);
border: 1px solid lighten($proposals, 35%);
height: rem-calc(14);
position: relative;
.meter {
background: $proposals;
border-radius: 0;
border-bottom-right-radius: rem-calc(3);
border-top-right-radius: rem-calc(3);
display: block;
height: $line-height / 2;
}
}
.percentage {
color: $text;
font-size: $tiny-font-size;
position: absolute;
right: 6px;
top: -2px;
vertical-align: top;
}
abbr {
color: $text-medium;
&[title] {
border-bottom: 0;
}
}
.button-support {
background: $proposals;
color: $text;
display: inline-block;
font-size: $small-font-size;
margin-top: rem-calc(12);
&:hover,
&:active {
background: lighten($proposals, 25%);
cursor: pointer;
}
}
.total-supports {
color: $text;
display: block;
font-weight: bold;
text-align: center;
span {
display: block;
font-size: $small-font-size;
font-weight: normal;
}
}
.divider {
margin: 0 rem-calc(6);
}
.supported {
color: $text;
margin-top: rem-calc(12);
}
}
.supports-container {
border-top: 1px solid $border;
@include breakpoint(medium) {
border-left: 1px solid $border;
border-top: 0;
}
}
.participation-not-allowed {
background: $warning-bg;
color: $color-warning;
left: 0;
line-height: $line-height;
min-height: 100%;
padding: $line-height / 2;
position: absolute;
text-align: center;
top: 0;
width: 100%;
z-index: 2;
p {
color: $color-warning !important;
margin: 0 rem-calc(12);
text-align: left;
}
a {
color: $color-warning !important;
font-weight: bold;
text-decoration: underline;
}
}
.reply .participation-not-allowed {
padding-right: $line-height / 2;
padding-top: $line-height / 6;
text-align: right;
}
// 02. New participation
// ---------------------
.debate-form,
.proposal-form,
.budget-investment-form,
.spending-proposal-form,
.document-form,
.topic-new,
.topic-form {
.icon-debates,
.icon-proposals,
.icon-budget,
.icon-image {
font-size: rem-calc(50);
line-height: $line-height;
opacity: 0.5;
}
.icon-debates {
color: $debates;
}
.icon-proposals,
.icon-image {
color: $proposals;
}
.icon-budget {
color: $budget;
}
}
.recommendations {
list-style-type: none;
margin-left: 0;
margin-top: $line-height;
li {
font-size: $small-font-size;
margin: $line-height / 2 0;
&::before {
content: 'l ';
font-family: "icons" !important;
}
}
}
.debate-form {
.recommendations li::before {
color: $debates;
}
}
.proposal-form,
.document-form,
.topic-form,
.topic-new {
.recommendations li::before {
color: $proposals;
}
}
.budget-investment-new,
.proposal-form,
.proposal-edit,
.polls-form,
.poll-question-form,
.legislation-process-new,
.legislation-process-edit,
.milestone-new,
.milestone-edit,
.image-form {
@include direct-uploads;
}
// 03. Show participation
// ----------------------
.debate-show,
.proposal-show,
.poll-question-show,
.investment-project-show,
.budget-investment-show,
.polls-show,
.debate-quiz,
.budget-investment-show,
.draft-panels,
.debate-questions,
.communities-show,
.topic-show,
.milestone-content {
h1,
p {
word-wrap: break-word;
}
.callout {
&.token-message {
background-color: #fff;
border-color: $info-border;
color: $color-info;
}
&.proposal-retired {
font-size: $base-font-size;
}
}
.social-share-full .social-share-button {
display: inline;
}
.whatsapp::before {
background-color: #43d854;
color: #fff;
display: inline-block;
font-size: rem-calc(30);
height: rem-calc(48);
padding-top: rem-calc(9);
text-align: center;
vertical-align: top;
width: rem-calc(48);
}
.debate-info,
.proposal-info,
.investment-project-info,
.budget-investment-show,
.topic-info {
clear: both;
color: $text-medium;
font-size: $small-font-size;
margin-bottom: $line-height / 2;
position: relative;
span:not(.label) {
line-height: rem-calc(32); // Same as avatar height
}
a {
color: $text-medium;
}
p {
font-size: $small-font-size;
line-height: $line-height;
margin: 0;
}
}
.debate-description,
.proposal-description {
font-size: rem-calc(15);
line-height: rem-calc(30);
}
ul,
ol {
li {
font-size: rem-calc(15);
margin-bottom: rem-calc(15);
}
}
.tags,
.geozone {
li {
margin-bottom: 0;
}
}
.author-photo {
line-height: rem-calc(32);
margin-right: rem-calc(6);
vertical-align: top;
width: 32px;
}
.author {
font-weight: bold;
a {
color: $link !important;
}
}
aside {
h2 {
border-top: 2px solid $brand;
display: inline-block;
font-size: rem-calc(16);
margin: -1px 0 rem-calc(12);
padding-top: rem-calc(6);
text-transform: uppercase;
}
}
blockquote {
color: #4c4c4c;
margin-top: rem-calc(12);
padding-top: 0;
font-size: rem-calc(15);
line-height: rem-calc(30);
}
.video-link {
background: $highlight-soft;
border: 1px solid $highlight;
display: block;
margin: $line-height / 2 0;
padding: $line-height / 2;
position: relative;
a {
word-wrap: break-word;
}
.icon-video {
color: #cc181e;
display: inline-block;
font-size: rem-calc(24);
line-height: $line-height;
vertical-align: middle;
}
p {
margin-bottom: 0;
}
}
.supports {
@include supports;
}
.leave-comment {
display: inline-block;
margin-top: rem-calc(24);
}
.tags {
display: block;
margin-bottom: 0;
a {
margin-right: rem-calc(6);
}
}
}
.bullet {
color: $text;
}
.investment-project-show p,
.budget-investment-show p {
word-break: break-word;
}
.proposal-show,
.investment-project-show,
.budget-investment-show {
.supports {
padding: $line-height / 2 0 0;
}
.share-supported {
display: none;
}
}
.tab-milestones ul {
margin-top: rem-calc(40);
position: relative;
li {
margin: 0 auto;
position: relative;
width: 0;
}
li::before {
background: $budget;
border-radius: rem-calc(20);
content: '';
height: rem-calc(20);
position: absolute;
top: 5px;
transform: translateX(-50%);
width: rem-calc(20);
z-index: 2;
}
li::after {
background: $light-gray;
bottom: 100%;
content: '';
height: 100%;
position: absolute;
top: 25px;
width: 1px;
z-index: 1;
}
}
.tab-milestones ul .milestone-content {
padding: $line-height / 6 $line-height / 2;
position: relative;
h3 {
margin-bottom: 0;
}
.milestone-date {
color: $text-medium;
font-size: $small-font-size;
}
}
.tab-milestones .timeline ul li:nth-child(odd),
.tab-milestones .timeline ul li:nth-child(even) {
.milestone-content {
@include breakpoint(medium) {
width: rem-calc(300);
}
@include breakpoint(large) {
width: rem-calc(450);
}
}
}
.tab-milestones .timeline ul li:nth-child(odd) {
.milestone-content {
text-align: right;
@include breakpoint(medium) {
margin-left: rem-calc(-315);
}
@include breakpoint(large) {
margin-left: rem-calc(-465);
}
}
}
.tab-milestones .timeline ul li:nth-child(even) {
.milestone-content {
left: 15px;
}
}
.tab-milestones {
@include breakpoint(small only) {
.timeline ul li {
width: 100%;
&:nth-child(odd),
&:nth-child(even) {
.milestone-content {
left: 15px;
text-align: left;
}
}
}
}
}
.milestone-status {
background: $budget;
border-radius: rem-calc(4);
color: #fff;
display: inline-block;
margin-top: $line-height / 6;
padding: $line-height / 4 $line-height / 2;
}
.show-actions-menu {
[class^="icon-"] {
display: inline-block;
vertical-align: middle;
}
}
.additional-content {
.tabs {
background: none;
border: 0;
margin-bottom: 0;
a {
background: none;
}
}
.filter-subnav {
background: $highlight;
margin-bottom: $line-height;
padding-top: $line-height / 4;
}
}
// 04. List participation
// ----------------------
.debates-list,
.proposals-list,
.investment-projects-list,
.budget-investments-list {
@include breakpoint(medium) {
margin-bottom: rem-calc(48);
}
}
.investment-projects-list,
.budget-investments-list {
@include breakpoint(medium) {
min-height: $line-height * 15;
}
}
.budget-investments-list .budget-investment,
.proposals-list .proposal,
.legislation-proposals .proposal {
@include breakpoint(medium) {
.panel {
&.with-image {
padding: 0 $line-height / 2 0 0;
}
}
.column:first-child {
overflow: hidden;
}
.column:nth-child(2) {
float: left;
}
.column:last-child:not(:first-child) {
padding-top: $line-height / 2;
}
img {
max-width: 12rem;
}
.budget-investment-content {
ul {
margin-bottom: 0;
}
}
}
}
.debate,
.proposal,
.investment-project,
.budget-investment,
.legislation,
.communities-show {
margin: $line-height / 4 0;
.panel {
background: #fff;
border: 1px solid;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
border-radius: 0;
box-shadow: 0 1px 3px 0 $border;
margin-bottom: rem-calc(12);
min-height: rem-calc(192);
padding: rem-calc(12) rem-calc(12) 0;
@include breakpoint(medium) {
margin-bottom: rem-calc(-1);
padding-bottom: rem-calc(12);
}
@include breakpoint(medium) {
.divider {
display: inline-block;
}
}
h3 {
font-weight: bold;
margin-top: $line-height / 2;
a {
color: $text;
}
}
&.past-budgets {
min-height: 0;
}
}
.debate-content,
.proposal-content,
.investment-project-content,
.budget-investment-content {
margin: 0;
min-height: rem-calc(180);
position: relative;
}
.tags {
display: block;
margin-bottom: 0;
a {
font-size: $tiny-font-size;
}
}
.icon-debates,
.icon-proposals,
.icon-budget {
font-size: rem-calc(18);
line-height: $line-height;
margin-left: rem-calc(6);
top: 0;
}
.icon-debates {
color: $debates;
}
.icon-proposals {
color: $proposals-dark;
}
.icon-budget {
color: $budget;
font-size: $small-font-size;
}
.debate-info,
.proposal-info,
.investment-project-info,
.budget-investment-info,
.topic-info {
color: $text-medium;
font-size: $small-font-size;
margin: rem-calc(6) 0 0;
.icon-comments {
font-size: rem-calc(16);
vertical-align: top;
}
a {
color: $text-medium;
}
}
.debate-description,
.proposal-description,
.investment-project-description,
.budget-investment-description {
color: $text;
font-size: rem-calc(13);
height: rem-calc(72);
line-height: $line-height;
margin-bottom: rem-calc(12);
margin-top: 0;
overflow: hidden;
position: relative;
a {
color: $text;
}
}
.truncate {
background: image-url('truncate.png');
background-repeat: repeat-x;
bottom: 0;
height: rem-calc(24);
position: absolute;
width: 100%;
}
p {
color: $text;
}
}
.divider {
display: none;
}
.more-info {
clear: both;
color: $text-medium;
font-size: $small-font-size;
a {
color: $text-medium;
}
}
.debate,
.debate-show,
.proposal-show,
.legislation-proposals {
.votes {
@include votes;
@include breakpoint(medium) {
text-align: center;
}
.against {
margin-left: $line-height / 4;
}
}
}
.legislation-proposals {
.votes {
min-height: $line-height * 8;
}
}
.proposal-show .votes,
.debate-show .votes {
border: 0;
padding: $line-height / 2 0;
}
.proposal {
.supports {
@include supports;
}
}
.investment-project,
.investment-project-show,
.budget-investment,
.budget-investment-show {
.supports {
@include supports;
.investment-project-amount,
.budget-investment-amount {
color: $budget;
font-size: rem-calc(20);
font-weight: bold;
margin-bottom: 0;
}
.button-support {
background: $budget;
color: #fff;
&:hover {
background: $budget-hover;
color: #fff;
cursor: pointer;
}
&:active {
opacity: 0.75;
}
}
.total-supports {
color: $budget;
font-size: $base-font-size;
font-weight: bold;
}
.remove .icon-check-circle {
color: $budget;
display: block;
font-size: rem-calc(70);
line-height: rem-calc(70);
}
}
}
.budget-investment-show {
figure {
margin: rem-calc(10) 0 0;
display: inline-block;
figcaption {
font-size: $small-font-size;
margin-top: rem-calc(10);
}
}
}
.investment-project-show .supports,
.budget-investment-show .supports {
border: 0;
}
.proposals-summary {
.panel {
min-height: 0;
}
}
.investment-project .no-button,
.investment-project-show .no-button,
.budget-investment .no-button,
.budget-investment-show .no-button {
display: block;
margin-top: $line-height * 1.5;
}
.budget-investment-show {
.label-budget-investment {
background: none;
clear: both;
color: $budget;
display: block;
font-size: rem-calc(12);
font-weight: bold;
line-height: $line-height;
padding-bottom: 0;
padding-left: 0;
padding-top: 0;
text-transform: uppercase;
}
.icon-budget {
color: $budget;
font-size: $small-font-size;
line-height: $line-height;
margin-left: rem-calc(6);
top: 0;
}
}
.help-header {
background: #fafafa;
border-bottom: 1px solid #eee;
padding-bottom: $line-height / 2;
padding-top: $line-height;
h1 {
font-size: rem-calc(24);
text-transform: uppercase;
}
}
.view-mode {
ul {
margin-bottom: 0;
li {
padding: $line-height / 4 0;
padding-left: $line-height;
}
}
.dropdown-pane {
width: auto;
}
.button {
background: #eee;
height: rem-calc(36);
margin-bottom: 0;
padding: $line-height / 4;
width: rem-calc(36);
&::before {
color: $text;
font-family: 'icons';
}
}
&.default {
.button {
&::before {
content: '\51';
}
}
}
&.minimal {
.button {
&::before {
content: '\22';
}
}
}
.view-list {
position: relative;
&::before {
content: '\22';
font-family: 'icons';
left: 0;
position: absolute;
top: 6px;
}
}
.view-card {
position: relative;
&::before {
content: '\51';
font-family: 'icons';
left: 0;
position: absolute;
top: 6px;
}
}
.is-active {
color: $brand;
&::after {
content: '\6c';
font-family: 'icons';
font-size: $tiny-font-size;
}
}
}
.debate,
.proposal,
.budget-investment {
&.minimal {
.panel,
.debate-content,
.proposal-content,
.budget-investment-content {
min-height: 0;
}
.panel h3 {
margin: 0 0 $line-height / 2;
@include breakpoint(medium) {
margin: 0;
}
}
}
}
// 05. Featured
// ------------
.featured-debates,
.featured-proposals,
.enquiries-list {
padding: $line-height / 2 0;
@include breakpoint(medium) {
margin-left: 0 !important;
margin-right: 0 !important;
}
h2 {
font-size: $small-font-size;
line-height: $line-height;
text-transform: uppercase;
}
h3 {
margin-bottom: 0;
a {
color: $text;
font-size: rem-calc(24);
}
}
a,
.info {
color: lighten($text, 15%);
font-size: $small-font-size;
}
}
.featured-debates {
background: $highlight;
}
.featured-proposals {
background: $featured;
.proposal-featured {
min-height: $line-height * 3.5;
}
.supports {
@include supports;
background: none;
border: 0;
padding-bottom: 0;
padding-top: 0;
&::after {
content: none;
}
.total-supports {
display: none;
}
.button-support {
background: $text;
color: $featured;
margin-top: 0;
&:hover {
background: #fff;
color: $text;
}
}
.participation-not-allowed {
background: $featured;
font-size: $small-font-size;
padding-top: 0;
a {
color: $color-warning;
}
p {
color: $color-warning;
font-size: $small-font-size;
line-height: $line-height;
}
}
.supported {
margin-top: 0;
font-size: $small-font-size;
}
}
.share-supported {
.ssb-twitter,
.ssb-facebook,
[class^="ssb-icon ssb-google"] {
background: none;
color: $text;
height: rem-calc(33) !important;
&::before {
font-size: rem-calc(18);
line-height: rem-calc(33);
}
}
}
}
// 06. Budgets
// -----------
.expanded {
&.budget {
background: $budget;
h1,
h2,
p,
a,
.back,
.icon-angle-left,
.description {
color: #fff;
}
a {
text-decoration: underline;
}
.callout {
&.primary a {
color: $link;
}
}
.button {
background: #fff;
color: $budget;
text-decoration: none;
}
.info {
background: #6a2a72;
p {
margin-bottom: 0;
text-transform: uppercase;
}
}
}
}
.jumbo-budget {
background: $budget;
border-bottom: 1px solid $budget;
&.budget-heading {
min-height: $line-height * 10;
}
h2 {
margin-bottom: 0;
}
h2,
h3,
.back,
.icon-angle-left,
p,
a {
color: #fff;
}
.tagline {
display: block;
font-size: $small-font-size;
font-weight: normal;
}
.callout.warning {
font-size: $base-font-size;
a {
color: $color-warning;
}
}
a {
text-decoration: underline;
}
.button {
background: #fff;
color: $brand;
margin-bottom: rem-calc(3);
text-decoration: none;
}
.social-share-button a {
color: #fff;
&.social-share-button-twitter:hover {
color: #40a2d1;
}
&.social-share-button-facebook:hover {
color: #354f88;
}
&[class^="social-share-button-google"] {
color: #ce3e26;
}
&.social-share-button-telegram:hover {
color: #ce3e26;
}
}
}
.groups-and-headings {
.heading {
border: 1px solid $border;
border-radius: rem-calc(3);
display: inline-block;
margin-bottom: $line-height / 2;
&:hover {
background: $highlight;
text-decoration: none;
}
a {
display: block;
padding: $line-height / 2;
&:hover {
text-decoration: none;
}
}
.heading-name {
padding: $line-height / 2;
}
span {
color: $text;
display: block;
font-size: $small-font-size;
}
}
}
.progress-votes {
position: relative;
.progress {
background: #212033;
clear: both;
}
.progress-meter {
background: #fdcb10;
border-radius: 0;
transition: width 2s;
}
.spent-amount-progress,
.spent-amount-meter {
background: none !important;
}
.spent-amount-text {
color: #fff;
font-size: $base-font-size;
font-weight: normal;
position: absolute;
right: 0;
text-align: right;
top: 16px;
width: 100%;
&::before {
color: #a5a1ff;
content: '\57';
font-family: 'icons';
font-size: $small-font-size;
position: absolute;
right: -6px;
top: -17px;
}
}
.total-amount {
color: #fff;
font-size: rem-calc(18);
font-weight: bold;
float: right;
}
.amount-available {
display: block;
text-align: right;
span {
font-size: rem-calc(24);
font-weight: bold;
}
}
}
.big-number {
color: $budget;
font-size: rem-calc(60);
line-height: rem-calc(120);
@include breakpoint(large) {
font-size: rem-calc(90);
line-height: rem-calc(240);
}
}
.ballot {
h2,
h3 {
font-weight: normal;
span {
color: $budget;
font-weight: bold;
}
}
.ballot-content {
border: 2px solid #f9f9f9;
border-radius: rem-calc(6);
padding: $line-height / 2;
}
.subtitle {
border-left: 2px solid $budget;
margin: $line-height / 2 0;
padding-left: $line-height / 2;
}
.amount-spent {
background: $success-bg;
font-weight: normal;
padding: $line-height / 2;
span {
font-size: rem-calc(24);
font-weight: bold;
}
}
}
.ballot-list {
list-style: none;
margin-left: 0;
li {
background: #f9f9f9;
line-height: $line-height;
margin-bottom: $line-height / 4;
padding: $line-height $line-height / 2;
position: relative;
a {
color: $text;
}
span {
display: block;
font-style: italic;
}
.remove-investment-project {
display: block;
height: 0;
.icon-x {
color: #9f9f9f;
font-size: rem-calc(24);
line-height: $line-height / 2;
position: absolute;
right: 6px;
text-decoration: none;
top: 6px;
@include breakpoint(medium) {
font-size: $base-font-size;
}
}
}
&:hover {
background: $budget;
color: #fff;
a,
span {
color: #fff;
outline: 0;
text-decoration: none;
}
.remove-investment-project .icon-x {
color: #fff;
}
}
}
}
.select-district a {
display: inline-block;
margin: $line-height / 4 0;
padding: $line-height / 4;
}
.select-district .is-active a {
background: #f9f9f9;
border-radius: rem-calc(3);
color: $budget;
font-weight: bold;
&::after {
content: '\56';
font-family: 'icons';
font-size: $small-font-size;
font-weight: normal;
line-height: $line-height;
padding-left: rem-calc(3);
vertical-align: baseline;
&:hover {
text-decoration: none;
}
}
}
.progress-bar-nav {
padding: $line-height 0;
position: relative;
z-index: 3;
@include breakpoint(medium) {
background-color: $budget;
transition: height 0.3s;
h2 {
margin-bottom: $line-height / 2;
transition: font-size 0.3s;
}
&.is-fixed {
height: auto;
left: 0;
padding: $line-height;
position: fixed;
top: 0;
width: 100%;
h2 {
font-size: rem-calc(24);
transition: font-size 0.3s;
}
}
}
}
.budget-timeline {
border-left: 3px solid $budget;
margin-left: $line-height / 2;
padding: $line-height $line-height / 2;
h3,
span,
p {
padding: 0 $line-height / 4;
}
h3 {
margin-bottom: 0;
}
span {
color: $text-medium;
display: block;
font-size: $small-font-size;
margin-bottom: $line-height / 2;
}
.phase {
position: relative;
&:not(:first-child) {
margin-top: $line-height * 1.5;
}
&::before {
background-color: #fff;
border: 4px solid $budget;
border-radius: 100%;
content: '';
height: 16px;
left: -22px;
position: absolute;
top: 6px;
width: 16px;
z-index: 99;
}
&.is-active {
h3 {
background: $budget;
color: #fff;
display: inline-block;
}
&::before {
background-color: $budget;
}
}
}
}
.budgets-stats {
.header {
background: $highlight;
}
.big-number-stat {
font-size: rem-calc(60);
font-weight: bold;
line-height: rem-calc(60);
&.budget {
color: $budget;
}
}
}
// 07. Proposals successful
// -------------------------
.dark-heading {
background: #2d3e50;
color: #fff;
@include breakpoint(medium) {
padding-bottom: $line-height;
}
p {
&.title {
color: #ffd200;
}
&.title-date {
font-size: rem-calc(24);
font-weight: bold;
}
}
.info {
background: #314253;
padding-top: $line-height;
@include breakpoint(medium) {
border-top: rem-calc(6) solid #ffd200;
}
}
}
.successful .panel {
.icon-successful {
border-right: 60px solid #ffd200;
border-top: 0;
border-bottom: 60px solid transparent;
height: 0;
position: absolute;
right: 0;
top: 0;
width: 0;
&::after {
color: #1b254c;
content: '\59';
font-family: "icons" !important;
left: 34px;
position: absolute;
top: 5px;
}
}
}
.successful {
.panel {
position: relative;
}
.truncate {
display: none;
}
.message {
@include supports;
background: none;
border-top: 0;
@include breakpoint(medium) {
border-left: 1px solid $border;
margin: $line-height rem-calc(-25) 0 rem-calc(12);
}
}
}
// 08. Polls
// ----------------------
.polls-show-header {
background: #fafafa;
.callout {
&.warning a {
color: $color-warning;
}
&.primary a {
color: $color-info;
}
&.alert a {
color: $color-alert;
}
}
}
.poll-more-info,
.poll-more-info-answers {
border-top: 1px solid #eee;
}
.poll-more-info-answers {
background: #fafafa;
border-bottom: 1px solid #eee;
.column:nth-child(odd) {
border-right: 2px solid $text;
}
.answer-divider {
border-bottom: 2px solid $text;
border-right: 0 !important;
margin-bottom: $line-height;
padding-bottom: $line-height;
}
.answer-description {
height: 100%;
&.short {
height: rem-calc(300);
overflow: hidden;
}
}
}
.orbit-bullets button {
background-color: #ccc;
height: $line-height / 2;
width: $line-height / 2;
&.is-active {
background-color: $brand;
}
}
.orbit-container {
height: 100% !important;
max-height: none !important;
li {
margin-bottom: 0 !important;
}
}
.orbit-slide {
max-height: none !important;
}
.orbit-caption {
background: #eee;
color: $text;
}
.orbit-next,
.orbit-previous {
background: rgba(34, 34, 34, 0.25);
}
.zoom-link {
background: #fff;
border-radius: rem-calc(48);
color: #000;
font-size: rem-calc(24);
font-weight: bold;
height: rem-calc(48);
line-height: rem-calc(48);
right: 12px;
padding-top: rem-calc(4);
position: absolute;
text-align: center;
top: 24px;
width: rem-calc(48);
z-index: 9;
&:hover {
background: $dark;
color: #fff;
text-decoration: none;
}
}
.image-container {
background: #fafafa;
overflow: hidden;
position: relative;
}
.poll {
&.with-image {
@include breakpoint(medium) {
padding: 0 $line-height / 2 0 0;
}
img {
height: 100%;
max-width: none;
position: absolute;
}
}
}
.poll,
.poll-question {
border: 1px solid $border;
margin-bottom: $line-height / 2;
padding: $line-height / 2;
position: relative;
.icon-poll-answer {
border-top: 0;
border-bottom: 60px solid transparent;
height: 0;
position: absolute;
right: 0;
top: 0;
width: 0;
&.can-answer::after,
&.cant-answer::after,
&.not-logged-in::after,
&.already-answer::after,
&.unverified::after {
font-family: "icons" !important;
left: 34px;
position: absolute;
top: 5px;
}
&.can-answer {
border-right: 60px solid $info-bg;
&::after {
color: $color-info;
content: '\6c';
}
}
&.cant-answer {
border-right: 60px solid $alert-bg;
&::after {
color: $color-alert;
content: '\74';
}
}
&.not-logged-in {
border-right: 60px solid $info-bg;
&::after {
color: $color-info;
content: '\6f';
}
}
&.unverified {
border-right: 60px solid $warning-bg;
&::after {
color: $color-warning;
content: '\6f';
}
}
&.already-answer {
border-right: 60px solid $success-bg;
&::after {
color: $color-success;
content: '\59';
}
}
}
.dates {
color: $text-medium;
font-size: $small-font-size;
margin-bottom: $line-height / 2;
}
h4 {
font-size: rem-calc(30);
line-height: $line-height * 1.5;
a {
color: $text;
}
}
}
.questions-callout {
font-size: $base-font-size;
}
.section-title-divider {
border-bottom: 1px solid #eee;
color: #000;
margin: $line-height 0;
span {
border-bottom: 1px solid #000;
}
}
.poll-question {
padding: 0 $line-height;
h3 {
padding-top: $line-height;
a {
color: $text;
}
}
}
.poll-question-answers {
.button {
margin-right: $line-height / 4;
min-width: rem-calc(168);
@include breakpoint(medium down) {
width: 100%;
}
&.answered {
background: #f4f8ec;
border: 2px solid #92ba48;
color: $text;
position: relative;
&::after {
background: #92ba48;
border-radius: rem-calc(20);
content: '\6c';
color: #fff;
font-family: "icons" !important;
font-size: rem-calc(12);
padding: $line-height / 4;
position: absolute;
right: -6px;
top: -6px;
}
}
}
}
// 09. Polls results and stats
// ---------------------------
.polls-results-stats {
.sidebar {
border-bottom: 1px solid $border;
margin-bottom: $line-height;
@include breakpoint(medium) {
border-bottom: 0;
border-right: 1px solid $border;
}
.menu {
padding: 0;
li a {
color: $link;
line-height: $line-height;
}
}
}
table {
table-layout: fixed;
caption {
padding: $line-height / 2 0;
text-align: left;
}
th {
text-align: left;
&.win {
background: #009fde;
}
}
td {
&.win {
background: #ccedf8;
font-weight: bold;
}
}
}
.number {
font-size: rem-calc(60);
font-weight: bold;
line-height: rem-calc(60);
}
}