Initial project structure with sails.js
This commit is contained in:
41
assets/styles/components/ajax-button.component.less
Normal file
41
assets/styles/components/ajax-button.component.less
Normal file
@ -0,0 +1,41 @@
|
||||
|
||||
/**
|
||||
* <ajax-button>
|
||||
*
|
||||
* App-wide styles for our ajax buttons.
|
||||
*/
|
||||
|
||||
[parasails-component='ajax-button'] {
|
||||
.button-loader, .button-loading {
|
||||
display: none;
|
||||
margin: auto;
|
||||
.loading-dot {
|
||||
opacity: 0;
|
||||
display: inline;
|
||||
.fade-in();
|
||||
.animation-duration(1s);
|
||||
.animation-iteration-count(infinite);
|
||||
.animation-direction(linear);
|
||||
&.dot1 {
|
||||
.animation-delay(0.25s);
|
||||
}
|
||||
&.dot2 {
|
||||
.animation-delay(0.5s);
|
||||
}
|
||||
&.dot3 {
|
||||
.animation-delay(0.75s);
|
||||
}
|
||||
&.dot4 {
|
||||
.animation-delay(1s);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.syncing {
|
||||
.button-loader, .button-loading {
|
||||
display: inline-block;
|
||||
}
|
||||
.button-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
9
assets/styles/components/cloud-error.component.less
Normal file
9
assets/styles/components/cloud-error.component.less
Normal file
@ -0,0 +1,9 @@
|
||||
/**
|
||||
* <cloud-error>
|
||||
*
|
||||
* App-wide styles for our cloud-errors.
|
||||
*/
|
||||
|
||||
[parasails-component='cloud-error'] {
|
||||
// ...
|
||||
}
|
||||
92
assets/styles/components/modal.component.less
Normal file
92
assets/styles/components/modal.component.less
Normal file
@ -0,0 +1,92 @@
|
||||
/**
|
||||
* <modal>
|
||||
*
|
||||
* App-wide styles for our modals.
|
||||
*/
|
||||
|
||||
[parasails-component='modal'] {
|
||||
-webkit-overflow-scrolling: touch;//« makes this actually scrollable on certain phones
|
||||
[purpose='modal-dialog'] {
|
||||
z-index: 100;
|
||||
position: relative;
|
||||
max-width: 700px;
|
||||
[purpose='modal-content'] {
|
||||
max-width: 700px;
|
||||
[purpose='modal-close-button'] {
|
||||
.btn-reset();
|
||||
opacity: 0.6;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Custom styles for the Bootstrap modal:
|
||||
// (Want to use Bootstrap's default styles? Just comment out the rest of the rules below)
|
||||
.petticoat {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 75px;// should cover topbar
|
||||
z-index: 50;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
background-color: @accent-white;
|
||||
}
|
||||
.modal-content {
|
||||
border-radius: 0px;
|
||||
border-color: @accent-white;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
.modal-header {
|
||||
border-bottom: none;
|
||||
display: block;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding-bottom: 0px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-top: 0px;
|
||||
.modal-title {
|
||||
font-weight: @bold;
|
||||
}
|
||||
.modal-intro {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
color: @text-muted;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
hr {
|
||||
margin-top: 25px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 10px;
|
||||
width: 100px;
|
||||
height: 2px;
|
||||
border-top: 2px solid @brand;
|
||||
}
|
||||
}
|
||||
.modal-body {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
.modal-footer {
|
||||
padding-top: 25px;
|
||||
padding-bottom: 0px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modal backdrop styles are exposed globally here because this gets appended to the <body>
|
||||
.modal-backdrop {
|
||||
background-color: @accent-white;
|
||||
&.show {
|
||||
opacity: 0.95;
|
||||
}
|
||||
}
|
||||
65
assets/styles/components/stripe-card-element.component.less
Normal file
65
assets/styles/components/stripe-card-element.component.less
Normal file
@ -0,0 +1,65 @@
|
||||
/**
|
||||
* <stripe-card-element>
|
||||
*/
|
||||
[parasails-component='stripe-card-element'] {
|
||||
.card-element-wrapper {
|
||||
position: relative;
|
||||
.card-element {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-right: 30px;
|
||||
&.pseudofocused {
|
||||
// These should mimic your normal form inputs' :focus styles:
|
||||
border-color: #80bdff;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
||||
}
|
||||
}
|
||||
.status-indicator {
|
||||
font-size: 15px;
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 8px;
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
&.syncing {
|
||||
-webkit-animation: fa-spinner-rotate 1.5s infinite linear;
|
||||
animation: fa-spinner-rotate 1.5s infinite linear;
|
||||
@-webkit-keyframes fa-spinner-rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotate-clockwise {
|
||||
0% {
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.secret-card-element-wrapper {
|
||||
opacity: 0;
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.card-element-wrapper {
|
||||
.card-element {
|
||||
padding-right: 20px;
|
||||
}
|
||||
.status-indicator {
|
||||
right: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user