145 lines
2.6 KiB
SCSS
145 lines
2.6 KiB
SCSS
/* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later
|
|
Full license explanation at https://github.com/houdiniproject/houdini/blob/master/LICENSE */
|
|
@import 'mixins';
|
|
@import 'nonprofits/btn/page';
|
|
@import 'components/page_tabs';
|
|
@import 'components/steps_menu';
|
|
@import 'components/help_box';
|
|
@import 'components/animations';
|
|
|
|
.stepsMenu {
|
|
margin-top: 15px;
|
|
@include columns(3.5);
|
|
}
|
|
.step {
|
|
padding-left: 15px;
|
|
@include columns-right(8.5);
|
|
}
|
|
.step label {
|
|
width: 100%;
|
|
}
|
|
.step-header {
|
|
padding: 5px;
|
|
text-align: center;
|
|
}
|
|
.step-header * {
|
|
@include open-sans;
|
|
font-weight: bold;
|
|
}
|
|
.step-header-title {
|
|
margin: 5px 0;
|
|
}
|
|
.step-inner {
|
|
background: $fog;
|
|
border: 1px solid rgba(black, 0.05);
|
|
padding: 15px;
|
|
overflow: auto;
|
|
}
|
|
.step-footer {
|
|
padding: 15px 15px 0 15px;
|
|
text-align: center;
|
|
}
|
|
.appearance label {
|
|
text-align: center;
|
|
cursor: pointer;
|
|
display: block;
|
|
padding: 15px;
|
|
}
|
|
.appearance img {
|
|
max-height: 180px;
|
|
}
|
|
.appearance table {
|
|
width: 100%;
|
|
}
|
|
.appearance td {
|
|
width: 50%;
|
|
vertical-align: middle;
|
|
}
|
|
.appearance td:nth-of-type(1){
|
|
border-right: 1px dashed rgba(black, 0.08);
|
|
}
|
|
.appearance tr,
|
|
.customText-wrapper,
|
|
.step.type label,
|
|
.step.amounts label,
|
|
.step.designations label {
|
|
border-bottom: 1px dashed rgba(black, 0.08);
|
|
}
|
|
.step.designations label,
|
|
.step.amounts label {
|
|
padding: 10px 0;
|
|
}
|
|
.customText-wrapper {
|
|
margin-bottom: 10px;
|
|
}
|
|
.appearance input[type='text'] {
|
|
margin: 10px 0 0 0;
|
|
max-width: 300px;
|
|
}
|
|
.customText-text {
|
|
display: block;
|
|
font-size: 20px;
|
|
min-height: 25px;
|
|
}
|
|
.step.type label {
|
|
line-height: 30px;
|
|
overflow: auto;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
.step.type img {
|
|
vertical-align: middle;
|
|
float: right;
|
|
width: 25px;
|
|
margin: 5px 5px 15px 5px;
|
|
}
|
|
.step.preview ul {
|
|
margin: 10px 0 0 0;
|
|
}
|
|
.advanced section {
|
|
padding: 20px;
|
|
}
|
|
.advanced section h3 {
|
|
text-align: center;
|
|
margin: 10px auto;
|
|
}
|
|
.advanced section h5 {
|
|
line-height: 1;
|
|
color: rgba($charcoal, 0.9);
|
|
margin: 30px 0 10px 0;
|
|
}
|
|
.advanced textarea {
|
|
margin: 0 0 20px 0;
|
|
}
|
|
.advanced .no-js {
|
|
border: 5px $light-pollen solid;
|
|
padding: 20px;
|
|
}
|
|
.advanced .yes-js {
|
|
padding: 20px;
|
|
margin-top: 40px;
|
|
border: 5px $faded-sky solid;
|
|
}
|
|
|
|
@include keyframes(popUpToFade) {
|
|
8% { @include transform(translateY(3px)); }
|
|
12% {
|
|
@include opacity(1);
|
|
@include transform(translateY(5px));
|
|
}
|
|
90% {
|
|
@include opacity(1);
|
|
}
|
|
100% {
|
|
visibility: hidden;
|
|
@include transform(translateY(5px));
|
|
}
|
|
}
|
|
.helpBoxWrapper {
|
|
@include transform(translateY(200px));
|
|
@include opacity(0);
|
|
position: fixed;
|
|
bottom: 80px;
|
|
right: 60px;
|
|
@include animation('popUpToFade 10s ease-out 2.5s forwards');
|
|
}
|