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:
23
html/scss/_custom-skin.scss
Normal file
23
html/scss/_custom-skin.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
// Your custom skin
|
||||
$skins: () !default;
|
||||
$skins: map-merge((
|
||||
"test": (
|
||||
"skin-primary-color": #fff,
|
||||
"skin-navbar": #fff,
|
||||
"skin-footer-color": #fff,
|
||||
"skin-accent": #fff,
|
||||
"skin-flat": #fff,
|
||||
"skin-sidenav-item": #fff,
|
||||
"skin-sidenav-item-hover": #fff,
|
||||
"skin-gradient-start": #fff,
|
||||
"skin-gradient-end": #fff,
|
||||
"skin-mask-slight": #fff,
|
||||
"skin-mask-light": #fff,
|
||||
"skin-mask-strong": #fff,
|
||||
"skin-sn-child": #fff,
|
||||
"skin-btn-primary": #fff,
|
||||
"skin-btn-secondary": #fff,
|
||||
"skin-btn-default": #fff,
|
||||
"skin-text": #fff
|
||||
)
|
||||
), $skins);
|
||||
1
html/scss/_custom-styles.scss
Normal file
1
html/scss/_custom-styles.scss
Normal file
@@ -0,0 +1 @@
|
||||
// Your custom styles
|
||||
1
html/scss/_custom-variables.scss
Normal file
1
html/scss/_custom-variables.scss
Normal file
@@ -0,0 +1 @@
|
||||
// Your custom variables
|
||||
255
html/scss/addons/_datatables.scss
Normal file
255
html/scss/addons/_datatables.scss
Normal file
@@ -0,0 +1,255 @@
|
||||
// Datatables
|
||||
|
||||
/*
|
||||
* MDBootstrap integration with Datatables
|
||||
* Learn more: https://mdbootstrap.com/content/bootstrap-datatables/
|
||||
* About MDBootstrap: https://mdbootstrap.com/
|
||||
*
|
||||
* This combined file was created by the DataTables downloader builder:
|
||||
* https://datatables.net/download
|
||||
*
|
||||
* To rebuild or modify this file with the latest versions of the included
|
||||
* software please visit:
|
||||
* https://datatables.net/download/#bs4/dt-1.10.18
|
||||
*
|
||||
* Included libraries:
|
||||
* DataTables 1.10.18
|
||||
*/
|
||||
|
||||
table {
|
||||
&.dataTable {
|
||||
thead {
|
||||
cursor: pointer;
|
||||
> tr {
|
||||
> th {
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
> td {
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
&.dataTables_wrapper {
|
||||
div {
|
||||
&.dataTables_length {
|
||||
&.d-flex {
|
||||
&.flex-row {
|
||||
label {
|
||||
margin-top: 1.2rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.select-wrapper {
|
||||
&.mdb-select {
|
||||
span,
|
||||
.select-dropdown {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dataTables_length,
|
||||
&.dataTables_filter {
|
||||
label {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
&.dataTables_length,
|
||||
&.dataTables_filter {
|
||||
select,
|
||||
input {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
&.dataTables_filter {
|
||||
text-align: right;
|
||||
input {
|
||||
margin-left: .5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
&.dataTables_info,
|
||||
&.dataTables_paginate {
|
||||
font-weight: normal;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
&.dataTables_paginate {
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
ul {
|
||||
&.pagination {
|
||||
justify-content: flex-end;
|
||||
.page-item {
|
||||
&.active {
|
||||
.page-link {
|
||||
&:focus {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-link {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
div {
|
||||
&.dataTables_wrapper {
|
||||
div {
|
||||
.dataTables_length,
|
||||
.dataTables_filter,
|
||||
.dataTables_info,
|
||||
.dataTables_paginate ul.pagination {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-select {
|
||||
select {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
&.dataTable {
|
||||
thead {
|
||||
cursor: pointer;
|
||||
> tr {
|
||||
> th {
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
> td {
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
&.dataTables_wrapper {
|
||||
div {
|
||||
&.dataTables_length {
|
||||
&.d-flex {
|
||||
&.flex-row {
|
||||
label {
|
||||
margin-top: 1.2rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.select-wrapper {
|
||||
&.mdb-select {
|
||||
span,
|
||||
.select-dropdown {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dataTables_length,
|
||||
&.dataTables_filter {
|
||||
label {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
&.dataTables_length,
|
||||
&.dataTables_filter {
|
||||
select,
|
||||
input {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
&.dataTables_filter {
|
||||
text-align: right;
|
||||
input {
|
||||
margin-left: .5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
&.dataTables_info,
|
||||
&.dataTables_paginate {
|
||||
font-weight: normal;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
&.dataTables_paginate {
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
ul {
|
||||
&.pagination {
|
||||
justify-content: flex-end;
|
||||
.page-item {
|
||||
&.active {
|
||||
.page-link {
|
||||
&:focus {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-link {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
div {
|
||||
&.dataTables_wrapper {
|
||||
div {
|
||||
.dataTables_length,
|
||||
.dataTables_filter,
|
||||
.dataTables_info,
|
||||
.dataTables_paginate ul.pagination {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-select {
|
||||
select {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
346
html/scss/admin/_style.scss
Normal file
346
html/scss/admin/_style.scss
Normal file
@@ -0,0 +1,346 @@
|
||||
// Global
|
||||
.dark-grey-text {
|
||||
color: #4f4f4f !important;
|
||||
}
|
||||
body {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
// Navigation
|
||||
.side-nav {
|
||||
.logo-sn {
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
.search-form {
|
||||
margin-top: 0;
|
||||
border-top: 1px solid rgba(153, 153, 153, 0.3);
|
||||
color: grey;
|
||||
input[type=text] {
|
||||
color: #424242!important; //Dlaczego MDB wymusza important w searchu?
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
.notifications-nav {
|
||||
.dropdown-menu {
|
||||
width: 23rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Cascading Admin cards
|
||||
.cascading-admin-card {
|
||||
margin-top: 20px;
|
||||
.admin-up {
|
||||
margin-left: 4%;
|
||||
margin-right: 4%;
|
||||
margin-top: -20px;
|
||||
.fa {
|
||||
padding: 1.7rem;
|
||||
font-size: 2rem;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
margin-right: 1rem;
|
||||
@extend .z-depth-2;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.data {
|
||||
float: right;
|
||||
margin-top: 2rem;
|
||||
text-align: right;
|
||||
p {
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Classic admin card
|
||||
.classic-admin-card {
|
||||
.card-body {
|
||||
color: #fff;
|
||||
margin-bottom: 0;
|
||||
padding: 0.9rem;
|
||||
p {
|
||||
font-size: 13px;
|
||||
opacity: 0.7;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h4 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.float-right {
|
||||
.fa {
|
||||
font-size: 3rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
margin: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
// Cascading panels
|
||||
.list-panel {
|
||||
.list-group-item {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Tables
|
||||
.table-ui {
|
||||
border: 1px solid #e0e0e9;
|
||||
}
|
||||
|
||||
// Login
|
||||
.login-form {
|
||||
margin-top: 6rem;
|
||||
}
|
||||
|
||||
// Register
|
||||
section.signup {
|
||||
margin-top: 8rem;
|
||||
ul.advantages-list {
|
||||
margin-top: 16px;
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
li {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .15);
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// User Profile
|
||||
.profile-card {
|
||||
margin-top: 100px;
|
||||
.avatar {
|
||||
max-width: 150px;
|
||||
max-height: 150px;
|
||||
margin: -70px auto 0;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
p {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.user-card {
|
||||
margin-top: 100px;
|
||||
@media (max-width: 450px) {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.about-text {
|
||||
h4 {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
.admin-up {
|
||||
.data {
|
||||
span {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.pagination {
|
||||
.page-item.disabled .page-link {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Blue panel buttons
|
||||
.blue-panel {
|
||||
.btn-group {
|
||||
.btn-panel {
|
||||
background-color: darken( #1E88E5, 25%)!important;
|
||||
&.active {
|
||||
background-color: darken( #1E88E5, 40%)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-title-panel {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
ul.striped {
|
||||
li {
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .15);
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bullet {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: rgba(255, 255, 255, .75);
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
border-radius: 50%;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.avatar-32 {
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
margin-right: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// @media (max-width: 770px) {
|
||||
.table-ui {
|
||||
.form-inline {
|
||||
.form-control {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// FullCalendar
|
||||
.fc {
|
||||
background: #fff;
|
||||
.fc-toolbar {
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
td.fc-today {
|
||||
background: #f2f2f2 !important;
|
||||
}
|
||||
.fc-event {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
.fc-content {
|
||||
background-color: #4fc3f7;
|
||||
padding: 2px;
|
||||
color: #fff;
|
||||
}
|
||||
.fc-state-default {
|
||||
border-color: #4fc3f7;
|
||||
color: #4fc3f7;
|
||||
}
|
||||
.fc-state-active {
|
||||
background-color: #4fc3f7;
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
color: #FFFFFF;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
button {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
.btn {
|
||||
@media (max-width: 320px) {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
@media (min-width: 321px) and (max-width: 450px) {
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
@media (min-width: 451px) and (max-width: 770px) {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
@media (min-width: 771px) and (max-width: 1025px) {
|
||||
padding-left: 1.7rem;
|
||||
padding-right: 1.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img.rounded-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// Custom styles for DataTables
|
||||
.dataTables_wrapper {
|
||||
.select-wrapper {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border: none;
|
||||
input {
|
||||
margin-bottom: 0;
|
||||
border: none;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #bdbdbd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-message-type {
|
||||
flex: 1 0 auto !important;
|
||||
}
|
||||
|
||||
// Others styles
|
||||
.table td {
|
||||
font-weight: 400;
|
||||
color: #4f4f4f;
|
||||
}
|
||||
|
||||
.blue-gradient {
|
||||
background: -webkit-linear-gradient(50deg, #45cafc, #303f9f);
|
||||
background: linear-gradient(40deg, #45cafc, #4285f4);
|
||||
}
|
||||
|
||||
.card.card-cascade {
|
||||
.view.gradient-card-header {
|
||||
padding: 1rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.font-small {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.card.card-cascade {
|
||||
.view {
|
||||
-webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.12), 0 6px 20px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.progress .progress-bar {
|
||||
height: 6px;
|
||||
}
|
||||
864
html/scss/core/_colors.scss
Executable file
864
html/scss/core/_colors.scss
Executable file
@@ -0,0 +1,864 @@
|
||||
// Colors
|
||||
$mdb-color-lighten-5: #d0d6e2 !default;
|
||||
$mdb-color-lighten-4: #b1bace !default;
|
||||
$mdb-color-lighten-3: #929fba !default;
|
||||
$mdb-color-lighten-2: #7283a7 !default;
|
||||
$mdb-color-lighten-1: #59698d !default;
|
||||
$mdb-color-base: #45526e !default;
|
||||
$mdb-color-darken-1: #3b465e !default;
|
||||
$mdb-color-darken-2: #2e3951 !default;
|
||||
$mdb-color-darken-3: #1c2a48 !default;
|
||||
$mdb-color-darken-4: #1c2331 !default;
|
||||
|
||||
$red-lighten-5: #ffebee !default;
|
||||
$red-lighten-4: #ffcdd2 !default;
|
||||
$red-lighten-3: #ef9a9a !default;
|
||||
$red-lighten-2: #e57373 !default;
|
||||
$red-lighten-1: #ef5350 !default;
|
||||
$red-base: #f44336 !default;
|
||||
$red-darken-1: #e53935 !default;
|
||||
$red-darken-2: #d32f2f !default;
|
||||
$red-darken-3: #c62828 !default;
|
||||
$red-darken-4: #b71c1c !default;
|
||||
$red-accent-1: #ff8a80 !default;
|
||||
$red-accent-2: #ff5252 !default;
|
||||
$red-accent-3: #ff1744 !default;
|
||||
$red-accent-4: #d50000 !default;
|
||||
|
||||
$pink-lighten-5: #fce4ec !default;
|
||||
$pink-lighten-4: #f8bbd0 !default;
|
||||
$pink-lighten-3: #f48fb1 !default;
|
||||
$pink-lighten-2: #f06292 !default;
|
||||
$pink-lighten-1: #ec407a !default;
|
||||
$pink-base: #e91e63 !default;
|
||||
$pink-darken-1: #d81b60 !default;
|
||||
$pink-darken-2: #c2185b !default;
|
||||
$pink-darken-3: #ad1457 !default;
|
||||
$pink-darken-4: #880e4f !default;
|
||||
$pink-accent-1: #ff80ab !default;
|
||||
$pink-accent-2: #ff4081 !default;
|
||||
$pink-accent-3: #f50057 !default;
|
||||
$pink-accent-4: #c51162 !default;
|
||||
|
||||
$purple-lighten-5: #f3e5f5 !default;
|
||||
$purple-lighten-4: #e1bee7 !default;
|
||||
$purple-lighten-3: #ce93d8 !default;
|
||||
$purple-lighten-2: #ba68c8 !default;
|
||||
$purple-lighten-1: #ab47bc !default;
|
||||
$purple-base: #9c27b0 !default;
|
||||
$purple-darken-1: #8e24aa !default;
|
||||
$purple-darken-2: #7b1fa2 !default;
|
||||
$purple-darken-3: #6a1b9a !default;
|
||||
$purple-darken-4: #4a148c !default;
|
||||
$purple-accent-1: #ea80fc !default;
|
||||
$purple-accent-2: #e040fb !default;
|
||||
$purple-accent-3: #d500f9 !default;
|
||||
$purple-accent-4: #aa00ff !default;
|
||||
|
||||
$deep-purple-lighten-5: #ede7f6 !default;
|
||||
$deep-purple-lighten-4: #d1c4e9 !default;
|
||||
$deep-purple-lighten-3: #b39ddb !default;
|
||||
$deep-purple-lighten-2: #9575cd !default;
|
||||
$deep-purple-lighten-1: #7e57c2 !default;
|
||||
$deep-purple-base: #673ab7 !default;
|
||||
$deep-purple-darken-1: #5e35b1 !default;
|
||||
$deep-purple-darken-2: #512da8 !default;
|
||||
$deep-purple-darken-3: #4527a0 !default;
|
||||
$deep-purple-darken-4: #311b92 !default;
|
||||
$deep-purple-accent-1: #b388ff !default;
|
||||
$deep-purple-accent-2: #7c4dff !default;
|
||||
$deep-purple-accent-3: #651fff !default;
|
||||
$deep-purple-accent-4: #6200ea !default;
|
||||
|
||||
$indigo-lighten-5: #e8eaf6 !default;
|
||||
$indigo-lighten-4: #c5cae9 !default;
|
||||
$indigo-lighten-3: #9fa8da !default;
|
||||
$indigo-lighten-2: #7986cb !default;
|
||||
$indigo-lighten-1: #5c6bc0 !default;
|
||||
$indigo-base: #3f51b5 !default;
|
||||
$indigo-darken-1: #3949ab !default;
|
||||
$indigo-darken-2: #303f9f !default;
|
||||
$indigo-darken-3: #283593 !default;
|
||||
$indigo-darken-4: #1a237e !default;
|
||||
$indigo-accent-1: #8c9eff !default;
|
||||
$indigo-accent-2: #536dfe !default;
|
||||
$indigo-accent-3: #3d5afe !default;
|
||||
$indigo-accent-4: #304ffe !default;
|
||||
|
||||
$blue-lighten-5: #e3f2fd !default;
|
||||
$blue-lighten-4: #bbdefb !default;
|
||||
$blue-lighten-3: #90caf9 !default;
|
||||
$blue-lighten-2: #64b5f6 !default;
|
||||
$blue-lighten-1: #42a5f5 !default;
|
||||
$blue-base: #2196f3 !default;
|
||||
$blue-darken-1: #1e88e5 !default;
|
||||
$blue-darken-2: #1976d2 !default;
|
||||
$blue-darken-3: #1565c0 !default;
|
||||
$blue-darken-4: #0d47a1 !default;
|
||||
$blue-accent-1: #82b1ff !default;
|
||||
$blue-accent-2: #448aff !default;
|
||||
$blue-accent-3: #2979ff !default;
|
||||
$blue-accent-4: #2962ff !default;
|
||||
|
||||
$light-blue-lighten-5: #e1f5fe !default;
|
||||
$light-blue-lighten-4: #b3e5fc !default;
|
||||
$light-blue-lighten-3: #81d4fa !default;
|
||||
$light-blue-lighten-2: #4fc3f7 !default;
|
||||
$light-blue-lighten-1: #29b6f6 !default;
|
||||
$light-blue-base: #03a9f4 !default;
|
||||
$light-blue-darken-1: #039be5 !default;
|
||||
$light-blue-darken-2: #0288d1 !default;
|
||||
$light-blue-darken-3: #0277bd !default;
|
||||
$light-blue-darken-4: #01579b !default;
|
||||
$light-blue-accent-1: #80d8ff !default;
|
||||
$light-blue-accent-2: #40c4ff !default;
|
||||
$light-blue-accent-3: #00b0ff !default;
|
||||
$light-blue-accent-4: #0091ea !default;
|
||||
|
||||
$cyan-lighten-5: #e0f7fa !default;
|
||||
$cyan-lighten-4: #b2ebf2 !default;
|
||||
$cyan-lighten-3: #80deea !default;
|
||||
$cyan-lighten-2: #4dd0e1 !default;
|
||||
$cyan-lighten-1: #26c6da !default;
|
||||
$cyan-base: #00bcd4 !default;
|
||||
$cyan-darken-1: #00acc1 !default;
|
||||
$cyan-darken-2: #0097a7 !default;
|
||||
$cyan-darken-3: #00838f !default;
|
||||
$cyan-darken-4: #006064 !default;
|
||||
$cyan-accent-1: #84ffff !default;
|
||||
$cyan-accent-2: #18ffff !default;
|
||||
$cyan-accent-3: #00e5ff !default;
|
||||
$cyan-accent-4: #00b8d4 !default;
|
||||
|
||||
$teal-lighten-5: #e0f2f1 !default;
|
||||
$teal-lighten-4: #b2dfdb !default;
|
||||
$teal-lighten-3: #80cbc4 !default;
|
||||
$teal-lighten-2: #4db6ac !default;
|
||||
$teal-lighten-1: #26a69a !default;
|
||||
$teal-base: #009688 !default;
|
||||
$teal-darken-1: #00897b !default;
|
||||
$teal-darken-2: #00796b !default;
|
||||
$teal-darken-3: #00695c !default;
|
||||
$teal-darken-4: #004d40 !default;
|
||||
$teal-accent-1: #a7ffeb !default;
|
||||
$teal-accent-2: #64ffda !default;
|
||||
$teal-accent-3: #1de9b6 !default;
|
||||
$teal-accent-4: #00bfa5 !default;
|
||||
|
||||
$green-lighten-5: #e8f5e9 !default;
|
||||
$green-lighten-4: #c8e6c9 !default;
|
||||
$green-lighten-3: #a5d6a7 !default;
|
||||
$green-lighten-2: #81c784 !default;
|
||||
$green-lighten-1: #66bb6a !default;
|
||||
$green-base: #4caf50 !default;
|
||||
$green-darken-1: #43a047 !default;
|
||||
$green-darken-2: #388e3c !default;
|
||||
$green-darken-3: #2e7d32 !default;
|
||||
$green-darken-4: #1b5e20 !default;
|
||||
$green-accent-1: #b9f6ca !default;
|
||||
$green-accent-2: #69f0ae !default;
|
||||
$green-accent-3: #00e676 !default;
|
||||
$green-accent-4: #00c853 !default;
|
||||
|
||||
|
||||
$light-green-lighten-5: #f1f8e9 !default;
|
||||
$light-green-lighten-4: #dcedc8 !default;
|
||||
$light-green-lighten-3: #c5e1a5 !default;
|
||||
$light-green-lighten-2: #aed581 !default;
|
||||
$light-green-lighten-1: #9ccc65 !default;
|
||||
$light-green-base: #8bc34a !default;
|
||||
$light-green-darken-1: #7cb342 !default;
|
||||
$light-green-darken-2: #689f38 !default;
|
||||
$light-green-darken-3: #558b2f !default;
|
||||
$light-green-darken-4: #33691e !default;
|
||||
$light-green-accent-1: #ccff90 !default;
|
||||
$light-green-accent-2: #b2ff59 !default;
|
||||
$light-green-accent-3: #76ff03 !default;
|
||||
$light-green-accent-4: #64dd17 !default;
|
||||
|
||||
$lime-lighten-5: #f9fbe7 !default;
|
||||
$lime-lighten-4: #f0f4c3 !default;
|
||||
$lime-lighten-3: #e6ee9c !default;
|
||||
$lime-lighten-2: #dce775 !default;
|
||||
$lime-lighten-1: #d4e157 !default;
|
||||
$lime-base: #cddc39 !default;
|
||||
$lime-darken-1: #c0ca33 !default;
|
||||
$lime-darken-2: #afb42b !default;
|
||||
$lime-darken-3: #9e9d24 !default;
|
||||
$lime-darken-4: #827717 !default;
|
||||
$lime-accent-1: #f4ff81 !default;
|
||||
$lime-accent-2: #eeff41 !default;
|
||||
$lime-accent-3: #c6ff00 !default;
|
||||
$lime-accent-4: #aeea00 !default;
|
||||
|
||||
$yellow-lighten-5: #fffde7 !default;
|
||||
$yellow-lighten-4: #fff9c4 !default;
|
||||
$yellow-lighten-3: #fff59d !default;
|
||||
$yellow-lighten-2: #fff176 !default;
|
||||
$yellow-lighten-1: #ffee58 !default;
|
||||
$yellow-base: #ffeb3b !default;
|
||||
$yellow-darken-1: #fdd835 !default;
|
||||
$yellow-darken-2: #fbc02d !default;
|
||||
$yellow-darken-3: #f9a825 !default;
|
||||
$yellow-darken-4: #f57f17 !default;
|
||||
$yellow-accent-1: #ffff8d !default;
|
||||
$yellow-accent-2: #ffff00 !default;
|
||||
$yellow-accent-3: #ffea00 !default;
|
||||
$yellow-accent-4: #ffd600 !default;
|
||||
|
||||
$amber-lighten-5: #fff8e1 !default;
|
||||
$amber-lighten-4: #ffecb3 !default;
|
||||
$amber-lighten-3: #ffe082 !default;
|
||||
$amber-lighten-2: #ffd54f !default;
|
||||
$amber-lighten-1: #ffca28 !default;
|
||||
$amber-base: #ffc107 !default;
|
||||
$amber-darken-1: #ffb300 !default;
|
||||
$amber-darken-2: #ffa000 !default;
|
||||
$amber-darken-3: #ff8f00 !default;
|
||||
$amber-darken-4: #ff6f00 !default;
|
||||
$amber-accent-1: #ffe57f !default;
|
||||
$amber-accent-2: #ffd740 !default;
|
||||
$amber-accent-3: #ffc400 !default;
|
||||
$amber-accent-4: #ffab00 !default;
|
||||
|
||||
$orange-lighten-5: #fff3e0 !default;
|
||||
$orange-lighten-4: #ffe0b2 !default;
|
||||
$orange-lighten-3: #ffcc80 !default;
|
||||
$orange-lighten-2: #ffb74d !default;
|
||||
$orange-lighten-1: #ffa726 !default;
|
||||
$orange-base: #ff9800 !default;
|
||||
$orange-darken-1: #fb8c00 !default;
|
||||
$orange-darken-2: #f57c00 !default;
|
||||
$orange-darken-3: #ef6c00 !default;
|
||||
$orange-darken-4: #e65100 !default;
|
||||
$orange-accent-1: #ffd180 !default;
|
||||
$orange-accent-2: #ffab40 !default;
|
||||
$orange-accent-3: #ff9100 !default;
|
||||
$orange-accent-4: #ff6d00 !default;
|
||||
|
||||
$deep-orange-lighten-5: #fbe9e7 !default;
|
||||
$deep-orange-lighten-4: #ffccbc !default;
|
||||
$deep-orange-lighten-3: #ffab91 !default;
|
||||
$deep-orange-lighten-2: #ff8a65 !default;
|
||||
$deep-orange-lighten-1: #ff7043 !default;
|
||||
$deep-orange-base: #ff5722 !default;
|
||||
$deep-orange-darken-1: #f4511e !default;
|
||||
$deep-orange-darken-2: #e64a19 !default;
|
||||
$deep-orange-darken-3: #d84315 !default;
|
||||
$deep-orange-darken-4: #bf360c !default;
|
||||
$deep-orange-accent-1: #ff9e80 !default;
|
||||
$deep-orange-accent-2: #ff6e40 !default;
|
||||
$deep-orange-accent-3: #ff3d00 !default;
|
||||
$deep-orange-accent-4: #dd2c00 !default;
|
||||
|
||||
$brown-lighten-5: #efebe9 !default;
|
||||
$brown-lighten-4: #d7ccc8 !default;
|
||||
$brown-lighten-3: #bcaaa4 !default;
|
||||
$brown-lighten-2: #a1887f !default;
|
||||
$brown-lighten-1: #8d6e63 !default;
|
||||
$brown-base: #795548 !default;
|
||||
$brown-darken-1: #6d4c41 !default;
|
||||
$brown-darken-2: #5d4037 !default;
|
||||
$brown-darken-3: #4e342e !default;
|
||||
$brown-darken-4: #3e2723 !default;
|
||||
|
||||
$blue-grey-lighten-5: #eceff1 !default;
|
||||
$blue-grey-lighten-4: #cfd8dc !default;
|
||||
$blue-grey-lighten-3: #b0bec5 !default;
|
||||
$blue-grey-lighten-2: #90a4ae !default;
|
||||
$blue-grey-lighten-1: #78909c !default;
|
||||
$blue-grey-base: #607d8b !default;
|
||||
$blue-grey-darken-1: #546e7a !default;
|
||||
$blue-grey-darken-2: #455a64 !default;
|
||||
$blue-grey-darken-3: #37474f !default;
|
||||
$blue-grey-darken-4: #263238 !default;
|
||||
|
||||
$grey-lighten-5: #fafafa !default;
|
||||
$grey-lighten-4: #f5f5f5 !default;
|
||||
$grey-lighten-3: #eeeeee !default;
|
||||
$grey-lighten-2: #e0e0e0 !default;
|
||||
$grey-lighten-1: #bdbdbd !default;
|
||||
$grey-base: #9e9e9e !default;
|
||||
$grey-darken-1: #757575 !default;
|
||||
$grey-darken-2: #616161 !default;
|
||||
$grey-darken-3: #424242 !default;
|
||||
$grey-darken-4: #212121 !default;
|
||||
|
||||
$black-base: #000 !default;
|
||||
$white-base: #fff !default;
|
||||
|
||||
$mdb-colors-1: () !default;
|
||||
$mdb-colors-1: map-merge((
|
||||
"mdb-color": (
|
||||
"lighten-5": $mdb-color-lighten-5,
|
||||
"lighten-4": $mdb-color-lighten-4,
|
||||
"lighten-3": $mdb-color-lighten-3,
|
||||
"lighten-2": $mdb-color-lighten-2,
|
||||
"lighten-1": $mdb-color-lighten-1,
|
||||
"base": $mdb-color-base,
|
||||
"darken-1": $mdb-color-darken-1,
|
||||
"darken-2": $mdb-color-darken-2,
|
||||
"darken-3": $mdb-color-darken-3,
|
||||
"darken-4": $mdb-color-darken-4
|
||||
),
|
||||
"red": (
|
||||
"lighten-5": $red-lighten-5,
|
||||
"lighten-4": $red-lighten-4,
|
||||
"lighten-3": $red-lighten-3,
|
||||
"lighten-2": $red-lighten-2,
|
||||
"lighten-1": $red-lighten-1,
|
||||
"base": $red-base,
|
||||
"darken-1": $red-darken-1,
|
||||
"darken-2": $red-darken-2,
|
||||
"darken-3": $red-darken-3,
|
||||
"darken-4": $red-darken-4,
|
||||
"accent-1": $red-accent-1,
|
||||
"accent-2": $red-accent-2,
|
||||
"accent-3": $red-accent-3,
|
||||
"accent-4": $red-accent-4
|
||||
),
|
||||
"pink": (
|
||||
"lighten-5": $pink-lighten-5,
|
||||
"lighten-4": $pink-lighten-4,
|
||||
"lighten-3": $pink-lighten-3,
|
||||
"lighten-2": $pink-lighten-2,
|
||||
"lighten-1": $pink-lighten-1,
|
||||
"base": $pink-base,
|
||||
"darken-1": $pink-darken-1,
|
||||
"darken-2": $pink-darken-2,
|
||||
"darken-3": $pink-darken-3,
|
||||
"darken-4": $pink-darken-4,
|
||||
"accent-1": $pink-accent-1,
|
||||
"accent-2": $pink-accent-2,
|
||||
"accent-3": $pink-accent-3,
|
||||
"accent-4": $pink-accent-4
|
||||
),
|
||||
"purple": (
|
||||
"lighten-5": $purple-lighten-5,
|
||||
"lighten-4": $purple-lighten-4,
|
||||
"lighten-3": $purple-lighten-3,
|
||||
"lighten-2": $purple-lighten-2,
|
||||
"lighten-1": $purple-lighten-1,
|
||||
"base": $purple-base,
|
||||
"darken-1": $purple-darken-1,
|
||||
"darken-2": $purple-darken-2,
|
||||
"darken-3": $purple-darken-3,
|
||||
"darken-4": $purple-darken-4,
|
||||
"accent-1": $purple-accent-1,
|
||||
"accent-2": $purple-accent-2,
|
||||
"accent-3": $purple-accent-3,
|
||||
"accent-4": $purple-accent-4
|
||||
),
|
||||
"deep-purple": (
|
||||
"lighten-5": $deep-purple-lighten-5,
|
||||
"lighten-4": $deep-purple-lighten-4,
|
||||
"lighten-3": $deep-purple-lighten-3,
|
||||
"lighten-2": $deep-purple-lighten-2,
|
||||
"lighten-1": $deep-purple-lighten-1,
|
||||
"base": $deep-purple-base,
|
||||
"darken-1": $deep-purple-darken-1,
|
||||
"darken-2": $deep-purple-darken-2,
|
||||
"darken-3": $deep-purple-darken-3,
|
||||
"darken-4": $deep-purple-darken-4,
|
||||
"accent-1": $deep-purple-accent-1,
|
||||
"accent-2": $deep-purple-accent-2,
|
||||
"accent-3": $deep-purple-accent-3,
|
||||
"accent-4": $deep-purple-accent-4
|
||||
),
|
||||
"indigo": (
|
||||
"lighten-5": $indigo-lighten-5,
|
||||
"lighten-4": $indigo-lighten-4,
|
||||
"lighten-3": $indigo-lighten-3,
|
||||
"lighten-2": $indigo-lighten-2,
|
||||
"lighten-1": $indigo-lighten-1,
|
||||
"base": $indigo-base,
|
||||
"darken-1": $indigo-darken-1,
|
||||
"darken-2": $indigo-darken-2,
|
||||
"darken-3": $indigo-darken-3,
|
||||
"darken-4": $indigo-darken-4,
|
||||
"accent-1": $indigo-accent-1,
|
||||
"accent-2": $indigo-accent-2,
|
||||
"accent-3": $indigo-accent-3,
|
||||
"accent-4": $indigo-accent-4
|
||||
),
|
||||
"blue": (
|
||||
"lighten-5": $blue-lighten-5,
|
||||
"lighten-4": $blue-lighten-4,
|
||||
"lighten-3": $blue-lighten-3,
|
||||
"lighten-2": $blue-lighten-2,
|
||||
"lighten-1": $blue-lighten-1,
|
||||
"base": $blue-base,
|
||||
"darken-1": $blue-darken-1,
|
||||
"darken-2": $blue-darken-2,
|
||||
"darken-3": $blue-darken-3,
|
||||
"darken-4": $blue-darken-4,
|
||||
"accent-1": $blue-accent-1,
|
||||
"accent-2": $blue-accent-2,
|
||||
"accent-3": $blue-accent-3,
|
||||
"accent-4": $blue-accent-4
|
||||
),
|
||||
"light-blue": (
|
||||
"lighten-5": $light-blue-lighten-5,
|
||||
"lighten-4": $light-blue-lighten-4,
|
||||
"lighten-3": $light-blue-lighten-3,
|
||||
"lighten-2": $light-blue-lighten-2,
|
||||
"lighten-1": $light-blue-lighten-1,
|
||||
"base": $light-blue-base,
|
||||
"darken-1": $light-blue-darken-1,
|
||||
"darken-2": $light-blue-darken-2,
|
||||
"darken-3": $light-blue-darken-3,
|
||||
"darken-4": $light-blue-darken-4,
|
||||
"accent-1": $light-blue-accent-1,
|
||||
"accent-2": $light-blue-accent-2,
|
||||
"accent-3": $light-blue-accent-3,
|
||||
"accent-4": $light-blue-accent-4
|
||||
),
|
||||
"cyan": (
|
||||
"lighten-5": $cyan-lighten-5,
|
||||
"lighten-4": $cyan-lighten-4,
|
||||
"lighten-3": $cyan-lighten-3,
|
||||
"lighten-2": $cyan-lighten-2,
|
||||
"lighten-1": $cyan-lighten-1,
|
||||
"base": $cyan-base,
|
||||
"darken-1": $cyan-darken-1,
|
||||
"darken-2": $cyan-darken-2,
|
||||
"darken-3": $cyan-darken-3,
|
||||
"darken-4": $cyan-darken-4,
|
||||
"accent-1": $cyan-accent-1,
|
||||
"accent-2": $cyan-accent-2,
|
||||
"accent-3": $cyan-accent-3,
|
||||
"accent-4": $cyan-accent-4
|
||||
),
|
||||
"teal": (
|
||||
"lighten-5": $teal-lighten-5,
|
||||
"lighten-4": $teal-lighten-4,
|
||||
"lighten-3": $teal-lighten-3,
|
||||
"lighten-2": $teal-lighten-2,
|
||||
"lighten-1": $teal-lighten-1,
|
||||
"base": $teal-base,
|
||||
"darken-1": $teal-darken-1,
|
||||
"darken-2": $teal-darken-2,
|
||||
"darken-3": $teal-darken-3,
|
||||
"darken-4": $teal-darken-4,
|
||||
"accent-1": $teal-accent-1,
|
||||
"accent-2": $teal-accent-2,
|
||||
"accent-3": $teal-accent-3,
|
||||
"accent-4": $teal-accent-4
|
||||
),
|
||||
"green": (
|
||||
"lighten-5": $green-lighten-5,
|
||||
"lighten-4": $green-lighten-4,
|
||||
"lighten-3": $green-lighten-3,
|
||||
"lighten-2": $green-lighten-2,
|
||||
"lighten-1": $green-lighten-1,
|
||||
"base": $green-base,
|
||||
"darken-1": $green-darken-1,
|
||||
"darken-2": $green-darken-2,
|
||||
"darken-3": $green-darken-3,
|
||||
"darken-4": $green-darken-4,
|
||||
"accent-1": $green-accent-1,
|
||||
"accent-2": $green-accent-2,
|
||||
"accent-3": $green-accent-3,
|
||||
"accent-4": $green-accent-4
|
||||
),
|
||||
"light-green": (
|
||||
"lighten-5": $light-green-lighten-5,
|
||||
"lighten-4": $light-green-lighten-4,
|
||||
"lighten-3": $light-green-lighten-3,
|
||||
"lighten-2": $light-green-lighten-2,
|
||||
"lighten-1": $light-green-lighten-1,
|
||||
"base": $light-green-base,
|
||||
"darken-1": $light-green-darken-1,
|
||||
"darken-2": $light-green-darken-2,
|
||||
"darken-3": $light-green-darken-3,
|
||||
"darken-4": $light-green-darken-4,
|
||||
"accent-1": $light-green-accent-1,
|
||||
"accent-2": $light-green-accent-2,
|
||||
"accent-3": $light-green-accent-3,
|
||||
"accent-4": $light-green-accent-4
|
||||
),
|
||||
"lime": (
|
||||
"lighten-5": $lime-lighten-5,
|
||||
"lighten-4": $lime-lighten-4,
|
||||
"lighten-3": $lime-lighten-3,
|
||||
"lighten-2": $lime-lighten-2,
|
||||
"lighten-1": $lime-lighten-1,
|
||||
"base": $lime-base,
|
||||
"darken-1": $lime-darken-1,
|
||||
"darken-2": $lime-darken-2,
|
||||
"darken-3": $lime-darken-3,
|
||||
"darken-4": $lime-darken-4,
|
||||
"accent-1": $lime-accent-1,
|
||||
"accent-2": $lime-accent-2,
|
||||
"accent-3": $lime-accent-3,
|
||||
"accent-4": $lime-accent-4
|
||||
),
|
||||
"yellow": (
|
||||
"lighten-5": $yellow-lighten-5,
|
||||
"lighten-4": $yellow-lighten-4,
|
||||
"lighten-3": $yellow-lighten-3,
|
||||
"lighten-2": $yellow-lighten-2,
|
||||
"lighten-1": $yellow-lighten-1,
|
||||
"base": $yellow-base,
|
||||
"darken-1": $yellow-darken-1,
|
||||
"darken-2": $yellow-darken-2,
|
||||
"darken-3": $yellow-darken-3,
|
||||
"darken-4": $yellow-darken-4,
|
||||
"accent-1": $yellow-accent-1,
|
||||
"accent-2": $yellow-accent-2,
|
||||
"accent-3": $yellow-accent-3,
|
||||
"accent-4": $yellow-accent-4
|
||||
),
|
||||
"amber": (
|
||||
"lighten-5": $amber-lighten-5,
|
||||
"lighten-4": $amber-lighten-4,
|
||||
"lighten-3": $amber-lighten-3,
|
||||
"lighten-2": $amber-lighten-2,
|
||||
"lighten-1": $amber-lighten-1,
|
||||
"base": $amber-base,
|
||||
"darken-1": $amber-darken-1,
|
||||
"darken-2": $amber-darken-2,
|
||||
"darken-3": $amber-darken-3,
|
||||
"darken-4": $amber-darken-4,
|
||||
"accent-1": $amber-accent-1,
|
||||
"accent-2": $amber-accent-2,
|
||||
"accent-3": $amber-accent-3,
|
||||
"accent-4": $amber-accent-4
|
||||
),
|
||||
"orange": (
|
||||
"lighten-5": $orange-lighten-5,
|
||||
"lighten-4": $orange-lighten-4,
|
||||
"lighten-3": $orange-lighten-3,
|
||||
"lighten-2": $orange-lighten-2,
|
||||
"lighten-1": $orange-lighten-1,
|
||||
"base": $orange-base,
|
||||
"darken-1": $orange-darken-1,
|
||||
"darken-2": $orange-darken-2,
|
||||
"darken-3": $orange-darken-3,
|
||||
"darken-4": $orange-darken-4,
|
||||
"accent-1": $orange-accent-1,
|
||||
"accent-2": $orange-accent-2,
|
||||
"accent-3": $orange-accent-3,
|
||||
"accent-4": $orange-accent-4
|
||||
),
|
||||
"deep-orange": (
|
||||
"lighten-5": $deep-orange-lighten-5,
|
||||
"lighten-4": $deep-orange-lighten-4,
|
||||
"lighten-3": $deep-orange-lighten-3,
|
||||
"lighten-2": $deep-orange-lighten-2,
|
||||
"lighten-1": $deep-orange-lighten-1,
|
||||
"base": $deep-orange-base,
|
||||
"darken-1": $deep-orange-darken-1,
|
||||
"darken-2": $deep-orange-darken-2,
|
||||
"darken-3": $deep-orange-darken-3,
|
||||
"darken-4": $deep-orange-darken-4,
|
||||
"accent-1": $deep-orange-accent-1,
|
||||
"accent-2": $deep-orange-accent-2,
|
||||
"accent-3": $deep-orange-accent-3,
|
||||
"accent-4": $deep-orange-accent-4
|
||||
),
|
||||
"brown": (
|
||||
"lighten-5": $brown-lighten-5,
|
||||
"lighten-4": $brown-lighten-4,
|
||||
"lighten-3": $brown-lighten-3,
|
||||
"lighten-2": $brown-lighten-2,
|
||||
"lighten-1": $brown-lighten-1,
|
||||
"base": $brown-base,
|
||||
"darken-1": $brown-darken-1,
|
||||
"darken-2": $brown-darken-2,
|
||||
"darken-3": $brown-darken-3,
|
||||
"darken-4": $brown-darken-4
|
||||
),
|
||||
"blue-grey": (
|
||||
"lighten-5": $blue-grey-lighten-5,
|
||||
"lighten-4": $blue-grey-lighten-4,
|
||||
"lighten-3": $blue-grey-lighten-3,
|
||||
"lighten-2": $blue-grey-lighten-2,
|
||||
"lighten-1": $blue-grey-lighten-1,
|
||||
"base": $blue-grey-base,
|
||||
"darken-1": $blue-grey-darken-1,
|
||||
"darken-2": $blue-grey-darken-2,
|
||||
"darken-3": $blue-grey-darken-3,
|
||||
"darken-4": $blue-grey-darken-4
|
||||
),
|
||||
"grey": (
|
||||
"lighten-5": $grey-lighten-5,
|
||||
"lighten-4": $grey-lighten-4,
|
||||
"lighten-3": $grey-lighten-3,
|
||||
"lighten-2": $grey-lighten-2,
|
||||
"lighten-1": $grey-lighten-1,
|
||||
"base": $grey-base,
|
||||
"darken-1": $grey-darken-1,
|
||||
"darken-2": $grey-darken-2,
|
||||
"darken-3": $grey-darken-3,
|
||||
"darken-4": $grey-darken-4
|
||||
),
|
||||
"black": (
|
||||
"base": $black-base
|
||||
),
|
||||
"white": (
|
||||
"base": $white-base
|
||||
)
|
||||
), $mdb-colors-1);
|
||||
|
||||
// Full palette of colors
|
||||
$enable_full_palette: true !default;
|
||||
|
||||
// Colors classes
|
||||
@each $color_name, $color in $mdb-colors-1 {
|
||||
@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;
|
||||
}
|
||||
.rgba-#{$color_name}-slight,
|
||||
.rgba-#{$color_name}-slight:after {
|
||||
background-color: rgba($color_value, .1);
|
||||
}
|
||||
.rgba-#{$color_name}-light,
|
||||
.rgba-#{$color_name}-light:after {
|
||||
background-color: rgba($color_value, .3);
|
||||
}
|
||||
.rgba-#{$color_name}-strong,
|
||||
.rgba-#{$color_name}-strong:after {
|
||||
background-color: rgba($color_value, .7);
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@if $enable_full_palette {
|
||||
.#{$color_name}.#{$color_type} {
|
||||
background-color: $color_value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Stylish rgba colors
|
||||
$stylish-rgba: (
|
||||
"rgba-stylish-slight": rgba(62, 69, 81, .1),
|
||||
"rgba-stylish-light": rgba(62, 69, 81, .3),
|
||||
"rgba-stylish-strong": rgba(62, 69, 81, .7),
|
||||
);
|
||||
|
||||
@each $color_name, $color_value in $stylish-rgba {
|
||||
.#{$color_name} {
|
||||
background-color: $color_value;
|
||||
}
|
||||
}
|
||||
|
||||
.dark-grey-text {
|
||||
color: #4f4f4f !important;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #4f4f4f !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Material colors
|
||||
$primary-color: #4285f4 !default;
|
||||
$primary-color-dark: #0d47a1 !default;
|
||||
$secondary-color: #aa66cc !default;
|
||||
$secondary-color-dark: #9933cc !default;
|
||||
$default-color: #2bbbad !default;
|
||||
$default-color-dark: #00695c !default;
|
||||
$info-color: #33b5e5 !default;
|
||||
$info-color-dark: #0099cc !default;
|
||||
$success-color: #00c851 !default;
|
||||
$success-color-dark: #007e33 !default;
|
||||
$warning-color: #ffbb33 !default;
|
||||
$warning-color-dark: #ff8800 !default;
|
||||
$danger-color: #ff3547 !default;
|
||||
$danger-color-dark: #cc0000 !default;
|
||||
$elegant-color: #2e2e2e !default;
|
||||
$elegant-color-dark: #212121 !default;
|
||||
$stylish-color: #4b515d !default;
|
||||
$stylish-color-dark: #3e4551 !default;
|
||||
$unique-color: #3f729b !default;
|
||||
$unique-color-dark: #1c2331 !default;
|
||||
$special-color: #37474f !default;
|
||||
$special-color-dark: #263238 !default;
|
||||
$white: #fff;
|
||||
$black: #000;
|
||||
$error-color: $red-base !default;
|
||||
|
||||
$material-colors: () !default;
|
||||
$material-colors: map-merge((
|
||||
"primary-color": $primary-color,
|
||||
"primary-color-dark": $primary-color-dark,
|
||||
"secondary-color": $secondary-color,
|
||||
"secondary-color-dark": $secondary-color-dark,
|
||||
"default-color": $default-color,
|
||||
"default-color-dark": $default-color-dark,
|
||||
"info-color": $info-color,
|
||||
"info-color-dark": $info-color-dark,
|
||||
"success-color": $success-color,
|
||||
"success-color-dark": $success-color-dark,
|
||||
"warning-color": $warning-color,
|
||||
"warning-color-dark": $warning-color-dark,
|
||||
"danger-color": $danger-color,
|
||||
"danger-color-dark": $danger-color-dark,
|
||||
"elegant-color": $elegant-color,
|
||||
"elegant-color-dark": $elegant-color-dark,
|
||||
"stylish-color": $stylish-color,
|
||||
"stylish-color-dark": $stylish-color-dark,
|
||||
"unique-color": $unique-color,
|
||||
"unique-color-dark": $unique-color-dark,
|
||||
"special-color": $special-color,
|
||||
"special-color-dark": $special-color-dark
|
||||
), $material-colors);
|
||||
|
||||
@each $color_name, $color in $material-colors {
|
||||
.#{$color_name} {
|
||||
background-color: $color !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: #333333 !default;
|
||||
$comm-color: #30cfc0 !default;
|
||||
$vk-color: #4c75a3 !default;
|
||||
$drib-color: #ec4a89 !default;
|
||||
$so-color: #ffac44 !default;
|
||||
$slack-color: #56b68b !default;
|
||||
$email-color: #4b515d !default;
|
||||
$redd-color: #ff4500 !default;
|
||||
|
||||
$social-colors: () !default;
|
||||
$social-colors: map-merge((
|
||||
"fb": $fb-color,
|
||||
"tw": $tw-color,
|
||||
"gplus": $gplus-color,
|
||||
"yt": $yt-color,
|
||||
"li": $li-color,
|
||||
"pin": $pin-color,
|
||||
"ins": $ins-color,
|
||||
"git": $git-color,
|
||||
"comm": $comm-color,
|
||||
"vk": $vk-color,
|
||||
"dribbble": $drib-color,
|
||||
"so": $so-color,
|
||||
"slack": $slack-color,
|
||||
"email": $email-color,
|
||||
"reddit": $redd-color
|
||||
), $social-colors);
|
||||
|
||||
// MDB buttons colors
|
||||
$mdb-colors: () !default;
|
||||
$mdb-colors: map-merge((
|
||||
"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": $pink-darken-4,
|
||||
"dark-green": $green-darken-2,
|
||||
"mdb-color": $mdb-color-lighten-1,
|
||||
"red": $red-darken-2,
|
||||
"pink": $pink-lighten-1,
|
||||
"purple": $purple-darken-1,
|
||||
"deep-purple": $deep-purple-darken-2,
|
||||
"indigo": $indigo-base,
|
||||
"blue": $blue-darken-2,
|
||||
"light-blue": $blue-accent-1,
|
||||
"cyan": $cyan-base,
|
||||
"teal": $teal-darken-2,
|
||||
"green": $green-darken-2,
|
||||
"light-green": $light-green-base,
|
||||
"lime": $lime-darken-2,
|
||||
"yellow": $yellow-darken-2,
|
||||
"amber": $amber-darken-2,
|
||||
"orange": $orange-darken-2,
|
||||
"deep-orange": $deep-orange-lighten-1,
|
||||
"brown": $brown-base,
|
||||
"grey": $grey-darken-2,
|
||||
"blue-grey": $blue-grey-lighten-1,
|
||||
"dark": $grey-darken-4,
|
||||
"light": $grey-lighten-2,
|
||||
"white": $white-base,
|
||||
"black": $black-base
|
||||
), $mdb-colors);
|
||||
|
||||
// Basic colors
|
||||
$basic: () !default;
|
||||
$basic: map-merge((
|
||||
"primary": $primary-color,
|
||||
"danger": $danger-color,
|
||||
"warning": $warning-color,
|
||||
"success": $success-color,
|
||||
"info": $info-color
|
||||
), $basic);
|
||||
|
||||
$basic-mdb-colors: () !default;
|
||||
$basic-mdb-colors: map-merge((
|
||||
"primary": $primary-color,
|
||||
"danger": $danger-color,
|
||||
"warning": $warning-color-dark,
|
||||
"success": $success-color,
|
||||
"info": $info-color,
|
||||
"default": $default-color,
|
||||
"secondary": $secondary-color,
|
||||
"dark": $grey-darken-4,
|
||||
"light": $grey-lighten-2
|
||||
), $basic-mdb-colors);
|
||||
|
||||
$pagination-colors: () !default;
|
||||
$pagination-colors: map-merge((
|
||||
"blue": $primary-color,
|
||||
"red": $danger-color,
|
||||
"teal": $default-color,
|
||||
"dark-grey": $special-color,
|
||||
"dark": $elegant-color,
|
||||
"blue-grey": $unique-color,
|
||||
"amber": $amber-darken-4,
|
||||
"purple": $deep-purple-darken-1
|
||||
), $pagination-colors);
|
||||
|
||||
$ctbc: () !default;
|
||||
$ctbc: map-merge((
|
||||
"tabs-cyan": $yellow-base,
|
||||
"tabs-orange": $red-darken-1,
|
||||
"tabs-grey": $white-base,
|
||||
"tabs-pink": $deep-purple-base,
|
||||
"tabs-green": $blue-darken-3,
|
||||
"tabs-primary": $white-base
|
||||
), $ctbc);
|
||||
|
||||
$switch-color-bg: $secondary-color !default;
|
||||
$switch-color-checked-lever-bg: desaturate(lighten($secondary-color, 25%), 25%) !default;
|
||||
$switch-color-unchecked-bg: #F1F1F1 !default;
|
||||
$switch-color-unchecked-lever-bg: #818181 !default;
|
||||
|
||||
$switch-colors: () !default;
|
||||
$switch-colors: map-merge((
|
||||
"bg": $switch-color-bg,
|
||||
"checked-lever-bg": $switch-color-checked-lever-bg,
|
||||
"unchecked-bg": $switch-color-unchecked-bg,
|
||||
"unchecked-lever-bg": $switch-color-unchecked-lever-bg,
|
||||
), $switch-colors);
|
||||
|
||||
$dropdown-colors: () !default;
|
||||
$dropdown-colors: map-merge((
|
||||
"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($mdb-colors, "elegant"),
|
||||
"ins" : map-get($social-colors, "ins")
|
||||
), $dropdown-colors);
|
||||
62
html/scss/core/_global.scss
Executable file
62
html/scss/core/_global.scss
Executable file
@@ -0,0 +1,62 @@
|
||||
// Globals
|
||||
// Shadows
|
||||
.z-depth-0 {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.z-depth-1 {
|
||||
box-shadow: $z-depth-1;
|
||||
}
|
||||
.z-depth-1-half {
|
||||
box-shadow: $z-depth-1-half;
|
||||
}
|
||||
.z-depth-2 {
|
||||
box-shadow: $z-depth-2;
|
||||
}
|
||||
.z-depth-3 {
|
||||
box-shadow: $z-depth-3;
|
||||
}
|
||||
.z-depth-4 {
|
||||
box-shadow: $z-depth-4;
|
||||
}
|
||||
.z-depth-5 {
|
||||
box-shadow: $z-depth-5;
|
||||
}
|
||||
|
||||
// Shadow on hover
|
||||
.hoverable {
|
||||
box-shadow: none;
|
||||
transition: $transition-hoverable;
|
||||
&:hover {
|
||||
box-shadow: $z-depth-2;
|
||||
transition: $transition-hoverable;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled cursor
|
||||
.disabled,
|
||||
:disabled {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
// Links
|
||||
a {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: $link-color;
|
||||
transition: $transition-basic;
|
||||
&:hover {
|
||||
transition: $transition-basic;
|
||||
text-decoration: none;
|
||||
}
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
&:hover {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
69
html/scss/core/_helpers.scss
Normal file
69
html/scss/core/_helpers.scss
Normal file
@@ -0,0 +1,69 @@
|
||||
// Helpers
|
||||
// MDB helpers
|
||||
.img-fluid,
|
||||
.video-fluid {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
ul {
|
||||
text-align: center;
|
||||
li {
|
||||
margin-bottom: $flex-center-ul-mb;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hr-light {
|
||||
border-top: 1px solid $hr-light;
|
||||
}
|
||||
|
||||
.hr-dark {
|
||||
border-top: 1px solid $hr-dark;
|
||||
}
|
||||
|
||||
// Responsive width
|
||||
.w-responsive {
|
||||
width: 75%;
|
||||
@media (max-width: 740px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Collapsible body
|
||||
.collapsible-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
box-shadow: $z-depth-1;
|
||||
border-radius: $border-radius-base;
|
||||
background-color: $white-base;
|
||||
}
|
||||
|
||||
@each $name, $color in $basic-mdb-colors {
|
||||
@include bg-variant(".bg-#{$name}", $color);
|
||||
.border-#{$name} {
|
||||
border-color: $color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card-img-100 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.card-img-64 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
77
html/scss/core/_masks.scss
Executable file
77
html/scss/core/_masks.scss
Executable file
@@ -0,0 +1,77 @@
|
||||
// Masks
|
||||
// General properties
|
||||
.view {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
.mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
img, video {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
video {
|
||||
&.video-intro {
|
||||
z-index: -100;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: $intro-video-transform;
|
||||
transition: $intro-video-transition opacity;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay
|
||||
.overlay {
|
||||
.mask {
|
||||
opacity: 0;
|
||||
transition: $mask-overlay-transition;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Zoom
|
||||
.zoom {
|
||||
img, video {
|
||||
transition: $mask-zoom-transition;
|
||||
}
|
||||
&:hover {
|
||||
img, video {
|
||||
transform: $mask-zoom-transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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("#{$image-path1}/overlays/#{$filename}.png");
|
||||
}
|
||||
}
|
||||
529
html/scss/core/_mixins.scss
Executable file
529
html/scss/core/_mixins.scss
Executable file
@@ -0,0 +1,529 @@
|
||||
// Mixins
|
||||
// Bootstrap Mixins
|
||||
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||
$n: index($breakpoint-names, $name);
|
||||
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
||||
}
|
||||
|
||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
@return if($min !=0, $min, null);
|
||||
}
|
||||
|
||||
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
||||
$next: breakpoint-next($name, $breakpoints);
|
||||
@return if($next, breakpoint-min($next, $breakpoints) - .02px, null);
|
||||
}
|
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and wider.
|
||||
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and narrower.
|
||||
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
@if $max {
|
||||
@media (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media that spans multiple breakpoint widths.
|
||||
// Makes the @content apply between the min and max breakpoints
|
||||
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-min($lower, $breakpoints);
|
||||
$max: breakpoint-max($upper, $breakpoints);
|
||||
@if $min !=null and $max !=null {
|
||||
@media (min-width: $min) and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else if $max==null {
|
||||
@include media-breakpoint-up($lower, $breakpoints) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else if $min==null {
|
||||
@include media-breakpoint-down($upper, $breakpoints) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Media between the breakpoint's minimum and maximum widths.
|
||||
// No minimum for the smallest breakpoint, and no maximum for the largest one.
|
||||
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
|
||||
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
@if $min !=null and $max !=null {
|
||||
@media (min-width: $min) and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else if $max==null {
|
||||
@include media-breakpoint-up($name, $breakpoints) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else if $min==null {
|
||||
@include media-breakpoint-down($name, $breakpoints) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
|
||||
@return if(breakpoint-min($name, $breakpoints)==null, "", "-#{$name}");
|
||||
}
|
||||
|
||||
@mixin hover-focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Background color
|
||||
@mixin bg-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
background-color: $color !important;
|
||||
}
|
||||
a#{$parent},
|
||||
button#{$parent} {
|
||||
@include hover-focus {
|
||||
background-color: darken($color, 10%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
@mixin text-emphasis-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
color: $color !important;
|
||||
}
|
||||
a#{$parent} {
|
||||
@include hover-focus {
|
||||
color: darken($color, 10%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
@mixin placeholder {
|
||||
&::placeholder {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
/// Grid system
|
||||
//
|
||||
// Generate semantic grid columns with these mixins.
|
||||
|
||||
@mixin make-container() {
|
||||
width: 100%;
|
||||
padding-right: ($grid-gutter-width / 2);
|
||||
padding-left: ($grid-gutter-width / 2);
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
|
||||
// For each breakpoint, define the maximum width of the container in a media query
|
||||
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
|
||||
@each $breakpoint, $container-max-width in $max-widths {
|
||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
max-width: $container-max-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-row() {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: ($grid-gutter-width / -2);
|
||||
margin-left: ($grid-gutter-width / -2);
|
||||
}
|
||||
|
||||
@mixin make-col-ready() {
|
||||
position: relative;
|
||||
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
||||
// always setting `width: 100%;`. This works because we use `flex` values
|
||||
// later on to override this initial width.
|
||||
width: 100%;
|
||||
min-height: 1px; // Prevent collapsing
|
||||
padding-right: ($grid-gutter-width / 2);
|
||||
padding-left: ($grid-gutter-width / 2);
|
||||
}
|
||||
|
||||
@mixin make-col($size, $columns: $grid-columns) {
|
||||
flex: 0 0 percentage($size / $columns);
|
||||
// Add a `max-width` to ensure content within each column does not blow out
|
||||
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
||||
// do not appear to require this.
|
||||
max-width: percentage($size / $columns);
|
||||
}
|
||||
|
||||
@mixin make-col-offset($size, $columns: $grid-columns) {
|
||||
$num: $size / $columns;
|
||||
margin-left: if($num == 0, 0, percentage($num));
|
||||
}
|
||||
|
||||
@mixin clearfix() {
|
||||
&::after {
|
||||
display: block;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
@mixin float-left {
|
||||
float: left !important;
|
||||
}
|
||||
@mixin float-right {
|
||||
float: right !important;
|
||||
}
|
||||
@mixin float-none {
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
// CSS image replacement
|
||||
@mixin text-hide($ignore-warning: false) {
|
||||
// stylelint-disable-next-line font-family-no-missing-generic-family-keyword
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
@if ($ignore-warning != true) {
|
||||
@warn "The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5.";
|
||||
}
|
||||
}
|
||||
|
||||
// Only display content to screen readers
|
||||
//
|
||||
// See: https://a11yproject.com/posts/how-to-hide-content/
|
||||
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
||||
|
||||
@mixin sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Use in conjunction with .sr-only to only display content when it's focused.
|
||||
//
|
||||
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
|
||||
//
|
||||
// Credit: HTML5 Boilerplate
|
||||
|
||||
@mixin sr-only-focusable {
|
||||
&:active,
|
||||
&:focus {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin invisible($visibility) {
|
||||
visibility: $visibility !important;
|
||||
}
|
||||
|
||||
// MDB Mixins
|
||||
// Set the color of the button and badge
|
||||
@function set-notification-text-color($color) {
|
||||
@if (lightness($color) > 80) {
|
||||
@return $black-base; // Lighter backgorund, return dark color
|
||||
}
|
||||
@else {
|
||||
@return $white-base; // Darker background, return light color
|
||||
}
|
||||
}
|
||||
|
||||
// Make button
|
||||
@mixin make-button ($name, $color) {
|
||||
.btn-#{$name} {
|
||||
background-color: $color !important;
|
||||
color: set-notification-text-color($color) !important;
|
||||
&:hover {
|
||||
background-color: lighten($color, 5%);
|
||||
}
|
||||
&:focus,
|
||||
&.focus {
|
||||
box-shadow: $z-depth-1-half;
|
||||
}
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: darken($color, 20%);
|
||||
}
|
||||
&.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 {
|
||||
box-shadow: $z-depth-1-half;
|
||||
background-color: darken($color, 20%) !important;
|
||||
}
|
||||
&:not([disabled]):not(.disabled):active:focus,
|
||||
&:not([disabled]):not(.disabled).active:focus,
|
||||
.show>&.dropdown-toggle:focus {
|
||||
box-shadow: $z-depth-1-half;
|
||||
}
|
||||
}
|
||||
.#{$name}-ic {
|
||||
color: $color !important;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make outline button
|
||||
@mixin make-outline-button ($name, $color) {
|
||||
.btn-outline-#{$name} {
|
||||
border: 2px solid $color !important;
|
||||
background-color: transparent !important;
|
||||
color: $color !important;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:focus,
|
||||
&.active {
|
||||
border-color: $color !important;
|
||||
background-color: transparent !important;
|
||||
color: $color !important;
|
||||
}
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active,
|
||||
.show>&.dropdown-toggle {
|
||||
box-shadow: $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 {
|
||||
box-shadow: $z-depth-1-half;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make gradient
|
||||
@mixin make-gradient($name, $value) {
|
||||
.#{$name}-gradient {
|
||||
background: linear-gradient(40deg, map-get($value, start), map-get($value, end)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Make gradient button
|
||||
@mixin make-gradient-button($name, $value) {
|
||||
.btn {
|
||||
&.#{$name}-gradient {
|
||||
transition: .5s ease;
|
||||
color: $white-base;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:focus &.active {
|
||||
background: linear-gradient(40deg, lighten(map-get($value, start), 5%), lighten(map-get($value, end), 5%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button size
|
||||
@mixin button-size($padding-y, $padding-x, $font-size) {
|
||||
padding: $padding-y $padding-x;
|
||||
font-size: $font-size;
|
||||
}
|
||||
|
||||
@mixin make-badge($name, $color) {
|
||||
.badge-#{$name} {
|
||||
background-color: $color !important;
|
||||
color: set-notification-text-color($color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Make input
|
||||
@mixin make-input($margin-bottom, $label-font-size, $label-active-font-size, $top, $prefix-font-size, $margin-left, $width, $margin-left-2) {
|
||||
.validate {
|
||||
margin-bottom: $margin-bottom;
|
||||
}
|
||||
label {
|
||||
font-size: $label-font-size;
|
||||
&.active {
|
||||
font-size: $label-active-font-size;
|
||||
}
|
||||
}
|
||||
.prefix {
|
||||
top: $top;
|
||||
font-size: $prefix-font-size;
|
||||
~input,
|
||||
~textarea {
|
||||
margin-left: $margin-left;
|
||||
width: $width;
|
||||
}
|
||||
~label {
|
||||
margin-left: $margin-left;
|
||||
}
|
||||
~.form-text {
|
||||
margin-left: $margin-left-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make navbar
|
||||
@mixin make-navbar($color-0, $background-image, $color, $color-2, $color-3) {
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
&.disbled {
|
||||
color: $color-0;
|
||||
&:hover {
|
||||
color: $color-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-toggler-icon {
|
||||
background-image: $background-image;
|
||||
cursor: pointer;
|
||||
}
|
||||
.breadcrumb,
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: $color;
|
||||
transition: $navbar-nav-transition;
|
||||
&:hover {
|
||||
color: $color-2;
|
||||
}
|
||||
}
|
||||
&.active>.nav-link {
|
||||
background-color: $color-3;
|
||||
&:hover {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-toggler {
|
||||
color: $color;
|
||||
}
|
||||
form {
|
||||
.md-form {
|
||||
input {
|
||||
border-bottom: 1px solid $color;
|
||||
&:focus:not([readonly]) {
|
||||
border-color: $input-md-focus-color;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
color: $color;
|
||||
@include placeholder {
|
||||
color: $color;
|
||||
font-weight: $navbar-font-weight;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make floating button
|
||||
@mixin make-btn-floating($width, $height, $font-size, $line-height) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
i {
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
}
|
||||
}
|
||||
|
||||
// Keyframes
|
||||
@mixin keyframes($animation-name) {
|
||||
@keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll bar and scroll spy width and height
|
||||
@mixin scroll-width($scrollbar-width) {
|
||||
width: $scrollbar-width;
|
||||
}
|
||||
|
||||
@mixin scroll-height($scrollbar-height) {
|
||||
height: $scrollbar-height;
|
||||
}
|
||||
|
||||
// Scroll spy font-weight
|
||||
@mixin scrollspy-font-weight($scrollspy-font-weight) {
|
||||
font-weight: $scrollspy-font-weight;
|
||||
}
|
||||
|
||||
// Switch width and height
|
||||
@mixin switch-width-height($switchWidth, $switchHeight) {
|
||||
width: $switchWidth;
|
||||
height: $switchHeight;
|
||||
}
|
||||
|
||||
// Make Box-shadows
|
||||
@mixin box-shadows($shadow...) {
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
// Make Transition
|
||||
@mixin transition-main($transition...) {
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
// Make border-radius scrollspy
|
||||
@mixin scrollspy-border-radius($scrollspy-radius) {
|
||||
border-radius: $scrollspy-radius;
|
||||
}
|
||||
|
||||
// Make border-radius scrollspy 4rows
|
||||
@mixin scrollspy-border-radius-4rows($top-left, $top-right, $bottom-right, $bottom-left) {
|
||||
border-radius: $top-left $top-right $bottom-right $bottom-left;
|
||||
}
|
||||
|
||||
//Make animation for progresss
|
||||
@mixin progress-animation-default($animation...){
|
||||
animation: $animation;
|
||||
}
|
||||
//Make transform
|
||||
@mixin transform($transform...){
|
||||
transform: $transform;
|
||||
}
|
||||
139
html/scss/core/_typography.scss
Executable file
139
html/scss/core/_typography.scss
Executable file
@@ -0,0 +1,139 @@
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Responsive headings
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Divider
|
||||
.divider-new {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-top: $divider-margin-y;
|
||||
margin-bottom: $divider-margin-y;
|
||||
> h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
height: 1.5px;
|
||||
flex: 1;
|
||||
height: $divider-height;
|
||||
background: #c6c6c6;
|
||||
}
|
||||
&:before {
|
||||
margin: 0 $divider-margin-x 0 0;
|
||||
}
|
||||
&:after {
|
||||
margin: 0 0 0 $divider-margin-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
.blockquote {
|
||||
padding: $blockquote-padding-y $blockquote-padding-x;
|
||||
border-left: .25rem solid #eceeef;
|
||||
&.text-right {
|
||||
border-left: none;
|
||||
border-right: .25rem solid #eceeef;
|
||||
}
|
||||
.bq-title {
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-large;
|
||||
font-weight: 400;
|
||||
}
|
||||
p {
|
||||
padding: $blockquote-p-padding-y 0;
|
||||
font-size: $blockquote-p-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $basic {
|
||||
.bq-#{$name} {
|
||||
border-left: 3px solid $color !important;
|
||||
.bq-title {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $basic-mdb-colors {
|
||||
@include text-emphasis-variant(".text-#{$name}", $color);
|
||||
}
|
||||
|
||||
.font-small {
|
||||
font-size: $font-small;
|
||||
}
|
||||
348
html/scss/core/_variables.scss
Executable file
348
html/scss/core/_variables.scss
Executable file
@@ -0,0 +1,348 @@
|
||||
// Variables
|
||||
// Fonts
|
||||
$roboto-font-path: "../font/roboto/" !default;
|
||||
|
||||
$font-size-large: 1.5rem !default;
|
||||
$font-bold: 500 !default;
|
||||
$font-small: .9rem !default;
|
||||
|
||||
$line-height-small: 1 !default;
|
||||
$line-height-extra-large: 2.5 !default;
|
||||
|
||||
// Reponsive Headings
|
||||
$responsive-headings: () !default;
|
||||
$responsive-headings: map-merge((
|
||||
"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%
|
||||
),
|
||||
), $responsive-headings);
|
||||
|
||||
// Blockquote
|
||||
$blockquote-padding-y: .5rem !default;
|
||||
$blockquote-padding-x: 1rem !default;
|
||||
$blockquote-p-padding-y: $blockquote-padding-x !default;
|
||||
$blockquote-p-padding-l: 2rem !default;
|
||||
$blockquote-p-font-size: 1.1rem !default;
|
||||
|
||||
// Shadows
|
||||
$z-depth-1: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !default;
|
||||
$z-depth-1-half: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15) !default;
|
||||
$z-depth-2: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !default;
|
||||
$z-depth-3: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19) !default;
|
||||
$z-depth-4: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21) !default;
|
||||
$z-depth-5: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22) !default;
|
||||
|
||||
// Transitions
|
||||
$transition-basic: all .2s ease-in-out !default;
|
||||
$transition-hoverable: all .55s ease-in-out !default;
|
||||
|
||||
// Border radius
|
||||
$border-radius-base: .125rem !default;
|
||||
$border-radius-circle: 50% !default;
|
||||
|
||||
// Buttons
|
||||
$btn-color-basic: $white-base !default;
|
||||
$btn-margin-basic: .375rem !default;
|
||||
$btn-padding-y-basic: .84rem !default;
|
||||
$btn-padding-x-basic: 2.14rem !default;
|
||||
$btn-font-size-basic: .81rem !default;
|
||||
|
||||
$btn-padding-y-large: 1rem !default;
|
||||
$btn-padding-x-large: 2.4rem !default;
|
||||
$btn-font-size-large: .94rem !default;
|
||||
|
||||
$btn-padding-y-medium: .7rem !default;
|
||||
$btn-padding-x-medium: 1.6rem !default;
|
||||
$btn-font-size-medium: .7rem !default;
|
||||
|
||||
$btn-padding-y-small: .5rem !default;
|
||||
$btn-padding-x-small: 1.6rem !default;
|
||||
$btn-font-size-small: .64rem !default;
|
||||
|
||||
$btn-outline-padding-y-basic: .7rem !default;
|
||||
$btn-outline-padding-y-large: .88rem !default;
|
||||
$btn-outline-padding-y-medium: .58rem !default;
|
||||
$btn-outline-padding-y-small: .38rem !default;
|
||||
|
||||
$btn-tb-padding-y: 0.3rem !default;
|
||||
$btn-tb-padding-x: 1rem !default;
|
||||
|
||||
$btn-transition: $transition-basic !default;
|
||||
|
||||
$btn-icon-basic: .9rem !default;
|
||||
$btn-icon-large: 1rem !default;
|
||||
$btn-icon-medium: .8rem !default;
|
||||
$btn-icon-small: .7rem !default;
|
||||
$btn-icon-margin: .3rem !default;
|
||||
|
||||
/*** Global ***/
|
||||
// Media Query Ranges
|
||||
$small-screen-up: 601px !default;
|
||||
$medium-screen-up: 993px !default;
|
||||
$large-screen-up: 1201px !default;
|
||||
$small-screen: 600px !default;
|
||||
$medium-screen: 992px !default;
|
||||
$large-screen: 1200px !default;
|
||||
$sidenav-breakpoint: 1440px !default;
|
||||
|
||||
$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
|
||||
$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
|
||||
$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
|
||||
$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
|
||||
$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
|
||||
$hide-sidenav: "only screen and (max-width : #{$sidenav-breakpoint})" !default;
|
||||
|
||||
// Link color
|
||||
$link-color: #0275d8 !default;
|
||||
|
||||
// Dividers colors
|
||||
$hr-light: $white-base !default;
|
||||
$hr-dark: #666 !default;
|
||||
$flex-center-ul-mb: 1rem !default;
|
||||
|
||||
// Divider
|
||||
$divider-margin-y: 2.8rem !default;
|
||||
$divider-margin-x: .5rem !default;
|
||||
$divider-height: 2px !default;
|
||||
|
||||
// Masks
|
||||
$mask-overlay-transition: all .4s ease-in-out !default;
|
||||
$mask-zoom-transition: all .2s linear !default;
|
||||
$mask-zoom-transform: scale(1.1) !default;
|
||||
$intro-video-transform: translateX(-50%) translateY(-50%) !default;
|
||||
$intro-video-transition: 1s !default;
|
||||
|
||||
// Cards
|
||||
$md-card-border-radius: .25rem !default;
|
||||
$md-card-link-transition: .2s ease-in-out !default;
|
||||
$md-card-font-size: .9rem !default;
|
||||
$md-card-text-color: #747373 !default;
|
||||
|
||||
// Images
|
||||
$image-path: "../../img/" !default;
|
||||
$image-path1: "../img/" !default;
|
||||
$avatar-img-max-width: 100px !default;
|
||||
|
||||
// Carousels
|
||||
$carousel-control-icon-width: 2.25rem !default;
|
||||
$carousel-control-icon-height: $carousel-control-icon-width !default;
|
||||
$carousel-control-prev-icon: url(#{$image-path}/svg/arrow_left.svg) !default;
|
||||
$carousel-control-next-icon: url(#{$image-path}/svg/arrow_right.svg) !default;
|
||||
$carousel-indicators-width: .625rem !default;
|
||||
$carousel-indicators-height: $carousel-indicators-width !default;
|
||||
$carousel-indicators-border-radius: $border-radius-circle !default;
|
||||
$carousel-transition-duration: .6s !default;
|
||||
$carousel-item-transform: translateX(0) !default;
|
||||
$carousel-item-transform-2: translate3d(0, 0, 0) !default;
|
||||
|
||||
// Badges
|
||||
$badge-pill-padding-x: .6rem !default;
|
||||
$badge-pill-border-radius: 10rem !default;
|
||||
|
||||
// Footers
|
||||
$footer-copyright-color: rgba($white-base, .6) !default;
|
||||
$footer-copyright-bg-color: rgba($black-base, .2) !default;
|
||||
$footer-font-size: .9rem !default;
|
||||
|
||||
// Forms
|
||||
$input-bg-color: $white-base !default;
|
||||
$label-font-size: .8rem !default;
|
||||
$input-transition: all .3s !default;
|
||||
$input-disabled-color: rgba(0,0,0, .46) !default;
|
||||
$input-md-focus-color: $primary-color !default;
|
||||
$input-error-color: $error-color !default;
|
||||
$input-success-color: $success-color !default;
|
||||
$input-label-after-top: 65px !default;
|
||||
$input-label-after-transition: .2s opacity ease-out, .2s color ease-out !default;
|
||||
$input-border-color: #ced4da !default;
|
||||
|
||||
$input-label-transition: .2s ease-out !default;
|
||||
$input-label-color: #757575 !default;
|
||||
$input-label-top: .65rem !default;
|
||||
$input-label-active-transform: translateY(-140%) !default;
|
||||
$input-prefix-transition: color .2s !default;
|
||||
|
||||
$input-md-form-margin-top: 1.5rem !default;
|
||||
$input-md-form-margin-bottom: $input-md-form-margin-top !default;
|
||||
$input-label-font-size: 1rem !default;
|
||||
$input-label-active-font-size: .8rem !default;
|
||||
$input-prefix-top: .25rem !default;
|
||||
$input-prefix-font-size: 1.75rem !default;
|
||||
$input-prefix-margin-left: 2.5rem !default;
|
||||
$input-prefix-width: calc(100% - 2.5rem) !default;
|
||||
$input-group-addon-font-size: 1.4rem !default;
|
||||
$input-form-text-ml: 2.6rem !default;
|
||||
$input-validate-mb: 2.5rem !default;
|
||||
$input-label-valid-top: 3.56rem !default;
|
||||
$input-label-invalid-top: 3.44rem !default;
|
||||
|
||||
$input-label-font-size-lg: 1.25rem !default;
|
||||
$input-label-active-font-size-lg: .95rem !default;
|
||||
$input-prefix-top-lg: .4rem !default;
|
||||
$input-prefix-font-size-lg: 2rem !default;
|
||||
$input-prefix-margin-left-lg: 3rem !default;
|
||||
$input-prefix-width-lg: calc(100% - 3rem) !default;
|
||||
$input-group-addon-font-size-lg: 1.65rem !default;
|
||||
$input-form-text-ml-lg: 3.1rem !default;
|
||||
$input-validate-mb-lg: 2.8rem !default;
|
||||
$input-label-valid-top-lg: 4.1rem !default;
|
||||
$input-label-invalid-top-lg: 4rem !default;
|
||||
|
||||
$input-label-font-size-sm: .875rem !default;
|
||||
$input-label-active-font-size-sm: .75rem !default;
|
||||
$input-prefix-top-sm: .35rem !default;
|
||||
$input-prefix-font-size-sm: 1.5rem !default;
|
||||
$input-prefix-margin-left-sm: 2rem !default;
|
||||
$input-prefix-width-sm: calc(100% - 2rem) !default;
|
||||
$input-group-addon-font-size-sm: 1.15rem !default;
|
||||
$input-form-text-ml-sm: 2rem !default;
|
||||
$input-validate-mb-sm: 2.3rem !default;
|
||||
$input-label-valid-top-sm: 3.2rem !default;
|
||||
$input-label-invalid-top-sm: 3.1rem !default;
|
||||
|
||||
$textarea-padding: 1.5rem !default;
|
||||
|
||||
$input-form-control-margin-bottom: .5rem !default;
|
||||
$input-form-control-padding-top: .3rem !default;
|
||||
$input-form-control-padding-bottom: .55rem !default;
|
||||
$input-disabled-solid-color: #BDBDBD !default;
|
||||
|
||||
// Input group
|
||||
$input-group-text-bgc: #e0e0e0 !default;
|
||||
$input-group-form-control-px: .75rem !default;
|
||||
$input-group-form-control-py: .375rem !default;
|
||||
|
||||
// List group
|
||||
$list-group-padding: 0 10px 10px 0 !default;
|
||||
$list-group-transition: .5s !default;
|
||||
|
||||
// Modals
|
||||
$modal-distance: 10px !default;
|
||||
$modal-width: 400px !default;
|
||||
$modal-full-height-medium-screen: 800px !default;
|
||||
$modal-full-height-large-screen: 1000px !default;
|
||||
$modal-fade-top-transform: translate3d(0, -25%, 0) !default;
|
||||
$modal-fade-bottom-transform: translate3d(0, 25%, 0) !default;
|
||||
$modal-fade-right-transform: translate3d(25%, 0, 0) !default;
|
||||
$modal-fade-left-transform: translate3d(-25%, 0, 0) !default;
|
||||
$modal-notify-body-padding: 1.5rem !default;
|
||||
$modal-notify-heading-padding: .3rem !default;
|
||||
$modal-notify-font-size: 1.15rem !default;
|
||||
$modal-avatar-margin-top: 6rem !default;
|
||||
$modal-avatar-header-margin-top: -6rem !default;
|
||||
$modal-avatar-header-margin-bottom: -1rem !default;
|
||||
$modal-avatar-img-width: 130px !default;
|
||||
$modal-body-padding-right: 2rem !default;
|
||||
$modal-body-padding-left: $modal-body-padding-right !default;
|
||||
$modal-body-margin-top: 1rem !default;
|
||||
$cascading-modal-margin-top: -2rem !default;
|
||||
$cascading-modal-margin-right: 1rem !default;
|
||||
$cascading-modal-margin-bottom: $cascading-modal-margin-right !default;
|
||||
$cascading-modal-margin-left: $cascading-modal-margin-right !default;
|
||||
$cascading-modal-padding: 1.5rem !default;
|
||||
$cascading-modal-close-margin-right: $cascading-modal-margin-right !default;
|
||||
$cascading-modal-font-size: 1.25rem !default;
|
||||
$cascading-modal-fa-margin-right: 9px !default;
|
||||
$cascading-modal-social-margin-top: $cascading-modal-padding !default;
|
||||
$cascading-modal-a-font-size: 1rem !default;
|
||||
$cascading-modal-tabs-margin-x: 1rem !default;
|
||||
$cascading-modal-tabs-margin-top: -1.5rem !default;
|
||||
$cascading-modal-tabs-padding-top: 1.7rem !default;
|
||||
|
||||
// Miscellaneous
|
||||
$edge-header-height: 278px !default;
|
||||
$edge-header-background-color: #ccc !default;
|
||||
$edge-header-margin-top: -100px !default;
|
||||
|
||||
// Navbars
|
||||
$navbar-font-weight: 300 !default;
|
||||
$navbar-double-font-size: 15px !default;
|
||||
|
||||
$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-base, .1) !default;
|
||||
$navbar-light-hover-color: rgba($black-base, .75) !default;
|
||||
$navbar-light-disabled-color: rgba(0, 0, 0, 0.5) !default;
|
||||
|
||||
$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-base, .1) !default;
|
||||
$navbar-dark-hover-color: rgba($white-base, .75) !default;
|
||||
$navbar-dark-disabled-color: rgba(255, 255, 255, 0.5) !default;
|
||||
|
||||
$navbar-scrolling-transition: background .5s ease-in-out, padding .5s ease-in-out !default;
|
||||
$navbar-scrolling-transition-duration: 1s !default;
|
||||
$navbar-scrolling-padding: 12px !default;
|
||||
$navbar-top-collapse-padding: 5px !default;
|
||||
$navbar-nav-transition: .35s !default;
|
||||
$navbar-dropdown-font-size: 0.9375rem !default;
|
||||
$navbar-dropdown-menu-padding: 10px !default;
|
||||
$navbar-flex-icons-padding-md: 6px !default;
|
||||
$navbar-flex-icons-padding-lg: 3px !default;
|
||||
$navbar-form-input-mr: 5px !default;
|
||||
$navbar-form-input-mb: 1px !default;
|
||||
$navbar-form-input-ml: 8px !default;
|
||||
$navbar-form-input-height: 1rem !default;
|
||||
$navbar-breadcrumb-padding-top: .3rem !default;
|
||||
$navbar-breadcrumb-padding-left: 1rem !default;
|
||||
$navbar-breadcrumb-color: rgba(255,255,255,.65) !default;
|
||||
|
||||
// Pagination
|
||||
$pagination-active-transition: all .2s linear !default;
|
||||
$pagination-page-link-transition: all .3s linear !default;
|
||||
$pagination-page-link-font-size: .9rem !default;
|
||||
$pagination-page-link-font-size-lg: 1rem !default;
|
||||
$pagination-page-link-font-size-sm: .8rem !default;
|
||||
$pagination-page-item-disabled-color: #868e96 !default;
|
||||
$pagination-page-link-color: #212529 !default;
|
||||
$pagination-page-link-hover-bg-color: #eee !default;
|
||||
$pagination-circle-margin-x: 2px !default;
|
||||
$pagination-circle-border-radius: $border-radius-circle !default;
|
||||
|
||||
// Tables
|
||||
$table-th-font-size: .9rem !default;
|
||||
$table-td-font-size: $table-th-font-size !default;
|
||||
$table-th-padding-top: 1.1rem !default;
|
||||
$table-td-padding-bottom: 1rem !default;
|
||||
$table-a-color: #212529 !default;
|
||||
$table-hover-transition: .5s !default;
|
||||
$table-hover-background-color: rgba(0, 0, 0, 0.075) !default;
|
||||
$table-sm-padding-y: .6rem !default;
|
||||
$table-inverse-color-border: $white-base !default;
|
||||
$product-table-img-max-height: 150px !default;
|
||||
$product-table-img-min-width: 50px !default;
|
||||
$table-th-lg-min-width: 9rem !default;
|
||||
$table-th-sm-min-width: 6rem !default;
|
||||
$table-scroll-vertical-max-height: 300px !default;
|
||||
$table-label-height: 0.94rem !default;
|
||||
$table-label-line-height: $table-label-height !default;
|
||||
161
html/scss/core/_waves.scss
Executable file
161
html/scss/core/_waves.scss
Executable file
@@ -0,0 +1,161 @@
|
||||
/*!
|
||||
* Waves v0.7.6
|
||||
* http://fian.my.id/Waves
|
||||
*
|
||||
* Copyright 2014-2018 Alfiana E. Sibuea and other contributors
|
||||
* Released under the MIT license
|
||||
* https://github.com/fians/Waves/blob/master/LICENSE */
|
||||
|
||||
@mixin waves-transition($transition){
|
||||
-webkit-transition: $transition;
|
||||
-moz-transition: $transition;
|
||||
-o-transition: $transition;
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
@mixin waves-transform($string){
|
||||
-webkit-transform: $string;
|
||||
-moz-transform: $string;
|
||||
-ms-transform: $string;
|
||||
-o-transform: $string;
|
||||
transform: $string;
|
||||
}
|
||||
|
||||
@mixin waves-box-shadow($shadow){
|
||||
-webkit-box-shadow: $shadow;
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
.waves-effect {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
.waves-ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-top:-50px;
|
||||
margin-left:-50px;
|
||||
opacity: 0;
|
||||
background: rgba(0,0,0,0.2);
|
||||
$gradient: rgba(0,0,0,0.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%;
|
||||
background: -webkit-radial-gradient($gradient);
|
||||
background: -o-radial-gradient($gradient);
|
||||
background: -moz-radial-gradient($gradient);
|
||||
background: radial-gradient($gradient);
|
||||
@include waves-transition(all 0.5s ease-out);
|
||||
-webkit-transition-property: -webkit-transform, opacity;
|
||||
-moz-transition-property: -moz-transform, opacity;
|
||||
-o-transition-property: -o-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
@include waves-transform(scale(0) translate(0,0));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.waves-light .waves-ripple {
|
||||
background: rgba(255,255,255,0.4);
|
||||
$gradient: rgba(255,255,255,0.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%;
|
||||
background: -webkit-radial-gradient($gradient);
|
||||
background: -o-radial-gradient($gradient);
|
||||
background: -moz-radial-gradient($gradient);
|
||||
background: radial-gradient($gradient);
|
||||
}
|
||||
|
||||
&.waves-classic .waves-ripple {
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
&.waves-classic.waves-light .waves-ripple {
|
||||
background: rgba(255,255,255,0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.waves-notransition {
|
||||
@include waves-transition(none #{"!important"});
|
||||
}
|
||||
|
||||
.waves-button,
|
||||
.waves-circle {
|
||||
@include waves-transform(translateZ(0));
|
||||
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
|
||||
}
|
||||
|
||||
.waves-button,
|
||||
.waves-button:hover,
|
||||
.waves-button:visited,
|
||||
.waves-button-input {
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
font-size: 1em;
|
||||
line-height:1em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.waves-button {
|
||||
padding: 0.85em 1.1em;
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
.waves-button-input {
|
||||
margin: 0;
|
||||
padding: 0.85em 1.1em;
|
||||
}
|
||||
|
||||
.waves-input-wrapper {
|
||||
border-radius: 0.2em;
|
||||
vertical-align: bottom;
|
||||
|
||||
&.waves-button {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.waves-button-input {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.waves-circle {
|
||||
text-align: center;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.waves-float {
|
||||
-webkit-mask-image: none;
|
||||
@include waves-box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12));
|
||||
@include waves-transition(all 300ms);
|
||||
|
||||
&:active {
|
||||
@include waves-box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.30));
|
||||
}
|
||||
}
|
||||
|
||||
.waves-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
&.waves-effect,
|
||||
&.waves-light {
|
||||
display:inline-block;
|
||||
}
|
||||
}
|
||||
86
html/scss/core/bootstrap/_functions.scss
Executable file
86
html/scss/core/bootstrap/_functions.scss
Executable file
@@ -0,0 +1,86 @@
|
||||
// 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
|
||||
@function color-yiq($color) {
|
||||
$r: red($color);
|
||||
$g: green($color);
|
||||
$b: blue($color);
|
||||
|
||||
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
||||
|
||||
@if ($yiq >= $yiq-contrasted-threshold) {
|
||||
@return $yiq-text-dark;
|
||||
} @else {
|
||||
@return $yiq-text-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Retrieve color Sass maps
|
||||
@function color($key: "blue") {
|
||||
@return map-get($colors, $key);
|
||||
}
|
||||
|
||||
@function theme-color($key: "primary") {
|
||||
@return map-get($theme-colors, $key);
|
||||
}
|
||||
|
||||
@function gray($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, $black, $white);
|
||||
$level: abs($level);
|
||||
|
||||
@return mix($color-base, $color, $level * $theme-color-interval);
|
||||
}
|
||||
929
html/scss/core/bootstrap/_variables.scss
Executable file
929
html/scss/core/bootstrap/_variables.scss
Executable file
@@ -0,0 +1,929 @@
|
||||
// Variables
|
||||
//
|
||||
// Variables should follow the `$component-state-property-size` formula for
|
||||
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
|
||||
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
// stylelint-disable
|
||||
$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: #6c757d !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$grays: () !default;
|
||||
$grays: map-merge((
|
||||
"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
|
||||
), $grays);
|
||||
|
||||
$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: () !default;
|
||||
$colors: map-merge((
|
||||
"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
|
||||
), $colors);
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$theme-colors: () !default;
|
||||
$theme-colors: map-merge((
|
||||
"primary": $primary,
|
||||
"secondary": $secondary,
|
||||
"success": $success,
|
||||
"info": $info,
|
||||
"warning": $warning,
|
||||
"danger": $danger,
|
||||
"light": $light,
|
||||
"dark": $dark
|
||||
), $theme-colors);
|
||||
// stylelint-enable
|
||||
|
||||
// Set a specific jump point for requesting color jumps
|
||||
$theme-color-interval: 8% !default;
|
||||
|
||||
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
|
||||
$yiq-contrasted-threshold: 150 !default;
|
||||
|
||||
// Customize the light and dark text colors for use in our YIQ color contrast function.
|
||||
$yiq-text-dark: $gray-900 !default;
|
||||
$yiq-text-light: $white !default;
|
||||
|
||||
// Options
|
||||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
|
||||
$enable-caret: true !default;
|
||||
$enable-rounded: true !default;
|
||||
$enable-shadows: false !default;
|
||||
$enable-gradients: false !default;
|
||||
$enable-transitions: true !default;
|
||||
$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
|
||||
$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.
|
||||
|
||||
// stylelint-disable
|
||||
$spacer: 1rem !default;
|
||||
$spacers: () !default;
|
||||
$spacers: map-merge((
|
||||
0: 0,
|
||||
1: ($spacer * .25),
|
||||
2: ($spacer * .5),
|
||||
3: $spacer,
|
||||
4: ($spacer * 1.5),
|
||||
5: ($spacer * 3)
|
||||
), $spacers);
|
||||
|
||||
// This variable affects the `.h-*` and `.w-*` classes.
|
||||
$sizes: () !default;
|
||||
$sizes: map-merge((
|
||||
25: 25%,
|
||||
50: 50%,
|
||||
75: 75%,
|
||||
100: 100%,
|
||||
auto: auto
|
||||
), $sizes);
|
||||
// stylelint-enable
|
||||
|
||||
// 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;
|
||||
|
||||
// Paragraphs
|
||||
//
|
||||
// Style p element.
|
||||
|
||||
$paragraph-margin-bottom: 1rem !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-color: $gray-300 !default;
|
||||
|
||||
$border-radius: .25rem !default;
|
||||
$border-radius-lg: .3rem !default;
|
||||
$border-radius-sm: .2rem !default;
|
||||
|
||||
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
|
||||
$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
|
||||
$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !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.
|
||||
|
||||
// stylelint-disable value-keyword-case
|
||||
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
||||
$font-family-base: $font-family-sans-serif !default;
|
||||
// stylelint-enable value-keyword-case
|
||||
|
||||
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
|
||||
$font-size-lg: ($font-size-base * 1.25) !default;
|
||||
$font-size-sm: ($font-size-base * .875) !default;
|
||||
|
||||
$font-weight-light: 300 !default;
|
||||
$font-weight-normal: 400 !default;
|
||||
$font-weight-bold: 700 !default;
|
||||
|
||||
$font-weight-base: $font-weight-normal !default;
|
||||
$line-height-base: 1.5 !default;
|
||||
|
||||
$h1-font-size: $font-size-base * 2.5 !default;
|
||||
$h2-font-size: $font-size-base * 2 !default;
|
||||
$h3-font-size: $font-size-base * 1.75 !default;
|
||||
$h4-font-size: $font-size-base * 1.5 !default;
|
||||
$h5-font-size: $font-size-base * 1.25 !default;
|
||||
$h6-font-size: $font-size-base !default;
|
||||
|
||||
$headings-margin-bottom: ($spacer / 2) !default;
|
||||
$headings-font-family: inherit !default;
|
||||
$headings-font-weight: 500 !default;
|
||||
$headings-line-height: 1.2 !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: ($font-size-base * 1.25) !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: .5rem !default;
|
||||
|
||||
$mark-bg: #fcf8e3 !default;
|
||||
|
||||
$hr-margin-y: $spacer !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-300 !default;
|
||||
|
||||
$table-head-bg: $gray-200 !default;
|
||||
$table-head-color: $gray-700 !default;
|
||||
|
||||
$table-dark-bg: $gray-900 !default;
|
||||
$table-dark-accent-bg: rgba($white, .05) !default;
|
||||
$table-dark-hover-bg: rgba($white, .075) !default;
|
||||
$table-dark-border-color: lighten($gray-900, 7.5%) !default;
|
||||
$table-dark-color: $body-bg !default;
|
||||
|
||||
$table-striped-order: odd !default;
|
||||
|
||||
$table-caption-color: $text-muted !default;
|
||||
|
||||
// Buttons + Forms
|
||||
//
|
||||
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
|
||||
|
||||
$input-btn-padding-y: .375rem !default;
|
||||
$input-btn-padding-x: .75rem !default;
|
||||
$input-btn-line-height: $line-height-base !default;
|
||||
|
||||
$input-btn-focus-width: .2rem !default;
|
||||
$input-btn-focus-color: rgba($component-active-bg, .25) !default;
|
||||
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
|
||||
|
||||
$input-btn-padding-y-sm: .25rem !default;
|
||||
$input-btn-padding-x-sm: .5rem !default;
|
||||
$input-btn-line-height-sm: $line-height-sm !default;
|
||||
|
||||
$input-btn-padding-y-lg: .5rem !default;
|
||||
$input-btn-padding-x-lg: 1rem !default;
|
||||
$input-btn-line-height-lg: $line-height-lg !default;
|
||||
|
||||
$input-btn-border-width: $border-width !default;
|
||||
|
||||
|
||||
// Buttons
|
||||
//
|
||||
// For each of Bootstrap's buttons, define text, background, and border color.
|
||||
|
||||
$btn-padding-y: $input-btn-padding-y !default;
|
||||
$btn-padding-x: $input-btn-padding-x !default;
|
||||
$btn-line-height: $input-btn-line-height !default;
|
||||
|
||||
$btn-padding-y-sm: $input-btn-padding-y-sm !default;
|
||||
$btn-padding-x-sm: $input-btn-padding-x-sm !default;
|
||||
$btn-line-height-sm: $input-btn-line-height-sm !default;
|
||||
|
||||
$btn-padding-y-lg: $input-btn-padding-y-lg !default;
|
||||
$btn-padding-x-lg: $input-btn-padding-x-lg !default;
|
||||
$btn-line-height-lg: $input-btn-line-height-lg !default;
|
||||
|
||||
$btn-border-width: $input-btn-border-width !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-width: $input-btn-focus-width !default;
|
||||
$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
|
||||
$btn-disabled-opacity: .65 !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: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
||||
|
||||
|
||||
// Forms
|
||||
|
||||
$label-margin-bottom: .5rem !default;
|
||||
|
||||
$input-padding-y: $input-btn-padding-y !default;
|
||||
$input-padding-x: $input-btn-padding-x !default;
|
||||
$input-line-height: $input-btn-line-height !default;
|
||||
|
||||
$input-padding-y-sm: $input-btn-padding-y-sm !default;
|
||||
$input-padding-x-sm: $input-btn-padding-x-sm !default;
|
||||
$input-line-height-sm: $input-btn-line-height-sm !default;
|
||||
|
||||
$input-padding-y-lg: $input-btn-padding-y-lg !default;
|
||||
$input-padding-x-lg: $input-btn-padding-x-lg !default;
|
||||
$input-line-height-lg: $input-btn-line-height-lg !default;
|
||||
|
||||
$input-bg: $white !default;
|
||||
$input-disabled-bg: $gray-200 !default;
|
||||
|
||||
$input-color: $gray-700 !default;
|
||||
$input-border-color: $gray-400 !default;
|
||||
$input-border-width: $input-btn-border-width !default;
|
||||
$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($component-active-bg, 25%) !default;
|
||||
$input-focus-color: $input-color !default;
|
||||
$input-focus-width: $input-btn-focus-width !default;
|
||||
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
|
||||
|
||||
$input-placeholder-color: $gray-600 !default;
|
||||
$input-plaintext-color: $body-color !default;
|
||||
|
||||
$input-height-border: $input-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-lg * $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 .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
||||
|
||||
$form-text-margin-top: .25rem !default;
|
||||
|
||||
$form-check-input-gutter: 1.25rem !default;
|
||||
$form-check-input-margin-y: .3rem !default;
|
||||
$form-check-input-margin-x: .25rem !default;
|
||||
|
||||
$form-check-inline-margin-x: .75rem !default;
|
||||
$form-check-inline-input-margin-x: .3125rem !default;
|
||||
|
||||
$form-group-margin-bottom: 1rem !default;
|
||||
|
||||
$input-group-addon-color: $input-color !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-x: 1rem !default;
|
||||
|
||||
$custom-control-indicator-size: 1rem !default;
|
||||
$custom-control-indicator-bg: $gray-300 !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-label-disabled-color: $gray-600 !default;
|
||||
|
||||
$custom-control-indicator-checked-color: $component-active-color !default;
|
||||
$custom-control-indicator-checked-bg: $component-active-bg !default;
|
||||
$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default;
|
||||
$custom-control-indicator-checked-box-shadow: none !default;
|
||||
|
||||
$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
|
||||
|
||||
$custom-control-indicator-active-color: $component-active-color !default;
|
||||
$custom-control-indicator-active-bg: lighten($component-active-bg, 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: $component-active-bg !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: $input-bg !default;
|
||||
$custom-select-disabled-bg: $gray-200 !default;
|
||||
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
|
||||
$custom-select-indicator-color: $gray-800 !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: $input-focus-border-color !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-select-font-size-lg: 125% !default;
|
||||
$custom-select-height-lg: $input-height-lg !default;
|
||||
|
||||
$custom-range-track-width: 100% !default;
|
||||
$custom-range-track-height: .5rem !default;
|
||||
$custom-range-track-cursor: pointer !default;
|
||||
$custom-range-track-bg: $gray-300 !default;
|
||||
$custom-range-track-border-radius: 1rem !default;
|
||||
$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;
|
||||
|
||||
$custom-range-thumb-width: 1rem !default;
|
||||
$custom-range-thumb-height: $custom-range-thumb-width !default;
|
||||
$custom-range-thumb-bg: $component-active-bg !default;
|
||||
$custom-range-thumb-border: 0 !default;
|
||||
$custom-range-thumb-border-radius: 1rem !default;
|
||||
$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
|
||||
$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
|
||||
$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;
|
||||
|
||||
$custom-file-height: $input-height !default;
|
||||
$custom-file-height-inner: $input-height-inner !default;
|
||||
$custom-file-focus-border-color: $input-focus-border-color !default;
|
||||
$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default;
|
||||
|
||||
$custom-file-padding-y: $input-btn-padding-y !default;
|
||||
$custom-file-padding-x: $input-btn-padding-x !default;
|
||||
$custom-file-line-height: $input-btn-line-height !default;
|
||||
$custom-file-color: $input-color !default;
|
||||
$custom-file-bg: $input-bg !default;
|
||||
$custom-file-border-width: $input-btn-border-width !default;
|
||||
$custom-file-border-color: $input-border-color !default;
|
||||
$custom-file-border-radius: $input-border-radius !default;
|
||||
$custom-file-box-shadow: $input-box-shadow !default;
|
||||
$custom-file-button-color: $custom-file-color !default;
|
||||
$custom-file-button-bg: $input-group-addon-bg !default;
|
||||
$custom-file-text: (
|
||||
en: "Browse"
|
||||
) !default;
|
||||
|
||||
|
||||
// Form validation
|
||||
$form-feedback-margin-top: $form-text-margin-top !default;
|
||||
$form-feedback-font-size: $small-font-size !default;
|
||||
$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-spacer: .125rem !default;
|
||||
$dropdown-bg: $white !default;
|
||||
$dropdown-border-color: rgba($black, .15) !default;
|
||||
$dropdown-border-radius: $border-radius !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: $gray-300 !default;
|
||||
$nav-tabs-border-width: $border-width !default;
|
||||
$nav-tabs-border-radius: $border-radius !default;
|
||||
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
|
||||
$nav-tabs-link-active-color: $gray-700 !default;
|
||||
$nav-tabs-link-active-bg: $body-bg !default;
|
||||
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !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;
|
||||
|
||||
$nav-divider-color: $gray-200 !default;
|
||||
$nav-divider-margin-y: ($spacer / 2) !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: ($spacer / 2) !default;
|
||||
$navbar-padding-x: $spacer !default;
|
||||
|
||||
$navbar-nav-link-padding-x: .5rem !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: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
|
||||
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
|
||||
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-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: $white !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: $gray-300 !default;
|
||||
|
||||
$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
|
||||
$pagination-focus-outline: 0 !default;
|
||||
|
||||
$pagination-hover-color: $link-hover-color !default;
|
||||
$pagination-hover-bg: $gray-200 !default;
|
||||
$pagination-hover-border-color: $gray-300 !default;
|
||||
|
||||
$pagination-active-color: $component-active-color !default;
|
||||
$pagination-active-bg: $component-active-bg !default;
|
||||
$pagination-active-border-color: $pagination-active-bg !default;
|
||||
|
||||
$pagination-disabled-color: $gray-600 !default;
|
||||
$pagination-disabled-bg: $white !default;
|
||||
$pagination-disabled-border-color: $gray-300 !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: $border-width !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-group-margin: ($grid-gutter-width / 2) !default;
|
||||
$card-deck-margin: $card-group-margin !default;
|
||||
|
||||
$card-columns-count: 3 !default;
|
||||
$card-columns-gap: 1.25rem !default;
|
||||
$card-columns-margin: $card-spacer-y !default;
|
||||
|
||||
|
||||
// Tooltips
|
||||
|
||||
$tooltip-font-size: $font-size-sm !default;
|
||||
$tooltip-max-width: 200px !default;
|
||||
$tooltip-color: $white !default;
|
||||
$tooltip-bg: $black !default;
|
||||
$tooltip-border-radius: $border-radius !default;
|
||||
$tooltip-opacity: .9 !default;
|
||||
$tooltip-padding-y: .25rem !default;
|
||||
$tooltip-padding-x: .5rem !default;
|
||||
$tooltip-margin: 0 !default;
|
||||
|
||||
$tooltip-arrow-width: .8rem !default;
|
||||
$tooltip-arrow-height: .4rem !default;
|
||||
$tooltip-arrow-color: $tooltip-bg !default;
|
||||
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-font-size: $font-size-sm !default;
|
||||
$popover-bg: $white !default;
|
||||
$popover-max-width: 276px !default;
|
||||
$popover-border-width: $border-width !default;
|
||||
$popover-border-color: rgba($black, .2) !default;
|
||||
$popover-border-radius: $border-radius-lg !default;
|
||||
$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
|
||||
|
||||
$popover-header-bg: darken($popover-bg, 3%) !default;
|
||||
$popover-header-color: $headings-color !default;
|
||||
$popover-header-padding-y: .5rem !default;
|
||||
$popover-header-padding-x: .75rem !default;
|
||||
|
||||
$popover-body-color: $body-color !default;
|
||||
$popover-body-padding-y: $popover-header-padding-y !default;
|
||||
$popover-body-padding-x: $popover-header-padding-x !default;
|
||||
|
||||
$popover-arrow-width: 1rem !default;
|
||||
$popover-arrow-height: .5rem !default;
|
||||
$popover-arrow-color: $popover-bg !default;
|
||||
|
||||
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
|
||||
|
||||
|
||||
// Badges
|
||||
|
||||
$badge-font-size: 75% !default;
|
||||
$badge-font-weight: $font-weight-bold !default;
|
||||
$badge-padding-y: .25em !default;
|
||||
$badge-padding-x: .4em !default;
|
||||
$badge-border-radius: $border-radius !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: 1rem !default;
|
||||
|
||||
$modal-dialog-margin: .5rem !default;
|
||||
$modal-dialog-margin-y-sm-up: 1.75rem !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-border-radius: $border-radius-lg !default;
|
||||
$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
|
||||
$modal-content-box-shadow-sm-up: 0 .5rem 1rem 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: 1rem !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;
|
||||
|
||||
$alert-bg-level: -10 !default;
|
||||
$alert-border-level: -9 !default;
|
||||
$alert-color-level: 6 !default;
|
||||
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-height: 1rem !default;
|
||||
$progress-font-size: ($font-size-base * .75) !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: $gray-300 !default;
|
||||
$thumbnail-border-radius: $border-radius !default;
|
||||
$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !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-margin-bottom: 1rem !default;
|
||||
|
||||
$breadcrumb-bg: $gray-200 !default;
|
||||
$breadcrumb-divider-color: $gray-600 !default;
|
||||
$breadcrumb-active-color: $gray-600 !default;
|
||||
$breadcrumb-divider: quote("/") !default;
|
||||
|
||||
$breadcrumb-border-radius: $border-radius !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='M5.25 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='M2.75 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; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
|
||||
|
||||
|
||||
// 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: 87.5% !default;
|
||||
$code-color: $pink !default;
|
||||
|
||||
$kbd-padding-y: .2rem !default;
|
||||
$kbd-padding-x: .4rem !default;
|
||||
$kbd-font-size: $code-font-size !default;
|
||||
$kbd-color: $white !default;
|
||||
$kbd-bg: $gray-900 !default;
|
||||
|
||||
$pre-color: $gray-900 !default;
|
||||
$pre-scrollable-max-height: 340px !default;
|
||||
|
||||
|
||||
// Printing
|
||||
$print-page-size: a3 !default;
|
||||
$print-body-min-width: map-get($grid-breakpoints, "lg") !default;
|
||||
305
html/scss/free/_animations-basic.scss
Executable file
305
html/scss/free/_animations-basic.scss
Executable file
@@ -0,0 +1,305 @@
|
||||
/*!
|
||||
* animate.css -http://daneden.me/animate
|
||||
* Version - 3.6.0
|
||||
* Licensed under the MIT license - http://opensource.org/licenses/MIT
|
||||
*
|
||||
* Copyright (c) 2018 Daniel Eden
|
||||
*/
|
||||
|
||||
.animated {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animated.infinite {
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeIn {
|
||||
-webkit-animation-name: fadeIn;
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInDown {
|
||||
-webkit-animation-name: fadeInDown;
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInLeft {
|
||||
-webkit-animation-name: fadeInLeft;
|
||||
animation-name: fadeInLeft;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInRight {
|
||||
-webkit-animation-name: fadeInRight;
|
||||
animation-name: fadeInRight;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInUp {
|
||||
-webkit-animation-name: fadeInUp;
|
||||
animation-name: fadeInUp;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOut {
|
||||
-webkit-animation-name: fadeOut;
|
||||
animation-name: fadeOut;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeOutDown {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOutDown {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutDown {
|
||||
-webkit-animation-name: fadeOutDown;
|
||||
animation-name: fadeOutDown;
|
||||
}
|
||||
|
||||
@keyframes fadeOutLeft {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutLeft {
|
||||
-webkit-animation-name: fadeOutLeft;
|
||||
animation-name: fadeOutLeft;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeOutRight {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOutRight {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutRight {
|
||||
-webkit-animation-name: fadeOutRight;
|
||||
animation-name: fadeOutRight;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeOutUp {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOutUp {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutUp {
|
||||
-webkit-animation-name: fadeOutUp;
|
||||
animation-name: fadeOutUp;
|
||||
}
|
||||
3179
html/scss/free/_animations-extended.scss
Executable file
3179
html/scss/free/_animations-extended.scss
Executable file
File diff suppressed because it is too large
Load Diff
14
html/scss/free/_badges.scss
Executable file
14
html/scss/free/_badges.scss
Executable file
@@ -0,0 +1,14 @@
|
||||
// Badges
|
||||
.badge {
|
||||
box-shadow: $z-depth-1;
|
||||
border-radius: $border-radius-base;
|
||||
color: $white !important;
|
||||
}
|
||||
.badge-pill {
|
||||
border-radius: $badge-pill-border-radius;
|
||||
padding-right: $badge-pill-padding-x;
|
||||
padding-left: $badge-pill-padding-x;
|
||||
}
|
||||
@each $name, $color in $basic-mdb-colors {
|
||||
@include make-badge($name, $color);
|
||||
}
|
||||
122
html/scss/free/_buttons.scss
Executable file
122
html/scss/free/_buttons.scss
Executable file
@@ -0,0 +1,122 @@
|
||||
// Buttons
|
||||
.btn {
|
||||
box-shadow: $z-depth-1;
|
||||
@include button-size($btn-padding-y-basic, $btn-padding-x-basic, $btn-font-size-basic);
|
||||
transition: $btn-transition;
|
||||
margin: $btn-margin-basic;
|
||||
border: 0;
|
||||
border-radius: $border-radius-base;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
color: $btn-color-basic;
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: $z-depth-1-half;
|
||||
outline: 0;
|
||||
}
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active {
|
||||
box-shadow: $z-depth-1-half;
|
||||
}
|
||||
.fa {
|
||||
position: relative;
|
||||
font-size: $btn-icon-basic;
|
||||
&.right {
|
||||
margin-left: $btn-icon-margin;
|
||||
}
|
||||
&.left {
|
||||
margin-right: $btn-icon-margin;
|
||||
}
|
||||
}
|
||||
&.btn-lg {
|
||||
@include button-size($btn-padding-y-large, $btn-padding-x-large, $btn-font-size-large);
|
||||
.fa {
|
||||
font-size: $btn-icon-large;
|
||||
}
|
||||
}
|
||||
&.btn-md {
|
||||
@include button-size($btn-padding-y-medium, $btn-padding-x-medium, $btn-font-size-medium);
|
||||
.fa {
|
||||
font-size: $btn-icon-medium;
|
||||
}
|
||||
}
|
||||
&.btn-sm {
|
||||
@include button-size($btn-padding-y-small, $btn-padding-x-small, $btn-font-size-small);
|
||||
.fa {
|
||||
font-size: $btn-icon-small;
|
||||
}
|
||||
}
|
||||
&.btn-tb {
|
||||
padding: $btn-tb-padding-y $btn-tb-padding-x;
|
||||
}
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
box-shadow: $z-depth-1;
|
||||
}
|
||||
}
|
||||
&.btn-block {
|
||||
margin: inherit;
|
||||
}
|
||||
&.btn-link {
|
||||
@extend .black-text;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
box-shadow: none !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
&[class*="btn-outline-"] {
|
||||
padding-top: $btn-outline-padding-y-basic;
|
||||
padding-bottom: $btn-outline-padding-y-basic;
|
||||
&.btn-lg {
|
||||
padding-top: $btn-outline-padding-y-large;
|
||||
padding-bottom: $btn-outline-padding-y-large;
|
||||
}
|
||||
&.btn-md {
|
||||
padding-top: $btn-outline-padding-y-medium;
|
||||
padding-bottom: $btn-outline-padding-y-medium;
|
||||
}
|
||||
&.btn-sm {
|
||||
padding-top: $btn-outline-padding-y-small;
|
||||
padding-bottom: $btn-outline-padding-y-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-group {
|
||||
.btn {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
// Overwrite default button icon size
|
||||
.btn {
|
||||
.fa-lg {font-size: 1.33333333em !important;}
|
||||
.fa-2x {font-size: 2em !important;}
|
||||
.fa-3x {font-size: 3em !important;}
|
||||
.fa-4x {font-size: 4em !important;}
|
||||
.fa-5x {font-size: 5em !important;}
|
||||
}
|
||||
@each $btn_name, $color_value in $mdb-colors {
|
||||
@include make-button($btn_name, $color_value);
|
||||
@include make-outline-button($btn_name, $color_value);
|
||||
}
|
||||
|
||||
// button,
|
||||
// html [type="file"] {
|
||||
// -webkit-appearance: button;
|
||||
// appearance: button;
|
||||
// }
|
||||
|
||||
// button::-moz-focus-inner,
|
||||
// [type="file"]::-moz-focus-inner {
|
||||
// padding: 0;
|
||||
// border-style: none;
|
||||
// }
|
||||
28
html/scss/free/_cards.scss
Executable file
28
html/scss/free/_cards.scss
Executable file
@@ -0,0 +1,28 @@
|
||||
// Cards
|
||||
.card {
|
||||
box-shadow: $z-depth-1;
|
||||
border: 0;
|
||||
font-weight: 400;
|
||||
&[class*="border"] {
|
||||
border: 1px solid $grey-base;
|
||||
box-shadow: none;
|
||||
}
|
||||
.card-body {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 400;
|
||||
}
|
||||
.card-title {
|
||||
a {
|
||||
transition: $md-card-link-transition;
|
||||
&:hover {
|
||||
transition: $md-card-link-transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-text {
|
||||
color: $md-card-text-color;
|
||||
font-size: $md-card-font-size;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
50
html/scss/free/_carousels.scss
Executable file
50
html/scss/free/_carousels.scss
Executable file
@@ -0,0 +1,50 @@
|
||||
// Carousels
|
||||
.carousel {
|
||||
.carousel-control-prev-icon,
|
||||
.carousel-control-next-icon {
|
||||
width: $carousel-control-icon-width;
|
||||
height: $carousel-control-icon-height;
|
||||
}
|
||||
.carousel-control-prev-icon {
|
||||
background-image: $carousel-control-prev-icon;
|
||||
}
|
||||
.carousel-control-next-icon {
|
||||
background-image: $carousel-control-next-icon;
|
||||
}
|
||||
.carousel-indicators {
|
||||
li {
|
||||
width: $carousel-indicators-width;
|
||||
height: $carousel-indicators-height;
|
||||
border-radius: $carousel-indicators-border-radius;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.carousel-fade {
|
||||
.carousel-item {
|
||||
opacity: 0;
|
||||
transition-duration: $carousel-transition-duration;
|
||||
transition-property: opacity;
|
||||
}
|
||||
.carousel-item.active,
|
||||
.carousel-item-next.carousel-item-left,
|
||||
.carousel-item-prev.carousel-item-right {
|
||||
opacity: 1;
|
||||
}
|
||||
.carousel-item-left,
|
||||
.carousel-item-right {
|
||||
&.active {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.carousel-item-next,
|
||||
.carousel-item-prev,
|
||||
.carousel-item.active,
|
||||
.carousel-item-left.active,
|
||||
.carousel-item-prev.active {
|
||||
transform: $carousel-item-transform;
|
||||
@supports (transform-style: preserve-3d) {
|
||||
transform: $carousel-item-transform-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
22
html/scss/free/_depreciated.scss
Normal file
22
html/scss/free/_depreciated.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
// These settings will be only for one version
|
||||
|
||||
// Masks
|
||||
.view {
|
||||
.full-bg-img {
|
||||
height: 100%;
|
||||
}
|
||||
.full-bg-img,
|
||||
.full-bg-img video {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
// Full background
|
||||
.full-height,
|
||||
.full-height body,
|
||||
.full-height header,
|
||||
.full-height header .view {
|
||||
height: 100%;
|
||||
}
|
||||
10
html/scss/free/_dropdowns.scss
Executable file
10
html/scss/free/_dropdowns.scss
Executable file
@@ -0,0 +1,10 @@
|
||||
// Dropdowns
|
||||
.dropdown {
|
||||
.dropdown-menu {
|
||||
.dropdown-item {
|
||||
&:active {
|
||||
background-color: $grey-darken-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
html/scss/free/_footers.scss
Executable file
18
html/scss/free/_footers.scss
Executable file
@@ -0,0 +1,18 @@
|
||||
// Footers
|
||||
footer {
|
||||
&.page-footer {
|
||||
bottom: 0;
|
||||
color: $white-base;
|
||||
.container-fluid {
|
||||
width: auto;
|
||||
}
|
||||
.footer-copyright {
|
||||
overflow: hidden;
|
||||
background-color: $footer-copyright-bg-color;
|
||||
color: $footer-copyright-color;
|
||||
}
|
||||
a {
|
||||
color: $white-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
183
html/scss/free/_forms.scss
Executable file
183
html/scss/free/_forms.scss
Executable file
@@ -0,0 +1,183 @@
|
||||
// Forms basic
|
||||
// Input + label wrapper styles
|
||||
.md-form {
|
||||
// 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
|
||||
transition: $input-transition;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid $input-border-color;
|
||||
border-radius: 0;
|
||||
box-sizing: content-box;
|
||||
background-color: transparent;
|
||||
|
||||
// Focused input style
|
||||
&:focus:not([readonly]) {
|
||||
box-shadow: 0 1px 0 0 $input-md-focus-color;
|
||||
border-bottom: 1px solid $input-md-focus-color;
|
||||
// Focused label style
|
||||
+ label {
|
||||
color: $input-md-focus-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Form message shared styles
|
||||
+ label:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: $input-label-after-top;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
transition: $input-label-after-transition;
|
||||
}
|
||||
|
||||
// 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-control.valid + label:after,
|
||||
&.form-control:focus.valid + label:after {
|
||||
top: $input-label-valid-top;
|
||||
}
|
||||
&.form-control.invalid + label:after,
|
||||
&.form-control:focus.invalid + label:after {
|
||||
top: $input-label-invalid-top;
|
||||
}
|
||||
&.form-control-lg.valid + label:after,
|
||||
&.form-control-lg:focus.valid + label:after {
|
||||
top: $input-label-valid-top-lg;
|
||||
}
|
||||
&.form-control-lg.invalid + label:after,
|
||||
&.form-control-lg:focus.invalid + label:after {
|
||||
top: $input-label-invalid-top-lg;
|
||||
}
|
||||
&.form-control-sm.valid + label:after,
|
||||
&.form-control-sm:focus.valid + label:after {
|
||||
top: $input-label-valid-top-sm;
|
||||
}
|
||||
&.form-control-sm.invalid + label:after,
|
||||
&.form-control-sm:focus.invalid + label:after {
|
||||
top: $input-label-invalid-top-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.was-validated {
|
||||
input[type=text] {
|
||||
&:valid {
|
||||
+ label {
|
||||
color: $input-success-color !important;
|
||||
}
|
||||
}
|
||||
&:invalid {
|
||||
+ label {
|
||||
color: $input-error-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
&:valid:focus {
|
||||
box-shadow: 0 1px 0 0 $input-success-color !important;
|
||||
}
|
||||
&:valid {
|
||||
border-color: $input-success-color !important;
|
||||
}
|
||||
&:invalid:focus {
|
||||
box-shadow: 0 1px 0 0 $input-error-color !important;
|
||||
}
|
||||
&:invalid {
|
||||
border-color: $input-error-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Input with label
|
||||
.form-control {
|
||||
margin: 0 0 $input-form-control-margin-bottom 0;
|
||||
border-radius: 0;
|
||||
padding: $input-form-control-padding-top 0 $input-form-control-padding-bottom 0;
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
}
|
||||
&:disabled,
|
||||
&[readonly] {
|
||||
border-bottom: 1px solid $grey-lighten-1;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@include make-input($input-validate-mb, $input-label-font-size, $input-label-active-font-size, $input-prefix-top, $input-prefix-font-size, $input-prefix-margin-left, $input-prefix-width, $input-form-text-ml);
|
||||
position: relative;
|
||||
margin-top: $input-md-form-margin-top;
|
||||
margin-bottom: $input-md-form-margin-bottom;
|
||||
label {
|
||||
position: absolute;
|
||||
top: $input-label-top;
|
||||
left: 0;
|
||||
transition: $input-label-transition;
|
||||
cursor: text;
|
||||
color: $input-label-color;
|
||||
&.active {
|
||||
transform: $input-label-active-transform;
|
||||
}
|
||||
}
|
||||
.prefix {
|
||||
position: absolute;
|
||||
transition: $input-prefix-transition;
|
||||
&.active {
|
||||
color: $input-md-focus-color;
|
||||
}
|
||||
}
|
||||
&.form-lg {
|
||||
@include make-input($input-validate-mb-lg, $input-label-font-size-lg, $input-label-active-font-size-lg, $input-prefix-top-lg, $input-prefix-font-size-lg, $input-prefix-margin-left-lg, $input-prefix-width-lg, $input-form-text-ml-lg);
|
||||
}
|
||||
&.form-sm {
|
||||
@include make-input($input-validate-mb-sm, $input-label-font-size-sm, $input-label-active-font-size-sm, $input-prefix-top-sm, $input-prefix-font-size-sm, $input-prefix-margin-left-sm, $input-prefix-width-sm, $input-form-text-ml-sm);
|
||||
}
|
||||
|
||||
// Textarea
|
||||
textarea {
|
||||
&.md-textarea {
|
||||
overflow-y: hidden;
|
||||
padding: $textarea-padding 0;
|
||||
resize: none;
|
||||
}
|
||||
&.md-textarea-auto {
|
||||
padding: 0;
|
||||
padding-top: $textarea-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
21
html/scss/free/_input-group.scss
Executable file
21
html/scss/free/_input-group.scss
Executable file
@@ -0,0 +1,21 @@
|
||||
// Input group
|
||||
.md-form {
|
||||
&.input-group {
|
||||
label {
|
||||
top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.input-group-text {
|
||||
background-color: $input-group-text-bgc;
|
||||
&.md-addon {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
margin: 0;
|
||||
padding: $input-group-form-control-py $input-group-form-control-px;
|
||||
}
|
||||
}
|
||||
}
|
||||
28
html/scss/free/_list-group.scss
Executable file
28
html/scss/free/_list-group.scss
Executable file
@@ -0,0 +1,28 @@
|
||||
// List group
|
||||
.media {
|
||||
.media-left {
|
||||
padding: $list-group-padding;
|
||||
img {
|
||||
box-shadow: $z-depth-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-group {
|
||||
.list-group-item {
|
||||
&:first-child {
|
||||
border-top-left-radius: $border-radius-base;
|
||||
border-top-right-radius: $border-radius-base;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom-left-radius: $border-radius-base;
|
||||
border-bottom-right-radius: $border-radius-base;
|
||||
}
|
||||
}
|
||||
a,
|
||||
button {
|
||||
transition: $list-group-transition;
|
||||
&:hover {
|
||||
transition: $list-group-transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
276
html/scss/free/_modals.scss
Executable file
276
html/scss/free/_modals.scss
Executable file
@@ -0,0 +1,276 @@
|
||||
// Modals
|
||||
// Styles for body
|
||||
body {
|
||||
&.modal-open {
|
||||
overflow: auto;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
&.scrollable {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// *** ENHANCED BOOTSTRAP MODALS ***///
|
||||
// General styles
|
||||
.modal-dialog {
|
||||
.modal-content {
|
||||
box-shadow: $z-depth-1-half;
|
||||
border: 0;
|
||||
border-radius: $border-radius-base;
|
||||
.modal-header {
|
||||
border-top-left-radius: $border-radius-base;
|
||||
border-top-right-radius: $border-radius-base;
|
||||
}
|
||||
}
|
||||
// Cascading modals
|
||||
&.cascading-modal {
|
||||
margin-top: 10%;
|
||||
.close {
|
||||
opacity: 1;
|
||||
text-shadow: none;
|
||||
color: $white-base;
|
||||
outline: 0;
|
||||
}
|
||||
// Cascading header
|
||||
.modal-header {
|
||||
box-shadow: $z-depth-1-half;
|
||||
margin: $cascading-modal-margin-top $cascading-modal-margin-right $cascading-modal-margin-bottom $cascading-modal-margin-left;
|
||||
border: none;
|
||||
border-radius: $border-radius-base;
|
||||
padding: $cascading-modal-padding;
|
||||
text-align: center;
|
||||
.close {
|
||||
margin-right: $cascading-modal-close-margin-right;
|
||||
}
|
||||
.title {
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
font-size: $cascading-modal-font-size;
|
||||
.fa {
|
||||
margin-right: $cascading-modal-fa-margin-right;
|
||||
}
|
||||
}
|
||||
.social-buttons {
|
||||
margin-top: $cascading-modal-social-margin-top;
|
||||
a {
|
||||
font-size: $cascading-modal-a-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Cascading tabs nav
|
||||
.modal-c-tabs {
|
||||
.nav-tabs {
|
||||
box-shadow: $z-depth-1;
|
||||
margin: $cascading-modal-tabs-margin-top $cascading-modal-tabs-margin-x 0 $cascading-modal-tabs-margin-x;
|
||||
}
|
||||
.tab-content {
|
||||
padding: $cascading-modal-tabs-padding-top 0 0 0;
|
||||
}
|
||||
}
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
li {
|
||||
flex: 1;
|
||||
a {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Footer customization
|
||||
.modal-body,
|
||||
.modal-footer {
|
||||
padding-left: $modal-body-padding-left;
|
||||
padding-right: $modal-body-padding-right;
|
||||
color: $grey-darken-2;
|
||||
.additional-option {
|
||||
margin-top: $modal-body-margin-top;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
// Cascading avatar
|
||||
&.modal-avatar {
|
||||
margin-top: $modal-avatar-margin-top;
|
||||
.modal-header {
|
||||
box-shadow: none;
|
||||
@extend .img-fluid;
|
||||
margin: $modal-avatar-header-margin-top 0 $modal-avatar-header-margin-bottom;
|
||||
img {
|
||||
width: $modal-avatar-img-width;
|
||||
box-shadow: $z-depth-2;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Modal notify
|
||||
&.modal-notify {
|
||||
.heading {
|
||||
margin: 0;
|
||||
padding: $modal-notify-heading-padding;
|
||||
font-size: $modal-notify-font-size;
|
||||
color: $white-base;
|
||||
}
|
||||
.modal-header {
|
||||
box-shadow: $z-depth-1;
|
||||
border: 0;
|
||||
}
|
||||
.close {
|
||||
opacity: 1;
|
||||
}
|
||||
.modal-body {
|
||||
padding: $modal-notify-body-padding;
|
||||
color: $grey-darken-2;
|
||||
}
|
||||
@each $name, $color in $basic {
|
||||
&.modal-#{$name} {
|
||||
.modal-header {
|
||||
background-color: $color;
|
||||
}
|
||||
.fa {
|
||||
color: $color;
|
||||
}
|
||||
.badge {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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 {
|
||||
bottom: $modal-distance;
|
||||
left: $modal-distance;
|
||||
}
|
||||
&.modal-bottom-right {
|
||||
bottom: $modal-distance;
|
||||
right: $modal-distance;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.fade {
|
||||
&.top:not(.show) .modal-dialog {
|
||||
transform: $modal-fade-top-transform;
|
||||
}
|
||||
&.left:not(.show) .modal-dialog {
|
||||
transform: $modal-fade-left-transform;
|
||||
}
|
||||
&.right:not(.show) .modal-dialog {
|
||||
transform: $modal-fade-right-transform;
|
||||
}
|
||||
&.bottom:not(.show) .modal-dialog {
|
||||
transform: $modal-fade-bottom-transform;
|
||||
}
|
||||
}
|
||||
@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;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
&.modal-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.modal-full-height {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
width: $modal-width;
|
||||
height: auto;
|
||||
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 {
|
||||
width: 90%;
|
||||
max-width: 90%;
|
||||
@media (min-width: $medium-screen) {
|
||||
width: $modal-full-height-medium-screen;
|
||||
max-width: $modal-full-height-medium-screen;
|
||||
}
|
||||
@media (min-width: $large-screen) {
|
||||
width: $modal-full-height-large-screen;
|
||||
max-width: $modal-full-height-large-screen;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-side {
|
||||
position: absolute;
|
||||
bottom: $modal-distance;
|
||||
right: $modal-distance;
|
||||
margin: 0;
|
||||
width: $modal-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-tabs {
|
||||
border-radius: $md-card-border-radius;
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
border-radius: $md-card-border-radius;
|
||||
background-color: inherit;
|
||||
color: $white-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
10
html/scss/free/_msc.scss
Executable file
10
html/scss/free/_msc.scss
Executable file
@@ -0,0 +1,10 @@
|
||||
// Miscellaneous
|
||||
// Edge Headers
|
||||
.edge-header {
|
||||
display: block;
|
||||
height: $edge-header-height;
|
||||
background-color: $edge-header-background-color;
|
||||
}
|
||||
.free-bird {
|
||||
margin-top: $edge-header-margin-top;
|
||||
}
|
||||
99
html/scss/free/_navbars.scss
Executable file
99
html/scss/free/_navbars.scss
Executable file
@@ -0,0 +1,99 @@
|
||||
// Navbars
|
||||
.navbar {
|
||||
box-shadow: $z-depth-1;
|
||||
font-weight: $navbar-font-weight;
|
||||
form {
|
||||
.md-form {
|
||||
input {
|
||||
margin: 0 $navbar-form-input-mr $navbar-form-input-mb $navbar-form-input-ml;
|
||||
}
|
||||
}
|
||||
}
|
||||
.breadcrumb {
|
||||
margin: 0;
|
||||
padding: $navbar-breadcrumb-padding-top 0 0 $navbar-breadcrumb-padding-left;
|
||||
background-color: inherit;
|
||||
font-size: $navbar-double-font-size;
|
||||
font-weight: $navbar-font-weight;
|
||||
.breadcrumb-item {
|
||||
color: $white-base;
|
||||
&.active {
|
||||
color: $navbar-breadcrumb-color;
|
||||
}
|
||||
&:before {
|
||||
color: $navbar-breadcrumb-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-toggler {
|
||||
outline: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
.nav-flex-icons {
|
||||
flex-direction: row;
|
||||
}
|
||||
.container {
|
||||
@media (max-width: $medium-screen) {
|
||||
width: 100%;
|
||||
.navbar-toggler-right {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
display: block;
|
||||
&.disabled {
|
||||
&:active {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.fa {
|
||||
padding-right: $navbar-flex-icons-padding-lg;
|
||||
padding-left: $navbar-flex-icons-padding-lg;
|
||||
}
|
||||
@media (max-width: $medium-screen) {
|
||||
padding-right: $navbar-flex-icons-padding-md;
|
||||
padding-left: $navbar-flex-icons-padding-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
position: absolute !important;
|
||||
margin-top: 0;
|
||||
a {
|
||||
padding: $navbar-dropdown-menu-padding;
|
||||
font-size: $navbar-dropdown-font-size;
|
||||
font-weight: $navbar-font-weight;
|
||||
color: $black !important;
|
||||
}
|
||||
form {
|
||||
@media (max-width: $small-screen) {
|
||||
width: 17rem;
|
||||
}
|
||||
@media (min-width: $small-screen) {
|
||||
width: 22rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.navbar-light {
|
||||
@include make-navbar($navbar-light-disabled-color, $navbar-light-toggler-icon, $black, $navbar-light-hover-color, $navbar-light-bg-active-color);
|
||||
}
|
||||
&.navbar-dark {
|
||||
@include make-navbar($navbar-dark-disabled-color, $navbar-dark-toggler-icon, $white, $navbar-dark-hover-color, $navbar-dark-bg-active-color);
|
||||
}
|
||||
&.scrolling-navbar {
|
||||
@media (min-width: $small-screen) {
|
||||
transition: $navbar-scrolling-transition;
|
||||
padding-top: $navbar-scrolling-padding;
|
||||
padding-bottom: $navbar-scrolling-padding;
|
||||
.navbar-nav > li {
|
||||
transition-duration: $navbar-scrolling-transition-duration;
|
||||
}
|
||||
&.top-nav-collapse {
|
||||
padding-top: $navbar-top-collapse-padding;
|
||||
padding-bottom: $navbar-top-collapse-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
83
html/scss/free/_pagination.scss
Executable file
83
html/scss/free/_pagination.scss
Executable file
@@ -0,0 +1,83 @@
|
||||
// Pagination
|
||||
.pagination {
|
||||
.page-item {
|
||||
&.active {
|
||||
.page-link {
|
||||
box-shadow: $z-depth-1;
|
||||
transition: $pagination-active-transition;
|
||||
border-radius: $border-radius-base;
|
||||
background-color: $primary-color;
|
||||
color: $white-base;
|
||||
&:hover {
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
.page-link {
|
||||
color: $pagination-page-item-disabled-color;
|
||||
}
|
||||
}
|
||||
.page-link {
|
||||
transition: $pagination-page-link-transition;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
font-size: $pagination-page-link-font-size;
|
||||
color: $pagination-page-link-color;
|
||||
&:hover {
|
||||
transition: $pagination-page-link-transition;
|
||||
border-radius: $border-radius-base;
|
||||
background-color: $pagination-page-link-hover-bg-color;
|
||||
}
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-lg {
|
||||
.page-item {
|
||||
.page-link {
|
||||
font-size: $pagination-page-link-font-size-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-sm {
|
||||
.page-item {
|
||||
.page-link {
|
||||
font-size: $pagination-page-link-font-size-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-circle {
|
||||
.page-item {
|
||||
.page-link {
|
||||
margin-left: $pagination-circle-margin-x;
|
||||
margin-right: $pagination-circle-margin-x;
|
||||
border-radius: $pagination-circle-border-radius;
|
||||
&:hover {
|
||||
border-radius: $pagination-circle-border-radius;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.page-link {
|
||||
border-radius: $pagination-circle-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@each $name, $color in $pagination-colors {
|
||||
&.pg-#{$name} {
|
||||
.page-item {
|
||||
&.active {
|
||||
.page-link {
|
||||
background-color: $color;
|
||||
&:hover {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
66
html/scss/free/_tables.scss
Executable file
66
html/scss/free/_tables.scss
Executable file
@@ -0,0 +1,66 @@
|
||||
// Tables
|
||||
table {
|
||||
th {
|
||||
font-size: $table-th-font-size;
|
||||
font-weight: 400;
|
||||
}
|
||||
td {
|
||||
font-size: $table-td-font-size;
|
||||
font-weight: 300;
|
||||
}
|
||||
&.table {
|
||||
thead th {
|
||||
border-top: none;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding-top: $table-th-padding-top;
|
||||
padding-bottom: $table-td-padding-bottom;
|
||||
}
|
||||
a {
|
||||
margin: 0;
|
||||
color: $table-a-color;
|
||||
}
|
||||
.label-table {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: $table-label-height;
|
||||
height: $table-label-line-height;
|
||||
}
|
||||
&.btn-table {
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.table-hover {
|
||||
tbody {
|
||||
tr {
|
||||
&:hover {
|
||||
transition: $table-hover-transition;
|
||||
background-color: $table-hover-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.th-lg {
|
||||
min-width: $table-th-lg-min-width;
|
||||
}
|
||||
.th-sm {
|
||||
min-width: $table-th-sm-min-width;
|
||||
}
|
||||
&.table-sm {
|
||||
th,
|
||||
td {
|
||||
padding-top: $table-sm-padding-y;
|
||||
padding-bottom: $table-sm-padding-y;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-scroll-vertical {
|
||||
max-height: $table-scroll-vertical-max-height;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.table-fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
121
html/scss/mdb.scss
Normal file
121
html/scss/mdb.scss
Normal file
@@ -0,0 +1,121 @@
|
||||
/*!
|
||||
* Material Design for Bootstrap 4
|
||||
* Version: MDB Admin Dashboard 4.5.8
|
||||
*
|
||||
*
|
||||
* Copyright: Material Design for Bootstrap
|
||||
* https://mdbootstrap.com/
|
||||
*
|
||||
* Read the license: https://mdbootstrap.com/license/
|
||||
*
|
||||
*
|
||||
* Documentation: https://mdbootstrap.com/
|
||||
*
|
||||
* Getting started: https://mdbootstrap.com/getting-started/
|
||||
*
|
||||
* Tutorials: https://mdbootstrap.com/bootstrap-tutorial/
|
||||
*
|
||||
* Templates: https://mdbootstrap.com/templates/
|
||||
*
|
||||
* Support: https://mdbootstrap.com/support/
|
||||
*
|
||||
* Contact: office@mdbootstrap.com
|
||||
*
|
||||
* Atribution: Animate CSS, Twitter Bootstrap, Materialize CSS, Normalize CSS, Waves JS, WOW JS, Toastr, Chart.js , Hammer.js
|
||||
*
|
||||
*/
|
||||
|
||||
@charset "UTF-8";
|
||||
|
||||
// Bootstrap
|
||||
@import "core/bootstrap/functions";
|
||||
@import "core/bootstrap/variables";
|
||||
|
||||
// CORE
|
||||
@import "core/mixins";
|
||||
// Your custom variables
|
||||
@import "custom-variables";
|
||||
@import "core/colors";
|
||||
@import "core/variables";
|
||||
@import "core/global";
|
||||
@import "core/helpers";
|
||||
@import "core/typography";
|
||||
@import "core/masks";
|
||||
@import "core/waves";
|
||||
|
||||
// FREE
|
||||
@import "free/animations-basic";
|
||||
@import "free/animations-extended";
|
||||
@import "free/buttons";
|
||||
@import "free/cards";
|
||||
@import "free/dropdowns";
|
||||
@import "free/depreciated";
|
||||
@import "free/navbars";
|
||||
@import "free/pagination";
|
||||
@import "free/badges";
|
||||
@import "free/modals";
|
||||
@import "free/carousels";
|
||||
@import "free/forms";
|
||||
@import "free/input-group";
|
||||
@import "free/msc";
|
||||
@import "free/footers";
|
||||
@import "free/list-group";
|
||||
@import "free/tables";
|
||||
|
||||
// Free addons
|
||||
// @import "addons/datatables";
|
||||
|
||||
// PRO
|
||||
@import "pro/variables";
|
||||
@import "pro/buttons";
|
||||
@import "pro/social-buttons";
|
||||
@import "pro/tabs";
|
||||
@import "pro/cards";
|
||||
@import "pro/dropdowns";
|
||||
@import "pro/depreciated";
|
||||
@import "pro/navbars";
|
||||
@import "pro/scrollspy";
|
||||
@import "pro/lightbox";
|
||||
@import "pro/chips";
|
||||
@import "pro/msc";
|
||||
@import "pro/forms";
|
||||
@import "pro/radio";
|
||||
@import "pro/checkbox";
|
||||
@import "pro/material-select";
|
||||
@import "pro/switch";
|
||||
@import "pro/file-input";
|
||||
@import "pro/range";
|
||||
@import "pro/input-group";
|
||||
@import "pro/autocomplete";
|
||||
@import "pro/accordion";
|
||||
@import "pro/parallax";
|
||||
@import "pro/sidenav";
|
||||
@import "pro/ecommerce";
|
||||
@import "pro/steppers";
|
||||
@import "pro/blog";
|
||||
@import "pro/toasts";
|
||||
@import "pro/animations";
|
||||
@import "pro/charts";
|
||||
@import "pro/progress";
|
||||
@import "pro/scrollbar";
|
||||
// Your custom skin
|
||||
@import "custom-skin";
|
||||
@import "pro/skins";
|
||||
|
||||
// Picker
|
||||
@import "pro/picker/default";
|
||||
@import "pro/picker/default-time";
|
||||
@import "pro/picker/default-date";
|
||||
|
||||
// Sections
|
||||
@import "pro/sections/templates";
|
||||
@import "pro/sections/team";
|
||||
@import "pro/sections/testimonials";
|
||||
@import "pro/sections/pricing";
|
||||
@import "pro/sections/contacts";
|
||||
|
||||
// Admin styles
|
||||
@import "admin/style";
|
||||
|
||||
// Your custom styles
|
||||
@import "custom-styles";
|
||||
37
html/scss/pro/_accordion.scss
Executable file
37
html/scss/pro/_accordion.scss
Executable file
@@ -0,0 +1,37 @@
|
||||
// Accordion
|
||||
.accordion {
|
||||
.card {
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid $grey-lighten-2;
|
||||
border-radius: 0;
|
||||
&:first-of-type,
|
||||
&:not(:first-of-type):not(:last-of-type) {
|
||||
border-bottom: 1px solid $grey-lighten-2;
|
||||
}
|
||||
.card-header {
|
||||
border-bottom: 0;
|
||||
padding: $accordion-card-header-padding-y $accordion-card-header-padding-x;
|
||||
background: transparent;
|
||||
.card-title {
|
||||
font-weight: 400;
|
||||
}
|
||||
a {
|
||||
transition: $accordion-link-hover-transition;
|
||||
}
|
||||
a:not(.collapsed) {
|
||||
.rotate-icon {
|
||||
transform: $accordion-rotate-icon-transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fa-angle-down {
|
||||
float: right;
|
||||
}
|
||||
.card-body {
|
||||
font-size: $accordion-card-body-font-size;
|
||||
line-height: $accordion-card-body-line-height;
|
||||
font-weight: 300;
|
||||
color: $accordion-card-body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
7
html/scss/pro/_animations.scss
Executable file
7
html/scss/pro/_animations.scss
Executable file
@@ -0,0 +1,7 @@
|
||||
// Animations pro
|
||||
.collapsible .active {
|
||||
.rotate-icon {
|
||||
transform: $animations-pro-transform;
|
||||
transition: $animations-pro-transition;
|
||||
}
|
||||
}
|
||||
52
html/scss/pro/_autocomplete.scss
Executable file
52
html/scss/pro/_autocomplete.scss
Executable file
@@ -0,0 +1,52 @@
|
||||
// MDB Autocomplete
|
||||
.mdb-autocomplete {
|
||||
margin-bottom: $autocomplete-margin-bottom;
|
||||
}
|
||||
button {
|
||||
&:focus {
|
||||
outline: 0 !important;
|
||||
}
|
||||
&.mdb-autocomplete-clear {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: $autocomplete-clear-top;
|
||||
right: 0;
|
||||
visibility: hidden;
|
||||
border: none;
|
||||
background: transparent;
|
||||
svg {
|
||||
fill: $autocomplete-clear-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdb-autocomplete-wrap {
|
||||
box-shadow: $z-depth-1;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
left: 0;
|
||||
right: 0;
|
||||
list-style-type: none;
|
||||
overflow-y: auto;
|
||||
max-height: $autocomplete-wrap-max-height;
|
||||
padding-left: 0;
|
||||
background: $white-base;
|
||||
li {
|
||||
padding: $autocomplete-wrap-li-padding-y $autocomplete-wrap-li-padding-x;
|
||||
cursor: pointer;
|
||||
font-size: $autocomplete-wrap-li-font-size;
|
||||
&:hover {
|
||||
background: $autocomplete-wrap-li-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-inline {
|
||||
.md-form {
|
||||
.form-control {
|
||||
&.mdb-autocomplete {
|
||||
width: $form-inline-autocomplete-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1
html/scss/pro/_blog.scss
Executable file
1
html/scss/pro/_blog.scss
Executable file
@@ -0,0 +1 @@
|
||||
// Blog
|
||||
104
html/scss/pro/_buttons.scss
Executable file
104
html/scss/pro/_buttons.scss
Executable file
@@ -0,0 +1,104 @@
|
||||
// Buttons
|
||||
.btn {
|
||||
&.btn-flat {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
color: inherit !important;
|
||||
&:not([disabled]):not(.disabled):active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Floating button
|
||||
.btn-floating {
|
||||
box-shadow: $z-depth-1-half;
|
||||
@include make-btn-floating($btn-floating-width, $btn-floating-height, $btn-floating-icon-size, $btn-floating-line-height);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
transition: $btn-floating-transtion;
|
||||
margin: $btn-floating-margin;
|
||||
border-radius: $btn-floating-border-radius;
|
||||
padding: 0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
i {
|
||||
display: inline-block;
|
||||
width: inherit;
|
||||
text-align: center;
|
||||
color: $white-base;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: $z-depth-2;
|
||||
}
|
||||
&:before {
|
||||
border-radius: 0;
|
||||
}
|
||||
&.btn-sm {
|
||||
@include make-btn-floating($btn-floating-width-sm, $btn-floating-height-sm, $btn-floating-icon-size-sm, $btn-floating-line-height-sm);
|
||||
}
|
||||
&.btn-lg {
|
||||
@include make-btn-floating($btn-floating-width-lg, $btn-floating-height-lg, $btn-floating-icon-size-lg, $btn-floating-line-height-lg);
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed action button
|
||||
.fixed-action-btn {
|
||||
position: fixed;
|
||||
z-index: 998;
|
||||
right: $fixed-action-btn-right;
|
||||
bottom: $fixed-action-btn-bottom;
|
||||
margin-bottom: 0;
|
||||
padding-top: $fixed-action-btn-padding-top;
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: 400ms height;
|
||||
position: absolute;
|
||||
bottom: $fixed-action-btn-ul-bottom;
|
||||
height: $fixed-action-btn-ul-bottom;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 0 15px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
li {
|
||||
display:flex;
|
||||
margin-bottom: $fixed-action-btn-li-margin-bottom;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
z-index: -1;
|
||||
}
|
||||
a {
|
||||
&.btn-floating {
|
||||
opacity: 0;
|
||||
transition-duration: 0.4s;
|
||||
transform: scale(0.4) translate(0);
|
||||
&.shown {
|
||||
transform: scale(1) translate(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active ul {
|
||||
height:300px;
|
||||
}
|
||||
}
|
||||
|
||||
button, html [type="button"], [type="reset"], [type="submit"] {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
// Rounded buttons
|
||||
.btn-rounded {
|
||||
border-radius: $btn-rounded-border-radius;
|
||||
}
|
||||
|
||||
// Gradient buttons
|
||||
@each $name, $val in $gradients-premium {
|
||||
@include make-gradient-button($name, $val);
|
||||
}
|
||||
228
html/scss/pro/_cards.scss
Executable file
228
html/scss/pro/_cards.scss
Executable file
@@ -0,0 +1,228 @@
|
||||
// Cards
|
||||
.card {
|
||||
&.card-image {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
width: 100%;
|
||||
[class*="rgba-"] {
|
||||
border-radius: $md-card-border-radius;
|
||||
}
|
||||
}
|
||||
// Cascading cards
|
||||
&.card-cascade {
|
||||
.view {
|
||||
&.view-cascade {
|
||||
box-shadow: $z-depth-1-half;
|
||||
border-radius: $md-card-border-radius;
|
||||
&.gradient-card-header {
|
||||
@extend .white-text;
|
||||
padding: $card-cascade-header-gradient-py $card-cascade-header-gradient-px;
|
||||
text-align: center;
|
||||
.card-header-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
.btn-floating {
|
||||
background-color: $card-cascade-header-gradient-btn-floating-bgc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.wider {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
.view {
|
||||
&.view-cascade {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
.card-body {
|
||||
&.card-body-cascade {
|
||||
box-shadow: $z-depth-1;
|
||||
margin-left: $card-cascade-wider-card-body-mx;
|
||||
margin-right: $card-cascade-wider-card-body-mx;
|
||||
background: $card-cascade-wider-card-body-bg;
|
||||
z-index: 1;
|
||||
border-radius: 0 0 $md-card-border-radius $md-card-border-radius;
|
||||
}
|
||||
}
|
||||
&.reverse {
|
||||
.card-body {
|
||||
&.card-body-cascade {
|
||||
z-index: 3;
|
||||
margin-top: $card-cascade-reverse-mt;
|
||||
border-radius: $md-card-border-radius;
|
||||
box-shadow: $z-depth-1-half;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.narrower {
|
||||
margin-top: $card-cascade-narrower-mt;
|
||||
.view {
|
||||
&.view-cascade {
|
||||
margin-left: $card-cascade-narrowe-view-mx;
|
||||
margin-right: $card-cascade-narrowe-view-mx;
|
||||
margin-top: $card-cascade-narrower-view-mt;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.panel-cascade {
|
||||
.view {
|
||||
text-align: center;
|
||||
color: $panel-cascade-view-color;
|
||||
}
|
||||
.list-group {
|
||||
.list-group-item {
|
||||
margin-bottom: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid $panel-cascade-list-group-item-border-bottom;
|
||||
color: $panel-cascade-list-group-item-color;
|
||||
&:hover {
|
||||
background-color: $panel-cascade-list-group-item-bgc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-action {
|
||||
margin-top: $card-btn-action-my;
|
||||
margin-bottom: $card-btn-action-my;
|
||||
}
|
||||
.activator {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: $card-activator-font-size;
|
||||
}
|
||||
.card-reveal {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
top: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
.content {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
&.ovf-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-share {
|
||||
position: relative;
|
||||
.social-reveal {
|
||||
position: absolute;
|
||||
top: $card-share-social-reveal-top;
|
||||
right: $card-share-social-reveal-right;
|
||||
visibility: hidden;
|
||||
width: auto;
|
||||
transform: translateZ(0);
|
||||
transform: translateX(0);
|
||||
transition: $card-share-social-reveal-transition;
|
||||
}
|
||||
.social-reveal-active {
|
||||
z-index: 11;
|
||||
visibility: visible;
|
||||
transform: translateZ(0);
|
||||
transform: translateX(-48px);
|
||||
transition: $card-share-social-reveal-transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Title and close button
|
||||
.card .card-reveal .card-title,
|
||||
.card-wrapper .card-rotating .card-title {
|
||||
cursor: pointer;
|
||||
}
|
||||
.card .card-reveal .card-title i,
|
||||
.card-wrapper .card-rotating .card-title i {
|
||||
color: $card-reveal-title-i-color;
|
||||
position: absolute;
|
||||
right: $card-reveal-title-i-right;
|
||||
}
|
||||
|
||||
// Rotating card
|
||||
.card-wrapper {
|
||||
margin: 0;
|
||||
min-height: $card-wrapper-min-height;
|
||||
position: relative;
|
||||
perspective: $card-wrapper-perspective;
|
||||
.face {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* Front side */
|
||||
.card-up {
|
||||
height: $card-up-img-size;
|
||||
overflow: hidden;
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.avatar {
|
||||
display: block;
|
||||
margin-top: $card-avatar-margin-top;
|
||||
overflow: hidden;
|
||||
width: $card-up-size;
|
||||
}
|
||||
.avatar {
|
||||
img {
|
||||
border: 5px solid $white-base;
|
||||
background: none repeat scroll 0 0 $white-base;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
/* Card with rotate on click */
|
||||
.card-rotating {
|
||||
position: absolute;
|
||||
transform-style: $card-rotating-transform-style;
|
||||
.content {
|
||||
position: relative;
|
||||
}
|
||||
&.effect__click {
|
||||
&.flipped {
|
||||
.front {
|
||||
transform: $card-front-effect-click-transform;
|
||||
}
|
||||
.back {
|
||||
transform: $card-back-effect-click-transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.front,
|
||||
.back {
|
||||
box-shadow: $z-depth-1;
|
||||
border-radius: $md-card-border-radius;
|
||||
backface-visibility: hidden;
|
||||
transition: $card-front-back-transition;
|
||||
}
|
||||
.back {
|
||||
transform: $card-back-transform;
|
||||
}
|
||||
}
|
||||
|
||||
// Testimonial card
|
||||
.testimonial-card {
|
||||
.card-up {
|
||||
overflow: hidden;
|
||||
height: $card-up-size;
|
||||
border-top-left-radius: $md-card-border-radius;
|
||||
border-top-right-radius: $md-card-border-radius;
|
||||
}
|
||||
.avatar {
|
||||
border-radius: $border-radius-circle;
|
||||
width: $card-up-size;
|
||||
margin-top: $card-avatar-margin-top;
|
||||
overflow: hidden;
|
||||
border: 5px solid $white-base;
|
||||
}
|
||||
.avatar img {
|
||||
width: 100%;
|
||||
}
|
||||
.card-body {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
88
html/scss/pro/_carousels.scss
Executable file
88
html/scss/pro/_carousels.scss
Executable file
@@ -0,0 +1,88 @@
|
||||
// CAROUSELS PRO
|
||||
.carousel-multi-item {
|
||||
margin-bottom: $carousel-multi-item-mb;
|
||||
.carousel-inner .carousel-item.active,
|
||||
.carousel-item-next,
|
||||
.carousel-item-prev {
|
||||
display: block;
|
||||
}
|
||||
.carousel-indicators li {
|
||||
height: $carousel-multi-item-indicators-li-height;
|
||||
width: $carousel-multi-item-indicators-li-width;
|
||||
max-width: $carousel-multi-item-indicators-li-max-width;
|
||||
background-color: $primary-color;
|
||||
margin-bottom: $carousel-multi-item-indicators-li-mb;
|
||||
}
|
||||
.carousel-indicators .active {
|
||||
height: $carousel-multi-item-indicators-active-height;
|
||||
width: $carousel-multi-item-indicators-active-width;
|
||||
max-width: $carousel-multi-item-indicators-active-max-width;
|
||||
background-color: $primary-color;
|
||||
border-radius: $carousel-multi-item-indicators-active-border-radius;
|
||||
}
|
||||
.controls-top {
|
||||
text-align: center;
|
||||
margin-bottom: $carousel-multi-item-controls-top-mb;
|
||||
.btn-floating {
|
||||
background: $primary-color;
|
||||
}
|
||||
}
|
||||
.carousel-indicators {
|
||||
margin-bottom: $carousel-multi-item-indicators-mb;
|
||||
}
|
||||
.card-cascade.narrower {
|
||||
margin-top: $carousel-multi-item-card-cascade-narrower-mt;
|
||||
margin-bottom: $carousel-multi-item-card-cascade-narrower-mb;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.col-md-4 {
|
||||
float: left;
|
||||
width: 33.333333%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $medium-screen) {
|
||||
.carousel-multi-item {
|
||||
.carousel-indicators li {
|
||||
margin-bottom: $carousel-multi-item-medium-screen-mb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Carousel with thumbnails
|
||||
.carousel-thumbnails {
|
||||
margin-bottom: $carousel-thumbnails-mb;
|
||||
.carousel-indicators {
|
||||
margin-bottom: $carousel-thumbnails-indicators-mb;
|
||||
position: absolute;
|
||||
li {
|
||||
height: auto;
|
||||
width: $carousel-thumbnails-indicators-li-width;
|
||||
max-width: $carousel-thumbnails-indicators-li-max-width;
|
||||
border: none;
|
||||
}
|
||||
.active {
|
||||
@extend .white;
|
||||
height: auto;
|
||||
width: auto;
|
||||
opacity: $carousel-thumbnails-indicators-active-opacity;
|
||||
}
|
||||
img {
|
||||
max-width: $carousel-thumbnails-indicators-li-max-width;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 540px) {
|
||||
.carousel-thumbnails {
|
||||
margin-bottom: $carousel-thumbnails-sm-mb;
|
||||
.carousel-indicators {
|
||||
margin-bottom: $carousel-thumbnails-indicators-sm-mb;
|
||||
}
|
||||
}
|
||||
}
|
||||
25
html/scss/pro/_charts.scss
Executable file
25
html/scss/pro/_charts.scss
Executable file
@@ -0,0 +1,25 @@
|
||||
// Charts Pro
|
||||
.min-chart {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $min-chart-width;
|
||||
height: $min-chart-height;
|
||||
margin-top: $min-chart-margin;
|
||||
margin-bottom: $min-chart-margin;
|
||||
text-align: center;
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.percent {
|
||||
display: inline-block;
|
||||
line-height: $min-chart-line-height;
|
||||
z-index: 2;
|
||||
&:after {
|
||||
content: "%";
|
||||
margin-left: $min-chart-percent-margin;
|
||||
font-size: $min-chart-percent-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
183
html/scss/pro/_checkbox.scss
Executable file
183
html/scss/pro/_checkbox.scss
Executable file
@@ -0,0 +1,183 @@
|
||||
/* Remove default checkbox */
|
||||
[type="checkbox"]:not(:checked),
|
||||
[type="checkbox"]:checked {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Material checkbox styles
|
||||
.form-check-input[type="checkbox"],
|
||||
label.btn input[type="checkbox"] {
|
||||
// Text Label Style
|
||||
+ label {
|
||||
position: relative;
|
||||
padding-left: $checkbox-label-pl;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: $checkbox-label-height;
|
||||
line-height: $checkbox-label-line-height;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Checkbox feature
|
||||
+ label:before,
|
||||
&:not(.filled-in) + label:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $checkbox-label-before-after-width;
|
||||
height: $checkbox-label-before-after-height;
|
||||
z-index: 0;
|
||||
border: $checkbox-label-before-after-border-width solid $checkbox-label-before-after-border-color;
|
||||
border-radius: $checkbox-label-before-after-border-radius;
|
||||
margin-top: $checkbox-label-before-after-mt;
|
||||
transition: $checkbox-label-before-after-transition;
|
||||
}
|
||||
|
||||
&:not(.filled-in) + label:after {
|
||||
border: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
&:not(:checked):disabled + label:before {
|
||||
border: none;
|
||||
background-color: $input-disabled-solid-color;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label:before {
|
||||
top: $checkbox-checked-label-before-top;
|
||||
left: $checkbox-checked-label-before-left;
|
||||
width: $checkbox-checked-label-before-width;
|
||||
height: $checkbox-checked-label-before-height;
|
||||
border-top: $checkbox-label-before-after-border-width solid transparent;
|
||||
border-left: $checkbox-label-before-after-border-width solid transparent;
|
||||
border-right: $checkbox-label-before-after-border-width solid $radio-fill-color;
|
||||
border-bottom: $checkbox-label-before-after-border-width solid $radio-fill-color;
|
||||
transform: $checkbox-checked-label-before-transform;
|
||||
backface-visibility: hidden;
|
||||
transform-origin: $checkbox-checked-label-before-transform-origin;
|
||||
}
|
||||
|
||||
&:disabled + label:before {
|
||||
border-right: $checkbox-label-before-after-border-width solid $input-disabled-solid-color;
|
||||
border-bottom: $checkbox-label-before-after-border-width solid $input-disabled-solid-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Indeterminate checkbox
|
||||
&:indeterminate {
|
||||
+ label:before {
|
||||
top: $checkbox-indeterminate-label-before-top;
|
||||
left: $checkbox-indeterminate-label-before-left;
|
||||
width: $checkbox-indeterminate-label-before-width;
|
||||
height: $checkbox-indeterminate-label-before-height;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: $checkbox-label-before-after-border-width solid $radio-fill-color;
|
||||
border-bottom: none;
|
||||
transform: $checkbox-indeterminate-label-before-transform;
|
||||
backface-visibility: hidden;
|
||||
transform-origin: $checkbox-checked-label-before-transform-origin;
|
||||
}
|
||||
|
||||
&:disabled + label:before {
|
||||
border-right: $checkbox-label-before-after-border-width solid $input-disabled-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Filled in Style
|
||||
&.filled-in {
|
||||
+ label:after {
|
||||
border-radius: $checkbox-filled-in-border-radius;
|
||||
}
|
||||
|
||||
+ label:before,
|
||||
+ label:after {
|
||||
content: '';
|
||||
left: 0;
|
||||
position: absolute;
|
||||
/* .1s delay is for check animation */
|
||||
transition: $checkbox-filled-in-transition-border, $checkbox-filled-in-transition-background-color, $checkbox-filled-in-transition-width, $checkbox-filled-in-transition-height, $checkbox-filled-in-transition-top, $checkbox-filled-in-transition-left;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// Unchecked style
|
||||
&:not(:checked) + label:before {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: $checkbox-filled-in-unchecked-label-before-border-width solid transparent;
|
||||
left: $checkbox-filled-in-unchecked-label-before-left;
|
||||
top: $checkbox-filled-in-unchecked-label-before-top;
|
||||
transform: rotateZ(37deg);
|
||||
transform-origin: $checkbox-checked-label-before-transform-origin;
|
||||
}
|
||||
|
||||
&:not(:checked) + label:after {
|
||||
height: $checkbox-filled-in-unchecked-label-after-height;
|
||||
width: $checkbox-filled-in-unchecked-label-after-width;
|
||||
background-color: transparent;
|
||||
border: $checkbox-label-before-after-border-width solid $radio-empty-color;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
// Checked style
|
||||
&:checked {
|
||||
+ label:before {
|
||||
top: 0;
|
||||
left: $checkbox-filled-in-checked-label-before-left;
|
||||
width: $checkbox-filled-in-checked-label-before-width;
|
||||
height: $checkbox-filled-in-checked-label-before-height;
|
||||
border-top: $checkbox-label-before-after-border-width solid transparent;
|
||||
border-left: $checkbox-label-before-after-border-width solid transparent;
|
||||
border-right: $checkbox-label-before-after-border-width solid $white-base;
|
||||
border-bottom: $checkbox-label-before-after-border-width solid $white-base;
|
||||
transform: $checkbox-filled-in-unchecked-label-before-transform;
|
||||
transform-origin: $checkbox-checked-label-before-transform-origin;
|
||||
}
|
||||
|
||||
+ label:after {
|
||||
top: 0;
|
||||
width: $checkbox-filled-in-unchecked-label-after-height;
|
||||
height: $checkbox-filled-in-unchecked-label-after-width;
|
||||
border: $checkbox-label-before-after-border-width solid $secondary-color;
|
||||
background-color: $secondary-color;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.filled-in-danger {
|
||||
&:checked + label:after {
|
||||
background-color: $red-base;
|
||||
border-color: $red-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled style
|
||||
&:disabled {
|
||||
&:not(:checked) {
|
||||
+ label:before {
|
||||
background-color: $input-disabled-solid-color;
|
||||
border-color: $input-disabled-solid-color;
|
||||
}
|
||||
+ label:after {
|
||||
border-color: $input-disabled-solid-color;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
75
html/scss/pro/_chips.scss
Executable file
75
html/scss/pro/_chips.scss
Executable file
@@ -0,0 +1,75 @@
|
||||
// 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;
|
||||
border-radius: $chip-br;
|
||||
background-color: $chip-background-color;
|
||||
margin-bottom: $chip-margin-bottom;
|
||||
margin-right: $chip-margin-right;
|
||||
cursor: pointer;
|
||||
transition: $pagination-page-link-transition;
|
||||
&:hover {
|
||||
transition: $pagination-page-link-transition;
|
||||
background-color: $grey-lighten-2;
|
||||
}
|
||||
img {
|
||||
float: left;
|
||||
margin: 0 $chip-img-margin-right 0 $chip-img-margin-left;
|
||||
height: $chip-img-height;
|
||||
width: $chip-img-width;
|
||||
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;
|
||||
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;
|
||||
transition: all .3s;
|
||||
&.focus {
|
||||
border-bottom: 1px solid $input-md-focus-color;
|
||||
box-shadow: 0 1px 0 0 $input-md-focus-color;
|
||||
}
|
||||
&:hover {
|
||||
cursor: text;
|
||||
}
|
||||
.tag.selected {
|
||||
border-bottom: 1px solid $input-md-focus-color;
|
||||
color: $white-base;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
239
html/scss/pro/_depreciated.scss
Normal file
239
html/scss/pro/_depreciated.scss
Normal file
@@ -0,0 +1,239 @@
|
||||
// These settings will be only for one version
|
||||
|
||||
// Button Collapse Without Navbar
|
||||
.side-nav .double-navbar .bc-min {
|
||||
padding: 5px 10px;
|
||||
.button-collapse {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
// 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(244, 67, 54, 0.7);
|
||||
font-size: 1.4rem;
|
||||
display: inline-block;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
p {
|
||||
display: inline-block;
|
||||
font-size: 1.3rem;
|
||||
.price-before {
|
||||
color: $black-base;
|
||||
text-decoration: line-through;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.price-after {
|
||||
font-size: 1.7rem;
|
||||
color: $green-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
.media img {
|
||||
max-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.ql-modal {
|
||||
.modal-dialog {
|
||||
margin: 0;
|
||||
}
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Parallax
|
||||
// .jarallax {
|
||||
// background-size: cover;
|
||||
// background-repeat: no-repeat;
|
||||
// background-position: center;
|
||||
// min-height: 700px;
|
||||
// }
|
||||
|
||||
// E-commerce
|
||||
.pricing-card {
|
||||
.heading {
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
font-weight:400;
|
||||
}
|
||||
}
|
||||
// Card overlay
|
||||
&.card-overlay {
|
||||
display: block;
|
||||
color: $white-base;
|
||||
p {
|
||||
color: $white-base;
|
||||
}
|
||||
.price {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.naked-card {
|
||||
h5 {
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
.price {
|
||||
padding-top: 0rem;
|
||||
}
|
||||
li p {
|
||||
color: $grey-darken-1;
|
||||
strong {
|
||||
color: $grey-darken-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-radius {
|
||||
border-radius: 0!important;
|
||||
}
|
||||
|
||||
// Blog section
|
||||
.section-blog-fw {
|
||||
.view {
|
||||
img {
|
||||
@extend .img-fluid;
|
||||
border-radius:2px;
|
||||
}
|
||||
}
|
||||
.jumbotron {
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
@extend .h2-responsive;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 300;
|
||||
a {
|
||||
color: #424242;
|
||||
transition :0.2s;
|
||||
&:hover {
|
||||
color: #616161;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// Author box
|
||||
.personal-sm {
|
||||
a {
|
||||
.fa {
|
||||
transition-duration: $personal-sm-transition-duration;
|
||||
&:hover {
|
||||
transform: $personal-sm-hover-transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Comments list
|
||||
.comments-list,
|
||||
.reply-form {
|
||||
.avatar {
|
||||
max-width: $avatar-img-max-width;
|
||||
}
|
||||
.comment-date {
|
||||
color: $blog-comment-date-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
// .classic-tabs {
|
||||
// white-space: nowrap;
|
||||
// overflow-x: auto;
|
||||
// z-index: 2;
|
||||
// position: relative;
|
||||
// margin-bottom: -5px;
|
||||
// border-radius: $classic-tabs-border-radius $classic-tabs-border-radius 0 0;
|
||||
// @media (min-width: 62rem) {
|
||||
// overflow-x: hidden;
|
||||
// }
|
||||
// li {
|
||||
// @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: $classic-tabs-li-a-active-border-bottom;
|
||||
// color: $white-base;
|
||||
// }
|
||||
// }
|
||||
// @media (min-width: 62em) {
|
||||
// &:first-child {
|
||||
// margin-left: $classic-tabs-margin-left;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @each $name, $color in $ctbc {
|
||||
//&.#{$name} {
|
||||
// li {
|
||||
// a {
|
||||
// &.active {
|
||||
// border-color: $color;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// Checkbox
|
||||
$base-radio-checkbox-label-pl: 2.19rem !default;
|
||||
$base-radio-checkbox-label-height: 1.57rem !default;
|
||||
$base-radio-checkbox-label-line-height: $base-radio-checkbox-label-height !default;
|
||||
$base-radio-checkbox-label-font-size: 1rem !default;
|
||||
|
||||
// hide default radio / checkbox
|
||||
%hide-radio-checkbox {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
%base-radio-checkbox-label {
|
||||
position: relative;
|
||||
padding-left: $base-radio-checkbox-label-pl;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: $base-radio-checkbox-label-height;
|
||||
line-height: $base-radio-checkbox-label-line-height;
|
||||
font-size: $base-radio-checkbox-label-font-size;
|
||||
}
|
||||
58
html/scss/pro/_dropdowns.scss
Executable file
58
html/scss/pro/_dropdowns.scss
Executable file
@@ -0,0 +1,58 @@
|
||||
// Dropdown pro
|
||||
// Dropdowns menu's colors
|
||||
.dropdown,
|
||||
.dropup,
|
||||
.dropleft,
|
||||
.dropright {
|
||||
.dropdown-menu {
|
||||
padding: $dropdown-menu-padding;
|
||||
@each $name, $color in $dropdown-colors {
|
||||
&.dropdown-#{$name} {
|
||||
.dropdown-item {
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-item {
|
||||
padding: $dropdown-menu-padding;
|
||||
margin-left: 0;
|
||||
font-size: $dropdown-item-font-size;
|
||||
&.disabled {
|
||||
color: $dropdown-item-disabled-color;
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
color: $dropdown-item-disabled-color !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:active {
|
||||
box-shadow: $z-depth-1-half;
|
||||
@extend .white-text;
|
||||
background-color: $primary-color;
|
||||
border-radius: $border-radius-base;
|
||||
transition: $dropdown-item-transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.dropdown-menu-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
&.animated {
|
||||
/* Speed up animations */
|
||||
animation-duration: $dropdown-menu-animated-animation-duration;
|
||||
animation-timing-function: $dropdown-menu-animated-animation-timing-function;
|
||||
}
|
||||
}
|
||||
91
html/scss/pro/_ecommerce.scss
Executable file
91
html/scss/pro/_ecommerce.scss
Executable file
@@ -0,0 +1,91 @@
|
||||
// Ecommerce Pro Cards
|
||||
// Collection card
|
||||
.collection-card {
|
||||
.stripe {
|
||||
position: absolute;
|
||||
bottom: $collection-card-stripe-bottom;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: $collection-card-stripe-padding;
|
||||
&.dark {
|
||||
background-color: $collection-card-stripe-dark-bgc;
|
||||
a {
|
||||
p {
|
||||
color: $collection-card-stripe-dark-a-p-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.light {
|
||||
background-color: $collection-card-stripe-light-bgc;
|
||||
a {
|
||||
p {
|
||||
color: $collection-card-stripe-light-a-p-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
letter-spacing: $collection-card-stripe-letter-spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rating {
|
||||
color: $ecommerce-rating-color;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// Cart modal
|
||||
.cart-modal {
|
||||
.table,
|
||||
th {
|
||||
text-align: center;
|
||||
}
|
||||
.table {
|
||||
.total {
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
.fa-remove {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
&.card-ecommerce {
|
||||
.card-footer {
|
||||
background-color: transparent;
|
||||
.discount {
|
||||
color: $ecommerce-card-footer-discount-color;
|
||||
}
|
||||
a {
|
||||
color: $ecommerce-card-footer-a-color;
|
||||
transition: $ecommerce-card-footer-a-hover-transition;
|
||||
&:hover {
|
||||
color: $ecommerce-card-footer-a-hover-color;
|
||||
transition: $ecommerce-card-footer-a-hover-transition;
|
||||
}
|
||||
&.active {
|
||||
color: $ecommerce-card-footer-a-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Product table
|
||||
.product-table {
|
||||
.btn {
|
||||
&.btn-sm {
|
||||
padding: $ecommerce-product-table-btn-sm-py $ecommerce-product-table-btn-sm-px;
|
||||
}
|
||||
}
|
||||
}
|
||||
42
html/scss/pro/_file-input.scss
Executable file
42
html/scss/pro/_file-input.scss
Executable file
@@ -0,0 +1,42 @@
|
||||
// File Input
|
||||
.file-field {
|
||||
position: relative;
|
||||
.file-path-wrapper {
|
||||
overflow: hidden;
|
||||
padding-left: $file-path-wrapper-padding-left;
|
||||
height: $file-path-wrapper-height;
|
||||
}
|
||||
input {
|
||||
&.file-path {
|
||||
width: 100%;
|
||||
height: $file-input-path;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
float: left;
|
||||
}
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=file] {
|
||||
|
||||
// Needed to override webkit button
|
||||
&::-webkit-file-upload-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
filter: $file-input-filter;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
10
html/scss/pro/_forms.scss
Executable file
10
html/scss/pro/_forms.scss
Executable file
@@ -0,0 +1,10 @@
|
||||
// FORMS PRO
|
||||
.form-header {
|
||||
box-shadow: $z-depth-1-half;
|
||||
color: $form-header-color;
|
||||
text-align: center;
|
||||
margin-top: $form-header-mt;
|
||||
margin-bottom: $form-header-mb;
|
||||
padding: $form-header-padding;
|
||||
border-radius: $form-header-border-radius;
|
||||
}
|
||||
14
html/scss/pro/_input-group.scss
Executable file
14
html/scss/pro/_input-group.scss
Executable file
@@ -0,0 +1,14 @@
|
||||
// Input group
|
||||
.md-form.input-group .input-group-text [type=checkbox]+label,
|
||||
.input-group .input-group-text [type=checkbox]+label {
|
||||
padding-left: $input-group-text-checkbox-pl;
|
||||
}
|
||||
.md-form.input-group .input-group-text .filled-in[type=checkbox]+label,
|
||||
.input-group .input-group-text .filled-in[type=checkbox]+label {
|
||||
height: $input-group-text-checkbox-height;
|
||||
}
|
||||
.md-form.input-group .input-group-text [type=radio]+label,
|
||||
.input-group .input-group-text [type=radio]+label {
|
||||
padding-left: $input-group-text-radio-pl;
|
||||
height: $input-group-text-radio-height;
|
||||
}
|
||||
810
html/scss/pro/_lightbox.scss
Executable file
810
html/scss/pro/_lightbox.scss
Executable file
@@ -0,0 +1,810 @@
|
||||
/*! 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;
|
||||
touch-action: none;
|
||||
z-index: $pswp__root-z-index;
|
||||
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
|
||||
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: zoom-in;
|
||||
}
|
||||
|
||||
.pswp--zoomed-in .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.pswp--dragging .pswp__img {
|
||||
/* autoprefixer: off */
|
||||
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;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.pswp__scroll-wrap {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pswp__container,
|
||||
.pswp__zoom-wrap {
|
||||
touch-action: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Prevent selection and tap highlights */
|
||||
|
||||
.pswp__container,
|
||||
.pswp__img {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pswp__zoom-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
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 {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pswp__container,
|
||||
.pswp__zoom-wrap {
|
||||
}
|
||||
|
||||
.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 {
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
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;
|
||||
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: $pswp__button-background 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: $pswp__button-background-image;
|
||||
}
|
||||
.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 {
|
||||
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;
|
||||
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;
|
||||
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: center;
|
||||
max-width: 500px;
|
||||
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: $pswp__preloader__icn-background 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 {
|
||||
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;
|
||||
transition: $mdb-lightbox-figure-img-transition;
|
||||
border-radius: 0;
|
||||
&:hover {
|
||||
opacity: $mdb-lightbox-figure-img-hover-opacity;
|
||||
}
|
||||
}
|
||||
figcaption {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.no-margin {
|
||||
[class*="col-"] {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
[class*="col-"] {
|
||||
padding: $mdb-lightbox-no-margin-padding;
|
||||
}
|
||||
}
|
||||
222
html/scss/pro/_material-select.scss
Executable file
222
html/scss/pro/_material-select.scss
Executable file
@@ -0,0 +1,222 @@
|
||||
// Material selct
|
||||
%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: 1px solid $input-border-color;
|
||||
outline: none;
|
||||
height: $material-select-wrapper-input-dropdown-height;
|
||||
line-height: $material-select-wrapper-input-dropdown-line-height;
|
||||
width: 100%;
|
||||
font-size: $material-select-wrapper-input-dropdown-font-size;
|
||||
margin: 0 0 $material-select-wrapper-input-dropdown-margin 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
&:disabled {
|
||||
color: $material-select-wrapper-input-dropdown-disabled-color;
|
||||
border-bottom-color: $material-select-wrapper-input-dropdown-disabled-border-bottom-color;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select-dropdown {
|
||||
@extend %user-select-none;
|
||||
}
|
||||
.search-wrap {
|
||||
padding: $material-select-wrapper-search-wrap-py 0;
|
||||
display: block;
|
||||
margin: 0 $material-select-wrapper-search-wrap-mx;
|
||||
.md-form {
|
||||
margin-top: 0;
|
||||
input {
|
||||
padding-bottom: $material-select-wrapper-search-wrap-input-pb;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
span.caret {
|
||||
color: initial;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: $material-select-wrapper-span-caret-top;
|
||||
font-size: $material-select-wrapper-span-caret-font-size;
|
||||
&.disabled {
|
||||
color: $input-disabled-color;
|
||||
}
|
||||
}
|
||||
& + label {
|
||||
position: absolute;
|
||||
top: $material-select-wrapper-span-caret-label-top;
|
||||
font-size: $label-font-size;
|
||||
}
|
||||
i {
|
||||
color: $material-select-wrapper-input-dropdown-disabled-color;
|
||||
}
|
||||
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: $material-select-wrapper-input-dropdown-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
.select-dropdown {
|
||||
[type=checkbox]:disabled:not(:checked)+label:before {
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
img {
|
||||
height: $dropdown-item-height - 10;
|
||||
width: $dropdown-item-height - 10;
|
||||
margin: $material-select-dropdown-li-img-my $material-select-dropdown-li-img-mx;
|
||||
float: right;
|
||||
}
|
||||
&.disabled, &.disabled > span, &.optgroup {
|
||||
color: $material-select-wrapper-input-dropdown-disabled-color;
|
||||
background-color: transparent!important;
|
||||
cursor: context-menu;
|
||||
}
|
||||
&.optgroup {
|
||||
border-top: 1px solid $dropdown-hover-bg-color;
|
||||
&.selected > span {
|
||||
color: $material-select-dropdown-li-optgroup-selected-span;
|
||||
}
|
||||
& > span {
|
||||
color: $material-select-dropdown-li-optgroup-span;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiple-select-dropdown li [type="checkbox"] + label {
|
||||
height: $material-select-multiple-select-dropdown-height;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
box-shadow: $z-depth-1;
|
||||
background-color: $dropdown-bg-color;
|
||||
margin: 0;
|
||||
display: none;
|
||||
min-width: $material-select-dropdown-content-min-width;
|
||||
max-height: $material-select-dropdown-content-max-height;
|
||||
overflow-y: auto;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
will-change: width, height;
|
||||
li {
|
||||
clear: both;
|
||||
color: $material-select-dropdown-content-li-color;
|
||||
cursor: pointer;
|
||||
line-height: $material-select-dropdown-content-li-line-height;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: $dropdown-hover-bg-color;
|
||||
}
|
||||
& > a,
|
||||
& > span {
|
||||
font-size: $material-select-dropdown-content-li-span-font-size;
|
||||
color: $dropdown-color;
|
||||
display: block;
|
||||
padding: $material-select-dropdown-content-li-span-padding;
|
||||
}
|
||||
// Icon alignment override
|
||||
& > a > i {
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Material select color variations
|
||||
.colorful-select {
|
||||
.dropdown-content {
|
||||
padding: $material-select-colorful-dropdown-content-padding;
|
||||
li {
|
||||
&.active span {
|
||||
color: $material-select-colorful-dropdown-content-li-active-color !important;
|
||||
box-shadow: $z-depth-1-half;
|
||||
[type="checkbox"]:checked + label:before {
|
||||
border-color: transparent $white $white transparent;
|
||||
}
|
||||
}
|
||||
a:hover, span:hover {
|
||||
box-shadow: $z-depth-2;
|
||||
color: $material-select-colorful-dropdown-content-li-active-color !important;
|
||||
transition: $material-select-colorful-dropdown-content-li-hover-transition;
|
||||
border-radius: $material-select-colorful-dropdown-content-li-hover-border-radius;
|
||||
[type="checkbox"] + label:before {
|
||||
border-color: $white-base;
|
||||
}
|
||||
[type="checkbox"]:checked + label:before {
|
||||
border-color: transparent $white $white transparent;
|
||||
}
|
||||
}
|
||||
optgroup {
|
||||
}
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&.optgroup {
|
||||
&.active span {
|
||||
box-shadow: none;
|
||||
color: $material-select-wrapper-input-dropdown-disabled-color !important;
|
||||
border-bottom-color: $material-select-wrapper-input-dropdown-disabled-color;
|
||||
cursor: default;
|
||||
}
|
||||
a:hover, span:hover {
|
||||
box-shadow: none;
|
||||
color: $material-select-wrapper-input-dropdown-disabled-color !important;
|
||||
border-bottom-color: $material-select-wrapper-input-dropdown-disabled-color;
|
||||
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 !important;
|
||||
}
|
||||
}
|
||||
.search-wrap input:focus {
|
||||
border-bottom: 1px solid $color;
|
||||
box-shadow: 0 1px 0 0 $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
77
html/scss/pro/_msc.scss
Executable file
77
html/scss/pro/_msc.scss
Executable file
@@ -0,0 +1,77 @@
|
||||
// Miscellenous
|
||||
// Advanced tables
|
||||
.table {
|
||||
a {
|
||||
margin-right: $advanced-table-a-mr !important;
|
||||
}
|
||||
fieldset {
|
||||
&.form-check {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
label {
|
||||
&.form-check-label {
|
||||
height: $advanced-table-fieldset-label-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Product table
|
||||
.product-table {
|
||||
img {
|
||||
max-height: $product-table-img-max-height;
|
||||
min-width: $product-table-img-min-width;
|
||||
}
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
@include make-gradient($name, $val);
|
||||
}
|
||||
62
html/scss/pro/_navbars.scss
Executable file
62
html/scss/pro/_navbars.scss
Executable file
@@ -0,0 +1,62 @@
|
||||
// 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 {
|
||||
@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 {
|
||||
font-size: $navbar-double-font-size;
|
||||
color: $white-base;
|
||||
}
|
||||
.breadcrumb-dn {
|
||||
p {
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
padding-left: $navbar-breadcrumb-dn-padding;
|
||||
}
|
||||
@media (max-width: 993px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.button-collapse {
|
||||
position: absolute;
|
||||
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-right: $navbar-button-collapse-mx;
|
||||
margin-left: $navbar-button-collapse-mx;
|
||||
}
|
||||
}
|
||||
}
|
||||
21
html/scss/pro/_parallax.scss
Executable file
21
html/scss/pro/_parallax.scss
Executable file
@@ -0,0 +1,21 @@
|
||||
// Just another parallax
|
||||
.jarallax-keep-img {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.jarallax-keep-img>.jarallax-img {
|
||||
position: relative;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
z-index: -100;
|
||||
}
|
||||
|
||||
span[data-jarallax-element] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.jarallax {
|
||||
min-height: 600px;
|
||||
}
|
||||
434
html/scss/pro/_progress.scss
Executable file
434
html/scss/pro/_progress.scss
Executable file
@@ -0,0 +1,434 @@
|
||||
// Progress
|
||||
.progress {
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: $progress-height-mdb;
|
||||
overflow: hidden;
|
||||
margin-bottom: $progress-margin-bottom;
|
||||
background-color: $grey-lighten-3;
|
||||
.progress-bar {
|
||||
box-shadow: none;
|
||||
height: $progress-bar-height;
|
||||
border-radius: 0;
|
||||
background-color: $primary-color-dark;
|
||||
}
|
||||
.progress-bar-animated {
|
||||
transition: $progress-bar-animated-transition;
|
||||
}
|
||||
.indeterminate {
|
||||
background-color: $blue-lighten-3;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: inherit;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
will-change: left, right;
|
||||
// Custom bezier
|
||||
animation: $progress-indeterminate-before-animation;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: inherit;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
will-change: left, right;
|
||||
// Custom bezier
|
||||
animation: $progress-indeterminate-after-animation;
|
||||
animation-delay: $progress-indeterminate-after-animation-delay;
|
||||
}
|
||||
}
|
||||
@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: $progress-preloader-width;
|
||||
height: $progress-preloader-height;
|
||||
font-size: 0;
|
||||
&.small {
|
||||
width: $progress-preloader-small-width;
|
||||
height: $progress-preloader-small-height;
|
||||
}
|
||||
&.big {
|
||||
width: $progress-preloader-big-width;
|
||||
height: $progress-preloader-big-height;
|
||||
}
|
||||
&.active {
|
||||
/* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
|
||||
animation: $progress-preloader-active-animation;
|
||||
}
|
||||
&.crazy{
|
||||
animation-duration: $progress-preloader-crazy-animation;
|
||||
}
|
||||
.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: $progress-spinner-gap-left;
|
||||
width: $progress-spinner-gap-width;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-color: inherit;
|
||||
.circle {
|
||||
width: $progress-spinner-gap-circle-width;
|
||||
left: $progress-spinner-gap-circle-left;
|
||||
}
|
||||
}
|
||||
|
||||
.circle-clipper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: $progress-spinner-circle-clipper-width;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-color: inherit;
|
||||
.circle {
|
||||
width: $progress-spinner-circle-clipper-circle-width;
|
||||
height: 100%;
|
||||
border-width: $progress-spinner-circle-clipper-circle-border-width;
|
||||
/* STROKEWIDTH */
|
||||
border-style: solid;
|
||||
border-color: inherit;
|
||||
border-bottom-color: transparent !important;
|
||||
border-radius: $progress-spinner-circle-clipper-circle-border-radius;
|
||||
animation: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
&.left .circle {
|
||||
left: 0;
|
||||
border-right-color: transparent !important;
|
||||
transform: $progress-spinner-circle-clipper-left-circle-transform;
|
||||
}
|
||||
&.right .circle {
|
||||
left: $progress-spinner-circle-clipper-right-circle-left;
|
||||
border-left-color: transparent !important;
|
||||
transform: $progress-spinner-circle-clipper-right-circle-transform;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.spinner-blue,
|
||||
.spinner-blue-only {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
.spinner-red,
|
||||
.spinner-red-only {
|
||||
border-color: #db4437;
|
||||
}
|
||||
|
||||
.spinner-yellow,
|
||||
.spinner-yellow-only {
|
||||
border-color: #f4b400;
|
||||
}
|
||||
|
||||
.spinner-green,
|
||||
.spinner-green-only {
|
||||
border-color: #0f9d58;
|
||||
}
|
||||
}
|
||||
|
||||
@include 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 */
|
||||
@include progress-animation-default($progress-active-spinner-main, $progress-active-spinner-blue);
|
||||
}
|
||||
&.spinner-red {
|
||||
/* durations: 4 * ARCTIME */
|
||||
@include progress-animation-default($progress-active-spinner-main, $progress-active-spinner-red);
|
||||
}
|
||||
&.spinner-yellow {
|
||||
/* durations: 4 * ARCTIME */
|
||||
@include progress-animation-default($progress-active-spinner-main, $progress-active-spinner-yellow);
|
||||
}
|
||||
&.spinner-green {
|
||||
/* durations: 4 * ARCTIME */
|
||||
@include progress-animation-default($progress-active-spinner-main, $progress-active-spinner-green);
|
||||
}
|
||||
&.spinner-blue-only,
|
||||
&.spinner-red-only,
|
||||
&.spinner-yellow-only,
|
||||
&.spinner-green-only,
|
||||
&.spinner-primary-color-only {
|
||||
/* durations: 4 * ARCTIME */
|
||||
opacity: 1;
|
||||
@include progress-animation-default($progress-active-spinner-main);
|
||||
}
|
||||
}
|
||||
.circle-clipper.left .circle {
|
||||
/* duration: ARCTIME */
|
||||
animation: $progress-active-circle-left-spin;
|
||||
}
|
||||
.circle-clipper.right .circle {
|
||||
/* duration: ARCTIME */
|
||||
animation: $progress-active-circle-right-spin;
|
||||
}
|
||||
}
|
||||
|
||||
@include 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 */
|
||||
}
|
||||
|
||||
@include keyframes(blue-fade-in-out) {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
25% {
|
||||
opacity: 1;
|
||||
}
|
||||
26% {
|
||||
opacity: 0;
|
||||
}
|
||||
89% {
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(red-fade-in-out) {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
15% {
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
51% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes (yellow-fade-in-out) {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
76% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes (green-fade-in-out) {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
65% {
|
||||
opacity: 0;
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(left-spin) {
|
||||
from {
|
||||
transform: rotate(130deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(130deg);
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(right-spin) {
|
||||
from {
|
||||
transform: rotate(-130deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(-130deg);
|
||||
}
|
||||
}
|
||||
|
||||
#spinnerContainer.cooldown {
|
||||
/* duration: SHRINK_TIME */
|
||||
@include progress-animation-default($progress-spinner-container-animation-rotate, $progress-spinner-container-animation-fade);
|
||||
}
|
||||
|
||||
@include keyframes(fade-out){
|
||||
from{
|
||||
opacity: 1;
|
||||
}
|
||||
to{
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#mdb-preloader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: $black;
|
||||
/* change if the mask should have another color then white */
|
||||
z-index: 9998;
|
||||
/* makes sure it stays on top */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
110
html/scss/pro/_radio.scss
Executable file
110
html/scss/pro/_radio.scss
Executable file
@@ -0,0 +1,110 @@
|
||||
// Remove default Radio Buttons
|
||||
[type="radio"]:not(:checked),
|
||||
[type="radio"]:checked {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Radio buttons
|
||||
.form-check-input[type="radio"],
|
||||
label.btn input[type="radio"] {
|
||||
&:not(:checked) + label,
|
||||
&:checked + label {
|
||||
position: relative;
|
||||
padding-left: $radio-label-pl;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: $radio-label-height;
|
||||
line-height: $radio-label-line-height;
|
||||
transition: $radio-label-transition;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
& + label:before,
|
||||
& + label:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: $radio-label-before-after-margin;
|
||||
width: $radio-label-before-after-width;
|
||||
height: $radio-label-before-after-height;
|
||||
z-index: 0;
|
||||
transition: $radio-label-transition;
|
||||
}
|
||||
|
||||
// Unchecked styles
|
||||
&:not(:checked) + label:before,
|
||||
&:not(:checked) + label:after,
|
||||
&:checked + label:before,
|
||||
&:checked + label:after,
|
||||
&.with-gap:checked + label:before,
|
||||
&.with-gap:checked + label:after {
|
||||
border-radius: $radio-label-border-radius;
|
||||
}
|
||||
|
||||
&:not(:checked) + label:before,
|
||||
&:not(:checked) + label:after {
|
||||
border: $radio-label-border-width solid $radio-empty-color;
|
||||
}
|
||||
|
||||
&:not(:checked) + label:after {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
// Checked styles
|
||||
&:checked + label:before {
|
||||
border: $radio-label-border-width solid transparent;
|
||||
}
|
||||
|
||||
&:checked + label:after,
|
||||
&.with-gap:checked + label:before,
|
||||
&.with-gap:checked + label:after {
|
||||
border: $radio-label-border-width solid $radio-fill-color;
|
||||
}
|
||||
|
||||
&:checked + label:after,
|
||||
&.with-gap:checked + label:after {
|
||||
background-color: $radio-fill-color;
|
||||
}
|
||||
|
||||
&:checked + label:after {
|
||||
transform: $radio-label-checked-transform;
|
||||
}
|
||||
|
||||
// Radio With gap
|
||||
&.with-gap:checked + label:after {
|
||||
transform: $radio-label-with-gap-checked-transform;
|
||||
}
|
||||
|
||||
// Disabled Radio With gap
|
||||
&.with-gap:disabled:checked + label:before {
|
||||
border: $radio-label-border-width solid $input-disabled-color;
|
||||
}
|
||||
|
||||
&.with-gap:disabled:checked + label:after {
|
||||
border: none;
|
||||
background-color: $input-disabled-color;
|
||||
}
|
||||
|
||||
// Disabled style
|
||||
&:disabled:not(:checked) + label:before,
|
||||
&:disabled:checked + label:before {
|
||||
background-color: transparent;
|
||||
border-color: $input-disabled-color;
|
||||
}
|
||||
|
||||
&:disabled + span {
|
||||
color: $input-disabled-color;
|
||||
}
|
||||
|
||||
&:disabled:not(:checked) + span:before {
|
||||
border-color: $input-disabled-color;
|
||||
}
|
||||
|
||||
&:disabled:checked + span:after {
|
||||
background-color: $input-disabled-color;
|
||||
border-color: $input-disabled-solid-color;
|
||||
}
|
||||
}
|
||||
116
html/scss/pro/_range.scss
Executable file
116
html/scss/pro/_range.scss
Executable file
@@ -0,0 +1,116 @@
|
||||
// Range input
|
||||
.range-field {
|
||||
position: relative;
|
||||
}
|
||||
input[type=range] {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
margin: $input-range-my $input-range-mx;
|
||||
padding: 0;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
+ .thumb {
|
||||
position: absolute;
|
||||
border: none;
|
||||
height: 0;
|
||||
width: 0;
|
||||
border-radius: $border-radius-circle;
|
||||
background-color: $primary-color;
|
||||
top: $input-range-thumb-top;
|
||||
margin-left: $input-range-thumb-margin-left;
|
||||
transform-origin: $input-range-transform-origin;
|
||||
transform: $input-range-transform;
|
||||
.value {
|
||||
display: block;
|
||||
width: $input-range-thumb-value-width;
|
||||
text-align: center;
|
||||
color: $primary-color;
|
||||
font-size: 0;
|
||||
transform: $input-range-thumb-value-transform;
|
||||
}
|
||||
&.active {
|
||||
border-radius: $border-radius-circle $border-radius-circle $border-radius-circle 0;
|
||||
.value {
|
||||
color: $white-base;
|
||||
margin-left: $input-range-active-value-ml;
|
||||
margin-top: $input-range-active-value-mt;
|
||||
font-size: $input-range-active-value-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Webkit
|
||||
appearance: none;
|
||||
&::-webkit-slider-runnable-track {
|
||||
height: $slider-runnable-track-height;
|
||||
background: $slider-runnable-track-bg;
|
||||
border: none;
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
border: none;
|
||||
height: $slider-thumb-height;
|
||||
width: $slider-thumb-width;
|
||||
border-radius: $border-radius-circle;
|
||||
background-color: $primary-color;
|
||||
transform-origin: $input-range-transform-origin;
|
||||
margin: $slider-thumb-mt 0 0 0;
|
||||
transition: $slider-thumb-transition;
|
||||
}
|
||||
&:focus::-webkit-slider-runnable-track {
|
||||
background: $slider-runnable-track-focus-bg;
|
||||
}
|
||||
// Firefox
|
||||
border: 1px solid $white-base; /* fix for FF unable to apply focus style bug */
|
||||
&::-moz-range-track { /*required for proper track sizing in FF*/
|
||||
height: $slider-runnable-track-height;
|
||||
background: $slider-runnable-track-bg;
|
||||
border: none;
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
border: none;
|
||||
height: $slider-thumb-height;
|
||||
width: $slider-thumb-width;
|
||||
border-radius: $border-radius-circle;
|
||||
background: $primary-color;
|
||||
margin-top: $slider-thumb-mt;
|
||||
}
|
||||
&:-moz-focusring { /*hide the outline behind the border*/
|
||||
outline: 1px solid $white-base;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
&:focus::-moz-range-track {
|
||||
background: $slider-runnable-track-bg;
|
||||
}
|
||||
// IE 10+
|
||||
&::-ms-track {
|
||||
height: $slider-runnable-track-height;
|
||||
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: $slider-border-width 0;
|
||||
color: transparent; /*remove default tick marks*/
|
||||
}
|
||||
&::-ms-fill-lower {
|
||||
background: $slider-runnable-track-bg;
|
||||
}
|
||||
&::-ms-fill-upper {
|
||||
background: $slider-runnable-track-bg;
|
||||
}
|
||||
&::-ms-thumb {
|
||||
border: none;
|
||||
height: $slider-thumb-height;
|
||||
width: $slider-thumb-width;
|
||||
border-radius: $border-radius-circle;
|
||||
background: $primary-color;
|
||||
}
|
||||
&:focus::-ms-fill-lower {
|
||||
background: $slider-runnable-track-bg;
|
||||
}
|
||||
&:focus::-ms-fill-upper {
|
||||
background: $slider-runnable-track-bg;
|
||||
}
|
||||
}
|
||||
132
html/scss/pro/_scrollbar.scss
Executable file
132
html/scss/pro/_scrollbar.scss
Executable file
@@ -0,0 +1,132 @@
|
||||
// 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: $grey-lighten-3;
|
||||
opacity: $scrollbar-ps-xrail-opacity;
|
||||
> .ps__scrollbar-x {
|
||||
background-color: $scrollbar-color-mdb;
|
||||
@include scroll-height(0.6875rem);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
> .ps__scrollbar-x-rail {
|
||||
display: none;
|
||||
position: absolute;
|
||||
/* please don't change 'position' */
|
||||
opacity: 0;
|
||||
@include transition-main($scrollbar-transition-bg, $scrollbar-transition-opacity);
|
||||
bottom: 0rem;
|
||||
/* there must be 'bottom' for ps__scrollbar-x-rail */
|
||||
@include scroll-height(0.9375rem);
|
||||
> .ps__scrollbar-x {
|
||||
position: absolute;
|
||||
/* please don't change 'position' */
|
||||
background-color:$scrollbar-color-mdb-grey;
|
||||
border-radius: $scrollbar-ps-scrollbar-xrail-x-border-radius;
|
||||
@include transition-main($scrollbar-transition-bg, $scrollbar-transition-height, $scrollbar-transition-width, $scrollbar-transition-border-radius);
|
||||
bottom: $scrollbar-ps-scrollbar-xrail-x-bottom;
|
||||
/* there must be 'bottom' for ps__scrollbar-x */
|
||||
@include scroll-height(0.375rem);
|
||||
|
||||
}
|
||||
&:hover > .ps__scrollbar-x,
|
||||
> .ps__scrollbar-x-rail:active > .ps__scrollbar-x {
|
||||
@include scroll-height(0.6875rem);
|
||||
}
|
||||
}
|
||||
&.ps--in-scrolling.ps--y {
|
||||
> .ps__scrollbar-y-rail {
|
||||
background-color: $grey-lighten-3;
|
||||
opacity: $scrollbar-ps-scrollbar-inscrolling-opacity;
|
||||
> .ps__scrollbar-y {
|
||||
background-color: $scrollbar-color-mdb;
|
||||
@include scroll-width(0.6875rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
> .ps__scrollbar-y-rail {
|
||||
display: none;
|
||||
position: absolute;
|
||||
/* please don't change 'position' */
|
||||
opacity: 0;
|
||||
@include transition-main($scrollbar-transition-bg,$scrollbar-transition-opacity);
|
||||
right: 0;
|
||||
/* there must be 'right' for ps__scrollbar-y-rail */
|
||||
@include scroll-width(0.9375rem);
|
||||
z-index: 999;
|
||||
> .ps__scrollbar-y {
|
||||
position: absolute;
|
||||
/* please don't change 'position' */
|
||||
background-color: $scrollbar-color-mdb-grey;
|
||||
border-radius: $scrollbar-ps-scrollbar-scrollbar-y-border-radius;
|
||||
@include transition-main($scrollbar-transition-bg, $scrollbar-transition-height, $scrollbar-transition-width, $scrollbar-transition-border-radius);
|
||||
right: $scrollbar-ps-scrollbar-yrail-y-right;
|
||||
/* there must be 'right' for ps__scrollbar-y */
|
||||
@include scroll-width(0.375rem);
|
||||
}
|
||||
&:hover > .ps__scrollbar-y,
|
||||
> .ps__scrollbar-y-rail:active > .ps__scrollbar-y {
|
||||
@include scroll-width(0.6875rem);
|
||||
}
|
||||
}
|
||||
&:hover.ps--in-scrolling.ps--x {
|
||||
> .ps__scrollbar-x-rail {
|
||||
background-color: $grey-lighten-3;
|
||||
opacity: $scrollbar-ps-hover-inscrolling-xrail-opacity;
|
||||
> .ps__scrollbar-x {
|
||||
background-color: $scrollbar-color-mdb;
|
||||
@include scroll-height(0.6875rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover.ps--in-scrolling.ps--y {
|
||||
> .ps__scrollbar-y-rail {
|
||||
background-color: $grey-lighten-3;
|
||||
opacity: $scrollbar-ps-hover-inscrolling-xrail-opacity;
|
||||
> .ps__scrollbar-y {
|
||||
background-color: $scrollbar-color-mdb;
|
||||
@include scroll-width(0.6875rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover > .ps__scrollbar-x-rail,
|
||||
&:hover > .ps__scrollbar-y-rail {
|
||||
opacity: $scrollbar-ps-hover-scrollbar-y-rail-opacity;
|
||||
}
|
||||
&:hover {
|
||||
> .ps__scrollbar-x-rail{
|
||||
&:hover {
|
||||
background-color: $grey-lighten-3;
|
||||
opacity: $scrollbar-ps-hover-inscrolling-xrail-opacity;
|
||||
> .ps__scrollbar-x {
|
||||
background-color: $scrollbar-color-mdb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .ps__scrollbar-y-rail {
|
||||
&:hover {
|
||||
background-color: $grey-lighten-3;
|
||||
opacity: $scrollbar-ps-hover-inscrolling-xrail-opacity;
|
||||
> .ps__scrollbar-y {
|
||||
background-color: $scrollbar-color-mdb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
115
html/scss/pro/_scrollspy.scss
Executable file
115
html/scss/pro/_scrollspy.scss
Executable file
@@ -0,0 +1,115 @@
|
||||
// Scrollspy
|
||||
.nav-pills {
|
||||
&.default-pills {
|
||||
.nav-item {
|
||||
a {
|
||||
text-align: left;
|
||||
color: $Scrollspy-color-mdb;
|
||||
@include scrollspy-border-radius(0);
|
||||
&:hover{
|
||||
background-color: transparent;
|
||||
color: $mdb-color-base;
|
||||
border-left: $scrollspy-navpills-naviteam-hover-border-left solid $mdb-color-base;
|
||||
@include scrollspy-font-weight(500);
|
||||
}
|
||||
&.active {
|
||||
background-color: transparent;
|
||||
color: $mdb-color-base;
|
||||
border-left: $scrollspy-navpills-naviteam-active-border-left solid $mdb-color-base;
|
||||
box-shadow:none;
|
||||
@include scrollspy-font-weight(500);
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
color: $mdb-color-base;
|
||||
@include scrollspy-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 {
|
||||
@include scroll-width(100%);
|
||||
}
|
||||
@media only screen and (max-width: $medium-screen) {
|
||||
.col-md-4 .sticky, .col-lg-4 .sticky, .col-xl-4 .sticky {
|
||||
@include scroll-width(12.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $medium-screen) {
|
||||
.col-md-4 .sticky .col-lg-4 .sticky, .col-xl-4 .sticky {
|
||||
@include scroll-width(25rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: $large-screen) {
|
||||
.col-md-4 .sticky {
|
||||
@include scroll-width(18.75rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $sidenav-breakpoint) {
|
||||
.col-md-4 .sticky {
|
||||
@include scroll-width(21.875rem);
|
||||
}
|
||||
}
|
||||
|
||||
// Dotted scrollspy
|
||||
|
||||
.dotted-scrollspy {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: $scrollspy-dotted-top;
|
||||
right: 0;
|
||||
transform: $scrollspy-dotted-transform;
|
||||
background: $scrollspy-dotted-bg;
|
||||
@include scrollspy-border-radius-4rows(.125rem, 0, 0, .125rem);
|
||||
li {
|
||||
display: block;
|
||||
padding: $scrollspy-padding;
|
||||
&:first-child {
|
||||
padding-top: $scrollspy-padding-top;
|
||||
}
|
||||
&:last-child {
|
||||
padding-bottom: $scrollspy-padding-bottom;
|
||||
}
|
||||
a {
|
||||
padding: $scrollspy-padding-half;
|
||||
span {
|
||||
display:block;
|
||||
background-color: rgba($white, .54);
|
||||
@include scroll-width(.5rem);
|
||||
@include scroll-height(.5rem);
|
||||
@include scrollspy-border-radius(50%);
|
||||
}
|
||||
&.active {
|
||||
span {
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollspy-example {
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
@include scroll-height(12.5rem);
|
||||
padding: $scrollspy-example-padding;
|
||||
}
|
||||
347
html/scss/pro/_sidenav.scss
Executable file
347
html/scss/pro/_sidenav.scss
Executable file
@@ -0,0 +1,347 @@
|
||||
// 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);
|
||||
}
|
||||
|
||||
// Sidenav
|
||||
.side-nav {
|
||||
position: fixed;
|
||||
width: $sidenav-width;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
transform: translateX(-100%);
|
||||
height: 100%;
|
||||
padding-bottom: $sidenav-padding-bottom;
|
||||
background-color: $sidenav-background-color;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
z-index: 1040;
|
||||
backface-visibility: hidden;
|
||||
overflow: hidden;
|
||||
will-change: transform;
|
||||
backface-visibility: hidden;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
@extend .white-text;
|
||||
box-shadow: $z-depth-1;
|
||||
>ul {
|
||||
max-height: 100vh;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
li {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
&.right-aligned {
|
||||
right: 0;
|
||||
left: auto;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
// Light version
|
||||
&.side-nav-light {
|
||||
background-color: $sidenav-light-bgc;
|
||||
.logo-wrapper {
|
||||
border-bottom: 1px solid $sidenav-light-border-bottom-color;
|
||||
&.sn-ad-avatar-wrapper {
|
||||
color: $sidenav-light-color;
|
||||
}
|
||||
}
|
||||
.about {
|
||||
border-bottom: 1px solid $sidenav-light-border-bottom-color;
|
||||
p {
|
||||
color: $sidenav-light-color;
|
||||
}
|
||||
}
|
||||
.social {
|
||||
border-bottom: 1px solid $sidenav-light-border-bottom-color;
|
||||
.fa {
|
||||
color: $sidenav-light-color;
|
||||
}
|
||||
}
|
||||
.search-form {
|
||||
input[type=text] {
|
||||
border-bottom-color: $sidenav-light-border-bottom-color;
|
||||
color: $sidenav-light-color !important;
|
||||
@include placeholder {
|
||||
color: $sidenav-light-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.collapsible {
|
||||
a {
|
||||
color: $sidenav-light-color;
|
||||
}
|
||||
}
|
||||
.collapsible-body {
|
||||
a {
|
||||
background-color: $sidenav-light-collapsible-body-a-bgc;
|
||||
}
|
||||
}
|
||||
.collapsible li .collapsible-header {
|
||||
&:hover {
|
||||
background-color: $sidenav-light-collapsible-header-hover-bgc;
|
||||
}
|
||||
&.active {
|
||||
color: $sidenav-light-collapsible-header-active-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Collapsible menu
|
||||
.collapsible {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-top: $sidenav-collapsible-mt;
|
||||
li {
|
||||
a {
|
||||
&:hover {
|
||||
background-color: $collapsible-hover-bgc;
|
||||
}
|
||||
}
|
||||
}
|
||||
>li {
|
||||
border-radius: $collapsible-li-border-radius;
|
||||
a.collapsible-header {
|
||||
&:hover {
|
||||
background-color: $collapsible-header-hover-bgc;
|
||||
}
|
||||
&.active {
|
||||
background-color: $collapsible-header-active-bgc;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
a {
|
||||
color: $white-base;
|
||||
font-weight: 300;
|
||||
font-size: $sidenav-collapsible-a-font-size;
|
||||
height: $sidenav-collapsible-a-height;
|
||||
line-height: $sidenav-collapsible-a-line-height;
|
||||
&.active,
|
||||
&:hover {
|
||||
border-radius: $collapsible-li-border-radius;
|
||||
}
|
||||
}
|
||||
.fa {
|
||||
font-size: $sidenav-collapsible-a-font-size;
|
||||
margin-right: $sidenav-fa-margin-right;
|
||||
}
|
||||
}
|
||||
.collapsible-body a {
|
||||
padding-left: $sidenav-collapsible-body-a-pl;
|
||||
height: $sidenav-collapsible-a-height;
|
||||
line-height: $sidenav-collapsible-a-height;
|
||||
background-color: $sidenav-collapsible-body-a-bgc;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
font-size: $sidenav-a-font-size;
|
||||
height: $sidenav-a-height;
|
||||
line-height: $sidenav-a-line-height;
|
||||
padding-left: $sidenav-padding-left;
|
||||
}
|
||||
// Manu icon
|
||||
.fa-angle-down {
|
||||
&.rotate-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: $sidenav-rotate-icon-top;
|
||||
margin-right: $sidenav-rotate-icon-mr;
|
||||
}
|
||||
}
|
||||
// Mask and image
|
||||
.sidenav-bg {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: $sidenav-bg-width;
|
||||
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;
|
||||
}
|
||||
}
|
||||
// SideNav logo
|
||||
.logo-wrapper {
|
||||
border-bottom: 1px solid $sidenav-light-border-bottom-color;
|
||||
height: $sidenav-logo-wrapper-height;
|
||||
a {
|
||||
height: $sidenav-logo-wrapper-height;
|
||||
width: $sidenav-logo-wrapper-width;
|
||||
padding: 0;
|
||||
}
|
||||
img {
|
||||
padding-left: $sidenav-logo-wrapper-img-px;
|
||||
padding-right: $sidenav-logo-wrapper-img-px;
|
||||
padding-top: $sidenav-logo-wrapper-img-py;
|
||||
padding-bottom: $sidenav-logo-wrapper-img-py;
|
||||
height: auto;
|
||||
}
|
||||
@media (max-height: $medium-screen) {
|
||||
height: $sidenav-logo-wrapper-medium-img-height;
|
||||
a {
|
||||
height: $sidenav-logo-wrapper-medium-img-height;
|
||||
}
|
||||
img {
|
||||
padding-top: $sidenav-logo-wrapper-medium-img-py;
|
||||
padding-bottom: $sidenav-logo-wrapper-medium-img-py;
|
||||
}
|
||||
}
|
||||
&.sn-avatar-wrapper {
|
||||
padding-left: $sidenav-sn-avatar-wrapper-px;
|
||||
padding-right: $sidenav-sn-avatar-wrapper-px;
|
||||
padding-top: $sidenav-sn-avatar-wrapper-py;
|
||||
padding-bottom: $sidenav-sn-avatar-wrapper-py;
|
||||
img {
|
||||
box-shadow: $z-depth-1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-width: $sidenav-sn-avatar-wrapper-max-width;
|
||||
}
|
||||
@media only screen and (max-height: $medium-screen) {
|
||||
padding-left: $sidenav-sn-avatar-wrapper-medium-px;
|
||||
padding-right: $sidenav-sn-avatar-wrapper-medium-px;
|
||||
img {
|
||||
max-width: $sidenav-sn-avatar-wrapper-medium-max-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.sn-ad-avatar-wrapper {
|
||||
height: auto;
|
||||
margin-bottom: 0;
|
||||
img {
|
||||
max-width: $sidenav-ad-avatar-wrapper-img-max-width;
|
||||
padding: $sidenav-ad-avatar-wrapper-img-padding;
|
||||
float: left;
|
||||
}
|
||||
p {
|
||||
font-size: $sidenav-ad-avatar-wrapper-p-font-size;
|
||||
padding-top: $sidenav-ad-avatar-wrapper-p-padding;
|
||||
padding-bottom: $sidenav-ad-avatar-wrapper-p-padding;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// About
|
||||
.about {
|
||||
padding: $sidenav-about-padding;
|
||||
border-bottom: 1px solid $sidenav-logo-wrapper-border-bottom-color;
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
// Social
|
||||
.social {
|
||||
padding-top: 0;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid $sidenav-logo-wrapper-border-bottom-color;
|
||||
li {
|
||||
display: inline-block;
|
||||
padding-top: $sidenav-social-li-padding;
|
||||
padding-bottom: $sidenav-social-li-padding;
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.fa {
|
||||
font-size: $sidenav-social-fa-font-size;
|
||||
padding-right: $sidenav-social-li-padding;
|
||||
padding-left: $sidenav-social-li-padding;
|
||||
color: $sidenav-social-fa-color;
|
||||
transition: $sidenav-social-fa-transition;
|
||||
&:hover {
|
||||
color: $sidenav-social-fa-color-hover;
|
||||
transition: $sidenav-social-fa-transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Search form
|
||||
.search-form {
|
||||
padding: 0;
|
||||
input[type=text] {
|
||||
border-bottom: 1px solid $sidenav-logo-wrapper-border-bottom-color;
|
||||
font-weight: 300;
|
||||
padding-left: $sidenav-search-form-input-padding-left;
|
||||
@include placeholder {
|
||||
@extend .white-text;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
@extend .white-text;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Touch interaction
|
||||
.drag-target {
|
||||
height: 100%;
|
||||
width: $drag-target-width;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
#sidenav-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 120vh;
|
||||
background-color: $sidenav-overlay;
|
||||
z-index: 997;
|
||||
will-change: opacity;
|
||||
}
|
||||
218
html/scss/pro/_skins.scss
Executable file
218
html/scss/pro/_skins.scss
Executable file
@@ -0,0 +1,218 @@
|
||||
// Skins
|
||||
@each $skin, $data in $skins {
|
||||
.#{$skin}-skin {
|
||||
.gradient {
|
||||
background: map-get($data, skin-gradient-start);
|
||||
background: linear-gradient(135deg, map-get($data, skin-gradient-start) 0%, map-get($data, skin-gradient-end) 100%);
|
||||
}
|
||||
.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 {
|
||||
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 {
|
||||
border-bottom: 1px solid $skins-border-color;
|
||||
a {
|
||||
@if $skin=="white" {
|
||||
.fa {
|
||||
color: map-get($data, skin-text);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.fa {
|
||||
color: map-get($data, skin-accent) !important;
|
||||
transition: $skins-side-nav-hover-transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $skin=="white" {
|
||||
.search-form .md-form input {
|
||||
color: map-get($data, skin-text) !important;
|
||||
border-bottom: $skins-white-search-border-bottom solid $skins-border-color;
|
||||
@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);
|
||||
transition: $skins-side-nav-hover-transition;
|
||||
&.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
.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));
|
||||
@include make-outline-button("primary", map-get($data, skin-btn-primary));
|
||||
@include make-outline-button("secondary", map-get($data, skin-btn-secondary));
|
||||
@include make-outline-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]),
|
||||
input[type="number"]: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 $white-base;
|
||||
border-bottom: 2px solid $white-base;
|
||||
}
|
||||
&: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: $white-base;
|
||||
background-color: map-get($data, skin-primary-color);
|
||||
}
|
||||
.page-link {
|
||||
color: map-get($data, skin-primary-color);
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
27
html/scss/pro/_social-buttons.scss
Executable file
27
html/scss/pro/_social-buttons.scss
Executable file
@@ -0,0 +1,27 @@
|
||||
// Social buttons
|
||||
.counter {
|
||||
box-shadow: $z-depth-1;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
margin-top: $btn-counter-margin-top;
|
||||
margin-left: $btn-counter-margin-left;
|
||||
border-radius: $btn-counter-border-radius;
|
||||
padding: $btn-counter-padding-y $btn-counter-padding-x;
|
||||
background-color: $btn-counter-bgc;
|
||||
font-size: $btn-counter-font-size;
|
||||
color: $white-base;
|
||||
left: auto;
|
||||
&.counter-lg {
|
||||
margin-top: $btn-lg-counter-margin-top;
|
||||
}
|
||||
&.counter-md {
|
||||
margin-top: $btn-md-counter-margin-top;
|
||||
}
|
||||
&.counter-sm {
|
||||
margin-top: $btn-sm-counter-margin-top;
|
||||
}
|
||||
}
|
||||
|
||||
@each $medium, $color in $social-colors {
|
||||
@include make-button($medium, $color);
|
||||
}
|
||||
157
html/scss/pro/_steppers.scss
Executable file
157
html/scss/pro/_steppers.scss
Executable file
@@ -0,0 +1,157 @@
|
||||
// Steppers
|
||||
.stepper {
|
||||
li {
|
||||
a {
|
||||
padding: $stepper-li-a-padding;
|
||||
font-size: $stepper-li-a-font-size;
|
||||
text-align: center;
|
||||
.circle {
|
||||
display: inline-block;
|
||||
color: $stepper-li-a-circle-color;
|
||||
border-radius: $stepper-li-a-circle-border-radius;
|
||||
background: $stepper-li-a-circle-bg;
|
||||
width: $stepper-li-a-circle-width;
|
||||
height: $stepper-li-a-circle-height;
|
||||
text-align: center;
|
||||
line-height: $stepper-li-a-circle-line-height;
|
||||
margin-right: $stepper-li-a-circle-mr;
|
||||
}
|
||||
.label {
|
||||
display: inline-block;
|
||||
color: $stepper-li-a-circle-bg;
|
||||
}
|
||||
}
|
||||
&.active,
|
||||
&.completed {
|
||||
a {
|
||||
.circle {
|
||||
@extend .primary-color;
|
||||
}
|
||||
.label {
|
||||
font-weight: 600;
|
||||
color: $stepper-li-a-label-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.warning {
|
||||
a {
|
||||
.circle {
|
||||
@extend .danger-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal
|
||||
.stepper-horizontal {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
li {
|
||||
transition: $stepper-horizontal-li-transition;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
a {
|
||||
.label {
|
||||
margin-top: $stepper-horizontal-li-a-label-mt;
|
||||
}
|
||||
}
|
||||
&:not(:last-child):after {
|
||||
content: "";
|
||||
position: relative;
|
||||
flex: 1;
|
||||
margin: $stepper-horizontal-li-after-margin 0 0 0;
|
||||
height: $stepper-horizontal-li-after-height;
|
||||
background-color: $stepper-horizontal-li-after-bgc;
|
||||
}
|
||||
&:not(:first-child):before {
|
||||
content: "";
|
||||
position: relative;
|
||||
flex: 1;
|
||||
margin: $stepper-horizontal-li-after-margin 0 0 0;
|
||||
height: $stepper-horizontal-li-after-height;
|
||||
background-color: $stepper-horizontal-li-after-bgc;
|
||||
}
|
||||
&:hover {
|
||||
background: $stepper-horizontal-li-hover-bg;
|
||||
}
|
||||
}
|
||||
@media (max-width: $stepper-horizontal-breakpoint) {
|
||||
flex-direction: column;
|
||||
li {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
a {
|
||||
.label {
|
||||
flex-flow: column nowrap;
|
||||
order: 2;
|
||||
margin-top: $stepper-horizontal-small-li-a-label-mt;
|
||||
}
|
||||
}
|
||||
&:not(:last-child):after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: $stepper-horizontal-small-li-after-width;
|
||||
height: $stepper-horizontal-small-li-after-height;
|
||||
left: $stepper-horizontal-small-li-after-left;
|
||||
top: $stepper-horizontal-small-li-after-top;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
margin-top: $stepper-vertical-li-a-label-mt;
|
||||
}
|
||||
}
|
||||
&.completed {
|
||||
a {
|
||||
.label {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.step-content {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-left: $stepper-vertical-li-step-content-ml;
|
||||
padding: $stepper-vertical-li-step-content-padding;
|
||||
p {
|
||||
font-size: $stepper-vertical-li-step-content-p-font-size;
|
||||
}
|
||||
}
|
||||
&:not(:last-child):after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: $stepper-vertical-li-after-width;
|
||||
height: $stepper-vertical-li-after-height;
|
||||
left: $stepper-vertical-li-after-left;
|
||||
top: $stepper-vertical-li-after-top;
|
||||
background-color: $stepper-vertical-li-after-bgc;
|
||||
}
|
||||
}
|
||||
}
|
||||
51
html/scss/pro/_switch.scss
Executable file
51
html/scss/pro/_switch.scss
Executable file
@@ -0,0 +1,51 @@
|
||||
// Switch
|
||||
.switch label {
|
||||
cursor: pointer;
|
||||
input[type=checkbox] {
|
||||
opacity: 0;
|
||||
@include switch-width-height(0, 0);
|
||||
&:checked + .lever {
|
||||
background-color: map-get($switch-colors, "checked-lever-bg");
|
||||
}
|
||||
&:checked + .lever:after {
|
||||
background-color: map-get($switch-colors, "bg");
|
||||
left: $switch-input-checkbox-checked-lever-after-left;
|
||||
}
|
||||
&:checked:not(:disabled) ~ .lever:active:after {
|
||||
@include box-shadows($switch-lever-after-box-shadow-darker, $switch-lever-after-box-shadow-transp);
|
||||
}
|
||||
&:not(:disabled) ~ .lever:active:after {
|
||||
@include box-shadows($switch-lever-after-box-shadow-darker, $switch-lever-after-box-shadow-lighter);
|
||||
}
|
||||
&:disabled + .lever {
|
||||
cursor: default;
|
||||
}
|
||||
&:disabled + .lever:after, &:disabled:checked + .lever:after {
|
||||
background-color: $input-disabled-solid-color;
|
||||
}
|
||||
}
|
||||
.lever {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
background-color: map-get($switch-colors, "unchecked-lever-bg");
|
||||
border-radius: $switch-lever-border-radius-small;
|
||||
margin-right: $switch-lever-mr;
|
||||
vertical-align: middle;
|
||||
margin: $switch-lever-margin;
|
||||
@include switch-width-height(2.5rem, 0.9375rem);
|
||||
@include transition-main($switch-lever-after-transition-bg);
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
background-color: map-get($switch-colors, "unchecked-bg");
|
||||
border-radius: $switch-lever-after-border-radius-high;
|
||||
left: $switch-lever-after-left;
|
||||
top: $switch-lever-after-top;
|
||||
@include box-shadows($switch-lever-after-box-shadow-darker);
|
||||
@include switch-width-height(1.3125rem, 1.3125rem);
|
||||
@include transition-main($switch-lever-after-transition-left, $switch-lever-after-transition-bg, $switch-lever-after-transition-box);
|
||||
}
|
||||
}
|
||||
}
|
||||
147
html/scss/pro/_tabs.scss
Executable file
147
html/scss/pro/_tabs.scss
Executable file
@@ -0,0 +1,147 @@
|
||||
// Navs, Tabs and Pills
|
||||
.nav-tabs {
|
||||
box-shadow: $z-depth-1-half;
|
||||
border: 0;
|
||||
padding: $tabs-padding;
|
||||
margin-left: $tabs-margin-x;
|
||||
margin-right: $tabs-margin-x;
|
||||
margin-bottom: $tabs-margin-y;
|
||||
background-color: $nav-tabs-pills-bgc;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
border-radius: $nav-tabs-border-radius;
|
||||
.nav-item + .nav-item {
|
||||
margin-left: 0;
|
||||
}
|
||||
.nav-item {
|
||||
&.disabled {
|
||||
pointer-events: none !important;
|
||||
.nav-link {
|
||||
color: $nav-item-disabled-link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-link {
|
||||
transition: $nav-link-transition;
|
||||
border: 0;
|
||||
color: $white-base;
|
||||
}
|
||||
.nav-link.active,
|
||||
.nav-item.open .nav-link {
|
||||
background-color: $nav-link-active-bgc;
|
||||
color: $white-base;
|
||||
transition: $nav-link-active-transition;
|
||||
border-radius: $nav-tabs-border-radius;
|
||||
}
|
||||
.nav-item.show .nav-link {
|
||||
background-color: $nav-tabs-pills-bgc;
|
||||
color: $white-base;
|
||||
transition: $nav-link-active-transition;
|
||||
border-radius: $nav-tabs-border-radius;
|
||||
}
|
||||
.nav-item.show .nav-link.dropdown-toggle {
|
||||
background-color: $nav-link-active-bgc;
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
padding: $tab-content-padding;
|
||||
padding-top: $tab-content-pt;
|
||||
// z-index: 1;
|
||||
&.vertical {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.md-pills {
|
||||
border: 0;
|
||||
li {
|
||||
padding: $pills-padding;
|
||||
}
|
||||
.show > .nav-link {
|
||||
box-shadow: $z-depth-1;
|
||||
color: $white-base;
|
||||
background-color: $nav-tabs-pills-bgc;
|
||||
}
|
||||
.nav-link {
|
||||
transition: $nav-link-transition;
|
||||
border-radius: $md-pills-nav-link-border-radius;
|
||||
color: $md-pills-nav-link-color;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
@extend .rgba-grey-light;
|
||||
}
|
||||
&.active {
|
||||
box-shadow: $z-depth-1;
|
||||
color: $white-base;
|
||||
background-color: $nav-tabs-pills-bgc;
|
||||
}
|
||||
&.active:hover {
|
||||
box-shadow: $z-depth-1-half;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $mdb-colors {
|
||||
.pills-#{$name} {
|
||||
.show > .nav-link {
|
||||
background-color: $color !important;
|
||||
}
|
||||
.nav-link {
|
||||
&.active {
|
||||
background-color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabs-#{$name} {
|
||||
background-color: $color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.classic-tabs {
|
||||
.nav {
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
border-radius: $classic-tabs-border-radius $classic-tabs-border-radius 0 0;
|
||||
@media (min-width: 62rem) {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
li {
|
||||
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: $classic-tabs-li-a-active-border-bottom solid;
|
||||
color: $white-base;
|
||||
}
|
||||
}
|
||||
@media (min-width: 62em) {
|
||||
&:first-child {
|
||||
margin-left: $classic-tabs-margin-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
@each $name, $color in $ctbc {
|
||||
&.#{$name} {
|
||||
li {
|
||||
a {
|
||||
&.active {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
&.card {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
144
html/scss/pro/_toasts.scss
Executable file
144
html/scss/pro/_toasts.scss
Executable file
@@ -0,0 +1,144 @@
|
||||
// Toasts
|
||||
.toast-title {
|
||||
font-weight: 400;
|
||||
}
|
||||
.toast-message {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.toast-message a,
|
||||
.toast-message label {
|
||||
@extend .white-text;
|
||||
}
|
||||
.toast-message a:hover {
|
||||
color: $toast-message-a-hover-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
.toast-close-button {
|
||||
@extend .white-text;
|
||||
position: relative;
|
||||
right: $toast-close-button-right;
|
||||
top: $toast-close-button-top;
|
||||
float: right;
|
||||
font-size: $toast-close-button-font-size;
|
||||
font-weight: 400;
|
||||
text-shadow: $toast-close-button-text-shadow $white-base;
|
||||
opacity: $toast-close-button-opacity;
|
||||
filter: $toast-close-button-filter;
|
||||
}
|
||||
.toast-close-button:hover,
|
||||
.toast-close-button:focus {
|
||||
@extend .black-text;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
opacity: $toast-close-button-hover-opacity;
|
||||
filter: $toast-close-button-hover-filter;
|
||||
}
|
||||
button.toast-close-button {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
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: $toast-top-bottom-left-right-size;
|
||||
left: $toast-top-bottom-left-right-size;
|
||||
}
|
||||
.toast-top-right {
|
||||
top: $toast-top-bottom-left-right-size;
|
||||
right: $toast-top-bottom-left-right-size;
|
||||
}
|
||||
.toast-bottom-right {
|
||||
right: $toast-top-bottom-left-right-size;
|
||||
bottom: $toast-top-bottom-left-right-size;
|
||||
}
|
||||
.toast-bottom-left {
|
||||
bottom: $toast-top-bottom-left-right-size;
|
||||
left: $toast-top-bottom-left-right-size;
|
||||
}
|
||||
#toast-container {
|
||||
position: fixed;
|
||||
z-index: 999999;
|
||||
}
|
||||
#toast-container * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#toast-container > div {
|
||||
box-shadow: $z-depth-1;
|
||||
@extend .white-text;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 0 $toast-container-margin;
|
||||
padding: $toast-container-py $toast-container-pr $toast-container-py $toast-container-pl;
|
||||
width: $toast-container-width;
|
||||
background-position: $toast-container-py center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: $toast-container-opacity;
|
||||
filter: $toast-container-filter;
|
||||
}
|
||||
#toast-container > :hover {
|
||||
box-shadow: $z-depth-2;
|
||||
transition: $toast-container-hover-transition;
|
||||
opacity: $toast-container-hover-opacity;
|
||||
filter: $toast-container-hover-filter;
|
||||
cursor: pointer;
|
||||
}
|
||||
#toast-container.toast-top-center > div,
|
||||
#toast-container.toast-bottom-center > div {
|
||||
width: $toast-container-width;
|
||||
margin: auto;
|
||||
}
|
||||
#toast-container.toast-top-full-width > div,
|
||||
#toast-container.toast-bottom-full-width > div {
|
||||
width: $toast-container-top-full-width;
|
||||
margin: auto;
|
||||
}
|
||||
.toast {
|
||||
background-color: $toast-bgc;
|
||||
}
|
||||
.toast-success {
|
||||
background-color: $success-color;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
|
||||
}
|
||||
.toast-error {
|
||||
background-color: $danger-color;
|
||||
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;
|
||||
}
|
||||
.toast-info {
|
||||
background-color: $info-color;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
|
||||
}
|
||||
.toast-warning {
|
||||
background-color: $warning-color;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
|
||||
}
|
||||
|
||||
.toast-progress {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: $toast-progress-height;
|
||||
background-color: $black-base;
|
||||
opacity: $toast-progress-opacity;
|
||||
filter: $toast-progress-filter;
|
||||
}
|
||||
1181
html/scss/pro/_variables.scss
Executable file
1181
html/scss/pro/_variables.scss
Executable file
File diff suppressed because it is too large
Load Diff
337
html/scss/pro/picker/_default-date.scss
Executable file
337
html/scss/pro/picker/_default-date.scss
Executable file
@@ -0,0 +1,337 @@
|
||||
/* ==========================================================================
|
||||
$BASE-DATE-PICKER
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* The picker box.
|
||||
*/
|
||||
|
||||
.picker__box {
|
||||
padding: 0;
|
||||
border-radius: $datepicker-box-padding;
|
||||
overflow: hidden;
|
||||
/**
|
||||
* The header containing the month and year stuff.
|
||||
*/
|
||||
.picker__header {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-bottom: $datepicker-header-mb;
|
||||
select {
|
||||
display: inline-block !important;
|
||||
}
|
||||
.picker__date-display {
|
||||
text-align: center;
|
||||
background-color: $datepicker-date-bg;
|
||||
@extend .white-text;
|
||||
padding-bottom: $datepicker-date-display-pb;
|
||||
font-weight: $datepicker-date-display-font-weight;
|
||||
margin-bottom: $datepicker-date-display-mb;
|
||||
.picker__weekday-display {
|
||||
background-color: $datepicker-weekday-bg;
|
||||
padding: $datepicker-weekday-display-padding;
|
||||
font-weight: $datepicker-weekday-display-font-weight;
|
||||
letter-spacing: $datepicker-weekday-display-letter-spacing;
|
||||
font-size: $datepicker-weekday-display-font-size;
|
||||
margin-bottom: $datepicker-weekday-display-mb;
|
||||
}
|
||||
.picker__month-display {
|
||||
text-transform: uppercase;
|
||||
font-size: $datepicker-month-display-font-size;
|
||||
}
|
||||
.picker__day-display {
|
||||
font-size: $datepicker-day-display-font-size;
|
||||
font-weight: $datepicker-day-display-font-weight;
|
||||
}
|
||||
.picker__year-display {
|
||||
font-size: $datepicker-year-display-font-size;
|
||||
color: $datepicker-year;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* The month and year labels.
|
||||
*/
|
||||
.picker__month,
|
||||
.picker__year {
|
||||
display: inline-block;
|
||||
margin-left: $datepicker-year-ml;
|
||||
margin-right: $datepicker-year-mr;
|
||||
}
|
||||
/**
|
||||
* The month and year selectors.
|
||||
*/
|
||||
.picker__select--month,
|
||||
.picker__select--year {
|
||||
height: $datepicker-select-month-height;
|
||||
padding: 0;
|
||||
margin-left: $datepicker-select-month-ml;
|
||||
margin-right: $datepicker-select-month-mr;
|
||||
display: inline-block;
|
||||
&:focus {
|
||||
border-color: $datepicker-focus;
|
||||
}
|
||||
}
|
||||
.picker__select--year {
|
||||
width: $datepicker-select-year;
|
||||
}
|
||||
// Modified
|
||||
.picker__select--month.browser-default {
|
||||
display: inline;
|
||||
@extend .white;
|
||||
width: $datepicker-select-month-browser-width;
|
||||
}
|
||||
.picker__select--year.browser-default {
|
||||
display: inline;
|
||||
@extend .white;
|
||||
width: $datepicker-select-year-browser-width;
|
||||
}
|
||||
/**
|
||||
* The month navigation buttons.
|
||||
*/
|
||||
.picker__nav--prev,
|
||||
.picker__nav--next {
|
||||
position: absolute;
|
||||
padding: $datepicker-nav-prev-next-py $datepicker-nav-prev-next-px;
|
||||
width: $datepicker-nav-prev-next-width;
|
||||
height: $datepicker-nav-prev-next-height;
|
||||
box-sizing: content-box;
|
||||
bottom: 0;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $black-base;
|
||||
background: $datepicker-selected-outfocus;
|
||||
}
|
||||
&:before {
|
||||
content: " ";
|
||||
border-top: $datepicker-nav-prev-next-bt solid transparent;
|
||||
border-bottom: $datepicker-nav-prev-next-bb solid transparent;
|
||||
border-right: $datepicker-nav-prev-next-br solid $datepicker-nav-prev-next-br-color;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.picker__nav--prev {
|
||||
left: $datepicker-nav-prev-left;
|
||||
padding-right: $datepicker-nav-prev-pr;
|
||||
}
|
||||
.picker__nav--next {
|
||||
right: $datepicker-nav-next-right;
|
||||
padding-left: $datepicker-nav-next-pf;
|
||||
&:before {
|
||||
border-right: 0;
|
||||
border-left: $datepicker-nav-next-border-left solid $datepicker-nav-prev-next-br-color;
|
||||
}
|
||||
}
|
||||
.picker__nav--disabled,
|
||||
.picker__nav--disabled:hover,
|
||||
.picker__nav--disabled:before,
|
||||
.picker__nav--disabled:before:hover {
|
||||
cursor: default;
|
||||
background: none;
|
||||
border-right-color: $grey-lighten-4;
|
||||
border-left-color: $grey-lighten-4;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* The calendar table of dates
|
||||
*/
|
||||
.picker__table {
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
font-size: $datepicker-table-font-size;
|
||||
width: $datepicker-table-width;
|
||||
margin-top: $datepicker-table-mt;
|
||||
margin-bottom: $datepicker-table-mb;
|
||||
th, td {
|
||||
text-align: center;
|
||||
}
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/**
|
||||
* The weekday labels
|
||||
*/
|
||||
.picker__weekday {
|
||||
width: $datepicker-table-weekday-width;
|
||||
font-size: $datepicker-table-weekday-font-size;
|
||||
padding-bottom: $datepicker-table-weekday-padding-bottom;
|
||||
color: $datepicker-color-mdb;
|
||||
font-weight:$datepicker-table-weekday-font-weight;
|
||||
/* Increase the spacing a tad */
|
||||
@media (min-height: $pickerweekday-padb-breakpoint) {
|
||||
padding-bottom: $datepicker-table-weekday-padding-bottom;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* The days on the calendar
|
||||
*/
|
||||
.picker__day--today {
|
||||
position: relative;
|
||||
letter-spacing: $datepicker-table-day-today-letter-spacing;
|
||||
padding: $datepicker-table-day-today-py 0;
|
||||
font-weight: $datepicker-table-day-today-font-weight;
|
||||
border: $datepicker-table-day-today-border solid transparent;
|
||||
}
|
||||
.picker__day.picker__day--today {
|
||||
color: $datepicker-selected;
|
||||
}
|
||||
.picker__day--disabled{
|
||||
&:before {
|
||||
border-top-color: #aaaaaa;
|
||||
}
|
||||
}
|
||||
.picker__day--infocus{
|
||||
color: $datepicker-table-day-infocus-color;
|
||||
letter-spacing: $datepicker-table-day-infocus-letter-spacing;
|
||||
padding: $datepicker-table-day-infocus-py 0;
|
||||
font-weight: $datepicker-table-day-infocus-font-weight;
|
||||
border: $datepicker-table-day-infocus-color transparent;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $black;
|
||||
font-weight: $datepicker-table-day-infocus-hover-font-weight;
|
||||
}
|
||||
}
|
||||
.picker__day--outfocus {
|
||||
display: none;
|
||||
padding: $datepicker-table-day-outfocus-py 0;
|
||||
@extend .white-text;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $datepicker-table-day-outfocus-hover-color;
|
||||
font-weight: $datepicker-table-day-outfocus-hover-font-weight;
|
||||
}
|
||||
}
|
||||
.picker__day--highlighted:hover,
|
||||
.picker--focused .picker__day--highlighted {
|
||||
cursor: pointer;
|
||||
}
|
||||
.picker__day--selected,
|
||||
.picker__day--selected:hover,
|
||||
.picker--focused {
|
||||
// Circle background
|
||||
border-radius: $datepicker-table-day-selected-hover-border-radius;
|
||||
transform: $datepicker-table-day-selected-hover-transform;
|
||||
background-color: $datepicker-selected;
|
||||
&.picker__day--outfocus {
|
||||
background-color: $datepicker-selected-outfocus;
|
||||
}
|
||||
@extend .white-text;
|
||||
box-shadow: $z-depth-1-half;
|
||||
}
|
||||
.picker__day--disabled,
|
||||
.picker__day--disabled:hover,
|
||||
.picker--focused {
|
||||
background: $grey-lighten-4;
|
||||
border-color: $grey-lighten-4;
|
||||
color: $datepicker-table-day-outfocus-hover-color;
|
||||
cursor: default;
|
||||
}
|
||||
.picker__day--highlighted.picker__day--disabled,
|
||||
.picker__day--highlighted.picker__day--disabled:hover {
|
||||
background: $datepicker-table-day-higlighted-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* The footer containing the "today", "clear", and "close" buttons.
|
||||
*/
|
||||
.picker__footer {
|
||||
text-align: right;
|
||||
padding: $datepicker-footer-py $datepicker-footer-px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.picker__button--today,
|
||||
.picker__button--clear,
|
||||
.picker__button--close {
|
||||
border: $datepicker-footer-today-clear-button-border solid $white;
|
||||
background: $white;
|
||||
font-size: $datepicker-footer-today-clear-button-font-size;
|
||||
padding: $datepicker-footer-today-clear-button-padding;
|
||||
font-weight: $datepicker-footer-today-clear-button-font-weight;
|
||||
width: $datepicker-footer-today-clear-button-width;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
text-transform: uppercase;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $black;
|
||||
background: $datepicker-footer-today-clear-button-hover-color;
|
||||
border-bottom-color: $datepicker-footer-today-clear-button-hover-color;
|
||||
}
|
||||
&:focus {
|
||||
background: $datepicker-footer-today-clear-button-hover-color;
|
||||
border-color: $datepicker-focus;
|
||||
outline: none;
|
||||
}
|
||||
&:before {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
.picker__button--today,
|
||||
.picker__button--clear{
|
||||
&:before {
|
||||
content: " ";
|
||||
margin-right: $datepicker-footer-today-clear-button-before-mr;
|
||||
}
|
||||
}
|
||||
.picker__button--today{
|
||||
&:before {
|
||||
top: $datepicker-footer-today-button-before-top;
|
||||
width: 0;
|
||||
border-top: $datepicker-footer-today-button-before-bt solid $datepicker-footer-today-button-before-bt-color;
|
||||
border-left: $datepicker-footer-today-button-before-bl solid transparent;
|
||||
}
|
||||
}
|
||||
.picker__button--clear{
|
||||
&:before {
|
||||
top: $datepicker-footer-clear-button-before-top;
|
||||
width: $datepicker-footer-clear-button-before-width;
|
||||
border-top: $datepicker-footer-clear-button-before-bl solid $datepicker-footer-clear-button-before-bt-color;
|
||||
}
|
||||
}
|
||||
.picker__button--close{
|
||||
&:before {
|
||||
content: "\D7";
|
||||
top: $datepicker-footer-close-button-before-top;
|
||||
vertical-align: top;
|
||||
font-size: $datepicker-footer-close-button-before-font-size;
|
||||
margin-right: $datepicker-footer-close-button-before-mr;
|
||||
color: $datepicker-footer-close-button-before-color;
|
||||
}
|
||||
}
|
||||
.picker__button--today[disabled],
|
||||
.picker__button--today[disabled]:hover {
|
||||
background: $grey-lighten-4;
|
||||
border-color: $grey-lighten-4;
|
||||
color: $datepicker-table-day-outfocus-hover-color;
|
||||
cursor: default;
|
||||
}
|
||||
.picker__button--today[disabled]:before {
|
||||
border-top-color: #aaaaaa;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
CUSTOM MATERIALIZE STYLES
|
||||
========================================================================== */
|
||||
|
||||
.picker__calendar-container {
|
||||
padding: $datepicker-calender-padding;
|
||||
thead {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
422
html/scss/pro/picker/_default-time.scss
Executable file
422
html/scss/pro/picker/_default-time.scss
Executable file
@@ -0,0 +1,422 @@
|
||||
/* ==========================================================================
|
||||
$BASE-TIME-PICKER
|
||||
========================================================================== */
|
||||
/**
|
||||
* The list of times.
|
||||
*/
|
||||
.picker__list {
|
||||
list-style: none;
|
||||
padding: $timepicker-pickerlist-padding;
|
||||
margin: 0;
|
||||
}
|
||||
/**
|
||||
* The times on the clock.
|
||||
*/
|
||||
.picker__list-item {
|
||||
border-bottom: $timepicker-pickerlistitem-border-bottom solid $timepicker-pickerlistitem-border-color;
|
||||
border-top: $timepicker-pickerlistitem-border-top solid $timepicker-pickerlistitem-border-color;
|
||||
margin-bottom: $timepicker-pickerlistitem-mb;
|
||||
position: relative;
|
||||
@extend .white;
|
||||
padding: $timepicker-pickerlistitem-padding;
|
||||
@media (min-height: $timepicker-pickerlistitem-breakpoint) {
|
||||
padding: $timepicker-pickerlistitem-media-padding;
|
||||
}
|
||||
/* Hovered time */
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
@extend .black;
|
||||
background: $timepicker-pickerlistitem-hover-bg;
|
||||
border-color: $timepicker-pickerlistitem-hover-border-color;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
/* Highlighted and hovered/focused time */
|
||||
.picker__list-item--highlighted {
|
||||
border-color: $timepicker-pickerlistitem-highlighted-border-color;
|
||||
z-index: 10;
|
||||
}
|
||||
.picker__list-item--highlighted:hover,
|
||||
.picker--focused .picker__list-item--highlighted {
|
||||
cursor: pointer;
|
||||
color: $black;
|
||||
background: $timepicker-pickerlistitem-highlighted-hover-bg;
|
||||
}
|
||||
/* Selected and hovered/focused time */
|
||||
.picker__list-item--selected,
|
||||
.picker__list-item--selected:hover,
|
||||
.picker--focused .picker__list-item--selected {
|
||||
background: $timepicker-pickerlistitem-selected-hover-bg;
|
||||
@extend .white-text;
|
||||
z-index: 10;
|
||||
}
|
||||
/* Disabled time */
|
||||
.picker__list-item--disabled,
|
||||
.picker__list-item--disabled:hover,
|
||||
.picker--focused .picker__list-item--disabled {
|
||||
background: $grey-lighten-4;
|
||||
border-color: $grey-lighten-4;
|
||||
color: $timepicker-pickerlistitem-disabled-hover-color;
|
||||
cursor: default;
|
||||
border-color: $timepicker-pickerlistitem-disabled-hover-color;
|
||||
z-index: auto;
|
||||
}
|
||||
/**
|
||||
* The clear button
|
||||
*/
|
||||
.picker--time {
|
||||
.picker__button--clear {
|
||||
display: block;
|
||||
width: $timepicker-pickertime-button-clear-width;
|
||||
margin: $timepicker-pickertime-button-clear-mt auto 0;
|
||||
padding: $timepicker-pickertime-button-clear-padding;
|
||||
background: none;
|
||||
border: 0;
|
||||
font-weight: $timepicker-pickertime-button-clear-font-weight;
|
||||
font-size: $timepicker-pickertime-button-clear-font-size;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: $timepicker-color-mdb;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $black;
|
||||
background: $timepicker-pickertime-button-clear-hover-bg;
|
||||
border-color: $timepicker-pickertime-button-clear-hover-border-color;
|
||||
cursor: pointer;
|
||||
@extend .white-text;
|
||||
outline: none;
|
||||
&:before {
|
||||
@extend .white-text;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
top: $timepicker-pickertime-button-clear-before-top;
|
||||
color: $timepicker-color-mdb;
|
||||
font-size: $timepicker-pickertime-button-clear-before-font-size;
|
||||
font-weight: $timepicker-pickertime-button-clear-before-font-weight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
$DEFAULT-TIME-PICKER
|
||||
========================================================================== */
|
||||
/**
|
||||
* The frame the bounds the time picker.
|
||||
*/
|
||||
.picker--time .picker__frame {
|
||||
min-width: $timepicker-pickertime-frame-min-width;
|
||||
max-width: $timepicker-pickertime-frame-max-width;
|
||||
}
|
||||
/**
|
||||
* The picker box.
|
||||
*/
|
||||
.picker--time .picker__box {
|
||||
font-size: $timepicker-pickerbox-font-size;
|
||||
background: $timepicker-pickerbox-bg;
|
||||
padding: 0;
|
||||
@media (min-height: $timepicker-pickerbox-breakpoint) {
|
||||
margin-bottom: $timepicker-pickerbox-breakpoint-mb;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*!
|
||||
* 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: $timepicker-pickerdate-display-pb;
|
||||
font-weight: $timepicker-pickerdate-display-font-weight;
|
||||
margin-bottom: $timepicker-pickerdate-display-mb;
|
||||
|
||||
.clockpicker-display {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
height: $timepicker-clockpicker-display-height;
|
||||
font-size: $timepicker-clockpicker-display-font-size;
|
||||
padding: $timepicker-clockpicker-display-padding;
|
||||
padding-bottom: 0px;
|
||||
color: $timepicker-clockpicker-display-color;
|
||||
.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: $timepicker-clockpicker-display-animate-name;
|
||||
@extend .white-text;
|
||||
}
|
||||
#click-am, #click-pm {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.clockpicker-display-am-pm {
|
||||
padding-left: $timepicker-clockpicker-display-am-pm-pl;
|
||||
vertical-align: bottom;
|
||||
height: $timepicker-clockpicker-display-am-pm-height;
|
||||
.clockpicker-span-am-pm {
|
||||
display: inline-block;
|
||||
font-size: $timepicker-clockpicker-span-am-pm-font-size;
|
||||
line-height: $timepicker-clockpicker-span-am-pm-line-height;
|
||||
color: $timepicker-clockpicker-span-am-pm-color;
|
||||
}
|
||||
}
|
||||
.clockpicker-span-hours, .clockpicker-span-minutes {
|
||||
animation-duration: $timepicker-clockpicker-span-hours-animation-duration;
|
||||
animation-fill-mode: both;
|
||||
transition: $timepicker-clockpicker-span-hours-transition;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.clockpicker-display {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
height: $timepicker-clockpicker-display-height;
|
||||
font-size: $timepicker-clockpicker-display-font-size;
|
||||
padding: $timepicker-clockpicker-display-padding;
|
||||
padding-bottom: 0px;
|
||||
color: $timepicker-clockpicker-display-color;
|
||||
.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: $timepicker-clockpicker-display-animate-name;
|
||||
@extend .white-text;
|
||||
}
|
||||
#click-am, #click-pm {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.clockpicker-display-am-pm {
|
||||
padding-left: $timepicker-clockpicker-display-am-pm-pl;
|
||||
vertical-align: bottom;
|
||||
height: $timepicker-clockpicker-display-am-pm-height;
|
||||
.clockpicker-span-am-pm {
|
||||
display: inline-block;
|
||||
font-size: $timepicker-clockpicker-span-am-pm-font-size;
|
||||
line-height: $timepicker-clockpicker-span-am-pm-line-height;
|
||||
color: $timepicker-clockpicker-span-am-pm-color;
|
||||
}
|
||||
}
|
||||
.clockpicker-span-hours, .clockpicker-span-minutes {
|
||||
animation-duration: $timepicker-clockpicker-span-hours-animation-duration;
|
||||
animation-fill-mode: both;
|
||||
cursor: pointer;
|
||||
@include transition-main($timepicker-clockpicker-span-hours-transition);
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes (pulse){
|
||||
from {
|
||||
transform: $timepicker-keyframes-transform-pulse;
|
||||
}
|
||||
50% {
|
||||
transform: $timepicker-keyframes-transform-pulse-middle;
|
||||
}
|
||||
to {
|
||||
transform: $timepicker-keyframes-transform-pulse;
|
||||
}
|
||||
}
|
||||
|
||||
.clockpicker-moving {
|
||||
cursor: move;
|
||||
}
|
||||
.clockpicker-plate {
|
||||
background-color: $grey-lighten-3;
|
||||
border-radius: $timepicker-clockpicker-plate-border-radius;
|
||||
width: $timepicker-clockpicker-plate-width;
|
||||
height: $timepicker-clockpicker-plate-height;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
margin-top: $timepicker-clockpicker-plate-margin-top;
|
||||
/* Disable text selection highlighting. Thanks to Hermanya */
|
||||
user-select: none;
|
||||
.clockpicker-canvas,
|
||||
.clockpicker-dial {
|
||||
width: $timepicker-clockpicker-canvas-width;
|
||||
height: $timepicker-clockpicker-canvas-height;
|
||||
position: absolute;
|
||||
left: $timepicker-clockpicker-canvas-left;
|
||||
top: $timepicker-clockpicker-canvas-top;
|
||||
}
|
||||
.clockpicker-dial {
|
||||
@include transition-main($timepicker-clockpicker-dial-transition-transform, $timepicker-clockpicker-dial-transition-opacity);
|
||||
.clockpicker-tick {
|
||||
border-radius: $timepicker-clockpicker-dial-tick-border-radius;
|
||||
color: $timepicker-color-mdb;
|
||||
line-height: $timepicker-clockpicker-dial-tick-line-height;
|
||||
text-align: center;
|
||||
width: $timepicker-clockpicker-dial-tick-width;
|
||||
height: $timepicker-clockpicker-dial-tick-height;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
transition: $timepicker-clockpicker-dial-tick-transition;
|
||||
background-color: $timepicker-clockpicker-dial-tick-hover-bg;
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: $timepicker-clockpicker-dial-tick-hover-bg-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
.clockpicker-minutes {
|
||||
visibility: hidden;
|
||||
}
|
||||
.clockpicker-dial-out {
|
||||
opacity: 0;
|
||||
}
|
||||
.clockpicker-hours.clockpicker-dial-out {
|
||||
@include transform($timepicker-clockpicker-dial-out-transform);
|
||||
}
|
||||
.clockpicker-minutes.clockpicker-dial-out {
|
||||
@include transform($timepicker-clockpicker-dial-out-transform-minutes);
|
||||
}
|
||||
}
|
||||
|
||||
.clockpicker-canvas {
|
||||
@include transition-main($timepicker-clockpicker-canvas-transition);
|
||||
line {
|
||||
stroke: $timepicker-clockpicker-canvas-stroke;
|
||||
stroke-width: $timepicker-clockpicker-canvas-stroke-width;
|
||||
}
|
||||
}
|
||||
.clockpicker-canvas-out {
|
||||
opacity: $timepicker-clockpicker-canvas-out-opacity;
|
||||
}
|
||||
.clockpicker-canvas-bearing {
|
||||
stroke: none;
|
||||
fill: $timepicker-clockpicker-canvas-bearing-fill;
|
||||
}
|
||||
.clockpicker-canvas-fg {
|
||||
stroke: none;
|
||||
fill: $timepicker-clockpicker-canvas-fg-fill;
|
||||
&.active {
|
||||
fill: $timepicker-clockpicker-canvas-fg-active-fill;
|
||||
}
|
||||
}
|
||||
.clockpicker-canvas-bg {
|
||||
stroke: none;
|
||||
fill: $timepicker-clockpicker-canvas-bg-fill;
|
||||
}
|
||||
.clockpicker-canvas-bg-trans {
|
||||
fill: $timepicker-clockpicker-canvas-bg-trans-fill;
|
||||
}
|
||||
|
||||
.clockpicker-am-pm-block{
|
||||
margin-top: $timepicker-clockpicker-am-pm-block-mt;
|
||||
width: 100%;
|
||||
height: $timepicker-clockpicker-am-pm-block-height;
|
||||
.clockpicker-button.am-button {
|
||||
height: $timepicker-clockpicker-button-am-button-height;
|
||||
width: $timepicker-clockpicker-button-am-button-width;
|
||||
float: left;
|
||||
border: 0;
|
||||
}
|
||||
.clockpicker-button.pm-button {
|
||||
height: $timepicker-clockpicker-button-pm-button-height;
|
||||
width: $timepicker-clockpicker-button-pm-button-width;
|
||||
float: right;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-floating.btn-flat {
|
||||
color: $white-base;
|
||||
padding: 0;
|
||||
background: $primary-color;
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $timepicker-clockpicker-btn-floating-focus-bg !important;
|
||||
}
|
||||
&.active {
|
||||
background-color: $timepicker-clockpicker-btn-floating-active-bg !important;
|
||||
box-shadow: $z-depth-1-half;
|
||||
}
|
||||
}
|
||||
|
||||
.picker__footer {
|
||||
.clockpicker-button {
|
||||
margin: auto;
|
||||
margin-top: $timepicker-clockpicker-footer-button-mt;
|
||||
background-color: transparent;
|
||||
text-transform: uppercase;
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
&:active {
|
||||
background-color: $timepicker-clockpicker-footer-button-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.darktheme {
|
||||
.picker__box {
|
||||
background-color: $grey-darken-4;
|
||||
.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: $timepicker-darktheme-clockpicker-plate-bg;
|
||||
&.active, &:hover {
|
||||
background-color: $timepicker-darktheme-clockpicker-plate-active-bg;
|
||||
}
|
||||
}
|
||||
.clockpicker-canvas line {
|
||||
stroke: $timepicker-darktheme-clockpicker-canvas-line-stroke;
|
||||
}
|
||||
.clockpicker-canvas-bearing {
|
||||
fill: $white-base;
|
||||
}
|
||||
.clockpicker-canvas-fg {
|
||||
fill: $timepicker-darktheme-clockpicker-canvas-fg-fill;
|
||||
&.active {
|
||||
fill: $timepicker-darktheme-clockpicker-canvas-active-fg-fill;
|
||||
}
|
||||
}
|
||||
.clockpicker-canvas-bg {
|
||||
fill: $timepicker-darktheme-clockpicker-canvas-bg-fill;
|
||||
}
|
||||
.clockpicker-canvas-bg-trans {
|
||||
fill: $timepicker-darktheme-clockpicker-canvas-bg-trans-fill;
|
||||
}
|
||||
}
|
||||
}
|
||||
.picker__footer{
|
||||
button {
|
||||
@extend .white-text;
|
||||
}
|
||||
.clockpicker-button:active {
|
||||
background-color: $timepicker-darktheme-clockpicker-button-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
147
html/scss/pro/picker/_default.scss
Executable file
147
html/scss/pro/picker/_default.scss
Executable file
@@ -0,0 +1,147 @@
|
||||
/* ==========================================================================
|
||||
$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: $pickerinput-active-border-color;
|
||||
}
|
||||
/**
|
||||
* Note: the root picker element should *NOT* be styled more than what's here.
|
||||
*/
|
||||
.picker {
|
||||
font-size: $picker-font-size;
|
||||
text-align: center;
|
||||
line-height: $picker-font-line-height;
|
||||
color: $black;
|
||||
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;
|
||||
@include transition-main($picker-holder-transition-bg, $picker-holder-transition-top);
|
||||
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: $picker-frame-min-width;
|
||||
max-width: $picker-frame-max-width;
|
||||
// picker width
|
||||
width: $picker-frame-width;
|
||||
max-height: $picker-frame-max-height;
|
||||
filter: $picker-frame-filter;
|
||||
opacity: 0;
|
||||
@include transition-main($picker-frame-transition);
|
||||
@media (min-height: $pickerframe-wrap-box-breakpoint) {
|
||||
overflow: visible;
|
||||
top: auto;
|
||||
bottom: $picker-frame-media-bottom;
|
||||
max-height: $picker-frame-media-max-height;
|
||||
}
|
||||
@media (min-height: $pickerframe-mb-breakpoint) {
|
||||
margin-bottom: $picker-frame-media-mb;
|
||||
}
|
||||
/**
|
||||
* 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: $white;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
@media (min-height: $pickerframe-wrap-box-breakpoint) {
|
||||
display: block;
|
||||
border: $picker-box-border solid $picker-box-border-color;
|
||||
border-top-color: $picker-box-border-top-color;
|
||||
border-bottom-width: 0;
|
||||
border-radius: $picker-box-border-radius;
|
||||
box-shadow: $picker-box-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* When the picker opens...
|
||||
*/
|
||||
.picker--opened {
|
||||
.picker__holder {
|
||||
top: 0;
|
||||
background: transparent;
|
||||
zoom: $picker-opened-holder-zoom;
|
||||
background: $picker-opened-holder-bg;
|
||||
@include transition-main($picker-opened-holder-transition);
|
||||
}
|
||||
.picker__frame {
|
||||
top: 0;
|
||||
filter: $picker-opened-frame-filter;
|
||||
opacity: $picker-opened-frame-opacity;
|
||||
@media (min-height: $pickerframe-pos-breakpoint) {
|
||||
top: $picker-opened-frame-media-top;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* For `large` screens, transform into an inline picker.
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
CUSTOM MATERIALIZE STYLES
|
||||
========================================================================== */
|
||||
|
||||
.datepicker.picker__input.picker__input--active,
|
||||
.timepicker.picker__input.picker__input--active {
|
||||
border-bottom: $picker-custom-materialize-styles;
|
||||
}
|
||||
74
html/scss/pro/sections/_blog.scss
Executable file
74
html/scss/pro/sections/_blog.scss
Executable file
@@ -0,0 +1,74 @@
|
||||
.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;
|
||||
border-radius:2px;
|
||||
}
|
||||
}
|
||||
.jumbotron {
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
@extend .h2-responsive;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 300;
|
||||
a {
|
||||
color: #424242;
|
||||
transition :0.2s;
|
||||
&:hover {
|
||||
color: #616161;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
18
html/scss/pro/sections/_contacts.scss
Executable file
18
html/scss/pro/sections/_contacts.scss
Executable file
@@ -0,0 +1,18 @@
|
||||
// Contact section
|
||||
.contact-section {
|
||||
.form {
|
||||
.btn-floating {
|
||||
float: right;
|
||||
position: relative;
|
||||
bottom: $contact-section-form-btn-floating-bottom;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.contact {
|
||||
border-radius: 0 $md-card-border-radius $md-card-border-radius 0;
|
||||
background-color: $contact-section-bgc;
|
||||
.fa {
|
||||
color: $contact-section-fa-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
9
html/scss/pro/sections/_magazine.scss
Executable file
9
html/scss/pro/sections/_magazine.scss
Executable file
@@ -0,0 +1,9 @@
|
||||
// Magazine section
|
||||
.magazine-section {
|
||||
.single-news {
|
||||
border-bottom: 1px solid $magazine-single-news-border-bottom;
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
86
html/scss/pro/sections/_pricing.scss
Executable file
86
html/scss/pro/sections/_pricing.scss
Executable file
@@ -0,0 +1,86 @@
|
||||
// Pricing section
|
||||
.pricing-card {
|
||||
text-align: center;
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
.header {
|
||||
box-shadow: $z-depth-1-half;
|
||||
}
|
||||
.option {
|
||||
padding: $pricing-card-option-padding;
|
||||
margin-bottom: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
.price {
|
||||
position: relative;
|
||||
padding-top: $pricing-card-price-padding-top;
|
||||
.number {
|
||||
font-size: $pricing-card-number-font-size;
|
||||
padding: $pricing-card-number-padding;
|
||||
font-weight: 300;
|
||||
&:before {
|
||||
content: "$";
|
||||
position: absolute;
|
||||
font-size: $pricing-card-number-before-font-size;
|
||||
margin-left: $pricing-card-number-before-margin-left;
|
||||
margin-top: $pricing-card-number-before-margin-top;
|
||||
}
|
||||
&:after {
|
||||
content: "/mo";
|
||||
position: absolute;
|
||||
font-size: $pricing-card-number-after-font-size;
|
||||
margin-top: $pricing-card-number-after-margin-top;
|
||||
}
|
||||
}
|
||||
.version {
|
||||
box-shadow: $z-depth-1;
|
||||
border-radius: $md-card-border-radius $md-card-border-radius 0 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding: $pricing-card-version-padding;
|
||||
background-color: $pricing-card-version-bgc;
|
||||
}
|
||||
}
|
||||
.striped {
|
||||
padding: $pricing-card-striped-padding;
|
||||
li {
|
||||
border-bottom: 1px solid $pricing-card-striped-li-border-bottom-color;
|
||||
margin-bottom: $pricing-card-striped-li-margin-bottom;
|
||||
}
|
||||
&.green-striped {
|
||||
li {
|
||||
border-color: $pricing-card-green-striped-li-border-color;
|
||||
}
|
||||
}
|
||||
&.orange-striped {
|
||||
li {
|
||||
border-color: $pricing-card-orange-striped-li-border-color;
|
||||
}
|
||||
}
|
||||
&.purple-striped {
|
||||
li {
|
||||
border-color: $pricing-card-purple-striped-li-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-background {
|
||||
background-color: $pricing-card-dark-bgc;
|
||||
border-radius: 0 0 $md-card-border-radius $md-card-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
// Additional pricing cards
|
||||
.card {
|
||||
.card-circle {
|
||||
border: 2px solid $pricing-card-circle-border-color;
|
||||
height: $pricing-card-circle-height;
|
||||
width: $pricing-card-circle-width;
|
||||
border-radius: $pricing-card-circle-border-radius;
|
||||
.fa {
|
||||
font-size: $pricing-card-circle-icon-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
18
html/scss/pro/sections/_projects.scss
Executable file
18
html/scss/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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
189
html/scss/pro/sections/_social.scss
Executable file
189
html/scss/pro/sections/_social.scss
Executable file
@@ -0,0 +1,189 @@
|
||||
// Social section
|
||||
// Feed
|
||||
.mdb-feed {
|
||||
.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: $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: $grey-base;
|
||||
&:hover {
|
||||
.fa {
|
||||
color: $red-base;
|
||||
transition: 0.4s;
|
||||
}
|
||||
span {
|
||||
color: $black-base;
|
||||
transition: 0.4s;
|
||||
}
|
||||
}
|
||||
.fa {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
span a {
|
||||
padding-right: 0.3rem;
|
||||
color: $primary-color;
|
||||
cursor: default;
|
||||
}
|
||||
.thumbs {
|
||||
.fa {
|
||||
color: $grey-base;
|
||||
transition: 0.4s;
|
||||
&:hover {
|
||||
color: $grey-darken-1;
|
||||
}
|
||||
}
|
||||
.fa-thumbs-up {
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
}
|
||||
.comment {
|
||||
color: $grey-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Personal card
|
||||
.card-personal {
|
||||
.card-body {
|
||||
.card-title {
|
||||
font-weight: 400;
|
||||
&.title-one {
|
||||
transition: 0.4s;
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-title {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.card-meta {
|
||||
font-weight: 300;
|
||||
font-size: 0.86rem;
|
||||
color: $grey-darken-1;
|
||||
.fa {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
span {
|
||||
transition: 0.5s;
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// News card
|
||||
.news-card {
|
||||
.content {
|
||||
.right-side-meta {
|
||||
float: right;
|
||||
font-weight: 300;
|
||||
color: $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-base, .4);
|
||||
transition: 0.53s;
|
||||
&:hover {
|
||||
color: $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-base, .4);
|
||||
~input,
|
||||
.md-form .prefix~textarea {
|
||||
width: calc(100% - 4rem);
|
||||
}
|
||||
}
|
||||
.prefix.active {
|
||||
color: rgba($black-base, .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-base, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
14
html/scss/pro/sections/_team.scss
Executable file
14
html/scss/pro/sections/_team.scss
Executable file
@@ -0,0 +1,14 @@
|
||||
// Team section
|
||||
section {
|
||||
&.team-section {
|
||||
.avatar {
|
||||
img {
|
||||
max-width: $team-section-avatar-max-width;
|
||||
height: auto;
|
||||
&.rounded-circle {
|
||||
max-width: $team-section-avatar-circle-max-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
55
html/scss/pro/sections/_templates.scss
Executable file
55
html/scss/pro/sections/_templates.scss
Executable file
@@ -0,0 +1,55 @@
|
||||
// Templates
|
||||
// Fixed SideNav
|
||||
.fixed-sn {
|
||||
.double-nav,
|
||||
main,
|
||||
footer {
|
||||
padding-left: $fixed-sn-double-nav-main-footer-pl;
|
||||
}
|
||||
main {
|
||||
padding-top: $fixed-sn-double-nav-main-pt;
|
||||
}
|
||||
@media (max-width: $sidenav-breakpoint) {
|
||||
.double-nav,
|
||||
main,
|
||||
footer {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: $small-screen) {
|
||||
main,
|
||||
.page-footer .container-fluid {
|
||||
margin-left: $fixed-sn-double-nav-main-small-mx;
|
||||
margin-right: $fixed-sn-double-nav-main-small-mx;
|
||||
}
|
||||
}
|
||||
@media (min-width: $medium-screen) {
|
||||
main,
|
||||
.page-footer .container-fluid {
|
||||
margin-left: $fixed-sn-double-nav-main-medium-mx;
|
||||
margin-right: $fixed-sn-double-nav-main-medium-mx;
|
||||
}
|
||||
}
|
||||
@media (min-width: $large-screen) {
|
||||
main,
|
||||
.page-footer .container-fluid {
|
||||
margin-left: $fixed-sn-double-nav-main-large-mx;
|
||||
margin-right: $fixed-sn-double-nav-main-large-mx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hidden SideNav
|
||||
.hidden-sn {
|
||||
main {
|
||||
padding-top: $hidden-sn-main-pt;
|
||||
}
|
||||
.button-collapse {
|
||||
display: block;
|
||||
position: relative;
|
||||
font-size: $hidden-sn-main-btn-collapse-font-size;
|
||||
margin-right: $hidden-sn-main-btn-collapse-mr;
|
||||
margin-left: $hidden-sn-main-btn-collapse-ml;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
41
html/scss/pro/sections/_testimonials.scss
Executable file
41
html/scss/pro/sections/_testimonials.scss
Executable file
@@ -0,0 +1,41 @@
|
||||
// Testimonials section
|
||||
.testimonial-carousel {
|
||||
.carousel-control {
|
||||
background-image: none;
|
||||
top: $testimonial-carousel-control-top;
|
||||
transform: $testimonial-carousel-control-transform;
|
||||
&:before {
|
||||
font-size: $testimonial-carousel-control-font-size;
|
||||
color: $testimonial-carousel-control-color;
|
||||
transition: $testimonial-carousel-control-hover-transition;
|
||||
}
|
||||
&:hover {
|
||||
&:before {
|
||||
color: $testimonial-carousel-control-hover-color;
|
||||
transition: $testimonial-carousel-control-hover-transition;
|
||||
}
|
||||
}
|
||||
&.left {
|
||||
left: $testimonial-carousel-control-mx;
|
||||
&:before {
|
||||
content: "\2039";
|
||||
}
|
||||
}
|
||||
&.right {
|
||||
right: $testimonial-carousel-control-mx;
|
||||
&:before {
|
||||
content: "\203a";
|
||||
}
|
||||
}
|
||||
}
|
||||
.testimonial {
|
||||
margin-right: $testimonial-carousel-mx;
|
||||
margin-left: $testimonial-carousel-mx;
|
||||
.avatar {
|
||||
img {
|
||||
box-shadow: $z-depth-1-half;
|
||||
max-width: $testimonial-carousel-avatar-max-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user