Initial Spark Install
This commit is contained in:
125
spark/resources/assets/less/components/notifications.less
Normal file
125
spark/resources/assets/less/components/notifications.less
Normal file
@@ -0,0 +1,125 @@
|
||||
#modal-notifications {
|
||||
.modal-header {
|
||||
background: #fff;
|
||||
border-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
height: 70px;
|
||||
width: 350px;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
|
||||
.btn-group {
|
||||
padding-top: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #f5f8fa;
|
||||
border: none;
|
||||
overflow-y: scroll;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
background: #fff;
|
||||
border-top: 1px dashed rgba(0,0,0,.1);
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.notification-container:first-child {
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.notification-container:last-child {
|
||||
padding-bottom: 65px + 23px;
|
||||
}
|
||||
|
||||
.notification:not(:first-child) {
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.notification:not(:last-child) {
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
|
||||
.notification {
|
||||
position: relative;
|
||||
padding: 20px 15px 0px 15px;
|
||||
border-top: 1px dashed rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
figure { position: absolute; }
|
||||
|
||||
.notification-content {
|
||||
padding-left: 70px;
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
align-content: flex-end;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
font-weight: bold;
|
||||
line-height: 1.2;
|
||||
margin: 2px 0 10px;
|
||||
}
|
||||
|
||||
.date { color: #aaa; }
|
||||
|
||||
.notification-body {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.spark-profile-photo {
|
||||
height: 52px;
|
||||
width: 52px;
|
||||
}
|
||||
|
||||
|
||||
.fa-stack {
|
||||
color: @spark-border-color;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 15px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal.docked .modal-dialog {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.modal.docked.docked-left .modal-dialog { left: 0; }
|
||||
.modal.docked.docked-right .modal-dialog { right: 0; }
|
||||
|
||||
.modal.docked .modal-content {
|
||||
border-radius: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.modal.docked .modal-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
7
spark/resources/assets/less/components/plans.less
Normal file
7
spark/resources/assets/less/components/plans.less
Normal file
@@ -0,0 +1,7 @@
|
||||
.btn-plan {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.plan-feature-list li {
|
||||
line-height: 35px;
|
||||
}
|
27
spark/resources/assets/less/components/settings.less
Normal file
27
spark/resources/assets/less/components/settings.less
Normal file
@@ -0,0 +1,27 @@
|
||||
.spark-settings-stacked-tabs {
|
||||
border-radius: @border-radius-base;
|
||||
font-weight: 300;
|
||||
|
||||
a {
|
||||
border-bottom: 1px solid lighten(@spark-border-color, 5%);
|
||||
border-left: 3px solid transparent;
|
||||
color: @text-color;
|
||||
|
||||
i {
|
||||
color: lighten(@text-color, 25%);
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
li:last-child a {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
li.active a {
|
||||
border-left: 3px solid @brand-primary;
|
||||
}
|
||||
|
||||
li a:active, li a:hover, li a:link, li a:visited {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
37
spark/resources/assets/less/components/terms.less
Normal file
37
spark/resources/assets/less/components/terms.less
Normal file
@@ -0,0 +1,37 @@
|
||||
.terms-of-service {
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
margin-top: 35px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 25px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
3
spark/resources/assets/less/elements/alerts.less
Normal file
3
spark/resources/assets/less/elements/alerts.less
Normal file
@@ -0,0 +1,3 @@
|
||||
.alert {
|
||||
font-weight: 300;
|
||||
}
|
97
spark/resources/assets/less/elements/buttons.less
Normal file
97
spark/resources/assets/less/elements/buttons.less
Normal file
@@ -0,0 +1,97 @@
|
||||
// Basic Buttons
|
||||
.btn {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.btn-default:hover {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
// Outline Buttons
|
||||
.button-outline-variant(@color; @activeTextColor: #fff) {
|
||||
color: @color;
|
||||
background-color: transparent;
|
||||
border-color: @color;
|
||||
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:hover,
|
||||
&:active,
|
||||
&.active,
|
||||
.open > .dropdown-toggle& {
|
||||
color: @activeTextColor;
|
||||
background-color: @color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active {
|
||||
border-color: @color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default-outline {
|
||||
.button-outline-variant(@btn-default-color);
|
||||
}
|
||||
|
||||
.btn-primary-outline {
|
||||
.button-outline-variant(@btn-primary-border);
|
||||
}
|
||||
|
||||
.btn-success-outline {
|
||||
.button-outline-variant(@btn-success-border);
|
||||
}
|
||||
|
||||
.btn-info-outline {
|
||||
.button-outline-variant(@btn-info-border);
|
||||
}
|
||||
|
||||
.btn-warning-outline {
|
||||
.button-outline-variant(@btn-warning-border);
|
||||
}
|
||||
|
||||
.btn-danger-outline {
|
||||
.button-outline-variant(@btn-danger-border);
|
||||
}
|
||||
|
||||
// File Upload Button
|
||||
.btn-upload {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
input[type="file"] {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Other Button Utilities
|
||||
.btn-table-align {
|
||||
padding-top: @padding-base-vertical + 1px;
|
||||
padding-bottom: @padding-base-vertical + 1px;
|
||||
}
|
||||
|
||||
.fa-btn {
|
||||
.m-r-xs;
|
||||
}
|
19
spark/resources/assets/less/elements/forms.less
Normal file
19
spark/resources/assets/less/elements/forms.less
Normal file
@@ -0,0 +1,19 @@
|
||||
.spark-screen {
|
||||
form h2 {
|
||||
background-color: @panel-default-heading-bg;
|
||||
border-radius: @border-radius-base;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.control-label {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.radio label, .checkbox label {
|
||||
font-weight: 300;
|
||||
}
|
51
spark/resources/assets/less/elements/images.less
Normal file
51
spark/resources/assets/less/elements/images.less
Normal file
@@ -0,0 +1,51 @@
|
||||
.spark-profile-photo {
|
||||
border: 2px solid @spark-border-color;
|
||||
border-radius: 50%;
|
||||
height: 40px;
|
||||
padding: 2px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.spark-profile-photo-lg {
|
||||
.spark-profile-photo;
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
.spark-profile-photo-xl {
|
||||
.spark-profile-photo;
|
||||
height: 125px;
|
||||
width: 125px;
|
||||
}
|
||||
|
||||
.spark-nav-profile-photo {
|
||||
.spark-profile-photo;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.spark-team-photo {
|
||||
.spark-profile-photo;
|
||||
}
|
||||
|
||||
.spark-team-photo-xs {
|
||||
border-radius: 50%;
|
||||
height: 1.28571429em;
|
||||
width: 1.28571429em;
|
||||
}
|
||||
|
||||
.spark-screen {
|
||||
.profile-photo-preview {
|
||||
.img-rounded;
|
||||
display: inline-block;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
height: 150px;
|
||||
vertical-align: middle;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.team-photo-preview {
|
||||
.profile-photo-preview;
|
||||
}
|
||||
}
|
71
spark/resources/assets/less/elements/navbar.less
Normal file
71
spark/resources/assets/less/elements/navbar.less
Normal file
@@ -0,0 +1,71 @@
|
||||
.navbar-inverse .navbar-brand {
|
||||
color: @navbar-inverse-link-color;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-brand:hover,
|
||||
.navbar-inverse .navbar-brand:focus {
|
||||
color: @navbar-inverse-link-color;
|
||||
}
|
||||
|
||||
.navbar-nav > li > a {
|
||||
cursor: pointer;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.navbar-nav > li > a,
|
||||
.navbar-brand,
|
||||
.hamburger {
|
||||
height: 70px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-icon {
|
||||
padding-top: 3px;
|
||||
position: relative;
|
||||
|
||||
.activity-indicator {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: 10px;
|
||||
background: @brand-danger;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
transition: all .15s;
|
||||
transform: scale(.85);
|
||||
}
|
||||
|
||||
.icon { font-size: 21px; }
|
||||
}
|
||||
|
||||
.has-activity-indicator:hover .activity-indicator {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.navbar .dropdown-header {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.navbar .dropdown-menu > li > a {
|
||||
font-weight: 300;
|
||||
|
||||
i {
|
||||
color: lighten(@text-color, 25%);
|
||||
}
|
||||
|
||||
i.text-success {
|
||||
color: @brand-success;
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger { float: right; }
|
||||
|
||||
.with-navbar {
|
||||
padding-top: 100px;
|
||||
}
|
18
spark/resources/assets/less/elements/panels.less
Normal file
18
spark/resources/assets/less/elements/panels.less
Normal file
@@ -0,0 +1,18 @@
|
||||
.panel {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.panel-flush {
|
||||
.panel-body, .panel-header {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
9
spark/resources/assets/less/elements/tables.less
Normal file
9
spark/resources/assets/less/elements/tables.less
Normal file
@@ -0,0 +1,9 @@
|
||||
.table-borderless {
|
||||
> thead > tr > th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
> tbody > tr > td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
47
spark/resources/assets/less/spacing.less
Normal file
47
spark/resources/assets/less/spacing.less
Normal file
@@ -0,0 +1,47 @@
|
||||
.p-t-lg { padding-top: 20px; }
|
||||
.p-r-lg { padding-right: 20px; }
|
||||
.p-b-lg { padding-bottom: 20px; }
|
||||
.p-l-lg { padding-left: 20px; }
|
||||
|
||||
.p-md { padding: 15px; }
|
||||
.p-t-md { padding-top: 15px; }
|
||||
.p-r-md { padding-right: 15px; }
|
||||
.p-b-md { padding-bottom: 15px; }
|
||||
.p-l-md { padding-left: 15px; }
|
||||
|
||||
.p-t-xs { padding-top: 5px; }
|
||||
.p-r-xs { padding-right: 5px; }
|
||||
.p-b-xs { padding-bottom: 5px; }
|
||||
.p-l-xs { padding-left: 5px; }
|
||||
|
||||
.p-none { padding: 0; }
|
||||
.p-t-none { padding-top: 0; }
|
||||
.p-r-none { padding-right: 0; }
|
||||
.p-b-none { padding-bottom: 0; }
|
||||
.p-l-none { padding-left: 0; }
|
||||
|
||||
.m-t-lg { margin-top: 20px; }
|
||||
.m-r-lg { margin-right: 20px; }
|
||||
.m-b-lg { margin-bottom: 20px; }
|
||||
.m-l-lg { margin-left: 20px; }
|
||||
|
||||
.m-t-md { margin-top: 15px; }
|
||||
.m-r-md { margin-right: 15px; }
|
||||
.m-b-md { margin-bottom: 15px; }
|
||||
.m-l-md { margin-left: 15px; }
|
||||
|
||||
.m-t-sm { margin-top: 10px; }
|
||||
.m-r-sm { margin-right: 10px; }
|
||||
.m-b-sm { margin-bottom: 10px; }
|
||||
.m-l-sm { margin-left: 10px; }
|
||||
|
||||
.m-t-xs { margin-top: 5px; }
|
||||
.m-r-xs { margin-right: 5px; }
|
||||
.m-b-xs { margin-bottom: 5px; }
|
||||
.m-l-xs { margin-left: 5px; }
|
||||
|
||||
.m-none { margin: 0; }
|
||||
.m-t-none { margin-top: 0; }
|
||||
.m-r-none { margin-right: 0; }
|
||||
.m-b-none { margin-bottom: 0; }
|
||||
.m-l-none { margin-left: 0; }
|
33
spark/resources/assets/less/spark.less
Normal file
33
spark/resources/assets/less/spark.less
Normal file
@@ -0,0 +1,33 @@
|
||||
// Import Variables
|
||||
@import "variables";
|
||||
|
||||
// Spacing Helpers
|
||||
@import "spacing";
|
||||
|
||||
// Utility Helpers
|
||||
@import "utilities";
|
||||
|
||||
// HTML Elements
|
||||
@import "elements/alerts";
|
||||
@import "elements/buttons";
|
||||
@import "elements/forms";
|
||||
@import "elements/images";
|
||||
@import "elements/navbar";
|
||||
@import "elements/panels";
|
||||
@import "elements/tables";
|
||||
|
||||
// Component Styling
|
||||
@import "components/notifications";
|
||||
@import "components/plans";
|
||||
@import "components/settings";
|
||||
@import "components/terms";
|
||||
|
||||
// Body Styling
|
||||
body {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
// Vue Cloak
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
3
spark/resources/assets/less/utilities.less
Normal file
3
spark/resources/assets/less/utilities.less
Normal file
@@ -0,0 +1,3 @@
|
||||
.border-none {
|
||||
border: 0;
|
||||
}
|
59
spark/resources/assets/less/variables.less
Normal file
59
spark/resources/assets/less/variables.less
Normal file
@@ -0,0 +1,59 @@
|
||||
// Body
|
||||
@body-bg: #f5f8fa;
|
||||
|
||||
// Base Border Color
|
||||
@spark-border-color: darken(@body-bg, 10%);
|
||||
|
||||
// Set Common Borders
|
||||
@list-group-border: @spark-border-color;
|
||||
@navbar-default-border: @spark-border-color;
|
||||
@panel-default-border: @spark-border-color;
|
||||
@panel-inner-border: @spark-border-color;
|
||||
|
||||
// Brands
|
||||
@brand-primary: #3097D1;
|
||||
@brand-info: #8eb4cb;
|
||||
@brand-success: #4eb76e;
|
||||
@brand-warning: #cbb956;
|
||||
@brand-danger: #bf5329;
|
||||
|
||||
// Typography
|
||||
@font-family-sans-serif: "Open Sans", Helvetica, Arial, sans-serif;
|
||||
@line-height-base: 1.6;
|
||||
@text-color: #636b6f;
|
||||
|
||||
// Buttons
|
||||
@btn-default-color: @text-color;
|
||||
@btn-font-size: @font-size-base;
|
||||
@btn-font-weight: 300;
|
||||
|
||||
// Inputs
|
||||
@input-border: lighten(@text-color, 40%);
|
||||
@input-border-focus: lighten(@brand-primary, 25%);
|
||||
@input-color-placeholder: lighten(@text-color, 30%);
|
||||
|
||||
// Navbar
|
||||
@navbar-height: 50px;
|
||||
@navbar-margin-bottom: 0;
|
||||
|
||||
@navbar-inverse-bg: #fff;
|
||||
@navbar-inverse-color: lighten(@text-color, 30%);
|
||||
@navbar-inverse-border: @spark-border-color;
|
||||
|
||||
@navbar-inverse-link-color: lighten(@text-color, 25%);
|
||||
@navbar-inverse-link-active-bg: transparent;
|
||||
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
|
||||
@navbar-inverse-link-hover-color: darken(@navbar-inverse-link-color, 5%);
|
||||
|
||||
@navbar-inverse-toggle-border-color: @spark-border-color;
|
||||
@navbar-inverse-toggle-hover-bg: @navbar-inverse-bg;
|
||||
@navbar-inverse-toggle-icon-bar-bg: @spark-border-color;
|
||||
|
||||
// Dropdowns
|
||||
@dropdown-anchor-padding: 5px 20px;
|
||||
@dropdown-border: @spark-border-color;
|
||||
@dropdown-divider-bg: lighten(@spark-border-color, 5%);
|
||||
@dropdown-header-color: darken(@text-color, 10%);
|
||||
@dropdown-link-color: @text-color;
|
||||
@dropdown-link-hover-bg: #fff;
|
||||
@dropdown-padding: 10px 0;
|
Reference in New Issue
Block a user