Front end and api #42

Merged
bones7242 merged 6 commits from front-end-and-api into master 2017-06-27 04:43:38 +02:00
78 changed files with 141 additions and 55829 deletions

View file

@ -44,14 +44,18 @@ spee.ch is a single-serving site that reads and publishes images to and from the
* /api/publish * /api/publish
* request parameters: * request parameters:
* body (form-data): * body (form-data):
* claim: string (optional, defults to the file's name sans extension) * name: string (optional)
* license: string (optional, defaults to "No License Provided") * defaults to the file's name, sans extension
* nsfw: string ("on"/"off") or boolean (true/false). (optional, defaults `true`) * names can only contain the following characters: `A-Z`, `a-z`, `_`, or `-`
* license: string (optional)
* defaults to "No License Provided"
* only "Public Domain" or "Creative Commons" licenses are allowed
* nsfw: string, number, or boolean (optional)
* defaults `true`
* nsfw can be a string ("on"/"off"), number (0 or 1), or boolean (`true`/`false`)
* files: * files:
* (the `files` object submitted must use "file1" or "null" as the key for the file's value object) * the `files` object submitted must use "speech" or "null" as the key for the file's value object
* a successfull request will return the transaction details resulting from your published claim in JSON format * a successfull request will return the transaction details resulting from your published claim in JSON format
## bugs ## bugs
If you find a bug or experience a problem, please report your issue here on github and find us in the lbry slack! If you find a bug or experience a problem, please report your issue here on github and find us in the lbry slack!

View file

@ -7,12 +7,18 @@ module.exports = {
createPublishParams (name, filePath, license, nsfw) { createPublishParams (name, filePath, license, nsfw) {
logger.debug(`Creating Publish Parameters for "${name}"`); logger.debug(`Creating Publish Parameters for "${name}"`);
// ensure nsfw is a boolean // ensure nsfw is a boolean
if (nsfw.toLowerCase === 'true') { if (nsfw === false) {
nsfw = true;
} else if (nsfw.toLowerCase === 'on') {
nsfw = true;
} else {
nsfw = false; nsfw = false;
} else if (nsfw.toLowerCase === 'false') {
nsfw = false;
} else if (nsfw.toLowerCase === 'off') {
nsfw = false;
} else if (nsfw === 0) {
nsfw = false;
} else if (nsfw === '0') {
nsfw = false;
} else {
nsfw = true;
} }
const publishParams = { const publishParams = {
name, name,

View file

@ -25,6 +25,18 @@
width: 22%; width: 22%;
} }
footer {
width: 100%;
margin-bottom: 2px;
padding-bottom: 2px;
border-bottom: 1px lightgrey solid;
margin-top: 2px;
padding-top: 2px;
border-top: 1px lightgrey solid;
text-align: center;
color: grey;
}
/* panels */ /* panels */
.panel { .panel {
@ -82,4 +94,59 @@ h4 {
.toggle-link { .toggle-link {
float: right; float: right;
}
@media (max-width: 1250px) {
.wrapper {
margin-left: 10%;
width:80%;
}
}
@media (max-width: 1000px) {
.wrapper {
margin-left: 10%;
width:80%;
}
.main {
float: none;
width: 100%;
margin-right: 0px;
padding-right: 0px;
border-right: 0px;
margin-bottom: 5px;
}
.sidebar {
border-top: 1px solid lightgray;
float: none;
width: 100%;
}
}
@media (max-width: 750px ) {
.col-left, .col-right {
float: none;
margin: 0px;
padding: 0px;
width: 100%;
}
.col-right {
padding-top: 20px;
}
}
@media (max-width: 475px) {
.wrapper {
margin: 0px;
width: 100%;
}
} }

View file

@ -25,24 +25,6 @@
margin: 5px 15px 5px 0px; margin: 5px 15px 5px 0px;
} }
/* meme */
canvas {
background-color: white;
width: 100%;
height: auto;
}
/* publish */
#drop-zone {
border: 1px dashed lightgrey;
padding: 1em;
height: 6em;
}
#image-preview {
display: none;
}
/* all claims */ /* all claims */
.all-claims-item { .all-claims-item {
@ -58,21 +40,23 @@ canvas {
margin: 5px 30px 5px 0px; margin: 5px 30px 5px 0px;
} }
/* footer */ /* publish */
#drop-zone {
footer { border: 1px dashed lightgrey;
width: 100%; padding: 1em;
margin-bottom: 2px; height: 6em;
padding-bottom: 2px;
border-bottom: 1px lightgrey solid;
margin-top: 2px;
padding-top: 2px;
border-top: 1px lightgrey solid;
text-align: center;
color: grey;
} }
/* meme fodder */ #image-preview {
display: none;
}
/* meme */
canvas {
background-color: white;
width: 100%;
height: auto;
}
.meme-fodder-img { .meme-fodder-img {
width: 21%; width: 21%;

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -1 +0,0 @@
/* YOUR CUSTOM STYLES */

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 547 B

View file

@ -1 +0,0 @@
<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 866 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 211 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 213 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 209 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 211 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 213 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 211 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 215 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 146 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 137 B

View file

@ -1,4 +0,0 @@
<svg fill="#FFFFFF" height="36" viewBox="0 0 24 24" width="36" xmlns="http://www.w3.org/2000/svg">
<path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/>
<path d="M0-.5h24v24H0z" fill="none"/>
</svg>

Before

Width:  |  Height:  |  Size: 215 B

View file

@ -1,4 +0,0 @@
<svg fill="#FFFFFF" height="36" viewBox="0 0 24 24" width="36" xmlns="http://www.w3.org/2000/svg">
<path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/>
<path d="M0-.25h24v24H0z" fill="none"/>
</svg>

Before

Width:  |  Height:  |  Size: 214 B

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -1,8 +0,0 @@
Warning!
SASS files are optional! They are not required to start working with MDB.
You don't need to include them in your project.
SASS are inteded for developers who are willing to modify MDB CSS code via SASS files.
All other users should include either mdb.css or mdb.min.css and skip SASS files.

View file

@ -1,44 +0,0 @@
/*!
* Material Design for Bootstrap 4
* Version: MDB FREE 4.3.2
*
*
* Copyright: Material Design for Bootstrap
* http://mdbootstrap.com/
*
* Read the license: http://mdbootstrap.com/license/
*
* Atribution: Animate CSS, Twitter Bootstrap, Materialize CSS, Normalize CSS, Waves JS, WOW JS, Toastr, Chart.js , Hammer.js
*
*/
@charset "UTF-8";
// MDB Framework //
// Mixins
@import "mdb/free/data/prefixer";
@import "mdb/free/data/mixins";
// Variables
@import "mdb/free/data/colors";
@import "mdb/free/data/variables-b4";
@import "mdb/free/data/variables";
//Global
@import "mdb/free/global";
// MDB Free
@import "mdb/free/roboto";
@import "mdb/free/typography";
@import "mdb/free/animations";
@import "mdb/free/waves";
@import "mdb/free/helpers";
@import "mdb/free/buttons";
@import "mdb/free/forms-basic";
@import "mdb/free/cards-basic";
@import "mdb/free/navbars";
@import "mdb/free/hover-effects";
@import "mdb/free/footer";
@import "mdb/free/carousels-basic";
@import "mdb/free/modals";

File diff suppressed because it is too large Load diff

View file

@ -1,553 +0,0 @@
// BUTTONS
button:focus {
outline: none!important;
}
.btn {
font-size: 0.8rem;
padding: 0.85rem 2.13rem;
&.btn-lg {
font-size: 0.9rem;
padding: 1rem 2.4rem;
}
&.btn-md {
font-size: 0.7rem;
padding: 0.7rem 1.6rem;
}
&.btn-sm {
font-size: 0.6rem;
padding: 0.5rem 1.6rem;
&.btn-table {
padding: 0.5rem 0.9rem;
}
.fa {
font-size:0.8rem;
}
}
}
.btn {
border-radius: 2px;
border: 0;
@extend .z-depth-1;
transition: .2s ease-out;
color: #fff!important;
margin: 6px;
white-space: normal !important;
word-wrap: break-word;
text-transform: uppercase;
&:hover {
@extend .z-depth-1-half;
color: #fff;
}
&:active,
&:focus,
&.active {
outline: 0;
color: #fff;
@extend .z-depth-1-half;
}
.fa {
font-size: 1.1rem;
position: relative;
vertical-align: middle;
margin-top: -2px;
&.right {
margin-left: 3px;
}
&.left {
margin-right: 3px;
}
}
}
.btn-group {
.btn {
margin: 0;
}
}
.btn-block {
margin: inherit;
}
// Alert buttons
.btn-secondary {
background-color: $secondary-color;
&:hover,
&:focus,
&:active {
background-color: lighten( $secondary-color, 5%)!important;
color: #fff;
}
&.active {
background-color: darken( $secondary-color, 20%)!important;
@extend .z-depth-1-half;
&:hover {
color: #fff;
}
&:focus {
color: #fff;
}
}
&.dropdown-toggle {
color: #fff!important;
background-color: $secondary-color!important;
@extend .z-depth-1-half;
&:hover {
color: #fff;
background-color: lighten( $secondary-color, 5%)!important;
}
&:focus {
color: #fff;
background-color: $secondary-color;
}
}
}
.btn-secondary:active:hover {
background-color: lighten( $secondary-color, 5%)!important;
}
.btn-primary {
background: $primary-color;
&:hover,
&:focus,
&:active {
background-color: lighten( $primary-color, 5%)!important;
}
&.active {
background-color: darken( $primary-color, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-default {
background: $default-color;
&:hover,
&:focus,
&:active {
background-color: lighten( $default-color, 5%)!important;
}
&.active {
background-color: darken( $default-color, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-success {
background: $success-color;
&:hover,
&:focus,
&:active {
background-color: lighten( $success-color, 2%)!important;
}
&.active {
background-color: darken( $success-color, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-info {
background: $info-color;
&:hover,
&:focus {
background-color: lighten( $info-color, 5%)!important;
}
&.active {
background-color: darken( $info-color, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-warning {
background: $warning-color-dark;
&:hover,
&:focus {
background-color: lighten( $warning-color-dark, 6%)!important;
}
&.active {
background-color: darken( $warning-color, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-danger {
background: $danger-color-dark;
&:hover,
&:focus {
background-color: lighten( $danger-color-dark, 3%)!important;
}
&.active {
background-color: darken( $danger-color-dark, 15%)!important;
@extend .z-depth-1-half;
}
}
.btn-link {
background-color: transparent;
color: #000!important;
&:hover,
&:focus {
background-color: transparent;
color: #000;
}
}
// Additional button styles
.btn-outline-primary {
border: 2px solid $primary-color;
color: $primary-color-dark!important;
background-color: transparent;
&:hover,
&:focus,
&:active,
&:active:focus {
color: $primary-color;
border-color: $primary-color;
background-color: transparent;
}
}
.btn-outline-secondary {
border: 2px solid $secondary-color;
color: $secondary-color-dark!important;
background-color: transparent;
&:hover,
&:focus,
&:active,
&:active:focus {
color: $secondary-color;
border: 2px solid $secondary-color;
background-color: transparent;
}
}
.btn-outline-default {
background-color: transparent;
border: 2px solid $default-color;
color: $default-color-dark!important;
background-color: transparent;
&:hover,
&:focus,
&:active,
&:active:focus {
color: $default-color;
border-color: $default-color;
background-color:transparent;
}
}
.btn-outline-success {
border: 2px solid $success-color;
color: $success-color-dark!important;
background-color: transparent;
&:hover,
&:focus,
&:active,
&:active:focus {
color: $success-color;
border-color: $success-color;
background-color: transparent;
}
}
.btn-outline-info {
border: 2px solid $info-color;
color: $info-color-dark!important;
background-color: transparent;
&:hover,
&:focus,
&:active,
&:active:focus {
color: $info-color;
border-color: $info-color;
background-color: transparent;
}
}
.btn-outline-warning {
border: 2px solid $warning-color;
color: $warning-color-dark!important;
background-color: transparent;
&:hover,
&:focus,
&:active,
&:active:focus {
border-color: $warning-color;
color: $warning-color;
background-color: transparent;
}
}
.btn-outline-danger {
border: 2px solid $danger-color;
color: $danger-color-dark!important;
background-color: transparent;
&:hover,
&:focus,
&:active,
&:active:focus {
color: $danger-color;
border-color: $danger-color;
background-color: transparent;
}
}
.btn-outline-white {
border: 2px solid #fff;
color: #fff!important;
background-color: transparent;
&:hover,
&:focus,
&:active,
&:active:focus {
color: darken( #fff, 10%);
border-color: #fff;
background-color:transparent;
}
}
.btn-outline-black {
border: 2px solid #000;
color: #000!important;
background-color: transparent;
&:hover,
&:focus,
&:active,
&:active:focus {
color: #000;
border-color: #000;
background-color: transparent;
}
}
// Pagination
.pager li a {
border: 0;
@extend .z-depth-1;
transition: .2s ease-out;
&:hover {
@extend .z-depth-1-half;
}
}
// Additional buttons colors
.btn-elegant {
background: $elegant-color;
&:hover,
&:focus {
background-color: lighten( $elegant-color, 5%)!important;
}
&.active {
background-color: darken( $elegant-color, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-unique {
background: $unique-color-dark;
&:hover,
&:focus {
background-color: lighten( $unique-color-dark, 5%)!important;
}
&.active {
background-color: darken( $unique-color-dark, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-pink {
background: #e91e63;
&:hover,
&:focus {
background-color: lighten(#e91e63, 5%)!important;
}
&.active {
background-color: darken(#e91e63, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-purple {
background: #4a148c;
&:hover,
&:focus {
background-color: lighten(#4a148c, 5%)!important;
}
&.active {
background-color: darken(#4a148c, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-deep-purple {
background: #311b92;
&:hover,
&:focus {
background-color: lighten(#311b92, 5%)!important;
}
&.active {
background-color: darken(#311b92, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-indigo {
background: #1a237e;
&:hover,
&:focus {
background-color: lighten(#1a237e, 5%)!important;
}
&.active {
background-color: darken(#1a237e, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-cyan {
background: #00acc1;
&:hover,
&:focus {
background-color: lighten(#00acc1, 5%)!important;
}
&.active {
background-color: darken(#00acc1, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-light-green {
background: #7cb342;
&:hover,
&:focus {
background-color: lighten(#7cb342, 5%)!important;
}
&.active {
background-color: darken(#7cb342, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-dark-green {
background: #007E33;
&:hover,
&:focus {
background-color: lighten(#007E33, 5%)!important;
}
&.active {
background-color: darken(#007E33, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-lime {
background: #afb42b;
&:hover,
&:focus {
background-color: lighten(#afb42b, 5%)!important;
}
&.active {
background-color: darken(#afb42b, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-yellow {
background: #fbc02d;
&:hover,
&:focus {
background-color: lighten(#fbc02d, 5%)!important;
}
&.active {
background-color: darken(#fbc02d, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-amber {
background: #ff6f00;
&:hover,
&:focus {
background-color: lighten(#ff6f00, 5%)!important;
}
&.active {
background-color: darken(#ff6f00, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-orange {
background: #e65100;
&:hover,
&:focus {
background-color: lighten(#e65100, 5%)!important;
}
&.active {
background-color: darken(#e65100, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-deep-orange {
background: #bf360c;
&:hover,
&:focus {
background-color: lighten(#bf360c, 5%)!important;
}
&.active {
background-color: darken(#bf360c, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-brown {
background: #6d4c41;
&:hover,
&:focus {
background-color: lighten(#6d4c41, 5%)!important;
}
&.active {
background-color: darken(#6d4c41, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-blue-grey {
background: #607d8b;
&:hover,
&:focus {
background-color: lighten(#607d8b, 5%)!important;
}
&.active {
background-color: darken(#607d8b, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-mdb {
background: #45526E;
&:hover,
&:focus {
background-color: lighten(#45526E, 5%)!important;
}
&.active {
background-color: darken(#45526E, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-secondary {
&.disabled,
&:disabled {
background-color: #aa66cc;
cursor: not-allowed;
pointer-events: auto !important;
}
}
.btn-split {
padding-left: 0.85rem;
padding-right: 1.25rem;
}

View file

@ -1,90 +0,0 @@
// CARDS BASIC
.card {
border: 0;
.card-title a {
color: #424242;
@include transition (0.4s);
&:hover {
color: #616161;
@include transition (0.4s);
}
}
img {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
@extend .img-fluid;
}
.card-block {
position:relative;
}
.card-footer {
padding-bottom: 0;
font-size:1.2rem;
&:after {
display:block;
content: "";
clear:both;
}
.card-link {
color: inherit;
}
}
}
// Jumbtotron
.jumbotron {
background-color: #fff;
padding: 2rem;
&.m-1,
&.m-2,
&.m-3 {
z-index: 50;
position: relative;
margin-left: 3%;
margin-right: 3%;
}
&.m-1 {
margin-top: -20px;
}
&.m-2 {
margin-top: -30px;
}
&.m-3 {
margin-top: -40px;
}
}
// .list-group fix
.list-group-item {
width:100%;
}
// edge header
.edge-header {
display:block;
height:278px;
background-color:#ccc;
}
.free-bird {
margin-top:-100px;
}
// Form sets
.card .form-header {
color: #fff;
text-align: center;
margin-top: -50px;
margin-bottom: 3rem;
padding: 1rem;
@extend .z-depth-1-half;
@include border-radius(2px);
h3 {
margin: 0;
padding: 0.7rem;
}
}
.call .fa {
margin-right: 5px;
}

View file

@ -1,82 +0,0 @@
// CAROUSELS BASIC
.carousel-control:hover {
@include transition-duration($duration: 400ms);
}
.carousel-fade .carousel-inner {
.carousel-item {
opacity: 0;
transition-property: opacity;
}
.active {
opacity: 1;
}
.active.left,
.active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.next.left,
.prev.right {
opacity: 1;
}
}
.carousel-fade .carousel-control {
z-index: 2;
}
@media all and (transform-3d),
(-webkit-transform-3d) {
.carousel-fade .carousel-inner > .carousel-item.next,
.carousel-fade .carousel-inner > .carousel-item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .carousel-item.prev,
.carousel-fade .carousel-inner > .carousel-item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .carousel-item.next.left,
.carousel-fade .carousel-inner > .carousel-item.prev.right,
.carousel-fade .carousel-inner > .carousel-item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.carousel {
.carousel-control-prev-icon,
.carousel-control-next-icon {
width: 36px;
height: 36px;
}
.carousel-control-prev-icon {
background-image: url(../img/svg/arrow_left.svg);
}
.carousel-control-next-icon {
background-image: url(../img/svg/arrow_right.svg);
}
.carousel-indicators {
li {
max-width: 10px;
height: 10px;
border-radius: 50%;
}
}
.video-fluid {
height: 100%;
}
&.no-flex {
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: block;
}
}
}

View file

@ -1,51 +0,0 @@
// FOOTER
footer.page-footer {
margin-top: 20px;
padding-top: 20px;
background-color: $stylish-color-dark;
color: #fff;
.footer-copyright {
overflow: hidden;
height: 50px;
line-height: 50px;
color: rgba(255, 255, 255, .8);
background-color: rgba(0, 0, 0, 0.2);
text-align: center;
}
a {
color: #fff;
}
.title {
text-transform: uppercase;
}
.call-to-action {
text-align: center;
padding-top: 1.3rem;
padding-bottom: 0.5rem;
ul li {
display: inline-block;
padding-right: 10px;
}
}
.social-section {
text-align: center;
ul li {
display: inline-block;
}
}
}
/* Instagram photos */
ul.instagram-photos {
li {
display: inline-block;
max-width: 100px;
margin: 4px;
img {
margin: 0;
@extend .z-depth-1-half;
}
}
}

View file

@ -1,298 +0,0 @@
// FORMS BASIC
// Text inputs
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=time],
input[type=date],
input[type=datetime-local],
input[type=tel],
input[type=number],
input[type=search-md],
input[type=search],
textarea.md-textarea {
// General Styles
background-color: transparent;
border: none;
border-bottom: 1px solid $input-border-color;
border-radius: 0;
outline: none;
height: 2.1rem;
width: 100%;
font-size: 1rem;
box-shadow: none;
@include box-sizing(content-box);
transition: all .3s;
// Disabled input style
&:disabled,
&:disabled,
&[readonly="readonly"] {
color: $input-disabled-color;
border-bottom: 1px dotted $input-disabled-color;
background-color: transparent;
}
// Disabled label style
&:disabled+label,
&[readonly="readonly"]+label {
color: $input-disabled-color;
background-color: transparent;
}
// Focused input style
&:focus:not([readonly]) {
border-bottom: 1px solid $input-focus-color;
box-shadow: 0 1px 0 0 $input-focus-color;
}
// Focused label style
&:focus:not([readonly])+label {
color: $input-focus-color;
}
// Valid Input Style
&.valid,
&:focus.valid {
border-bottom: 1px solid $input-success-color;
box-shadow: 0 1px 0 0 $input-success-color;
}
// Custom Success Message
&.valid+label:after,
&:focus.valid+label:after {
content: attr(data-success);
color: $input-success-color;
opacity: 1;
}
// Invalid Input Style
&.invalid,
&:focus.invalid {
border-bottom: 1px solid $input-error-color;
box-shadow: 0 1px 0 0 $input-error-color;
}
// Custom Error message
&.invalid+label:after,
&:focus.invalid+label:after {
content: attr(data-error);
color: $input-error-color;
opacity: 1;
}
// Form Message Shared Styles
&+label:after {
display: block;
content: "";
position: absolute;
top: 65px;
opacity: 0;
transition: .2s opacity ease-out, .2s color ease-out;
}
&.input-alternate {
padding: 0 15px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
font-size: 0.875rem;
border-bottom: 0;
transition: none !important;
&:hover,
&:focus {
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .08) !important;
border-bottom: 0;
}
}
}
label {
font-size: $label-font-size;
color: darken ($input-border-color, 90%);
}
.form-control {
padding: 0;
padding-bottom: 0.6rem;
padding-top: 0.5rem;
font-size: 1rem;
line-height: 1.5;
background-color: transparent;
background-image: none;
border-radius: 0;
margin-top: 0.2rem;
margin-bottom: 1rem;
&:focus {
background: transparent;
}
}
.form-control:disabled,
.form-control[readonly] {
background-color: transparent;
border-bottom: 1px solid #e0e0e0;
}
// Styling for input field wrapper
.md-form {
position: relative;
margin-bottom: 1.5rem;
&.form-sm {
input {
padding-bottom: 0.2rem;
padding-top: 0.2rem;
font-size: 0.8rem;
line-height: 0.5;
}
label {
font-size: 0.9rem;
}
.prefix {
font-size: 1.5rem;
top: 0.4rem;
}
.prefix~input,
.prefix~textarea {
margin-left: 2.2rem; //Po dodaniu marginesu z lewej powstaje dziwny margines po prawej. Do poprawienia przed updatem
}
.prefix~label {
margin-left: 2.2rem;
}
}
.btn {
margin-bottom: 1.5rem;
}
label {
color: #757575;
position: absolute;
top: 0.8rem;
left: 0;
font-size: 1rem;
cursor: text;
@include transition(.2s ease-out);
}
label.active {
font-size: $label-font-size;
@include transform(translateY(-140%));
}
// Prefix Icons
.prefix {
position: absolute;
width: 3rem;
font-size: 2rem;
@include transition(color .2s);
&.active {
color: $input-focus-color;
}
}
.prefix~input,
.prefix~textarea {
margin-left: 3rem;
width: 92%;
width: calc(100% - 3rem);
}
.prefix~textarea {
padding-top: .8rem;
}
.prefix~label {
margin-left: 3rem;
}
@media #{$medium-and-down} {
.prefix~input {
width: 86%;
width: calc(100% - 3rem);
}
}
@media #{$small-and-down} {
.prefix~input {
width: 80%;
width: calc(100% - 3rem);
}
}
&.input-group {
.form-control {
margin: 0;
padding-left: 1rem;
@include placeholder {
color: #999;
padding-top: 2px;
}
}
}
}
.form-inline {
fieldset {
margin-right: 1.5rem;
}
}
// Default textarea
textarea {
width: 100%;
height: 3rem;
background-color: transparent;
&.md-textarea {
overflow-y: hidden;
/* prevents scroll bar flash */
padding: 1.6rem 0;
/* prevents text jump on Enter keypress */
resize: none;
min-height: 3rem;
}
}
// For textarea autoresize
.hiddendiv {
display: none;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
/* future version of deprecated 'word-wrap' */
padding-top: 1.2rem;
/* prevents text jump on Enter keypress */
}
//Input color
.input-dark-bg {
// Style Placeholders
@include placeholder {
color: #fff!important;
font-weight: 300;
}
input[type=text] {
border-bottom: 1px solid #fff;
}
.form-control {
color: #fff;
}
}
.input-light-bg {
// Style Placeholders
@include placeholder {
color: #1C2331!important;
font-weight: 300;
}
input[type=text] {
border-bottom: 1px solid #1C2331;
}
.form-control {
color: #1C2331;
}
}
.form-inline .form-group {
margin-right: 2rem;
}
i {
&.btn-primary {
background: $primary-color!important;
}
&.btn-default {
background: $default-color!important;
}
&.btn-success {
background: $success-color!important;
}
&.btn-info {
background: $info-color!important;
}
&.btn-warning {
background: $warning-color-dark!important;
}
&.btn-danger {
background: $danger-color-dark!important;
}
}

View file

@ -1,409 +0,0 @@
// GLOBAL STYLES
// Z-levels
.z-depth-0 {
box-shadow: none !important;
}
.z-depth-1 {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.z-depth-1-half {
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.z-depth-2 {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.z-depth-3 {
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.z-depth-4 {
box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}
.z-depth-5 {
box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}
.hoverable {
transition: box-shadow .55s;
box-shadow: 0;
}
.hoverable:hover {
transition: box-shadow .45s;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
// Normalize
a {
color: $link-color;
text-decoration: none;
cursor: pointer;
// Gets rid of tap active state
-webkit-tap-highlight-color: transparent;
&:hover,
&:focus {
text-decoration: none;
}
}
.jumbotron,
.card,
.badge,
.alert,
.nav .nav-link,
.navbar-toggler,
.navbar,
.breadcrumb,
.page-item:last-child .page-link,
.page-item:first-child .page-link,
.pagination-lg .page-item:last-child .page-link,
.pagination-lg .page-item:first-child .page-link,
.pagination-sm .page-item:first-child .page-link,
.pagination-sm .page-item:last-child .page-link,
.list-group .list-group-item,
.tooltip-inner,
.popover,
.dropdown-menu,
.input-group-addon,
.file-custom,
.card .card-header,
.nav-tabs,
img {
@include border-radius(2px);
}
.jumbotron,
.card,
.list-group,
.popover,
.navbar,
.dropdown-menu,
.badge,
.chip {
@extend .z-depth-1;
}
.popover,
.input-group-addon,
.dropdown-menu,
.pagination .page-item .page-link {
border: 0;
}
// Circle pagination
.pagination .active .page-link {
border-radius: 2px;
transition: all 0.2s linear;
@extend.z-depth-1;
}
.pagination .page-link {
transition: all 0.3s linear;
&:hover {
transition: all 0.3s linear;
}
&:focus {
background-color: transparent;
}
}
.pagination {
&.pg-blue {
.active .page-link {
background-color: $primary-color;
}
}
&.pg-red {
.active .page-link {
background-color: $danger-color;
}
}
&.pg-teal {
.active .page-link {
background-color: $default-color;
}
}
&.pg-darkgrey {
.active .page-link {
background-color: $special-color;
}
}
&.pg-dark {
.active .page-link {
background-color: $elegant-color;
}
}
&.pg-bluegrey {
.active .page-link {
background-color: #3F729B;
}
}
&.pg-amber {
.active .page-link {
background-color: #ff6f00;
}
}
&.pg-purple {
.active .page-link {
background-color: #5e35b1;
}
}
}
.pager {
a,
.disabled>a {
color: #fff;
}
&.pg-blue {
li a {
background-color: $primary-color;
&:focus {
background-color: $primary-color;
color: #fff;
}
&:hover {
background-color: $primary-color;
color: #fff;
}
}
}
&.pg-red {
li a {
background-color: $danger-color;
&:focus {
background-color: $danger-color;
color: #fff;
}
&:hover {
background-color: $danger-color;
color: #fff;
}
}
}
&.pg-teal {
li a {
background-color: $default-color;
&:focus {
background-color: $default-color;
color: #fff;
}
&:hover {
background-color: $default-color;
color: #fff;
}
}
}
&.pg-darkgrey {
li a {
background-color: $special-color;
&:focus {
background-color: $special-color;
color: #fff;
}
&:hover {
background-color: $special-color;
color: #fff;
}
}
}
&.pg-dark {
li a {
background-color: $elegant-color;
&:focus {
background-color: $elegant-color;
color: #fff;
}
&:hover {
background-color: $elegant-color;
color: #fff;
}
}
}
&.pg-bluegrey {
li a {
background-color: #3F729B;
&:focus {
background-color: #3F729B;
color: #fff;
}
&:hover {
background-color: #3F729B;
color: #fff;
}
}
}
&.pg-amber {
li a {
background-color: #ff6f00;
&:focus {
background-color: #ff6f00;
color: #fff;
}
&:hover {
background-color: #ff6f00;
color: #fff;
}
}
}
&.pg-purple {
li a {
background-color: #5e35b1;
&:focus {
background-color: #5e35b1;
color: #fff;
}
&:hover {
background-color: #5e35b1;
color: #fff;
}
}
}
}
.pager .disabled>a,
.pager .disabled>a:focus,
.pager .disabled>a:hover {
background-color: inerhit!important;
}
// Modal footer buttons fix
.modal-footer .btn+ .btn {
margin-bottom: 6px;
}
// Shifting bacground fix
body.modal-open {
overflow: inherit;
padding-right: 0 !important;
}
body {
overflow: auto !important;
}
// Card columns fix - cut edges of the cards
.card-columns .card {
margin: 2px;
}
// Parallax
.parallax {
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
position: relative;
padding-top: 3em;
padding-bottom: 3em;
}
// Scrollspy free
.nav-pills {
&.horizontal-spy {
.nav-item {
.active {
border-bottom: 2px solid $mdb-color;
border-left: none;
}
&:hover {
background-color: transparent;
color: $mdb-color;
font-weight: 500;
border-left: none;
}
}
}
}
//Nav normalize
.nav-pills .nav-item.open .nav-link,
.nav-pills .nav-item.open .nav-link:focus,
.nav-pills .nav-item.open .nav-link:hover,
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:focus,
.nav-pills .nav-link.active:hover {
background-color: transparent;
color: #000;
}
//Disabled cursor
.disabled {
cursor: not-allowed!important;
}
//Video responsive
.video-fluid {
height: auto;
width: 100%;
}
.video-full {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover;
}
//Media improvement
.media {
.media-left {
padding:0 10px 10px 0;
img {
@extend .z-depth-1-half;
}
}
}
.card-block {
h5 {
margin-bottom: 1rem;
font-size: 1rem;
font-weight: 400;
}
h3 {
margin-bottom: 1rem;
font-weight: 400;
}
p {
margin-bottom: 1rem;
}
}
.tooltip {
.tooltip-inner {
padding: 0.4rem 0.8rem;
@extend .z-depth-1-half;
}
}
// Make sections full width
section {
flex: 0 0 100%;
}
.breadcrumb .breadcrumb-item.active {
color: #818a91;
}
.dropdown-menu .dropdown-item:active {
background:#f7f7f9;
}
.dropdown-menu {
transition: all 0.2s cubic-bezier(0.72, 1.2, 0.71, 0.72);
}

View file

@ -1,239 +0,0 @@
// HELPERS
// Center text on mobile
.center-on-small-only {
@media #{$medium-and-down} {
text-align: center;
.img-fluid {
display: inline;
}
}
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
p {
margin: 0;
}
ul {
text-align: center;
li {
margin-bottom: 1rem;
}
}
}
.vertical-center {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.img-fluid {
display: block;
max-width: 100%;
height: auto;
}
.inline-ul>li {
display: inline;
}
.list-inline-div>div {
display: inline-block;
}
// Dividers light and dark variations
.hr-light {
background-color: #fff;
height: 0.5px;
}
.hr-dark {
background-color: #666;
height: 0.5px;
}
// Divider with title
.divider-new {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-weight: 300;
margin-top: 45px;
margin-bottom: 45px;
h2 {
margin-top: 5px;
}
&:before {
content: '';
height: 1.5px;
background: #666;
flex: 1;
margin: 0 .45em 0 0;
}
&:after {
content: '';
height: 1.5px;
background: #666;
flex: 1;
margin: 0 0 0 .45em;
}
}
// Divider for mobile
@media (min-width: 992px) {
.hr-mobile {
display: none !important;
}
}
// Section title
.section-title {
text-transform: uppercase;
margin-top: 0;
margin-bottom: 3rem;
padding: 0.7rem;
small {
text-transform: none;
padding-left: 7px;
margin-left: 10px;
}
}
.st-indigo {
border-left: 4px solid blue;
small {
border-left: 2px solid blue;
}
}
.st-red {
border-left: 4px solid red;
small {
border-left: 2px solid red;
}
}
.st-teal {
border-left: 4px solid #009688;
small {
border-left: 2px solid #009688;
}
}
.st-orange {
border-left: 4px solid #ff6f00;
small {
border-left: 2px solid #ff6f00;
}
}
.st-blue {
border-left: 4px solid #2196f3;
small {
border-left: 2px solid #2196f3;
}
}
.st-mdb {
border-left: 4px solid $mdb-color;
small {
border-left: 2px solid $mdb-color;
}
}
.divider-short {
max-width: 50px;
border-color: $primary-color;
border-width: 3px;
}
// Blockquote contextual
.blockquote {
.bq-title {
font-weight: 400;
font-size: 1.5rem;
margin-bottom: 0;
}
p {
font-size: 1.1rem;
}
}
.bq-primary {
border-left: 3px solid $primary-color;
.bq-title {
color: $primary-color;
}
}
.bq-warning {
border-left: 3px solid $warning-color;
.bq-title {
color: $warning-color;
}
}
.bq-danger {
border-left: 3px solid $danger-color;
.bq-title {
color: $danger-color;
}
}
.bq-success {
border-left: 3px solid $success-color;
.bq-title {
color: $success-color;
}
}
@each $prop,
$abbrev in (margin: m, padding: p) {
@each $size,
$lengths in $spacers {
$length-x: map-get($lengths, x);
$length-y: map-get($lengths, y);
.#{$abbrev}t-#{$size} {
#{$prop}-top: $length-y !important;
}
.#{$abbrev}b-#{$size} {
#{$prop}-bottom: $length-y !important;
}
.#{$abbrev}y-#{$size} {
#{$prop}-top: $length-y !important;
#{$prop}-bottom: $length-y !important;
}
}
}
.mb-r {
@media (max-width: 992px) {
margin-bottom: 2rem!important;
}
@media (min-width: 992px) {
margin-bottom: 3rem!important;
}
}
.mb-m {
margin-bottom: 1rem;
@media (min-width: 62em) {
margin-bottom: 0;
}
}
.no-height {
height: 0;
}
.sharp-corners {
border-radius: 0;
}

View file

@ -1,429 +0,0 @@
/* MDB HOVER EFFECTS */
// MDB Hover effects
.view {
overflow: hidden;
position: relative;
cursor: default;
.mask,
.content {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
img, video {
display: block;
position: relative
}
}
.view .mask {
background-attachment: fixed;
}
.full-bg-img {
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
header {
.view {
position: relative;
width: 100%;
height: auto;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
}
// Overlays
.overlay {
&:hover .mask {
opacity: 1;
}
img, video {
transition: all 0.2s linear;
}
.mask {
opacity: 0;
transition: all 0.4s ease-in-out;
}
}
//Overlay patterns
.pattern-1 {
background: url(../img/overlays/01.png);
}
.pattern-2 {
background: url(../img/overlays/02.png);
}
.pattern-3 {
background: url(../img/overlays/03.png);
}
.pattern-4 {
background: url(../img/overlays/04.png);
}
.pattern-5 {
background: url(../img/overlays/05.png);
}
.pattern-6 {
background: url(../img/overlays/06.png);
}
.pattern-7 {
background: url(../img/overlays/07.png);
}
.pattern-8 {
background: url(../img/overlays/08.png);
}
.pattern-9 {
background: url(../img/overlays/09.png);
}
// Overlay masks
// Light overlays
.hm-blue-light .mask,
.hm-blue-light .full-bg-img {
background-color: rgba(3, 169, 244, 0.3);
}
.hm-red-light .mask,
.hm-red-light .full-bg-img {
background-color: rgba(244, 67, 54, 0.3);
}
.hm-pink-light .mask,
.hm-pink-light .full-bg-img {
background-color: rgba(233, 30, 99, 0.3);
}
.hm-purple-light .mask,
.hm-purple-light .full-bg-img {
background-color: rgba(156, 39, 176, 0.3);
}
.hm-indigo-light .mask,
.hm-indigo-light .full-bg-img {
background-color: rgba(63, 81, 181, 0.3);
}
.hm-cyan-light .mask,
.hm-cyan-light .full-bg-img {
background-color: rgba(0, 188, 212, 0.3);
}
.hm-teal-light .mask,
.hm-teal-light .full-bg-img {
background-color: rgba(0, 150, 136, 0.3);
}
.hm-green-light .mask,
.hm-green-light .full-bg-img {
background-color: rgba(76, 175, 80, 0.3);
}
.hm-lime-light .mask,
.hm-lime-light .full-bg-img {
background-color: rgba(205, 220, 57, 0.3);
}
.hm-yellow-light .mask,
.hm-yellow-light .full-bg-img {
background-color: rgba(255, 235, 59, 0.3);
}
.hm-orange-light .mask,
.hm-orange-light .full-bg-img {
background-color: rgba(255, 152, 0, 0.3);
}
.hm-brown-light .mask,
.hm-brown-light .full-bg-img {
background-color: rgba(121, 85, 72, 0.3);
}
.hm-grey-light .mask,
.hm-grey-light .full-bg-img {
background-color: rgba(158, 158, 158, 0.3);
}
.hm-bluegrey-light .mask,
.hm-bluegrey-light .full-bg-img {
background-color: rgba(96, 125, 139, 0.3);
}
.hm-black-light .mask,
.hm-black-light .full-bg-img {
background-color: rgba(0, 0, 0, 0.3);
}
.hm-stylish-light .mask,
.hm-stylish-light .full-bg-img {
background-color: rgba(62, 69, 81, 0.3);
}
.hm-white-light .mask,
.hm-white-light .full-bg-img {
background-color: rgba(255, 255, 255, 0.3);
}
// Strong overlays
.hm-blue-strong .mask,
.hm-blue-strong .full-bg-img {
background-color: rgba(3, 169, 244, 0.7);
}
.hm-red-strong .mask,
.hm-red-strong .full-bg-img {
background-color: rgba(244, 67, 54, 0.7);
}
.hm-pink-strong .mask,
.hm-pink-strong .full-bg-img {
background-color: rgba(233, 30, 99, 0.7);
}
.hm-purple-strong .mask,
.hm-purple-strong .full-bg-img {
background-color: rgba(156, 39, 176, 0.7);
}
.hm-indigo-strong .mask,
.hm-indigo-strong .full-bg-img {
background-color: rgba(63, 81, 181, 0.7);
}
.hm-cyan-strong .mask,
.hm-cyan-strong .full-bg-img {
background-color: rgba(0, 188, 212, 0.7);
}
.hm-teal-strong .mask,
.hm-teal-strong .full-bg-img {
background-color: rgba(0, 150, 136, 0.7);
}
.hm-green-strong .mask,
.hm-green-strong .full-bg-img {
background-color: rgba(76, 175, 80, 0.7);
}
.hm-lime-strong .mask,
.hm-lime-strong .full-bg-img {
background-color: rgba(205, 220, 57, 0.7);
}
.hm-yellow-strong .mask,
.hm-yellow-strong .full-bg-img {
background-color: rgba(255, 235, 59, 0.7);
}
.hm-orange-strong .mask,
.hm-orange-strong .full-bg-img {
background-color: rgba(255, 152, 0, 0.7);
}
.hm-brown-strong .mask,
.hm-brown-strong .full-bg-img {
background-color: rgba(121, 85, 72, 0.7);
}
.hm-grey-strong .mask,
.hm-grey-strong .full-bg-img {
background-color: rgba(158, 158, 158, 0.7);
}
.hm-bluegrey-strong .mask,
.hm-bluegrey-strong .full-bg-img {
background-color: rgba(96, 125, 139, 0.7);
}
.hm-black-strong .mask,
.hm-black-strong .full-bg-img {
background-color: rgba(0, 0, 0, 0.7);
}
.hm-stylish-strong .mask,
.hm-stylish-strong .full-bg-img {
background-color: rgba(62, 69, 81, 0.7);
}
.hm-white-strong .mask,
.hm-white-strong .full-bg-img {
background-color: rgba(255, 255, 255, 0.7);
}
// Light overlays
.hm-blue-slight .mask,
.hm-blue-slight .full-bg-img {
background-color: rgba(3, 169, 244, 0.1);
}
.hm-red-slight .mask,
.hm-red-slight .full-bg-img {
background-color: rgba(244, 67, 54, 0.1);
}
.hm-pink-slight .mask,
.hm-pink-slight .full-bg-img {
background-color: rgba(233, 30, 99, 0.1);
}
.hm-purple-slight .mask,
.hm-purple-slight .full-bg-img {
background-color: rgba(156, 39, 176, 0.1);
}
.hm-indigo-slight .mask,
.hm-indigo-slight .full-bg-img {
background-color: rgba(63, 81, 181, 0.1);
}
.hm-cyan-slight .mask,
.hm-cyan-slight .full-bg-img {
background-color: rgba(0, 188, 212, 0.1);
}
.hm-teal-slight .mask,
.hm-teal-slight .full-bg-img {
background-color: rgba(0, 150, 136, 0.1);
}
.hm-green-slight .mask,
.hm-green-slight .full-bg-img {
background-color: rgba(76, 175, 80, 0.1);
}
.hm-lime-slight .mask,
.hm-lime-slight .full-bg-img {
background-color: rgba(205, 220, 57, 0.1);
}
.hm-yellow-slight .mask,
.hm-yellow-slight .full-bg-img {
background-color: rgba(255, 235, 59, 0.1);
}
.hm-orange-slight .mask,
.hm-orange-slight .full-bg-img {
background-color: rgba(255, 152, 0, 0.1);
}
.hm-brown-slight .mask,
.hm-brown-slight .full-bg-img {
background-color: rgba(121, 85, 72, 0.1);
}
.hm-grey-slight .mask,
.hm-grey-slight .full-bg-img {
background-color: rgba(158, 158, 158, 0.1);
}
.hm-bluegrey-slight .mask,
.hm-bluegrey-slight .full-bg-img {
background-color: rgba(96, 125, 139, 0.1);
}
.hm-black-slight .mask,
.hm-black-slight .full-bg-img {
background-color: rgba(0, 0, 0, 0.1);
}
.hm-stylish-slight .mask,
.hm-stylish-slight .full-bg-img {
background-color: rgba(62, 69, 81, 0.1);
}
.hm-white-slight .mask,
.hm-white-slight .full-bg-img {
background-color: rgba(255, 255, 255, 0.1);
}
// Zoom
.hm-zoom img {
transition: all 0.2s linear;
}
.hm-zoom:hover img {
transform: scale(1.1);
}
.hm-zoom:hover .mask {
opacity: 1;
}
.img-overlay {
position:relative;
&:after {
content: '';
display:block;
position:absolute;
height:100%;
width:100%;
top:0;
left:0;
bottom:0;
right:0;
background:rgba(0,0,0,.17);
transition: background 0.4s;
}
&:hover {
&:after {
background:rgba(0,0,0,.35);
}
}
&.light {
&:after {
background:rgba(255,255,255,.17);
}
&:hover {
&:after {
background:rgba(255,255,255,.35);
}
}
}
&.blue {
&:after {
background:rgba(0,145,234,.17);
}
&:hover {
&:after {
background:rgba(0,145,234,.35);
}
}
}
&.green {
&:after {
background:rgba(76,175,80,.17);
}
&:hover {
&:after {
background:rgba(76,175,80,.35);
}
}
}
&.red {
&:after {
background:rgba(213,0,0,.17);
}
&:hover {
&:after {
background:rgba(213,0,0,.35);
}
}
}
}

View file

@ -1,364 +0,0 @@
// Distance
$modal-distance:10px;
$modal-info-color: #5394ff;
$modal-success-color: #01d36b;
$modal-warning-color: #ff8e38;
$modal-danger-color: #ff4b4b;
// Styles for body
body {
&.modal-open {
padding-right: 0 !important;
}
&.scrollable {
overflow-y: auto;
}
}
// *** ENHANCED BOOTSTRAP MODALS ***///
// General styles
.modal-dialog {
.modal-content {
@include border-radius(2px);
@extend .z-depth-1-half;
border: 0;
}
}
// Position & Size
.modal {
.modal-dialog {
&.modal-top {
top: 0;
}
&.modal-left {
left: 0;
}
&.modal-right {
right: 0;
}
&.modal-bottom {
bottom: 0;
}
&.modal-top-left {
top: $modal-distance;
left: $modal-distance;
}
&.modal-top-right {
top: $modal-distance;
right: $modal-distance;
}
&.modal-bottom-left {
left: $modal-distance;
bottom: $modal-distance;
}
&.modal-bottom-right {
right: $modal-distance;
bottom: $modal-distance;
}
}
&.fade {
&.top:not(.show) .modal-dialog {
transform: translate3d(0, -25%, 0);
}
&.left:not(.show) .modal-dialog {
transform: translate3d(-25%, 0, 0);
}
&.right:not(.show) .modal-dialog {
transform: translate3d(25%, 0, 0);
}
&.bottom:not(.show) .modal-dialog {
transform: translate3d(0, 25%, 0);
}
}
&.modal-scrolling {
position: relative;
.modal-dialog {
position: fixed;
z-index: 1050;
}
}
&.modal-content-clickable {
top:auto;
bottom:auto;
.modal-dialog {
position:fixed;
}
}
.modal-fluid {
width: 100%;
max-width: 100%;
.modal-content {
width: 100%;
}
}
.modal-frame {
position: absolute;
width: 100%;
max-width: 100%;
margin: 0;
&.modal-bottom {
bottom: 0;
}
}
.modal-full-height {
display: flex;
position: absolute;
width: 400px;
height: 100%;
margin: 0;
top: 0;
// bottom: 0;
right: 0;
&.modal-top, &.modal-bottom {
display:block;
width:100%;
max-width:100%;
height:auto;
}
&.modal-top {
bottom:auto;
}
&.modal-bottom {
top:auto;
}
.modal-content {
width:100%;
}
&.modal-lg {
max-width:90%;
width:90%;
@media (min-width:992px) {
max-width:800px;
width:800px;
}
@media (min-width:1200px) {
max-width:1000px;
width:1000px;
}
}
}
.modal-side {
position: absolute;
right: $modal-distance;
bottom: $modal-distance;
margin: 0;
width: 400px;
}
}
// Styles
.modal-dialog {
.btn .fa {
color:#fff !important;
}
[class*="btn-outline-"] .fa {
color: inherit !important;
}
// Cascading modals
&.cascading-modal {
margin-top: 10%;
// Cascading header
.modal-header {
text-align: center;
margin: -2rem 1rem 1rem 1rem;
padding: 1.5rem;
border: none;
flex-direction: column;
@extend .z-depth-1-half;
@include border-radius(3px);
.close {
margin-right: 2.5rem;
}
&.white-text {
.close {
color: #fff;
opacity: 1;
}
}
.title {
width: 100%;
margin-bottom: 0;
font-size: 1.25rem;
.fa {
margin-right: 9px;
}
}
.social-buttons {
margin-top: 1.5rem;
a {
font-size: 1rem;
}
}
}
// Cascading tabs nav
.modal-c-tabs {
.nav-tabs {
margin: -1.5rem 1rem 0 1rem;
@extend .z-depth-1;
}
.tab-content {
padding: 1.7rem 0 0 0;
}
}
// Footer customization
.modal-body,
.modal-footer {
color: #616161;
padding-right: 2rem;
padding-left: 2rem;
.additional-option {
text-align: center;
margin-top: 1rem;
}
}
// Cascading avatar
&.modal-avatar {
margin-top: 6rem;
.modal-header {
@extend .z-depth-0;
@extend .img-fluid;
margin: -6rem 2rem -1rem 2rem;
img {
width: 130px;
@extend .z-depth-2;
}
}
}
}
// Modal notify
&.modal-notify {
.heading {
margin: 0;
padding: 0.3rem;
color: #fff;
font-size: 1.15rem;
}
.modal-header {
@extend .z-depth-1;
border: 0;
}
.close {
opacity: 1;
}
.modal-body {
padding: 1.5rem;
color: #616161;
}
.btn-outline-secondary-modal {
background-color: transparent;
}
// Modal info
&.modal-info {
.modal-header {
background-color: $modal-info-color;
}
.fa {
color: $modal-info-color;
}
.badge {
background-color: $modal-info-color;
}
.btn-primary-modal {
background: $modal-info-color;
&:hover,
&:focus,
&:active {
background-color: lighten( $modal-info-color, 5%)!important;
}
&.active {
background-color: darken( $modal-info-color, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-outline-secondary-modal {
border: 2px solid $modal-info-color;
color: $modal-info-color!important;
}
}
// Modal warning
&.modal-warning {
.modal-header {
background-color: $modal-warning-color;
}
.fa {
color: $modal-warning-color;
}
.badge {
background-color: $modal-warning-color;
}
.btn-primary-modal {
background: $modal-warning-color;
&:hover,
&:focus,
&:active {
background-color: lighten( $modal-warning-color, 5%)!important;
}
&.active {
background-color: darken( $modal-warning-color, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-outline-secondary-modal {
border: 2px solid $modal-warning-color;
color: $modal-warning-color!important;
}
}
// Modal success
&.modal-success {
.modal-header {
background-color: $modal-success-color;
}
.fa {
color: $modal-success-color;
}
.badge {
background-color: $modal-success-color;
}
.btn-primary-modal {
background: $modal-success-color;
&:hover,
&:focus,
&:active {
background-color: lighten( $modal-success-color, 5%)!important;
}
&.active {
background-color: darken( $modal-success-color, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-outline-secondary-modal {
border: 2px solid $modal-success-color;
color: $modal-success-color!important;
}
}
// Modal danger
&.modal-danger {
.modal-header {
background-color: $modal-danger-color;
}
.fa {
color: $modal-danger-color;
}
.badge {
background-color: $modal-danger-color;
}
.btn-primary-modal {
background: $modal-danger-color;
&:hover,
&:focus,
&:active {
background-color: lighten( $modal-danger-color, 5%)!important;
}
&.active {
background-color: darken( $modal-danger-color, 20%)!important;
@extend .z-depth-1-half;
}
}
.btn-outline-secondary-modal {
border: 2px solid $modal-danger-color;
color: $modal-danger-color!important;
}
}
}
}

View file

@ -1,141 +0,0 @@
.navbar {
font-weight: 300;
form {
input {
margin: 0;
height: 1rem;
margin-right: 5px;
margin-left: 8px;
margin-bottom: 1px;
}
}
.navbar-brand {
align-self: flex-start;
overflow: visible;
}
.breadcrumb {
margin: 0;
background-color: inherit;
font-weight: 300;
}
&.navbar-dark {
.navbar-brand {
color: #fff;
&:hover {
color: #fff;
}
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
cursor: pointer;
}
.breadcrumb,
.navbar-nav .nav-item {
a {
color: #fff;
transition: .35s;
&:hover {
color: rgba(255, 255, 255, .75);
}
}
&.active {
background-color: rgba(255, 255, 255, 0.1);
}
.dropdown-menu a {
color: #212121;
&:hover,
&:focus,
&:active {
color: #212121;
}
}
}
.nav-link {
color: #fff;
}
.navbar-toggler {
color: #fff;
}
}
&.navbar-light {
.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.breadcrumb,
.nav-item {
a {
color: #212121;
transition: .35s;
&:hover {
transition: .35s;
color: #212121;
}
}
&.active {
background-color: rgba(158, 158, 158, 0.2);
}
.dropdown-menu a {
color: #000;
padding: 1rem;
}
}
.navbar-toggler {
color: #000;
}
}
.dropdown-menu {
a {
font-size: 0.9375rem;
font-weight: 300;
padding: 10px;
}
}
.navbar-toggler {
border-width: 0;
}
.nav-flex-icons {
flex-direction: row;
}
.container {
@media (max-width: 991px) {
width: 100%;
.navbar-toggler-right {
right: 0;
}
}
}
.dropdown-menu {
position: absolute !important;
}
&.double-nav {
flex-direction: row;
}
}
// Input line color
.navbar-dark form {
input[type=text] {
border-bottom: 1px solid #fff;
}
.form-control {
color: #fff;
@include placeholder {
color: rgba(255, 255, 255, .65) !important;
font-weight: 300;
}
}
}
.navbar-light form {
// Style Placeholders
input[type=text] {
border-bottom: 1px solid #1C2331;
}
.form-control {
color: #1C2331;
@include placeholder {
color: #1C2331!important;
font-weight: 300;
}
}
}

View file

@ -1,51 +0,0 @@
// ROBOTO FONT
@font-face {
font-family: "Roboto";
src: local(Roboto Thin), url('#{$roboto-font-path}Roboto-Thin.eot');
src: url("#{$roboto-font-path}Roboto-Thin.eot?#iefix") format('embedded-opentype'),
url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
url("#{$roboto-font-path}Roboto-Thin.woff") format("woff"),
url("#{$roboto-font-path}Roboto-Thin.ttf") format("truetype");
font-weight: 200;
}
@font-face {
font-family: "Roboto";
src: local(Roboto Light), url('#{$roboto-font-path}Roboto-Light.eot');
src: url("#{$roboto-font-path}Roboto-Light.eot?#iefix") format('embedded-opentype'),
url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"),
url("#{$roboto-font-path}Roboto-Light.woff") format("woff"),
url("#{$roboto-font-path}Roboto-Light.ttf") format("truetype");
font-weight: 300;
}
@font-face {
font-family: "Roboto";
src: local(Roboto Regular), url('#{$roboto-font-path}Roboto-Regular.eot');
src: url("#{$roboto-font-path}Roboto-Regular.eot?#iefix") format('embedded-opentype'),
url("#{$roboto-font-path}Roboto-Regular.woff2") format("woff2"),
url("#{$roboto-font-path}Roboto-Regular.woff") format("woff"),
url("#{$roboto-font-path}Roboto-Regular.ttf") format("truetype");
font-weight: 400;
}
@font-face {
font-family: "Roboto";
src: url('#{$roboto-font-path}Roboto-Medium.eot');
src: url("#{$roboto-font-path}Roboto-Medium.eot?#iefix") format('embedded-opentype'),
url("#{$roboto-font-path}Roboto-Medium.woff2") format("woff2"),
url("#{$roboto-font-path}Roboto-Medium.woff") format("woff"),
url("#{$roboto-font-path}Roboto-Medium.ttf") format("truetype");
font-weight: 500;
}
@font-face {
font-family: "Roboto";
src: url('#{$roboto-font-path}Roboto-Bold.eot');
src: url("#{$roboto-font-path}Roboto-Bold.eot?#iefix") format('embedded-opentype'),
url("#{$roboto-font-path}Roboto-Bold.woff2") format("woff2"),
url("#{$roboto-font-path}Roboto-Bold.woff") format("woff"),
url("#{$roboto-font-path}Roboto-Bold.ttf") format("truetype");
font-weight: 700;
}

View file

@ -1,228 +0,0 @@
// TYPOGRAPHY
body {
font-family: "Roboto", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 300;
}
html {
@media only screen and (min-width: 0) {
font-size: 15px;
}
@media only screen and (min-width: $medium-screen) {
font-size: 15.5px;
}
@media only screen and (min-width: $large-screen) {
font-size: 16px;
}
}
.text-fluid {
font-weight: 300;
$i: 0;
@while $i <=$intervals {
@media only screen and (min-width: 360+ ($i * $interval-size)) {
font-size: 1.2rem * (1+ (.02 * $i));
}
$i: $i+1;
}
// Handle below 360px screen
@media only screen and (max-width: 360px) {
font-size: 1.2rem;
}
}
p {
&.lead {
font-weight: 400;
}
}
blockquote p {
font-size: 0.9rem;
padding-left: 2rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
/* Responsive Headings */
/* Extra Small Devices, Phones */
@media only screen and (max-width: 768px) {
.h1-responsive {
font-size: 150%;
font-weight: 500;
}
.h2-responsive {
font-size: 145%;
}
.h3-responsive {
font-size: 135%;
}
.h4-responsive {
font-size: 135%;
}
.h5-responsive {
font-size: 135%;
}
}
/* Small Devices, Tablets */
@media only screen and (min-width: 768px) {
.h1-responsive {
font-size: 170%;
}
.h2-responsive {
font-size: 140%;
}
.h3-responsive {
font-size: 125%;
}
.h4-responsive {
font-size: 125%;
}
.h5-responsive {
font-size: 125%;
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {
.h1-responsive {
font-size: 200%;
}
.h2-responsive {
font-size: 170%;
}
.h3-responsive {
font-size: 140%;
}
.h4-responsive {
font-size: 125%;
}
.h5-responsive {
font-size: 125%;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) {
.h1-responsive {
font-size: 250%;
}
.h2-responsive {
font-size: 200%;
}
.h3-responsive {
font-size: 170%;
}
.h4-responsive {
font-size: 140%;
}
.h5-responsive {
font-size: 125%;
}
}
.section {
margin-bottom: 2rem;
.section-heading {
@extend .h1-responsive;
margin-top: 2rem;
margin-bottom: 4rem;
}
.section-description {
color: #757575;
margin-bottom: 4rem;
margin-left: 15%;
margin-right: 15%;
text-align: center;
@media (max-width: 992px) {
margin-left: 5%;
margin-right: 5%;
}
}
img,
.view {
@extend .img-fluid;
@extend .z-depth-1-half;
}
.jumbotron {
@extend .z-depth-2;
}
h4 {
font-weight: 400;
}
h5 .fa {
margin-right: 8px;
}
hr {
margin-top: 1rem;
margin-bottom: 3rem;
}
.map-container {
img {
@extend .z-depth-0;
}
}
.contact-icons {
text-align: center;
li {
margin-bottom: 2.2rem;
}
.fa {
font-size: 2.2rem;
margin-bottom: 0.6rem;
color: #424242;
}
}
}
.between-sections {
margin-bottom: 4rem;
}
// Lists default style
ul {
padding: 0;
list-style-type: none;
li {
list-style-type: none;
}
}
// List style types
.list-disc {
li {
list-style-type: disc;
}
}
.list-circle {
li {
list-style-type: circle;
}
}
.list-square {
li {
list-style-type: square;
}
}
.list-roman {
li {
list-style-type: upper-roman;
}
}
.list-alpha {
li {
list-style-type: upper-alpha;
}
}

View file

@ -1,157 +0,0 @@
/*!
* Waves v0.7.5
* http://fian.my.id/Waves
*
* Copyright 2014-2016 Alfiana E. Sibuea and other contributors
* Released under the MIT license
* https://github.com/fians/Waves/blob/master/LICENSE
*/
@mixin waves-transition($transition){
-webkit-transition: $transition;
-moz-transition: $transition;
-o-transition: $transition;
transition: $transition;
}
@mixin waves-transform($string){
-webkit-transform: $string;
-moz-transform: $string;
-ms-transform: $string;
-o-transform: $string;
transform: $string;
}
@mixin waves-box-shadow($shadow){
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
.waves-effect {
position: relative;
cursor: pointer;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
z-index: 1;
.waves-ripple {
position: absolute;
border-radius: 50%;
width: 100px;
height: 100px;
margin-top:-50px;
margin-left:-50px;
opacity: 0;
background: rgba(0,0,0,0.2);
$gradient: rgba(0,0,0,0.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%;
background: -webkit-radial-gradient($gradient);
background: -o-radial-gradient($gradient);
background: -moz-radial-gradient($gradient);
background: radial-gradient($gradient);
@include waves-transition(all 0.5s ease-out);
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
@include waves-transform(scale(0) translate(0,0));
pointer-events: none;
}
&.waves-light .waves-ripple {
background: rgba(255,255,255,0.4);
$gradient: rgba(255,255,255,0.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%;
background: -webkit-radial-gradient($gradient);
background: -o-radial-gradient($gradient);
background: -moz-radial-gradient($gradient);
background: radial-gradient($gradient);
}
&.waves-classic .waves-ripple {
background: rgba(0,0,0,0.2);
}
&.waves-classic.waves-light .waves-ripple {
background: rgba(255,255,255,0.4);
}
}
.waves-notransition {
@include waves-transition(none #{"!important"});
}
.waves-button,
.waves-circle {
@include waves-transform(translateZ(0));
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
.waves-button,
.waves-button:hover,
.waves-button:visited,
.waves-button-input {
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: none;
outline: none;
color: inherit;
background-color: rgba(0, 0, 0, 0);
font-size: 1em;
line-height:1em;
text-align: center;
text-decoration: none;
z-index: 1;
}
.waves-button {
padding: 0.85em 1.1em;
border-radius: 0.2em;
}
.waves-button-input {
margin: 0;
padding: 0.85em 1.1em;
}
.waves-input-wrapper {
border-radius: 0.2em;
vertical-align: bottom;
&.waves-button {
padding: 0;
}
.waves-button-input {
position: relative;
top: 0;
left: 0;
z-index: 1;
}
}
.waves-circle {
text-align: center;
width: 2.5em;
height: 2.5em;
line-height: 2.5em;
border-radius: 50%;
}
.waves-float {
-webkit-mask-image: none;
@include waves-box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12));
@include waves-transition(all 300ms);
&:active {
@include waves-box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.30));
}
}
.waves-block {
display: block;
}

View file

@ -1,875 +0,0 @@
// COLORS
$mdb-color: (
"lighten-5": #D0D6E2,
"lighten-4": #B1BACE,
"lighten-3": #929FBA,
"lighten-2": #7283A7,
"lighten-1": #59698D,
"base": #45526E,
"darken-1": #3B465E,
"darken-2": #2E3951,
"darken-3": #1C2A48,
"darken-4": #1C2331,
);
$red: (
"lighten-5": #FFEBEE,
"lighten-4": #FFCDD2,
"lighten-3": #EF9A9A,
"lighten-2": #E57373,
"lighten-1": #EF5350,
"base": #F44336,
"darken-1": #E53935,
"darken-2": #D32F2F,
"darken-3": #C62828,
"darken-4": #B71C1C,
"accent-1": #FF8A80,
"accent-2": #FF5252,
"accent-3": #FF1744,
"accent-4": #D50000
);
$pink: (
"lighten-5": #fce4ec,
"lighten-4": #f8bbd0,
"lighten-3": #f48fb1,
"lighten-2": #f06292,
"lighten-1": #ec407a,
"base": #e91e63,
"darken-1": #d81b60,
"darken-2": #c2185b,
"darken-3": #ad1457,
"darken-4": #880e4f,
"accent-1": #ff80ab,
"accent-2": #ff4081,
"accent-3": #f50057,
"accent-4": #c51162
);
$purple: (
"lighten-5": #f3e5f5,
"lighten-4": #e1bee7,
"lighten-3": #ce93d8,
"lighten-2": #ba68c8,
"lighten-1": #ab47bc,
"base": #9c27b0,
"darken-1": #8e24aa,
"darken-2": #7b1fa2,
"darken-3": #6a1b9a,
"darken-4": #4a148c,
"accent-1": #ea80fc,
"accent-2": #e040fb,
"accent-3": #d500f9,
"accent-4": #aa00ff
);
$deep-purple: (
"lighten-5": #ede7f6,
"lighten-4": #d1c4e9,
"lighten-3": #b39ddb,
"lighten-2": #9575cd,
"lighten-1": #7e57c2,
"base": #673ab7,
"darken-1": #5e35b1,
"darken-2": #512da8,
"darken-3": #4527a0,
"darken-4": #311b92,
"accent-1": #b388ff,
"accent-2": #7c4dff,
"accent-3": #651fff,
"accent-4": #6200ea
);
$indigo: (
"lighten-5": #e8eaf6,
"lighten-4": #c5cae9,
"lighten-3": #9fa8da,
"lighten-2": #7986cb,
"lighten-1": #5c6bc0,
"base": #3f51b5,
"darken-1": #3949ab,
"darken-2": #303f9f,
"darken-3": #283593,
"darken-4": #1a237e,
"accent-1": #8c9eff,
"accent-2": #536dfe,
"accent-3": #3d5afe,
"accent-4": #304ffe
);
$blue: (
"lighten-5": #E3F2FD,
"lighten-4": #BBDEFB,
"lighten-3": #90CAF9,
"lighten-2": #64B5F6,
"lighten-1": #42A5F5,
"base": #2196F3,
"darken-1": #1E88E5,
"darken-2": #1976D2,
"darken-3": #1565C0,
"darken-4": #0D47A1,
"accent-1": #82B1FF,
"accent-2": #448AFF,
"accent-3": #2979FF,
"accent-4": #2962FF
);
$light-blue: (
"lighten-5": #e1f5fe,
"lighten-4": #b3e5fc,
"lighten-3": #81d4fa,
"lighten-2": #4fc3f7,
"lighten-1": #29b6f6,
"base": #03a9f4,
"darken-1": #039be5,
"darken-2": #0288d1,
"darken-3": #0277bd,
"darken-4": #01579b,
"accent-1": #80d8ff,
"accent-2": #40c4ff,
"accent-3": #00b0ff,
"accent-4": #0091ea
);
$cyan: (
"lighten-5": #e0f7fa,
"lighten-4": #b2ebf2,
"lighten-3": #80deea,
"lighten-2": #4dd0e1,
"lighten-1": #26c6da,
"base": #00bcd4,
"darken-1": #00acc1,
"darken-2": #0097a7,
"darken-3": #00838f,
"darken-4": #006064,
"accent-1": #84ffff,
"accent-2": #18ffff,
"accent-3": #00e5ff,
"accent-4": #00b8d4
);
$teal: (
"lighten-5": #e0f2f1,
"lighten-4": #b2dfdb,
"lighten-3": #80cbc4,
"lighten-2": #4db6ac,
"lighten-1": #26a69a,
"base": #009688,
"darken-1": #00897b,
"darken-2": #00796b,
"darken-3": #00695c,
"darken-4": #004d40,
"accent-1": #a7ffeb,
"accent-2": #64ffda,
"accent-3": #1de9b6,
"accent-4": #00bfa5
);
$green: (
"lighten-5": #E8F5E9,
"lighten-4": #C8E6C9,
"lighten-3": #A5D6A7,
"lighten-2": #81C784,
"lighten-1": #66BB6A,
"base": #4CAF50,
"darken-1": #43A047,
"darken-2": #388E3C,
"darken-3": #2E7D32,
"darken-4": #1B5E20,
"accent-1": #B9F6CA,
"accent-2": #69F0AE,
"accent-3": #00E676,
"accent-4": #00C853
);
$light-green: (
"lighten-5": #f1f8e9,
"lighten-4": #dcedc8,
"lighten-3": #c5e1a5,
"lighten-2": #aed581,
"lighten-1": #9ccc65,
"base": #8bc34a,
"darken-1": #7cb342,
"darken-2": #689f38,
"darken-3": #558b2f,
"darken-4": #33691e,
"accent-1": #ccff90,
"accent-2": #b2ff59,
"accent-3": #76ff03,
"accent-4": #64dd17
);
$lime: (
"lighten-5": #f9fbe7,
"lighten-4": #f0f4c3,
"lighten-3": #e6ee9c,
"lighten-2": #dce775,
"lighten-1": #d4e157,
"base": #cddc39,
"darken-1": #c0ca33,
"darken-2": #afb42b,
"darken-3": #9e9d24,
"darken-4": #827717,
"accent-1": #f4ff81,
"accent-2": #eeff41,
"accent-3": #c6ff00,
"accent-4": #aeea00
);
$yellow: (
"lighten-5": #fffde7,
"lighten-4": #fff9c4,
"lighten-3": #fff59d,
"lighten-2": #fff176,
"lighten-1": #ffee58,
"base": #ffeb3b,
"darken-1": #fdd835,
"darken-2": #fbc02d,
"darken-3": #f9a825,
"darken-4": #f57f17,
"accent-1": #ffff8d,
"accent-2": #ffff00,
"accent-3": #ffea00,
"accent-4": #ffd600
);
$amber: (
"lighten-5": #fff8e1,
"lighten-4": #ffecb3,
"lighten-3": #ffe082,
"lighten-2": #ffd54f,
"lighten-1": #ffca28,
"base": #ffc107,
"darken-1": #ffb300,
"darken-2": #ffa000,
"darken-3": #ff8f00,
"darken-4": #ff6f00,
"accent-1": #ffe57f,
"accent-2": #ffd740,
"accent-3": #ffc400,
"accent-4": #ffab00
);
$orange: (
"lighten-5": #fff3e0,
"lighten-4": #ffe0b2,
"lighten-3": #ffcc80,
"lighten-2": #ffb74d,
"lighten-1": #ffa726,
"base": #ff9800,
"darken-1": #fb8c00,
"darken-2": #f57c00,
"darken-3": #ef6c00,
"darken-4": #e65100,
"accent-1": #ffd180,
"accent-2": #ffab40,
"accent-3": #ff9100,
"accent-4": #ff6d00
);
$deep-orange: (
"lighten-5": #fbe9e7,
"lighten-4": #ffccbc,
"lighten-3": #ffab91,
"lighten-2": #ff8a65,
"lighten-1": #ff7043,
"base": #ff5722,
"darken-1": #f4511e,
"darken-2": #e64a19,
"darken-3": #d84315,
"darken-4": #bf360c,
"accent-1": #ff9e80,
"accent-2": #ff6e40,
"accent-3": #ff3d00,
"accent-4": #dd2c00
);
$brown: (
"lighten-5": #efebe9,
"lighten-4": #d7ccc8,
"lighten-3": #bcaaa4,
"lighten-2": #a1887f,
"lighten-1": #8d6e63,
"base": #795548,
"darken-1": #6d4c41,
"darken-2": #5d4037,
"darken-3": #4e342e,
"darken-4": #3e2723
);
$blue-grey: (
"lighten-5": #eceff1,
"lighten-4": #cfd8dc,
"lighten-3": #b0bec5,
"lighten-2": #90a4ae,
"lighten-1": #78909c,
"base": #607d8b,
"darken-1": #546e7a,
"darken-2": #455a64,
"darken-3": #37474f,
"darken-4": #263238
);
$grey: (
"lighten-5": #fafafa,
"lighten-4": #f5f5f5,
"lighten-3": #eeeeee,
"lighten-2": #e0e0e0,
"lighten-1": #bdbdbd,
"base": #9e9e9e,
"darken-1": #757575,
"darken-2": #616161,
"darken-3": #424242,
"darken-4": #212121
);
$shades: (
"black": #000000,
"white": #FFFFFF,
"transparent": transparent
);
$colors: (
"mdb-color": $mdb-color,
"red": $red,
"pink": $pink,
"purple": $purple,
"deep-purple": $deep-purple,
"indigo": $indigo,
"blue": $blue,
"light-blue": $light-blue,
"cyan": $cyan,
"teal": $teal,
"green": $green,
"light-green": $light-green,
"lime": $lime,
"yellow": $yellow,
"amber": $amber,
"orange": $orange,
"deep-orange": $deep-orange,
"brown": $brown,
"blue-grey": $blue-grey,
"grey": $grey,
"shades": $shades
);
// Color Classes
@each $color_name,
$color in $colors {
@each $color_type,
$color_value in $color {
@if $color_type=="base" {
.#{$color_name} {
background-color: $color_value !important;
}
.#{$color_name}-text {
color: $color_value !important;
}
}
@else {
.#{$color_name}.#{$color_type} {
background-color: $color_value !important;
}
.#{$color_name}-text.text-#{$color_type} {
color: $color_value !important;
}
}
}
}
// Shade classes
@each $color,
$color_value in $shades {
.#{$color} {
background-color: $color_value !important;
}
.#{$color}-text {
color: $color_value !important;
}
}
// usage: color("name_of_color", "type_of_color")
// to avoid to repeating map-get($colors, ...)
@function color($color, $type) {
@if map-has-key($colors, $color) {
$curr_color: map-get($colors, $color);
@if map-has-key($curr_color, $type) {
@return map-get($curr_color, $type);
}
}
@warn "Unknown `#{name}` in $colors.";
@return null;
}
// Social colors
$fb-color: #3B5998;
$tw-color: #55ACEE;
$gplus-color: #DD4B39;
$yt-color: #CD201F;
$li-color: #0082CA;
$pin-color: #C61118;
$ins-color: #3F729B;
$git-color: #4183C4;
$comm-color: #30CFC0;
$vk-color: #4C75A3;
$drib-color: #C32361;
$so-color: #f69c55;
$slack-color: #56b68b;
// Material Design Colors`
$danger-color: #ff4444;
.danger-color {
background-color: $danger-color!important;
}
$danger-color-dark: #CC0000;
.danger-color-dark {
background-color: $danger-color-dark!important;
}
$warning-color: #ffbb33;
.warning-color {
background-color: $warning-color!important;
}
$warning-color-dark: #FF8800;
.warning-color-dark {
background-color: $warning-color-dark!important;
}
$success-color: #00C851;
.success-color {
background-color: $success-color!important;
}
$success-color-dark: #007E33;
.success-color-dark {
background-color: $success-color-dark!important;
}
$info-color: #33b5e5;
.info-color {
background-color: $info-color!important;
}
$info-color-dark: #0099CC;
.info-color-dark {
background-color: $info-color-dark!important;
}
// MDB Colors
$default-color: #2BBBAD;
.default-color {
background-color: $default-color!important;
}
$default-color-dark: #00695c;
.default-color-dark {
background-color: $default-color-dark!important;
}
$primary-color: #4285F4;
.primary-color {
background-color: $primary-color!important;
}
$primary-color-dark: #0d47a1;
.primary-color-dark {
background-color: $primary-color-dark!important;
}
$secondary-color: #aa66cc;
.secondary-color {
background-color: $secondary-color!important;
}
$secondary-color-dark: #9933CC;
.secondary-color-dark {
background-color: $secondary-color-dark!important;
}
$elegant-color: #2E2E2E;
.elegant-color {
background-color: $elegant-color!important;
}
$elegant-color-dark: #212121;
.elegant-color-dark {
background-color: $elegant-color-dark!important;
}
$stylish-color: #4B515D;
.stylish-color {
background-color: $stylish-color!important;
}
$stylish-color-dark: #3E4551;
.stylish-color-dark {
background-color: $stylish-color-dark!important;
}
$special-color: #37474F;
.special-color {
background-color: $special-color!important;
}
$special-color-dark: #263238;
.special-color-dark {
background-color: $special-color-dark!important;
}
$unique-color: #3F729B;
.unique-color {
background-color: $unique-color!important;
}
$unique-color-dark: #1C2331;
.unique-color-dark {
background-color: $unique-color-dark!important;
}
$mdb-color: #45526E;
.mdb-color {
background-color: $mdb-color!important;
}
$error-color: color("red", "base") !default;
// RGBA colors
// Light overlays
$rgba-blue-light: rgba(3, 169, 244, 0.3);
.rgba-blue-light {
background-color: $rgba-blue-light!important;
}
$rgba-red-light: rgba(244, 67, 54, 0.3);
.rgba-red-light {
background-color: $rgba-red-light!important;
}
$rgba-pink-light: rgba(233, 30, 99, 0.3);
.rgba-pink-light {
background-color: $rgba-pink-light!important;
}
$rgba-purple-light: rgba(156, 39, 176, 0.3);
.rgba-purple-light {
background-color: $rgba-purple-light!important;
}
$rgba-indigo-light: rgba(63, 81, 181, 0.3);
.rgba-indigo-light {
background-color: $rgba-indigo-light!important;
}
$rgba-cyan-light: rgba(0, 188, 212, 0.3);
.rgba-cyan-light {
background-color: $rgba-cyan-light!important;
}
$rgba-teal-light: rgba(0, 150, 136, 0.3);
.rgba-teal-light {
background-color: $rgba-teal-light!important;
}
$rgba-green-light: rgba(76, 175, 80, 0.3);
.rgba-green-light {
background-color: $rgba-green-light!important;
}
$rgba-lime-light: rgba(205, 220, 57, 0.3);
.rgba-lime-light {
background-color: $rgba-lime-light!important;
}
$rgba-yellow-light: rgba(255, 235, 59, 0.3);
.rgba-yellow-light {
background-color: $rgba-yellow-light!important;
}
$rgba-orange-light: rgba(255, 152, 0, 0.3);
.rgba-orange-light {
background-color: $rgba-orange-light!important;
}
$rgba-brown-light: rgba(121, 85, 72, 0.3);
.rgba-brown-light {
background-color: $rgba-brown-light!important;
}
$rgba-grey-light: rgba(158, 158, 158, 0.3);
.rgba-grey-light {
background-color: $rgba-grey-light!important;
}
$rgba-bluegrey-light: rgba(96, 125, 139, 0.3);
.rgba-bluegrey-light {
background-color: $rgba-bluegrey-light!important;
}
$rgba-black-light: rgba(0, 0, 0, 0.3);
.rgba-black-light {
background-color: $rgba-black-light!important;
}
$rgba-stylish-light: rgba(62, 69, 81, 0.3);
.rgba-stylish-light {
background-color: $rgba-stylish-light!important;
}
$rgba-white-light: rgba(255, 255, 255, 0.3);
.rgba-white-light {
background-color: $rgba-white-light!important;
}
// Strong overlays
$rgba-blue-strong: rgba(3, 169, 244, 0.7);
.rgba-blue-strong {
background-color: $rgba-blue-strong!important;
}
$rgba-red-strong: rgba(244, 67, 54, 0.7);
.rgba-red-strong {
background-color: $rgba-red-strong!important;
}
$rgba-pink-strong: rgba(233, 30, 99, 0.7);
.rgba-pink-strong {
background-color: $rgba-pink-strong!important;
}
$rgba-purple-strong: rgba(156, 39, 176, 0.7);
.rgba-purple-strong {
background-color: $rgba-purple-strong!important;
}
$rgba-indigo-strong: rgba(63, 81, 181, 0.7);
.rgba-indigo-strong {
background-color: $rgba-indigo-strong!important;
}
$rgba-cyan-strong: rgba(0, 188, 212, 0.7);
.rgba-cyan-strong {
background-color: $rgba-cyan-strong!important;
}
$rgba-teal-strong: rgba(0, 150, 136, 0.7);
.rgba-teal-strong {
background-color: $rgba-teal-strong!important;
}
$rgba-green-strong: rgba(76, 175, 80, 0.7);
.rgba-green-strong {
background-color: $rgba-green-strong!important;
}
$rgba-lime-strong: rgba(205, 220, 57, 0.7);
.rgba-lime-strong {
background-color: $rgba-lime-strong!important;
}
$rgba-yellow-strong: rgba(255, 235, 59, 0.7);
.rgba-yellow-strong {
background-color: $rgba-yellow-strong!important;
}
$rgba-orange-strong: rgba(255, 152, 0, 0.7);
.rgba-orange-strong {
background-color: $rgba-orange-strong!important;
}
$rgba-brown-strong: rgba(121, 85, 72, 0.7);
.rgba-brown-strong {
background-color: $rgba-brown-strong!important;
}
$rgba-grey-strong: rgba(158, 158, 158, 0.7);
.rgba-grey-strong {
background-color: $rgba-grey-strong!important;
}
$rgba-bluegrey-strong: rgba(96, 125, 139, 0.7);
.rgba-bluegrey-strong {
background-color: $rgba-bluegrey-strong!important;
}
$rgba-black-strong: rgba(0, 0, 0, 0.7);
.rgba-black-strong {
background-color: $rgba-black-strong!important;
}
$rgba-stylish-strong: rgba(62, 69, 81, 0.7);
.rgba-stylish-strong {
background-color: $rgba-stylish-strong!important;
}
$rgba-white-strong: rgba(255, 255, 255, 0.7);
.rgba-white-strong {
background-color: $rgba-white-strong!important;
}
// Super light overlays
$rgba-blue-slight: rgba(3, 169, 244, 0.1);
.rgba-blue-slight {
background-color: $rgba-blue-slight!important;
}
$rgba-red-slight: rgba(244, 67, 54, 0.1);
.rgba-red-slight {
background-color: $rgba-red-slight!important;
}
$rgba-pink-slight: rgba(233, 30, 99, 0.1);
.rgba-pink-slight {
background-color: $rgba-pink-slight!important;
}
$rgba-purple-slight: rgba(156, 39, 176, 0.1);
.rgba-purple-slight {
background-color: $rgba-purple-slight!important;
}
$rgba-indigo-slight: rgba(63, 81, 181, 0.1);
.rgba-indigo-slight {
background-color: $rgba-indigo-slight!important;
}
$rgba-cyan-slight: rgba(0, 188, 212, 0.1);
.rgba-cyan-slight {
background-color: $rgba-cyan-slight!important;
}
$rgba-teal-slight: rgba(0, 150, 136, 0.1);
.rgba-teal-slight {
background-color: $rgba-teal-slight!important;
}
$rgba-green-slight: rgba(76, 175, 80, 0.1);
.rgba-green-slight {
background-color: $rgba-green-slight!important;
}
$rgba-lime-slight: rgba(205, 220, 57, 0.1);
.rgba-lime-slight {
background-color: $rgba-lime-slight!important;
}
$rgba-yellow-slight: rgba(255, 235, 59, 0.1);
.rgba-yellow-slight {
background-color: $rgba-yellow-slight!important;
}
$rgba-orange-slight: rgba(255, 152, 0, 0.1);
.rgba-orange-slight {
background-color: $rgba-orange-slight!important;
}
$rgba-brown-slight: rgba(121, 85, 72, 0.1);
.rgba-brown-slight {
background-color: $rgba-brown-slight!important;
}
$rgba-grey-slight: rgba(158, 158, 158, 0.1);
.rgba-grey-slight {
background-color: $rgba-grey-slight!important;
}
$rgba-bluegrey-slight: rgba(96, 125, 139, 0.1);
.rgba-bluegrey-slight {
background-color: rgba(96, 125, 139, 0.1)!important;
}
$rgba-black-slight: rgba(0, 0, 0, 0.1);
.rgba-black-slight {
background-color: $rgba-black-slight!important;
}
$rgba-stylish-slight: rgba(62, 69, 81, 0.1);
.rgba-stylish-slight {
background-color: $rgba-stylish-slight!important;
}
$rgba-white-slight: rgba(255, 255, 255, 0.1);
.rgba-white-slight {
background-color: $rgba-white-slight!important;
}
.blue-gradient {
background: #000000; /* Old browsers */
background: -moz-linear-gradient(-45deg, #000000 0%, #062a64 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%,#062a64 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%,#062a64 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#062a64',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.red-gradient {
background: #000000; /* Old browsers */
background: -moz-linear-gradient(-45deg, #000000 0%, #7d0000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%,#7d0000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%,#7d0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#7d0000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.green-gradient {
background: #000000; /* Old browsers */
background: -moz-linear-gradient(-45deg, #000000 0%, #003830 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%,#003830 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%,#003830 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#003830',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.purple-gradient {
background: #000000; /* Old browsers */
background: -moz-linear-gradient(-45deg, #000000 0%, #650696 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%,#650696 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%,#650696 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#650696',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.dark-gradient {
background: #000000; /* Old browsers */
background: -moz-linear-gradient(-45deg, #000000 0%, #2e2e2e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%,#2e2e2e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%,#2e2e2e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#2e2e2e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.grey-gradient {
background: #000000; /* Old browsers */
background: -moz-linear-gradient(-45deg, #000000 0%, #4b515d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%,#4b515d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%,#4b515d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#4b515d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.mdb-gradient {
background: #000000; /* Old browsers */
background: -moz-linear-gradient(-45deg, #000000 0%, #3f729b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%,#3f729b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%,#3f729b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#3f729b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.deep-orange-gradient {
background: #000000; /* Old browsers */
background: -moz-linear-gradient(-45deg, #000000 0%, #8a1a00 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%,#8a1a00 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%,#8a1a00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#8a1a00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.graphite-gradient {
background: #000000; /* Old browsers */
background: -moz-linear-gradient(-45deg, #000000 0%, #37474f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%,#37474f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%,#37474f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#37474f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.pink-gradient {
background: #000000; /* Old browsers */
background: -moz-linear-gradient(-45deg, #000000 0%, #880e4f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%,#880e4f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%,#880e4f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#880e4f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

View file

@ -1,101 +0,0 @@
/*********************
Mixins
**********************/
@mixin hover {
@if $enable-hover-media-query {
// See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
// Currently shimmed by https://github.com/twbs/mq4-hover-shim
@media (hover: hover) {
&:hover {
@content
}
}
}
@else {
&:hover {
@content
}
}
}
@mixin hover-focus {
@if $enable-hover-media-query {
&:focus {
@content
}
@include hover {
@content
}
}
@else {
&:focus,
&:hover {
@content
}
}
}
@mixin plain-hover-focus {
@if $enable-hover-media-query {
&,
&:focus {
@content
}
@include hover {
@content
}
}
@else {
&,
&:focus,
&:hover {
@content
}
}
}
@mixin hover-focus-active {
@if $enable-hover-media-query {
&:focus,
&:active {
@content
}
@include hover {
@content
}
}
@else {
&:focus,
&:active,
&:hover {
@content
}
}
}
@mixin border-radius($args) {
-webkit-border-radius: $args;
-moz-border-radius: $args;
-ms-border-radius: $args;
-o-border-radius: $args;
border-radius: $args;
}
@mixin placeholder {
&::-webkit-input-placeholder {
@content
}
&:-moz-placeholder {
@content
}
&::-moz-placeholder {
@content
}
&::-ms-placeholder {
@content
}
&::placeholder {
@content
}
}

View file

@ -1,376 +0,0 @@
//---------------------------------------------------
// Sass Prefixer
// -------------------------------------------------
// TABLE OF CONTENTS
// (*) denotes a syntax-sugar helper
// -------------------------------------------------
//
// animation($args)
// animation-delay($delay)
// animation-direction($direction)
// animation-duration($duration)
// animation-fill-mode($mode)
// animation-iteration-count($count)
// animation-name($name)
// animation-play-state($state)
// animation-timing-function($function)
// background-size($args)
// inner-shadow($args) *
// box-sizing($args)
// border-box() *
// content-box() *
// columns($args)
// column-count($count)
// column-gap($gap)
// column-rule($args)
// column-width($width)
// flexbox()
// flex($args)
// order($args)
// align($args)
// justify-content($args)
// gradient($default,$start,$stop) *
// linear-gradient-top($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])*
// linear-gradient-left($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])*
// transform($args)
// transform-origin($args)
// transform-style($style)
// rotate($deg)
// scale($factor)
// translate($x,$y)
// translate3d($x,$y,$z)
// translateHardware($x,$y) *
// text-shadow($args)
// transition($args)
// transition-delay($delay)
// transition-duration($duration)
// transition-property($property)
// transition-timing-function($function)
// Animation
@mixin animation($args) {
-webkit-animation: $args;
-moz-animation: $args;
-ms-animation: $args;
-o-animation: $args;
animation: $args;
}
@mixin animation-delay($delay) {
-webkit-animation-delay: $delay;
-moz-animation-delay: $delay;
-ms-animation-delay: $delay;
-o-animation-delay: $delay;
animation-delay: $delay;
}
@mixin animation-direction($direction) {
-webkit-animation-direction: $direction;
-moz-animation-direction: $direction;
-ms-animation-direction: $direction;
-o-animation-direction: $direction;
}
@mixin animation-duration($duration) {
-webkit-animation-duration: $duration;
-moz-animation-duration: $duration;
-ms-animation-duration: $duration;
-o-animation-duration: $duration;
}
@mixin animation-fill-mode($mode) {
-webkit-animation-fill-mode: $mode;
-moz-animation-fill-mode: $mode;
-ms-animation-fill-mode: $mode;
-o-animation-fill-mode: $mode;
animation-fill-mode: $mode;
}
@mixin animation-iteration-count($count) {
-webkit-animation-iteration-count: $count;
-moz-animation-iteration-count: $count;
-ms-animation-iteration-count: $count;
-o-animation-iteration-count: $count;
animation-iteration-count: $count;
}
@mixin animation-name($name) {
-webkit-animation-name: $name;
-moz-animation-name: $name;
-ms-animation-name: $name;
-o-animation-name: $name;
animation-name: $name;
}
@mixin animation-play-state($state) {
-webkit-animation-play-state: $state;
-moz-animation-play-state: $state;
-ms-animation-play-state: $state;
-o-animation-play-state: $state;
animation-play-state: $state;
}
@mixin animation-timing-function($function) {
-webkit-animation-timing-function: $function;
-moz-animation-timing-function: $function;
-ms-animation-timing-function: $function;
-o-animation-timing-function: $function;
animation-timing-function: $function;
}
// Keyframes
@mixin keyframes($animation-name) {
@-webkit-keyframes #{$animation-name} {
@content;
}
@-moz-keyframes #{$animation-name} {
@content;
}
@keyframes #{$animation-name} {
@content;
}
}
// Backface-visibility
@mixin backface-visibility($args) {
-webkit-backface-visibility: $args;
-moz-backface-visibility: $args;
-ms-backface-visibility: $args;
backface-visibility: $args;
}
// Background Size
@mixin background-size($args) {
-webkit-background-size: $args;
background-size: $args;
}
// Box Sizing
@mixin box-sizing($args) {
-webkit-box-sizing: $args;
-moz-box-sizing: $args;
box-sizing: $args;
}
@mixin border-box(){
@include box-sizing(border-box);
}
@mixin content-box(){
@include box-sizing(content-box);
}
// Columns
@mixin columns($args) {
-webkit-columns: $args;
-moz-columns: $args;
columns: $args;
}
@mixin column-count($count) {
-webkit-column-count: $count;
-moz-column-count: $count;
column-count: $count;
}
@mixin column-gap($gap) {
-webkit-column-gap: $gap;
-moz-column-gap: $gap;
column-gap: $gap;
}
@mixin column-width($width) {
-webkit-column-width: $width;
-moz-column-width: $width;
column-width: $width;
}
@mixin column-rule($args) {
-webkit-column-rule: $args;
-moz-column-rule: $args;
column-rule: $args;
}
// Filter
@mixin filter($args) {
-webkit-filter: $args;
-moz-filter: $args;
-o-filter: $args;
-ms-filter: $args;
}
// Flexbox
@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}
@mixin order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}
@mixin align($align) {
-webkit-flex-align: $align;
-ms-flex-align: $align;
-webkit-align-items: $align;
align-items: $align;
}
@mixin justify-content($val) {
-webkit-justify-content: $val;
justify-content: $val;
}
// Gradients
@mixin gradient($default: #F5F5F5, $start: #EEE, $stop: #FFF) {
@include linear-gradient-top($default,$start,0%,$stop,100%);
}
@mixin linear-gradient-top($default,$color1,$stop1,$color2,$stop2) {
background-color: $default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2));
background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2);
background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2);
background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2);
background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2);
background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2);
}
@mixin linear-gradient-top2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) {
background-color: $default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3));
background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
}
@mixin linear-gradient-top3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) {
background-color: $default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4));
background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
}
@mixin linear-gradient-left($default,$color1,$stop1,$color2,$stop2) {
background-color: $default;
background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2));
background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2);
background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2);
background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2);
background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2);
background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2);
}
@mixin linear-gradient-left2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) {
background-color: $default;
background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3));
background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
}
@mixin linear-gradient-left3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) {
background-color: $default;
background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4));
background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
}
// Text Shadow
@mixin text-shadow($args) {
text-shadow: $args;
}
// Transforms
@mixin transform($args) {
-webkit-transform: $args;
-moz-transform: $args;
-ms-transform: $args;
-o-transform: $args;
transform: $args;
}
@mixin transform-origin($args) {
-webkit-transform-origin: $args;
-moz-transform-origin: $args;
-ms-transform-origin: $args;
-o-transform-origin: $args;
transform-origin: $args;
}
@mixin transform-style($style) {
-webkit-transform-style: $style;
-moz-transform-style: $style;
-ms-transform-style: $style;
-o-transform-style: $style;
transform-style: $style;
}
@mixin rotate($deg:45deg){
@include transform(rotate($deg));
}
@mixin scale($factor:.5){
@include transform(scale($factor));
}
@mixin translate($x,$y){
@include transform(translate($x,$y));
}
@mixin translate3d($x,$y,$z) {
@include transform(translate3d($x,$y,$z));
}
@mixin translateHardware($x,$y) {
@include translate($x,$y);
-webkit-transform: translate3d($x,$y,0);
-moz-transform: translate3d($x,$y,0);
-o-transform: translate3d($x,$y,0);
-ms-transform: translate3d($x,$y,0);
transform: translate3d($x,$y,0);
}
// Transitions
@mixin transition($args:200ms) {
-webkit-transition: $args;
-moz-transition: $args;
-o-transition: $args;
-ms-transition: $args;
transition: $args;
}
@mixin transition-delay($delay:0) {
-webkit-transition-delay: $delay;
-moz-transition-delay: $delay;
-o-transition-delay: $delay;
-ms-transition-delay: $delay;
transition-delay: $delay;
}
@mixin transition-duration($duration:200ms) {
-webkit-transition-duration: $duration;
-moz-transition-duration: $duration;
-o-transition-duration: $duration;
-ms-transition-duration: $duration;
transition-duration: $duration;
}
@mixin transition-property($property:all) {
-webkit-transition-property: $property;
-moz-transition-property: $property;
-o-transition-property: $property;
-ms-transition-property: $property;
transition-property: $property;
}
@mixin transition-timing-function($function:ease) {
-webkit-transition-timing-function: $function;
-moz-transition-timing-function: $function;
-o-transition-timing-function: $function;
-ms-transition-timing-function: $function;
transition-timing-function: $function;
}

View file

@ -1,674 +0,0 @@
// Variables
//
// Copy settings from this file into the provided `_custom.scss` to override
// the Bootstrap defaults without modifying key, versioned files.
// Table of Contents
//
// Colors
// Options
// Spacing
// Body
// Links
// Grid breakpoints
// Grid containers
// Grid columns
// Fonts
// Components
// General variable structure
//
// Variable format should follow the `$component-modifier-state-property` order.
// Colors
//
// Grayscale and brand colors for use across Bootstrap.
$gray-dark: #373a3c !default;
$gray: #55595c !default;
$gray-light: #818a91 !default;
$gray-lighter: #eceeef !default;
$gray-lightest: #f7f7f9 !default;
$brand-primary: #0275d8 !default;
$brand-success: #5cb85c !default;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
$brand-danger: #d9534f !default;
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-flex: false !default;
$enable-rounded: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: false !default;
$enable-hover-media-query: false !default;
$enable-grid-classes: true !default;
// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
$spacer: 1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (
0: (
x: 0,
y: 0
),
1: (
x: $spacer-x,
y: $spacer-y
),
2: (
x: ($spacer-x * 1.5),
y: ($spacer-y * 1.5)
),
3: (
x: ($spacer-x * 3),
y: ($spacer-y * 3)
),
4: (
x: ($spacer-x * 4),
y: ($spacer-y * 4)
),
5: (
x: ($spacer-x * 5),
y: ($spacer-y * 5)
)
) !default;
$border-width: 1px !default;
// Body
//
// Settings for the `<body>` element.
$body-bg: #fff !default;
$body-color: $gray-dark !default;
// Links
//
// Style anchor elements.
$link-color: $brand-primary !default;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;
// Grid breakpoints
//
// Define the minimum and maximum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 544px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
) !default;
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
sm: 576px,
md: 720px,
lg: 940px,
xl: 1140px
) !default;
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default;
$grid-gutter-width: 1.875rem !default; // 30px
// Typography
//
// Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
$font-size-root: 16px !default;
$font-size-base: 1rem !default;
$font-size-lg: 1.25rem !default;
$font-size-sm: .875rem !default;
$font-size-xs: .75rem !default;
$font-size-h1: 2.5rem !default;
$font-size-h2: 2rem !default;
$font-size-h3: 1.75rem !default;
$font-size-h4: 1.5rem !default;
$font-size-h5: 1.25rem !default;
$font-size-h6: 1rem !default;
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;
$display1-weight: 300 !default;
$display2-weight: 300 !default;
$display3-weight: 300 !default;
$display4-weight: 300 !default;
$line-height: 1.5 !default;
$headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family: inherit !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.1 !default;
$headings-color: inherit !default;
$lead-font-size: 1.25rem !default;
$lead-font-weight: 300 !default;
$text-muted: $gray-light !default;
$abbr-border-color: $gray-light !default;
$blockquote-small-color: $gray-light !default;
$blockquote-font-size: ($font-size-base * 1.25) !default;
$blockquote-border-color: $gray-lighter !default;
$hr-border-color: rgba(0,0,0,.1) !default;
$hr-border-width: $border-width !default;
$dt-font-weight: bold !default;
$nested-kbd-font-weight: bold !default;
$list-inline-padding: 5px !default;
// Components
//
// Define common padding and border radius sizes and more.
$line-height-lg: (4 / 3) !default;
$line-height-sm: 1.5 !default;
$border-radius: .25rem !default;
$border-radius-lg: .3rem !default;
$border-radius-sm: .2rem !default;
$component-active-color: #fff !default;
$component-active-bg: $brand-primary !default;
$caret-width: .3em !default;
$caret-width-lg: $caret-width !default;
// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
$table-cell-padding: .75rem !default;
$table-sm-cell-padding: .3rem !default;
$table-bg: transparent !default;
$table-bg-accent: #f9f9f9 !default;
$table-bg-hover: #f5f5f5 !default;
$table-bg-active: $table-bg-hover !default;
$table-border-width: $border-width !default;
$table-border-color: $gray-lighter !default;
// Buttons
//
// For each of Bootstrap's buttons, define text, background and border color.
$btn-padding-x: 1rem !default;
$btn-padding-y: .375rem !default;
$btn-font-weight: normal !default;
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-border: $btn-primary-bg !default;
$btn-secondary-color: $gray-dark !default;
$btn-secondary-bg: #fff !default;
$btn-secondary-border: #ccc !default;
$btn-info-color: #fff !default;
$btn-info-bg: $brand-info !default;
$btn-info-border: $btn-info-bg !default;
$btn-success-color: #fff !default;
$btn-success-bg: $brand-success !default;
$btn-success-border: $btn-success-bg !default;
$btn-warning-color: #fff !default;
$btn-warning-bg: $brand-warning !default;
$btn-warning-border: $btn-warning-bg !default;
$btn-danger-color: #fff !default;
$btn-danger-bg: $brand-danger !default;
$btn-danger-border: $btn-danger-bg !default;
$btn-link-disabled-color: $gray-light !default;
$btn-padding-x-sm: .75rem !default;
$btn-padding-y-sm: .25rem !default;
$btn-padding-x-lg: 1.25rem !default;
$btn-padding-y-lg: .75rem !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default;
$btn-border-radius-lg: $border-radius-lg !default;
$btn-border-radius-sm: $border-radius-sm !default;
// Forms
$input-padding-x: .75rem !default;
$input-padding-y: .375rem !default;
$input-bg: #fff !default;
$input-bg-disabled: $gray-lighter !default;
$input-color: $gray !default;
$input-border-color: #ccc !default;
$input-btn-border-width: $border-width !default; // For form controls and buttons
$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
$input-border-radius: $border-radius !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default;
$input-border-focus: #66afe9 !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: #999 !default;
$input-padding-x-sm: .75rem !default;
$input-padding-y-sm: .275rem !default;
$input-padding-x-lg: 1.25rem !default;
$input-padding-y-lg: .75rem !default;
$input-height: (($font-size-base * $line-height) + ($input-padding-y * 2)) !default;
$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
$form-group-margin-bottom: $spacer-y !default;
$input-group-addon-bg: $gray-lighter !default;
$input-group-addon-border-color: $input-border-color !default;
$cursor-disabled: not-allowed !default;
// Form validation icons
$form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==" !default;
$form-icon-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZjBhZDRlIiBkPSJNNjAzIDY0MC4ybC0yNzguNS01MDljLTMuOC02LjYtMTAuOC0xMC42LTE4LjUtMTAuNnMtMTQuNyA0LTE4LjUgMTAuNkw5IDY0MC4yYy0zLjcgNi41LTMuNiAxNC40LjIgMjAuOCAzLjggNi41IDEwLjggMTAuNCAxOC4zIDEwLjRoNTU3YzcuNiAwIDE0LjYtNCAxOC40LTEwLjQgMy41LTYuNCAzLjYtMTQuNCAwLTIwLjh6bS0yNjYuNC0zMGgtNjEuMlY1NDloNjEuMnY2MS4yem0wLTEwN2gtNjEuMlYzMDRoNjEuMnYxOTl6Ii8+PC9zdmc+" !default;
$form-icon-danger: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZDk1MzRmIiBkPSJNNDQ3IDU0NC40Yy0xNC40IDE0LjQtMzcuNiAxNC40LTUyIDBsLTg5LTkyLjctODkgOTIuN2MtMTQuNSAxNC40LTM3LjcgMTQuNC01MiAwLTE0LjQtMTQuNC0xNC40LTM3LjYgMC01Mmw5Mi40LTk2LjMtOTIuNC05Ni4zYy0xNC40LTE0LjQtMTQuNC0zNy42IDAtNTJzMzcuNi0xNC4zIDUyIDBsODkgOTIuOCA4OS4yLTkyLjdjMTQuNC0xNC40IDM3LjYtMTQuNCA1MiAwIDE0LjMgMTQuNCAxNC4zIDM3LjYgMCA1MkwzNTQuNiAzOTZsOTIuNCA5Ni40YzE0LjQgMTQuNCAxNC40IDM3LjYgMCA1MnoiLz48L3N2Zz4=" !default;
// Dropdowns
//
// Dropdown menu container and contents.
$dropdown-bg: #fff !default;
$dropdown-border-color: rgba(0,0,0,.15) !default;
$dropdown-border-width: $border-width !default;
$dropdown-divider-bg: #e5e5e5 !default;
$dropdown-link-color: $gray-dark !default;
$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
$dropdown-link-hover-bg: #f5f5f5 !default;
$dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default;
$dropdown-link-disabled-color: $gray-light !default;
$dropdown-header-color: $gray-light !default;
// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
$zindex-navbar: 1000 !default;
$zindex-dropdown: 1000 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
$zindex-navbar-fixed: 1030 !default;
$zindex-navbar-sticky: 1030 !default;
$zindex-modal-bg: 1040 !default;
$zindex-modal: 1050 !default;
// Navbar
$navbar-border-radius: $border-radius !default;
$navbar-padding-horizontal: $spacer !default;
$navbar-padding-vertical: ($spacer / 2) !default;
$navbar-dark-color: rgba(255,255,255,.5) !default;
$navbar-dark-hover-color: rgba(255,255,255,.75) !default;
$navbar-dark-active-color: rgba(255,255,255,1) !default;
$navbar-dark-disabled-color: rgba(255,255,255,.25) !default;
$navbar-light-color: rgba(0,0,0,.3) !default;
$navbar-light-hover-color: rgba(0,0,0,.6) !default;
$navbar-light-active-color: rgba(0,0,0,.8) !default;
$navbar-light-disabled-color: rgba(0,0,0,.15) !default;
// Navs
$nav-link-padding: .5em 1em !default;
$nav-link-hover-bg: $gray-lighter !default;
$nav-disabled-link-color: $gray-light !default;
$nav-disabled-link-hover-color: $gray-light !default;
$nav-tabs-border-color: #ddd !default;
$nav-tabs-link-border-width: $border-width !default;
$nav-tabs-link-hover-border-color: $gray-lighter !default;
$nav-tabs-active-link-hover-bg: $body-bg !default;
$nav-tabs-active-link-hover-color: $gray !default;
$nav-tabs-active-link-hover-border-color: #ddd !default;
$nav-tabs-justified-link-border-color: #ddd !default;
$nav-tabs-justified-active-link-border-color: $body-bg !default;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-active-link-hover-bg: $component-active-bg !default;
$nav-pills-active-link-hover-color: $component-active-color !default;
// Pagination
$pagination-padding-x: .75rem !default;
$pagination-padding-y: .5rem !default;
$pagination-padding-x-sm: .75rem !default;
$pagination-padding-y-sm: .275rem !default;
$pagination-padding-x-lg: 1.5rem !default;
$pagination-padding-y-lg: .75rem !default;
$pagination-color: $link-color !default;
$pagination-bg: #fff !default;
$pagination-border-width: $border-width !default;
$pagination-border-color: #ddd !default;
$pagination-hover-color: $link-hover-color !default;
$pagination-hover-bg: $gray-lighter !default;
$pagination-hover-border: #ddd !default;
$pagination-active-color: #fff !default;
$pagination-active-bg: $brand-primary !default;
$pagination-active-border: $brand-primary !default;
$pagination-disabled-color: $gray-light !default;
$pagination-disabled-bg: #fff !default;
$pagination-disabled-border: #ddd !default;
// Pager
$pager-bg: $pagination-bg !default;
$pager-border-width: $border-width !default;
$pager-border-color: $pagination-border-color !default;
$pager-border-radius: 15px !default;
$pager-hover-bg: $pagination-hover-bg !default;
$pager-active-bg: $pagination-active-bg !default;
$pager-active-color: $pagination-active-color !default;
$pager-disabled-color: $pagination-disabled-color !default;
// Jumbotron
$jumbotron-padding: 2rem !default;
$jumbotron-bg: $gray-lighter !default;
// Form states and alerts
//
// Define colors for form feedback states and, by default, alerts.
$state-success-text: #3c763d !default;
$state-success-bg: #dff0d8 !default;
$state-success-border: darken($state-success-bg, 5%) !default;
$state-info-text: #31708f !default;
$state-info-bg: #d9edf7 !default;
$state-info-border: darken($state-info-bg, 7%) !default;
$state-warning-text: #8a6d3b !default;
$state-warning-bg: #fcf8e3 !default;
$state-warning-border: darken($state-warning-bg, 5%) !default;
$state-danger-text: #a94442 !default;
$state-danger-bg: #f2dede !default;
$state-danger-border: darken($state-danger-bg, 5%) !default;
// Cards
$card-spacer-x: 1.25rem !default;
$card-spacer-y: .75rem !default;
$card-border-width: 1px !default;
$card-border-radius: $border-radius !default;
$card-border-color: #e5e5e5 !default;
$card-border-radius-inner: $card-border-radius !default;
$card-cap-bg: #f5f5f5 !default;
$card-bg: #fff !default;
$card-link-hover-color: #fff !default;
// Tooltips
$tooltip-max-width: 200px !default;
$tooltip-color: #fff !default;
$tooltip-bg: #000 !default;
$tooltip-opacity: .9 !default;
$tooltip-arrow-width: 5px !default;
$tooltip-arrow-color: $tooltip-bg !default;
// Popovers
$popover-bg: #fff !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: rgba(0,0,0,.2) !default;
$popover-title-bg: darken($popover-bg, 3%) !default;
$popover-arrow-width: 10px !default;
$popover-arrow-color: $popover-bg !default;
$popover-arrow-outer-width: ($popover-arrow-width + 1) !default;
$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default;
// Labels
$label-default-bg: $gray-light !default;
$label-primary-bg: $brand-primary !default;
$label-success-bg: $brand-success !default;
$label-info-bg: $brand-info !default;
$label-warning-bg: $brand-warning !default;
$label-danger-bg: $brand-danger !default;
$label-color: #fff !default;
$label-link-hover-color: #fff !default;
$label-font-weight: bold !default;
// Modals
// Padding applied to the modal body
$modal-inner-padding: 15px !default;
$modal-title-padding: 15px !default;
$modal-title-line-height: $line-height !default;
$modal-content-bg: #fff !default;
$modal-content-border-color: rgba(0,0,0,.2) !default;
$modal-backdrop-bg: #000 !default;
$modal-backdrop-opacity: .5 !default;
$modal-header-border-color: #e5e5e5 !default;
$modal-footer-border-color: $modal-header-border-color !default;
$modal-lg: 900px !default;
$modal-md: 600px !default;
$modal-sm: 300px !default;
// Alerts
//
// Define alert colors, border radius, and padding.
$alert-padding: 15px !default;
$alert-border-radius: $border-radius !default;
$alert-link-font-weight: bold !default;
$alert-border-width: $border-width !default;
$alert-success-bg: $state-success-bg !default;
$alert-success-text: $state-success-text !default;
$alert-success-border: $state-success-border !default;
$alert-info-bg: $state-info-bg !default;
$alert-info-text: $state-info-text !default;
$alert-info-border: $state-info-border !default;
$alert-warning-bg: $state-warning-bg !default;
$alert-warning-text: $state-warning-text !default;
$alert-warning-border: $state-warning-border !default;
$alert-danger-bg: $state-danger-bg !default;
$alert-danger-text: $state-danger-text !default;
$alert-danger-border: $state-danger-border !default;
// Progress bars
$progress-bg: #f5f5f5 !default;
$progress-bar-color: #fff !default;
$progress-border-radius: $border-radius !default;
$progress-bar-bg: $brand-primary !default;
$progress-bar-success-bg: $brand-success !default;
$progress-bar-warning-bg: $brand-warning !default;
$progress-bar-danger-bg: $brand-danger !default;
$progress-bar-info-bg: $brand-info !default;
// List group
$list-group-bg: #fff !default;
$list-group-border-color: #ddd !default;
$list-group-border-width: $border-width !default;
$list-group-border-radius: $border-radius !default;
$list-group-hover-bg: #f5f5f5 !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border: $list-group-active-bg !default;
$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default;
$list-group-disabled-color: $gray-light !default;
$list-group-disabled-bg: $gray-lighter !default;
$list-group-disabled-text-color: $list-group-disabled-color !default;
$list-group-link-color: #555 !default;
$list-group-link-hover-color: $list-group-link-color !default;
$list-group-link-heading-color: #333 !default;
// Image thumbnails
$thumbnail-padding: .25rem !default;
$thumbnail-bg: $body-bg !default;
$thumbnail-border-width: $border-width !default;
$thumbnail-border-color: #ddd !default;
$thumbnail-border-radius: $border-radius !default;
// Breadcrumbs
$breadcrumb-padding-vertical: .75rem !default;
$breadcrumb-padding-horizontal: 1rem !default;
$breadcrumb-bg: $gray-lighter !default;
$breadcrumb-divider-color: $gray-light !default;
$breadcrumb-active-color: $gray-light !default;
$breadcrumb-divider: "/" !default;
// Carousel
$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default;
$carousel-control-color: #fff !default;
$carousel-control-width: 15% !default;
$carousel-control-opacity: .5 !default;
$carousel-control-font-size: 20px !default;
$carousel-indicator-active-bg: #fff !default;
$carousel-indicator-border-color: #fff !default;
$carousel-caption-color: #fff !default;
// Close
$close-font-weight: bold !default;
$close-color: #000 !default;
$close-text-shadow: 0 1px 0 #fff !default;
// Code
$code-color: #bd4147 !default;
$code-bg: #f7f7f9 !default;
$kbd-color: #fff !default;
$kbd-bg: #333 !default;
$pre-bg: #f7f7f9 !default;
$pre-color: $gray-dark !default;
$pre-border-color: #ccc !default;
$pre-scrollable-max-height: 340px !default;

View file

@ -1,103 +0,0 @@
// VARIABLES
/*** Colors ***/
$primary-color: color("mdb-color", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;
$secondary-color: color("teal", "lighten-1") !default;
$success-color: color("green", "base") !default;
$link-color: color("light-blue", "darken-1") !default;
/*** Fonts ***/
$roboto-font-path: "../font/roboto/" !default;
/*** Typography ***/
$off-black: rgba(0, 0, 0, 0.87) !default;
/*** Cards ***/
$card-padding: 20px !default;
$card-bg-color: #fff !default;
$card-link-color: color("orange", "accent-2") !default;
$card-link-color-light: lighten($card-link-color, 20%) !default;
/*** Global ***/
// Media Query Ranges
$small-screen-up: 601px !default;
$medium-screen-up: 993px !default;
$large-screen-up: 1201px !default;
$small-screen: 600px !default;
$medium-screen: 992px !default;
$large-screen: 1200px !default;
$sidenav-breakpoint: 1440px !default;
$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
$hide-sidenav: "only screen and (max-width : #{$sidenav-breakpoint})" !default;
// Text fluid
$range : $large-screen - $small-screen !default;
$intervals: 20 !default;
$interval-size: $range / $intervals !default;
/*** Forms ***/
// Text Inputs + Textarea
$input-border-color: color("grey", "darken-4") !default;
$input-bg-color: #fff !default;
$input-error-color: $error-color !default;
$input-success-color: $success-color !default;
$input-focus-color: $primary-color !default;
$label-font-size: .8rem !default;
$input-disabled-color: rgba(0,0,0, .46) !default;
$input-disabled-solid-color: #BDBDBD !default;
// Radio Buttons
$radio-fill-color: $primary-color !default;
$radio-empty-color: #5a5a5a !default;
// Switches
$switch-bg-color: $secondary-color !default;
$switch-checked-lever-bg: desaturate(lighten($secondary-color, 25%), 25%) !default;
$switch-unchecked-bg: #F1F1F1 !default;
$switch-unchecked-lever-bg: #818181 !default;
/*** Buttons ***/
$button-bg-color-disabled: #DFDFDF !default;
$button-color: $secondary-color !default;
$button-color-disabled: #9F9F9F !default;
$button-color-flat: #343434 !default;
$button-color-raised: #fff !default;
$button-floating-size: 37px !default;
$button-height: 36px !default;
$button-font-size-shared: 1.3rem !default;
$button-large-icon-font-size: 1.6rem !default;
$button-line-height: 36px !default;
// Grid Variables
$num-cols: 12 !default;
$gutter-width: 1.5rem !default;
$element-top-margin: $gutter-width/3 !default;
$element-bottom-margin: ($gutter-width*2)/3 !default;
/*** Dropdown ***/
$dropdown-bg-color: #fff !default;
$dropdown-hover-bg-color: #eee !default;
$dropdown-color: $primary-color !default;
$dropdown-item-height: 50px !default;
/*** Tabs ***/
$tabs-underline-color: $primary-color-light !default;
$tabs-text-color: $primary-color !default;
$tabs-bg-color: #fff !default;
// Date Picker
$datepicker-weekday-bg: darken($primary-color, 7%) !default;
$datepicker-date-bg: $primary-color !default;
$datepicker-year: rgba(255, 255, 255, .4) !default;
$datepicker-focus: rgba(0,0,0, .05) !default;
$datepicker-selected: $primary-color !default;
$datepicker-selected-outfocus: desaturate(lighten($primary-color, 35%), 15%) !default;

View file

@ -34,19 +34,47 @@ module.exports = app => {
// route to run a publish request on the daemon // route to run a publish request on the daemon
app.post('/api/publish', multipartMiddleware, ({ originalUrl, body, files }, res) => { app.post('/api/publish', multipartMiddleware, ({ originalUrl, body, files }, res) => {
logger.debug(`POST request on ${originalUrl}`); logger.debug(`POST request on ${originalUrl}`);
const file = files.thumbnail || files.null; // validate that a file was provided
const file = files.speech || files.null;
if (!file) { if (!file) {
res.status(400).send('error: No file was submitted or the key used was incorrect. Files posted through this route must use a key of "thumbnail" or null'); res.status(400).send('Error: No file was submitted or the key used was incorrect. Files posted through this route must use a key of "speech" or null');
return; return;
} }
const name = body.claim || file.name.substring(0, file.name.indexOf('.')); // validate name
const name = body.name || file.name.substring(0, file.name.indexOf('.'));
const invalidCharacters = /[^\w,-]/.exec(name);
if (invalidCharacters) {
res.status(400).send('Error: The name you provided is not allowed. Please use A-Z, a-z, 0-9, "_" and "-" only.');
return;
}
// validate license
const license = body.license || 'No License Provided'; const license = body.license || 'No License Provided';
if ((license.indexOf('Public Domain') === -1) && (license.indexOf('Creative Commons') === -1)) {
res.status(400).send('Error: Only posts with a license of "Public Domain" or "Creative Commons" are eligible for publishing through spee.ch');
return;
}
const nsfw = body.nsfw || true; const nsfw = body.nsfw || true;
switch (nsfw) {
case true:
case false:
case 'true':
case 'false':
case 'on':
case 'off':
case 0:
case '0':
case 1:
case '1':
break;
default:
res.status(400).send('Error: NSFW value was not accepted. NSFW must be set to either true, false, "on", or "off"');
return;
}
const fileName = file.name; const fileName = file.name;
const filePath = file.path; const filePath = file.path;
const fileType = file.type; const fileType = file.type;
/* /*
make sure it's not a harmful file type note: make sure it's not a harmful file type
*/ */
// prepare the publish parameters // prepare the publish parameters
const publishParams = publishHelpers.createPublishParams(name, filePath, license, nsfw); const publishParams = publishHelpers.createPublishParams(name, filePath, license, nsfw);

View file

@ -1,6 +1,6 @@
<div class="card" id="publish"> <div class="panel" id="meme-fodder-maker">
<h2>#LBRYMemeFodder</h2> <div>
<div class="col-md-12"> <h2>#LBRYMemeFodder</h2>
<h3>Congratulations, you found the /meme-fodder game!</h3> <h3>Congratulations, you found the /meme-fodder game!</h3>
<p>Create a meme based on the current <i>lbry://meme-fodder</i> claims using the tool below.</p> <p>Create a meme based on the current <i>lbry://meme-fodder</i> claims using the tool below.</p>
</div> </div>

View file

@ -1,4 +1,4 @@
<div class="stop-float" id="publish"> <div class="stop-float panel">
<h2>Recent Meme Fodder</h2> <h2>Recent Meme Fodder</h2>
<div class="row"> <div class="row">
<p>Below are the free, public images published to <a href="lbry://meme-fodder">lbry://meme-fodder</a>. Want to put a different image on the chopping block? Go publish it!</p> <p>Below are the free, public images published to <a href="lbry://meme-fodder">lbry://meme-fodder</a>. Want to put a different image on the chopping block? Go publish it!</p>

View file

@ -15,13 +15,11 @@
<input type="text" id="publish-name" placeholder="Your claim name" class="form-control"> <input type="text" id="publish-name" placeholder="Your claim name" class="form-control">
<p> <p>
<label for="publish-license">License:</label> <label for="publish-license">License:</label>
<br/>
<select type="text" id="publish-license" name="license" value="license"> <select type="text" id="publish-license" name="license" value="license">
<option value="Public Domain">Public Domain</option> <option value="Public Domain">Public Domain</option>
<option value="Creative Commons">Creative Commons</option> <option value="Creative Commons">Creative Commons</option>
</select> </select>
</p> <br />
<p>
<input type="checkbox" id="publish-nsfw"> <input type="checkbox" id="publish-nsfw">
<label for="publish-nsfw">NSFW</label> <label for="publish-nsfw">NSFW</label>
</p> </p>