// ===========================================================================
// MDB variables
// ===========================================================================
//
// Table of Contents:
//
// 1. Fonts
// 2. Shadows
// 3. Transitions
// 4. Borders
// 5. Globals
// 6. Masks
// 7. Images
// 8. Buttons
// 9. Cards
// 10. Navbars
// 11. Pagination
// 12. Badges
// 13. Modals
// 14. Carousels
// 15. Forms
// 16. Miscellaneous
// 17. Footers
// 18. List groups
// 19. Tables
// 20. Steppers
// 1. Fonts
// ===========================================================================
// Basic font properties
$roboto-font-path: "../font/roboto/" !default;
$roboto-font-family: "Roboto", sans-serif !default;
$mdb-font-family: $roboto-font-family !default;
$font-size-large: 1.5rem !default;
$font-size-small: .9rem !default;
// 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;
// Custom map for file browser
$custom-mdb-file-text : (
es : "Elegir",
pl-pl : "Wybierz",
fr : "Choisir",
in : "Pilih",
zh : "??",
de : "Wählen",
ru : "????????"
) !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
);
// Links
$link-color : #0275d8 !default;
$link-hover-color : darken($link-color, 15%) !default;
// 2. Shadows
// ===========================================================================
// Shadows
$z-depth-1 : 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12) !default;
$z-depth-1-half : 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15) !default;
$z-depth-2 : 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19) !default;
$z-depth-3 : 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19) !default;
$z-depth-4 : 0 16px 28px 0 rgba(0, 0, 0, .22), 0 25px 55px 0 rgba(0, 0, 0, .21) !default;
$z-depth-5 : 0 27px 24px 0 rgba(0, 0, 0, .2), 0 40px 77px 0 rgba(0, 0, 0, .22) !default;
// 3. Transitions
// ===========================================================================
// Transitions
$transition-basic : all .2s ease-in-out !default;
$transition-hoverable : all .55s ease-in-out !default;
// 4. Borders
// ===========================================================================
// Border radius
$border-radius-base : .125rem !default;
$border-radius-circle : 50% !default;
// 5. Globals
// ===========================================================================
// 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;
// Divider
$divider-margin-y : 2.8rem !default;
$divider-margin-x : .5rem !default;
$divider-height : 2px !default;
// Dividers colors
$hr-light : $white-base !default;
$hr-dark : #666 !default;
$flex-center-ul-mb : 1rem !default;
// 6. Masks
// ===========================================================================
// 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;
// 7. Images
// ===========================================================================
// Images
$image-path : "../img" !default;
$avatar-img-max-width : 100px !default;
// 8. Buttons
// ===========================================================================
// 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 : .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;
$btn-group-margin : .375rem !default;
// 9. Cards
// ===========================================================================
// 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;
// 10. Navbars
// ===========================================================================
// 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, .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, .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 : .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;
// 11. Pagination
// ===========================================================================
// 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;
// 12. Badges
// ===========================================================================
// Badges
$badge-pill-padding-x : .6rem !default;
$badge-pill-border-radius : 10rem !default;
// 13. Modals
// ===========================================================================
// 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;
// 14. Carousels
// ===========================================================================
// 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;
// 15. Forms
// ===========================================================================
// 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(-14px) !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 : 1rem !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 : 4.1rem !default;
$input-label-invalid-top : 4rem !default;
$input-label-font-size-lg : 1.25rem !default;
$input-label-active-font-size-lg : 1.15rem !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.6rem !default;
$input-label-invalid-top-lg : 4.6rem !default;
$input-label-font-size-sm : .875rem !default;
$input-label-active-font-size-sm : .95rem !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.7rem !default;
$input-label-invalid-top-sm : 3.6rem !default;
$textarea-padding : 1.5rem !default;
$input-form-control-margin-bottom : .5rem !default;
$input-form-control-padding-top : .6rem !default;
$input-form-control-padding-bottom : .4rem !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;
// 16. Miscellaneous
// ===========================================================================
// Miscellaneous
$edge-header-height : 278px !default;
$edge-header-background-color : #ccc !default;
$edge-header-margin-top : -100px !default;
// 17. Footers
// ===========================================================================
// Footers
$footer-copyright-color : rgba($white-base, .6) !default;
$footer-copyright-bg-color : rgba($black-base, .2) !default;
$footer-font-size : .9rem !default;
// 18. List groups
// ===========================================================================
// List group
$list-group-padding : 0 10px 10px 0 !default;
$list-group-transition : .5s !default;
// 19. Tables
// ===========================================================================
// 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, .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 : .94rem !default;
$table-label-line-height : $table-label-height !default;
// 20. Steppers
// ===========================================================================
// Steppers
$stepper-li-a-padding : 1.5rem !default;
$stepper-li-a-circle-color : $white !default;
$stepper-li-a-circle-border-radius : $border-radius-circle !default;
$stepper-li-a-circle-bg : rgba($black, .38) !default;
$stepper-li-a-circle-mr : .5rem !default;
$stepper-li-a-label-color : rgba($black, .87) !default;
$stepper-horizontal-li-transition : .5s !default;
$stepper-horizontal-li-a-label-mt : .63rem !default;
$stepper-horizontal-li-after-margin : .5rem !default;
$stepper-horizontal-li-after-height : 1px !default;
$stepper-horizontal-li-after-bgc : rgba($black, .1) !default;
$stepper-horizontal-breakpoint : 47.9375rem !default;
$stepper-horizontal-small-li-a-label-mt : .2rem !default;
$stepper-horizontal-small-li-after-width : $stepper-horizontal-li-after-height !default;
$stepper-horizontal-small-li-after-height : calc(100% - 40px) !default;
$stepper-horizontal-small-li-after-left : 2.19rem !default;
$stepper-horizontal-small-li-after-top : 3.75rem !default;
$stepper-vertical-li-a-label-mt : $stepper-horizontal-small-li-a-label-mt !default;
$stepper-vertical-li-step-content-ml : 3.13rem !default;
$stepper-vertical-li-step-content-padding : .94rem !default;
$stepper-vertical-li-step-content-p-font-size: .88rem !default;
$stepper-vertical-li-after-width : 1px !default;
$stepper-vertical-li-after-height : $stepper-horizontal-small-li-after-height !default;
$stepper-vertical-li-after-left : $stepper-horizontal-small-li-after-left !default;
$stepper-vertical-li-after-top : 3.44rem !default;
$stepper-vertical-li-after-bgc : $stepper-horizontal-li-after-bgc !default;
// 21. Loader / Spinner
// ===========================================================================
// Loader / Spinner
$spinner-border-animation: spinner-border .4s linear infinite !default;
$spinner-grow-animation: spinner-grow .4s linear infinite !default;
|
Download
