app/assets/stylesheets/member-facing/petition.scss
$mobile-width: 700px;
html[dir=rtl] .petition-bar,
html[dir=rtl] .fundraiser-bar,
html[dir=rtl] .action-form {
&__welcome-name {
padding-right: 10px;
padding-left: unset;
}
}
.petition-bar,
.fundraiser-bar,
.action-form {
color: $navy;
$padding: 26px;
position: relative;
z-index: 600;
@media (max-width: $mobile-width) {
max-width: none;
}
&.petition-bar.stuck-right {
margin-top: 17px;
}
&.stuck-right {
.petition-bar__main,
.fundraiser-bar__main {
height: auto !important;
}
.petition-bar__title-bar {
clip-path: none;
-webkit-clip-path: none;
top: 0 !important;
&::after {
display: none;
}
}
.petition-bar__title {
height: 67px;
box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.07);
border: solid 0.4px #00c0cf;
@include box-sizing(border-box);
padding: 21px;
width: 100%;
}
}
&__top {
background: $overcast-gray;
color: black;
padding: $padding;
position: relative;
min-height: 68px;
overflow-y: auto;
box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.07);
border: solid 0.4px #dfdfdf;
&.fundraiser-bar__top {
@include box-sizing(border-box);
}
}
&__main {
background: $chalk-gray;
padding: $padding;
box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.07);
border: solid 0.4px #dfdfdf;
position: absolute;
width: 100%;
@include box-sizing(border-box);
}
&__title-bar {
position: absolute;
top: 0 !important;
left: 0;
width: 100%;
overflow: hidden;
&::after {
display: none;
}
}
&__title {
@include box-sizing(border-box);
padding: 18px 16px;
background: $teal;
color: white;
&.petition-bar__title {
width: 100%;
}
}
&__content {
position: relative;
}
&__submit-button {
margin-top: 15px;
float: left;
margin-bottom: 30px;
}
&__submit-button:focus {
background: #f73415;
box-shadow: 2px 2px 6px 2px #b96f63;
}
&__target {
margin: 0 0 8px;
font-weight: bold;
line-height: 1.2em;
font-size: 16px;
}
&__petition-text {
font-size: 12px;
line-height: 20px;
}
&__welcome-text-container {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
}
&__welcome-text {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
display: flex;
max-width: 500px;
float: left;
overflow: hidden;
padding: 0;
@include box-sizing(border-box);
position: relative;
}
&__welcome-user {
display: flex;
align-items: center;
}
&__user-icon {
color: #00c0cf;
font-size: 26px;
&--small.fa {
font-size: 22px;
}
}
&__welcome-name {
padding-left: 10px;
font-weight: 600;
}
&__clear-form {
font-size: 12px;
text-align: end;
color: #f8482c;
}
&__fine-print {
font-size: 12px;
color: $slate-gray;
line-height: 16px;
width: 100%;
float: left;
margin-top: 10px;
}
}
.overlay-toggle {
&__mobile-ui {
@media (min-width: $mobile-width + 1) {
display: none;
}
&__bottom-bar {
position: fixed;
bottom: 0;
left: -4%;
padding: 20px 8%;
height: 60px;
width: 92%;
z-index: 300;
text-align: center;
background-color: $overcast-gray;
@include transition(bottom 0.2s ease-in-out);
}
}
&__close-button {
color: $navy;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
z-index: 100;
background: white;
position: fixed;
height: 20px;
width: 20px;
padding: 5px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}
}
@media (max-width: $mobile-width) {
.overlay-toggle__mobile-view {
position: absolute;
width: 100vw;
height: 100vh;
overflow-y: scroll;
// left: -4%;
// z-index: 400;
// width: 100%;
// height: 100%;
// overflow-y: visible;
padding: 0 4%;
margin: 0;
background: $chalk-gray;
@include transition(top 0.4s ease-in-out);
&--closed {
top: 2000px;
}
&--open {
top: 0;
.petition-bar__mobile-ui__bottom-bar {
bottom: -100px;
}
}
}
.petition-bar__content,
.fundraiser-bar__content {
height: 100%;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}