Archive: Namaste PHP AMQP framework v1.0 (2017-2020)
952 days continuous production uptime, 40k+ tp/s single node. Original corpo Bitbucket history not included — clean archive commit.
This commit is contained in:
1
html/sass/mdb/_custom.scss
Executable file
1
html/sass/mdb/_custom.scss
Executable file
@@ -0,0 +1 @@
|
||||
// Your custom style
|
||||
3340
html/sass/mdb/free/_animations.scss
Executable file
3340
html/sass/mdb/free/_animations.scss
Executable file
File diff suppressed because it is too large
Load Diff
20
html/sass/mdb/free/_badge.scss
Executable file
20
html/sass/mdb/free/_badge.scss
Executable file
@@ -0,0 +1,20 @@
|
||||
//Badges
|
||||
.badge {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@each $name, $color in $material-colors {
|
||||
.badge-#{$name} {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-pill {
|
||||
padding-right: $badge-pill-padding-x;
|
||||
padding-left: $badge-pill-padding-x;
|
||||
@include border-radius($badge-pill-border-radius);
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
color: #FFF !important;
|
||||
}
|
||||
1
html/sass/mdb/free/_breadcrumb.scss
Executable file
1
html/sass/mdb/free/_breadcrumb.scss
Executable file
@@ -0,0 +1 @@
|
||||
// Breadcrumbs
|
||||
125
html/sass/mdb/free/_buttons.scss
Executable file
125
html/sass/mdb/free/_buttons.scss
Executable file
@@ -0,0 +1,125 @@
|
||||
// Buttons
|
||||
button:focus {
|
||||
outline:0 !important;
|
||||
}
|
||||
.btn {
|
||||
@extend .z-depth-1;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.85rem 2.13rem;
|
||||
margin: 6px;
|
||||
@extend .white-text;
|
||||
border-radius: 2px;
|
||||
border: 0;
|
||||
transition: .2s ease-out;
|
||||
text-transform: uppercase;
|
||||
white-space: normal !important;
|
||||
word-wrap: break-word;
|
||||
cursor: pointer;
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:active:focus {
|
||||
@extend .z-depth-1-half;
|
||||
outline: 0;
|
||||
}
|
||||
.fa {
|
||||
font-size: 1rem;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
margin-top: -2px;
|
||||
&.right {
|
||||
margin-left: 3px;
|
||||
}
|
||||
&.left {
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
&.btn-lg {
|
||||
font-size: 0.9rem;
|
||||
padding: 1rem 2.4rem;
|
||||
.fa {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
&.btn-md {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.7rem 1.6rem;
|
||||
.fa {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
&.btn-sm {
|
||||
font-size: 0.6rem;
|
||||
padding: 0.5rem 1.6rem;
|
||||
&.btn-table {
|
||||
padding: 0.5rem 0.9rem;
|
||||
}
|
||||
.fa {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
&.btn-tb {
|
||||
padding: 0.3rem 1rem;
|
||||
}
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
&[class*="btn-outline-"] {
|
||||
padding-top:.76rem;
|
||||
padding-bottom: .76rem;
|
||||
&.btn-sm {
|
||||
padding-top:.42rem;
|
||||
padding-bottom: .42rem;
|
||||
}
|
||||
&.btn-md {
|
||||
padding-top:.58rem;
|
||||
padding-bottom: .58rem;
|
||||
}
|
||||
&.btn-lg {
|
||||
padding-top:.9rem;
|
||||
padding-bottom: .9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary.disabled, .btn-secondary:disabled {
|
||||
background-color: #b579d2!important;
|
||||
border-color: #b579d2 !important;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
.btn {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.btn-block {
|
||||
margin: inherit;
|
||||
}
|
||||
.btn-split {
|
||||
padding-left: 0.85rem;
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
.btn-link {
|
||||
background-color: transparent;
|
||||
@extend .black-text;
|
||||
box-shadow: none !important;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
.btn-flat {
|
||||
box-shadow: none;
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
@each $btn-name, $color-value in $material-colors {
|
||||
@include make-button($btn-name, $color-value);
|
||||
@include make-outline-button($btn-name, $color-value);
|
||||
}
|
||||
58
html/sass/mdb/free/_cards-basic.scss
Executable file
58
html/sass/mdb/free/_cards-basic.scss
Executable file
@@ -0,0 +1,58 @@
|
||||
// Card Basic
|
||||
.card {
|
||||
font-weight: 400;
|
||||
border-radius: .3rem;
|
||||
&:not([class*="card-outline-"]) {
|
||||
border: 0;
|
||||
@extend .z-depth-1;
|
||||
}
|
||||
img {
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
.card-body {
|
||||
position: relative;
|
||||
h5 {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
h4 {
|
||||
font-weight: 400;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
.card-title {
|
||||
a {
|
||||
transition: 0.3s;
|
||||
&:hover {
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-text {
|
||||
font-size: 0.9rem;
|
||||
color: #747373;
|
||||
font-weight: 400;
|
||||
}
|
||||
.card-footer {
|
||||
&.links-light {
|
||||
a {
|
||||
font-size: 15px;
|
||||
color: #757575;
|
||||
&:hover {
|
||||
color: #d50000;
|
||||
transition: 0.4s;
|
||||
}
|
||||
.fa {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
57
html/sass/mdb/free/_carousel-basic.scss
Executable file
57
html/sass/mdb/free/_carousel-basic.scss
Executable file
@@ -0,0 +1,57 @@
|
||||
// CAROUSELS BASIC
|
||||
.carousel {
|
||||
.carousel-control-prev-icon,
|
||||
.carousel-control-next-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.carousel-control-prev-icon {
|
||||
background-image: url(#{$image-path}/svg/arrow_left.svg);
|
||||
}
|
||||
.carousel-control-next-icon {
|
||||
background-image: url(#{$image-path}/svg/arrow_right.svg);
|
||||
}
|
||||
.carousel-indicators {
|
||||
li {
|
||||
max-width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
.video-fluid {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-fade {
|
||||
.carousel-item {
|
||||
opacity: 0;
|
||||
transition-duration: .6s;
|
||||
transition-property: opacity;
|
||||
}
|
||||
|
||||
.carousel-item.active,
|
||||
.carousel-item-next.carousel-item-left,
|
||||
.carousel-item-prev.carousel-item-right {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.active.carousel-item-left,
|
||||
.active.carousel-item-right {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.carousel-item-next,
|
||||
.carousel-item-prev,
|
||||
.carousel-item.active,
|
||||
.active.carousel-item-left,
|
||||
.active.carousel-item-prev {
|
||||
transform: translateX(0);
|
||||
|
||||
@supports (transform-style: preserve-3d) {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
82
html/sass/mdb/free/_carousels-basic.scss
Normal file
82
html/sass/mdb/free/_carousels-basic.scss
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
38
html/sass/mdb/free/_collapse.scss
Executable file
38
html/sass/mdb/free/_collapse.scss
Executable file
@@ -0,0 +1,38 @@
|
||||
// ACCORDION
|
||||
.accordion {
|
||||
.card {
|
||||
border-bottom: 1px solid color('grey', 'lighten-3');
|
||||
box-shadow: none;
|
||||
.card-header {
|
||||
padding: 1rem 1.5rem;
|
||||
background: transparent;
|
||||
border-bottom: 0;
|
||||
a:not(.collapsed) {
|
||||
.rotate-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.fa-angle-down {
|
||||
float: right;
|
||||
}
|
||||
.card-block {
|
||||
padding-top: .25rem;
|
||||
}
|
||||
.card-body {
|
||||
line-height: 1.7;
|
||||
color: #626262;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Collapsible body
|
||||
.collapsible-body {
|
||||
display: none;
|
||||
}
|
||||
4
html/sass/mdb/free/_deprecated.scss
Executable file
4
html/sass/mdb/free/_deprecated.scss
Executable file
@@ -0,0 +1,4 @@
|
||||
// Buttons
|
||||
// .btn-mdb was replaced by .btn-mdb-color
|
||||
|
||||
@include make-button('mdb', map-get($mdb-color, base));
|
||||
13
html/sass/mdb/free/_dropdowns.scss
Executable file
13
html/sass/mdb/free/_dropdowns.scss
Executable file
@@ -0,0 +1,13 @@
|
||||
// Dropdowns free
|
||||
.dropdown {
|
||||
.dropdown-menu {
|
||||
.dropdown-item {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: #1d1e1f;
|
||||
background-color: #f7f7f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
65
html/sass/mdb/free/_footer.scss
Executable file
65
html/sass/mdb/free/_footer.scss
Executable file
@@ -0,0 +1,65 @@
|
||||
// FOOTER
|
||||
footer {
|
||||
&.page-footer {
|
||||
margin-top: $footer-margin-top;
|
||||
padding-top: $footer-padding-top;
|
||||
color: $white;
|
||||
.container-fluid {
|
||||
width:auto;
|
||||
}
|
||||
.footer-copyright {
|
||||
overflow: hidden;
|
||||
height: $footer-copyright-height;
|
||||
line-height: $footer-copyright-line-height;
|
||||
color: rgba($white, .6);
|
||||
background-color: rgba($black, .2);
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.call-to-action {
|
||||
text-align: center;
|
||||
padding-top: $footer-call-to-action-pt;
|
||||
padding-bottom: $footer-call-to-action-pb;
|
||||
ul li {
|
||||
display: inline-block;
|
||||
padding-right: $footer-call-to-action-pr;
|
||||
}
|
||||
}
|
||||
.social-section {
|
||||
ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
ul {
|
||||
a {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul {
|
||||
list-style-type:none;
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Instagram photos */
|
||||
ul.instagram-photos {
|
||||
list-style-type: none;
|
||||
padding:0;
|
||||
li {
|
||||
display: inline-block;
|
||||
max-width: $footer-insta-photos-max-width;
|
||||
margin: $footer-insta-photos-margin;
|
||||
img {
|
||||
margin: 0;
|
||||
@extend .z-depth-1-half;
|
||||
}
|
||||
}
|
||||
}
|
||||
233
html/sass/mdb/free/_forms-basic.scss
Executable file
233
html/sass/mdb/free/_forms-basic.scss
Executable file
@@ -0,0 +1,233 @@
|
||||
// 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: $input-font-size;
|
||||
box-shadow: none;
|
||||
box-sizing: content-box;
|
||||
@include transition(all .3s);
|
||||
|
||||
// Disabled & readonly
|
||||
&:disabled, &[readonly="readonly"] {
|
||||
color: $input-disabled-color;
|
||||
border-bottom: 1px dotted $input-disabled-color;
|
||||
background-color: transparent;
|
||||
+ 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
|
||||
+ 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;
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
&.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;
|
||||
height: 2.1rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Input with label
|
||||
.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;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:disabled,
|
||||
&[readonly] {
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid #bdbdbd;
|
||||
}
|
||||
}
|
||||
// Input + label wrapper styles
|
||||
.md-form {
|
||||
position: relative;
|
||||
margin-bottom: 1.5rem;
|
||||
label {
|
||||
@include transition(.2s ease-out);
|
||||
color: #757575;
|
||||
position: absolute;
|
||||
top: 0.8rem;
|
||||
left: 0;
|
||||
font-size: 1rem;
|
||||
cursor: text;
|
||||
&.active {
|
||||
@include transform(translateY(-140%));
|
||||
font-size: $label-font-size;
|
||||
}
|
||||
}
|
||||
// Icon
|
||||
.prefix {
|
||||
@include transition(color .2s);
|
||||
position: absolute;
|
||||
width: 3rem;
|
||||
font-size: 2rem;
|
||||
padding-top: .5rem;
|
||||
~ input, ~ textarea {
|
||||
margin-left: 3rem;
|
||||
width: 92%;
|
||||
width: calc(100% - 3rem);
|
||||
}
|
||||
~ label {
|
||||
margin-left: 3rem;
|
||||
}
|
||||
&.active {
|
||||
color: $input-focus-color;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$medium-and-down} {
|
||||
.prefix ~ input {
|
||||
width: 86%;
|
||||
width: calc(100% - 3rem);
|
||||
}
|
||||
}
|
||||
@media #{$small-and-down} {
|
||||
.prefix ~ input {
|
||||
width: 80%;
|
||||
width: calc(100% - 3rem);
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
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, .prefix ~ label {
|
||||
margin-left: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.input-group {
|
||||
padding-left: 1rem;
|
||||
@include placeholder {
|
||||
color: #999;
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.form-inline {
|
||||
fieldset {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
.form-group {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
// Default textarea
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: transparent;
|
||||
&.md-textarea {
|
||||
overflow-y: hidden;
|
||||
padding: 1.6rem 0;
|
||||
resize: none;
|
||||
min-height: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
// For textarea autoresize
|
||||
.hiddendiv {
|
||||
display: none;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
padding-top: 1.2rem;
|
||||
}
|
||||
|
||||
.orange-gradient{
|
||||
background: linear-gradient(40deg, #FFD86F, #FC6262);
|
||||
}
|
||||
88
html/sass/mdb/free/_global.scss
Executable file
88
html/sass/mdb/free/_global.scss
Executable file
@@ -0,0 +1,88 @@
|
||||
.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 {
|
||||
@include transition(box-shadow .55s);
|
||||
box-shadow: 0;
|
||||
&:hover {
|
||||
@include 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);
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
//Disabled cursor
|
||||
.disabled {
|
||||
cursor: not-allowed!important;
|
||||
}
|
||||
|
||||
// .list-group,
|
||||
.jumbotron,
|
||||
.navbar,
|
||||
.badge,
|
||||
.chip {
|
||||
@extend .z-depth-1;
|
||||
}
|
||||
|
||||
.list-group .list-group-item,
|
||||
.jumbotron,
|
||||
.navbar-toggler,
|
||||
.badge {
|
||||
@include border-radius(2px);
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
ul {
|
||||
list-style-type:none;
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
|
||||
// Media
|
||||
.media {
|
||||
.avatar-sm {
|
||||
width: 56px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
162
html/sass/mdb/free/_helpers.scss
Executable file
162
html/sass/mdb/free/_helpers.scss
Executable file
@@ -0,0 +1,162 @@
|
||||
// Margin and Padding
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@each $prop, $abbrev in (margin: m, padding: p) {
|
||||
@each $size, $length in $spacers {
|
||||
|
||||
.#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
|
||||
.#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top: $length !important; }
|
||||
.#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right: $length !important; }
|
||||
.#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length !important; }
|
||||
.#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left: $length !important; }
|
||||
.#{$abbrev}x#{$infix}-#{$size} {
|
||||
#{$prop}-right: $length !important;
|
||||
#{$prop}-left: $length !important;
|
||||
}
|
||||
.#{$abbrev}y#{$infix}-#{$size} {
|
||||
#{$prop}-top: $length !important;
|
||||
#{$prop}-bottom: $length !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Some special margin utils
|
||||
.m#{$infix}-auto { margin: auto !important; }
|
||||
.mt#{$infix}-auto { margin-top: auto !important; }
|
||||
.mr#{$infix}-auto { margin-right: auto !important; }
|
||||
.mb#{$infix}-auto { margin-bottom: auto !important; }
|
||||
.ml#{$infix}-auto { margin-left: auto !important; }
|
||||
.mx#{$infix}-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
.my#{$infix}-auto {
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $key, $val in $grid-breakpoints {
|
||||
@include media-breakpoint-up($key) {
|
||||
$y: map-get($extreme-padding, $key);
|
||||
.e-px {
|
||||
padding-left: $y;
|
||||
padding-right: $y;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img-fluid {
|
||||
max-width: 100%;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
.inline-ul>li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.list-inline-div>div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-md-down {
|
||||
@media (max-width: $medium-screen){
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
.mb-r {
|
||||
@media (min-width: $medium-screen){
|
||||
margin-bottom: 3rem!important;
|
||||
}
|
||||
@media (max-width: $medium-screen){
|
||||
margin-bottom: 2rem!important;
|
||||
}
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.font-up {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Dividers light and dark variations
|
||||
.hr-light {
|
||||
border-top: 1px solid #fff;
|
||||
}
|
||||
|
||||
.hr-dark {
|
||||
border-top: 1px solid #666;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
418
html/sass/mdb/free/_hover-effects.scss
Normal file
418
html/sass/mdb/free/_hover-effects.scss
Normal file
@@ -0,0 +1,418 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
22
html/sass/mdb/free/_jumbotron.scss
Executable file
22
html/sass/mdb/free/_jumbotron.scss
Executable file
@@ -0,0 +1,22 @@
|
||||
// Jumbtotron
|
||||
.jumbotron {
|
||||
background-color: $white;
|
||||
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;
|
||||
}
|
||||
}
|
||||
10
html/sass/mdb/free/_list-group.scss
Executable file
10
html/sass/mdb/free/_list-group.scss
Executable file
@@ -0,0 +1,10 @@
|
||||
.media .media-left {
|
||||
padding: 0 10px 10px 0;
|
||||
img {
|
||||
@extend .z-depth-1-half;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group a:hover {
|
||||
transition: 0.5s;
|
||||
}
|
||||
110
html/sass/mdb/free/_masks.scss
Executable file
110
html/sass/mdb/free/_masks.scss
Executable file
@@ -0,0 +1,110 @@
|
||||
// Masks
|
||||
.view {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: default;
|
||||
.mask {
|
||||
background-attachment: fixed;
|
||||
}
|
||||
.mask,
|
||||
.full-bg-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
img, video {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
// Zoom and overlays
|
||||
.hm-zoom,
|
||||
.overlay {
|
||||
img,
|
||||
video {
|
||||
@include transition(all 0.2s linear);
|
||||
}
|
||||
&:hover {
|
||||
.mask {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hm-zoom {
|
||||
&:hover {
|
||||
img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.overlay {
|
||||
.mask {
|
||||
opacity: 0;
|
||||
@include transition(all 0.4s ease-in-out);
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay patterns
|
||||
$patterns: (
|
||||
1: "01",
|
||||
2: "02",
|
||||
3: "03",
|
||||
4: "04",
|
||||
5: "05",
|
||||
6: "06",
|
||||
7: "07",
|
||||
8: "08",
|
||||
9: "09"
|
||||
);
|
||||
|
||||
@each $no, $filename in $patterns {
|
||||
.pattern-#{$no} {
|
||||
background: url('../img/overlays/#{$filename}.png');
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay masks
|
||||
@each $name, $color in $rgba-colors {
|
||||
.hm-#{$name} {
|
||||
.mask,
|
||||
.full-bg-img {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full-height,
|
||||
.full-height body,
|
||||
.full-height header,
|
||||
.full-height header .view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.intro {
|
||||
min-height: 1000px;
|
||||
position: relative;
|
||||
@media (max-width: 768px) {
|
||||
min-height: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-video {
|
||||
video {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
z-index: -100;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
transition: 1s opacity;
|
||||
}
|
||||
}
|
||||
323
html/sass/mdb/free/_modals.scss
Executable file
323
html/sass/mdb/free/_modals.scss
Executable file
@@ -0,0 +1,323 @@
|
||||
// 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;
|
||||
overflow: auto;
|
||||
}
|
||||
&.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 {
|
||||
padding-right:0 !important;
|
||||
.modal-dialog {
|
||||
@media (min-width: 768px) {
|
||||
&.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);
|
||||
}
|
||||
}
|
||||
@media (min-width: $medium-screen) {
|
||||
&.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;
|
||||
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:$medium-screen) {
|
||||
max-width:800px;
|
||||
width:800px;
|
||||
}
|
||||
@media (min-width:$large-screen) {
|
||||
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%;
|
||||
.close {
|
||||
color:#fff;
|
||||
opacity:1;
|
||||
text-shadow:none;
|
||||
}
|
||||
// Cascading header
|
||||
.modal-header {
|
||||
text-align: center;
|
||||
margin: -2rem 1rem 1rem 1rem;
|
||||
padding: 1.5rem;
|
||||
border: none;
|
||||
@extend .z-depth-1-half;
|
||||
@include border-radius(3px);
|
||||
.close {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.nav-tabs {
|
||||
display:flex;
|
||||
li {
|
||||
flex:1;
|
||||
a {
|
||||
text-align:center;
|
||||
font-weight:normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 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;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
@include make-button('primary-modal', $modal-info-color);
|
||||
@include make-outline-button('secondary-modal', $modal-info-color);
|
||||
}
|
||||
// Modal warning
|
||||
&.modal-warning {
|
||||
.modal-header {
|
||||
background-color: $modal-warning-color;
|
||||
}
|
||||
.fa {
|
||||
color: $modal-warning-color;
|
||||
}
|
||||
.badge {
|
||||
background-color: $modal-warning-color;
|
||||
}
|
||||
@include make-button('primary-modal', $modal-warning-color);
|
||||
@include make-outline-button('secondary-modal', $modal-warning-color);
|
||||
}
|
||||
// Modal success
|
||||
&.modal-success {
|
||||
.modal-header {
|
||||
background-color: $modal-success-color;
|
||||
}
|
||||
.fa {
|
||||
color: $modal-success-color;
|
||||
}
|
||||
.badge {
|
||||
background-color: $modal-success-color;
|
||||
}
|
||||
@include make-button('primary-modal', $modal-success-color);
|
||||
@include make-outline-button('secondary-modal', $modal-success-color);
|
||||
}
|
||||
// Modal danger
|
||||
&.modal-danger {
|
||||
.modal-header {
|
||||
background-color: $modal-danger-color;
|
||||
}
|
||||
.fa {
|
||||
color: $modal-danger-color;
|
||||
}
|
||||
.badge {
|
||||
background-color: $modal-danger-color;
|
||||
}
|
||||
@include make-button('primary-modal', $modal-danger-color);
|
||||
@include make-outline-button('secondary-modal', $modal-danger-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
21
html/sass/mdb/free/_msc.scss
Executable file
21
html/sass/mdb/free/_msc.scss
Executable file
@@ -0,0 +1,21 @@
|
||||
// Miscellaneous free
|
||||
|
||||
// White border
|
||||
.table-inverse {
|
||||
th,
|
||||
td,
|
||||
thead th {
|
||||
border-color: $table-inverse-color-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Edge Headers
|
||||
.edge-header {
|
||||
display:block;
|
||||
height:278px;
|
||||
background-color:#ccc;
|
||||
}
|
||||
|
||||
.free-bird {
|
||||
margin-top:-100px;
|
||||
}
|
||||
160
html/sass/mdb/free/_navbar.scss
Executable file
160
html/sass/mdb/free/_navbar.scss
Executable file
@@ -0,0 +1,160 @@
|
||||
// Navbar
|
||||
.navbar {
|
||||
font-weight: $font-weight;
|
||||
padding-right: 1rem !important;
|
||||
form {
|
||||
input {
|
||||
margin: 0 $navbar-form-input-mr $navbar-form-input-mb $navbar-form-input-ml;
|
||||
height: $navbar-form-input-height;
|
||||
}
|
||||
}
|
||||
.navbar-brand {
|
||||
align-self: flex-start;
|
||||
overflow: visible;
|
||||
}
|
||||
.breadcrumb {
|
||||
margin: 0;
|
||||
background-color: inherit;
|
||||
font-weight: $font-weight;
|
||||
// padding-left: 1rem;
|
||||
font-size: $navbar-double-font-size;
|
||||
padding: 0.3em 0 0 1em;
|
||||
}
|
||||
.navbar-toggler {
|
||||
border-width: 0;
|
||||
}
|
||||
&.double-nav,
|
||||
.nav-flex-icons {
|
||||
flex-direction: row;
|
||||
}
|
||||
.container {
|
||||
@media (max-width: $medium-screen) {
|
||||
width: 100%;
|
||||
.navbar-toggler-right {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.navbar-dark {
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link.disabled, .nav-link.disabled:hover {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.navbar-light {
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link.disabled, .nav-link.disabled:hover {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
display:block;
|
||||
&.disabled {
|
||||
&:active {
|
||||
pointer-events:none;
|
||||
}
|
||||
}
|
||||
.fa {
|
||||
padding-left: $navbar-flex-icons-padding-lg;
|
||||
padding-right: $navbar-flex-icons-padding-lg;
|
||||
}
|
||||
@media (max-width: $medium-screen) {
|
||||
padding-left: $navbar-flex-icons-padding-md;
|
||||
padding-right: $navbar-flex-icons-padding-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
position: absolute !important;
|
||||
margin-top:0;
|
||||
a {
|
||||
font-size: $navbar-dropdown-font-size;
|
||||
font-weight: $font-weight;
|
||||
padding: $navbar-dropdown-menu-padding;
|
||||
color: $black !important;
|
||||
&:hover {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
&.dropdown-menu-right {
|
||||
@media (max-width: $small-screen) {
|
||||
right: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@each $name, $data in $navbar-option {
|
||||
&.navbar-#{$name} {
|
||||
.navbar-toggler-icon {
|
||||
background-image: map-get($data, "navbar-toggler-icon");
|
||||
cursor: pointer;
|
||||
}
|
||||
.breadcrumb,
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: map-get($data, "navbar-option-color");
|
||||
@include transition(.35s);
|
||||
&:hover {
|
||||
color: map-get($data, "navbar-link-hover-color");
|
||||
}
|
||||
}
|
||||
&.active > .nav-link {
|
||||
background-color: map-get($data, "navbar-active-link-bg-color");
|
||||
&:hover {
|
||||
color: map-get($data, "navbar-option-color");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-toggler {
|
||||
color: map-get($data, "navbar-option-color");
|
||||
}
|
||||
form {
|
||||
input[type=text] {
|
||||
border-bottom: 1px solid map-get($data, "navbar-option-color");
|
||||
&:focus:not([readonly]) {
|
||||
border-color: $input-focus-color;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
color: map-get($data, "navbar-option-color");
|
||||
@include placeholder {
|
||||
color: map-get($data, "navbar-option-color");
|
||||
font-weight: $font-weight;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.scrolling-navbar {
|
||||
z-index: 100;
|
||||
@media (min-width: $small-screen) {
|
||||
@include transition (background .5s ease-in-out, padding .5s ease-in-out);
|
||||
padding-top: $navbar-scrolling-padding;
|
||||
padding-bottom: $navbar-scrolling-padding;
|
||||
.navbar-nav > li {
|
||||
transition-duration: 1s;
|
||||
}
|
||||
&.top-nav-collapse {
|
||||
padding-top: $navbar-top-collapse-padding;
|
||||
padding-bottom: $navbar-top-collapse-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.intro-margin {
|
||||
@media (min-width: $small-screen) {
|
||||
&.view {
|
||||
overflow: visible;
|
||||
margin-top: -56px;
|
||||
}
|
||||
}
|
||||
}
|
||||
141
html/sass/mdb/free/_navbars.scss
Normal file
141
html/sass/mdb/free/_navbars.scss
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
86
html/sass/mdb/free/_pagination.scss
Executable file
86
html/sass/mdb/free/_pagination.scss
Executable file
@@ -0,0 +1,86 @@
|
||||
.pagination {
|
||||
.page-link {
|
||||
background-color: transparent;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.active .page-link {
|
||||
border-radius: 2px;
|
||||
transition: all 0.2s linear;
|
||||
@extend.z-depth-1;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Circle pagination
|
||||
.pagination {
|
||||
&.pagination-circle {
|
||||
.page-link {
|
||||
border-radius: 50%;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
&:hover {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.active .page-link {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination .page-link {
|
||||
border: 0;
|
||||
transition: all 0.3s linear;
|
||||
&:hover {
|
||||
transition: all 0.3s linear;
|
||||
background-color: #eee;
|
||||
}
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
34
html/sass/mdb/free/_progress.scss
Executable file
34
html/sass/mdb/free/_progress.scss
Executable file
@@ -0,0 +1,34 @@
|
||||
// Progress
|
||||
.progress {
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: $progress-bar-height;
|
||||
overflow: hidden;
|
||||
margin-bottom: $progress-bar-margin-y;
|
||||
background-color: $progress-bar-bg-color;
|
||||
.progress-bar {
|
||||
border-radius: 0;
|
||||
height: $progress-bar-height;
|
||||
background-color: $primary-color-dark;
|
||||
}
|
||||
&.progress-default {
|
||||
height: $progress-height;
|
||||
.progress-bar {
|
||||
height: $progress-height;
|
||||
}
|
||||
}
|
||||
&.progress-wider {
|
||||
height: $progress-bar-wider-height;
|
||||
.progress-bar {
|
||||
height: $progress-bar-wider-height;
|
||||
}
|
||||
}
|
||||
&.progress-narrower {
|
||||
height: $progress-bar-narrower-height;
|
||||
.progress-bar {
|
||||
height: $progress-bar-narrower-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
51
html/sass/mdb/free/_roboto.scss
Normal file
51
html/sass/mdb/free/_roboto.scss
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;
|
||||
}
|
||||
51
html/sass/mdb/free/_tables.scss
Executable file
51
html/sass/mdb/free/_tables.scss
Executable file
@@ -0,0 +1,51 @@
|
||||
table {
|
||||
th {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
td {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
&.table {
|
||||
thead th {
|
||||
border-top: none;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding-top: 1.1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
a {
|
||||
margin: 0;
|
||||
color: #212529;
|
||||
}
|
||||
.label-table {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
.btn-table {
|
||||
margin: 0px 1px;
|
||||
padding: 3px 7px;
|
||||
.fa {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.table-hover tbody tr:hover {
|
||||
background-color: rgba(0, 0, 0, 0.075);
|
||||
transition: 0.5s;
|
||||
}
|
||||
.th-lg {
|
||||
min-width: 9rem;
|
||||
}
|
||||
&.table-sm {
|
||||
th,
|
||||
td {
|
||||
padding-top: 0.6rem;
|
||||
padding-bottom: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
125
html/sass/mdb/free/_typography.scss
Executable file
125
html/sass/mdb/free/_typography.scss
Executable file
@@ -0,0 +1,125 @@
|
||||
// Typography
|
||||
// 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;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@each $key, $val in $grid-breakpoints {
|
||||
@include media-breakpoint-up($key) {
|
||||
$y: map-get($responsive-headings, $key);
|
||||
@each $name,
|
||||
$value in $y {
|
||||
.#{$name}-responsive {
|
||||
font-size: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $size, $length in $spacers {
|
||||
.fs-#{$size} {
|
||||
font-size: $length !important;
|
||||
}
|
||||
}
|
||||
|
||||
.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: #c6c6c6;
|
||||
flex: 1;
|
||||
margin: 0 .45em 0 0;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
height: 1.5px;
|
||||
background: #c6c6c6;
|
||||
flex: 1;
|
||||
margin: 0 0 0 .45em;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: .5rem 1rem;
|
||||
font-size: 1.25rem;
|
||||
border-left: .25rem solid #eceeef;
|
||||
p {
|
||||
font-size: 0.9rem;
|
||||
padding-left: 2rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
157
html/sass/mdb/free/_waves.scss
Executable file
157
html/sass/mdb/free/_waves.scss
Executable 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;
|
||||
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);
|
||||
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: middle;
|
||||
display:inline-block;
|
||||
&.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;
|
||||
}
|
||||
|
||||
a {
|
||||
&.waves-effect,
|
||||
&.waves-light {
|
||||
display:inline-block;
|
||||
}
|
||||
}
|
||||
985
html/sass/mdb/free/data/_colors.scss
Executable file
985
html/sass/mdb/free/data/_colors.scss
Executable file
@@ -0,0 +1,985 @@
|
||||
// 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
|
||||
$enable_full_palette: true;
|
||||
|
||||
@if $enable_full_palette == true {
|
||||
@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;
|
||||
}
|
||||
|
||||
.light-blue-text {
|
||||
color: map-get($blue, "accent-1") !important;
|
||||
}
|
||||
|
||||
.dark-grey-text {
|
||||
color:#4f4f4f !important;
|
||||
}
|
||||
|
||||
// Social colors
|
||||
$fb-color: #3B5998 !default;
|
||||
$tw-color: #55ACEE !default;
|
||||
$gplus-color: #DD4B39 !default;
|
||||
$yt-color: #ED302F !default;
|
||||
$li-color: #0082CA !default;
|
||||
$pin-color: #C61118 !default;
|
||||
$ins-color: #2E5E86 !default;
|
||||
$git-color: #333 !default;
|
||||
$comm-color: #30CFC0 !default;
|
||||
$vk-color: #4C75A3 !default;
|
||||
$drib-color: #EC4A89 !default;
|
||||
$so-color: #ffac44 !default;
|
||||
$slack-color: #56b68b !default;
|
||||
|
||||
$social-colors: (
|
||||
"fb": #3B5998,
|
||||
"tw": #55ACEE,
|
||||
"gplus": #DD4B39,
|
||||
"yt": #ED302F,
|
||||
"li": #0082CA,
|
||||
"pin": #C61118,
|
||||
"ins": #2E5E86,
|
||||
"git": #333,
|
||||
"comm": #30CFC0,
|
||||
"vk": #4C75A3,
|
||||
"dribbble": #EC4A89,
|
||||
"so": #ffac44,
|
||||
"slack": #56b68b,
|
||||
"email": #4B515D
|
||||
);
|
||||
|
||||
// Material Design Colors
|
||||
$danger-color: #ff3547 !default;
|
||||
.danger-color {
|
||||
background-color: $danger-color!important;
|
||||
}
|
||||
|
||||
$danger-color-dark: #CC0000 !default;
|
||||
.danger-color-dark {
|
||||
background-color: $danger-color-dark!important;
|
||||
}
|
||||
|
||||
$warning-color: #ffbb33 !default;
|
||||
.warning-color {
|
||||
background-color: $warning-color!important;
|
||||
}
|
||||
|
||||
$warning-color-dark: #FF8800 !default;
|
||||
.warning-color-dark {
|
||||
background-color: $warning-color-dark!important;
|
||||
}
|
||||
|
||||
$success-color: #00C851 !default;
|
||||
.success-color {
|
||||
background-color: $success-color!important;
|
||||
}
|
||||
|
||||
$success-color-dark: #007E33 !default;
|
||||
.success-color-dark {
|
||||
background-color: $success-color-dark!important;
|
||||
}
|
||||
|
||||
$info-color: #33b5e5 !default;
|
||||
.info-color {
|
||||
background-color: $info-color!important;
|
||||
}
|
||||
|
||||
$info-color-dark: #0099CC !default;
|
||||
.info-color-dark {
|
||||
background-color: $info-color-dark!important;
|
||||
}
|
||||
|
||||
// MDB Colors
|
||||
$default-color: #2BBBAD !default;
|
||||
.default-color {
|
||||
background-color: $default-color!important;
|
||||
}
|
||||
|
||||
$default-color-dark: #00695c !default;
|
||||
.default-color-dark {
|
||||
background-color: $default-color-dark!important;
|
||||
}
|
||||
|
||||
$primary-color: #4285F4 !default;
|
||||
.primary-color {
|
||||
background-color: $primary-color!important;
|
||||
}
|
||||
|
||||
$primary-color-dark: #0d47a1 !default;
|
||||
.primary-color-dark {
|
||||
background-color: $primary-color-dark!important;
|
||||
}
|
||||
|
||||
$secondary-color: #aa66cc !default;
|
||||
.secondary-color {
|
||||
background-color: $secondary-color!important;
|
||||
}
|
||||
|
||||
$secondary-color-dark: #9933CC !default;
|
||||
.secondary-color-dark {
|
||||
background-color: $secondary-color-dark!important;
|
||||
}
|
||||
|
||||
$elegant-color: #2E2E2E !default;
|
||||
.elegant-color {
|
||||
background-color: $elegant-color!important;
|
||||
}
|
||||
|
||||
$elegant-color-dark: #212121 !default;
|
||||
.elegant-color-dark {
|
||||
background-color: $elegant-color-dark!important;
|
||||
}
|
||||
|
||||
$stylish-color: #4B515D !default;
|
||||
.stylish-color {
|
||||
background-color: $stylish-color!important;
|
||||
}
|
||||
|
||||
$stylish-color-dark: #3E4551 !default;
|
||||
.stylish-color-dark {
|
||||
background-color: $stylish-color-dark!important;
|
||||
}
|
||||
|
||||
$special-color: #37474F !default;
|
||||
.special-color {
|
||||
background-color: $special-color!important;
|
||||
}
|
||||
|
||||
$special-color-dark: #263238 !default;
|
||||
.special-color-dark {
|
||||
background-color: $special-color-dark!important;
|
||||
}
|
||||
|
||||
$unique-color: #3F729B !default;
|
||||
.unique-color {
|
||||
background-color: $unique-color!important;
|
||||
}
|
||||
|
||||
$unique-color-dark: #1C2331 !default;
|
||||
.unique-color-dark {
|
||||
background-color: $unique-color-dark!important;
|
||||
}
|
||||
|
||||
$mdbcolor: #45526E !default;
|
||||
.mdb-color {
|
||||
background-color: $mdbcolor!important;
|
||||
}
|
||||
|
||||
$error-color: color("red", "base") !default;
|
||||
|
||||
// RGBA colors
|
||||
// Light overlays
|
||||
$rgba-blue-light: rgba(3, 169, 244, 0.3) !default;
|
||||
.rgba-blue-light {
|
||||
background-color: $rgba-blue-light!important;
|
||||
}
|
||||
|
||||
$rgba-red-light: rgba(244, 67, 54, 0.3) !default;
|
||||
.rgba-red-light {
|
||||
background-color: $rgba-red-light!important;
|
||||
}
|
||||
|
||||
$rgba-pink-light: rgba(233, 30, 99, 0.3) !default;
|
||||
.rgba-pink-light {
|
||||
background-color: $rgba-pink-light!important;
|
||||
}
|
||||
|
||||
$rgba-purple-light: rgba(156, 39, 176, 0.3) !default;
|
||||
.rgba-purple-light {
|
||||
background-color: $rgba-purple-light!important;
|
||||
}
|
||||
|
||||
$rgba-indigo-light: rgba(63, 81, 181, 0.3) !default;
|
||||
.rgba-indigo-light {
|
||||
background-color: $rgba-indigo-light!important;
|
||||
}
|
||||
|
||||
$rgba-cyan-light: rgba(0, 188, 212, 0.3) !default;
|
||||
.rgba-cyan-light {
|
||||
background-color: $rgba-cyan-light!important;
|
||||
}
|
||||
|
||||
$rgba-teal-light: rgba(0, 150, 136, 0.3) !default;
|
||||
.rgba-teal-light {
|
||||
background-color: $rgba-teal-light!important;
|
||||
}
|
||||
|
||||
$rgba-green-light: rgba(76, 175, 80, 0.3) !default;
|
||||
.rgba-green-light {
|
||||
background-color: $rgba-green-light!important;
|
||||
}
|
||||
|
||||
$rgba-lime-light: rgba(205, 220, 57, 0.3) !default;
|
||||
.rgba-lime-light {
|
||||
background-color: $rgba-lime-light!important;
|
||||
}
|
||||
|
||||
$rgba-yellow-light: rgba(255, 235, 59, 0.3) !default;
|
||||
.rgba-yellow-light {
|
||||
background-color: $rgba-yellow-light!important;
|
||||
}
|
||||
|
||||
$rgba-orange-light: rgba(255, 152, 0, 0.3) !default;
|
||||
.rgba-orange-light {
|
||||
background-color: $rgba-orange-light!important;
|
||||
}
|
||||
|
||||
$rgba-brown-light: rgba(121, 85, 72, 0.3) !default;
|
||||
.rgba-brown-light {
|
||||
background-color: $rgba-brown-light!important;
|
||||
}
|
||||
|
||||
$rgba-grey-light: rgba(158, 158, 158, 0.3) !default;
|
||||
.rgba-grey-light {
|
||||
background-color: $rgba-grey-light!important;
|
||||
}
|
||||
|
||||
$rgba-bluegrey-light: rgba(96, 125, 139, 0.3) !default;
|
||||
.rgba-bluegrey-light {
|
||||
background-color: $rgba-bluegrey-light!important;
|
||||
}
|
||||
|
||||
$rgba-black-light: rgba(0, 0, 0, 0.3) !default;
|
||||
.rgba-black-light {
|
||||
background-color: $rgba-black-light!important;
|
||||
}
|
||||
|
||||
$rgba-stylish-light: rgba(62, 69, 81, 0.3) !default;
|
||||
.rgba-stylish-light {
|
||||
background-color: $rgba-stylish-light!important;
|
||||
}
|
||||
|
||||
$rgba-white-light: rgba(255, 255, 255, 0.3) !default;
|
||||
.rgba-white-light {
|
||||
background-color: $rgba-white-light!important;
|
||||
}
|
||||
|
||||
// Strong overlays
|
||||
$rgba-blue-strong: rgba(3, 169, 244, 0.7) !default;
|
||||
.rgba-blue-strong {
|
||||
background-color: $rgba-blue-strong!important;
|
||||
}
|
||||
|
||||
$rgba-red-strong: rgba(244, 67, 54, 0.7) !default;
|
||||
.rgba-red-strong {
|
||||
background-color: $rgba-red-strong!important;
|
||||
}
|
||||
|
||||
$rgba-pink-strong: rgba(233, 30, 99, 0.7) !default;
|
||||
.rgba-pink-strong {
|
||||
background-color: $rgba-pink-strong!important;
|
||||
}
|
||||
|
||||
$rgba-purple-strong: rgba(156, 39, 176, 0.7) !default;
|
||||
.rgba-purple-strong {
|
||||
background-color: $rgba-purple-strong!important;
|
||||
}
|
||||
|
||||
$rgba-indigo-strong: rgba(63, 81, 181, 0.7) !default;
|
||||
.rgba-indigo-strong {
|
||||
background-color: $rgba-indigo-strong!important;
|
||||
}
|
||||
|
||||
$rgba-cyan-strong: rgba(0, 188, 212, 0.7) !default;
|
||||
.rgba-cyan-strong {
|
||||
background-color: $rgba-cyan-strong!important;
|
||||
}
|
||||
|
||||
$rgba-teal-strong: rgba(0, 150, 136, 0.7) !default;
|
||||
.rgba-teal-strong {
|
||||
background-color: $rgba-teal-strong!important;
|
||||
}
|
||||
|
||||
$rgba-green-strong: rgba(76, 175, 80, 0.7) !default;
|
||||
.rgba-green-strong {
|
||||
background-color: $rgba-green-strong!important;
|
||||
}
|
||||
|
||||
$rgba-lime-strong: rgba(205, 220, 57, 0.7) !default;
|
||||
.rgba-lime-strong {
|
||||
background-color: $rgba-lime-strong!important;
|
||||
}
|
||||
|
||||
$rgba-yellow-strong: rgba(255, 235, 59, 0.7) !default;
|
||||
.rgba-yellow-strong {
|
||||
background-color: $rgba-yellow-strong!important;
|
||||
}
|
||||
|
||||
$rgba-orange-strong: rgba(255, 152, 0, 0.7) !default;
|
||||
.rgba-orange-strong {
|
||||
background-color: $rgba-orange-strong!important;
|
||||
}
|
||||
|
||||
$rgba-brown-strong: rgba(121, 85, 72, 0.7) !default;
|
||||
.rgba-brown-strong {
|
||||
background-color: $rgba-brown-strong!important;
|
||||
}
|
||||
|
||||
$rgba-grey-strong: rgba(158, 158, 158, 0.7) !default;
|
||||
.rgba-grey-strong {
|
||||
background-color: $rgba-grey-strong!important;
|
||||
}
|
||||
|
||||
$rgba-bluegrey-strong: rgba(96, 125, 139, 0.7) !default;
|
||||
.rgba-bluegrey-strong {
|
||||
background-color: $rgba-bluegrey-strong!important;
|
||||
}
|
||||
|
||||
$rgba-black-strong: rgba(0, 0, 0, 0.7) !default;
|
||||
.rgba-black-strong {
|
||||
background-color: $rgba-black-strong!important;
|
||||
}
|
||||
|
||||
$rgba-stylish-strong: rgba(62, 69, 81, 0.7) !default;
|
||||
.rgba-stylish-strong {
|
||||
background-color: $rgba-stylish-strong!important;
|
||||
}
|
||||
|
||||
$rgba-white-strong: rgba(255, 255, 255, 0.7) !default;
|
||||
.rgba-white-strong {
|
||||
background-color: $rgba-white-strong!important;
|
||||
}
|
||||
|
||||
// Super light overlays
|
||||
$rgba-blue-slight: rgba(3, 169, 244, 0.1) !default;
|
||||
.rgba-blue-slight {
|
||||
background-color: $rgba-blue-slight!important;
|
||||
}
|
||||
|
||||
$rgba-red-slight: rgba(244, 67, 54, 0.1) !default;
|
||||
.rgba-red-slight {
|
||||
background-color: $rgba-red-slight!important;
|
||||
}
|
||||
|
||||
$rgba-pink-slight: rgba(233, 30, 99, 0.1) !default;
|
||||
.rgba-pink-slight {
|
||||
background-color: $rgba-pink-slight!important;
|
||||
}
|
||||
|
||||
$rgba-purple-slight: rgba(156, 39, 176, 0.1) !default;
|
||||
.rgba-purple-slight {
|
||||
background-color: $rgba-purple-slight!important;
|
||||
}
|
||||
|
||||
$rgba-indigo-slight: rgba(63, 81, 181, 0.1) !default;
|
||||
.rgba-indigo-slight {
|
||||
background-color: $rgba-indigo-slight!important;
|
||||
}
|
||||
|
||||
$rgba-cyan-slight: rgba(0, 188, 212, 0.1) !default;
|
||||
.rgba-cyan-slight {
|
||||
background-color: $rgba-cyan-slight!important;
|
||||
}
|
||||
|
||||
$rgba-teal-slight: rgba(0, 150, 136, 0.1) !default;
|
||||
.rgba-teal-slight {
|
||||
background-color: $rgba-teal-slight!important;
|
||||
}
|
||||
|
||||
$rgba-green-slight: rgba(76, 175, 80, 0.1) !default;
|
||||
.rgba-green-slight {
|
||||
background-color: $rgba-green-slight!important;
|
||||
}
|
||||
|
||||
$rgba-lime-slight: rgba(205, 220, 57, 0.1) !default;
|
||||
.rgba-lime-slight {
|
||||
background-color: $rgba-lime-slight!important;
|
||||
}
|
||||
|
||||
$rgba-yellow-slight: rgba(255, 235, 59, 0.1) !default;
|
||||
.rgba-yellow-slight {
|
||||
background-color: $rgba-yellow-slight!important;
|
||||
}
|
||||
|
||||
$rgba-orange-slight: rgba(255, 152, 0, 0.1) !default;
|
||||
.rgba-orange-slight {
|
||||
background-color: $rgba-orange-slight!important;
|
||||
}
|
||||
|
||||
$rgba-brown-slight: rgba(121, 85, 72, 0.1) !default;
|
||||
.rgba-brown-slight {
|
||||
background-color: $rgba-brown-slight!important;
|
||||
}
|
||||
|
||||
$rgba-grey-slight: rgba(158, 158, 158, 0.1) !default;
|
||||
.rgba-grey-slight {
|
||||
background-color: $rgba-grey-slight!important;
|
||||
}
|
||||
|
||||
$rgba-bluegrey-slight: rgba(96, 125, 139, 0.1) !default;
|
||||
.rgba-bluegrey-slight {
|
||||
background-color: rgba(96, 125, 139, 0.1)!important;
|
||||
}
|
||||
|
||||
$rgba-black-slight: rgba(0, 0, 0, 0.1) !default;
|
||||
.rgba-black-slight {
|
||||
background-color: $rgba-black-slight!important;
|
||||
}
|
||||
|
||||
$rgba-stylish-slight: rgba(62, 69, 81, 0.1) !default;
|
||||
.rgba-stylish-slight {
|
||||
background-color: $rgba-stylish-slight!important;
|
||||
}
|
||||
|
||||
$rgba-white-slight: rgba(255, 255, 255, 0.1) !default;
|
||||
.rgba-white-slight {
|
||||
background-color: $rgba-white-slight!important;
|
||||
}
|
||||
|
||||
$rgba-colors: (
|
||||
// Super light
|
||||
"blue-slight": $rgba-blue-slight,
|
||||
"red-slight": $rgba-red-slight,
|
||||
"pink-slight": $rgba-pink-slight,
|
||||
"purple-slight": $rgba-purple-slight,
|
||||
"indigo-slight": $rgba-indigo-slight,
|
||||
"cyan-slight": $rgba-cyan-slight,
|
||||
"teal-slight": $rgba-teal-slight,
|
||||
"green-slight": $rgba-green-slight,
|
||||
"lime-slight": $rgba-lime-slight,
|
||||
"yellow-slight": $rgba-yellow-slight,
|
||||
"orange-slight": $rgba-orange-slight,
|
||||
"brown-slight": $rgba-brown-slight,
|
||||
"grey-slight": $rgba-grey-slight,
|
||||
"bluegrey-slight": $rgba-bluegrey-slight,
|
||||
"black-slight": $rgba-black-slight,
|
||||
"stylish-slight": $rgba-stylish-slight,
|
||||
"white-slight": $rgba-white-slight,
|
||||
// Light
|
||||
"blue-light": $rgba-blue-light,
|
||||
"red-light": $rgba-red-light,
|
||||
"pink-light": $rgba-pink-light,
|
||||
"purple-light": $rgba-purple-light,
|
||||
"indigo-light": $rgba-indigo-light,
|
||||
"cyan-light": $rgba-cyan-light,
|
||||
"teal-light": $rgba-teal-light,
|
||||
"green-light": $rgba-green-light,
|
||||
"lime-light": $rgba-lime-light,
|
||||
"yellow-light": $rgba-yellow-light,
|
||||
"orange-light": $rgba-orange-light,
|
||||
"brown-light": $rgba-brown-light,
|
||||
"grey-light": $rgba-grey-light,
|
||||
"bluegrey-light": $rgba-bluegrey-light,
|
||||
"black-light": $rgba-black-light,
|
||||
"stylish-light": $rgba-stylish-light,
|
||||
"white-light": $rgba-white-light,
|
||||
// Strong
|
||||
"blue-strong": $rgba-blue-strong,
|
||||
"red-strong": $rgba-red-strong,
|
||||
"pink-strong": $rgba-pink-strong,
|
||||
"purple-strong": $rgba-purple-strong,
|
||||
"indigo-strong": $rgba-indigo-strong,
|
||||
"cyan-strong": $rgba-cyan-strong,
|
||||
"teal-strong": $rgba-teal-strong,
|
||||
"green-strong": $rgba-green-strong,
|
||||
"lime-strong": $rgba-lime-strong,
|
||||
"yellow-strong": $rgba-yellow-strong,
|
||||
"orange-strong": $rgba-orange-strong,
|
||||
"brown-strong": $rgba-brown-strong,
|
||||
"grey-strong": $rgba-grey-strong,
|
||||
"bluegrey-strong": $rgba-bluegrey-strong,
|
||||
"black-strong": $rgba-black-strong,
|
||||
"stylish-strong": $rgba-stylish-strong,
|
||||
"white-strong": $rgba-white-strong,
|
||||
);
|
||||
|
||||
$material-colors: (
|
||||
"primary": $primary-color,
|
||||
"danger": $danger-color,
|
||||
"warning": $warning-color-dark,
|
||||
"success": $success-color,
|
||||
"info": $info-color,
|
||||
"default": $default-color,
|
||||
"secondary": $secondary-color,
|
||||
"elegant": $elegant-color,
|
||||
"unique": map-get($pink, darken-4),
|
||||
"dark-green": map-get($green, darken-2),
|
||||
"mdb-color": map-get($mdb-color, lighten-1),
|
||||
"red": map-get($red, darken-2),
|
||||
"pink": map-get($pink, lighten-1),
|
||||
"purple": map-get($purple, darken-1),
|
||||
"deep-purple": map-get($deep-purple, darken-2),
|
||||
"indigo": map-get($indigo, base),
|
||||
"blue": map-get($blue, darken-2),
|
||||
"light-blue": map-get($blue, accent-1),
|
||||
"cyan": map-get($cyan, base),
|
||||
"teal": map-get($teal, darken-2),
|
||||
"green": map-get($green, darken-2),
|
||||
"light-green": map-get($light-green, base),
|
||||
"lime": map-get($lime, darken-2),
|
||||
"yellow": map-get($yellow, darken-2),
|
||||
"amber": map-get($amber, darken-2),
|
||||
"orange": map-get($orange, darken-2),
|
||||
"deep-orange": map-get($deep-orange, lighten-1),
|
||||
"brown": map-get($brown, base),
|
||||
"grey": map-get($grey, darken-2),
|
||||
"blue-grey": map-get($blue-grey, lighten-1),
|
||||
"dark": map-get($grey, darken-4),
|
||||
"light": map-get($grey, lighten-2),
|
||||
"white": $white,
|
||||
"black": $black
|
||||
);
|
||||
|
||||
$ctbc: (
|
||||
"tabs-cyan": map-get($yellow, "base"),
|
||||
"tabs-orange": map-get($red, "darken-1"),
|
||||
"tabs-grey": map-get($shades, "white"),
|
||||
"tabs-pink": map-get($deep-purple, "base"),
|
||||
"tabs-green": map-get($blue, "darken-3"),
|
||||
"tabs-primary": map-get($shades, "white")
|
||||
);
|
||||
|
||||
$skin-colors: (
|
||||
"mdb",
|
||||
"white",
|
||||
"black",
|
||||
"grey",
|
||||
"light-blue",
|
||||
"indigo",
|
||||
"pink",
|
||||
"cyan",
|
||||
"navy-blue",
|
||||
"deep-purple"
|
||||
);
|
||||
|
||||
$dropdown-colors: (
|
||||
"primary" : $primary-color,
|
||||
"danger" : $danger-color-dark,
|
||||
"default" : $default-color,
|
||||
"secondary": $secondary-color,
|
||||
"success" : $success-color,
|
||||
"info" : $info-color,
|
||||
"warning" : $warning-color,
|
||||
"dark" : map-get($material-colors, "elegant"),
|
||||
"ins" : map-get($social-colors, "ins")
|
||||
);
|
||||
|
||||
$switch-colors: (
|
||||
"bg": $secondary-color,
|
||||
"checked-lever-bg": desaturate(lighten($secondary-color, 25%), 25%),
|
||||
"unchecked-bg": #F1F1F1,
|
||||
"unchecked-lever-bg": #818181,
|
||||
);
|
||||
|
||||
@function map-create() {
|
||||
|
||||
$colormap: ();
|
||||
|
||||
@each $key, $val in $colors {
|
||||
|
||||
@if(map-has-key($val, darken-2)) {
|
||||
$colormap: map-merge($colormap, ($key: map-get($val, darken-2)));
|
||||
}
|
||||
}
|
||||
|
||||
@return $colormap;
|
||||
|
||||
}
|
||||
|
||||
$mdb-colors: map-create();
|
||||
|
||||
$color-palette: map-merge($mdb-colors, $material-colors);
|
||||
|
||||
@each $name, $color in $material-colors {
|
||||
.bg-#{$name} {
|
||||
background-color: $color !important;
|
||||
}
|
||||
}
|
||||
90
html/sass/mdb/free/data/_functions.scss
Executable file
90
html/sass/mdb/free/data/_functions.scss
Executable file
@@ -0,0 +1,90 @@
|
||||
// Bootstrap functions
|
||||
//
|
||||
// Utility mixins and functions for evalutating source code across our variables, maps, and mixins.
|
||||
|
||||
// Ascending
|
||||
// Used to evaluate Sass maps like our grid breakpoints.
|
||||
@mixin _assert-ascending($map, $map-name) {
|
||||
$prev-key: null;
|
||||
$prev-num: null;
|
||||
@each $key, $num in $map {
|
||||
@if $prev-num == null {
|
||||
// Do nothing
|
||||
} @else if not comparable($prev-num, $num) {
|
||||
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
||||
} @else if $prev-num >= $num {
|
||||
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
||||
}
|
||||
$prev-key: $key;
|
||||
$prev-num: $num;
|
||||
}
|
||||
}
|
||||
|
||||
// Starts at zero
|
||||
// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
|
||||
@mixin _assert-starts-at-zero($map) {
|
||||
$values: map-values($map);
|
||||
$first-value: nth($values, 1);
|
||||
@if $first-value != 0 {
|
||||
@warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
|
||||
}
|
||||
}
|
||||
|
||||
// Replace `$search` with `$replace` in `$string`
|
||||
// Used on our SVG icon backgrounds for custom forms.
|
||||
//
|
||||
// @author Hugo Giraudel
|
||||
// @param {String} $string - Initial string
|
||||
// @param {String} $search - Substring to replace
|
||||
// @param {String} $replace ('') - New value
|
||||
// @return {String} - Updated string
|
||||
@function str-replace($string, $search, $replace: "") {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
// Color contrast
|
||||
@mixin color-yiq($color) {
|
||||
$r: red($color);
|
||||
$g: green($color);
|
||||
$b: blue($color);
|
||||
|
||||
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
||||
|
||||
@if ($yiq >= 150) {
|
||||
color: #111;
|
||||
} @else {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Retreive color Sass maps
|
||||
@function color($key: "blue") {
|
||||
@return map-get($colors, $key);
|
||||
}
|
||||
|
||||
@function theme-color($key: "primary") {
|
||||
@return map-get($theme-colors, $key);
|
||||
}
|
||||
|
||||
@function grayscale($key: "100") {
|
||||
@return map-get($grays, $key);
|
||||
}
|
||||
|
||||
// Request a theme color level
|
||||
@function theme-color-level($color-name: "primary", $level: 0) {
|
||||
$color: theme-color($color-name);
|
||||
$color-base: if($level > 0, #000, #fff);
|
||||
|
||||
@if $level < 0 {
|
||||
// Lighter values need a quick double negative for the Sass math to work
|
||||
@return mix($color-base, $color, $level * -1 * $theme-color-interval);
|
||||
} @else {
|
||||
@return mix($color-base, $color, $level * $theme-color-interval);
|
||||
}
|
||||
}
|
||||
267
html/sass/mdb/free/data/_mixins.scss
Executable file
267
html/sass/mdb/free/data/_mixins.scss
Executable file
@@ -0,0 +1,267 @@
|
||||
/*********************
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
// New mixins
|
||||
@mixin make-button($name, $color) {
|
||||
.btn-#{$name} {
|
||||
@function set-notification-text-color($color) {
|
||||
@if (lightness($color) > 80) {
|
||||
@return $black; // Lighter backgorund, return dark color
|
||||
} @else {
|
||||
@return $white; // Darker background, return light color
|
||||
}
|
||||
}
|
||||
background-color: $color !important;
|
||||
color: set-notification-text-color($color) !important;
|
||||
&:hover {
|
||||
background-color: lighten($color, 5%);
|
||||
}
|
||||
&:focus,
|
||||
&.focus {
|
||||
@extend .z-depth-1-half;
|
||||
}
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: darken($color, 13%);
|
||||
}
|
||||
&.dropdown-toggle {
|
||||
background-color: $color!important;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: lighten($color, 5%) !important;
|
||||
}
|
||||
}
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
@extend .z-depth-1-half;
|
||||
background-color: darken($color, 13%) !important;
|
||||
}
|
||||
&:not([disabled]):not(.disabled):active:focus,
|
||||
&:not([disabled]):not(.disabled).active:focus,
|
||||
.show > &.dropdown-toggle:focus {
|
||||
@extend .z-depth-1-half;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-outline-button($name, $color) {
|
||||
.btn-outline-#{$name} {
|
||||
border: 2px solid $color;
|
||||
color: $color !important;
|
||||
background-color: transparent;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:focus,
|
||||
&.active {
|
||||
background-color: transparent;
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
@extend .z-depth-1-half;
|
||||
background-color: transparent !important;
|
||||
border-color: $color !important;
|
||||
}
|
||||
&:not([disabled]):not(.disabled):active:focus,
|
||||
&:not([disabled]):not(.disabled).active:focus,
|
||||
.show > &.dropdown-toggle:focus {
|
||||
@extend .z-depth-1-half;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-gradient-button($name, $value) {
|
||||
.btn.#{$name}-gradient {
|
||||
background: linear-gradient(40deg, map-get($value, start), map-get($value, end)) !important;
|
||||
transition:.5s ease;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:focus
|
||||
&.active {
|
||||
background: linear-gradient(40deg, lighten(map-get($value, start), 5%), lighten(map-get($value, end), 5%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button sizes
|
||||
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
|
||||
padding: $padding-y $padding-x;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
|
||||
@mixin transition($transition...) {
|
||||
@if $enable-transitions {
|
||||
@if length($transition) == 0 {
|
||||
transition: $transition-base;
|
||||
} @else {
|
||||
transition: $transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transform($args) {
|
||||
-webkit-transform: $args;
|
||||
-moz-transform: $args;
|
||||
-ms-transform: $args;
|
||||
-o-transform: $args;
|
||||
transform: $args;
|
||||
}
|
||||
|
||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
@return if($min != 0, $min, null);
|
||||
}
|
||||
|
||||
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
|
||||
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
|
||||
}
|
||||
41
html/sass/mdb/free/data/_prefixer.scss
Executable file
41
html/sass/mdb/free/data/_prefixer.scss
Executable file
@@ -0,0 +1,41 @@
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Keyframes
|
||||
@mixin keyframes($animation-name) {
|
||||
@keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
//animations
|
||||
@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;
|
||||
}
|
||||
837
html/sass/mdb/free/data/_variables-b4.scss
Executable file
837
html/sass/mdb/free/data/_variables-b4.scss
Executable file
@@ -0,0 +1,837 @@
|
||||
// Variables
|
||||
//
|
||||
// Copy settings from this file into the provided `_custom.scss` to override
|
||||
// the Bootstrap defaults without modifying key, versioned files.
|
||||
//
|
||||
// Variables should follow the `$component-state-property-size` formula for
|
||||
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
|
||||
|
||||
// Table of Contents
|
||||
//
|
||||
// Color system
|
||||
// Options
|
||||
// Spacing
|
||||
// Body
|
||||
// Links
|
||||
// Grid breakpoints
|
||||
// Grid containers
|
||||
// Grid columns
|
||||
// Fonts
|
||||
// Components
|
||||
// Tables
|
||||
// Buttons
|
||||
// Forms
|
||||
// Dropdowns
|
||||
// Z-index master list
|
||||
// Navs
|
||||
// Navbar
|
||||
// Pagination
|
||||
// Jumbotron
|
||||
// Form states and alerts
|
||||
// Cards
|
||||
// Tooltips
|
||||
// Popovers
|
||||
// Badges
|
||||
// Modals
|
||||
// Alerts
|
||||
// Progress bars
|
||||
// List group
|
||||
// Image thumbnails
|
||||
// Figures
|
||||
// Breadcrumbs
|
||||
// Carousel
|
||||
// Close
|
||||
// Code
|
||||
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #868e96 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$grays: (
|
||||
100: $gray-100,
|
||||
200: $gray-200,
|
||||
300: $gray-300,
|
||||
400: $gray-400,
|
||||
500: $gray-500,
|
||||
600: $gray-600,
|
||||
700: $gray-700,
|
||||
800: $gray-800,
|
||||
900: $gray-900
|
||||
) !default;
|
||||
|
||||
$blue: #007bff !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #dc3545 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #ffc107 !default;
|
||||
$green: #28a745 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #17a2b8 !default;
|
||||
|
||||
$colors: (
|
||||
blue: $blue,
|
||||
indigo: $indigo,
|
||||
purple: $purple,
|
||||
pink: $pink,
|
||||
red: $red,
|
||||
orange: $orange,
|
||||
yellow: $yellow,
|
||||
green: $green,
|
||||
teal: $teal,
|
||||
cyan: $cyan,
|
||||
white: $white,
|
||||
gray: $gray-600,
|
||||
gray-dark: $gray-800
|
||||
) !default;
|
||||
|
||||
$theme-colors: (
|
||||
primary: $blue,
|
||||
secondary: $gray-600,
|
||||
success: $green,
|
||||
info: $cyan,
|
||||
warning: $yellow,
|
||||
danger: $red,
|
||||
light: $gray-100,
|
||||
dark: $gray-800
|
||||
) !default;
|
||||
|
||||
// Set a specific jump point for requesting color jumps
|
||||
$theme-color-interval: 8% !default;
|
||||
|
||||
|
||||
// Options
|
||||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
|
||||
$enable-rounded: true !default;
|
||||
$enable-shadows: false !default;
|
||||
$enable-gradients: false !default;
|
||||
$enable-transitions: true !default;
|
||||
$enable-hover-media-query: false !default;
|
||||
$enable-grid-classes: true !default;
|
||||
$enable-print-styles: true !default;
|
||||
|
||||
|
||||
// Spacing
|
||||
//
|
||||
// Control the default styling of most Bootstrap elements by modifying these
|
||||
// variables. Mostly focused on spacing.
|
||||
// You can add more entries to the $spacers map, should you need more variation.
|
||||
|
||||
$spacer: 1rem !default;
|
||||
$spacers: (
|
||||
0: 0,
|
||||
1: ($spacer * .25),
|
||||
2: ($spacer * .5),
|
||||
3: $spacer,
|
||||
4: ($spacer * 1.5),
|
||||
5: ($spacer * 3)
|
||||
) !default;
|
||||
|
||||
// This variable affects the `.h-*` and `.w-*` classes.
|
||||
$sizes: (
|
||||
25: 25%,
|
||||
50: 50%,
|
||||
75: 75%,
|
||||
100: 100%
|
||||
) !default;
|
||||
|
||||
// Body
|
||||
//
|
||||
// Settings for the `<body>` element.
|
||||
|
||||
$body-bg: $white !default;
|
||||
$body-color: $gray-900 !default;
|
||||
|
||||
// Links
|
||||
//
|
||||
// Style anchor elements.
|
||||
|
||||
$link-color: theme-color("primary") !default;
|
||||
$link-decoration: none !default;
|
||||
$link-hover-color: darken($link-color, 15%) !default;
|
||||
$link-hover-decoration: underline !default;
|
||||
|
||||
|
||||
// Grid breakpoints
|
||||
//
|
||||
// Define the minimum dimensions at which your layout will change,
|
||||
// adapting to different screen sizes, for use in media queries.
|
||||
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
) !default;
|
||||
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
||||
@include _assert-starts-at-zero($grid-breakpoints);
|
||||
|
||||
|
||||
// Grid containers
|
||||
//
|
||||
// Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
$container-max-widths: (
|
||||
sm: 540px,
|
||||
md: 720px,
|
||||
lg: 960px,
|
||||
xl: 1140px
|
||||
) !default;
|
||||
@include _assert-ascending($container-max-widths, "$container-max-widths");
|
||||
|
||||
|
||||
// Grid columns
|
||||
//
|
||||
// Set the number of columns and specify the width of the gutters.
|
||||
|
||||
$grid-columns: 12 !default;
|
||||
$grid-gutter-width: 30px !default;
|
||||
|
||||
// Components
|
||||
//
|
||||
// Define common padding and border radius sizes and more.
|
||||
|
||||
$line-height-lg: 1.5 !default;
|
||||
$line-height-sm: 1.5 !default;
|
||||
|
||||
$border-width: 1px !default;
|
||||
|
||||
$border-radius: .25rem !default;
|
||||
$border-radius-lg: .3rem !default;
|
||||
$border-radius-sm: .2rem !default;
|
||||
|
||||
$component-active-color: $white !default;
|
||||
$component-active-bg: theme-color("primary") !default;
|
||||
|
||||
$caret-width: .3em !default;
|
||||
|
||||
$transition-base: all .2s ease-in-out !default;
|
||||
$transition-fade: opacity .15s linear !default;
|
||||
$transition-collapse: height .35s ease !default;
|
||||
|
||||
|
||||
// Fonts
|
||||
//
|
||||
// Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
||||
$font-family-base: $font-family-sans-serif !default;
|
||||
|
||||
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
|
||||
$font-size-lg: 1.25rem !default;
|
||||
$font-size-sm: .875rem !default;
|
||||
|
||||
$font-weight-normal: normal !default;
|
||||
$font-weight-bold: bold !default;
|
||||
|
||||
$font-weight-base: $font-weight-normal !default;
|
||||
$line-height-base: 1.5 !default;
|
||||
|
||||
$h1-font-size: 2.5rem !default;
|
||||
$h2-font-size: 2rem !default;
|
||||
$h3-font-size: 1.75rem !default;
|
||||
$h4-font-size: 1.5rem !default;
|
||||
$h5-font-size: 1.25rem !default;
|
||||
$h6-font-size: 1rem !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;
|
||||
|
||||
$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;
|
||||
$display-line-height: $headings-line-height !default;
|
||||
|
||||
$lead-font-size: 1.25rem !default;
|
||||
$lead-font-weight: 300 !default;
|
||||
|
||||
$small-font-size: 80% !default;
|
||||
|
||||
$text-muted: $gray-600 !default;
|
||||
|
||||
$blockquote-small-color: $gray-600 !default;
|
||||
$blockquote-font-size: ($font-size-base * 1.25) !default;
|
||||
|
||||
$hr-border-color: rgba($black,.1) !default;
|
||||
$hr-border-width: $border-width !default;
|
||||
|
||||
$mark-padding: .2em !default;
|
||||
|
||||
$dt-font-weight: $font-weight-bold !default;
|
||||
|
||||
$kbd-box-shadow: inset 0 -.1rem 0 rgba($black,.25) !default;
|
||||
$nested-kbd-font-weight: $font-weight-bold !default;
|
||||
|
||||
$list-inline-padding: 5px !default;
|
||||
|
||||
$mark-bg: #fcf8e3 !default;
|
||||
|
||||
|
||||
// Tables
|
||||
//
|
||||
// Customizes the `.table` component with basic values, each used across all table variations.
|
||||
|
||||
$table-cell-padding: .75rem !default;
|
||||
$table-cell-padding-sm: .3rem !default;
|
||||
|
||||
$table-bg: transparent !default;
|
||||
$table-accent-bg: rgba($black,.05) !default;
|
||||
$table-hover-bg: rgba($black,.075) !default;
|
||||
$table-active-bg: $table-hover-bg !default;
|
||||
|
||||
$table-border-width: $border-width !default;
|
||||
$table-border-color: $gray-200 !default;
|
||||
|
||||
$table-head-bg: $gray-200 !default;
|
||||
$table-head-color: $gray-700 !default;
|
||||
|
||||
$table-inverse-bg: $gray-900 !default;
|
||||
$table-inverse-accent-bg: rgba($white, .05) !default;
|
||||
$table-inverse-hover-bg: rgba($white, .075) !default;
|
||||
$table-inverse-border-color: lighten($gray-900, 7.5%) !default;
|
||||
$table-inverse-color: $body-bg !default;
|
||||
|
||||
|
||||
// Buttons
|
||||
//
|
||||
// For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
$input-btn-padding-y: .5rem !default;
|
||||
$input-btn-padding-x: .75rem !default;
|
||||
$input-btn-line-height: 1.25 !default;
|
||||
|
||||
$input-btn-padding-y-sm: .25rem !default;
|
||||
$input-btn-padding-x-sm: .5rem !default;
|
||||
$input-btn-line-height-sm: 1.5 !default;
|
||||
|
||||
$input-btn-padding-y-lg: .5rem !default;
|
||||
$input-btn-padding-x-lg: 1rem !default;
|
||||
$input-btn-line-height-lg: 1.5 !default;
|
||||
|
||||
$btn-font-weight: $font-weight-normal !default;
|
||||
$btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
|
||||
$btn-focus-box-shadow: 0 0 0 3px rgba(theme-color("primary"), .25) !default;
|
||||
$btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default;
|
||||
|
||||
$btn-link-disabled-color: $gray-600 !default;
|
||||
|
||||
$btn-block-spacing-y: .5rem !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;
|
||||
|
||||
$btn-transition: all .15s ease-in-out !default;
|
||||
|
||||
|
||||
// Forms
|
||||
|
||||
$input-bg: $white !default;
|
||||
$input-disabled-bg: $gray-200 !default;
|
||||
|
||||
$input-color: $gray-700 !default;
|
||||
$input-border-color: rgba($black,.15) !default;
|
||||
$input-btn-border-width: $border-width !default; // For form controls and buttons
|
||||
$input-box-shadow: inset 0 1px 1px rgba($black,.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-focus-bg: $input-bg !default;
|
||||
$input-focus-border-color: lighten(theme-color("primary"), 25%) !default;
|
||||
$input-focus-box-shadow: $input-box-shadow, $btn-focus-box-shadow !default;
|
||||
$input-focus-color: $input-color !default;
|
||||
|
||||
$input-placeholder-color: $gray-600 !default;
|
||||
|
||||
$input-height-border: $input-btn-border-width * 2 !default;
|
||||
|
||||
$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
|
||||
$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
|
||||
|
||||
$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
|
||||
$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
|
||||
|
||||
$input-height-inner-lg: ($font-size-sm * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
|
||||
$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
|
||||
|
||||
$input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
|
||||
|
||||
$form-text-margin-top: .25rem !default;
|
||||
|
||||
$form-check-margin-bottom: .5rem !default;
|
||||
$form-check-input-gutter: 1.25rem !default;
|
||||
$form-check-input-margin-y: .25rem !default;
|
||||
$form-check-input-margin-x: .25rem !default;
|
||||
|
||||
$form-check-inline-margin-x: .75rem !default;
|
||||
|
||||
$form-group-margin-bottom: 1rem !default;
|
||||
|
||||
$input-group-addon-bg: $gray-200 !default;
|
||||
$input-group-addon-border-color: $input-border-color !default;
|
||||
|
||||
$custom-control-gutter: 1.5rem !default;
|
||||
$custom-control-spacer-y: .25rem !default;
|
||||
$custom-control-spacer-x: 1rem !default;
|
||||
|
||||
$custom-control-indicator-size: 1rem !default;
|
||||
$custom-control-indicator-bg: #ddd !default;
|
||||
$custom-control-indicator-bg-size: 50% 50% !default;
|
||||
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default;
|
||||
|
||||
$custom-control-indicator-disabled-bg: $gray-200 !default;
|
||||
$custom-control-description-disabled-color: $gray-600 !default;
|
||||
|
||||
$custom-control-indicator-checked-color: $white !default;
|
||||
$custom-control-indicator-checked-bg: theme-color("primary") !default;
|
||||
$custom-control-indicator-checked-box-shadow: none !default;
|
||||
|
||||
$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px theme-color("primary") !default;
|
||||
|
||||
$custom-control-indicator-active-color: $white !default;
|
||||
$custom-control-indicator-active-bg: lighten(theme-color("primary"), 35%) !default;
|
||||
$custom-control-indicator-active-box-shadow: none !default;
|
||||
|
||||
$custom-checkbox-indicator-border-radius: $border-radius !default;
|
||||
$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
$custom-checkbox-indicator-indeterminate-bg: theme-color("primary") !default;
|
||||
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
|
||||
$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
|
||||
|
||||
$custom-radio-indicator-border-radius: 50% !default;
|
||||
$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
$custom-select-padding-y: .375rem !default;
|
||||
$custom-select-padding-x: .75rem !default;
|
||||
$custom-select-height: $input-height !default;
|
||||
$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
|
||||
$custom-select-line-height: $input-btn-line-height !default;
|
||||
$custom-select-color: $input-color !default;
|
||||
$custom-select-disabled-color: $gray-600 !default;
|
||||
$custom-select-bg: $white !default;
|
||||
$custom-select-disabled-bg: $gray-200 !default;
|
||||
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
|
||||
$custom-select-indicator-color: #333 !default;
|
||||
$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$custom-select-border-width: $input-btn-border-width !default;
|
||||
$custom-select-border-color: $input-border-color !default;
|
||||
$custom-select-border-radius: $border-radius !default;
|
||||
|
||||
$custom-select-focus-border-color: lighten(theme-color("primary"), 25%) !default;
|
||||
$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
|
||||
|
||||
$custom-select-font-size-sm: 75% !default;
|
||||
$custom-select-height-sm: $input-height-sm !default;
|
||||
|
||||
$custom-file-height: 2.5rem !default;
|
||||
$custom-file-width: 14rem !default;
|
||||
$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default;
|
||||
|
||||
$custom-file-padding-y: 1rem !default;
|
||||
$custom-file-padding-x: .5rem !default;
|
||||
$custom-file-line-height: 1.5 !default;
|
||||
$custom-file-color: $gray-700 !default;
|
||||
$custom-file-bg: $white !default;
|
||||
$custom-file-border-width: $border-width !default;
|
||||
$custom-file-border-color: $input-border-color !default;
|
||||
$custom-file-border-radius: $border-radius !default;
|
||||
$custom-file-box-shadow: inset 0 .2rem .4rem rgba($black,.05) !default;
|
||||
$custom-file-button-color: $custom-file-color !default;
|
||||
$custom-file-button-bg: $gray-200 !default;
|
||||
$custom-file-text: (
|
||||
placeholder: (
|
||||
en: "Choose file..."
|
||||
),
|
||||
button-label: (
|
||||
en: "Browse"
|
||||
)
|
||||
) !default;
|
||||
|
||||
|
||||
// Form validation
|
||||
$form-feedback-valid-color: theme-color("success") !default;
|
||||
$form-feedback-invalid-color: theme-color("danger") !default;
|
||||
|
||||
|
||||
// Dropdowns
|
||||
//
|
||||
// Dropdown menu container and contents.
|
||||
|
||||
$dropdown-min-width: 10rem !default;
|
||||
$dropdown-padding-y: .5rem !default;
|
||||
$dropdown-margin-top: .125rem !default;
|
||||
$dropdown-bg: $white !default;
|
||||
$dropdown-border-color: rgba($black,.15) !default;
|
||||
$dropdown-border-width: $border-width !default;
|
||||
$dropdown-divider-bg: $gray-200 !default;
|
||||
$dropdown-box-shadow: 0 .5rem 1rem rgba($black,.175) !default;
|
||||
|
||||
$dropdown-link-color: $gray-900 !default;
|
||||
$dropdown-link-hover-color: darken($gray-900, 5%) !default;
|
||||
$dropdown-link-hover-bg: $gray-100 !default;
|
||||
|
||||
$dropdown-link-active-color: $component-active-color !default;
|
||||
$dropdown-link-active-bg: $component-active-bg !default;
|
||||
|
||||
$dropdown-link-disabled-color: $gray-600 !default;
|
||||
|
||||
$dropdown-item-padding-y: .25rem !default;
|
||||
$dropdown-item-padding-x: 1.5rem !default;
|
||||
|
||||
$dropdown-header-color: $gray-600 !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-dropdown: 1000 !default;
|
||||
$zindex-sticky: 1020 !default;
|
||||
$zindex-fixed: 1030 !default;
|
||||
$zindex-modal-backdrop: 1040 !default;
|
||||
$zindex-modal: 1050 !default;
|
||||
$zindex-popover: 1060 !default;
|
||||
$zindex-tooltip: 1070 !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-padding-y: .5rem !default;
|
||||
$nav-link-padding-x: 1rem !default;
|
||||
$nav-link-disabled-color: $gray-600 !default;
|
||||
|
||||
$nav-tabs-border-color: #ddd !default;
|
||||
$nav-tabs-border-width: $border-width !default;
|
||||
$nav-tabs-border-radius: $border-radius !default;
|
||||
$nav-tabs-link-hover-border-color: $gray-200 !default;
|
||||
$nav-tabs-link-active-color: $gray-700 !default;
|
||||
$nav-tabs-link-active-bg: $body-bg !default;
|
||||
$nav-tabs-link-active-border-color: #ddd !default;
|
||||
|
||||
$nav-pills-border-radius: $border-radius !default;
|
||||
$nav-pills-link-active-color: $component-active-color !default;
|
||||
$nav-pills-link-active-bg: $component-active-bg !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: ($spacer / 2) !default;
|
||||
$navbar-padding-x: $spacer !default;
|
||||
|
||||
$navbar-brand-font-size: $font-size-lg !default;
|
||||
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
|
||||
$nav-link-height: $navbar-brand-font-size * $line-height-base !default;
|
||||
$navbar-brand-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
|
||||
$navbar-brand-padding-y: ($navbar-brand-height - $nav-link-height) / 2 !default;
|
||||
|
||||
$navbar-toggler-padding-y: .25rem !default;
|
||||
$navbar-toggler-padding-x: .75rem !default;
|
||||
$navbar-toggler-font-size: $font-size-lg !default;
|
||||
$navbar-toggler-border-radius: $btn-border-radius !default;
|
||||
|
||||
$navbar-dark-color: rgba($white,.5) !default;
|
||||
$navbar-dark-hover-color: rgba($white,.75) !default;
|
||||
$navbar-dark-active-color: rgba($white,1) !default;
|
||||
$navbar-dark-disabled-color: rgba($white,.25) !default;
|
||||
$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$navbar-dark-toggler-border-color: rgba($white,.1) !default;
|
||||
|
||||
$navbar-light-color: rgba($black,.5) !default;
|
||||
$navbar-light-hover-color: rgba($black,.7) !default;
|
||||
$navbar-light-active-color: rgba($black,.9) !default;
|
||||
$navbar-light-disabled-color: rgba($black,.3) !default;
|
||||
$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$navbar-light-toggler-border-color: rgba($black,.1) !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-padding-y: .5rem !default;
|
||||
$pagination-padding-x: .75rem !default;
|
||||
$pagination-padding-y-sm: .25rem !default;
|
||||
$pagination-padding-x-sm: .5rem !default;
|
||||
$pagination-padding-y-lg: .75rem !default;
|
||||
$pagination-padding-x-lg: 1.5rem !default;
|
||||
$pagination-line-height: 1.25 !default;
|
||||
|
||||
$pagination-color: $link-color !default;
|
||||
$pagination-bg: $white !default;
|
||||
$pagination-border-width: $border-width !default;
|
||||
$pagination-border-color: #ddd !default;
|
||||
|
||||
$pagination-hover-color: $link-hover-color !default;
|
||||
$pagination-hover-bg: $gray-200 !default;
|
||||
$pagination-hover-border-color: #ddd !default;
|
||||
|
||||
$pagination-active-color: $white !default;
|
||||
$pagination-active-bg: theme-color("primary") !default;
|
||||
$pagination-active-border-color: theme-color("primary") !default;
|
||||
|
||||
$pagination-disabled-color: $gray-600 !default;
|
||||
$pagination-disabled-bg: $white !default;
|
||||
$pagination-disabled-border-color: #ddd !default;
|
||||
|
||||
|
||||
// Jumbotron
|
||||
|
||||
$jumbotron-padding: 2rem !default;
|
||||
$jumbotron-bg: $gray-200 !default;
|
||||
|
||||
|
||||
// Cards
|
||||
|
||||
$card-spacer-y: .75rem !default;
|
||||
$card-spacer-x: 1.25rem !default;
|
||||
$card-border-width: 1px !default;
|
||||
$card-border-radius: $border-radius !default;
|
||||
$card-border-color: rgba($black,.125) !default;
|
||||
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
|
||||
$card-cap-bg: rgba($black, .03) !default;
|
||||
$card-bg: $white !default;
|
||||
|
||||
$card-img-overlay-padding: 1.25rem !default;
|
||||
|
||||
$card-deck-margin: ($grid-gutter-width / 2) !default;
|
||||
|
||||
$card-columns-count: 3 !default;
|
||||
$card-columns-gap: 1.25rem !default;
|
||||
$card-columns-margin: $card-spacer-y !default;
|
||||
|
||||
|
||||
// Tooltips
|
||||
|
||||
$tooltip-max-width: 200px !default;
|
||||
$tooltip-color: $white !default;
|
||||
$tooltip-bg: $black !default;
|
||||
$tooltip-opacity: .9 !default;
|
||||
$tooltip-padding-y: 3px !default;
|
||||
$tooltip-padding-x: 8px !default;
|
||||
$tooltip-margin: 0 !default;
|
||||
|
||||
|
||||
$tooltip-arrow-width: 5px !default;
|
||||
$tooltip-arrow-height: 5px !default;
|
||||
$tooltip-arrow-color: $tooltip-bg !default;
|
||||
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-inner-padding: 1px !default;
|
||||
$popover-bg: $white !default;
|
||||
$popover-max-width: 276px !default;
|
||||
$popover-border-width: $border-width !default;
|
||||
$popover-border-color: rgba($black,.2) !default;
|
||||
$popover-box-shadow: 0 5px 10px rgba($black,.2) !default;
|
||||
|
||||
$popover-header-bg: darken($popover-bg, 3%) !default;
|
||||
$popover-header-color: $headings-color !default;
|
||||
$popover-header-padding-y: 8px !default;
|
||||
$popover-header-padding-x: 14px !default;
|
||||
|
||||
$popover-body-color: $body-color !default;
|
||||
$popover-body-padding-y: 9px !default;
|
||||
$popover-body-padding-x: 14px !default;
|
||||
|
||||
$popover-arrow-width: 10px !default;
|
||||
$popover-arrow-height: 5px !default;
|
||||
$popover-arrow-color: $popover-bg !default;
|
||||
|
||||
$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
|
||||
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
|
||||
|
||||
|
||||
// Badges
|
||||
|
||||
$badge-color: $white !default;
|
||||
$badge-font-size: 75% !default;
|
||||
$badge-font-weight: $font-weight-bold !default;
|
||||
$badge-padding-y: .25em !default;
|
||||
$badge-padding-x: .4em !default;
|
||||
|
||||
$badge-pill-padding-x: .6em !default;
|
||||
// Use a higher than normal value to ensure completely rounded edges when
|
||||
// customizing padding or font-size on labels.
|
||||
$badge-pill-border-radius: 10rem !default;
|
||||
|
||||
|
||||
// Modals
|
||||
|
||||
// Padding applied to the modal body
|
||||
$modal-inner-padding: 15px !default;
|
||||
|
||||
$modal-dialog-margin: 10px !default;
|
||||
$modal-dialog-margin-y-sm-up: 30px !default;
|
||||
|
||||
$modal-title-line-height: $line-height-base !default;
|
||||
|
||||
$modal-content-bg: $white !default;
|
||||
$modal-content-border-color: rgba($black,.2) !default;
|
||||
$modal-content-border-width: $border-width !default;
|
||||
$modal-content-box-shadow-xs: 0 3px 9px rgba($black,.5) !default;
|
||||
$modal-content-box-shadow-sm-up: 0 5px 15px rgba($black,.5) !default;
|
||||
|
||||
$modal-backdrop-bg: $black !default;
|
||||
$modal-backdrop-opacity: .5 !default;
|
||||
$modal-header-border-color: $gray-200 !default;
|
||||
$modal-footer-border-color: $modal-header-border-color !default;
|
||||
$modal-header-border-width: $modal-content-border-width !default;
|
||||
$modal-footer-border-width: $modal-header-border-width !default;
|
||||
$modal-header-padding: 15px !default;
|
||||
|
||||
$modal-lg: 800px !default;
|
||||
$modal-md: 500px !default;
|
||||
$modal-sm: 300px !default;
|
||||
|
||||
$modal-transition: transform .3s ease-out !default;
|
||||
|
||||
|
||||
// Alerts
|
||||
//
|
||||
// Define alert colors, border radius, and padding.
|
||||
|
||||
$alert-padding-y: .75rem !default;
|
||||
$alert-padding-x: 1.25rem !default;
|
||||
$alert-margin-bottom: 1rem !default;
|
||||
$alert-border-radius: $border-radius !default;
|
||||
$alert-link-font-weight: $font-weight-bold !default;
|
||||
$alert-border-width: $border-width !default;
|
||||
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-height: 1rem !default;
|
||||
$progress-font-size: .75rem !default;
|
||||
$progress-bg: $gray-200 !default;
|
||||
$progress-border-radius: $border-radius !default;
|
||||
$progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default;
|
||||
$progress-bar-color: $white !default;
|
||||
$progress-bar-bg: theme-color("primary") !default;
|
||||
$progress-bar-animation-timing: 1s linear infinite !default;
|
||||
$progress-bar-transition: width .6s ease !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-bg: $white !default;
|
||||
$list-group-border-color: rgba($black,.125) !default;
|
||||
$list-group-border-width: $border-width !default;
|
||||
$list-group-border-radius: $border-radius !default;
|
||||
|
||||
$list-group-item-padding-y: .75rem !default;
|
||||
$list-group-item-padding-x: 1.25rem !default;
|
||||
|
||||
$list-group-hover-bg: $gray-100 !default;
|
||||
$list-group-active-color: $component-active-color !default;
|
||||
$list-group-active-bg: $component-active-bg !default;
|
||||
$list-group-active-border-color: $list-group-active-bg !default;
|
||||
|
||||
$list-group-disabled-color: $gray-600 !default;
|
||||
$list-group-disabled-bg: $list-group-bg !default;
|
||||
|
||||
$list-group-action-color: $gray-700 !default;
|
||||
$list-group-action-hover-color: $list-group-action-color !default;
|
||||
|
||||
$list-group-action-active-color: $body-color !default;
|
||||
$list-group-action-active-bg: $gray-200 !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;
|
||||
$thumbnail-box-shadow: 0 1px 2px rgba($black,.075) !default;
|
||||
$thumbnail-transition: all .2s ease-in-out !default;
|
||||
|
||||
|
||||
// Figures
|
||||
|
||||
$figure-caption-font-size: 90% !default;
|
||||
$figure-caption-color: $gray-600 !default;
|
||||
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .75rem !default;
|
||||
$breadcrumb-padding-x: 1rem !default;
|
||||
$breadcrumb-item-padding: .5rem !default;
|
||||
|
||||
$breadcrumb-bg: $gray-200 !default;
|
||||
$breadcrumb-divider-color: $gray-600 !default;
|
||||
$breadcrumb-active-color: $gray-600 !default;
|
||||
$breadcrumb-divider: "/" !default;
|
||||
|
||||
|
||||
// Carousel
|
||||
|
||||
$carousel-control-color: $white !default;
|
||||
$carousel-control-width: 15% !default;
|
||||
$carousel-control-opacity: .5 !default;
|
||||
|
||||
$carousel-indicator-width: 30px !default;
|
||||
$carousel-indicator-height: 3px !default;
|
||||
$carousel-indicator-spacer: 3px !default;
|
||||
$carousel-indicator-active-bg: $white !default;
|
||||
|
||||
$carousel-caption-width: 70% !default;
|
||||
$carousel-caption-color: $white !default;
|
||||
|
||||
$carousel-control-icon-width: 20px !default;
|
||||
|
||||
$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
$carousel-transition: transform .6s ease !default;
|
||||
|
||||
|
||||
// Close
|
||||
|
||||
$close-font-size: $font-size-base * 1.5 !default;
|
||||
$close-font-weight: $font-weight-bold !default;
|
||||
$close-color: $black !default;
|
||||
$close-text-shadow: 0 1px 0 $white !default;
|
||||
|
||||
// Code
|
||||
|
||||
$code-font-size: 90% !default;
|
||||
$code-padding-y: .2rem !default;
|
||||
$code-padding-x: .4rem !default;
|
||||
$code-color: #bd4147 !default;
|
||||
$code-bg: $gray-100 !default;
|
||||
|
||||
$kbd-color: $white !default;
|
||||
$kbd-bg: $gray-900 !default;
|
||||
|
||||
$pre-color: $gray-900 !default;
|
||||
$pre-scrollable-max-height: 340px !default;
|
||||
211
html/sass/mdb/free/data/_variables.scss
Executable file
211
html/sass/mdb/free/data/_variables.scss
Executable file
@@ -0,0 +1,211 @@
|
||||
// Fonts Path
|
||||
$roboto-font-path: "../font/roboto/" !default;
|
||||
|
||||
// Full Palette
|
||||
$enable_full_palette: true;
|
||||
|
||||
// $btn-floating-icon-margin: 5px;
|
||||
|
||||
//Tabs
|
||||
$tabs-padding: 0.7rem;
|
||||
$tabs-margin-x: 1rem;
|
||||
$tabs-margin-y: -20px;
|
||||
$pills-padding: 0.6rem;
|
||||
|
||||
// Spacers
|
||||
$spacer: 1rem !default;
|
||||
$spacer-x: $spacer !default;
|
||||
$spacer-y: $spacer !default;
|
||||
$spacers: (
|
||||
0: 0,
|
||||
1: ($spacer * .25),
|
||||
2: ($spacer * .5),
|
||||
3: $spacer,
|
||||
4: ($spacer * 1.5),
|
||||
5: ($spacer * 3),
|
||||
6: ($spacer * 5)
|
||||
) !default;
|
||||
|
||||
|
||||
// Extreme Padding
|
||||
$extreme-padding: (
|
||||
"xs": 0,
|
||||
"sm": 5%,
|
||||
"md": 10%,
|
||||
"lg": 15%,
|
||||
"xl": 20%
|
||||
);
|
||||
|
||||
// Navbar
|
||||
$font-weight: 300;
|
||||
|
||||
$navbar-light-toggler-icon: 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") !default;
|
||||
$navbar-light-bg-active-color: rgba($black, .1) !default;
|
||||
$navbar-light-hover-color: rgba($black, .75);
|
||||
|
||||
$navbar-dark-toggler-icon: 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") !default;
|
||||
$navbar-dark-bg-active-color: rgba($white, .1) !default;
|
||||
$navbar-dark-hover-color: rgba($white, .75);
|
||||
|
||||
$navbar-scrolling-padding: 12px;
|
||||
$navbar-top-collapse-padding: 5px;
|
||||
$navbar-flex-icons-padding-md: 6px;
|
||||
$navbar-flex-icons-padding-lg: 3px;
|
||||
$navbar-form-input-mr: 5px;
|
||||
$navbar-form-input-mb: 1px;
|
||||
$navbar-form-input-ml: 8px;
|
||||
$navbar-form-input-height: 1rem;
|
||||
$navbar-dropdown-font-size: 0.9375rem;
|
||||
$navbar-dropdown-menu-padding: 10px;
|
||||
$navbar-padding-dropdown: 1rem;
|
||||
$navbar-avatar-height: 35px;
|
||||
$navbar-double-small-padding: 4px;
|
||||
$navbar-double-font-size: 15px;
|
||||
$navbar-breadcrumb-dn-padding: 1rem;
|
||||
// $navbar-button-collapse-top: 1px;
|
||||
$navbar-button-collapse-left: 10px;
|
||||
$navbar-button-collapse-font-size: 1.5rem;
|
||||
$navbar-button-collapse-fs-sm: 1.4rem;
|
||||
$navbar-button-collapse-mx: 10px;
|
||||
// $navbar-button-collapse-mt: 1px;
|
||||
|
||||
//Dropdown
|
||||
$dropdown-menu-padding: 0.5rem;
|
||||
$dropdown-item-padding: 1rem;
|
||||
|
||||
// Badges
|
||||
$badge-pill-padding-x: 0.6rem !default;
|
||||
$badge-pill-border-radius: 10rem !default;
|
||||
|
||||
// Progress
|
||||
$progress-bar-height: 4px;
|
||||
$progress-bar-wider-height: 20px;
|
||||
$progress-bar-narrower-height: 1px;
|
||||
$progress-bar-margin-y: 1rem;
|
||||
$progress-bar-bg-color: map-get($grey, lighten-3);
|
||||
|
||||
// Forms
|
||||
// Text Inputs + Textarea
|
||||
$input-border-color: map-get($grey, "lighten-1");
|
||||
$input-focus-color: $primary-color;
|
||||
$input-font-size: 1rem;
|
||||
$form-control-margin: 0.5rem;
|
||||
$form-control-border-color: $primary-color;
|
||||
// TODO
|
||||
$input-disabled-color: rgba(0,0,0, .46) !default;
|
||||
$input-disabled-solid-color: $primary-color !default;
|
||||
|
||||
// Radio Buttons
|
||||
$radio-fill-color: $primary-color !default;
|
||||
$radio-empty-color: #5a5a5a !default;
|
||||
|
||||
// Dropdown
|
||||
$dropdown-bg-color: #fff !default;
|
||||
$dropdown-hover-bg-color: #eee !default;
|
||||
$dropdown-color: $primary-color !default;
|
||||
$dropdown-item-height: 40px !default;
|
||||
|
||||
// Inputs
|
||||
$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: $primary-color !default; //trochę dziwny kolor był tutaj wpisany dlatego zamieniłem
|
||||
$input-disabled-solid-color: #BDBDBD;
|
||||
|
||||
// Table
|
||||
$product-table-img-max-height: 150px;
|
||||
$product-table-img-min-width: 50px;
|
||||
$table-inverse-color-border: $white !default;
|
||||
|
||||
// Footer
|
||||
$footer-margin-top: 20px;
|
||||
$footer-padding-top: 20px;
|
||||
$footer-copyright-height: 50px;
|
||||
$footer-copyright-line-height: 50px;
|
||||
$footer-call-to-action-pt: 1.3rem;
|
||||
$footer-call-to-action-pb: 0.5rem;
|
||||
$footer-call-to-action-pr: 10px;
|
||||
$footer-insta-photos-max-width: 100px;
|
||||
$footer-insta-photos-margin: 4px;
|
||||
|
||||
// Images Path
|
||||
$image-path: '../img/';
|
||||
|
||||
// Reponsive Headings
|
||||
$responsive-headings: (
|
||||
"xs": (
|
||||
"h1": 150%,
|
||||
"h2": 145%,
|
||||
"h3": 135%,
|
||||
"h4": 135%,
|
||||
"h5": 135%
|
||||
),
|
||||
"sm": (
|
||||
"h1": 170%,
|
||||
"h2": 140%,
|
||||
"h3": 125%,
|
||||
"h4": 125%,
|
||||
"h5": 125%
|
||||
),
|
||||
"md": (
|
||||
"h1": 200%,
|
||||
"h2": 170%,
|
||||
"h3": 140%,
|
||||
"h4": 125%,
|
||||
"h5": 125%
|
||||
),
|
||||
"lg": (
|
||||
"h1": 200%,
|
||||
"h2": 170%,
|
||||
"h3": 140%,
|
||||
"h4": 125%,
|
||||
"h5": 125%
|
||||
),
|
||||
"xl": (
|
||||
"h1": 250%,
|
||||
"h2": 200%,
|
||||
"h3": 170%,
|
||||
"h4": 140%,
|
||||
"h5": 125%
|
||||
),
|
||||
);
|
||||
|
||||
/*** 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;
|
||||
|
||||
// Link color
|
||||
$link-color: #0275d8;
|
||||
|
||||
$navbar-option: (
|
||||
"light": (
|
||||
"navbar-toggler-icon": $navbar-light-toggler-icon,
|
||||
"navbar-option-color": $black,
|
||||
"navbar-link-hover-color": $navbar-light-hover-color,
|
||||
"navbar-active-link-bg-color": $navbar-light-bg-active-color,
|
||||
"navbar-placeholder-color": $black !important
|
||||
),
|
||||
"dark": (
|
||||
"navbar-toggler-icon": $navbar-dark-toggler-icon,
|
||||
"navbar-option-color": $white,
|
||||
"navbar-link-hover-color": $navbar-dark-hover-color,
|
||||
"navbar-active-link-bg-color": $navbar-dark-bg-active-color,
|
||||
"navbar-placeholder-color": $white !important
|
||||
)
|
||||
);
|
||||
28
html/sass/mdb/pro/_accordion.scss
Normal file
28
html/sass/mdb/pro/_accordion.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
// ACCORDION
|
||||
.accordion {
|
||||
.card {
|
||||
border-bottom: 1px solid #eee;
|
||||
box-shadow: none;
|
||||
.card-header {
|
||||
padding: 1rem 1.5rem;
|
||||
background: transparent;
|
||||
border-bottom: 0;
|
||||
a:not(.collapsed) {
|
||||
.rotate-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.fa-angle-down {
|
||||
float: right;
|
||||
}
|
||||
.card-block {
|
||||
padding-top: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Collapsible body
|
||||
.collapsible-body {
|
||||
display: none;
|
||||
}
|
||||
7
html/sass/mdb/pro/_animations-pro.scss
Executable file
7
html/sass/mdb/pro/_animations-pro.scss
Executable file
@@ -0,0 +1,7 @@
|
||||
// Animations Pro
|
||||
.collapsible .active {
|
||||
.rotate-icon {
|
||||
transform: rotate(180deg);
|
||||
transition: all 150ms ease-in 0s;
|
||||
}
|
||||
}
|
||||
40
html/sass/mdb/pro/_autocomplete.scss
Executable file
40
html/sass/mdb/pro/_autocomplete.scss
Executable file
@@ -0,0 +1,40 @@
|
||||
/***************
|
||||
MDB Autocomplete
|
||||
***************/
|
||||
.mdb-autocomplete {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.mdb-autocomplete-clear {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: 0;
|
||||
top: 0.85rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
svg {
|
||||
fill: #a6a6a6;
|
||||
}
|
||||
}
|
||||
|
||||
.mdb-autocomplete-wrap {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
|
||||
z-index: 100;
|
||||
max-height: 210px;
|
||||
overflow-y: auto;
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
li {
|
||||
cursor: pointer;
|
||||
padding: 12px 15px;
|
||||
font-size: 0.875rem;
|
||||
&:hover {
|
||||
background: rgb(238, 238, 238);
|
||||
}
|
||||
}
|
||||
}
|
||||
104
html/sass/mdb/pro/_blog.scss
Executable file
104
html/sass/mdb/pro/_blog.scss
Executable file
@@ -0,0 +1,104 @@
|
||||
// BLOG COMPONENTS
|
||||
// Author box
|
||||
.author-box {
|
||||
@extend .jumbotron;
|
||||
padding: 3rem;
|
||||
@media (max-width: $small-screen-up) {
|
||||
text-align: center;
|
||||
img {
|
||||
margin-bottom: 2rem;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
strong{
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Comments section
|
||||
.comments-list,
|
||||
.reply-form {
|
||||
margin-bottom: 3rem;
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
.badge {
|
||||
@extend .z-depth-1-half;
|
||||
}
|
||||
img {
|
||||
max-width: 100px;
|
||||
@extend .z-depth-2;
|
||||
@extend .img-fluid;
|
||||
@include border-radius(50%);
|
||||
}
|
||||
.row {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.user-name {
|
||||
color: #000;
|
||||
}
|
||||
.comment-date {
|
||||
color: #666;
|
||||
}
|
||||
.comment-text {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
@media (max-width: $small-screen-up) {
|
||||
text-align: center;
|
||||
img {
|
||||
display: inline;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.md-form {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.text-center {
|
||||
flex:1;
|
||||
}
|
||||
}
|
||||
|
||||
// Full width blog section
|
||||
.section-blog-fw {
|
||||
.view {
|
||||
@extend .z-depth-1;
|
||||
}
|
||||
.jumbotron {
|
||||
@extend .m-1;
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
@extend .h2-responsive;
|
||||
margin-bottom: 1rem;
|
||||
a {
|
||||
color: #424242;
|
||||
@include transition (0.2s);
|
||||
&:hover {
|
||||
color: #616161;
|
||||
@include transition (0.2s);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//blog icons
|
||||
.personal-sm{
|
||||
margin-bottom: 10px;
|
||||
a {
|
||||
padding: 5px;
|
||||
&:first-of-type {
|
||||
padding-left: 0;
|
||||
}
|
||||
.fa {
|
||||
transition-duration: .2s;
|
||||
}
|
||||
&:hover .fa {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
98
html/sass/mdb/pro/_buttons-pro.scss
Executable file
98
html/sass/mdb/pro/_buttons-pro.scss
Executable file
@@ -0,0 +1,98 @@
|
||||
// Buttons Pro
|
||||
.btn {
|
||||
&.btn-flat {
|
||||
color:inherit !important;
|
||||
background-color: transparent;
|
||||
box-shadow:none;
|
||||
}
|
||||
}
|
||||
|
||||
//Floating button
|
||||
.btn-floating {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
width: $btn-floating-size;
|
||||
height: $btn-floating-size;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
margin: 10px;
|
||||
@extend .z-depth-1-half;
|
||||
background-color: $btn-floating-color;
|
||||
color: $btn-floating-color-raised;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
i {
|
||||
display: inline-block;
|
||||
width: inherit;
|
||||
color: $btn-floating-color-raised;
|
||||
font-size: $btn-floating-icon-size;
|
||||
line-height: $btn-floating-size;
|
||||
text-align: center;
|
||||
}
|
||||
&:hover {
|
||||
@extend .z-depth-2;
|
||||
}
|
||||
&:before {
|
||||
border-radius: 0;
|
||||
}
|
||||
&.btn-sm,
|
||||
&.btn-small {
|
||||
width: $btn-floating-size / 1.3;
|
||||
height: $btn-floating-size / 1.3;
|
||||
i {
|
||||
font-size: $btn-floating-icon-size / 1.3;
|
||||
line-height: $btn-floating-size / 1.3;
|
||||
}
|
||||
}
|
||||
&.btn-lg,
|
||||
&.btn-large {
|
||||
width: $btn-floating-size * 1.3;
|
||||
height: $btn-floating-size * 1.3;
|
||||
i {
|
||||
font-size: $btn-floating-icon-size * 1.3;
|
||||
line-height: $btn-floating-size * 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Fixed Action Button
|
||||
.fixed-action-btn {
|
||||
position: fixed;
|
||||
z-index: 998;
|
||||
right: 35px;
|
||||
bottom: 35px;
|
||||
padding-top: 15px;
|
||||
margin-bottom: 0;
|
||||
ul {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 64px;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
list-style-type:none;
|
||||
text-align: center;
|
||||
li {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
a {
|
||||
&.btn-floating {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
button, html [type="button"], [type="reset"], [type="submit"] {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
// Rounded buttons
|
||||
.btn-rounded {
|
||||
border-radius: 10em;
|
||||
}
|
||||
|
||||
// Gradient buttons
|
||||
@each $name, $val in $gradients-premium {
|
||||
@include make-gradient-button($name, $val);
|
||||
}
|
||||
424
html/sass/mdb/pro/_cards-pro.scss
Executable file
424
html/sass/mdb/pro/_cards-pro.scss
Executable file
@@ -0,0 +1,424 @@
|
||||
// Cards Pro
|
||||
.card {
|
||||
// Common styles for cards pro
|
||||
&.card-image {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
width: 100%;
|
||||
}
|
||||
.card-data {
|
||||
background-color: map-get($mdb-color, 'lighten-3');
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
font-size: 0.9rem;
|
||||
li {
|
||||
display: inline;
|
||||
.fa-clock-o {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: #fff;
|
||||
.fa {
|
||||
margin-left: 5px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.card-dark {
|
||||
.activator {
|
||||
@extend .white-text;
|
||||
}
|
||||
.card-body {
|
||||
background-color: $elegant-color;
|
||||
@extend .white-text;
|
||||
hr {
|
||||
background-color: #666;
|
||||
}
|
||||
a {
|
||||
@extend .white-text;
|
||||
}
|
||||
}
|
||||
} // Cascading cards
|
||||
&.card-cascade {
|
||||
width: 100%;
|
||||
.view {
|
||||
@extend .z-depth-2;
|
||||
border-radius: 4px;
|
||||
&.gradient-card-header {
|
||||
padding: 1.6rem 1rem;
|
||||
text-align: center;
|
||||
@extend .white-text;
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
}
|
||||
.btn-floating {
|
||||
background-color: rgba(255, 255, 255, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.narrower {
|
||||
margin-top: 20px;
|
||||
.view {
|
||||
margin-left: 4%;
|
||||
margin-right: 4%;
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
&.wider {
|
||||
background-color: transparent;
|
||||
@extend .z-depth-0;
|
||||
.view {
|
||||
z-index: 2;
|
||||
}
|
||||
.card-body {
|
||||
margin-left: 4%;
|
||||
margin-right: 4%;
|
||||
@extend .z-depth-1;
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
border-radius: 0 0 0.3rem 0.3rem;
|
||||
}
|
||||
&.reverse {
|
||||
.view {
|
||||
//@extend .z-depth-1;
|
||||
}
|
||||
.card-body {
|
||||
z-index: 3;
|
||||
margin-top: -1rem;
|
||||
border-radius: 4px;
|
||||
@extend .z-depth-1-half;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.card-avatar {
|
||||
margin-top: 6rem;
|
||||
text-align: center;
|
||||
img {
|
||||
margin-top: -5rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 160px;
|
||||
border-radius: 50%;
|
||||
@extend .z-depth-1-half;
|
||||
}
|
||||
}
|
||||
.card-body {
|
||||
padding-top: 1.8rem;
|
||||
}
|
||||
&.panel-cascade {
|
||||
.view {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
.list-group {
|
||||
.list-group-item {
|
||||
margin-bottom: 0px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
color: #495057;
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// activator
|
||||
.activator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 1rem;
|
||||
margin-right: 10px;
|
||||
font-size: 1.2rem;
|
||||
@extend .black-text;
|
||||
} // review card
|
||||
.rating {
|
||||
color: #ffa000;
|
||||
}
|
||||
.btn-action {
|
||||
margin: -23px 20px;
|
||||
margin-left: auto;
|
||||
background-color: map-get($mdb-color, 'lighten-3');
|
||||
height: 47px;
|
||||
width: 47px;
|
||||
line-height: 0;
|
||||
.fa {
|
||||
font-size: 18px;
|
||||
&.fa-chevron-right {
|
||||
margin-top: 2px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-review {
|
||||
margin-top: -1px;
|
||||
@extend .black;
|
||||
color: #fff;
|
||||
padding: 50px 20px 20px 20px;
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
font-size: 0.9rem;
|
||||
li {
|
||||
display: inline;
|
||||
}
|
||||
a {
|
||||
color: #fff;
|
||||
.fa {
|
||||
margin-left: 5px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
} //Card Reveal
|
||||
.card-reveal {
|
||||
position: absolute;
|
||||
@extend .white;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
top: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
padding: 1rem;
|
||||
.card-title {
|
||||
cursor: pointer;
|
||||
i {
|
||||
color: #9e9e9e;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
position: relative;
|
||||
h4 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
h5 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
} //Social reveal
|
||||
.card-share {
|
||||
position: relative;
|
||||
.social-reveal {
|
||||
position: absolute;
|
||||
top: -28px;
|
||||
right: 30px;
|
||||
visibility: hidden;
|
||||
width: auto;
|
||||
transform: translateZ(0);
|
||||
transform: translateX(0px);
|
||||
transition: transform 0.35s ease;
|
||||
.btn-floating {
|
||||
margin: 0.3rem;
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.social-reveal-active {
|
||||
z-index: 11;
|
||||
visibility: visible;
|
||||
/*z-index: 3;*/
|
||||
transform: translateZ(0);
|
||||
transform: translateX(-48px);
|
||||
transition: transform 0.35s ease;
|
||||
}
|
||||
}
|
||||
&.ovf-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-footer {
|
||||
background-color: transparent; // padding: .75rem .5rem 0 .5rem;
|
||||
.left {
|
||||
float: left;
|
||||
.discount {
|
||||
text-decoration: line-through;
|
||||
color: #9e9e9e;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
display: flex;
|
||||
a {
|
||||
color: #757575;
|
||||
margin-left: 1rem;
|
||||
@include transition (0.4s);
|
||||
&:hover {
|
||||
color: #d50000;
|
||||
@include transition (0.4s);
|
||||
}
|
||||
&.active {
|
||||
color: #d50000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Rotating card
|
||||
.card-wrapper {
|
||||
margin: 0;
|
||||
min-height: 500px;
|
||||
position: relative;
|
||||
perspective: 800px;
|
||||
.face {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@extend .white;
|
||||
h4 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
h5 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.content {
|
||||
text-align: left;
|
||||
padding: 15px;
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.rotate-btn {
|
||||
padding: 1rem;
|
||||
margin-right: -8px;
|
||||
float: right;
|
||||
font-size: 1.2rem;
|
||||
@extend .black-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Front side */
|
||||
.card-up {
|
||||
overflow: hidden;
|
||||
height: 50%;
|
||||
}
|
||||
.card-up img {
|
||||
min-width: 400px;
|
||||
}
|
||||
.avatar {
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
height: 120px;
|
||||
margin: -65px auto 0;
|
||||
overflow: hidden;
|
||||
width: 120px;
|
||||
}
|
||||
.avatar img {
|
||||
border: 5px solid #fff;
|
||||
background: none repeat scroll 0 0 #FFFFFF;
|
||||
width: 100%;
|
||||
}
|
||||
/* Card with rotate on click */
|
||||
.card-rotating {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.content {
|
||||
position: relative;
|
||||
.rotate-btn {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Rotate icons */
|
||||
.fa-repeat,
|
||||
.fa-undo {
|
||||
font-size: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.fa-undo {
|
||||
margin-top: 30px;
|
||||
}
|
||||
/* Animation */
|
||||
.card-rotating {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.front,
|
||||
.back {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-transition: -webkit-transform 1.0s;
|
||||
transition: transform 1.0s;
|
||||
@extend .z-depth-1;
|
||||
}
|
||||
.back {
|
||||
-webkit-transform: rotateY(-180deg);
|
||||
transform: rotateY(-180deg);
|
||||
padding: 1rem;
|
||||
.card-title {
|
||||
cursor: pointer;
|
||||
i {
|
||||
color: #9e9e9e;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Click effect */
|
||||
.card-rotating.effect__click.flipped .front {
|
||||
-webkit-transform: rotateY(180deg);
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.card-rotating.effect__click.flipped .back {
|
||||
-webkit-transform: rotateY(0);
|
||||
transform: rotateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Testimonial card
|
||||
.testimonial-card {
|
||||
.card-up {
|
||||
overflow: hidden;
|
||||
height: 120px;
|
||||
border-radius: .3rem .3rem 0 0;
|
||||
}
|
||||
.avatar {
|
||||
@include border-radius(50%);
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
margin: -65px auto 0;
|
||||
overflow: hidden;
|
||||
border: 5px solid #fff;
|
||||
@extend .white;
|
||||
}
|
||||
.avatar img {
|
||||
width: 100%;
|
||||
}
|
||||
.card-body {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.card-inverse {
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
h3 {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
// Card overlay
|
||||
.card-overlay {
|
||||
background-size: cover;
|
||||
padding: 1.5rem;
|
||||
border-radius: 2px;
|
||||
@extend .z-depth-2;
|
||||
@extend .flex-center;
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
95
html/sass/mdb/pro/_carousels-pro.scss
Executable file
95
html/sass/mdb/pro/_carousels-pro.scss
Executable file
@@ -0,0 +1,95 @@
|
||||
// CAROUSELS PRO
|
||||
.carousel-multi-item {
|
||||
@media (min-width: 768px) {
|
||||
.col-md-4 {
|
||||
float: left;
|
||||
width: 33.333333%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-item.active,
|
||||
.carousel-item-next,
|
||||
.carousel-item-prev {
|
||||
display: block;
|
||||
}
|
||||
|
||||
margin-bottom: 100px;
|
||||
.carousel-indicators li {
|
||||
height: 20px;
|
||||
max-width: 20px;
|
||||
background-color: $primary-color;
|
||||
margin-bottom: -60px;
|
||||
}
|
||||
.carousel-indicators .active {
|
||||
height: 25px;
|
||||
max-width: 25px;
|
||||
background-color: $primary-color;
|
||||
@include border-radius(50%);
|
||||
}
|
||||
.controls-top {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
.btn-floating {
|
||||
background: $primary-color;
|
||||
}
|
||||
}
|
||||
.carousel-indicators {
|
||||
margin-bottom: -2em;
|
||||
}
|
||||
.card {
|
||||
margin: 1px;
|
||||
}
|
||||
.card-cascade.narrower {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $medium-screen) {
|
||||
.carousel-multi-item {
|
||||
.carousel-indicators li {
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Carousel with thumbnails
|
||||
.carousel-thumbnails {
|
||||
margin-bottom: 80px;
|
||||
.carousel-indicators {
|
||||
margin-bottom: -75px;
|
||||
position: absolute;
|
||||
li {
|
||||
height: auto;
|
||||
max-width: 100px;
|
||||
width: 100px;
|
||||
border: none;
|
||||
}
|
||||
.active {
|
||||
height: auto;
|
||||
width: auto;
|
||||
@extend .white;
|
||||
opacity: 0.5;
|
||||
}
|
||||
img {
|
||||
max-width: 100px;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $small-screen) {
|
||||
.carousel-thumbnails {
|
||||
margin-bottom: 60px;
|
||||
.carousel-indicators {
|
||||
margin-bottom: -60px;
|
||||
img {
|
||||
max-width: 50px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
26
html/sass/mdb/pro/_charts-pro.scss
Executable file
26
html/sass/mdb/pro/_charts-pro.scss
Executable file
@@ -0,0 +1,26 @@
|
||||
// Charts Pro
|
||||
|
||||
.min-chart {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
text-align: center;
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.percent {
|
||||
display: inline-block;
|
||||
line-height: 110px;
|
||||
z-index: 2;
|
||||
&:after {
|
||||
content: '%';
|
||||
margin-left: 0.1em;
|
||||
font-size: .8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
156
html/sass/mdb/pro/_checkbox.scss
Executable file
156
html/sass/mdb/pro/_checkbox.scss
Executable file
@@ -0,0 +1,156 @@
|
||||
/***************
|
||||
Checkboxes
|
||||
***************/
|
||||
[type="checkbox"] {
|
||||
@extend %hide-radio-checkbox;
|
||||
+ label {
|
||||
@extend %base-radio-checkbox-label;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
z-index: 0;
|
||||
border: 1.5px solid #8a8a8a;
|
||||
border-radius: 1px;
|
||||
margin-top: 2px;
|
||||
@include transition(.2s);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label:before {
|
||||
top: -4px;
|
||||
left: -3px;
|
||||
width: 12px;
|
||||
height: 22px;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: transparent $radio-fill-color $radio-fill-color transparent;
|
||||
@include transform(rotate(40deg));
|
||||
-webkit-backface-visibility: hidden;
|
||||
@include transform-origin(100% 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
+ label:before {
|
||||
left: -10px;
|
||||
top: -11px;
|
||||
width: 10px;
|
||||
height: 22px;
|
||||
border: none;
|
||||
border-right: 2px solid $radio-fill-color;
|
||||
@include transform(rotate(90deg));
|
||||
-webkit-backface-visibility: hidden;
|
||||
@include transform-origin(100% 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
&:checked + label:before {
|
||||
border-color: transparent $input-disabled-color $input-disabled-color transparent;
|
||||
}
|
||||
&:not(:checked) + label:before {
|
||||
border: none;
|
||||
margin-left: 2px;
|
||||
margin-top: 2px;
|
||||
background-color: $input-disabled-color;
|
||||
}
|
||||
&:indeterminate + label:before {
|
||||
border-right: 2px solid $input-disabled-color;
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*='filled-in'] {
|
||||
|
||||
+ label:after, + label:before {
|
||||
content: '';
|
||||
left: 0;
|
||||
position: absolute;
|
||||
/* .1s delay is for check animation */
|
||||
transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
|
||||
z-index: 1;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
}
|
||||
+ label:after {
|
||||
border-radius: 2px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
+ label:before {
|
||||
@include transform(rotateZ(37deg));
|
||||
@include transform-origin(100% 100%); // ? 20% 40%
|
||||
}
|
||||
|
||||
&:not(:checked) {
|
||||
+ label:before {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: 3px;
|
||||
border-color: transparent;
|
||||
left: 6px;
|
||||
top: 10px;
|
||||
}
|
||||
+ label:after {
|
||||
background-color: transparent;
|
||||
border-color: $radio-empty-color;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label:before {
|
||||
top: 0;
|
||||
left: 1px;
|
||||
width: 8px;
|
||||
height: 13px;
|
||||
border-color: transparent $input-bg-color $input-bg-color transparent;
|
||||
}
|
||||
+ label:after {
|
||||
border-color: $secondary-color;
|
||||
background-color: $secondary-color;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
&:not(:checked) {
|
||||
+ label:before {
|
||||
background-color: transparent;
|
||||
border-color: $input-disabled-solid-color;
|
||||
}
|
||||
+ label:after {
|
||||
border-color: transparent;
|
||||
background-color: $input-disabled-solid-color;
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
+ label:before {
|
||||
background-color: transparent;
|
||||
}
|
||||
+ label:after {
|
||||
background-color: $input-disabled-solid-color;
|
||||
border-color: $input-disabled-solid-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.filled-in-danger {
|
||||
&:checked + label:after {
|
||||
background-color: red;
|
||||
border-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
69
html/sass/mdb/pro/_chips.scss
Executable file
69
html/sass/mdb/pro/_chips.scss
Executable file
@@ -0,0 +1,69 @@
|
||||
// Chips
|
||||
.chip {
|
||||
display: inline-block;
|
||||
height: $chip-height;
|
||||
font-size: $chip-font-size;
|
||||
font-weight: $chip-font-weight;
|
||||
color: $chip-font-color;
|
||||
line-height: $chip-line-height;
|
||||
padding: 0 $chip-padding-right;
|
||||
@include border-radius($chip-br);
|
||||
background-color: $chip-background-color;
|
||||
margin-bottom: $chip-margin-bottom;
|
||||
margin-right: $chip-margin-right;
|
||||
img {
|
||||
float: left;
|
||||
margin: 0 $chip-img-margin-right 0 $chip-img-margin-left;
|
||||
height: $chip-img-height;
|
||||
width: $chip-img-width;
|
||||
@include border-radius(50%);
|
||||
}
|
||||
.close {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-size: $chip-close-font-size;
|
||||
line-height: $chip-close-line-height;
|
||||
padding-left: $chip-close-padding-left;
|
||||
@include transition(all 0.1s linear);
|
||||
}
|
||||
}
|
||||
|
||||
.chips {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid $input-border-color;
|
||||
margin-bottom: $chips-margin-bottom;
|
||||
min-height: $chips-min-height;
|
||||
padding-bottom: $chips-padding-bottom;
|
||||
@include transition(all .3s);
|
||||
&.focus {
|
||||
border-bottom: 1px solid $input-focus-color;
|
||||
box-shadow: 0 1px 0 0 $input-focus-color;
|
||||
}
|
||||
&:hover {
|
||||
cursor: text;
|
||||
}
|
||||
.tag.selected {
|
||||
border-bottom: 1px solid $input-focus-color;
|
||||
color: $white;
|
||||
}
|
||||
.input {
|
||||
display: inline-block;
|
||||
background: none;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
padding: 0 !important;
|
||||
width: $chips-input-width !important;
|
||||
color: $chips-input-font-color;
|
||||
font-size: $chips-input-font-size;
|
||||
font-weight: $chips-input-font-weight;
|
||||
height: $chips-input-height;
|
||||
margin-right: $chips-input-margin-right;
|
||||
line-height: $chips-input-line-height;
|
||||
&:focus {
|
||||
border: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
173
html/sass/mdb/pro/_deprecated.scss
Executable file
173
html/sass/mdb/pro/_deprecated.scss
Executable file
@@ -0,0 +1,173 @@
|
||||
|
||||
// Colorful SideNav
|
||||
.colorful-side-nav {
|
||||
background-color: $default-color-dark;
|
||||
li {
|
||||
background-color: $default-color-dark;
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: lighten( $default-color-dark, 5%);
|
||||
}
|
||||
}
|
||||
p {
|
||||
@extend .white-text;
|
||||
}
|
||||
.collapsible a {
|
||||
margin: 0;
|
||||
@extend .white-text;
|
||||
&:active {
|
||||
background-color: lighten( $default-color-dark, 5%);
|
||||
}
|
||||
&.active {
|
||||
background-color: lighten( $default-color-dark, 5%);
|
||||
}
|
||||
}
|
||||
.collapsible {
|
||||
>li {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.social {
|
||||
border-top: 1px solid #26a69a;
|
||||
border-bottom: 1px solid #26a69a;
|
||||
a {
|
||||
@extend .white-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Stylish SideNav
|
||||
.stylish-side-nav {
|
||||
background-color: $stylish-color-dark;
|
||||
li {
|
||||
background-color: $stylish-color-dark;
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: $stylish-color;
|
||||
}
|
||||
}
|
||||
p {
|
||||
@extend .white-text;
|
||||
}
|
||||
.collapsible a {
|
||||
margin: 0;
|
||||
@extend .white-text;
|
||||
&:active {
|
||||
background-color: $stylish-color;
|
||||
}
|
||||
&.active {
|
||||
background-color: $stylish-color;
|
||||
}
|
||||
}
|
||||
.collapsible {
|
||||
>li {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.social {
|
||||
border-top: 1px solid $stylish-color;
|
||||
border-bottom: 1px solid $stylish-color;
|
||||
a {
|
||||
@extend .white-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Light Variation
|
||||
.light-side-nav {
|
||||
.logo-wrapper {
|
||||
height: 80px;
|
||||
a {
|
||||
height: 80px;
|
||||
}
|
||||
img {
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
padding-top: 7%;
|
||||
padding-bottom: 7%;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: #1C2331;
|
||||
}
|
||||
.collapsible a {
|
||||
color: #1C2331;
|
||||
}
|
||||
.social {
|
||||
border-top: 1px solid #eeeeee;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
}
|
||||
.navbar-form {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark Variation
|
||||
.dark-side-nav {
|
||||
background-color: $elegant-color-dark;
|
||||
li {
|
||||
background-color: $elegant-color-dark;
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: $elegant-color;
|
||||
}
|
||||
}
|
||||
p {
|
||||
@extend .white-text;
|
||||
}
|
||||
.collapsible a {
|
||||
@extend .white-text;
|
||||
margin: 0;
|
||||
|
||||
&:active,
|
||||
.active {
|
||||
background-color: $elegant-color;
|
||||
}
|
||||
}
|
||||
.collapsible {
|
||||
>li {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.social {
|
||||
border-top: 1px solid $stylish-color;
|
||||
border-bottom: 1px solid $stylish-color;
|
||||
a {
|
||||
@extend .white-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Social List
|
||||
|
||||
.social-list {
|
||||
font-weight: 400;
|
||||
width: auto;
|
||||
@extend .z-depth-1;
|
||||
padding: 1rem;
|
||||
list-style-type:none;
|
||||
li {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.fa {
|
||||
margin-right: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.fa-facebook {
|
||||
margin-right: 26px;
|
||||
}
|
||||
a {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Flat button
|
||||
.btn-flat {
|
||||
position: relative;
|
||||
padding: 8px 30px;
|
||||
border: none;
|
||||
margin: 10px;
|
||||
text-decoration: none;
|
||||
outline: 0!important;
|
||||
}
|
||||
159
html/sass/mdb/pro/_dropdowns-pro.scss
Executable file
159
html/sass/mdb/pro/_dropdowns-pro.scss
Executable file
@@ -0,0 +1,159 @@
|
||||
// Dropdown pro
|
||||
// Dropdowns menu's colors
|
||||
.dropdown {
|
||||
.dropdown-menu {
|
||||
padding: 0.5rem;
|
||||
@each $name, $color in $dropdown-colors {
|
||||
&.dropdown-#{$name} {
|
||||
.dropdown-item {
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-item {
|
||||
padding: 0.5rem;
|
||||
margin-left: 0;
|
||||
font-size:0.9rem;
|
||||
&.disabled {
|
||||
color: #868e96;
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
color: #868e96!important;
|
||||
background-color: transparent!important;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:active {
|
||||
border-radius: 2px;
|
||||
transition: all 0.1s linear;
|
||||
@extend .z-depth-1-half;
|
||||
@extend .white-text;
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .dropdown-menu-right {
|
||||
// right: 0;
|
||||
// left: auto!important;
|
||||
// }
|
||||
|
||||
.dropdown-content {
|
||||
@extend .z-depth-1;
|
||||
background-color: $dropdown-bg-color;
|
||||
margin: 0;
|
||||
display: none;
|
||||
min-width: 100px;
|
||||
max-height: 650px;
|
||||
overflow-y: auto;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
will-change: width, height;
|
||||
li {
|
||||
clear: both;
|
||||
color: #000;//$off-black;
|
||||
cursor: pointer;
|
||||
line-height: 1.3rem;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: $dropdown-hover-bg-color;
|
||||
}
|
||||
& > a,
|
||||
& > span {
|
||||
font-size: 0.9rem;
|
||||
color: $dropdown-color;
|
||||
display: block;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
// Icon alignment override
|
||||
& > a > i {
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Material select color variations
|
||||
.colorful-select {
|
||||
.dropdown-content {
|
||||
padding: 0.5rem;
|
||||
li {
|
||||
&.active span {
|
||||
color: #fff!important;
|
||||
@extend .z-depth-1-half;
|
||||
[type="checkbox"]:checked + label:before {
|
||||
border-color: transparent white white transparent;
|
||||
}
|
||||
}
|
||||
a:hover, span:hover {
|
||||
color: #fff!important;
|
||||
@extend .z-depth-2;
|
||||
@include transition (all 0.1s linear);
|
||||
@include border-radius (2px);
|
||||
|
||||
[type="checkbox"] + label:before {
|
||||
border-color: white;
|
||||
}
|
||||
[type="checkbox"]:checked + label:before {
|
||||
border-color: transparent white white transparent;
|
||||
}
|
||||
}
|
||||
optgroup {
|
||||
}
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&.optgroup {
|
||||
&.active span {
|
||||
@extend .z-depth-0;
|
||||
color: $rgba-black-light !important;
|
||||
border-bottom-color: $rgba-black-light;
|
||||
cursor: default;
|
||||
}
|
||||
a:hover, span:hover {
|
||||
@extend .z-depth-0;
|
||||
color: $rgba-black-light !important;
|
||||
border-bottom-color: $rgba-black-light;
|
||||
cursor: default;
|
||||
background-color: white !important;
|
||||
}
|
||||
label {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $type, $color in $dropdown-colors {
|
||||
.dropdown-#{$type} {
|
||||
.dropdown-content li {
|
||||
&.active, a, span:hover {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
.search-wrap input:focus {
|
||||
border-bottom: 1px solid $color;
|
||||
box-shadow: 0 1px 0 0 $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu.animated {
|
||||
/* Speed up animations */
|
||||
-webkit-animation-duration: 0.55s;
|
||||
animation-duration: 0.55s;
|
||||
-webkit-animation-timing-function: ease;
|
||||
animation-timing-function: ease;
|
||||
}
|
||||
144
html/sass/mdb/pro/_ecommerce.scss
Executable file
144
html/sass/mdb/pro/_ecommerce.scss
Executable file
@@ -0,0 +1,144 @@
|
||||
// Ecommerce Pro Cards
|
||||
// Collection card
|
||||
.collection-card {
|
||||
.stripe {
|
||||
position: absolute;
|
||||
bottom: 3rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 1.2rem;
|
||||
&.dark {
|
||||
background-color: $rgba-black-strong;
|
||||
a p {
|
||||
color: map-get($grey, "lighten-3");
|
||||
}
|
||||
}
|
||||
&.light {
|
||||
background-color: $rgba-white-strong;
|
||||
a p {
|
||||
color: map-get($grey, "darken-3");
|
||||
}
|
||||
}
|
||||
a {
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
letter-spacing: 4px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rating {
|
||||
list-style-type:none;
|
||||
padding:0;
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
// When icon doesn't need padding
|
||||
.no-padding {
|
||||
.fa {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Quick look modal
|
||||
.ql-modal,
|
||||
.product-panel {
|
||||
.modal-dialog {
|
||||
max-width: none;
|
||||
width: auto;
|
||||
margin: 2rem;
|
||||
}
|
||||
.modal-header {
|
||||
text-align: center;
|
||||
}
|
||||
.price {
|
||||
.badge {
|
||||
background-color: $rgba-red-strong;
|
||||
font-size: 1.4rem;
|
||||
display: inline-block;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
p {
|
||||
display: inline-block;
|
||||
font-size: 1.3rem;
|
||||
.price-before {
|
||||
color: black;
|
||||
text-decoration: line-through;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.price-after {
|
||||
font-size: 1.7rem;
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
.media img {
|
||||
max-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.ql-modal {
|
||||
.modal-dialog {
|
||||
margin: 0;
|
||||
}
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wishlist {
|
||||
@extend .btn-sm;
|
||||
background-color: $danger-color;
|
||||
}
|
||||
|
||||
// Collection card
|
||||
.collection-card {
|
||||
.stripe {
|
||||
position: absolute;
|
||||
bottom: 3rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 1.2rem;
|
||||
&.dark {
|
||||
background-color: $rgba-black-strong;
|
||||
a p {
|
||||
color: #eeeeee;
|
||||
}
|
||||
}
|
||||
&.light {
|
||||
background-color: $rgba-white-strong;
|
||||
a p {
|
||||
color: #424242;
|
||||
}
|
||||
}
|
||||
a {
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
letter-spacing: 4px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Cart modal
|
||||
.cart-modal {
|
||||
.table,
|
||||
th {
|
||||
text-align: center;
|
||||
}
|
||||
.table {
|
||||
.total {
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
.fa-remove {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
40
html/sass/mdb/pro/_file-input.scss
Executable file
40
html/sass/mdb/pro/_file-input.scss
Executable file
@@ -0,0 +1,40 @@
|
||||
/***********
|
||||
File Input
|
||||
***********/
|
||||
|
||||
.file-field {
|
||||
position: relative;
|
||||
.file-path-wrapper {
|
||||
overflow: hidden;
|
||||
padding-left: 10px;
|
||||
height: 2.5rem;
|
||||
}
|
||||
input.file-path {
|
||||
width: 100%;
|
||||
height: 2.1rem;
|
||||
}
|
||||
.btn {
|
||||
float: left;
|
||||
}
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=file] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-file {
|
||||
padding-top: 1px;
|
||||
}
|
||||
380
html/sass/mdb/pro/_forms-pro.scss
Executable file
380
html/sass/mdb/pro/_forms-pro.scss
Executable file
@@ -0,0 +1,380 @@
|
||||
// FORMS PRO
|
||||
|
||||
|
||||
// hide default radio / checkbox
|
||||
%hide-radio-checkbox {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
%base-radio-checkbox-label {
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
font-size: 1rem;
|
||||
/* webkit (safari, chrome) browsers */
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
/* mozilla browsers */
|
||||
/* webkit (konqueror) browsers */
|
||||
-khtml-user-select: none;
|
||||
/* IE10+ */
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
%user-select-none {
|
||||
-webkit-user-select:none;
|
||||
-moz-user-select:none;
|
||||
-ms-user-select:none;
|
||||
-o-user-select:none;
|
||||
user-select:none;
|
||||
}
|
||||
|
||||
/**************
|
||||
Radio
|
||||
***************/
|
||||
[type="radio"] {
|
||||
@extend %hide-radio-checkbox;
|
||||
+ label {
|
||||
@extend %base-radio-checkbox-label;
|
||||
@include transition(.28s ease);
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 4px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
z-index: 0;
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
@include transition(.28s ease);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:checked) {
|
||||
+ label:before, + label:after {
|
||||
border-color: $radio-empty-color;
|
||||
}
|
||||
+ label:after {
|
||||
z-index: -1;
|
||||
@include transform(scale(0));
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label:before {
|
||||
border-color: transparent;
|
||||
}
|
||||
+ label:after {
|
||||
border-color: $radio-fill-color;
|
||||
background-color: $radio-fill-color;
|
||||
z-index: 0;
|
||||
@include transform(scale(1.02));
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
|
||||
+ label {
|
||||
color: $input-disabled-color;
|
||||
&:before {
|
||||
background-color: transparent;
|
||||
border-color: $input-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:checked) + label:before {
|
||||
border-color: $input-disabled-color;
|
||||
}
|
||||
|
||||
&:checked + label:after {
|
||||
background-color: $input-disabled-color;
|
||||
border-color: $input-disabled-solid-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.with-gap {
|
||||
|
||||
&:checked {
|
||||
+ label:before {
|
||||
border-color: $radio-fill-color;
|
||||
}
|
||||
+ label:after {
|
||||
@include transform(scale(.5));
|
||||
}
|
||||
&:disabled {
|
||||
+ label:before {
|
||||
border-color: $input-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
/***************
|
||||
Checkboxes
|
||||
***************/
|
||||
[type="checkbox"] {
|
||||
@extend %hide-radio-checkbox;
|
||||
+ label {
|
||||
@extend %base-radio-checkbox-label;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
z-index: 0;
|
||||
border: 2px solid $radio-empty-color;
|
||||
border-radius: 1px;
|
||||
margin-top: 2px;
|
||||
@include transition(.2s);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label:before {
|
||||
top: -4px;
|
||||
left: -3px;
|
||||
width: 12px;
|
||||
height: 22px;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: transparent $radio-fill-color $radio-fill-color transparent;
|
||||
@include transform(rotate(40deg));
|
||||
-webkit-backface-visibility: hidden;
|
||||
@include transform-origin(100% 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
+ label:before {
|
||||
left: -10px;
|
||||
top: -11px;
|
||||
width: 10px;
|
||||
height: 22px;
|
||||
border: none;
|
||||
border-right: 2px solid $radio-fill-color;
|
||||
@include transform(rotate(90deg));
|
||||
-webkit-backface-visibility: hidden;
|
||||
@include transform-origin(100% 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
&:checked + label:before {
|
||||
border-color: transparent $input-disabled-color $input-disabled-color transparent;
|
||||
}
|
||||
&:not(:checked) + label:before {
|
||||
border: none;
|
||||
margin-left: 2px;
|
||||
margin-top: 2px;
|
||||
background-color: $input-disabled-color;
|
||||
}
|
||||
&:indeterminate + label:before {
|
||||
border-right: 2px solid $input-disabled-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*='filled-in'] {
|
||||
|
||||
+ label:after, + label:before {
|
||||
content: '';
|
||||
left: 0;
|
||||
position: absolute;
|
||||
/* .1s delay is for check animation */
|
||||
transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
|
||||
z-index: 1;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
}
|
||||
+ label:after {
|
||||
border-radius: 2px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
+ label:before {
|
||||
@include transform(rotateZ(37deg));
|
||||
@include transform-origin(100% 100%); // ? 20% 40%
|
||||
}
|
||||
|
||||
&:not(:checked) {
|
||||
+ label:before {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: 3px;
|
||||
border-color: transparent;
|
||||
left: 6px;
|
||||
top: 10px;
|
||||
}
|
||||
+ label:after {
|
||||
background-color: transparent;
|
||||
border-color: $radio-empty-color;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label:before {
|
||||
top: 0;
|
||||
left: 1px;
|
||||
width: 8px;
|
||||
height: 13px;
|
||||
border-color: transparent $input-bg-color $input-bg-color transparent;
|
||||
}
|
||||
+ label:after {
|
||||
border-color: $secondary-color;
|
||||
background-color: $secondary-color;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
&:not(:checked) {
|
||||
+ label:before {
|
||||
background-color: transparent;
|
||||
border-color: $input-disabled-solid-color;
|
||||
}
|
||||
+ label:after {
|
||||
border-color: transparent;
|
||||
background-color: $input-disabled-solid-color;
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
+ label:before {
|
||||
background-color: transparent;
|
||||
}
|
||||
+ label:after {
|
||||
background-color: $input-disabled-solid-color;
|
||||
border-color: $input-disabled-solid-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.filled-in-danger {
|
||||
&:checked + label:after {
|
||||
background-color: red;
|
||||
border-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/***************
|
||||
Select Field
|
||||
***************/
|
||||
|
||||
|
||||
.select-label {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
position: relative;
|
||||
input.select-dropdown {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
// color: #444;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: $input-border-color;
|
||||
outline: none;
|
||||
height: 3rem;
|
||||
line-height: 3rem;
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
margin: 0 0 15px 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
&:disabled {
|
||||
color: $rgba-black-light;
|
||||
border-bottom-color: $rgba-black-light;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
.select-dropdown {
|
||||
@extend %user-select-none;
|
||||
}
|
||||
span.caret {
|
||||
color: initial;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 16px;
|
||||
font-size: 10px;
|
||||
&.disabled {
|
||||
color: $input-disabled-color;
|
||||
}
|
||||
}
|
||||
& + label {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
font-size: $label-font-size;
|
||||
}
|
||||
i {
|
||||
color: $rgba-black-light;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
display: none;
|
||||
&.browser-default {
|
||||
display: block;
|
||||
}
|
||||
&:disabled {
|
||||
color: $rgba-black-light;
|
||||
}
|
||||
}
|
||||
|
||||
.select-dropdown {
|
||||
li {
|
||||
|
||||
img {
|
||||
height: $dropdown-item-height - 10;
|
||||
width: $dropdown-item-height - 10;
|
||||
margin: 3px 12px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
&.disabled, &.disabled > span, &.optgroup {
|
||||
color: $rgba-black-light;
|
||||
background-color: transparent!important;
|
||||
cursor: context-menu;
|
||||
}
|
||||
|
||||
&.optgroup {
|
||||
border-top: 1px solid $dropdown-hover-bg-color;
|
||||
&.selected > span {
|
||||
color: rgba(0, 0, 0, .7);
|
||||
}
|
||||
& > span {
|
||||
color: rgba(0, 0, 0, .4);
|
||||
}
|
||||
& ~ li:not(.optgroup) {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.multiple-select-dropdown li [type="checkbox"] + label {
|
||||
height: 10px;
|
||||
}
|
||||
30
html/sass/mdb/pro/_input-group.scss
Executable file
30
html/sass/mdb/pro/_input-group.scss
Executable file
@@ -0,0 +1,30 @@
|
||||
/***************
|
||||
Input group
|
||||
***************/
|
||||
.input-group {
|
||||
.input-group-addon {
|
||||
background-color: #e0e0e0;
|
||||
[type="checkbox"] + label {
|
||||
padding-left: 18px;
|
||||
height: 13px;
|
||||
}
|
||||
[type="radio"] + label {
|
||||
padding-left: 24px;
|
||||
height: 13px;
|
||||
}
|
||||
// Style Placeholders
|
||||
@include placeholder {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
span {
|
||||
z-index: 10;
|
||||
}
|
||||
.form-control {
|
||||
margin-top: 3px;
|
||||
padding-top: 14px;
|
||||
padding-bottom: 7px;
|
||||
padding-left: 1.2rem;
|
||||
|
||||
}
|
||||
}
|
||||
832
html/sass/mdb/pro/_light-box.scss
Executable file
832
html/sass/mdb/pro/_light-box.scss
Executable file
@@ -0,0 +1,832 @@
|
||||
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
|
||||
|
||||
/*
|
||||
Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
|
||||
*/
|
||||
|
||||
// PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.
|
||||
|
||||
/* pswp = photoswipe */
|
||||
|
||||
.pswp {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
z-index: $pswp__root-z-index;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
|
||||
-webkit-backface-visibility: hidden;
|
||||
outline: none;
|
||||
@if $pswp__box-sizing-border-box==true {
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
img {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* style is added when JS option showHideOpacity is set to true */
|
||||
|
||||
.pswp--animate_opacity {
|
||||
/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
|
||||
opacity: 0.001;
|
||||
will-change: opacity;
|
||||
/* for open/close transition */
|
||||
transition: opacity $pswp__show-hide-transition-duration cubic-bezier(.4, 0, .22, 1);
|
||||
}
|
||||
|
||||
.pswp--open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pswp--zoom-allowed .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.pswp--zoomed-in .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.pswp--dragging .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Background is added as a separate element.
|
||||
As animating opacity is much faster than animating rgba() background-color.
|
||||
*/
|
||||
|
||||
.pswp__bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: $pswp__background-color;
|
||||
opacity: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.pswp__scroll-wrap {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pswp__container,
|
||||
.pswp__zoom-wrap {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Prevent selection and tap highlights */
|
||||
|
||||
.pswp__container,
|
||||
.pswp__img {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
.pswp__zoom-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
-webkit-transform-origin: left top;
|
||||
-moz-transform-origin: left top;
|
||||
-ms-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
/* for open/close transition */
|
||||
transition: transform $pswp__show-hide-transition-duration cubic-bezier(.4, 0, .22, 1);
|
||||
}
|
||||
|
||||
.pswp__bg {
|
||||
will-change: opacity;
|
||||
/* for open/close transition */
|
||||
transition: opacity $pswp__show-hide-transition-duration cubic-bezier(.4, 0, .22, 1);
|
||||
}
|
||||
|
||||
.pswp--animated-in {
|
||||
.pswp__bg,
|
||||
.pswp__zoom-wrap {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pswp__container,
|
||||
.pswp__zoom-wrap {
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.pswp__item {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pswp__img {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
height: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
stretched thumbnail or div placeholder element (see below)
|
||||
style is added to avoid flickering in webkit/blink when layers overlap
|
||||
*/
|
||||
|
||||
.pswp__img--placeholder {
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
div element that matches size of large image
|
||||
large image loads on top of it
|
||||
*/
|
||||
|
||||
.pswp__img--placeholder--blank {
|
||||
background: $pswp__placeholder-color;
|
||||
}
|
||||
|
||||
.pswp--ie .pswp__img {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Error message appears when image is not loaded
|
||||
(JS option errorMsg controls markup)
|
||||
*/
|
||||
|
||||
.pswp__error-msg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
margin-top: -8px;
|
||||
color: $pswp__error-text-color;
|
||||
}
|
||||
|
||||
.pswp__error-msg a {
|
||||
color: $pswp__error-text-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
|
||||
|
||||
|
||||
/*
|
||||
|
||||
Contents:
|
||||
|
||||
1. Buttons
|
||||
2. Share modal and links
|
||||
3. Index indicator ("1 of X" counter)
|
||||
4. Caption
|
||||
5. Loading indicator
|
||||
6. Additional styles (root element, top bar, idle state, hidden state, etc.)
|
||||
|
||||
*/
|
||||
|
||||
// PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.
|
||||
|
||||
/*
|
||||
|
||||
1. Buttons
|
||||
|
||||
*/
|
||||
|
||||
|
||||
/* <button> css reset */
|
||||
|
||||
.pswp__button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: relative;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
float: right;
|
||||
opacity: 0.75;
|
||||
transition: opacity 0.2s;
|
||||
box-shadow: none;
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
&:active {
|
||||
outline: none;
|
||||
opacity: 0.9;
|
||||
}
|
||||
&::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
|
||||
|
||||
.pswp__ui--over-close .pswp__button--close {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pswp__button,
|
||||
.pswp__button--arrow--left:before,
|
||||
.pswp__button--arrow--right:before {
|
||||
background: url(../img/lightbox/default-skin.png) 0 0 no-repeat;
|
||||
background-size: 264px 88px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 1.1),
|
||||
(min-resolution: 105dpi),
|
||||
(min-resolution: 1.1dppx) {
|
||||
/* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
|
||||
.pswp--svg .pswp__button,
|
||||
.pswp--svg .pswp__button--arrow--left:before,
|
||||
.pswp--svg .pswp__button--arrow--right:before {
|
||||
background-image: url(../img/lightbox/default-skin.svg);
|
||||
}
|
||||
.pswp--svg .pswp__button--arrow--left,
|
||||
.pswp--svg .pswp__button--arrow--right {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pswp__button--close {
|
||||
background-position: 0 -44px;
|
||||
}
|
||||
|
||||
.pswp__button--share {
|
||||
background-position: -44px -44px;
|
||||
}
|
||||
|
||||
.pswp__button--fs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pswp--supports-fs .pswp__button--fs {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pswp--fs .pswp__button--fs {
|
||||
background-position: -44px 0;
|
||||
}
|
||||
|
||||
.pswp__button--zoom {
|
||||
display: none;
|
||||
background-position: -88px 0;
|
||||
}
|
||||
|
||||
.pswp--zoom-allowed .pswp__button--zoom {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pswp--zoomed-in .pswp__button--zoom {
|
||||
background-position: -132px 0;
|
||||
}
|
||||
|
||||
|
||||
/* no arrows on touch screens */
|
||||
|
||||
.pswp--touch {
|
||||
.pswp__button--arrow--left,
|
||||
.pswp__button--arrow--right {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Arrow buttons hit area
|
||||
(icon is added to :before pseudo-element)
|
||||
*/
|
||||
|
||||
.pswp__button--arrow--left,
|
||||
.pswp__button--arrow--right {
|
||||
background: none;
|
||||
top: 50%;
|
||||
margin-top: -50px;
|
||||
width: 70px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--left:before,
|
||||
.pswp__button--arrow--right:before {
|
||||
content: '';
|
||||
top: 35px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
height: 30px;
|
||||
width: 32px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--left:before {
|
||||
left: 6px;
|
||||
background-position: -138px -44px;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--right:before {
|
||||
right: 6px;
|
||||
background-position: -94px -44px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
2. Share modal/popup and links
|
||||
|
||||
*/
|
||||
|
||||
.pswp__counter,
|
||||
.pswp__share-modal {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pswp__share-modal {
|
||||
display: block;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
z-index: $pswp__root-z-index + 100;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease-out;
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.pswp__share-modal--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pswp__share-tooltip {
|
||||
z-index: $pswp__root-z-index + 120;
|
||||
position: absolute;
|
||||
background: #FFF;
|
||||
top: 56px;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
width: auto;
|
||||
right: 44px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||
transform: translateY(6px);
|
||||
transition: transform 0.25s;
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: transform;
|
||||
a {
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
&:first-child {
|
||||
/* round corners on the first/last list item */
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 0 2px 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pswp__share-modal--fade-in {
|
||||
opacity: 1;
|
||||
.pswp__share-tooltip {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* increase size of share links on touch devices */
|
||||
|
||||
.pswp--touch .pswp__share-tooltip a {
|
||||
padding: 16px 12px;
|
||||
}
|
||||
|
||||
a.pswp__share--facebook {
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
right: 15px;
|
||||
border: 6px solid rgba(0, 0, 0, 0);
|
||||
border-bottom-color: #FFF;
|
||||
-webkit-pointer-events: none;
|
||||
-moz-pointer-events: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
&:hover {
|
||||
background: #3E5C9A;
|
||||
color: #FFF;
|
||||
&:before {
|
||||
border-bottom-color: #3E5C9A;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.pswp__share--twitter {
|
||||
&:hover {
|
||||
background: #55ACEE;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
a.pswp__share--pinterest {
|
||||
&:hover {
|
||||
background: #CCC;
|
||||
color: #CE272D;
|
||||
}
|
||||
}
|
||||
|
||||
a.pswp__share--download {
|
||||
&:hover {
|
||||
background: #DDD;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
3. Index indicator ("1 of X" counter)
|
||||
|
||||
*/
|
||||
|
||||
.pswp__counter {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 44px;
|
||||
font-size: 13px;
|
||||
line-height: 44px;
|
||||
color: #FFF;
|
||||
opacity: 0.75;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
4. Caption
|
||||
|
||||
*/
|
||||
|
||||
.pswp__caption {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
min-height: 44px;
|
||||
small {
|
||||
font-size: 11px;
|
||||
color: #BBB;
|
||||
}
|
||||
}
|
||||
|
||||
.pswp__caption__center {
|
||||
text-align: left;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
font-size: 13px;
|
||||
padding: 10px;
|
||||
line-height: 20px;
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
.pswp__caption--empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Fake caption element, used to calculate height of next/prev image */
|
||||
|
||||
.pswp__caption--fake {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
5. Loading indicator (preloader)
|
||||
|
||||
You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
|
||||
|
||||
*/
|
||||
|
||||
.pswp__preloader {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -22px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease-out;
|
||||
will-change: opacity;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.pswp__preloader__icn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
.pswp__preloader--active {
|
||||
opacity: 1;
|
||||
.pswp__preloader__icn {
|
||||
/* We use .gif in browsers that don't support CSS animation */
|
||||
background: url(../img/lightbox/preloader.gif) 0 0 no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.pswp--css_animation {
|
||||
.pswp__preloader--active {
|
||||
opacity: 1;
|
||||
.pswp__preloader__icn {
|
||||
animation: clockwise 500ms linear infinite;
|
||||
}
|
||||
.pswp__preloader__donut {
|
||||
animation: donut-rotate 1000ms cubic-bezier(.4, 0, .22, 1) infinite;
|
||||
}
|
||||
}
|
||||
.pswp__preloader__icn {
|
||||
background: none;
|
||||
opacity: 0.75;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
.pswp__preloader__cut {
|
||||
/*
|
||||
The idea of animating inner circle is based on Polymer ("material") loading indicator
|
||||
by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
|
||||
*/
|
||||
position: relative;
|
||||
width: 7px;
|
||||
height: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.pswp__preloader__donut {
|
||||
box-sizing: border-box;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid #FFF;
|
||||
border-radius: 50%;
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.pswp__preloader {
|
||||
position: relative;
|
||||
left: auto;
|
||||
top: auto;
|
||||
margin: 0;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes clockwise {
|
||||
0% {
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes donut-rotate {
|
||||
0% {
|
||||
transform: rotate(0)
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-140deg)
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
6. Additional styles
|
||||
|
||||
*/
|
||||
|
||||
|
||||
/* root element of UI */
|
||||
|
||||
.pswp__ui {
|
||||
-webkit-font-smoothing: auto;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
z-index: $pswp__root-z-index + 50;
|
||||
}
|
||||
|
||||
|
||||
/* top black bar with buttons and "1 of X" indicator */
|
||||
|
||||
.pswp__top-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 44px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pswp__caption,
|
||||
.pswp__top-bar,
|
||||
.pswp--has_mouse .pswp__button--arrow--left,
|
||||
.pswp--has_mouse .pswp__button--arrow--right {
|
||||
-webkit-backface-visibility: hidden;
|
||||
will-change: opacity;
|
||||
transition: opacity $pswp__controls-transition-duration cubic-bezier(.4, 0, .22, 1);
|
||||
}
|
||||
|
||||
|
||||
/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
|
||||
|
||||
.pswp--has_mouse {
|
||||
.pswp__button--arrow--left,
|
||||
.pswp__button--arrow--right {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.pswp__top-bar,
|
||||
.pswp__caption {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
||||
/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
|
||||
|
||||
.pswp__ui--fit {
|
||||
.pswp__top-bar,
|
||||
.pswp__caption {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
|
||||
|
||||
.pswp__ui--idle {
|
||||
.pswp__top-bar {
|
||||
opacity: 0;
|
||||
}
|
||||
.pswp__button--arrow--left,
|
||||
.pswp__button--arrow--right {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
pswp__ui--hidden class is added when controls are hidden
|
||||
e.g. when user taps to toggle visibility of controls
|
||||
*/
|
||||
|
||||
.pswp__ui--hidden {
|
||||
.pswp__top-bar,
|
||||
.pswp__caption,
|
||||
.pswp__button--arrow--left,
|
||||
.pswp__button--arrow--right {
|
||||
/* Force paint & create composition layer for controls. */
|
||||
opacity: 0.001;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* pswp__ui--one-slide class is added when there is just one item in gallery */
|
||||
|
||||
.pswp__ui--one-slide {
|
||||
.pswp__button--arrow--left,
|
||||
.pswp__button--arrow--right,
|
||||
.pswp__counter {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pswp__element--disabled {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@if $pswp__include-minimal-style==true {
|
||||
.pswp--minimal--dark {
|
||||
.pswp__top-bar {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdb-lightbox {
|
||||
figure {
|
||||
margin: 0;
|
||||
float:left;
|
||||
.img-fluid {
|
||||
display: inline
|
||||
}
|
||||
img {
|
||||
cursor: zoom-in;
|
||||
@include transition(opacity .4s);
|
||||
@include border-radius(0);
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.no-margin {
|
||||
[class*="col-"] {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
[class*="col-"] {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
123
html/sass/mdb/pro/_material-select.scss
Executable file
123
html/sass/mdb/pro/_material-select.scss
Executable file
@@ -0,0 +1,123 @@
|
||||
/***************
|
||||
Material select
|
||||
***************/
|
||||
%user-select-none {
|
||||
-webkit-user-select:none;
|
||||
-moz-user-select:none;
|
||||
-ms-user-select:none;
|
||||
-o-user-select:none;
|
||||
user-select:none;
|
||||
}
|
||||
.select-label {
|
||||
position: absolute;
|
||||
}
|
||||
.select-wrapper {
|
||||
position: relative;
|
||||
input.select-dropdown {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: $input-border-color;
|
||||
outline: none;
|
||||
height: 3rem;
|
||||
line-height: 3rem;
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
margin: 0 0 15px 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
&:disabled {
|
||||
color: $rgba-black-light;
|
||||
border-bottom-color: $rgba-black-light;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
.select-dropdown {
|
||||
@extend %user-select-none;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
padding: 1rem 0;
|
||||
width: 93%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
input {
|
||||
padding-bottom: .4rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span.caret {
|
||||
color: initial;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 16px;
|
||||
font-size: 10px;
|
||||
&.disabled {
|
||||
color: $input-disabled-color;
|
||||
}
|
||||
}
|
||||
& + label {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
font-size: $label-font-size;
|
||||
}
|
||||
i {
|
||||
color: $rgba-black-light;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
display: none !important;
|
||||
&.browser-default {
|
||||
display: block !important;
|
||||
}
|
||||
&:disabled {
|
||||
color: $rgba-black-light;
|
||||
}
|
||||
}
|
||||
|
||||
.select-dropdown {
|
||||
ul {
|
||||
list-style-type:none;
|
||||
padding:0;
|
||||
}
|
||||
li {
|
||||
img {
|
||||
height: $dropdown-item-height - 10;
|
||||
width: $dropdown-item-height - 10;
|
||||
margin: 3px 12px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
&.disabled, &.disabled > span, &.optgroup {
|
||||
color: $rgba-black-light;
|
||||
background-color: transparent!important;
|
||||
cursor: context-menu;
|
||||
}
|
||||
|
||||
&.optgroup {
|
||||
border-top: 1px solid $dropdown-hover-bg-color;
|
||||
&.selected > span {
|
||||
color: rgba(0, 0, 0, .7);
|
||||
}
|
||||
& > span {
|
||||
color: rgba(0, 0, 0, .4);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.multiple-select-dropdown li [type="checkbox"] + label {
|
||||
height: 10px;
|
||||
}
|
||||
107
html/sass/mdb/pro/_modals-pro.scss
Normal file
107
html/sass/mdb/pro/_modals-pro.scss
Normal file
@@ -0,0 +1,107 @@
|
||||
/*********************
|
||||
Modals
|
||||
**********************/
|
||||
|
||||
// Modal Login & Modal Register
|
||||
.modal-ext .modal-content {
|
||||
.modal-header {
|
||||
text-align: center;
|
||||
}
|
||||
.options {
|
||||
float: left;
|
||||
}
|
||||
.modal-body .text-xs-center fieldset {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.call {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.modal-body {
|
||||
padding: 2rem 2rem 1rem 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal Cart
|
||||
.modal-cart {
|
||||
li p {
|
||||
margin: 5px;
|
||||
font-weight: 400;
|
||||
.badge {
|
||||
margin-left: 10px;
|
||||
margin-top: 3px;
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
}
|
||||
.quantity {
|
||||
font-size: 16px;
|
||||
margin-right: 7px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
.cartPageLink {
|
||||
margin-left: 10px;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.total {
|
||||
float: right;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
// Modals normalize
|
||||
.cf-phone {
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
// Container that the modal scrolls within
|
||||
.side-modal {
|
||||
position: fixed;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
// Shell div to position the modal with bottom padding
|
||||
.modal-dialog {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 400px;
|
||||
margin: 10px;
|
||||
@extend .z-depth-1-half;
|
||||
@media (max-width: 760px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// Actual modal
|
||||
.modal-header {
|
||||
padding: 1rem;
|
||||
.heading {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.modal-content {
|
||||
border: none;
|
||||
}
|
||||
// Modal background
|
||||
}
|
||||
|
||||
.side-modal.fade:not(.show) .modal-dialog {
|
||||
-webkit-transform: translate3d(25%, 0, 0);
|
||||
transform: translate3d(25%, 0, 0);
|
||||
}
|
||||
|
||||
// Transparent backdrop
|
||||
.transparent-bd {
|
||||
opacity: 0!important;
|
||||
}
|
||||
102
html/sass/mdb/pro/_msc.scss
Executable file
102
html/sass/mdb/pro/_msc.scss
Executable file
@@ -0,0 +1,102 @@
|
||||
// Miscellaneous
|
||||
|
||||
// Advanced tables
|
||||
.table {
|
||||
a {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
fieldset {
|
||||
margin-bottom: 0;
|
||||
label {
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Product table
|
||||
.product-table {
|
||||
img {
|
||||
max-height: $product-table-img-max-height;
|
||||
min-width: $product-table-img-min-width;
|
||||
}
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
// hide default radio / checkbox
|
||||
%hide-radio-checkbox {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
%base-radio-checkbox-label {
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
font-size: 1rem;
|
||||
/* webkit (safari, chrome) browsers */
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
/* mozilla browsers */
|
||||
/* webkit (konqueror) browsers */
|
||||
-khtml-user-select: none;
|
||||
/* IE10+ */
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
.streak {
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 250px;
|
||||
&.streak-md {
|
||||
height: 400px;
|
||||
@media (max-width: 736px) {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
&.streak-lg {
|
||||
height: 650px;
|
||||
@media (max-width: 450px) {
|
||||
height: 900px;
|
||||
}
|
||||
}
|
||||
&.streak-long {
|
||||
height: 200px;
|
||||
@media (max-width: 450px) {
|
||||
height: 620px;
|
||||
}
|
||||
}
|
||||
&.streak-long-2 {
|
||||
height: 400px;
|
||||
@media (max-width: 450px) {
|
||||
height: 700px;
|
||||
}
|
||||
}
|
||||
&.streak-photo {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
@media (min-width: 1366px) {
|
||||
background-attachment: fixed;
|
||||
}
|
||||
}
|
||||
&.no-flex {
|
||||
padding-top: 3.125rem;
|
||||
padding-bottom: 3.125rem;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Gradients Premium
|
||||
@each $name, $val in $gradients-premium {
|
||||
.#{$name}-gradient {
|
||||
background: linear-gradient(40deg, map-get($val, start), map-get($val, end));
|
||||
}
|
||||
}
|
||||
67
html/sass/mdb/pro/_navbars-pro.scss
Executable file
67
html/sass/mdb/pro/_navbars-pro.scss
Executable file
@@ -0,0 +1,67 @@
|
||||
// Navbars pro
|
||||
.navbar {
|
||||
.nav-item {
|
||||
&.avatar {
|
||||
padding: 0;
|
||||
&.active {
|
||||
background-color: transparent!important;
|
||||
}
|
||||
.dropdown-toggle {
|
||||
padding: 0;
|
||||
img {
|
||||
height: $navbar-avatar-height;
|
||||
}
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.double-nav {
|
||||
z-index: 100;
|
||||
color: $white;
|
||||
@media (max-width: $medium-screen) {
|
||||
padding-top: $navbar-double-small-padding;
|
||||
padding-bottom: $navbar-double-small-padding;
|
||||
}
|
||||
.container {
|
||||
@media (max-width: 768px) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: $white;
|
||||
font-size: $navbar-double-font-size;
|
||||
}
|
||||
.breadcrumb-dn {
|
||||
// margin-top: $navbar-double-small-padding;
|
||||
p {
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
padding-left: $navbar-breadcrumb-dn-padding;
|
||||
}
|
||||
@media (max-width: 993px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.button-collapse {
|
||||
position: absolute;
|
||||
// top: $navbar-button-collapse-top;
|
||||
left: $navbar-button-collapse-left;
|
||||
font-size: $navbar-button-collapse-font-size;
|
||||
@media (min-width: $sidenav-breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: $sidenav-breakpoint) {
|
||||
display: block;
|
||||
position: relative;
|
||||
font-size: $navbar-button-collapse-fs-sm;
|
||||
// margin-top: $navbar-button-collapse-mt;
|
||||
margin-right: $navbar-button-collapse-mx;
|
||||
margin-left: $navbar-button-collapse-mx;
|
||||
}
|
||||
}
|
||||
}
|
||||
7
html/sass/mdb/pro/_parallax.scss
Executable file
7
html/sass/mdb/pro/_parallax.scss
Executable file
@@ -0,0 +1,7 @@
|
||||
// Just Another Parallax
|
||||
.jarallax {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
min-height: 700px;
|
||||
}
|
||||
434
html/sass/mdb/pro/_progress.scss
Executable file
434
html/sass/mdb/pro/_progress.scss
Executable file
@@ -0,0 +1,434 @@
|
||||
// Progress
|
||||
.progress {
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
background-color: #eee;
|
||||
.progress-bar {
|
||||
box-shadow: none;
|
||||
height: 4px;
|
||||
border-radius: 0;
|
||||
background-color: $primary-color-dark;
|
||||
}
|
||||
.progress-bar-animated {
|
||||
transition: width 2s ease-in-out;
|
||||
}
|
||||
.indeterminate {
|
||||
background-color: #90caf9;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: inherit;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
will-change: left, right;
|
||||
// Custom bezier
|
||||
@include animation(indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite);
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: inherit;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
will-change: left, right;
|
||||
// Custom bezier
|
||||
@include animation(indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite);
|
||||
@include animation-delay(1.15s);
|
||||
}
|
||||
}
|
||||
@include keyframes(indeterminate) {
|
||||
0% {
|
||||
left: -35%;
|
||||
right: 100%;
|
||||
}
|
||||
60% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
}
|
||||
@include keyframes(indeterminate-short) {
|
||||
0% {
|
||||
left: -200%;
|
||||
right: 100%;
|
||||
}
|
||||
60% {
|
||||
left: 107%;
|
||||
right: -8%;
|
||||
}
|
||||
100% {
|
||||
left: 107%;
|
||||
right: -8%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*********************
|
||||
CIRCLE
|
||||
**********************/
|
||||
|
||||
|
||||
/*
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
|
||||
|
||||
/**************************/
|
||||
|
||||
|
||||
/* STYLES FOR THE SPINNER */
|
||||
|
||||
|
||||
/**************************/
|
||||
|
||||
|
||||
/*
|
||||
* Constants:
|
||||
* STROKEWIDTH = 3px
|
||||
* ARCSIZE = 270 degrees (amount of circle the arc takes up)
|
||||
* ARCTIME = 1333ms (time it takes to expand and contract arc)
|
||||
* ARCSTARTROT = 216 degrees (how much the start location of the arc
|
||||
* should rotate each time, 216 gives us a
|
||||
* 5 pointed star shape (it's 360/5 * 3).
|
||||
* For a 7 pointed star, we might do
|
||||
* 360/7 * 3 = 154.286)
|
||||
* CONTAINERWIDTH = 28px
|
||||
* SHRINK_TIME = 400ms
|
||||
*/
|
||||
|
||||
.preloader-wrapper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
&.small {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
&.big {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
&.active {
|
||||
/* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
|
||||
animation: container-rotate 1568ms linear infinite;
|
||||
}
|
||||
&.crazy{
|
||||
animation-duration: 333ms;
|
||||
}
|
||||
.spinner-layer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
/**
|
||||
* Patch the gap that appear between the two adjacent div.circle-clipper while the
|
||||
* spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
|
||||
*/
|
||||
.gap-patch {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 45%;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-color: inherit;
|
||||
.circle {
|
||||
width: 1000%;
|
||||
left: -450%;
|
||||
}
|
||||
}
|
||||
|
||||
.circle-clipper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-color: inherit;
|
||||
.circle {
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
border-width: 3px;
|
||||
/* STROKEWIDTH */
|
||||
border-style: solid;
|
||||
border-color: inherit;
|
||||
border-bottom-color: transparent !important;
|
||||
border-radius: 50%;
|
||||
animation: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
&.left .circle {
|
||||
left: 0;
|
||||
border-right-color: transparent !important;
|
||||
transform: rotate(129deg);
|
||||
}
|
||||
&.right .circle {
|
||||
left: -100%;
|
||||
border-left-color: transparent !important;
|
||||
transform: rotate(-129deg);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.spinner-blue,
|
||||
.spinner-blue-only {
|
||||
border-color: #4285f4;
|
||||
}
|
||||
|
||||
.spinner-red,
|
||||
.spinner-red-only {
|
||||
border-color: #db4437;
|
||||
}
|
||||
|
||||
.spinner-yellow,
|
||||
.spinner-yellow-only {
|
||||
border-color: #f4b400;
|
||||
}
|
||||
|
||||
.spinner-green,
|
||||
.spinner-green-only {
|
||||
border-color: #0f9d58;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes container-rotate {
|
||||
to {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
|
||||
*
|
||||
* iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
|
||||
* guarantee that the animation will start _exactly_ after that value. So we avoid using
|
||||
* animation-delay and instead set custom keyframes for each color (as redundant as it
|
||||
* seems).
|
||||
*
|
||||
* We write out each animation in full (instead of separating animation-name,
|
||||
* animation-duration, etc.) because under the polyfill, Safari does not recognize those
|
||||
* specific properties properly, treats them as -webkit-animation, and overrides the
|
||||
* other animation rules. See https://github.com/Polymer/platform/issues/53.
|
||||
*/
|
||||
|
||||
.active {
|
||||
.spinner-layer {
|
||||
&.spinner-blue {
|
||||
/* durations: 4 * ARCTIME */
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
&.spinner-red {
|
||||
/* durations: 4 * ARCTIME */
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
&.spinner-yellow {
|
||||
/* durations: 4 * ARCTIME */
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
&.spinner-green {
|
||||
/* durations: 4 * ARCTIME */
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
&.spinner-blue-only,
|
||||
&.spinner-red-only,
|
||||
&.spinner-yellow-only,
|
||||
&.spinner-green-only,
|
||||
&.spinner-primary-color-only {
|
||||
/* durations: 4 * ARCTIME */
|
||||
opacity: 1;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
}
|
||||
.circle-clipper.left .circle {
|
||||
/* duration: ARCTIME */
|
||||
animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
.circle-clipper.right .circle {
|
||||
/* duration: ARCTIME */
|
||||
animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fill-unfill-rotate {
|
||||
12.5% {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
/* 0.5 * ARCSIZE */
|
||||
25% {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
/* 1 * ARCSIZE */
|
||||
37.5% {
|
||||
transform: rotate(405deg);
|
||||
}
|
||||
/* 1.5 * ARCSIZE */
|
||||
50% {
|
||||
transform: rotate(540deg);
|
||||
}
|
||||
/* 2 * ARCSIZE */
|
||||
62.5% {
|
||||
transform: rotate(675deg);
|
||||
}
|
||||
/* 2.5 * ARCSIZE */
|
||||
75% {
|
||||
transform: rotate(810deg);
|
||||
}
|
||||
/* 3 * ARCSIZE */
|
||||
87.5% {
|
||||
transform: rotate(945deg);
|
||||
}
|
||||
/* 3.5 * ARCSIZE */
|
||||
to {
|
||||
transform: rotate(1080deg);
|
||||
}
|
||||
/* 4 * ARCSIZE */
|
||||
}
|
||||
|
||||
@keyframes blue-fade-in-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
25% {
|
||||
opacity: 1;
|
||||
}
|
||||
26% {
|
||||
opacity: 0;
|
||||
}
|
||||
89% {
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes red-fade-in-out {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
15% {
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
51% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes yellow-fade-in-out {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
76% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes green-fade-in-out {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
65% {
|
||||
opacity: 0;
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes left-spin {
|
||||
from {
|
||||
transform: rotate(130deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(130deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes right-spin {
|
||||
from {
|
||||
transform: rotate(-130deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(-130deg);
|
||||
}
|
||||
}
|
||||
|
||||
#spinnerContainer.cooldown {
|
||||
/* duration: SHRINK_TIME */
|
||||
animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#mdb-preloader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #000;
|
||||
/* change if the mask should have another color then white */
|
||||
z-index: 9998;
|
||||
/* makes sure it stays on top */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
86
html/sass/mdb/pro/_radio.scss
Executable file
86
html/sass/mdb/pro/_radio.scss
Executable file
@@ -0,0 +1,86 @@
|
||||
/**************
|
||||
Radio
|
||||
***************/
|
||||
[type="radio"] {
|
||||
@extend %hide-radio-checkbox;
|
||||
+ label {
|
||||
@extend %base-radio-checkbox-label;
|
||||
@include transition(.28s ease);
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 4px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
z-index: 0;
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
@include transition(.28s ease);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:checked) {
|
||||
+ label:before, + label:after {
|
||||
border-color: $radio-empty-color;
|
||||
}
|
||||
+ label:after {
|
||||
z-index: -1;
|
||||
@include transform(scale(0));
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label:before {
|
||||
border-color: transparent;
|
||||
}
|
||||
+ label:after {
|
||||
border-color: $radio-fill-color;
|
||||
background-color: $radio-fill-color;
|
||||
z-index: 0;
|
||||
@include transform(scale(1.02));
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
|
||||
+ label {
|
||||
color: $input-disabled-color;
|
||||
&:before {
|
||||
background-color: transparent;
|
||||
border-color: $input-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:checked) + label:before {
|
||||
border-color: $input-disabled-color;
|
||||
}
|
||||
|
||||
&:checked + label:after {
|
||||
background-color: $input-disabled-color;
|
||||
border-color: $input-disabled-solid-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.with-gap {
|
||||
|
||||
&:checked {
|
||||
+ label:before {
|
||||
border-color: $radio-fill-color;
|
||||
}
|
||||
+ label:after {
|
||||
@include transform(scale(.5));
|
||||
}
|
||||
&:disabled {
|
||||
+ label:before {
|
||||
border-color: $input-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
136
html/sass/mdb/pro/_range.scss
Executable file
136
html/sass/mdb/pro/_range.scss
Executable file
@@ -0,0 +1,136 @@
|
||||
/***************
|
||||
Range
|
||||
***************/
|
||||
.range-field {
|
||||
position: relative;
|
||||
}
|
||||
input[type=range] {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
margin: 15px 0px;
|
||||
padding: 0;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
+ .thumb {
|
||||
position: absolute;
|
||||
border: none;
|
||||
height: 0;
|
||||
width: 0;
|
||||
border-radius: 50%;
|
||||
background-color: $radio-fill-color;
|
||||
top: 10px;
|
||||
margin-left: -6px;
|
||||
@include transform-origin(50% 50%);
|
||||
@include transform(rotate(-45deg));
|
||||
.value {
|
||||
display: block;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
color: $radio-fill-color;
|
||||
font-size: 0;
|
||||
@include transform(rotate(45deg));
|
||||
}
|
||||
&.active {
|
||||
border-radius: 50% 50% 50% 0;
|
||||
.value {
|
||||
color: $input-bg-color;
|
||||
margin-left: -1px;
|
||||
margin-top: 8px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Browser support */
|
||||
|
||||
// Webkit
|
||||
-webkit-appearance: none;
|
||||
&::-webkit-slider-runnable-track {
|
||||
height: 3px;
|
||||
background: #c2c0c2;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 50%;
|
||||
background-color: $radio-fill-color;
|
||||
transform-origin: 50% 50%;
|
||||
margin: -5px 0 0 0;
|
||||
@include transition(.3s);
|
||||
}
|
||||
|
||||
&:focus::-webkit-slider-runnable-track {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
// Firefox
|
||||
|
||||
border: 1px solid white; /* fix for FF unable to apply focus style bug */
|
||||
&::-moz-range-track { /*required for proper track sizing in FF*/
|
||||
height: 3px;
|
||||
background: #ddd;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
border: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 50%;
|
||||
background: $radio-fill-color;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
&:-moz-focusring { /*hide the outline behind the border*/
|
||||
outline: 1px solid white;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
&:focus::-moz-range-track {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
// IE 10+
|
||||
&::-ms-track {
|
||||
height: 3px;
|
||||
background: transparent; /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
|
||||
border-color: transparent; /*leave room for the larger thumb to overflow with a transparent border */
|
||||
border-width: 6px 0;
|
||||
color: transparent; /*remove default tick marks*/
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
background: #777;
|
||||
}
|
||||
|
||||
&::-ms-fill-upper {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
border: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 50%;
|
||||
background: $radio-fill-color;
|
||||
}
|
||||
|
||||
&:focus::-ms-fill-lower {
|
||||
background: #888;
|
||||
}
|
||||
|
||||
&:focus::-ms-fill-upper {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
}
|
||||
133
html/sass/mdb/pro/_scrollbar.scss
Executable file
133
html/sass/mdb/pro/_scrollbar.scss
Executable file
@@ -0,0 +1,133 @@
|
||||
// Scroll bar
|
||||
|
||||
.ps {
|
||||
touch-action: auto;
|
||||
overflow: hidden !important;
|
||||
&.ps--active-x > .ps__scrollbar-x-rail,
|
||||
&.ps--active-y > .ps__scrollbar-y-rail {
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
}
|
||||
&.ps--active-y > .ps__scrollbar-y-rail {
|
||||
top:0 !important;
|
||||
}
|
||||
&.ps--in-scrolling.ps--x {
|
||||
> .ps__scrollbar-x-rail {
|
||||
background-color: #eee;
|
||||
opacity: 0.9;
|
||||
> .ps__scrollbar-x {
|
||||
background-color: #999;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
> .ps__scrollbar-x-rail {
|
||||
display: none;
|
||||
position: absolute;
|
||||
/* please don't change 'position' */
|
||||
opacity: 0;
|
||||
transition: background-color .2s linear, opacity .2s linear;
|
||||
bottom: 0px;
|
||||
/* there must be 'bottom' for ps__scrollbar-x-rail */
|
||||
height: 15px;
|
||||
> .ps__scrollbar-x {
|
||||
position: absolute;
|
||||
/* please don't change 'position' */
|
||||
background-color: #aaa;
|
||||
border-radius: 6px;
|
||||
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
|
||||
bottom: 2px;
|
||||
/* there must be 'bottom' for ps__scrollbar-x */
|
||||
height: 6px;
|
||||
|
||||
}
|
||||
&:hover > .ps__scrollbar-x,
|
||||
> .ps__scrollbar-x-rail:active > .ps__scrollbar-x {
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
&.ps--in-scrolling.ps--y {
|
||||
> .ps__scrollbar-y-rail {
|
||||
background-color: #eee;
|
||||
opacity: 0.9;
|
||||
> .ps__scrollbar-y {
|
||||
background-color: #999;
|
||||
width: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .ps__scrollbar-y-rail {
|
||||
display: none;
|
||||
position: absolute;
|
||||
/* please don't change 'position' */
|
||||
opacity: 0;
|
||||
transition: background-color .2s linear, opacity .2s linear;
|
||||
right: 0;
|
||||
/* there must be 'right' for ps__scrollbar-y-rail */
|
||||
width: 15px;
|
||||
z-index: 999;
|
||||
> .ps__scrollbar-y {
|
||||
position: absolute;
|
||||
/* please don't change 'position' */
|
||||
background-color: #aaa;
|
||||
border-radius: 6px;
|
||||
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
|
||||
right: 2px;
|
||||
/* there must be 'right' for ps__scrollbar-y */
|
||||
width: 6px;
|
||||
}
|
||||
&:hover > .ps__scrollbar-y,
|
||||
> .ps__scrollbar-y-rail:active > .ps__scrollbar-y {
|
||||
width: 11px;
|
||||
}
|
||||
}
|
||||
&:hover.ps--in-scrolling.ps--x {
|
||||
> .ps__scrollbar-x-rail {
|
||||
background-color: #eee;
|
||||
opacity: 0.9;
|
||||
> .ps__scrollbar-x {
|
||||
background-color: #999;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover.ps--in-scrolling.ps--y {
|
||||
> .ps__scrollbar-y-rail {
|
||||
background-color: #eee;
|
||||
opacity: 0.9;
|
||||
> .ps__scrollbar-y {
|
||||
background-color: #999;
|
||||
width: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover > .ps__scrollbar-x-rail,
|
||||
&:hover > .ps__scrollbar-y-rail {
|
||||
opacity: 0.6;
|
||||
}
|
||||
&:hover {
|
||||
> .ps__scrollbar-x-rail{
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
opacity: 0.9;
|
||||
> .ps__scrollbar-x {
|
||||
background-color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .ps__scrollbar-y-rail {
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
opacity: 0.9;
|
||||
> .ps__scrollbar-y {
|
||||
background-color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
111
html/sass/mdb/pro/_scrollspy.scss
Executable file
111
html/sass/mdb/pro/_scrollspy.scss
Executable file
@@ -0,0 +1,111 @@
|
||||
// Scrollspy
|
||||
.nav-pills .nav-item {
|
||||
a {
|
||||
text-align:left;
|
||||
color: #666;
|
||||
border-radius:0;
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: color($mdb-color, "base");
|
||||
font-weight: 500;
|
||||
border-left: 1px solid color($mdb-color, "base");
|
||||
}
|
||||
&.active {
|
||||
background-color: transparent;
|
||||
color: map-get($mdb-color, "base");
|
||||
border-left: 2px solid color($mdb-color, "base");
|
||||
font-weight: 500;
|
||||
box-shadow:none;
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
color: color($mdb-color, "base");
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills .nav-item+.nav-item {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991px) {
|
||||
.sticky,
|
||||
.sticky-placeholder {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#scrollspy {
|
||||
width: 100%;
|
||||
}
|
||||
@media only screen and (max-width: $medium-screen) {
|
||||
.col-md-4 .sticky, .col-lg-4 .sticky, .col-xl-4 .sticky {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $medium-screen) {
|
||||
.col-md-4 .sticky .col-lg-4 .sticky, .col-xl-4 .sticky {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: $large-screen) {
|
||||
.col-md-4 .sticky {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $sidenav-breakpoint) {
|
||||
.col-md-4 .sticky {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
// Dotted scrollspy
|
||||
|
||||
.dotted-scrollspy {
|
||||
display:block;
|
||||
position: fixed;
|
||||
top:50%;
|
||||
right:0;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(0,0,0,.55);
|
||||
border-radius:2px 0 0 2px;
|
||||
li {
|
||||
display:block;
|
||||
padding:0 16px;
|
||||
&:first-child {
|
||||
padding-top:10px;
|
||||
}
|
||||
&:last-child {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
a {
|
||||
padding:0.5rem;
|
||||
span {
|
||||
display:block;
|
||||
background-color:rgba(255,255,255,.54);
|
||||
width:8px;
|
||||
height:8px;
|
||||
border-radius:50%;
|
||||
}
|
||||
&.active {
|
||||
span {
|
||||
background:#fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollspy-example {
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
height: 200px;
|
||||
padding: 1rem;
|
||||
}
|
||||
6
html/sass/mdb/pro/_sections.scss
Executable file
6
html/sass/mdb/pro/_sections.scss
Executable file
@@ -0,0 +1,6 @@
|
||||
.section {
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
324
html/sass/mdb/pro/_side-nav.scss
Executable file
324
html/sass/mdb/pro/_side-nav.scss
Executable file
@@ -0,0 +1,324 @@
|
||||
// SIDENAV
|
||||
.side-nav {
|
||||
position: fixed;
|
||||
width: 240px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
transform: translateX(-100%);
|
||||
height: 100%;
|
||||
height: calc(100%+ 60px);
|
||||
height: -moz-calc(100%);
|
||||
padding-bottom: 60px;
|
||||
color:#d8d8d8;
|
||||
background-color: #2c2f34;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
z-index: 999;
|
||||
backface-visibility: hidden;
|
||||
overflow: hidden;
|
||||
will-change: transform;
|
||||
backface-visibility: hidden;
|
||||
transform: translateX(-105%);
|
||||
list-style-type:none;
|
||||
padding:0;
|
||||
@extend .white-text;
|
||||
@extend .z-depth-1;
|
||||
> ul {
|
||||
max-height:100vh;
|
||||
}
|
||||
ul {
|
||||
list-style-type:none;
|
||||
li {
|
||||
padding:0;
|
||||
|
||||
}
|
||||
}
|
||||
&.right-aligned {
|
||||
right: 0;
|
||||
left: auto;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.collapsible {
|
||||
margin: 0;
|
||||
padding:0;
|
||||
li {
|
||||
a{
|
||||
&:hover {
|
||||
background-color: rgba(0,0,0,.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
>li {
|
||||
border-radius:2px;
|
||||
a.collapsible-header {
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
&.active {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
ul {
|
||||
padding:0;
|
||||
list-style-type:none;
|
||||
}
|
||||
a {
|
||||
color:#fff;
|
||||
font-weight: 300;
|
||||
font-size: 0.8rem;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
&.active,
|
||||
&:hover {
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
.fa {
|
||||
font-size: 0.8rem;
|
||||
margin-right: 13px;
|
||||
}
|
||||
}
|
||||
.collapsible-body a {
|
||||
padding-left: 47px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
background-color: rgba(0,0,0,.15);
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
// SideNav logo
|
||||
.logo-wrapper {
|
||||
height: 140px;
|
||||
a {
|
||||
height: 140px;
|
||||
width: 240px;
|
||||
padding: 0;
|
||||
}
|
||||
img {
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
padding-top: 20%;
|
||||
padding-bottom: 20%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@media (max-height: $medium-screen) {
|
||||
.logo-wrapper {
|
||||
height: 80px;
|
||||
a {
|
||||
height: 80px;
|
||||
}
|
||||
img {
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
padding-top: 7%;
|
||||
padding-bottom: 7%;
|
||||
}
|
||||
}
|
||||
}
|
||||
// About
|
||||
.about {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid rgba(153, 153, 153, 0.3);
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
//Social
|
||||
.social {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid rgba(153, 153, 153, 0.3);
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-right: 0.6rem;
|
||||
padding-left: 0.6rem;
|
||||
}
|
||||
.fa {
|
||||
color: #dbe4e7;
|
||||
}
|
||||
}
|
||||
//Search form
|
||||
.search-form {
|
||||
padding: 0;
|
||||
input[type=text] {
|
||||
border-bottom: 1px solid #fff;
|
||||
font-weight: 300;
|
||||
padding-left: 30px;
|
||||
@include placeholder {
|
||||
color: #fff!important;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
@extend .white-text;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.sn-avatar-wrapper {
|
||||
padding-left: 33%;
|
||||
padding-right: 33%;
|
||||
padding-top: 10%;
|
||||
img {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-width: 90px;
|
||||
border-radius: 5rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-height: $medium-screen) {
|
||||
.sn-avatar-wrapper {
|
||||
padding-left: 40%;
|
||||
padding-right: 40%;
|
||||
padding-top: 3%;
|
||||
img {
|
||||
max-width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sn-ad-avatar-wrapper {
|
||||
height: auto;
|
||||
margin-bottom: 0;
|
||||
img {
|
||||
max-width: 60px;
|
||||
padding: 20px 10px;
|
||||
float: left;
|
||||
}
|
||||
p {
|
||||
font-size: 15px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.user-box {
|
||||
padding: 20px 10px 0 10px;
|
||||
img {
|
||||
margin: 0 auto 10px auto;
|
||||
max-width: 80px;
|
||||
}
|
||||
}
|
||||
.fa-angle-down {
|
||||
&.rotate-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 13px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.sidenav-bg {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 240px;
|
||||
z-index: -1;
|
||||
background-attachment: fixed;
|
||||
&:after {
|
||||
width: 100%;
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index:-1;
|
||||
margin-bottom: -99999px;
|
||||
padding-bottom: 99999px;
|
||||
}
|
||||
}
|
||||
// Fixed side-nav shown
|
||||
&.fixed {
|
||||
left: 0;
|
||||
transform: translateX(0);
|
||||
position: fixed;
|
||||
// Right Align
|
||||
&.right-aligned {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed sideNav hide on smaller
|
||||
@media #{$hide-sidenav} {
|
||||
&.fixed {
|
||||
transform: translateX(-105%);
|
||||
&.right-aligned {
|
||||
transform: translateX(105%);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.side-nav-light {
|
||||
background-color:#e5e5e5;
|
||||
a {
|
||||
color:#555;
|
||||
font-weight:400;
|
||||
}
|
||||
.social .fa {
|
||||
color:#555;
|
||||
}
|
||||
.search-form input[type=text] {
|
||||
border-bottom-color:rgba(153, 153, 153, 0.3);
|
||||
color:#555 !important;
|
||||
@include placeholder {
|
||||
color:#555 !important;
|
||||
}
|
||||
}
|
||||
.collapsible-body a {
|
||||
background-color: rgba(0,0,0,.1);
|
||||
}
|
||||
.collapsible li .collapsible-header {
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
&.active {
|
||||
color: #4285F4;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Touch interaction
|
||||
.drag-target {
|
||||
height: 100%;
|
||||
width: 10px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
#sidenav-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 120vh;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
z-index: 997;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
//Button Collapse Without Navbar
|
||||
.side-nav .double-navbar .bc-min {
|
||||
padding: 5px 10px;
|
||||
.button-collapse {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
3837
html/sass/mdb/pro/_skins.old.scss
Normal file
3837
html/sass/mdb/pro/_skins.old.scss
Normal file
File diff suppressed because it is too large
Load Diff
243
html/sass/mdb/pro/_skins.scss
Executable file
243
html/sass/mdb/pro/_skins.scss
Executable file
@@ -0,0 +1,243 @@
|
||||
// Sidenav background variants
|
||||
.sn-bg-1 {
|
||||
background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav1.jpg);
|
||||
}
|
||||
|
||||
.sn-bg-2 {
|
||||
background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav2.jpg);
|
||||
}
|
||||
|
||||
.sn-bg-3 {
|
||||
background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav3.jpg);
|
||||
}
|
||||
|
||||
.sn-bg-4 {
|
||||
background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav4.jpg);
|
||||
}
|
||||
|
||||
@each $skin, $data in $skins {
|
||||
.#{$skin}-skin {
|
||||
.gradient {
|
||||
background: map-get($data, skin-gradient-start);
|
||||
/* Old browsers */
|
||||
background: -moz-linear-gradient(-45deg, map-get($data, skin-gradient-start) 0%, map-get($data, skin-gradient-end) 100%);
|
||||
/* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(-45deg, map-get($data, skin-gradient-start) 0%, map-get($data, skin-gradient-end) 100%);
|
||||
/* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(135deg, map-get($data, skin-gradient-start) 0%, map-get($data, skin-gradient-end) 100%);
|
||||
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
}
|
||||
.primary-color {
|
||||
background-color: map-get($data, skin-primary-color)!important;
|
||||
}
|
||||
.navbar {
|
||||
background-color: map-get($data, skin-navbar);
|
||||
color: map-get($data, skin-text);
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.dropdown-menu a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: darken( map-get($data, skin-accent), 5%);
|
||||
}
|
||||
}
|
||||
@if $skin == "white" {
|
||||
a {
|
||||
color: map-get($data, skin-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.double-nav {
|
||||
@if $skin == "white" {
|
||||
a {
|
||||
color: map-get($data, skin-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-footer {
|
||||
background-color: map-get($data, skin-footer-color);
|
||||
}
|
||||
.side-nav {
|
||||
background-color: map-get($data, skin-flat);
|
||||
.logo-wrapper {
|
||||
&> div {
|
||||
background-color: transparent!important;
|
||||
}
|
||||
}
|
||||
.sn-avatar-wrapper img {
|
||||
border: 3px solid darken( map-get($data, skin-accent), 15%);
|
||||
}
|
||||
.social a {
|
||||
@if $skin == "white" {
|
||||
.fa {
|
||||
color: map-get($data, skin-text);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.fa {
|
||||
color: map-get($data, skin-accent) !important;
|
||||
@include transition (all 0.3s linear);
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $skin == "white" {
|
||||
.search-form input[type=text] {
|
||||
color: #424242 !important;
|
||||
border-bottom: 1px solid rgba(153, 153, 153, 0.3);
|
||||
@include placeholder {
|
||||
color: rgba(map-get($data, skin-text), .5) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.collapsible {
|
||||
li {
|
||||
background-color: transparent;
|
||||
@if $skin == "white" {
|
||||
a {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.collapsible-header {
|
||||
color: map-get($data, skin-text);
|
||||
@include transition (all 0.3s linear);
|
||||
&.active {
|
||||
@if $skin == "white" {
|
||||
color: map-get($data, skin-sidenav-item);
|
||||
background-color: transparent;
|
||||
} @else {
|
||||
background-color: map-get($data, skin-sidenav-item-hover);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: map-get($data, skin-sidenav-item-hover);
|
||||
}
|
||||
}
|
||||
.collapsible-body a {
|
||||
color: map-get($data, skin-text);
|
||||
&:hover {
|
||||
color:map-get($data, skin-sn-child);
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $skin == "white" {
|
||||
a {
|
||||
color: map-get($data, skin-text);
|
||||
@include transition (all 0.3s linear);
|
||||
&:hover {
|
||||
background-color: map-get($data, skin-sidenav-item-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fa {
|
||||
color: map-get($data, skin-text);
|
||||
}
|
||||
.sidenav-bg {
|
||||
&:after,
|
||||
&.mask-strong:after,
|
||||
{
|
||||
background: map-get($data, skin-mask-strong);
|
||||
}
|
||||
&.mask-light:after {
|
||||
background: map-get($data, skin-mask-light);
|
||||
}
|
||||
&.mask-slight:after {
|
||||
background: map-get($data, skin-mask-slight);
|
||||
}
|
||||
}
|
||||
}
|
||||
@include make-button('primary', map-get($data, skin-btn-primary));
|
||||
@include make-button('secondary', map-get($data, skin-btn-secondary));
|
||||
@include make-button('default', map-get($data, skin-btn-default));
|
||||
.card .btn-action {
|
||||
background: map-get($data, skin-btn-default);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: lighten( map-get($data, skin-btn-default), 5%)!important;
|
||||
}
|
||||
&.active {
|
||||
background-color: darken( map-get($data, skin-btn-default), 20%)!important;
|
||||
}
|
||||
}
|
||||
// Custom inputs
|
||||
input[type="email"]:focus:not([readonly]),
|
||||
input[type="text"]:focus:not([readonly]),
|
||||
input[type="password"]:focus:not([readonly]),
|
||||
textarea.md-textarea:focus:not([readonly]) {
|
||||
border-color: map-get($data, skin-accent);
|
||||
box-shadow: 0 1px 0 0 map-get($data, skin-accent);
|
||||
&+label {
|
||||
color: map-get($data, skin-accent);
|
||||
}
|
||||
}
|
||||
input[type=checkbox]:checked {
|
||||
&+label {
|
||||
&:before {
|
||||
border-right: 2px solid map-get($data, skin-accent);
|
||||
border-bottom: 2px solid map-get($data, skin-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
input[type=checkbox].filled-in:checked {
|
||||
&+label {
|
||||
&:before {
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
}
|
||||
&:after {
|
||||
background-color: map-get($data, skin-accent);
|
||||
border-color: map-get($data, skin-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.md-form {
|
||||
.prefix {
|
||||
&.active {
|
||||
color: map-get($data, skin-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Select colors */
|
||||
.dropdown-content {
|
||||
li:not(.disabled) {
|
||||
span {
|
||||
color: map-get($data, skin-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-nav-collapse {
|
||||
background-color: map-get($data, skin-navbar);
|
||||
}
|
||||
.carousel-multi-item {
|
||||
.controls-top > a,
|
||||
.carousel-indicators li,
|
||||
.carousel-indicators li.active {
|
||||
background-color: map-get($data, skin-accent);
|
||||
}
|
||||
}
|
||||
// Form-header, card-header
|
||||
.form-header,
|
||||
.card-header {
|
||||
background-color: lighten( map-get($data, skin-accent), 2%);
|
||||
}
|
||||
.spinner-primary-color,
|
||||
.spinner-primary-color-only {
|
||||
border-color: map-get($data, skin-primary-color);
|
||||
}
|
||||
.pagination-primary-color {
|
||||
.page-item.active .page-link,
|
||||
.page-item.active .page-link:focus,
|
||||
.page-item.active .page-link:hover {
|
||||
color: #fff;
|
||||
background-color: map-get($data, skin-primary-color);
|
||||
border-color: map-get($data, skin-primary-color);
|
||||
}
|
||||
.page-link {
|
||||
color: map-get($data, skin-primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
62
html/sass/mdb/pro/_social-buttons.scss
Executable file
62
html/sass/mdb/pro/_social-buttons.scss
Executable file
@@ -0,0 +1,62 @@
|
||||
// Social Buttons
|
||||
|
||||
@each $medium, $color in $social-colors {
|
||||
.btn-#{$medium} {
|
||||
background-color: $color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: lighten($color, 5%);
|
||||
}
|
||||
}
|
||||
.#{$medium}-ic {
|
||||
color: $color!important;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-social-all {
|
||||
background-color: #436281;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #5c7fa3;
|
||||
}
|
||||
i {
|
||||
&.fa {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.counter {
|
||||
position: absolute;
|
||||
margin-left: -23px;
|
||||
margin-top: -1px;
|
||||
background-color: rgb(254, 18, 18);
|
||||
color: #fff;
|
||||
padding: 1px 7px;
|
||||
font-size: 11px;
|
||||
z-index: 2;
|
||||
border-radius: 10rem;
|
||||
@extend .z-depth-1;
|
||||
|
||||
}
|
||||
|
||||
.social-counters {
|
||||
.btn {
|
||||
margin-left: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.icons-sm {
|
||||
padding: .5rem;
|
||||
margin: .5rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
@each $medium, $color in $social-colors {
|
||||
@include make-button($medium, $color);
|
||||
}
|
||||
138
html/sass/mdb/pro/_stepper.scss
Executable file
138
html/sass/mdb/pro/_stepper.scss
Executable file
@@ -0,0 +1,138 @@
|
||||
// Steppers
|
||||
|
||||
// Common styles for steppers
|
||||
|
||||
.stepper {
|
||||
li {
|
||||
a {
|
||||
padding:24px;
|
||||
font-size:14px;
|
||||
text-align:center;
|
||||
.circle {
|
||||
display:inline-block;
|
||||
color:#fff;
|
||||
border-radius:50%;
|
||||
background:rgba(0,0,0,.38);
|
||||
width:24px;
|
||||
height:24px;
|
||||
text-align:center;
|
||||
line-height:24px;
|
||||
margin-right:8px;
|
||||
}
|
||||
.label {
|
||||
display:inline-block;
|
||||
color:rgba(0,0,0,.38);
|
||||
}
|
||||
}
|
||||
&.active, &.completed {
|
||||
a {
|
||||
.circle {
|
||||
@extend .primary-color;
|
||||
}
|
||||
.label {
|
||||
font-weight:600;
|
||||
color:rgba(0,0,0,.87);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.warning {
|
||||
a {
|
||||
.circle {
|
||||
@extend .danger-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal
|
||||
|
||||
.stepper-horizontal {
|
||||
position:relative;
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
li {
|
||||
transition: 0.5s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
a {
|
||||
.label {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
&:not(:last-child):after {
|
||||
content: '';
|
||||
position: relative;
|
||||
flex: 1;
|
||||
margin: 8px 0 0 0;
|
||||
height: 1px;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
&:not(:first-child):before {
|
||||
content: '';
|
||||
position: relative;
|
||||
flex: 1;
|
||||
margin: 8px 0 0 0;
|
||||
height: 1px;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
&:hover {
|
||||
background:#ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical
|
||||
|
||||
.stepper-vertical {
|
||||
position:relative;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content: space-between;
|
||||
li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
position:relative;
|
||||
a {
|
||||
align-self: flex-start;
|
||||
display:flex;
|
||||
position:relative;
|
||||
.circle {
|
||||
order:1;
|
||||
}
|
||||
.label {
|
||||
flex-flow: column nowrap;
|
||||
order:2;
|
||||
}
|
||||
|
||||
}
|
||||
&.completed {
|
||||
a {
|
||||
.label {
|
||||
font-weight:500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.step-content {
|
||||
display:block;
|
||||
margin-top:0;
|
||||
margin-left:50px;
|
||||
padding:15px;
|
||||
p {
|
||||
font-size:0.875rem;
|
||||
}
|
||||
}
|
||||
&:not(:last-child):after {
|
||||
content:" ";
|
||||
position:absolute;
|
||||
width:1px;
|
||||
height:calc(100% - 40px);
|
||||
left:35px;
|
||||
top:55px;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
69
html/sass/mdb/pro/_switch.scss
Executable file
69
html/sass/mdb/pro/_switch.scss
Executable file
@@ -0,0 +1,69 @@
|
||||
/***************
|
||||
Switch
|
||||
***************/
|
||||
|
||||
.switch,
|
||||
.switch * {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
.switch label {
|
||||
cursor: pointer;
|
||||
|
||||
input[type=checkbox] {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
&:checked + .lever {
|
||||
background-color: map-get($switch-colors, "checked-lever-bg");
|
||||
}
|
||||
&:checked + .lever:after {
|
||||
background-color: map-get($switch-colors, "bg");
|
||||
left: 24px;
|
||||
}
|
||||
&:checked:not(:disabled) ~ .lever:active:after {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .4), 0 0 0 15px transparentize(map-get($switch-colors, "bg"), .9);
|
||||
}
|
||||
&:not(:disabled) ~ .lever:active:after {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .4), 0 0 0 15px rgba(0, 0, 0, .08);
|
||||
}
|
||||
&:disabled + .lever {
|
||||
cursor: default;
|
||||
}
|
||||
&:disabled + .lever:after, &:disabled:checked + .lever:after {
|
||||
background-color: $input-disabled-solid-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.lever {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 15px;
|
||||
background-color: map-get($switch-colors, "unchecked-lever-bg");
|
||||
border-radius: 15px;
|
||||
margin-right: 10px;
|
||||
transition: background 0.3s ease;
|
||||
vertical-align: middle;
|
||||
margin: 0 16px;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
background-color: map-get($switch-colors, "unchecked-bg");
|
||||
border-radius: 21px;
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .4);
|
||||
left: -5px;
|
||||
top: -3px;
|
||||
transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
131
html/sass/mdb/pro/_tabs.scss
Executable file
131
html/sass/mdb/pro/_tabs.scss
Executable file
@@ -0,0 +1,131 @@
|
||||
//Navs, Tabs and Pills
|
||||
.nav-tabs {
|
||||
border: 0;
|
||||
padding: $tabs-padding;
|
||||
margin-left: $tabs-margin-x;
|
||||
margin-right: $tabs-margin-x;
|
||||
margin-bottom: $tabs-margin-y;
|
||||
background-color: $default-color;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
@include border-radius(2px);
|
||||
@extend .z-depth-1-half;
|
||||
.nav-item + .nav-item {
|
||||
margin-left: 0;
|
||||
}
|
||||
.nav-link {
|
||||
border: 0;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
.nav-link.active,
|
||||
.nav-item.open .nav-link {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
@include transition(all 1s);
|
||||
@include border-radius(2px);
|
||||
}
|
||||
.nav-link.dropdown-toggle,
|
||||
.nav-item.show .nav-link {
|
||||
background-color: $default-color;
|
||||
color: #fff;
|
||||
@include transition(all 1s);
|
||||
@include border-radius(2px);
|
||||
}
|
||||
}
|
||||
|
||||
.md-pills {
|
||||
border: 0;
|
||||
li {
|
||||
padding: $pills-padding;
|
||||
}
|
||||
.nav-link {
|
||||
@include transition(all 0.4s);
|
||||
@include border-radius(2px);
|
||||
color: #666;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
background-color: $rgba-grey-light;
|
||||
}
|
||||
&.active {
|
||||
color: $white; //comment because when we have background color white, we didnt see a
|
||||
@extend .z-depth-1;
|
||||
background-color: $default-color;
|
||||
}
|
||||
&.active:hover {
|
||||
@extend .z-depth-1-half;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $material-colors {
|
||||
.pills-#{$name} {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
&.active {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabs-#{$name} {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 1rem;
|
||||
padding-top: 2rem;
|
||||
z-index: 1;
|
||||
border-radius: 0 0 0.3rem 0.3rem;
|
||||
&.vertical {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.classic-tabs {
|
||||
@include flexbox();
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
border-radius: 0.3rem 0.3rem 0 0;
|
||||
@media (min-width: 62rem) {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
li {
|
||||
@include flex(1 0 30%);
|
||||
@media (min-width: 62em) {
|
||||
flex:inherit;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
padding: $classic-tabs-padding-y $classic-tabs-padding-x;
|
||||
font-size: $classic-tabs-font-size;
|
||||
text-transform: uppercase;
|
||||
color: $classic-tabs-color;
|
||||
text-align: center;
|
||||
border-radius: 0;
|
||||
&.active {
|
||||
border-bottom: 3px solid;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
@media (min-width: 62em) {
|
||||
&:first-child {
|
||||
margin-left: $classic-tabs-margin-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
@each $name, $color in $ctbc {
|
||||
&.#{$name} {
|
||||
li {
|
||||
a {
|
||||
&.active {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
178
html/sass/mdb/pro/_toasts.scss
Executable file
178
html/sass/mdb/pro/_toasts.scss
Executable file
@@ -0,0 +1,178 @@
|
||||
.toast-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
.toast-message {
|
||||
-ms-word-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.toast-message a,
|
||||
.toast-message label {
|
||||
@extend .white-text;
|
||||
}
|
||||
.toast-message a:hover {
|
||||
color: #cccccc;
|
||||
text-decoration: none;
|
||||
}
|
||||
.toast-close-button {
|
||||
position: relative;
|
||||
right: -0.3em;
|
||||
top: -0.3em;
|
||||
float: right;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
@extend .white-text;
|
||||
-webkit-text-shadow: 0 1px 0 #ffffff;
|
||||
text-shadow: 0 1px 0 #ffffff;
|
||||
opacity: 0.8;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
||||
filter: alpha(opacity=80);
|
||||
}
|
||||
.toast-close-button:hover,
|
||||
.toast-close-button:focus {
|
||||
@extend .black-text;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.4;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
|
||||
filter: alpha(opacity=40);
|
||||
}
|
||||
button.toast-close-button {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.toast-top-center {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.toast-bottom-center {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.toast-top-full-width {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.toast-bottom-full-width {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.toast-top-left {
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
.toast-top-right {
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
.toast-bottom-right {
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
}
|
||||
.toast-bottom-left {
|
||||
bottom: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
#toast-container {
|
||||
position: fixed;
|
||||
z-index: 999999;
|
||||
}
|
||||
#toast-container * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#toast-container > div {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 0 6px;
|
||||
padding: 15px 15px 15px 50px;
|
||||
width: 300px;
|
||||
background-position: 15px center;
|
||||
background-repeat: no-repeat;
|
||||
@extend .z-depth-1;
|
||||
@extend .white-text;
|
||||
opacity: 0.95;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95);
|
||||
filter: alpha(opacity=95);
|
||||
}
|
||||
#toast-container > :hover {
|
||||
transition: .45s;
|
||||
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
opacity: 1;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
filter: alpha(opacity=100);
|
||||
cursor: pointer;
|
||||
}
|
||||
#toast-container.toast-top-center > div,
|
||||
#toast-container.toast-bottom-center > div {
|
||||
width: 300px;
|
||||
margin: auto;
|
||||
}
|
||||
#toast-container.toast-top-full-width > div,
|
||||
#toast-container.toast-bottom-full-width > div {
|
||||
width: 96%;
|
||||
margin: auto;
|
||||
}
|
||||
.toast {
|
||||
background-color: #030303;
|
||||
}
|
||||
.toast-success {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
|
||||
@extend .success-color;
|
||||
}
|
||||
.toast-error {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
|
||||
@extend .danger-color;
|
||||
}
|
||||
.toast-info {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
|
||||
@extend .info-color;
|
||||
}
|
||||
.toast-warning {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
|
||||
@extend .warning-color;
|
||||
}
|
||||
|
||||
.toast-progress {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 4px;
|
||||
background-color: #000000;
|
||||
opacity: 0.4;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
|
||||
filter: alpha(opacity=40);
|
||||
}
|
||||
|
||||
/*Responsive Design*/
|
||||
@media all and (max-width: 240px) {
|
||||
#toast-container > div {
|
||||
padding: 8px 8px 8px 50px;
|
||||
width: 11em;
|
||||
}
|
||||
#toast-container .toast-close-button {
|
||||
right: -0.2em;
|
||||
top: -0.2em;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 241px) and (max-width: 480px) {
|
||||
#toast-container > div {
|
||||
padding: 8px 8px 8px 50px;
|
||||
width: 18em;
|
||||
}
|
||||
#toast-container .toast-close-button {
|
||||
right: -0.2em;
|
||||
top: -0.2em;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 481px) and (max-width: 768px) {
|
||||
#toast-container > div {
|
||||
padding: 15px 15px 15px 50px;
|
||||
width: 25em;
|
||||
}
|
||||
}
|
||||
294
html/sass/mdb/pro/_variables-pro.scss
Executable file
294
html/sass/mdb/pro/_variables-pro.scss
Executable file
@@ -0,0 +1,294 @@
|
||||
// LIGHT BOX
|
||||
$pswp__show-hide-transition-duration: 333ms !default;
|
||||
$pswp__controls-transition-duration: 333ms !default;
|
||||
$pswp__background-color: #000 !default;
|
||||
$pswp__placeholder-color: #222 !default;
|
||||
$pswp__box-sizing-border-box: true !default; // disable .pswp * { box-sizing:border-box } (in case you already have it in your site css)
|
||||
$pswp__root-z-index: 1500 !default;
|
||||
$pswp__assets-path: '' !default; // path to skin assets folder (preloader, PNG and SVG sprite)
|
||||
$pswp__error-text-color: #CCC !default; // "Image not loaded" text color
|
||||
$pswp__include-minimal-style: true !default;
|
||||
|
||||
// Navbars Pro Variables
|
||||
|
||||
// SideNav Variables
|
||||
$sidenav-breakpoint: 1440px !default;
|
||||
$hide-sidenav: "only screen and (max-width : #{$sidenav-breakpoint})" !default;
|
||||
|
||||
// Buttons Pro Varoables
|
||||
$btn-floating-size: 47px !default;
|
||||
$btn-floating-icon-size: 1.25rem !default;
|
||||
$btn-floating-color-raised: $white !default;
|
||||
$btn-floating-color: $secondary-color !default;
|
||||
|
||||
// Chips
|
||||
$chip-height: 32px;
|
||||
$chip-font-size: 13px;
|
||||
$chip-font-weight: 500;
|
||||
$chip-font-color: rgba($black, .6);
|
||||
$chip-line-height: 32px;
|
||||
$chip-padding-right: 12px;
|
||||
$chip-br: 16px;
|
||||
$chip-background-color: map-get($blue-grey, "lighten-5");
|
||||
$chip-margin-bottom: 1rem;
|
||||
$chip-margin-right: 1rem;
|
||||
$chip-img-margin-right: 8px;
|
||||
$chip-img-margin-left: -12px;
|
||||
$chip-img-height: 32px;
|
||||
$chip-img-width: 32px;
|
||||
$chip-close-font-size: 16px;
|
||||
$chip-close-line-height: 32px;
|
||||
$chip-close-padding-left: 8px;
|
||||
|
||||
$chips-margin-bottom: 30px;
|
||||
$chips-min-height: 45px;
|
||||
$chips-padding-bottom: 1rem;
|
||||
$chips-input-font-color: rgba($black, .6);
|
||||
$chips-input-font-size: 13px;
|
||||
$chips-input-font-weight: 500;
|
||||
$chips-input-height: 32px;
|
||||
$chips-input-margin-right: 20px;
|
||||
$chips-input-line-height: 32px;
|
||||
$chips-input-width: 120px;
|
||||
|
||||
// Radio Buttons
|
||||
$radio-fill-color: $primary-color !default;
|
||||
$radio-empty-color: #5a5a5a !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;
|
||||
|
||||
//default time picker
|
||||
$timepicker-pickerbox-breakpoint: 40.125em;
|
||||
$timepicker-pickerlistitem-breakpoint: 46.75em;
|
||||
//default time & date picker
|
||||
$pickerframe-wrap-box-breakpoint: 28.875em;
|
||||
$pickerframe-mb-breakpoint: 40.125em;
|
||||
$pickerframe-pos-breakpoint: 35.875em;
|
||||
//default date picker
|
||||
$pickerweekday-padb-breakpoint: 33.875em;
|
||||
|
||||
// Tabs classic
|
||||
$classic-tabs-padding-y: 20px;
|
||||
$classic-tabs-padding-x: 24px;
|
||||
$classic-tabs-font-size: 13px;
|
||||
$classic-tabs-color: rgba($white, .7);
|
||||
$classic-tabs-margin-left: 56px;
|
||||
|
||||
// Gradients Premium
|
||||
$gradients-premium: (
|
||||
"purple": (
|
||||
"start": #ff6ec4,
|
||||
"end": #7873f5
|
||||
),
|
||||
"peach": (
|
||||
"start": #FFD86F,
|
||||
"end": #FC6262
|
||||
),
|
||||
"aqua": (
|
||||
"start": #2096ff,
|
||||
"end": #05ffa3
|
||||
),
|
||||
"blue": (
|
||||
"start": #45cafc,
|
||||
"end": #303f9f
|
||||
),
|
||||
);
|
||||
|
||||
$skins: (
|
||||
"white": (
|
||||
"skin-primary-color": #4285F4,
|
||||
"skin-navbar": #fff,
|
||||
"skin-footer-color": #6f7178,
|
||||
"skin-accent": #4285F4,
|
||||
"skin-flat": #F9F9F9,
|
||||
"skin-sidenav-item": #4285F4,
|
||||
"skin-sidenav-item-hover": rgba(0,0,0,0.05),
|
||||
"skin-gradient-start": #ababab,
|
||||
"skin-gradient-end": #fff,
|
||||
"skin-mask-slight": rgba(255, 255, 255, 0.5),
|
||||
"skin-mask-light": rgba(255, 255, 255, 0.65),
|
||||
"skin-mask-strong": rgba(255, 255, 255, 0.8),
|
||||
"skin-sn-child": #4285F4,
|
||||
"skin-btn-primary": #4285F4,
|
||||
"skin-btn-secondary": #fc685f,
|
||||
"skin-btn-default": #454545,
|
||||
"skin-text": #424242
|
||||
),
|
||||
"black": (
|
||||
"skin-primary-color": #2AD1A3,
|
||||
"skin-navbar": #222,
|
||||
"skin-footer-color": #222,
|
||||
"skin-accent": #2AD1A3,
|
||||
"skin-flat": #222,
|
||||
"skin-sidenav-item": #2AD1A3,
|
||||
"skin-sidenav-item-hover": #2AD1A3,
|
||||
"skin-gradient-start": #000,
|
||||
"skin-gradient-end": #616161,
|
||||
"skin-mask-slight": rgba(0, 0, 0, 0.5),
|
||||
"skin-mask-light": rgba(0, 0, 0, 0.65),
|
||||
"skin-mask-strong": rgba(0, 0, 0, 0.8),
|
||||
"skin-sn-child": #2AD1A3,
|
||||
"skin-btn-primary": #2AD1A3,
|
||||
"skin-btn-secondary": #0f478a,
|
||||
"skin-btn-default": #222222,
|
||||
"skin-text": #fff
|
||||
),
|
||||
"cyan": (
|
||||
"skin-primary-color": #4fada7,
|
||||
"skin-navbar": #114861,
|
||||
"skin-footer-color": #114861,
|
||||
"skin-accent": #f0b247,
|
||||
"skin-flat": #24879d,
|
||||
"skin-sidenav-item": rgba(29, 65, 82, 0.8),
|
||||
"skin-sidenav-item-hover": rgba(29, 65, 82, 0.8),
|
||||
"skin-gradient-start": #114861,
|
||||
"skin-gradient-end": #45b0c0,
|
||||
"skin-mask-slight": rgba(21, 78, 96, 0.5),
|
||||
"skin-mask-light": rgba(21, 78, 96, 0.65),
|
||||
"skin-mask-strong": rgba(21, 78, 96, 0.8),
|
||||
"skin-sn-child": #ffa742,
|
||||
"skin-btn-primary": #ffa742,
|
||||
"skin-btn-secondary": #45b0c0,
|
||||
"skin-btn-default": #114861,
|
||||
"skin-text": #fff
|
||||
),
|
||||
"mdb": (
|
||||
"skin-primary-color": #33b5e5,
|
||||
"skin-navbar": #243a51,
|
||||
"skin-footer-color": #243a51,
|
||||
"skin-accent": #33b5e5,
|
||||
"skin-flat": #224562,
|
||||
"skin-sidenav-item": rgba(72, 198, 255, 0.8),
|
||||
"skin-sidenav-item-hover": rgba(72, 198, 255, 0.8),
|
||||
"skin-gradient-start": #0e2135,
|
||||
"skin-gradient-end": #2c76b8,
|
||||
"skin-mask-slight": rgba(13, 36, 60, 0.5),
|
||||
"skin-mask-light": rgba(13, 36, 60, 0.65),
|
||||
"skin-mask-strong": rgba(13, 36, 60, 0.8),
|
||||
"skin-sn-child": #67d5ff,
|
||||
"skin-btn-primary": #33b5e5,
|
||||
"skin-btn-secondary": #0e3d67,
|
||||
"skin-btn-default": #1a6398,
|
||||
"skin-text": #fff
|
||||
),
|
||||
"deep-purple": (
|
||||
"skin-primary-color": #d0637c,
|
||||
"skin-navbar": #7f7e91,
|
||||
"skin-footer-color": #7f7e91,
|
||||
"skin-accent": #ac85f0,
|
||||
"skin-flat": #372e5f,
|
||||
"skin-sidenav-item": rgba(176, 139, 240, 0.5),
|
||||
"skin-sidenav-item-hover": rgba(176, 139, 240, 0.5),
|
||||
"skin-gradient-start": #2e1f49,
|
||||
"skin-gradient-end": #a47fe3,
|
||||
"skin-mask-slight": rgba(36, 9, 56, 0.5),
|
||||
"skin-mask-light": rgba(36, 9, 56, 0.65),
|
||||
"skin-mask-strong": rgba(36, 9, 56, 0.88),
|
||||
"skin-sn-child": #c9abfc,
|
||||
"skin-btn-primary": #ac85f0,
|
||||
"skin-btn-secondary": #6e4ca3,
|
||||
"skin-btn-default": #372e5f,
|
||||
"skin-text": #fff
|
||||
),
|
||||
"navy-blue": (
|
||||
"skin-primary-color": #309e9e,
|
||||
"skin-navbar": #353b50,
|
||||
"skin-footer-color": #353b50,
|
||||
"skin-accent": #40c6c6,
|
||||
"skin-flat": #4c5678,
|
||||
"skin-sidenav-item": rgba(37, 207, 207, 0.8),
|
||||
"skin-sidenav-item-hover": rgba(37, 207, 207, 0.8),
|
||||
"skin-gradient-start": #222735,
|
||||
"skin-gradient-end": #4f68a6,
|
||||
"skin-mask-slight": rgba(14, 15, 32, 0.5),
|
||||
"skin-mask-light": rgba(14, 15, 32, 0.65),
|
||||
"skin-mask-strong": rgba(14, 15, 32, 0.8),
|
||||
"skin-sn-child": #40c6c6,
|
||||
"skin-btn-primary": #40c6c6,
|
||||
"skin-btn-secondary": #7e51b4,
|
||||
"skin-btn-default": #293756,
|
||||
"skin-text": #fff
|
||||
),
|
||||
"pink": (
|
||||
"skin-primary-color": #bd5d70,
|
||||
"skin-navbar": #535466,
|
||||
"skin-footer-color": #535466,
|
||||
"skin-accent": #9fa0ae,
|
||||
"skin-flat": #aa5077,
|
||||
"skin-sidenav-item": rgba(0, 0, 0, 0.4),
|
||||
"skin-sidenav-item-hover": rgba(0, 0, 0, 0.4),
|
||||
"skin-gradient-start": #812b5a,
|
||||
"skin-gradient-end": #f28cc0,
|
||||
"skin-mask-slight": rgba(152, 47, 88, 0.5),
|
||||
"skin-mask-light": rgba(152, 47, 88, 0.65),
|
||||
"skin-mask-strong": rgba(152, 47, 88, 0.8),
|
||||
"skin-sn-child": #ffb0e6,
|
||||
"skin-btn-primary": #601f39,
|
||||
"skin-btn-secondary": #e7649d,
|
||||
"skin-btn-default": #535466,
|
||||
"skin-text": #fff
|
||||
),
|
||||
"indigo": (
|
||||
"skin-primary-color": #7f82c5,
|
||||
"skin-navbar": #9095aa,
|
||||
"skin-footer-color": #9095aa,
|
||||
"skin-accent": #fd668c,
|
||||
"skin-flat": #404f9f,
|
||||
"skin-sidenav-item": rgba(250, 80, 121, 0.8),
|
||||
"skin-sidenav-item-hover": rgba(250, 80, 121, 0.8),
|
||||
"skin-gradient-start": #272d6e,
|
||||
"skin-gradient-end": #90a8ff,
|
||||
"skin-mask-slight": rgba(35, 65, 134, 0.5),
|
||||
"skin-mask-light": rgba(35, 65, 134, 0.65),
|
||||
"skin-mask-strong": rgba(35, 65, 134, 0.8),
|
||||
"skin-sn-child": #ff89ac,
|
||||
"skin-btn-primary": #fd668c,
|
||||
"skin-btn-secondary": #3c61ae,
|
||||
"skin-btn-default": #9095aa,
|
||||
"skin-text": #fff
|
||||
),
|
||||
"light-blue": (
|
||||
"skin-primary-color": #3d799c,
|
||||
"skin-navbar": #3f5c80,
|
||||
"skin-footer-color": #3f5c80,
|
||||
"skin-accent": #b4c2c9,
|
||||
"skin-flat": #6a9ed3,
|
||||
"skin-sidenav-item": rgba(29, 54, 86, 0.6),
|
||||
"skin-sidenav-item-hover": rgba(29, 54, 86, 0.6),
|
||||
"skin-gradient-start": #69adf4,
|
||||
"skin-gradient-end": #69adf4,
|
||||
"skin-mask-slight": rgba(87, 134, 180, 0.5),
|
||||
'skin-mask-light': rgba(87, 134, 180, 0.65),
|
||||
"skin-mask-strong": rgba(87, 134, 180, 0.8),
|
||||
"skin-sn-child": #aadeff,
|
||||
"skin-btn-primary": #ff4a67,
|
||||
"skin-btn-secondary": #64c3f0,
|
||||
"skin-btn-default": #2d486a,
|
||||
"skin-text": #fff
|
||||
),
|
||||
"grey": (
|
||||
"skin-primary-color": #2b2b2b,
|
||||
"skin-navbar": #44474b,
|
||||
"skin-footer-color": #44474b,
|
||||
"skin-accent": #75c1f0,
|
||||
"skin-flat": #a5a4a4,
|
||||
"skin-sidenav-item": rgba(0, 0, 0, 0.4),
|
||||
"skin-sidenav-item-hover": rgba(0, 0, 0, 0.4),
|
||||
"skin-gradient-start": #383838,
|
||||
"skin-gradient-end": #a5a4a4,
|
||||
"skin-mask-slight": rgba(121, 121, 121, 0.5),
|
||||
"skin-mask-light": rgba(121, 121, 121, 0.65),
|
||||
"skin-mask-strong": rgba(121, 121, 121, 0.8),
|
||||
"skin-sn-child": #afdffc,
|
||||
"skin-btn-primary": #46aded,
|
||||
"skin-btn-secondary": #7d8488,
|
||||
"skin-btn-default": #353637,
|
||||
"skin-text": #fff
|
||||
)
|
||||
);
|
||||
337
html/sass/mdb/pro/date_picker/_default.date.scss
Executable file
337
html/sass/mdb/pro/date_picker/_default.date.scss
Executable file
@@ -0,0 +1,337 @@
|
||||
/* ==========================================================================
|
||||
$BASE-DATE-PICKER
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* The picker box.
|
||||
*/
|
||||
|
||||
.picker__box {
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
/**
|
||||
* The header containing the month and year stuff.
|
||||
*/
|
||||
.picker__header {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
select {
|
||||
display: inline-block !important;
|
||||
}
|
||||
.picker__date-display {
|
||||
text-align: center;
|
||||
background-color: $datepicker-date-bg;
|
||||
@extend .white-text;
|
||||
padding-bottom: 15px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 1rem;
|
||||
.picker__weekday-display {
|
||||
background-color: $datepicker-weekday-bg;
|
||||
padding: 10px;
|
||||
font-weight: 200;
|
||||
letter-spacing: .5;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.picker__month-display {
|
||||
text-transform: uppercase;
|
||||
font-size: 2rem;
|
||||
}
|
||||
.picker__day-display {
|
||||
font-size: 4.5rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
.picker__year-display {
|
||||
font-size: 1.8rem;
|
||||
color: $datepicker-year;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* The month and year labels.
|
||||
*/
|
||||
.picker__month,
|
||||
.picker__year {
|
||||
display: inline-block;
|
||||
margin-left: .25em;
|
||||
margin-right: .25em;
|
||||
}
|
||||
/**
|
||||
* The month and year selectors.
|
||||
*/
|
||||
.picker__select--month,
|
||||
.picker__select--year {
|
||||
height: 2em;
|
||||
padding: 0;
|
||||
margin-left: .25em;
|
||||
margin-right: .25em;
|
||||
display: inline-block;
|
||||
&:focus {
|
||||
border-color: $datepicker-focus;
|
||||
}
|
||||
}
|
||||
.picker__select--year {
|
||||
width: 30%;
|
||||
}
|
||||
// Modified
|
||||
.picker__select--month.browser-default {
|
||||
display: inline;
|
||||
@extend .white;
|
||||
width: 40%;
|
||||
}
|
||||
.picker__select--year.browser-default {
|
||||
display: inline;
|
||||
@extend .white;
|
||||
width: 25%;
|
||||
}
|
||||
/**
|
||||
* The month navigation buttons.
|
||||
*/
|
||||
.picker__nav--prev,
|
||||
.picker__nav--next {
|
||||
position: absolute;
|
||||
padding: .5em 1.55em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
box-sizing: content-box;
|
||||
bottom: 0;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #000000;
|
||||
background: $datepicker-selected-outfocus;
|
||||
}
|
||||
&:before {
|
||||
content: " ";
|
||||
border-top: .5em solid transparent;
|
||||
border-bottom: .5em solid transparent;
|
||||
border-right: 0.75em solid #676767;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.picker__nav--prev {
|
||||
left: -1em;
|
||||
padding-right: 1.25em;
|
||||
}
|
||||
.picker__nav--next {
|
||||
right: -1em;
|
||||
padding-left: 1.25em;
|
||||
&:before {
|
||||
border-right: 0;
|
||||
border-left: 0.75em solid #676767;
|
||||
}
|
||||
}
|
||||
.picker__nav--disabled,
|
||||
.picker__nav--disabled:hover,
|
||||
.picker__nav--disabled:before,
|
||||
.picker__nav--disabled:before:hover {
|
||||
cursor: default;
|
||||
background: none;
|
||||
border-right-color: #f5f5f5;
|
||||
border-left-color: #f5f5f5;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* The calendar table of dates
|
||||
*/
|
||||
.picker__table {
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
margin-top: .75em;
|
||||
margin-bottom: .5em;
|
||||
th, td {
|
||||
text-align: center;
|
||||
}
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/**
|
||||
* The weekday labels
|
||||
*/
|
||||
.picker__weekday {
|
||||
width: 14%;
|
||||
font-size: .9em;
|
||||
padding-bottom: .25em;
|
||||
color: #999999;
|
||||
font-weight: 500;
|
||||
/* Increase the spacing a tad */
|
||||
@media (min-height: $pickerweekday-padb-breakpoint) {
|
||||
padding-bottom: .5em;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* The days on the calendar
|
||||
*/
|
||||
.picker__day--today {
|
||||
position: relative;
|
||||
letter-spacing: -.3;
|
||||
padding: .75rem 0;
|
||||
font-weight: 400;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.picker__day.picker__day--today {
|
||||
color: $datepicker-selected;
|
||||
}
|
||||
.picker__day--disabled{
|
||||
&:before {
|
||||
border-top-color: #aaaaaa;
|
||||
}
|
||||
}
|
||||
.picker__day--infocus{
|
||||
color: #595959;
|
||||
letter-spacing: -.3;
|
||||
padding: .75rem 0;
|
||||
font-weight: 400;
|
||||
border: 1px solid transparent;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.picker__day--outfocus {
|
||||
display: none;
|
||||
padding: .75rem 0;
|
||||
@extend .white-text;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #dddddd;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.picker__day--highlighted:hover,
|
||||
.picker--focused .picker__day--highlighted {
|
||||
cursor: pointer;
|
||||
}
|
||||
.picker__day--selected,
|
||||
.picker__day--selected:hover,
|
||||
.picker--focused {
|
||||
// Circle background
|
||||
border-radius: 50%;
|
||||
@include transform(scale(.9));
|
||||
background-color: $datepicker-selected;
|
||||
&.picker__day--outfocus {
|
||||
background-color: $datepicker-selected-outfocus;
|
||||
}
|
||||
@extend .white-text;
|
||||
@extend .z-depth-1-half;
|
||||
}
|
||||
.picker__day--disabled,
|
||||
.picker__day--disabled:hover,
|
||||
.picker--focused {
|
||||
background: #f5f5f5;
|
||||
border-color: #f5f5f5;
|
||||
color: #dddddd;
|
||||
cursor: default;
|
||||
}
|
||||
.picker__day--highlighted.picker__day--disabled,
|
||||
.picker__day--highlighted.picker__day--disabled:hover {
|
||||
background: #bbbbbb;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* The footer containing the "today", "clear", and "close" buttons.
|
||||
*/
|
||||
.picker__footer {
|
||||
text-align: right;
|
||||
padding: 5px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.picker__button--today,
|
||||
.picker__button--clear,
|
||||
.picker__button--close {
|
||||
border: 1px solid #ffffff;
|
||||
background: #ffffff;
|
||||
font-size: .8em;
|
||||
padding: 1rem 0 0.7rem 0;
|
||||
font-weight: bold;
|
||||
width: 33%;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
text-transform: uppercase;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #000000;
|
||||
background: #b1dcfb;
|
||||
border-bottom-color: #b1dcfb;
|
||||
}
|
||||
&:focus {
|
||||
background: #b1dcfb;
|
||||
border-color: $datepicker-focus;
|
||||
outline: none;
|
||||
}
|
||||
&:before {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
.picker__button--today,
|
||||
.picker__button--clear{
|
||||
&:before {
|
||||
content: " ";
|
||||
margin-right: .45em;
|
||||
}
|
||||
}
|
||||
.picker__button--today{
|
||||
&:before {
|
||||
top: -0.05em;
|
||||
width: 0;
|
||||
border-top: 0.66em solid #0059bc;
|
||||
border-left: .66em solid transparent;
|
||||
}
|
||||
}
|
||||
.picker__button--clear{
|
||||
&:before {
|
||||
top: -0.25em;
|
||||
width: .66em;
|
||||
border-top: 3px solid #ee2200;
|
||||
}
|
||||
}
|
||||
.picker__button--close{
|
||||
&:before {
|
||||
content: "\D7";
|
||||
top: -0.1em;
|
||||
vertical-align: top;
|
||||
font-size: 1.1em;
|
||||
margin-right: .35em;
|
||||
color: #777777;
|
||||
}
|
||||
}
|
||||
.picker__button--today[disabled],
|
||||
.picker__button--today[disabled]:hover {
|
||||
background: #f5f5f5;
|
||||
border-color: #f5f5f5;
|
||||
color: #dddddd;
|
||||
cursor: default;
|
||||
}
|
||||
.picker__button--today[disabled]:before {
|
||||
border-top-color: #aaaaaa;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
CUSTOM MATERIALIZE STYLES
|
||||
========================================================================== */
|
||||
|
||||
.picker__calendar-container {
|
||||
padding: 0 1rem;
|
||||
thead {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
146
html/sass/mdb/pro/date_picker/_default.scss
Executable file
146
html/sass/mdb/pro/date_picker/_default.scss
Executable file
@@ -0,0 +1,146 @@
|
||||
/* ==========================================================================
|
||||
$BASE-PICKER
|
||||
========================================================================== */
|
||||
/**
|
||||
* Note: the root picker element should *NOT* be styled more than what's here.
|
||||
*/
|
||||
/**
|
||||
* The picker input element.
|
||||
*/
|
||||
.picker__input {
|
||||
cursor: default;
|
||||
}
|
||||
/**
|
||||
* When the picker is opened, the input element is "activated".
|
||||
*/
|
||||
.picker__input.picker__input--active {
|
||||
border-color: #0089ec;
|
||||
}
|
||||
/**
|
||||
* Note: the root picker element should *NOT* be styled more than what's here.
|
||||
*/
|
||||
.picker {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
color: #000000;
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
user-select: none;
|
||||
/**
|
||||
* The holder is the only "scrollable" top-level container element. The holder should overlay the entire screen.
|
||||
*/
|
||||
.picker__holder {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-scrolling: touch;
|
||||
position: fixed;
|
||||
transition: background 0.15s ease-out, top 0s 0.15s;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
/*!
|
||||
* Default mobile-first, responsive styling for pickadate.js
|
||||
* Demo: http://amsul.github.io/pickadate.js
|
||||
*/
|
||||
/**
|
||||
* Note: the root picker element should *NOT* be styled more than what's here.
|
||||
*/
|
||||
/**
|
||||
* Make the holder and frame fullscreen.
|
||||
*/
|
||||
.picker__holder,
|
||||
.picker__frame {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
}
|
||||
/**
|
||||
* The frame that bounds the box contents of the picker.
|
||||
*/
|
||||
.picker__frame {
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
min-width: 256px;
|
||||
max-width: 325px;
|
||||
// picker width
|
||||
width: 300px;
|
||||
max-height: 350px;
|
||||
filter: alpha(opacity=0);
|
||||
opacity: 0;
|
||||
transition: all 0.15s ease-out;
|
||||
@media (min-height: $pickerframe-wrap-box-breakpoint) {
|
||||
overflow: visible;
|
||||
top: auto;
|
||||
bottom: -100%;
|
||||
max-height: 80%;
|
||||
}
|
||||
@media (min-height: $pickerframe-mb-breakpoint) {
|
||||
margin-bottom: 7.5%;
|
||||
}
|
||||
/**
|
||||
* The wrapper sets the stage to vertically align the box contents.
|
||||
*/
|
||||
.picker__wrap {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@media (min-height: $pickerframe-wrap-box-breakpoint) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
/**
|
||||
* The box contains all the picker contents.
|
||||
*/
|
||||
.picker__box {
|
||||
background: #ffffff;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
@media (min-height: $pickerframe-wrap-box-breakpoint) {
|
||||
display: block;
|
||||
border: 1px solid #777777;
|
||||
border-top-color: #898989;
|
||||
border-bottom-width: 0;
|
||||
border-radius: 5px 5px 0 0;
|
||||
box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* When the picker opens...
|
||||
*/
|
||||
.picker--opened {
|
||||
.picker__holder {
|
||||
top: 0;
|
||||
background: transparent;
|
||||
zoom: 1;
|
||||
background: rgba(0, 0, 0, 0.32);
|
||||
transition: background 0.15s ease-out;
|
||||
}
|
||||
.picker__frame {
|
||||
top: 0;
|
||||
filter: alpha(opacity=100);
|
||||
opacity: 1;
|
||||
@media (min-height: $pickerframe-pos-breakpoint) {
|
||||
top: 10%;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* For `large` screens, transform into an inline picker.
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
CUSTOM MATERIALIZE STYLES
|
||||
========================================================================== */
|
||||
|
||||
.picker__input.picker__input--active {
|
||||
border-color: color("blue", "lighten-5");
|
||||
}
|
||||
419
html/sass/mdb/pro/date_picker/_default.time.scss
Executable file
419
html/sass/mdb/pro/date_picker/_default.time.scss
Executable file
@@ -0,0 +1,419 @@
|
||||
/* ==========================================================================
|
||||
$BASE-TIME-PICKER
|
||||
========================================================================== */
|
||||
/**
|
||||
* The list of times.
|
||||
*/
|
||||
.picker__list {
|
||||
list-style: none;
|
||||
padding: 0.75em 0 4.2em;
|
||||
margin: 0;
|
||||
}
|
||||
/**
|
||||
* The times on the clock.
|
||||
*/
|
||||
.picker__list-item {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
border-top: 1px solid #dddddd;
|
||||
margin-bottom: -1px;
|
||||
position: relative;
|
||||
@extend .white;
|
||||
padding: .75em 1.25em;
|
||||
@media (min-height: $timepicker-pickerlistitem-breakpoint) {
|
||||
padding: .5em 1em;
|
||||
}
|
||||
/* Hovered time */
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
@extend .black;
|
||||
background: #b1dcfb;
|
||||
border-color: #0089ec;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
/* Highlighted and hovered/focused time */
|
||||
.picker__list-item--highlighted {
|
||||
border-color: #0089ec;
|
||||
z-index: 10;
|
||||
}
|
||||
.picker__list-item--highlighted:hover,
|
||||
.picker--focused .picker__list-item--highlighted {
|
||||
cursor: pointer;
|
||||
color: #000000;
|
||||
background: #b1dcfb;
|
||||
}
|
||||
/* Selected and hovered/focused time */
|
||||
.picker__list-item--selected,
|
||||
.picker__list-item--selected:hover,
|
||||
.picker--focused .picker__list-item--selected {
|
||||
background: #0089ec;
|
||||
@extend .white-text;
|
||||
z-index: 10;
|
||||
}
|
||||
/* Disabled time */
|
||||
.picker__list-item--disabled,
|
||||
.picker__list-item--disabled:hover,
|
||||
.picker--focused .picker__list-item--disabled {
|
||||
background: #f5f5f5;
|
||||
border-color: #f5f5f5;
|
||||
color: #dddddd;
|
||||
cursor: default;
|
||||
border-color: #dddddd;
|
||||
z-index: auto;
|
||||
}
|
||||
/**
|
||||
* The clear button
|
||||
*/
|
||||
.picker--time {
|
||||
.picker__button--clear {
|
||||
display: block;
|
||||
width: 80%;
|
||||
margin: 1em auto 0;
|
||||
padding: 1em 1.25em;
|
||||
background: none;
|
||||
border: 0;
|
||||
font-weight: 500;
|
||||
font-size: .67em;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: #666;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #000000;
|
||||
background: #b1dcfb;
|
||||
background: #ee2200;
|
||||
border-color: #ee2200;
|
||||
cursor: pointer;
|
||||
@extend .white-text;
|
||||
outline: none;
|
||||
&:before {
|
||||
@extend .white-text;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
top: -0.25em;
|
||||
color: #666;
|
||||
font-size: 1.25em;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
$DEFAULT-TIME-PICKER
|
||||
========================================================================== */
|
||||
/**
|
||||
* The frame the bounds the time picker.
|
||||
*/
|
||||
.picker--time .picker__frame {
|
||||
min-width: 256px;
|
||||
max-width: 320px;
|
||||
}
|
||||
/**
|
||||
* The picker box.
|
||||
*/
|
||||
.picker--time .picker__box {
|
||||
font-size: 1em;
|
||||
background: #f2f2f2;
|
||||
padding: 0;
|
||||
@media (min-height: $timepicker-pickerbox-breakpoint) {
|
||||
margin-bottom: 5em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*!
|
||||
* ClockPicker v0.0.7 for jQuery (http://weareoutman.github.io/clockpicker/)
|
||||
* Copyright 2014 Wang Shenwei.
|
||||
* Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
|
||||
*
|
||||
* Further modified
|
||||
* Copyright 2015 Ching Yaw Hao.
|
||||
*
|
||||
* Bootstrap v3.1.1 (http://getbootstrap.com)
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
.picker__date-display {
|
||||
text-align: center;
|
||||
background-color: $datepicker-date-bg;
|
||||
@extend .white-text;
|
||||
padding-bottom: 15px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 1rem;
|
||||
.clockpicker-display {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
height: 85px;
|
||||
font-size: 70px;
|
||||
padding: 10px;
|
||||
padding-bottom: 0px;
|
||||
color: #b2dfdb;
|
||||
.clockpicker-display-column {
|
||||
float: left;
|
||||
.clockpicker-span-hours.text-primary, .clockpicker-span-minutes.text-primary, #click-am.text-primary, #click-pm.text-primary {
|
||||
animation-name: pulse;
|
||||
@extend .white-text;
|
||||
}
|
||||
#click-am, #click-pm {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.clockpicker-display-am-pm {
|
||||
padding-left: 5px;
|
||||
vertical-align: bottom;
|
||||
height: 85px;
|
||||
.clockpicker-span-am-pm {
|
||||
display: inline-block;
|
||||
font-size: 23px;
|
||||
line-height: 25px;
|
||||
color: #b2dfdb;
|
||||
}
|
||||
}
|
||||
.clockpicker-span-hours, .clockpicker-span-minutes {
|
||||
animation-duration: 500ms;
|
||||
animation-fill-mode: both;
|
||||
transition: color 500ms;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.clockpicker-display {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
height: 85px;
|
||||
font-size: 70px;
|
||||
padding: 10px;
|
||||
padding-bottom: 0px;
|
||||
color: #b2dfdb;
|
||||
.clockpicker-display-column {
|
||||
float: left;
|
||||
.clockpicker-span-hours.text-primary, .clockpicker-span-minutes.text-primary, #click-am.text-primary, #click-pm.text-primary {
|
||||
animation-name: pulse;
|
||||
@extend .white-text;
|
||||
}
|
||||
#click-am, #click-pm {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.clockpicker-display-am-pm {
|
||||
padding-left: 5px;
|
||||
vertical-align: bottom;
|
||||
height: 85px;
|
||||
.clockpicker-span-am-pm {
|
||||
display: inline-block;
|
||||
font-size: 23px;
|
||||
line-height: 25px;
|
||||
color: #b2dfdb;
|
||||
}
|
||||
}
|
||||
.clockpicker-span-hours, .clockpicker-span-minutes {
|
||||
animation-duration: 500ms;
|
||||
animation-fill-mode: both;
|
||||
transition: color 500ms;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
from {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
50% {
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
to {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.clockpicker-moving {
|
||||
cursor: move;
|
||||
}
|
||||
.clockpicker-plate {
|
||||
background-color: #eeeeee;
|
||||
border-radius: 50%;
|
||||
width: 270px;
|
||||
height: 270px;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
margin-top: 20px;
|
||||
/* Disable text selection highlighting. Thanks to Hermanya */
|
||||
user-select: none;
|
||||
.clockpicker-canvas,
|
||||
.clockpicker-dial {
|
||||
width: 270px;
|
||||
height: 270px;
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
}
|
||||
.clockpicker-dial {
|
||||
transition: transform 350ms, opacity 350ms;
|
||||
.clockpicker-tick {
|
||||
border-radius: 50%;
|
||||
color: #666;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
transition: background-color 300ms;
|
||||
background-color: rgba(0, 150, 136, 0);
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: rgba(0, 150, 136, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
.clockpicker-minutes {
|
||||
visibility: hidden;
|
||||
}
|
||||
.clockpicker-dial-out {
|
||||
opacity: 0;
|
||||
}
|
||||
.clockpicker-hours.clockpicker-dial-out {
|
||||
transform: scale(1.2, 1.2);
|
||||
}
|
||||
.clockpicker-minutes.clockpicker-dial-out {
|
||||
transform: scale(.8, .8);
|
||||
}
|
||||
}
|
||||
|
||||
.clockpicker-canvas {
|
||||
transition: opacity 300ms;
|
||||
line {
|
||||
stroke: rgba(0, 150, 136, 0.25);
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
.clockpicker-canvas-out {
|
||||
opacity: 0.25;
|
||||
}
|
||||
.clockpicker-canvas-bearing {
|
||||
stroke: none;
|
||||
fill: rgba(0, 77, 64, 0.75);
|
||||
}
|
||||
.clockpicker-canvas-fg {
|
||||
stroke: none;
|
||||
fill: rgba(0, 77, 64, 0);
|
||||
&.active {
|
||||
fill: rgba(0, 77, 64, 0.5);
|
||||
}
|
||||
}
|
||||
.clockpicker-canvas-bg {
|
||||
stroke: none;
|
||||
fill: rgba(0, 150, 136, 0.25);
|
||||
}
|
||||
.clockpicker-canvas-bg-trans {
|
||||
fill: rgba(0, 150, 136, 0.25);
|
||||
}
|
||||
|
||||
.clockpicker-am-pm-block{
|
||||
margin-top: -10px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
.clockpicker-button.am-button {
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
float: left;
|
||||
}
|
||||
.clockpicker-button.pm-button {
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-floating.btn-flat {
|
||||
padding: 0;
|
||||
background: $primary-color;
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: lighten( $primary-color, 5%)!important;
|
||||
}
|
||||
&.active {
|
||||
background-color: darken( $primary-color, 20%)!important;
|
||||
@extend .z-depth-1-half;
|
||||
}
|
||||
}
|
||||
|
||||
.picker__footer {
|
||||
.clockpicker-button {
|
||||
margin: auto;
|
||||
margin-top: 15px;
|
||||
background-color: transparent;
|
||||
text-transform: uppercase;
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
&:active {
|
||||
background-color: rgba(0, 150, 136, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.darktheme {
|
||||
.picker__box {
|
||||
background-color: #212121;
|
||||
.picker__date-display {
|
||||
background-color: transparent;
|
||||
.clockpicker-display {
|
||||
@extend .white-text;
|
||||
.clockpicker-span-am-pm {
|
||||
@extend .white-text;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.picker__calendar-container{
|
||||
.clockpicker-plate {
|
||||
background-color: transparent;
|
||||
.clockpicker-tick {
|
||||
@extend .white-text;
|
||||
background-color: rgba(255, 64, 129, 0);
|
||||
&.active, &:hover {
|
||||
background-color: rgba(255, 64, 129, 0.25);
|
||||
}
|
||||
}
|
||||
.clockpicker-canvas line {
|
||||
stroke: rgba(255, 64, 129, 0.25);
|
||||
}
|
||||
.clockpicker-canvas-bearing {
|
||||
fill: white;
|
||||
}
|
||||
.clockpicker-canvas-fg {
|
||||
fill: rgba(255, 64, 129, 0);
|
||||
&.active {
|
||||
fill: rgba(255, 64, 129, 0.5);
|
||||
}
|
||||
}
|
||||
.clockpicker-canvas-bg {
|
||||
fill: rgba(255, 64, 129, 0.25);
|
||||
}
|
||||
.clockpicker-canvas-bg-trans {
|
||||
fill: rgba(255, 64, 129, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
.picker__footer{
|
||||
button {
|
||||
@extend .white-text;
|
||||
}
|
||||
.clockpicker-button:active {
|
||||
background-color: rgba(255, 64, 129, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
75
html/sass/mdb/pro/sections/_blog.scss
Executable file
75
html/sass/mdb/pro/sections/_blog.scss
Executable file
@@ -0,0 +1,75 @@
|
||||
.section .section-heading {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
text-align: center;
|
||||
h1 {
|
||||
@extend .h1-responsive;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 3rem;
|
||||
margin-right: 15%;
|
||||
margin-left: 15%;
|
||||
}
|
||||
}
|
||||
|
||||
.section-description {
|
||||
color: #757575;
|
||||
margin-bottom: 4rem;
|
||||
margin-left: 15%;
|
||||
margin-right: 15%;
|
||||
text-align: center;
|
||||
@media (max-width: $medium-screen) {
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
}
|
||||
}
|
||||
|
||||
.section-blog-fw {
|
||||
.view {
|
||||
img {
|
||||
@extend .img-fluid;
|
||||
@include border-radius(2px);
|
||||
}
|
||||
}
|
||||
.jumbotron {
|
||||
@extend .m-1;
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
@extend .h2-responsive;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 300;
|
||||
a {
|
||||
color: #424242;
|
||||
@include transition (0.2s);
|
||||
&:hover {
|
||||
color: #616161;
|
||||
@include transition (0.2s);
|
||||
}
|
||||
}
|
||||
}
|
||||
.excerpt,
|
||||
.post-text {
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
text-align: justify;
|
||||
@media (max-width: $medium-screen) {
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.hr-width {
|
||||
@media (min-width: 1200px) {
|
||||
width: 83%;
|
||||
}
|
||||
}
|
||||
68
html/sass/mdb/pro/sections/_contacts.scss
Executable file
68
html/sass/mdb/pro/sections/_contacts.scss
Executable file
@@ -0,0 +1,68 @@
|
||||
.form-header {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin-top: -50px;
|
||||
margin-bottom: 3rem;
|
||||
padding: 1rem;
|
||||
@extend .z-depth-1-half;
|
||||
@include border-radius(2px);
|
||||
}
|
||||
|
||||
.card .card-body h3 {
|
||||
margin-bottom: 0;
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
.md-form {
|
||||
.prefix.grey-text {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.section .contact-icons {
|
||||
text-align: center;
|
||||
list-style-type:none;
|
||||
padding:0;
|
||||
li {
|
||||
margin-bottom: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
section{
|
||||
.form{
|
||||
form{
|
||||
.btn-floating{
|
||||
float: right;
|
||||
position: relative;
|
||||
bottom: 3rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contact{
|
||||
background-color: #103f6d;
|
||||
height: 100%;
|
||||
@extend .white-text;
|
||||
.contact-icons{
|
||||
li{
|
||||
i{
|
||||
float: left;
|
||||
clear: both;
|
||||
margin-right: 1rem;
|
||||
&.fa{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
p{
|
||||
padding-top: .5rem;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
i{
|
||||
color: #6b89a5;
|
||||
}
|
||||
}
|
||||
}
|
||||
23
html/sass/mdb/pro/sections/_features.scss
Executable file
23
html/sass/mdb/pro/sections/_features.scss
Executable file
@@ -0,0 +1,23 @@
|
||||
// Features
|
||||
.feature-box {
|
||||
text-align: center;
|
||||
.feature-title {
|
||||
font-weight: 500;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.features-big {
|
||||
.feature-title {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.fa {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
.features-small {
|
||||
text-align: left;
|
||||
.fa {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
18
html/sass/mdb/pro/sections/_form-sets.scss
Normal file
18
html/sass/mdb/pro/sections/_form-sets.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
// 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;
|
||||
}
|
||||
62
html/sass/mdb/pro/sections/_magazine.scss
Executable file
62
html/sass/mdb/pro/sections/_magazine.scss
Executable file
@@ -0,0 +1,62 @@
|
||||
// Magazine components
|
||||
.magazine-section {
|
||||
.view {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.single-news {
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
margin-bottom: 1.5rem;
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
@media (max-width: 772px) {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.news-data {
|
||||
margin-bottom: 5rem;
|
||||
h6 {
|
||||
float: left;
|
||||
}
|
||||
p {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
a {
|
||||
color: #424242;
|
||||
font-weight: 300;
|
||||
margin-bottom: 1rem;
|
||||
&:hover {
|
||||
color: #616161;
|
||||
@include transition (0.2s);
|
||||
}
|
||||
.fa-angle-right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: #757575;
|
||||
}
|
||||
strong{
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
&.multi-columns {
|
||||
h6 {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.view {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.single-news {
|
||||
padding-bottom: 1rem;
|
||||
strong {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
137
html/sass/mdb/pro/sections/_pricing.scss
Executable file
137
html/sass/mdb/pro/sections/_pricing.scss
Executable file
@@ -0,0 +1,137 @@
|
||||
// Pricing
|
||||
//Pricing Card
|
||||
.pricing-card {
|
||||
text-align: center;
|
||||
p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
ul {
|
||||
list-style-type:none;
|
||||
padding:0;
|
||||
}
|
||||
.header {
|
||||
border-radius:6px 6px 0 0;
|
||||
color: $white;
|
||||
@extend .z-depth-1-half;
|
||||
h4{
|
||||
padding: 2.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.price {
|
||||
position: relative;
|
||||
padding-top: 3rem;
|
||||
h1, h2 {
|
||||
font-size: 5rem;
|
||||
padding: 1.5rem;
|
||||
font-weight:300;
|
||||
&:before {
|
||||
content: "$";
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
margin-left: -1.2rem;
|
||||
margin-top: 0.7rem;
|
||||
}
|
||||
&:after {
|
||||
content: "/mo";
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
.version {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: $rgba-black-light;
|
||||
padding: 1rem;
|
||||
@extend .z-depth-1;
|
||||
h5 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.heading {
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
font-weight:400;
|
||||
}
|
||||
}
|
||||
.striped {
|
||||
padding: 0.6rem;
|
||||
.fa {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.fa-check {
|
||||
color: green;
|
||||
}
|
||||
.fa-times {
|
||||
color: red;
|
||||
}
|
||||
li {
|
||||
border-bottom: 1px solid rgba(153, 153, 153, 0.298039);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
// Card overlay
|
||||
&.card-overlay {
|
||||
display: block;
|
||||
color: $white;
|
||||
p {
|
||||
color: $white;
|
||||
}
|
||||
.price {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
.green-striped {
|
||||
li {
|
||||
border-color: #33c28a ;
|
||||
}
|
||||
}
|
||||
.orange-striped {
|
||||
li {
|
||||
border-color: #e97d63 ;
|
||||
}
|
||||
}
|
||||
.purple-striped {
|
||||
li {
|
||||
border-color: #963c94 ;
|
||||
}
|
||||
}
|
||||
.card-background {
|
||||
background-color: #28283f;
|
||||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
// Additional pricing cards
|
||||
.card {
|
||||
.card-circle {
|
||||
border: 2px solid #e0e0e0;
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
margin-bottom: 2rem;
|
||||
@extend .flex-center;
|
||||
border-radius: 50%;
|
||||
.fa {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.naked-card {
|
||||
h5 {
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
.price {
|
||||
padding-top: 0rem;
|
||||
}
|
||||
li p {
|
||||
color: color($grey, "darken-1");
|
||||
strong {
|
||||
color: color($grey, "darken-2");
|
||||
}
|
||||
}
|
||||
}
|
||||
18
html/sass/mdb/pro/sections/_projects.scss
Executable file
18
html/sass/mdb/pro/sections/_projects.scss
Executable file
@@ -0,0 +1,18 @@
|
||||
.card-body{
|
||||
h3,
|
||||
h5 {
|
||||
font-weight: 400;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: 500;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
193
html/sass/mdb/pro/sections/_social.scss
Executable file
193
html/sass/mdb/pro/sections/_social.scss
Executable file
@@ -0,0 +1,193 @@
|
||||
//Social feed
|
||||
.mdb-feed {
|
||||
margin: 1rem 0 1rem 0;
|
||||
.news {
|
||||
display: flex;
|
||||
.label {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
align-self: stretch;
|
||||
width: 2.5rem;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.excerpt {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
align-self: stretch;
|
||||
word-wrap: break-word;
|
||||
margin: 0 0 1.2rem 1.2rem;
|
||||
.brief {
|
||||
padding-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
a {
|
||||
color: $primary-color;
|
||||
}
|
||||
.name {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.date {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
padding-left: 0.7rem;
|
||||
font-weight: 300;
|
||||
font-size: 0.86rem;
|
||||
color: map-get($grey, "base");
|
||||
}
|
||||
}
|
||||
.added-images {
|
||||
margin-bottom: 0.6rem;
|
||||
img {
|
||||
display: inline-block;
|
||||
margin-right: 0.3rem;
|
||||
width: 7rem;
|
||||
}
|
||||
}
|
||||
.added-text {
|
||||
margin-bottom: 0.6rem;
|
||||
max-width: 450px;
|
||||
}
|
||||
.feed-footer {
|
||||
.like {
|
||||
font-weight: 300;
|
||||
font-size: 0.86rem;
|
||||
color: map-get($grey, "base");
|
||||
&:hover {
|
||||
.fa {
|
||||
color: map-get($red, "base");
|
||||
transition: 0.4s;
|
||||
}
|
||||
span {
|
||||
color: $black;
|
||||
transition: 0.4s;
|
||||
}
|
||||
}
|
||||
.fa {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
span a {
|
||||
padding-right: 0.3rem;
|
||||
color: $primary-color;
|
||||
cursor: default;
|
||||
}
|
||||
.thumbs {
|
||||
.fa {
|
||||
color: map-get($grey, "base");
|
||||
transition: 0.4s;
|
||||
&:hover {
|
||||
color: map-get($grey, "darken-1");
|
||||
}
|
||||
}
|
||||
.fa-thumbs-up {
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
}
|
||||
.comment {
|
||||
color: map-get($grey, "base");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Card
|
||||
.card-personal {
|
||||
.card-body {
|
||||
.card-title {
|
||||
font-weight: 400;
|
||||
&.title-one {
|
||||
@include transition(0.4s);
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-title {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.card-meta {
|
||||
font-weight: 300;
|
||||
font-size: 0.86rem;
|
||||
color: map-get($grey, "darken-1");
|
||||
.fa {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
span {
|
||||
@include transition(0.5s);
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//News card
|
||||
.news-card {
|
||||
.content {
|
||||
.right-side-meta {
|
||||
float: right;
|
||||
font-weight: 300;
|
||||
color: map-get($grey, "base");
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
.avatar-img {
|
||||
width: 2rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
img {
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.social-meta {
|
||||
.fa {
|
||||
padding-right: 0.6rem;
|
||||
}
|
||||
.fa-heart-o {
|
||||
cursor: pointer;
|
||||
color: rgba($black, .4);
|
||||
@include transition(0.53s);
|
||||
&:hover {
|
||||
color: map-get($red, "base");
|
||||
}
|
||||
}
|
||||
span {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.md-form {
|
||||
margin-top: 1.3rem;
|
||||
margin-bottom: 0.3rem;
|
||||
.prefix {
|
||||
font-size: 1.5rem;
|
||||
margin-left: 0.2rem;
|
||||
color: rgba($black, .4);
|
||||
~input,
|
||||
.md-form .prefix~textarea {
|
||||
width: calc(100% - 4rem);
|
||||
}
|
||||
}
|
||||
.prefix.active {
|
||||
color: rgba($black, .4);
|
||||
}
|
||||
.form-control {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0.5rem;
|
||||
margin-left: 3rem;
|
||||
margin-bottom: 0;
|
||||
height: 1.3rem;
|
||||
border-bottom: 1px solid rgba($black, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-radius {
|
||||
border-radius: 0!important;
|
||||
}
|
||||
37
html/sass/mdb/pro/sections/_team.scss
Executable file
37
html/sass/mdb/pro/sections/_team.scss
Executable file
@@ -0,0 +1,37 @@
|
||||
// Team
|
||||
.section {
|
||||
&.team-section {
|
||||
.avatar {
|
||||
margin-bottom: 2rem;
|
||||
@extend .flex-center;
|
||||
height: auto;
|
||||
.rounded-circle {
|
||||
max-width: 170px;
|
||||
}
|
||||
img{
|
||||
max-width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.title-color {
|
||||
font-weight: 400;
|
||||
color: rgba($black, .6);
|
||||
}
|
||||
h4,h5 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.grey-text {
|
||||
color: #6e6e6e !important;
|
||||
}
|
||||
}
|
||||
h4{
|
||||
font-weight: 400;
|
||||
}
|
||||
.card-wrapper{
|
||||
.fa-repeat, .fa-undo {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
55
html/sass/mdb/pro/sections/_templates.scss
Executable file
55
html/sass/mdb/pro/sections/_templates.scss
Executable file
@@ -0,0 +1,55 @@
|
||||
// Templates
|
||||
// Fixed SideNav
|
||||
.fixed-sn {
|
||||
.double-nav,
|
||||
main,
|
||||
footer {
|
||||
padding-left: 240px;
|
||||
}
|
||||
main {
|
||||
padding-top: 5.5rem;
|
||||
}
|
||||
@media (max-width: $sidenav-breakpoint) {
|
||||
.double-nav,
|
||||
main,
|
||||
footer {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: $small-screen) {
|
||||
main,
|
||||
.page-footer .container-fluid {
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
}
|
||||
}
|
||||
@media (min-width: $medium-screen) {
|
||||
main,
|
||||
.page-footer .container-fluid {
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
}
|
||||
}
|
||||
@media (min-width: $large-screen) {
|
||||
main,
|
||||
.page-footer .container-fluid {
|
||||
margin-left: 6%;
|
||||
margin-right: 6%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hidden SideNav
|
||||
.hidden-sn {
|
||||
main {
|
||||
padding-top: 5.5rem;
|
||||
}
|
||||
.button-collapse {
|
||||
display: block;
|
||||
position: relative;
|
||||
font-size: 1.4rem;
|
||||
margin-right: 10px;
|
||||
margin-left: -6px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
54
html/sass/mdb/pro/sections/_testimonials.scss
Executable file
54
html/sass/mdb/pro/sections/_testimonials.scss
Executable file
@@ -0,0 +1,54 @@
|
||||
// Testimonials
|
||||
.testimonial-carousel {
|
||||
.carousel-control {
|
||||
background-image: none;
|
||||
top:50%;
|
||||
transform: translateY(-35%);
|
||||
&:before {
|
||||
font-size: 5rem;
|
||||
color: rgba($black,.6);
|
||||
}
|
||||
&:hover {
|
||||
&:before {
|
||||
color: $black;
|
||||
@include transition(0.4s);
|
||||
}
|
||||
}
|
||||
&.left {
|
||||
left:6%;
|
||||
&:before {
|
||||
content: "\2039";
|
||||
}
|
||||
}
|
||||
&.right {
|
||||
right:6%;
|
||||
&:before {
|
||||
content: "\203a";
|
||||
}
|
||||
}
|
||||
}
|
||||
.testimonial {
|
||||
margin-right: 15%;
|
||||
margin-left: 15%;
|
||||
.avatar {
|
||||
margin-bottom: 2rem;
|
||||
@extend .flex-center;
|
||||
img {
|
||||
max-width: 170px;
|
||||
@extend .z-depth-2;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
margin-bottom: 1.3rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
h5 {
|
||||
margin-bottom: 0.9rem;
|
||||
color: map-get($grey, "darken-3");
|
||||
font-weight: 400;
|
||||
}
|
||||
p {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user