Added Bootstrap + MD #25
|
@ -2,7 +2,7 @@
|
|||
border: 1px dashed lightgrey;
|
||||
padding: 1em;
|
||||
height: 200px;
|
||||
width: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.all-claims-img {
|
||||
|
@ -11,4 +11,8 @@
|
|||
|
||||
#image-preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 10px 0px 10px 0px;
|
||||
}
|
Before Width: | Height: | Size: 180 B After Width: | Height: | Size: 180 B |
9320
public/vendors/MDB/css/bootstrap.css
vendored
Normal file
6
public/vendors/MDB/css/bootstrap.min.css
vendored
Normal file
7118
public/vendors/MDB/css/mdb.css
vendored
Normal file
26
public/vendors/MDB/css/mdb.min.css
vendored
Normal file
1
public/vendors/MDB/css/style.css
vendored
Normal file
|
@ -0,0 +1 @@
|
|||
/* YOUR CUSTOM STYLES */
|
BIN
public/vendors/MDB/font/roboto/Roboto-Bold.eot
vendored
Normal file
BIN
public/vendors/MDB/font/roboto/Roboto-Bold.ttf
vendored
Normal file
BIN
public/vendors/MDB/font/roboto/Roboto-Bold.woff
vendored
Normal file
BIN
public/vendors/MDB/font/roboto/Roboto-Bold.woff2
vendored
Normal file
BIN
public/vendors/MDB/font/roboto/Roboto-Light.eot
vendored
Normal file
BIN
public/vendors/MDB/font/roboto/Roboto-Light.ttf
vendored
Normal file
BIN
public/vendors/MDB/font/roboto/Roboto-Light.woff
vendored
Normal file
BIN
public/vendors/MDB/font/roboto/Roboto-Light.woff2
vendored
Normal file
BIN
public/vendors/MDB/font/roboto/Roboto-Medium.eot
vendored
Normal file
BIN
public/vendors/MDB/font/roboto/Roboto-Medium.ttf
vendored
Normal file
BIN
public/vendors/MDB/font/roboto/Roboto-Medium.woff
vendored
Normal file
BIN
public/vendors/MDB/font/roboto/Roboto-Medium.woff2
vendored
Normal file
BIN
public/vendors/MDB/font/roboto/Roboto-Regular.eot
vendored
Normal file
BIN
public/vendors/MDB/font/roboto/Roboto-Regular.ttf
vendored
Normal file
BIN
public/vendors/MDB/font/roboto/Roboto-Regular.woff
vendored
Normal file
BIN
public/vendors/MDB/font/roboto/Roboto-Regular.woff2
vendored
Normal file
BIN
public/vendors/MDB/font/roboto/Roboto-Thin.eot
vendored
Normal file
BIN
public/vendors/MDB/font/roboto/Roboto-Thin.ttf
vendored
Normal file
BIN
public/vendors/MDB/font/roboto/Roboto-Thin.woff
vendored
Normal file
BIN
public/vendors/MDB/font/roboto/Roboto-Thin.woff2
vendored
Normal file
BIN
public/vendors/MDB/img/lightbox/default-skin.png
vendored
Normal file
After Width: | Height: | Size: 547 B |
1
public/vendors/MDB/img/lightbox/default-skin.svg
vendored
Normal file
|
@ -0,0 +1 @@
|
|||
<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>
|
After Width: | Height: | Size: 1.5 KiB |
BIN
public/vendors/MDB/img/lightbox/preloader.gif
vendored
Normal file
After Width: | Height: | Size: 866 B |
BIN
public/vendors/MDB/img/overlays/01.png
vendored
Normal file
After Width: | Height: | Size: 211 B |
BIN
public/vendors/MDB/img/overlays/02.png
vendored
Normal file
After Width: | Height: | Size: 213 B |
BIN
public/vendors/MDB/img/overlays/03.png
vendored
Normal file
After Width: | Height: | Size: 209 B |
BIN
public/vendors/MDB/img/overlays/04.png
vendored
Normal file
After Width: | Height: | Size: 211 B |
BIN
public/vendors/MDB/img/overlays/05.png
vendored
Normal file
After Width: | Height: | Size: 213 B |
BIN
public/vendors/MDB/img/overlays/06.png
vendored
Normal file
After Width: | Height: | Size: 211 B |
BIN
public/vendors/MDB/img/overlays/07.png
vendored
Normal file
After Width: | Height: | Size: 215 B |
BIN
public/vendors/MDB/img/overlays/08.png
vendored
Normal file
After Width: | Height: | Size: 146 B |
BIN
public/vendors/MDB/img/overlays/09.png
vendored
Normal file
After Width: | Height: | Size: 137 B |
4
public/vendors/MDB/img/svg/arrow_left.svg
vendored
Normal file
|
@ -0,0 +1,4 @@
|
|||
<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>
|
After Width: | Height: | Size: 215 B |
4
public/vendors/MDB/img/svg/arrow_right.svg
vendored
Normal file
|
@ -0,0 +1,4 @@
|
|||
<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>
|
After Width: | Height: | Size: 214 B |
44
public/vendors/MDB/index.html
vendored
Normal file
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Material Design Bootstrap</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link href="css/mdb.min.css" rel="stylesheet">
|
||||
<!-- Your custom styles (optional) -->
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Start your project here-->
|
||||
<div style="height: 100vh">
|
||||
<div class="flex-center flex-column">
|
||||
<h1 class="animated fadeIn mb-2">Material Design for Bootstrap</h1>
|
||||
|
||||
<h5 class="animated fadeIn mb-1">Thank you for using our product. We're glad you're with us.</h5>
|
||||
|
||||
<p class="animated fadeIn text-muted">MDB Team</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Start your project here-->
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- JQuery -->
|
||||
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="js/tether.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="js/bootstrap.min.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="js/mdb.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
3535
public/vendors/MDB/js/bootstrap.js
vendored
Normal file
7
public/vendors/MDB/js/bootstrap.min.js
vendored
Normal file
9842
public/vendors/MDB/js/jquery-2.2.3.js
vendored
Normal file
4
public/vendors/MDB/js/jquery-2.2.3.min.js
vendored
Normal file
10220
public/vendors/MDB/js/jquery-3.1.1.js
vendored
Normal file
4
public/vendors/MDB/js/jquery-3.1.1.min.js
vendored
Normal file
5339
public/vendors/MDB/js/mdb.js
vendored
Normal file
4
public/vendors/MDB/js/mdb.min.js
vendored
Normal file
1726
public/vendors/MDB/js/tether.js
vendored
Normal file
1
public/vendors/MDB/js/tether.min.js
vendored
Normal file
8
public/vendors/MDB/sass/README.txt
vendored
Normal file
|
@ -0,0 +1,8 @@
|
|||
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.
|
44
public/vendors/MDB/sass/mdb.scss
vendored
Normal file
|
@ -0,0 +1,44 @@
|
|||
/*!
|
||||
* 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";
|
3340
public/vendors/MDB/sass/mdb/free/_animations.scss
vendored
Normal file
553
public/vendors/MDB/sass/mdb/free/_buttons.scss
vendored
Normal file
|
@ -0,0 +1,553 @@
|
|||
// 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;
|
||||
}
|
90
public/vendors/MDB/sass/mdb/free/_cards-basic.scss
vendored
Normal file
|
@ -0,0 +1,90 @@
|
|||
// 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;
|
||||
}
|
82
public/vendors/MDB/sass/mdb/free/_carousels-basic.scss
vendored
Normal file
|
@ -0,0 +1,82 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
51
public/vendors/MDB/sass/mdb/free/_footer.scss
vendored
Normal file
|
@ -0,0 +1,51 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
298
public/vendors/MDB/sass/mdb/free/_forms-basic.scss
vendored
Normal file
|
@ -0,0 +1,298 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
409
public/vendors/MDB/sass/mdb/free/_global.scss
vendored
Normal file
|
@ -0,0 +1,409 @@
|
|||
// 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);
|
||||
|
||||
}
|
239
public/vendors/MDB/sass/mdb/free/_helpers.scss
vendored
Normal file
|
@ -0,0 +1,239 @@
|
|||
// 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;
|
||||
}
|
429
public/vendors/MDB/sass/mdb/free/_hover-effects.scss
vendored
Normal file
|
@ -0,0 +1,429 @@
|
|||
/* 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
364
public/vendors/MDB/sass/mdb/free/_modals.scss
vendored
Normal file
|
@ -0,0 +1,364 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
141
public/vendors/MDB/sass/mdb/free/_navbars.scss
vendored
Normal file
|
@ -0,0 +1,141 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
}
|
51
public/vendors/MDB/sass/mdb/free/_roboto.scss
vendored
Normal file
|
@ -0,0 +1,51 @@
|
|||
// 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;
|
||||
}
|
228
public/vendors/MDB/sass/mdb/free/_typography.scss
vendored
Normal file
|
@ -0,0 +1,228 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
157
public/vendors/MDB/sass/mdb/free/_waves.scss
vendored
Normal file
|
@ -0,0 +1,157 @@
|
|||
|
||||
/*!
|
||||
* 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;
|
||||
}
|
875
public/vendors/MDB/sass/mdb/free/data/_colors.scss
vendored
Normal file
|
@ -0,0 +1,875 @@
|
|||
// 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 */
|
||||
}
|
101
public/vendors/MDB/sass/mdb/free/data/_mixins.scss
vendored
Normal file
|
@ -0,0 +1,101 @@
|
|||
/*********************
|
||||
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
|
||||
}
|
||||
}
|
376
public/vendors/MDB/sass/mdb/free/data/_prefixer.scss
vendored
Normal file
|
@ -0,0 +1,376 @@
|
|||
//---------------------------------------------------
|
||||
// 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;
|
||||
}
|
674
public/vendors/MDB/sass/mdb/free/data/_variables-b4.scss
vendored
Normal file
|
@ -0,0 +1,674 @@
|
|||
// 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;
|
103
public/vendors/MDB/sass/mdb/free/data/_variables.scss
vendored
Normal file
|
@ -0,0 +1,103 @@
|
|||
// 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;
|
|
@ -3,11 +3,11 @@ var routeHelpers = require('../helpers/routeHelpers.js');
|
|||
var lbryApi = require('../helpers/lbryApi.js');
|
||||
|
||||
module.exports = function(app){
|
||||
// route to fetch one free public claim
|
||||
app.get("/favicon.ico", function(req, res){
|
||||
console.log(" >> GET request on favicon.ico");
|
||||
res.sendFile(path.join(__dirname, '../public/assets/img', 'favicon.ico'));
|
||||
});
|
||||
// route for favicon
|
||||
// app.get("/favicon.ico", function(req, res){
|
||||
// console.log(" >> GET request on favicon.ico");
|
||||
// res.sendFile(path.join(__dirname, '../public/assets/img', 'favicon.ico'));
|
||||
// });
|
||||
// route to fetch one free public claim
|
||||
app.get("/:name/all", function(req, res){
|
||||
console.log(">> GET request on /" + req.params.name + " (all)");
|
||||
|
|
|
@ -1,12 +1,18 @@
|
|||
<h3>All Claims</h3>
|
||||
<p>These are all the free, public assets at that claim. You can publish more at <a href="/">spee.ch</a>.</p>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3">
|
||||
<h3>All Claims</h3>
|
||||
<p>These are all the free, public assets at that claim. You can publish more at <a href="/">spee.ch</a>.</p>
|
||||
|
||||
{{#each claims}}
|
||||
<hr>
|
||||
<img class="all-claims-img" src="https://spee.ch/{{this.name}}/{{this.claim_id}}" />
|
||||
<p>claim_id: {{this.claim_id}}</p>
|
||||
<p>direct link <a href="https://spee.ch/{{this.name}}/{{this.claim_id}}">here</a></p>
|
||||
<p>author: {{this.value.stream.metadata.author}}</p>
|
||||
<p>description: {{this.value.stream.metadata.description}}</p>
|
||||
<p>license: {{this.value.stream.metadata.license}}</p>
|
||||
{{/each}}
|
||||
{{#each claims}}
|
||||
<hr>
|
||||
<img class="all-claims-img" src="https://spee.ch/{{this.name}}/{{this.claim_id}}" />
|
||||
<p>claim_id: {{this.claim_id}}</p>
|
||||
<p>direct link <a href="https://spee.ch/{{this.name}}/{{this.claim_id}}">here</a></p>
|
||||
<p>author: {{this.value.stream.metadata.author}}</p>
|
||||
<p>description: {{this.value.stream.metadata.description}}</p>
|
||||
<p>license: {{this.value.stream.metadata.license}}</p>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,12 +1,26 @@
|
|||
<h1>spee.ch</h1>
|
||||
<p>spee.ch is a single-serving site that reads and publishes images to and from the <a href="https://lbry.io">LBRY</a> blockchain.</p>
|
||||
|
||||
{{> examples}}
|
||||
{{> publish}}
|
||||
{{> links}}
|
||||
{{> documentation}}
|
||||
{{> contribute}}
|
||||
{{> bugs}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card card-block default-color-dark white-text">
|
||||
<div class="card-title">
|
||||
<h1>Spee.ch</h1>
|
||||
</div>
|
||||
<p>Spee.ch is a single-serving site that reads and publishes images to and from the <a class="white-text" href="https://lbry.io">LBRY</a> blockchain.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
{{> examples}}
|
||||
{{> publish}}
|
||||
</div>
|
||||
<div class="row">
|
||||
{{> documentation}}
|
||||
</div>
|
||||
<div class="row">
|
||||
{{> contribute}}
|
||||
{{> bugs}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="/siofu/client.js"></script>
|
||||
|
|
|
@ -2,12 +2,27 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet" href="/assets/css/style.css" type="text/css">
|
||||
<title>Spee.ch</title>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/vendors/MDB/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Material Design Bootstrap -->
|
||||
<link href="/vendors/MDB/css/mdb.min.css" rel="stylesheet">
|
||||
<!-- custom styles -->
|
||||
<link rel="stylesheet" href="/assets/css/style.css" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
{{{ body }}}
|
||||
<!-- JQuery -->
|
||||
<script type="text/javascript" src="/vendors/MDB/js/jquery-3.1.1.min.js"></script>
|
||||
<!-- Bootstrap tooltips -->
|
||||
<script type="text/javascript" src="/vendors/MDB/js/tether.min.js"></script>
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script type="text/javascript" src="/vendors/MDB/js/bootstrap.min.js"></script>
|
||||
<!-- MDB core JavaScript -->
|
||||
<script type="text/javascript" src="/vendors/MDB/js/mdb.min.js"></script>
|
||||
</body>
|
||||
</html>
|
16
views/partials/about.handlebars
Normal file
|
@ -0,0 +1,16 @@
|
|||
<div class="col-md-12">
|
||||
<div class="card" id="about">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Retrieving</h4>
|
||||
<p>Spee.ch is a means by which you can retrieve free, public media assets that are on the LBRY blockchain. You can use Spee.ch urls to retrieve an asset directly in other websites. For example, you could use:<code><img src="https://spee.ch/example" /></code></p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Publishing</h4>
|
||||
<p>Spee.ch is an application that allows you to publish free, public media assets -- such as images, videos, and music -- to the LBRY blockchain.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -1,7 +1,8 @@
|
|||
<div id="bugs">
|
||||
<h2>Bugs</h2>
|
||||
<p>Spee.ch is young and under continuous development so it will have bugs. Please leave an issue on our <a href="https://github.com/lbryio/spee.ch">github</a> if you experience a problem or have suggestions.</p>
|
||||
<br> .w.
|
||||
<br>(o|o)
|
||||
<br> `'`
|
||||
<div class="col-md-6">
|
||||
<div class="card card-block" id="bugs">
|
||||
<div class="card-title">
|
||||
<h2>Bugs</h2>
|
||||
</div>
|
||||
<p>Spee.ch is young and under continuous development so it will have bugs. Please leave an issue on our <a href="https://github.com/lbryio/spee.ch">github</a> if you experience a problem or have suggestions.</p>
|
||||
</div>
|
||||
</div>
|
|
@ -1,4 +1,6 @@
|
|||
<div id="contribute">
|
||||
<h2>Contribute</h2>
|
||||
<p>If you would like to help make spee.ch amazing, join our slack channel!</p>
|
||||
<div class="col-md-6">
|
||||
<div class="card card-block" id="contribute">
|
||||
<div class="card-title"><h2>Contribute</h2></div>
|
||||
<p>If you would like to help make Spee.ch amazing, join our <a href="https://lbry.slack.com">slack</a> channel!</p>
|
||||
</div>
|
||||
</div>
|
|
@ -1,39 +1,25 @@
|
|||
<div id="documentation">
|
||||
<h2>Documentation</h2>
|
||||
<h3>Site Navigation</h3>
|
||||
<ul>
|
||||
<li><strong><a href="/">spee.ch</a></strong>
|
||||
<ul>
|
||||
<li>To publish a file, navigate to the homepage.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><strong>spee.ch/<the name of the claim></strong>
|
||||
<ul>
|
||||
<li>To view the file with the largest bid at a claim.</li>
|
||||
<li>E.g. <a href="/doitlive">spee.ch/doitlive</a>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><strong>spee.ch/< the name of the claim >/< the claim_id ></strong>
|
||||
<ul>
|
||||
<li>To view a specific file at a claim</li>
|
||||
<li>E.g. <a href="/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5">spee.ch/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><strong>spee.ch/<the name of the claim>/all</strong>
|
||||
<ul>
|
||||
<li>To view a batch of files at a claim</li>
|
||||
<li>E.g. <a href="/doitlive/all">spee.ch/doitlive/all</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>API</h3>
|
||||
<p>Note: these are being used for testing durring spee.ch development and may not be maintained</p>
|
||||
<ul>
|
||||
<li>A GET request to <strong>spee.ch/claim_list/<the name of the claim></strong>
|
||||
<ul>
|
||||
<li>Will return the claim_list for the claim in json format. </li>
|
||||
<li>E.g. <a href="/claim_list/doitlive">spee.ch/claim_list/doitlive</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="col-md-12">
|
||||
<div class="card" id="documentation">
|
||||
<div class="card-title card-block default-color-dark white-text">
|
||||
<h2>Documentation</h2>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<strong><a href="/">spee.ch</a></strong>
|
||||
<li>To publish a file, use the tool on the homepage.</li>
|
||||
<br>
|
||||
<strong>spee.ch/<the name of the claim></strong>
|
||||
<li >Serves the newest file with the largest bid at a claim.</li>
|
||||
<li >E.g. <a href="/doitlive">spee.ch/doitlive</a>.</li>
|
||||
<br>
|
||||
<strong>spee.ch/< the name of the claim >/< the claim_id ></strong>
|
||||
<li >Serves a specific file at a claim</li>
|
||||
<li >E.g. <a href="/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5">spee.ch/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5</a></li>
|
||||
<br>
|
||||
<strong>spee.ch/<the name of the claim>/all</strong>
|
||||
<li >Displays a list of all files at a claim</li>
|
||||
<li >E.g. <a href="/doitlive/all">spee.ch/doitlive/all</a></li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -1,10 +1,16 @@
|
|||
<div id="examples">
|
||||
<h2>Examples:</h2>
|
||||
<ul>
|
||||
<li><a href="/coconuts">spee.ch/coconuts</a></li>
|
||||
<li><a href="/wood">spee.ch/wood</a></li>
|
||||
<li><a href="/doitlive">spee.ch/doitlive</a></li>
|
||||
<li><a href="/doitlive/all">spee.ch/doitlive/all</a></li>
|
||||
<li><a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0">spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0</a></li>
|
||||
</ul>
|
||||
<div class="col-md-6">
|
||||
<div class="card" id="examples">
|
||||
<div class="card-title card-block default-color-dark white-text">
|
||||
<h2>Examples</h2>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<ul>
|
||||
<li class="list-square"><a href="/coconuts">spee.ch/coconuts</a></li>
|
||||
<li class="list-square"><a href="/wood">spee.ch/wood</a></li>
|
||||
<li class="list-square"><a href="/doitlive">spee.ch/doitlive</a></li>
|
||||
<li class="list-square"><a href="/doitlive/all">spee.ch/doitlive/all</a></li>
|
||||
<li class="list-square"><a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0">spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -1,6 +0,0 @@
|
|||
<div id="links">
|
||||
<h2>Links</h2>
|
||||
<a href="https://github.com/lbryio/spee.ch">github</a>
|
||||
<a href="https://lbry.io/">lbry</a>
|
||||
<a href="https://lbry.slack.com">slack</a>
|
||||
</div>
|
|
@ -1,28 +1,34 @@
|
|||
<div id="publish">
|
||||
<h2>Publish Your Own</h2>
|
||||
<div id="publish-active-area">
|
||||
<form id="publish-form" action="" method="" enctype="multipart/form-data">
|
||||
<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
|
||||
<p>Drag and drop your file here, or choose your file below.</p>
|
||||
|
||||
<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
|
||||
</div>
|
||||
<img id="image-preview" src="" height="200" alt="Image preview..."/>
|
||||
<br/>
|
||||
Name: <input type="text" id="publish-name" name="name" value="name"/>
|
||||
<br/>
|
||||
License: <select type="text" id="publish-license" name="license" value="license">
|
||||
<option value="Public Domain">Public Domain</option>
|
||||
<option value="Creative Commons">Creative Commons</option>
|
||||
</select>
|
||||
<br/>
|
||||
NSFW: <select type="text" id="publish-nsfw" name="nsfw" value="false">
|
||||
<option value="false">False</option>
|
||||
<option value="true">True</option>
|
||||
</select>
|
||||
<p><i>By clicking 'Publish' I attest that I have read and agree to the <a href="https://lbry.io/termsofservice" target="_blank">LBRY terms of service</a>.</i></p>
|
||||
<button id="publish-submit">Publish</button>
|
||||
<button id="publish-reset">Reset</button>
|
||||
</form>
|
||||
<div class="col-md-6">
|
||||
<div class="card" id="publish">
|
||||
<div class="card-title card-block default-color-dark white-text">
|
||||
<h2>Publish Your Own</h2>
|
||||
</div>
|
||||
<div class="card-block" id="publish-active-area">
|
||||
<form id="publish-form" action="" method="" enctype="multipart/form-data">
|
||||
<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
|
||||
<p>Drag and drop your file here, or choose your file below.</p>
|
||||
<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
|
||||
</div>
|
||||
<img id="image-preview" src="" height="200" alt="Image preview..."/>
|
||||
<div class="md-form">
|
||||
<input type="text" id="publish-name" value="Name" class="form-control">
|
||||
</div>
|
||||
<fieldset class="form-group">
|
||||
License:
|
||||
<select type="text" id="publish-license" name="license" value="license">
|
||||
<option value="Public Domain">Public Domain</option>
|
||||
<option value="Creative Commons">Creative Commons</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<input type="checkbox" id="publish-nsfw">
|
||||
<label for="publish-nsfw">NSFW</label>
|
||||
</fieldset>
|
||||
<p><i>By clicking 'Publish' I attest that I have read and agree to the <a href="https://lbry.io/termsofservice" target="_blank">LBRY terms of service</a>.</i></p>
|
||||
<button id="publish-submit">Publish</button>
|
||||
<button id="publish-reset">Reset</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|