Initial project structure with sails.js
This commit is contained in:
37
assets/styles/bootstrap-overrides.less
vendored
Normal file
37
assets/styles/bootstrap-overrides.less
vendored
Normal file
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* This file is for overriding some default bootstrap styles.
|
||||
*
|
||||
* > NOTE THAT THIS FILE AFFECTS GLOBAL STYLES.
|
||||
*/
|
||||
|
||||
// lesshint-disable
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
// lesshint-enable
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Get rid of weird background on <a>s with button styles
|
||||
.btn, [type='button'] {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// Custom link styles within bodies of text
|
||||
h1, h2, h3, h4, h5, h6, p, li, blockquote, label {
|
||||
>a:not(.btn), small >a:not(.btn) {
|
||||
color: @brand;
|
||||
border-bottom: 1px solid @text-normal;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: @text-normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 3px solid @border-lt-gray;
|
||||
padding-left: 20px;
|
||||
}
|
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
42
assets/styles/importer.less
Normal file
42
assets/styles/importer.less
Normal file
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* importer.less
|
||||
*
|
||||
* By default, new Sails projects are configured to compile this file
|
||||
* from LESS to CSS. Unlike CSS files, LESS files are not compiled and
|
||||
* included automatically unless they are imported below.
|
||||
*
|
||||
* For more information see:
|
||||
* https://sailsjs.com/anatomy/assets/styles/importer-less
|
||||
*/
|
||||
|
||||
// Mixins and variables (LESS mixins/variables only, no global selectors)
|
||||
@import 'mixins-and-variables/index.less';
|
||||
|
||||
// Overall layout (contains global selectors)
|
||||
@import 'bootstrap-overrides.less';
|
||||
@import 'layout.less';
|
||||
|
||||
// Per-component styles
|
||||
@import 'components/stripe-card-element.component.less';
|
||||
@import 'components/ajax-button.component.less';
|
||||
@import 'components/modal.component.less';
|
||||
@import 'components/cloud-error.component.less';
|
||||
|
||||
// Per-page styles
|
||||
@import 'pages/homepage.less';
|
||||
@import 'pages/dashboard/welcome.less';
|
||||
@import 'pages/entrance/signup.less';
|
||||
@import 'pages/entrance/confirmed-email.less';
|
||||
@import 'pages/entrance/login.less';
|
||||
@import 'pages/entrance/forgot-password.less';
|
||||
@import 'pages/entrance/new-password.less';
|
||||
@import 'pages/account/account-overview.less';
|
||||
@import 'pages/account/edit-password.less';
|
||||
@import 'pages/account/edit-profile.less';
|
||||
@import 'pages/legal/terms.less';
|
||||
@import 'pages/legal/privacy.less';
|
||||
@import 'pages/faq.less';
|
||||
@import 'pages/contact.less';
|
||||
@import 'pages/404.less';
|
||||
@import 'pages/500.less';
|
||||
@import 'pages/498.less';
|
59
assets/styles/layout.less
Normal file
59
assets/styles/layout.less
Normal file
@@ -0,0 +1,59 @@
|
||||
@footer-height: 40px;
|
||||
@container-md-max-width: 1100px;
|
||||
|
||||
[v-cloak] { display: none; }
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[purpose='page-wrap'] {
|
||||
height: 100%;
|
||||
/* lesshint-disable */height: auto !important;/* lesshint-enable */
|
||||
// ^^The above is to disable "importantRule" and "duplicateProperty" rules.
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
padding-bottom: @footer-height;
|
||||
}
|
||||
|
||||
[purpose='page-footer'] {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
height: @footer-height;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
body.detected-mobile {
|
||||
// Above and beyond the media queries below, this selector (which relies on
|
||||
// `parasails` automatically attaching this class, if appropriate) contains
|
||||
// styles intended to be activated specifically when loaded from a recognized
|
||||
// mobile device, regardless of viewport dimensions. This includes tablet
|
||||
// devices (like the iPad) as well as handset devices (like the iPhone).
|
||||
// …
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
[purpose='page-wrap'] {
|
||||
padding-bottom: 75px;
|
||||
[purpose='page-footer'] {
|
||||
height: 75px;
|
||||
[purpose='footer-copy'], [purpose='footer-nav'] {
|
||||
width: 100%;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
[purpose='page-wrap'] {
|
||||
padding-bottom: 100px;
|
||||
[purpose='page-footer'] {
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
}
|
270
assets/styles/mixins-and-variables/animations.less
Normal file
270
assets/styles/mixins-and-variables/animations.less
Normal file
@@ -0,0 +1,270 @@
|
||||
.animation-delay(@delay) {
|
||||
-moz-animation-delay: @delay;
|
||||
-webkit-animation-delay: @delay;
|
||||
-ms-animation-delay: @delay;
|
||||
-o-animation-delay: @delay;
|
||||
animation-delay: @delay;
|
||||
}
|
||||
|
||||
.animation-name(@name) {
|
||||
-moz-animation-name: @name;
|
||||
-webkit-animation-name: @name;
|
||||
-ms-animation-name: @name;
|
||||
-o-animation-name: @name;
|
||||
animation-name: @name;
|
||||
}
|
||||
|
||||
.animation-duration(@duration) {
|
||||
-moz-animation-duration: @duration;
|
||||
-webkit-animation-duration: @duration;
|
||||
-ms-animation-duration: @duration;
|
||||
-o-animation-duration: @duration;
|
||||
animation-duration: @duration;
|
||||
}
|
||||
|
||||
.animation-iteration-count(@iteration-count) {
|
||||
-moz-animation-iteration-count: @iteration-count;
|
||||
-webkit-animation-iteration-count: @iteration-count;
|
||||
-ms-animation-iteration-count: @iteration-count;
|
||||
-o-animation-iteration-count: @iteration-count;
|
||||
animation-iteration-count: @iteration-count;
|
||||
}
|
||||
|
||||
.animation-direction(@direction) {
|
||||
-moz-animation-direction: @direction;
|
||||
-webkit-animation-direction: @direction;
|
||||
-ms-animation-direction: @direction;
|
||||
-o-animation-direction: @direction;
|
||||
animation-direction: @direction;
|
||||
}
|
||||
|
||||
.animation-timing-function(@timingFunction) {
|
||||
-moz-animation-timing-function: @timingFunction;
|
||||
-webkit-animation-timing-function: @timingFunction;
|
||||
-ms-animation-timing-function: @timingFunction;
|
||||
-o-animation-timing-function: @timingFunction;
|
||||
animation-timing-function: @timingFunction;
|
||||
}
|
||||
|
||||
.transition (@transition) {
|
||||
-webkit-transition: @transition;
|
||||
-moz-transition : @transition;
|
||||
-ms-transition : @transition;
|
||||
-o-transition : @transition;
|
||||
}
|
||||
|
||||
.translate (@x, @y:0) {
|
||||
-webkit-transform: translate(@x, @y);
|
||||
-moz-transform : translate(@x, @y);
|
||||
-ms-transform : translate(@x, @y);
|
||||
-o-transform : translate(@x, @y);
|
||||
transform : translate(@x, @y);
|
||||
}
|
||||
|
||||
//Animations
|
||||
.fade-in() {
|
||||
.animation-name(fade-in);
|
||||
|
||||
@-webkit-keyframes fade-in {
|
||||
0% {opacity: 0;}// lesshint spaceBeforeBrace: false
|
||||
100% {opacity: 1;}// lesshint spaceBeforeBrace: false
|
||||
}
|
||||
|
||||
@-moz-keyframes fade-in {
|
||||
0% {opacity: 0;}// lesshint spaceBeforeBrace: false
|
||||
100% {opacity: 1;}// lesshint spaceBeforeBrace: false
|
||||
}
|
||||
|
||||
@-o-keyframes fade-in {
|
||||
0% {opacity: 0;}// lesshint spaceBeforeBrace: false
|
||||
100% {opacity: 1;}// lesshint spaceBeforeBrace: false
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {opacity: 0;}// lesshint spaceBeforeBrace: false
|
||||
100% {opacity: 1;}// lesshint spaceBeforeBrace: false
|
||||
}
|
||||
}
|
||||
|
||||
.loader(@dot-color: @accent-white) {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
|
||||
.loading-dot {
|
||||
border-radius: 50%;
|
||||
background-color: @dot-color;
|
||||
float: left;
|
||||
opacity: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 5px;
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Special rotation animation for a font awesome-based spinner:
|
||||
.fa-spinner-rotation() {
|
||||
-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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skid() {
|
||||
.animation-name(skid);
|
||||
.animation-duration(2.5s);
|
||||
.animation-iteration-count(infinite);
|
||||
.animation-timing-function(linear);
|
||||
@-webkit-keyframes skid {
|
||||
0% {-webkit-transform: translate(0px, 0px);}// lesshint spaceBeforeBrace: false
|
||||
10% {-webkit-transform: translate(-1px, -1px);}// lesshint spaceBeforeBrace: false
|
||||
20% {-webkit-transform: translate(-2px, -2px);}// lesshint spaceBeforeBrace: false
|
||||
30% {-webkit-transform: translate(-3px, -2px);}// lesshint spaceBeforeBrace: false
|
||||
40% {-webkit-transform: translate(-4px, -1px);}// lesshint spaceBeforeBrace: false
|
||||
50% {-webkit-transform: translate(-5px, 0px);}// lesshint spaceBeforeBrace: false
|
||||
60% {-webkit-transform: translate(-4px, 1px);}// lesshint spaceBeforeBrace: false
|
||||
70% {-webkit-transform: translate(-3px, 2px);}// lesshint spaceBeforeBrace: false
|
||||
80% {-webkit-transform: translate(-2px, 2px);}// lesshint spaceBeforeBrace: false
|
||||
90% {-webkit-transform: translate(-1px, 1px);}// lesshint spaceBeforeBrace: false
|
||||
100% {-webkit-transform: translate(0, 0px);}// lesshint spaceBeforeBrace: false
|
||||
}
|
||||
@-moz-keyframes skid {
|
||||
0% {-moz-transform: translate(0px, 0px);}// lesshint spaceBeforeBrace: false
|
||||
10% {-moz-transform: translate(-1px, -1px);}// lesshint spaceBeforeBrace: false
|
||||
20% {-moz-transform: translate(-2px, -2px);}// lesshint spaceBeforeBrace: false
|
||||
30% {-moz-transform: translate(-3px, -2px);}// lesshint spaceBeforeBrace: false
|
||||
40% {-moz-transform: translate(-4px, -1px);}// lesshint spaceBeforeBrace: false
|
||||
50% {-moz-transform: translate(-5px, 0px);}// lesshint spaceBeforeBrace: false
|
||||
60% {-moz-transform: translate(-4px, 1px);}// lesshint spaceBeforeBrace: false
|
||||
70% {-moz-transform: translate(-3px, 2px);}// lesshint spaceBeforeBrace: false
|
||||
80% {-moz-transform: translate(-2px, 2px);}// lesshint spaceBeforeBrace: false
|
||||
90% {-moz-transform: translate(-1px, 1px);}// lesshint spaceBeforeBrace: false
|
||||
100% {-moz-transform: translate(0, 0px);}// lesshint spaceBeforeBrace: false
|
||||
}
|
||||
@-o-keyframes skid {
|
||||
0% {-o-transform: translate(0px, 0px);}// lesshint spaceBeforeBrace: false
|
||||
10% {-o-transform: translate(-1px, -1px);}// lesshint spaceBeforeBrace: false
|
||||
20% {-o-transform: translate(-2px, -2px);}// lesshint spaceBeforeBrace: false
|
||||
30% {-o-transform: translate(-3px, -2px);}// lesshint spaceBeforeBrace: false
|
||||
40% {-o-transform: translate(-4px, -1px);}// lesshint spaceBeforeBrace: false
|
||||
50% {-o-transform: translate(-5px, 0px);}// lesshint spaceBeforeBrace: false
|
||||
60% {-o-transform: translate(-4px, 1px);}// lesshint spaceBeforeBrace: false
|
||||
70% {-o-transform: translate(-3px, 2px);}// lesshint spaceBeforeBrace: false
|
||||
80% {-o-transform: translate(-2px, 2px);}// lesshint spaceBeforeBrace: false
|
||||
90% {-o-transform: translate(-1px, 1px);}// lesshint spaceBeforeBrace: false
|
||||
100% {-o-transform: translate(0, 0px);}// lesshint spaceBeforeBrace: false
|
||||
}
|
||||
@keyframes skid {
|
||||
0% {transform: translate(0px, 0px);}// lesshint spaceBeforeBrace: false
|
||||
10% {transform: translate(-1px, -1px);}// lesshint spaceBeforeBrace: false
|
||||
20% {transform: translate(-2px, -2px);}// lesshint spaceBeforeBrace: false
|
||||
30% {transform: translate(-3px, -2px);}// lesshint spaceBeforeBrace: false
|
||||
40% {transform: translate(-4px, -1px);}// lesshint spaceBeforeBrace: false
|
||||
50% {transform: translate(-5px, 0px);}// lesshint spaceBeforeBrace: false
|
||||
60% {transform: translate(-4px, 1px);}// lesshint spaceBeforeBrace: false
|
||||
70% {transform: translate(-3px, 2px);}// lesshint spaceBeforeBrace: false
|
||||
80% {transform: translate(-2px, 2px);}// lesshint spaceBeforeBrace: false
|
||||
90% {transform: translate(-1px, 1px);}// lesshint spaceBeforeBrace: false
|
||||
100% {transform: translate(0, 0px);}// lesshint spaceBeforeBrace: false
|
||||
}
|
||||
}
|
||||
|
||||
.fly-fade() {
|
||||
.animation-name(flyfade);
|
||||
.animation-duration(7s);
|
||||
.animation-iteration-count(infinite);
|
||||
.animation-timing-function(linear);
|
||||
@-webkit-keyframes flyfade {
|
||||
0% {-webkit-transform: translate(0px, 0px); opacity: 0;}// lesshint spaceBeforeBrace: false
|
||||
25% { opacity: 1;}// lesshint spaceBeforeBrace: false
|
||||
50% {-webkit-transform: translate(110px, 0px);}// lesshint spaceBeforeBrace: false
|
||||
75% { opacity: 1;}// lesshint spaceBeforeBrace: false
|
||||
100% {-webkit-transform: translate(220px, 0); opacity: 0;}// lesshint spaceBeforeBrace: false
|
||||
}
|
||||
@-moz-keyframes flyfade {
|
||||
0% {-moz-transform: translate(0, 0px); opacity: 0;}// lesshint spaceBeforeBrace: false
|
||||
25% { opacity: 1;}// lesshint spaceBeforeBrace: false
|
||||
50% {-moz-transform: translate(110px, 0px); opacity: 1;}// lesshint spaceBeforeBrace: false
|
||||
75% { opacity: 1;}// lesshint spaceBeforeBrace: false
|
||||
100% {-moz-transform: translate(220px, 0); opacity: 0;}// lesshint spaceBeforeBrace: false
|
||||
}
|
||||
@-o-keyframes flyfade {
|
||||
0% {-o-transform: translate(0, 0px); opacity: 0;}// lesshint spaceBeforeBrace: false
|
||||
25% { opacity: 1;}// lesshint spaceBeforeBrace: false
|
||||
50% {-o-transform: translate(110px, 0px); opacity: 1;}// lesshint spaceBeforeBrace: false
|
||||
75% { opacity: 1;}// lesshint spaceBeforeBrace: false
|
||||
100% {-o-transform: translate(220px, 0); opacity: 0;}// lesshint spaceBeforeBrace: false
|
||||
}
|
||||
@keyframes flyfade {
|
||||
0% {transform: translate(0, 0px); opacity: 0;}// lesshint spaceBeforeBrace: false
|
||||
25% { opacity: 1;}// lesshint spaceBeforeBrace: false
|
||||
50% {transform: translate(110px, 0px); opacity: 1;}// lesshint spaceBeforeBrace: false
|
||||
75% { opacity: 1;}// lesshint spaceBeforeBrace: false
|
||||
100% {transform: translate(220px, 0); opacity: 0;}// lesshint spaceBeforeBrace: false
|
||||
}
|
||||
}
|
||||
|
||||
.bob() {
|
||||
.animation-name(bob);
|
||||
.animation-duration(3.2s);
|
||||
.animation-iteration-count(infinite);
|
||||
.animation-timing-function(ease-in-out);
|
||||
@-webkit-keyframes bob {
|
||||
0% {-webkit-transform: translate(0px);}// lesshint spaceBeforeBrace: false
|
||||
50% {-webkit-transform: translatey(-7px);}// lesshint spaceBeforeBrace: false
|
||||
100% {-webkit-transform: translatey(0px);}// lesshint spaceBeforeBrace: false
|
||||
}
|
||||
@-moz-keyframes bob {
|
||||
0% {-moz-transform: translatey(0px);}// lesshint spaceBeforeBrace: false
|
||||
50% {-moz-transform: translatey(-7px);}// lesshint spaceBeforeBrace: false
|
||||
100% {-moz-transform: translatey(0px);}// lesshint spaceBeforeBrace: false
|
||||
}
|
||||
@-o-keyframes bob {
|
||||
0% {-o-transform: translatey(0px);}// lesshint spaceBeforeBrace: false
|
||||
50% {-o-transform: translatey(-7px);}// lesshint spaceBeforeBrace: false
|
||||
100% {-o-transform: translatey(0px);}// lesshint spaceBeforeBrace: false
|
||||
}
|
||||
@keyframes bob {
|
||||
0% {transform: translatey(0px);}// lesshint spaceBeforeBrace: false
|
||||
50% {transform: translatey(-7px);}// lesshint spaceBeforeBrace: false
|
||||
100% {transform: translatey(0px);}// lesshint spaceBeforeBrace: false
|
||||
}
|
||||
}
|
||||
|
13
assets/styles/mixins-and-variables/buttons.less
Normal file
13
assets/styles/mixins-and-variables/buttons.less
Normal file
@@ -0,0 +1,13 @@
|
||||
.btn-reset() {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
&:focus {
|
||||
border-image: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
17
assets/styles/mixins-and-variables/colors.less
Normal file
17
assets/styles/mixins-and-variables/colors.less
Normal file
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* Color Variables
|
||||
*/
|
||||
|
||||
@brand: #14acc2;
|
||||
|
||||
@error: #B53A03;
|
||||
|
||||
|
||||
@text-normal: #000;
|
||||
@text-muted: lighten(@text-normal, 60%);
|
||||
|
||||
@bg-lt-gray: #f1f1f1;
|
||||
@border-lt-gray: darken(@bg-lt-gray, 5%);
|
||||
@accent-lt-gray: darken(#fff, 5%);
|
||||
@accent-md-gray: darken(#fff, 25%);
|
||||
@accent-white: #fff;
|
13
assets/styles/mixins-and-variables/containers.less
Normal file
13
assets/styles/mixins-and-variables/containers.less
Normal file
@@ -0,0 +1,13 @@
|
||||
.container-sm() {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.container-md() {
|
||||
width: 100%;
|
||||
max-width: 650px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
6
assets/styles/mixins-and-variables/index.less
Normal file
6
assets/styles/mixins-and-variables/index.less
Normal file
@@ -0,0 +1,6 @@
|
||||
@import 'colors.less';
|
||||
@import 'typography.less';
|
||||
@import 'buttons.less';
|
||||
@import 'animations.less';
|
||||
@import 'truncate.less';
|
||||
@import 'containers.less';
|
5
assets/styles/mixins-and-variables/truncate.less
Normal file
5
assets/styles/mixins-and-variables/truncate.less
Normal file
@@ -0,0 +1,5 @@
|
||||
.truncate() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
7
assets/styles/mixins-and-variables/typography.less
Normal file
7
assets/styles/mixins-and-variables/typography.less
Normal file
@@ -0,0 +1,7 @@
|
||||
// Font families:
|
||||
@main-font: 'Lato', sans-serif;
|
||||
@header-font: 'Lato', sans-serif;
|
||||
|
||||
// Font weights:
|
||||
@bold: 700;
|
||||
@normal: 400;
|
5
assets/styles/pages/404.less
Normal file
5
assets/styles/pages/404.less
Normal file
@@ -0,0 +1,5 @@
|
||||
[id='404'] {
|
||||
|
||||
//…
|
||||
|
||||
}
|
5
assets/styles/pages/498.less
Normal file
5
assets/styles/pages/498.less
Normal file
@@ -0,0 +1,5 @@
|
||||
[id='498'] {
|
||||
|
||||
//…
|
||||
|
||||
}
|
5
assets/styles/pages/500.less
Normal file
5
assets/styles/pages/500.less
Normal file
@@ -0,0 +1,5 @@
|
||||
[id='500'] {
|
||||
|
||||
//…
|
||||
|
||||
}
|
9
assets/styles/pages/account/account-overview.less
Normal file
9
assets/styles/pages/account/account-overview.less
Normal file
@@ -0,0 +1,9 @@
|
||||
#account-overview {
|
||||
|
||||
[purpose='remove-button'] {
|
||||
color: @brand;
|
||||
&:hover {
|
||||
color: @text-normal;
|
||||
}
|
||||
}
|
||||
}
|
5
assets/styles/pages/account/edit-password.less
Normal file
5
assets/styles/pages/account/edit-password.less
Normal file
@@ -0,0 +1,5 @@
|
||||
#edit-password {
|
||||
|
||||
//…
|
||||
|
||||
}
|
5
assets/styles/pages/account/edit-profile.less
Normal file
5
assets/styles/pages/account/edit-profile.less
Normal file
@@ -0,0 +1,5 @@
|
||||
#edit-profile {
|
||||
|
||||
//…
|
||||
|
||||
}
|
5
assets/styles/pages/contact.less
Normal file
5
assets/styles/pages/contact.less
Normal file
@@ -0,0 +1,5 @@
|
||||
#contact {
|
||||
|
||||
//…
|
||||
|
||||
}
|
5
assets/styles/pages/dashboard/welcome.less
Normal file
5
assets/styles/pages/dashboard/welcome.less
Normal file
@@ -0,0 +1,5 @@
|
||||
#welcome {
|
||||
|
||||
//…
|
||||
|
||||
}
|
5
assets/styles/pages/entrance/confirmed-email.less
Normal file
5
assets/styles/pages/entrance/confirmed-email.less
Normal file
@@ -0,0 +1,5 @@
|
||||
#confirmed-email {
|
||||
|
||||
//…
|
||||
|
||||
}
|
5
assets/styles/pages/entrance/forgot-password.less
Normal file
5
assets/styles/pages/entrance/forgot-password.less
Normal file
@@ -0,0 +1,5 @@
|
||||
#forgot-password {
|
||||
|
||||
//…
|
||||
|
||||
}
|
5
assets/styles/pages/entrance/login.less
Normal file
5
assets/styles/pages/entrance/login.less
Normal file
@@ -0,0 +1,5 @@
|
||||
#login {
|
||||
|
||||
//…
|
||||
|
||||
}
|
5
assets/styles/pages/entrance/new-password.less
Normal file
5
assets/styles/pages/entrance/new-password.less
Normal file
@@ -0,0 +1,5 @@
|
||||
#new-password {
|
||||
|
||||
//…
|
||||
|
||||
}
|
5
assets/styles/pages/entrance/signup.less
Normal file
5
assets/styles/pages/entrance/signup.less
Normal file
@@ -0,0 +1,5 @@
|
||||
#signup {
|
||||
|
||||
//…
|
||||
|
||||
}
|
11
assets/styles/pages/faq.less
Normal file
11
assets/styles/pages/faq.less
Normal file
@@ -0,0 +1,11 @@
|
||||
#faq {
|
||||
|
||||
@media (max-width: 500px) {
|
||||
code {
|
||||
word-break: break-all;
|
||||
}
|
||||
[purpose='placeholder'] {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
27
assets/styles/pages/homepage.less
Normal file
27
assets/styles/pages/homepage.less
Normal file
@@ -0,0 +1,27 @@
|
||||
#homepage {
|
||||
|
||||
[purpose='cloud-1'] {
|
||||
.fly-fade();
|
||||
opacity: 0;
|
||||
}
|
||||
[purpose='cloud-2'] {
|
||||
.fly-fade();
|
||||
.animation-delay(3.5s);
|
||||
opacity: 0;
|
||||
}
|
||||
[purpose='ship'] {
|
||||
.skid();
|
||||
}
|
||||
[purpose='more-info-text'] {
|
||||
.bob();
|
||||
}
|
||||
[purpose='setup-step'] {
|
||||
padding-left: 240px;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
[purpose='setup-step'] {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
5
assets/styles/pages/legal/privacy.less
Normal file
5
assets/styles/pages/legal/privacy.less
Normal file
@@ -0,0 +1,5 @@
|
||||
#privacy {
|
||||
|
||||
//…
|
||||
|
||||
}
|
5
assets/styles/pages/legal/terms.less
Normal file
5
assets/styles/pages/legal/terms.less
Normal file
@@ -0,0 +1,5 @@
|
||||
#terms {
|
||||
|
||||
//…
|
||||
|
||||
}
|
Reference in New Issue
Block a user