app/assets/stylesheets/base/_main.scss
/**
* MAIN
*/
.petitions-list-wrapper {
margin: 0 0 40px;
}
.petitions-list-title {
margin: 0;
padding: 0 0 7px;
border-bottom: 1px solid #ccc;
}
.petitions-list-item {
padding: 17px 0 11px;
border-bottom: 1px solid #ccc;
}
.petitions-list-item-image-container {
display: inline-block;
width: 15%;
margin: 0 12px 0 0;
vertical-align: top;
}
.petitions-list-item-image {
width: 100%;
background: #eee;
}
.petitions-list-item-info-container {
display: inline-block;
width: 80%;
vertical-align: top;
}
.petitions-list-item-title {
height: 58px;
font: 600 18px/22px 'Open Sans', arial, sans-serif;
a {
color: #000;
}
}
.petitions-counter {
padding: 0 15px 0 0;
display: inline-block;
font: 600 12px/22px 'Open Sans', arial, sans-serif;
color: #000;
&.hot-item {
padding: 0 0 0 15px;
background: asset-url('flame.png') 0 4px no-repeat;
}
}
.petitions-list-item-time {
display: inline-block;
width: 35%;
text-align: right;
font: 300 12px/22px 'Open Sans', arial, sans-serif;
color: #808080;
}
.petitions-list-item-more-link-wrapper {
padding: 12px 0 0;
}
.petitions-list-item-more-link {
padding: 0 0 0 15px;
background: asset-url('blue-arrow-right.png') 0 6px no-repeat;
font: 300 16px/21px 'Open Sans', arial, sans-serif;
color: #000;
}
.petition-intro-container {
margin: 0 0 60px;
}
.petition-intro-image-container {
display: inline-block;
vertical-align: top;
width: 30%;
margin: 0 2% 0 0;
}
.petition-intro-image {
width: 100%;
}
.petition-intro-info-container {
display: inline-block;
vertical-align: top;
width: 60%;
}
.petition-intro-info-counter {
margin: 0 0 10px;
font: 600 20px/21px 'Open Sans', arial, sans-serif;
}
.petition-intro-info-text {
font: 300 20px/30px 'Open Sans', arial, sans-serif;
}
.petition-intro-container-noimage {
margin: 0 0 60px;
text-align: center;
.petition-intro-info-container {
display: inline-block;
vertical-align: top;
width: 75%;
text-align: center;
}
}
.petition-container {
display: flex;
margin: 0 0 35px;
}
.petition-text-wrapper {
display: inline-block;
vertical-align: top;
flex: 1;
width: 44%;
padding: 25px 3%;
background: #f5f5f5;
}
.petition-section-title {
margin: 0 0 35px;
font: 300 30px/34px 'Open Sans', arial, sans-serif;
text-transform: none;
text-align: center;
}
.petition-text {
font: 400 18px/28px 'Open Sans', arial, sans-serif;
h3 {
font: 600 18px/28px 'Open Sans', arial, sans-serif;
}
a {
text-decoration: underline;
}
}
.petition-answer {
p {
margin-bottom: 15px;
}
img {
max-width: 100%;
}
}
.petition-form-wrapper {
position: relative;
display: inline-block;
vertical-align: top;
flex: 1;
width: 44%;
padding: 25px 3%;
background: #f5f5f5 asset-url('petitie-form-background.gif') 0 0 repeat-y;
}
.petition-form-float-wrapper {
&.floating {
position: fixed;
top: 30px;
width: 41.7%;
max-width: 507px;
}
&.bottom-fixed {
position: absolute;
bottom: 30px;
width: 88.3%;
}
}
.petition-form-textfield {
width: 96%;
margin: 0 0 10px;
padding: 8px 2%;
font: 400 17px/28px 'Open Sans', arial, sans-serif;
border: $input-border;
}
.petition-form-checkbox {
display: inline-block;
vertical-align: top;
width: 3%;
margin: 16px 10px 0 0;
}
.petition-form-label {
display: inline-block;
vertical-align: top;
width: 85%;
padding: 10px 0;
font-size: 16px;
}
.petition-form-button {
width: 100%;
margin: 0 0 10px;
padding: 8px 2%;
font: 400 17px/28px 'Open Sans', arial, sans-serif;
color: $button-text-color;
border: 0;
background: $button-color;
text-align: center;
cursor: pointer;
&:hover {
background: $button-hover-color;
}
}
.petition-form-note {
font-size: 12px;
}
.petition-update-container {
width: 40%;
float: left;
}
.petition-details-container {
display: flex;
}
.petition-details {
display: inline-block;
vertical-align: top;
flex: 1;
width: 44%;
margin: 0 1% 0 0;
padding: 25px 3%;
background: $light-grey;
h2 {
color: #6f6f6f;
}
&.history {
margin: 0 0 0 1%;
background: #bcf9c7;
h2 {
color: #1ba734;
}
}
}
.petition_field_label {
float: left;
width: 40%;
font-weight: bold;
padding: 0 0 5px 0;
}
.petition_field_data {
float: left;
width: 58%;
padding: 0 0 5px 0;
}
.petition-form-indication-dropdown {
display: block;
width: 300px;
margin: 0 auto;
font-size: 16px;
}
.social-bar {
padding: 18px 0;
background: #898989;
}
.social-bar-content {
width: $page-width;
margin: 0 auto;
font: 400 18px/21px 'Open Sans', arial, sans-serif;
color: #e5e5e5;
text-align: center;
}
.social-bar-label {
display: inline-block;
vertical-align: top;
padding: 17px 20px 0 0;
}
.social-bar-side {
padding: 20px;
background: #898989;
}
.social-bar-side-content {
text-align: center;
font: 400 14px/21px 'Open Sans', arial, sans-serif;
.share-button-url {
width: 90%;
}
}
.petition-updates {
padding: 20px;
background: #f5f5f5;
.update-container {
width: 70%;
margin: 0 auto 25px;
}
}
.side-article-container {
padding: 20px;
background: #f5f5f5;
}
.side-article-container-green {
padding: 20px;
background: #bcf9c7;
}
.side-article-container-blue {
padding: 20px;
background: #DDF4FF;
}
.side-article-title {
text-transform: none;
font: 300 22px/24px 'Open Sans', arial, sans-serif;
color: $green;
}
.petition-state-container {
width: 190px;
margin: 0 auto;
background: asset-url('indicator.png') 0 18px no-repeat;
}
.petition-state-label {
padding: 0 0 0 40px;
font: 600 18px/65px 'Open Sans', arial, sans-serif;
color: #4c9242;
&.passed {
color: #908d8d;
}
&.active {
background: asset-url('indicator-dot.png') 7px 25px no-repeat;
color: #000;
}
}
.page.signatures {
display: flex;
}
.petition-signatures-wrapper {
display: inline-block;
vertical-align: top;
width: 60%;
}
.petition-signatures-side {
position: relative;
display: inline-block;
vertical-align: top;
width: 35%;
margin: 0 0 0 5%;
padding: 30px 0 0;
}
.petition-signature-byline {
font-size: 14px;
max-height: 60px;
overflow: hidden;
}
.petition-signature-location, .petition-signature-occupation {
font-size: 14px;
}
.petition-signature-actions {
font-size: 14px;
float: right;
}
a {
&.signature-link {
color: #AAA;
display: inline-block;
font-size: 13px;
padding: 0 0 0 18px;
margin: 0 15px 0 0;
background: asset-url('icon_link.gif') 1px 5px no-repeat;
&:hover {
background: asset-url('icon_link.gif') 1px -31px no-repeat;
color: #555;
}
}
&.signature-report {
color: #AAA;
display: inline-block;
font-size: 13px;
padding: 0 0 0 18px;
margin: 0 15px 0 0;
background: asset-url('icon_report.gif') 1px 5px no-repeat;
&:hover {
background: asset-url('icon_report.gif') 1px -31px no-repeat;
color: #555;
}
}
}
span.signature-time {
color: #888;
font-size: 13px;
padding: 0;
margin: 0 15px 0 0;
}
.petition-signatures-side-float {
width: 100%;
&.floating {
/* position:fixed; top:30px; width:35%; max-width:407px;*/
}
&.bottom-fixed {
/* position:absolute; bottom:30px; */
}
}
.petition-signatures-container {
margin-bottom: 20px;
}
.petition-signature {
position: relative;
float: left;
width: 19.5%;
margin: 0 2% 2% 0;
padding: 20px 2%;
height: 100px;
background: $light-grey;
}
.petition-signature-list {
position: relative;
margin: 0 0 10px;
padding: 0 0 10px;
border-bottom: 1px solid $light-grey;
}
.petition-signature:nth-child(4n) {
margin: 0 0 2% 0;
}
.petition-signature-name {
font: 400 18px/26px 'Open Sans', arial, sans-serif;
}
.petition-signature-time {
position: absolute;
bottom: 15px;
right: 15px;
font: 400 12px/14px 'Open Sans', arial, sans-serif;
color: #6f6f6f;
}
.navigation-bar, .pagination {
text-align: center;
}
.navigation-bar-item {
padding: 10px 10px;
font: 400 18px/21px 'Open Sans', arial, sans-serif;
color: $button-color;
&:hover, &.active {
color: #000;
}
}
.navigation-toall {
font: 400 18px/21px 'Open Sans', arial, sans-serif;
color: #2b96c7;
display: inline-block;
margin-bottom: 0px;
}
.navigation-loadmore {
display: inline-block;
width: 47%;
padding: 1%;
border: 0;
margin-bottom: 25px;
background: $button-color;
color: $button-text-color;
font: 400 18px/28px 'Open Sans', arial, sans-serif;
cursor: pointer;
}
.navigation-bar-next {
padding: 10px 10px 10px 40px;
font: 400 18px/21px 'Open Sans', arial, sans-serif;
color: $button-color;
}
.petitions-overview-wrapper .petition-section-title {
margin: 0 0 15px;
font: 300 32px/36px 'Open Sans', arial, sans-serif;
}
.petition-overview-title {
width: 60%;
margin: 0 auto 50px;
font: 300 20px/30px 'Open Sans', arial, sans-serif;
text-align: center;
}
.petition-section-title.left {
text-align: left;
}
.petition-overview {
float: left;
width: 23.5%;
margin: 0 2% 2% 0;
background: $light-grey;
&:nth-child(4n) {
margin: 0 0 2%;
}
}
.petition-overview-image-container {
position: relative;
display: block;
}
.petition-overview-graph {
position: absolute;
top: 0;
left: 0;
height: 96%;
width: 100%;
background: #bcf9c7;
display: none;
img {
width: 100%;
}
}
.petition-overview-image {
width: 100%;
}
.petition-overview-image-container:hover .petition-overview-graph {
display: block;
}
.petition-overview-info-container {
padding: 2px 4% 5px;
}
.petition-overview-info-title {
height: 68px;
font: 700 16px/21px 'Open Sans', arial, sans-serif;
text-transform: none;
letter-spacing: 0;
color: #000;
a {
color: #000;
}
}
.petition-overview-info-time {
float: right;
width: 70%;
text-align: right;
font: 300 12px/22px 'Open Sans', arial, sans-serif;
color: #808080;
}
.petitions-overview-sort-options-container {
margin: 0 0 35px;
font: 400 16px/21px 'Open Sans', arial, sans-serif;
text-align: center;
}
.petitions-overview-sort-option {
color: $button-color;
&.active {
color: #000;
font-weight: 700;
}
}
.start-petition-form-row {
display: flex;
background: #f5f5f5;
&:last-child .start-petition-form-cell.label {
padding: 58px 3%;
}
}
.start-petition-form-cell.input {
width: 42%;
display: inline-block;
vertical-align: top;
padding: 20px 4% 0;
select {
margin: 0 10px 0 0;
padding: 10px;
font-size: 14px;
}
input[type="checkbox"] {
display: inline-block;
max-width: 10%;
vertical-align: top;
margin: 6px 7px 0 0;
}
label {
display: inline-block;
max-width: 90%;
vertical-align: top;
}
}
.start-petition-form-cell-upload-image {
display: block;
width: 100px;
padding-bottom: 10px;
padding-top: 10px;
}
.start-petition-form-cell-title {
position: relative;
margin: 0 0 5px;
font: 400 18px/28px 'Open Sans', arial, sans-serif;
}
h2.start-petition-form-cell-title {
font: 300 30px/21px 'Open Sans', arial, sans-serif;
color: #16962e;
padding-top: 30px;
}
.start-petition-form-cell-input {
width: 94%;
padding: 3%;
border: $input-border;
}
.start-petition-form-cell-input-readonly {
width: 94%;
padding: 3%;
background-color: #f5f5f5;
border: $input-border;
}
.start-petition-form-cell-input.small {
width: 36%;
}
.start-petition-form-cell {
&.label {
width: 40%;
display: inline-block;
vertical-align: top;
padding: 48px 3% 0;
font: 400 14px/20px 'Open Sans', arial, sans-serif;
border-left: 1px dashed #c5c5c6;
}
&.double {
display: flex;
justify-content: space-between;
}
}
.start-petition-form-cell-half .start-petition-form-cell-input {
padding: 12px 3%;
}
.start-petition-form-cell-select.large {
width: 100%;
}
.start-petition-form-cell.small {
padding: 10px 4% 0;
}
.start-petition-form-cell-stats {
font-size: 12px;
line-height: 16px;
}
.start-petition-form-cell-label {
margin: 0 5px 0 0;
padding: 5px 10px;
background: $base-background-color;
border-radius: 3px;
}
.start-petition-form-cell-charcount {
position: absolute;
top: 4px;
right: 0;
font: 400 14px/28px 'Open Sans', arial, sans-serif;
}
.error-too-long {
color: $form-error-color;
font-weight: 700;
}
.news-intro-blocks-container {
display: flex;
}
.news-intro-block {
display: inline-block;
flex: 1;
vertical-align: top;
margin: 0 1% 0 0;
padding: 20px 2%;
background: #bcf9c7;
&.right {
margin: 0 0 0 1%;
}
}
.news-intro-block-date {
font-size: 13px;
}
.news-intro-block-title {
margin: 0 0 4px;
font: 700 16px/21px 'Open Sans', arial, sans-serif;
color: #000;
letter-spacing: 0;
text-transform: none;
}
.read-more-handler {
color: $button-color;
cursor: pointer;
}
.read-more-content {
display: none;
}
.read-more-help-handler {
color: $button-color;
cursor: pointer;
padding: 5px 0px;
border-top: 1px solid $light-grey;
}
.read-more-help-content {
display: none;
padding: 15px 0px 5px;
border-top: 1px solid $light-grey;
}
.main-container-grey {
padding: 30px;
background: #f5f5f5;
}
.main-container-grey-title {
font: 300 21px/26px 'Open Sans', arial, sans-serif;
color: #16962e;
}
.main-container-grey-itemswrapper {
border-top: 1px solid #d1d1d1;
}
.main-container-grey-item {
display: block;
padding: 3px 35px 3px 0;
color: #000;
font-size: 16px;
border-bottom: 1px solid #d1d1d1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: asset-url('blue-arrow-right.png') 98% center no-repeat;
}