UNPKG

buttercake

Version:

Butter Cake is an open source and lightweight modular toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass(SCSS) variables and mixins, responsive grid system, extensive prebuilt components.

1,798 lines (1,683 loc) 193 kB
@charset "UTF-8"; /*! getButterCake.com v4.0.0 | MIT License | https://github.com/HimasRafeek/butterCake */ /* ======================================================================================== * ---------------------------------------------------------------------------------------- * Author : Himas Rafeek * Framework : Butter Cake * Description : A Modern CSS framework built with flexbox * Version : 4.0.0 * Copyright : 2018 - 2020 * Github : https://github.com/HimasRafeek/butterCake * URI : https://getButterCake.com * Licence : MIT - https://github.com/HimasRafeek/butterCake/blob/master/LICENSE * ---------------------------------------------------------------------------------------- * ======================================================================================== */ /* * Overwrite vraiable.scss contents here */ :root { --primary: #5b3ff9; --secondary: #363b4d; --light: #f4f5f6; --dark: #1c1b19; --gray: gray; --white: white; --success: #2ECC71; --info: #17a2b8; --warning: #F3BB45; --danger: #E74C3C; --muted: #9E9E9E; --bp-sm: 590px; --bp-medium: 790px; --bp-large: 1160px; --bp-xl: 1260px; } i, i::after, i::before { -webkit-transition: all 0s !important; transition: all 0s !important; } *, ::after, ::before { -webkit-box-sizing: border-box; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); scroll-behavior: smooth; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 400; line-height: 1.5; } html, body { color: #333; font-size: 16px; } html ::-moz-selection, body ::-moz-selection { background: #5b3ff9; color: white; } html ::selection, body ::selection { background: #5b3ff9; color: white; } article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } [tabindex="-1"]:focus { outline: 0 !important; } hr { overflow: visible; -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; border: 0; margin: 10px 0; border-top: 1px solid #e9e9e9; } pre { font-family: monospace; font-size: 5px; } figure { margin: 0; } mark { color: #F3BB45; } a { background-color: transparent; text-decoration: none; color: #5b3ff9; } a:hover { color: #2807e4; } a:not([href]):not([tabindex]) { color: inherit; text-decoration: none; } a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { color: inherit; text-decoration: none; } a:not([href]):not([tabindex]):focus { outline: 0; } abbr[title], abbr[data-original-title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; border-bottom: 0; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } address { margin-bottom: 15px; font-style: normal; line-height: inherit; } b, strong { font-weight: bold; } ol ol ul, ol ul ul, ul ol ul, ul ul ul { font-size: 100%; } pre, code, kbd, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 16px; } small { font-size: 12px; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -5px; } sup { top: -5px; } img { vertical-align: middle; max-width: 100%; border-style: none; } caption { padding-top: 10px; padding-bottom: 10px; color: #333; text-align: left; caption-side: bottom; } fieldset { border: none; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.5; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 10px; } legend { -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } h1, h2, h3, h4, h5, h6, p { font-weight: 400; margin-top: 0; margin-bottom: 15px; } .h1, h1 { font-size: 46px; } .h2, h2 { font-size: 36px; } .h3, h3 { font-size: 28px; } .h4, h4 { font-size: 22px; } .h5, h5 { font-size: 18px; } .h6, h6 { font-size: 16px; } p { font-size: 16px; } .mark, mark { padding: 2px 4px; background-color: #363b4d; } .container { margin: 0 auto; padding-left: 10px; padding-right: 10px; width: 100%; /* Breakpoints | Min Width */ } @media (min-width: 590px) { .container { max-width: calc(100% - 50px); } } @media (min-width: 790px) { .container { max-width: calc(100% - 100px); } } @media (min-width: 1160px) { .container { max-width: 1150px; } } .container-fluid { max-width: 100%; padding-left: 10px; padding-right: 10px; width: 100%; } /* * * .row */ .row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } /* * * .column */ .row .column { max-width: 100%; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } /* * * .row.no-gutters */ .row { margin-left: -10px; margin-right: -10px; } .row.no-gutters > div { padding-left: 0 !important; padding-right: 0 !important; } /* * * .row > .col-* */ .row > [class*="col"] { position: relative; width: 100%; min-height: 1px; padding-left: 10px; padding-right: 10px; } .offset-1 { margin-left: 8.33333%; } .offset-2 { margin-left: 16.66667%; } .offset-3 { margin-left: 25%; } .offset-4 { margin-left: 33.33333%; } .offset-5 { margin-left: 41.66667%; } .offset-6 { margin-left: 50%; } .offset-7 { margin-left: 58.33333%; } .offset-8 { margin-left: 66.66667%; } .offset-9 { margin-left: 75%; } .offset-10 { margin-left: 83.33333%; } .offset-11 { margin-left: 91.66667%; } .offset-12 { margin-left: 100%; } .col-1 { -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; } .col-2 { -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; } .col-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-4 { -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; } .col-5 { -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; } .col-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-7 { -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; } .col-8 { -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; } .col-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-10 { -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; } .col-11 { -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; } .col-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } @media (min-width: 590px) { .col-sm-1 { -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; } .col-sm-2 { -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; } .col-sm-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-sm-4 { -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; } .col-sm-5 { -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; } .col-sm-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-sm-7 { -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; } .col-sm-8 { -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; } .col-sm-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-sm-10 { -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; } .col-sm-11 { -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; } .col-sm-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .d-none-sm, .hide-sm { display: none !important; } .d-block-sm { display: block !important; } .d-inline-block-sm { display: inline-block !important; } .d-flex-sm { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .fa-center-sm { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .fa-baseline-sm { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; } .fa-start-sm { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .fa-end-sm { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .fa-stretch-sm { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .fa-end-sm { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .fj-center-sm { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .fj-baseline-sm { -webkit-box-pack: baseline !important; -ms-flex-pack: baseline !important; justify-content: baseline !important; } .fj-start-sm { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .fj-end-sm { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .fj-between-sm { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .fj-around-sm { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .order-sm-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .order-sm-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .order-sm-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .order-sm-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .order-sm-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .order-sm-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .order-sm-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .order-sm-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .order-sm-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .order-sm-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } } @media (min-width: 790px) { .col-md-1 { -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; } .col-md-2 { -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; } .col-md-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-md-4 { -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; } .col-md-5 { -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; } .col-md-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-md-7 { -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; } .col-md-8 { -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; } .col-md-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-md-10 { -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; } .col-md-11 { -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; } .col-md-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .d-none-md, .hide-md { display: none !important; } .d-block-md { display: block !important; } .d-inline-block-md { display: inline-block !important; } .d-flex-md { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .fa-center-md { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .fa-baseline-md { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; } .fa-start-md { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .fa-end-md { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .fa-stretch-md { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .fa-end-md { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .fj-center-md { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .fj-baseline-md { -webkit-box-pack: baseline !important; -ms-flex-pack: baseline !important; justify-content: baseline !important; } .fj-start-md { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .fj-end-md { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .fj-between-md { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .fj-around-md { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .order-md-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .order-md-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .order-md-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .order-md-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .order-md-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .order-md-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .order-md-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .order-md-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .order-md-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .order-md-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } } @media (min-width: 1160px) { .col-lg-1 { -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; } .col-lg-2 { -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; } .col-lg-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-lg-4 { -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; } .col-lg-5 { -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; } .col-lg-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-lg-7 { -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; } .col-lg-8 { -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; } .col-lg-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-lg-10 { -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; } .col-lg-11 { -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; } .col-lg-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .d-none-lg, .hide-lg { display: none !important; } .d-block-lg { display: block !important; } .d-inline-block-lg { display: inline-block !important; } .d-flex-lg { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .fa-center-lg { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .fa-baseline-lg { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; } .fa-start-lg { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .fa-end-lg { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .fa-stretch-lg { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .fa-end-lg { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .fj-center-lg { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .fj-baseline-lg { -webkit-box-pack: baseline !important; -ms-flex-pack: baseline !important; justify-content: baseline !important; } .fj-start-lg { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .fj-end-lg { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .fj-between-lg { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .fj-around-lg { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .order-lg-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .order-lg-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .order-lg-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .order-lg-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .order-lg-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .order-lg-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .order-lg-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .order-lg-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .order-lg-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .order-lg-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } } @media (min-width: 1260px) { .col-xl-1 { -ms-flex-preferred-size: 8.33333%; flex-basis: 8.33333%; max-width: 8.33333%; } .col-xl-2 { -ms-flex-preferred-size: 16.66667%; flex-basis: 16.66667%; max-width: 16.66667%; } .col-xl-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .col-xl-4 { -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; } .col-xl-5 { -ms-flex-preferred-size: 41.66667%; flex-basis: 41.66667%; max-width: 41.66667%; } .col-xl-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .col-xl-7 { -ms-flex-preferred-size: 58.33333%; flex-basis: 58.33333%; max-width: 58.33333%; } .col-xl-8 { -ms-flex-preferred-size: 66.66667%; flex-basis: 66.66667%; max-width: 66.66667%; } .col-xl-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .col-xl-10 { -ms-flex-preferred-size: 83.33333%; flex-basis: 83.33333%; max-width: 83.33333%; } .col-xl-11 { -ms-flex-preferred-size: 91.66667%; flex-basis: 91.66667%; max-width: 91.66667%; } .col-xl-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .d-none-xl, .hide-xl { display: none !important; } .d-block-xl { display: block !important; } .d-inline-block-xl { display: inline-block !important; } .d-flex-xl { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .fa-center-xl { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .fa-baseline-xl { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; } .fa-start-xl { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .fa-end-xl { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .fa-stretch-xl { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .fa-end-xl { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .fj-center-xl { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .fj-baseline-xl { -webkit-box-pack: baseline !important; -ms-flex-pack: baseline !important; justify-content: baseline !important; } .fj-start-xl { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .fj-end-xl { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .fj-between-xl { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .fj-around-xl { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .order-xl-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .order-xl-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .order-xl-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .order-xl-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .order-xl-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .order-xl-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .order-xl-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .order-xl-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .order-xl-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .order-xl-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } } /* * * Prevent Overflow hidden for Sidebar Menu and Modal */ .noScroll { overflow: hidden !important; } /* * * Fixed Top Menu */ .fixed-top { width: 100%; position: fixed !important; top: 0; left: 0; z-index: 1050; } /* * * Main Navbar scss */ .navbar { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0 10px; /* * * Container and Container fluid */ /* * * Navbar Brand | Logo */ /* * * Navigation Menu Main Container */ /* * * Sidebar Menu Toggler on Mobile */ /* * * Default Butter Cake Menu Styling for Navbar * * Remove .default-nav from the .navbar to remove all the defaults styles, * * that applied by Butter Cake OR You can change the scss below */ } .navbar * { -webkit-transition: all 0.22s ease; transition: all 0.22s ease; } .navbar > .container, .navbar > .container-fluid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } .navbar .brand { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-right: 16px; line-height: inherit; white-space: nowrap; } .navbar .menu-box { display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-preferred-size: 100%; flex-basis: 100%; /* * * Navigation Menu | UL TAG */ } .navbar .menu-box .menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0; margin: 0; /* * * Navigation Item | LI TAG */ /* * * Default fix for all LI tags inside the Menu */ } .navbar .menu-box .menu .nav-item { margin: 0; /* * * Navigation Link | A TAG */ } .navbar .menu-box .menu .nav-item .nav-link { display: inline-block; } .navbar .menu-box .menu li { list-style: none; padding: 0; } .navbar .toggler { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: white; background-color: white; margin-top: 10px; margin-bottom: 10px; margin-left: auto; padding: 10px 15px; border: none; outline: none; cursor: pointer; border-radius: 4px; } .navbar .toggler:hover { color: white; background: #310ef7 !important; } .navbar.default-nav { background-color: white; /* * * Default Navbar Styles */ /* * * Primary Navbar Styles */ } .navbar.default-nav .brand { padding-right: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .navbar.default-nav .brand a { display: block; font-weight: 400; font-size: 28px; color: #5b3ff9; } .navbar.default-nav .brand a:hover { color: #2807e4 !important; } .navbar.default-nav .brand a img { display: block; } .navbar.default-nav .menu .nav-link { color: #363b4d; padding: 20px 25px; } .navbar.default-nav .menu .nav-link:focus, .navbar.default-nav .menu .nav-link:hover { color: white; background-color: #5b3ff9; } .navbar.default-nav .menu .active .nav-link { color: white; background-color: #5b3ff9; } .navbar.default-nav .slidedown, .navbar.default-nav .sideNavbar { background-color: white !important; } .navbar.default-nav.bg-primary { background: #5b3ff9; } .navbar.default-nav.bg-primary .brand a { color: white; } .navbar.default-nav.bg-primary .brand a:hover { color: #2807e4 !important; } .navbar.default-nav.bg-primary .menu-close { background: #2807e4; } .navbar.default-nav.bg-primary .menu-close:hover { background: #2406cc; } .navbar.default-nav.bg-primary .menu .nav-link { color: white; } .navbar.default-nav.bg-primary .menu .nav-link:focus, .navbar.default-nav.bg-primary .menu .nav-link:hover { color: white; background-color: #310ef7; } .navbar.default-nav.bg-primary .menu .active .nav-link { color: white; background-color: #310ef7; } .navbar.default-nav.bg-primary .toggler { background-color: #4626f8 !important; } .navbar.default-nav.bg-primary .toggler:hover { background: #310ef7 !important; } .navbar.default-nav.bg-primary .slidedown, .navbar.default-nav.bg-primary .sideNavbar { background-color: #5b3ff9 !important; } .navbar.default-nav.bg-secondary { background: #363b4d; } .navbar.default-nav.bg-secondary .brand a { color: white; } .navbar.default-nav.bg-secondary .brand a:hover { color: #161920 !important; } .navbar.default-nav.bg-secondary .menu-close { background: #161920; } .navbar.default-nav.bg-secondary .menu-close:hover { background: #0c0d11; } .navbar.default-nav.bg-secondary .menu .nav-link { color: white; } .navbar.default-nav.bg-secondary .menu .nav-link:focus, .navbar.default-nav.bg-secondary .menu .nav-link:hover { color: white; background-color: #21242f; } .navbar.default-nav.bg-secondary .menu .active .nav-link { color: white; background-color: #21242f; } .navbar.default-nav.bg-secondary .toggler { background-color: #2b303e !important; } .navbar.default-nav.bg-secondary .toggler:hover { background: #21242f !important; } .navbar.default-nav.bg-secondary .slidedown, .navbar.default-nav.bg-secondary .sideNavbar { background-color: #363b4d !important; } .navbar.default-nav.bg-light { background: #f4f5f6; } .navbar.default-nav.bg-light .brand a { color: white; } .navbar.default-nav.bg-light .brand a:hover { color: #cacfd4 !important; } .navbar.default-nav.bg-light .menu-close { background: #cacfd4; } .navbar.default-nav.bg-light .menu-close:hover { background: #bcc2c8; } .navbar.default-nav.bg-light .menu .nav-link { color: white; } .navbar.default-nav.bg-light .menu .nav-link:focus, .navbar.default-nav.bg-light .menu .nav-link:hover { color: white; background-color: #d8dcdf; } .navbar.default-nav.bg-light .menu .active .nav-link { color: white; background-color: #d8dcdf; } .navbar.default-nav.bg-light .toggler { background-color: #e6e8eb !important; } .navbar.default-nav.bg-light .toggler:hover { background: #d8dcdf !important; } .navbar.default-nav.bg-light .slidedown, .navbar.default-nav.bg-light .sideNavbar { background-color: #f4f5f6 !important; } .navbar.default-nav.bg-dark { background: #1c1b19; } .navbar.default-nav.bg-dark .brand a { color: white; } .navbar.default-nav.bg-dark .brand a:hover { color: black !important; } .navbar.default-nav.bg-dark .menu-close { background: black; } .navbar.default-nav.bg-dark .menu-close:hover { background: black; } .navbar.default-nav.bg-dark .menu .nav-link { color: white; } .navbar.default-nav.bg-dark .menu .nav-link:focus, .navbar.default-nav.bg-dark .menu .nav-link:hover { color: white; background-color: #010101; } .navbar.default-nav.bg-dark .menu .active .nav-link { color: white; background-color: #010101; } .navbar.default-nav.bg-dark .toggler { background-color: #0f0e0d !important; } .navbar.default-nav.bg-dark .toggler:hover { background: #010101 !important; } .navbar.default-nav.bg-dark .slidedown, .navbar.default-nav.bg-dark .sideNavbar { background-color: #1c1b19 !important; } .navbar.default-nav.bg-gray { background: gray; } .navbar.default-nav.bg-gray .brand a { color: white; } .navbar.default-nav.bg-gray .brand a:hover { color: #5a5a5a !important; } .navbar.default-nav.bg-gray .menu-close { background: #5a5a5a; } .navbar.default-nav.bg-gray .menu-close:hover { background: #4d4d4d; } .navbar.default-nav.bg-gray .menu .nav-link { color: white; } .navbar.default-nav.bg-gray .menu .nav-link:focus, .navbar.default-nav.bg-gray .menu .nav-link:hover { color: white; background-color: #676767; } .navbar.default-nav.bg-gray .menu .active .nav-link { color: white; background-color: #676767; } .navbar.default-nav.bg-gray .toggler { background-color: #737373 !important; } .navbar.default-nav.bg-gray .toggler:hover { background: #676767 !important; } .navbar.default-nav.bg-gray .slidedown, .navbar.default-nav.bg-gray .sideNavbar { background-color: gray !important; } .navbar.default-nav.bg-white { background: white; } .navbar.default-nav.bg-white .brand a { color: white; } .navbar.default-nav.bg-white .brand a:hover { color: #d9d9d9 !important; } .navbar.default-nav.bg-white .menu-close { background: #d9d9d9; } .navbar.default-nav.bg-white .menu-close:hover { background: #cccccc; } .navbar.default-nav.bg-white .menu .nav-link { color: white; } .navbar.default-nav.bg-white .menu .nav-link:focus, .navbar.default-nav.bg-white .menu .nav-link:hover { color: white; background-color: #e6e6e6; } .navbar.default-nav.bg-white .menu .active .nav-link { color: white; background-color: #e6e6e6; } .navbar.default-nav.bg-white .toggler { background-color: #f2f2f2 !important; } .navbar.default-nav.bg-white .toggler:hover { background: #e6e6e6 !important; } .navbar.default-nav.bg-white .slidedown, .navbar.default-nav.bg-white .sideNavbar { background-color: white !important; } .navbar.default-nav.bg-success { background: #2ECC71; } .navbar.default-nav.bg-success .brand a { color: white; } .navbar.default-nav.bg-success .brand a:hover { color: #208e4e !important; } .navbar.default-nav.bg-success .menu-close { background: #208e4e; } .navbar.default-nav.bg-success .menu-close:hover { background: #1b7943; } .navbar.default-nav.bg-success .menu .nav-link { color: white; } .navbar.default-nav.bg-success .menu .nav-link:focus, .navbar.default-nav.bg-success .menu .nav-link:hover { color: white; background-color: #25a25a; } .navbar.default-nav.bg-success .menu .active .nav-link { color: white; background-color: #25a25a; } .navbar.default-nav.bg-success .toggler { background-color: #29b765 !important; } .navbar.default-nav.bg-success .toggler:hover { background: #25a25a !important; } .navbar.default-nav.bg-success .slidedown, .navbar.default-nav.bg-success .sideNavbar { background-color: #2ECC71 !important; } .navbar.default-nav.bg-info { background: #17a2b8; } .navbar.default-nav.bg-info .brand a { color: white; } .navbar.default-nav.bg-info .brand a:hover { color: #0f6674 !important; } .navbar.default-nav.bg-info .menu-close { background: #0f6674; } .navbar.default-nav.bg-info .menu-close:hover { background: #0c525d; } .navbar.default-nav.bg-info .menu .nav-link { color: white; } .navbar.default-nav.bg-info .menu .nav-link:focus, .navbar.default-nav.bg-info .menu .nav-link:hover { color: white; background-color: #117a8b; } .navbar.default-nav.bg-info .menu .active .nav-link { color: white; background-color: #117a8b; } .navbar.default-nav.bg-info .toggler { background-color: #148ea1 !important; } .navbar.default-nav.bg-info .toggler:hover { background: #117a8b !important; } .navbar.default-nav.bg-info .slidedown, .navbar.default-nav.bg-info .sideNavbar { background-color: #17a2b8 !important; } .navbar.default-nav.bg-warning { background: #F3BB45; } .navbar.default-nav.bg-warning .brand a { color: white; } .navbar.default-nav.bg-warning .brand a:hover { color: #dd9b0e !important; } .navbar.default-nav.bg-warning .menu-close { background: #dd9b0e; } .navbar.default-nav.bg-warning .menu-close:hover { background: #c58a0d; } .navbar.default-nav.bg-warning .menu .nav-link { color: white; } .navbar.default-nav.bg-warning .menu .nav-link:focus, .navbar.default-nav.bg-warning .menu .nav-link:hover { color: white; background-color: #f0a915; } .navbar.default-nav.bg-warning .menu .active .nav-link { color: white; background-color: #f0a915; } .navbar.default-nav.bg-warning .toggler { background-color: #f1b22d !important; } .navbar.default-nav.bg-warning .toggler:hover { background: #f0a915 !important; } .navbar.default-nav.bg-warning .slidedown, .navbar.default-nav.bg-warning .sideNavbar { background-color: #F3BB45 !important; } .navbar.default-nav.bg-danger { background: #E74C3C; } .navbar.default-nav.bg-danger .brand a { color: white; } .navbar.default-nav.bg-danger .brand a:hover { color: #bf2718 !important; } .navbar.default-nav.bg-danger .menu-close { background: #bf2718; } .navbar.default-nav.bg-danger .menu-close:hover { background: #a82315; } .navbar.default-nav.bg-danger .menu .nav-link { color: white; } .navbar.default-nav.bg-danger .menu .nav-link:focus, .navbar.default-nav.bg-danger .menu .nav-link:hover { color: white; background-color: #d62c1a; } .navbar.default-nav.bg-danger .menu .active .nav-link { color: white; background-color: #d62c1a; } .navbar.default-nav.bg-danger .toggler { background-color: #e43725 !important; } .navbar.default-nav.bg-danger .toggler:hover { background: #d62c1a !important; } .navbar.default-nav.bg-danger .slidedown, .navbar.default-nav.bg-danger .sideNavbar { background-color: #E74C3C !important; } .navbar.default-nav.bg-muted { background: #9E9E9E; } .navbar.default-nav.bg-muted .brand a { color: white; } .navbar.default-nav.bg-muted .brand a:hover { color: #787878 !important; } .navbar.default-nav.bg-muted .menu-close { background: #787878; } .navbar.default-nav.bg-muted .menu-close:hover { background: #6b6b6b; } .navbar.default-nav.bg-muted .menu .nav-link { color: white; } .navbar.default-nav.bg-muted .menu .nav-link:focus, .navbar.default-nav.bg-muted .menu .nav-link:hover { color: white; background-color: #858585; } .navbar.default-nav.bg-muted .menu .active .nav-link { color: white; background-color: #858585; } .navbar.default-nav.bg-muted .toggler { background-color: #919191 !important; } .navbar.default-nav.bg-muted .toggler:hover { background: #858585 !important; } .navbar.default-nav.bg-muted .slidedown, .navbar.default-nav.bg-muted .sideNavbar { background-color: #9E9E9E !important; } .navbar.expanded .toggler { display: none !important; } .navbar.expanded .menu-box { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .navbar.expanded .menu { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .navbar.expanded > .container, .navbar.expanded > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } /* * * Warning upating without proper knowledge can break the Navbar */ @media (min-width: 590px) { .navbar.expand-sm .toggler { display: none; } .navbar.expand-sm .menu-box { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .navbar.expand-sm .menu { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .navbar.expand-sm > .container, .navbar.expand-sm > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } @media (min-width: 790px) { .navbar.expand-md .toggler { display: none; } .navbar.expand-md .menu-box { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .navbar.expand-md .menu { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .navbar.expand-md > .container, .navbar.expand-md > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } @media (min-width: 1160px) { .navbar.expand-lg .toggler { display: none; } .navbar.expand-lg .menu-box { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .navbar.expand-lg .menu { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .navbar.expand-lg > .container, .navbar.expand-lg > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } @media (min-width: 1260px) { .navbar.expand-xl .toggler { display: none; } .navbar.expand-xl .menu-box { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .navbar.expand-xl .menu { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .navbar.expand-xl > .container, .navbar.expand-xl > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } /* * * Sidebar styles for Mobile */ .sideNavbar { -webkit-transition: all 0.5s !important; transition: all 0.5s !important; display: block !important; max-width: 300px; width: 100%; min-height: 100vh; overflow-x: hidden !important; overflow-y: auto; position: fixed; top: 0; height: 100%; left: -100%; z-index: 1250; padding-bottom: 50px; } .sideNavbar .menu { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .sideNavbar .menu .nav-item { position: relative; width: 100%; text-align: center; } .sideNavbar .menu .nav-item > .btn { margin: 10px 0 !important; } .sideNavbar .menu .nav-item > .input { margin: 10px 0 !important; } .sideNavbar .menu .nav-link { display: block; width: 100%; padding: 10px 10px !important; text-align: center; } .sideNavbar .dropdown > .dropdown-menu { position: unset !important; background: white; max-width: 100% !important; min-width: 100% !important; margin-top: 0 !important; border-radius: 0 !important; border: none; } .sideNavbar.toggled { left: 0; } .sideNavbar .menu-close { display: block !important; background: #363b4d; color: white; text-align: center; padding: 10px; margin-bottom: 10px; cursor: pointer; } .sideNavbar .menu-close:hover { background: #1c1b19; } .toggled ~ .shadow-fixed { width: 100%; min-height: 100vh; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 500; } .menu-close { display: none; } .slidedown { overflow: hidden; display: block !important; position: absolute; left: 0; top: 100%; z-index: 1150; width: 100%; } .slidedown .menu { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; width: 100%; } .slidedown .menu .nav-item { width: 100%; text-align: center; } .slidedown .menu .nav-item .nav-link { width: 100%; } .btn { display: inline-block; padding: 8px 20px; text-align: center; font-weight: 400; background: none; border: none; text-decoration: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-transition: all 0.22s ease; transition: all 0.22s ease; border-radius: 4px; } .btn:focus { outline: none; } .btn.btn-choose-file { position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; } .btn.btn-choose-file input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer !important; z-index: 1; } .btn.btn-loading.loader-active { position: relative; pointer-events: none !important; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-sel