zeus
2 years ago
11 changed files with 855 additions and 4 deletions
@ -0,0 +1,360 @@ |
|||
// Slate 5.1.3 |
|||
// Bootswatch |
|||
|
|||
|
|||
// Mixins |
|||
|
|||
@mixin btn-shadow($color){ |
|||
@include gradient-y-three-colors(tint-color($color, 12%), $color, 60%, shade-color($color, 8%)); |
|||
filter: none; |
|||
} |
|||
|
|||
@mixin btn-shadow-inverse($color){ |
|||
@include gradient-y-three-colors(shade-color($color, 36%), shade-color($color, 30%), 40%, shade-color($color, 26%)); |
|||
filter: none; |
|||
} |
|||
|
|||
// Navbar |
|||
|
|||
.navbar { |
|||
border: 1px solid rgba(0, 0, 0, .6); |
|||
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3); |
|||
|
|||
.container { |
|||
padding: 0; |
|||
} |
|||
|
|||
.navbar-toggler { |
|||
border-color: rgba(0, 0, 0, .6); |
|||
} |
|||
|
|||
&-fixed-top { |
|||
border-width: 0 0 1px; |
|||
} |
|||
|
|||
&-fixed-bottom { |
|||
border-width: 1px 0 0; |
|||
} |
|||
|
|||
.nav-link { |
|||
padding: 1rem; |
|||
border-left: 1px solid rgba(255, 255, 255, .1); |
|||
border-right: 1px solid rgba(0, 0, 0, .2); |
|||
|
|||
&:hover, |
|||
&:focus { |
|||
@include btn-shadow-inverse($gray-800); |
|||
border-left: 1px solid rgba(0, 0, 0, .2); |
|||
} |
|||
} |
|||
|
|||
&-brand { |
|||
padding: .75rem 1rem subtract(24px, .75rem); |
|||
margin-right: 0; |
|||
border-right: 1px solid rgba(0, 0, 0, .2); |
|||
} |
|||
|
|||
.nav-item.active .nav-link { |
|||
background-color: rgba(0, 0, 0, .3); |
|||
border-left: 1px solid rgba(0, 0, 0, .2); |
|||
} |
|||
|
|||
&-nav .nav-item + .nav-item { |
|||
margin-left: 0; |
|||
} |
|||
|
|||
&.bg-light { |
|||
text-shadow: 1px 1px 1px rgba(0, 0, 0, .1); |
|||
|
|||
.nav-link { |
|||
&:hover, |
|||
&:focus { |
|||
@include btn-shadow-inverse($gray-600); |
|||
border-left: 1px solid rgba(0, 0, 0, .2); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 576px) { |
|||
.navbar-expand-sm { |
|||
.navbar-brand, |
|||
.nav-link { |
|||
border: none !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 768px) { |
|||
.navbar-expand-md { |
|||
.navbar-brand, |
|||
.nav-link { |
|||
border: none !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 992px) { |
|||
.navbar-expand-lg { |
|||
.navbar-brand, |
|||
.nav-link { |
|||
border: none !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// Buttons |
|||
|
|||
.btn { |
|||
border-color: rgba(0, 0, 0, .6); |
|||
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3); |
|||
|
|||
&:not([disabled]):not(.disabled).active, |
|||
&.disabled { |
|||
border-color: rgba(0, 0, 0, .6); |
|||
box-shadow: none; |
|||
} |
|||
|
|||
&:hover, |
|||
&:focus, |
|||
&:not([disabled]):not(.disabled):active, |
|||
&:not([disabled]):not(.disabled):active:hover, |
|||
&:not([disabled]):not(.disabled).active:hover { |
|||
border-color: rgba(0, 0, 0, .6); |
|||
} |
|||
} |
|||
|
|||
.btn-primary { |
|||
@include btn-shadow($primary); |
|||
|
|||
&:not([disabled]):not(.disabled):hover, |
|||
&:not([disabled]):not(.disabled):focus, |
|||
&:not([disabled]):not(.disabled):active:hover, |
|||
&:not([disabled]):not(.disabled).active:hover { |
|||
@include btn-shadow-inverse($primary); |
|||
} |
|||
} |
|||
|
|||
.btn-secondary { |
|||
@include btn-shadow($secondary); |
|||
|
|||
&:not([disabled]):not(.disabled):hover, |
|||
&:not([disabled]):not(.disabled):focus, |
|||
&:not([disabled]):not(.disabled):active, |
|||
&:not([disabled]):not(.disabled).active { |
|||
@include btn-shadow-inverse($secondary); |
|||
} |
|||
} |
|||
|
|||
.btn-success { |
|||
@include btn-shadow($success); |
|||
color: $white; |
|||
|
|||
&:not([disabled]):not(.disabled):hover, |
|||
&:not([disabled]):not(.disabled):focus, |
|||
&:not([disabled]):not(.disabled):active, |
|||
&:not([disabled]):not(.disabled).active { |
|||
@include btn-shadow-inverse($success); |
|||
} |
|||
} |
|||
|
|||
.btn-info { |
|||
@include btn-shadow($info); |
|||
color: $white; |
|||
|
|||
&:not([disabled]):not(.disabled):hover, |
|||
&:not([disabled]):not(.disabled):focus, |
|||
&:not([disabled]):not(.disabled):active, |
|||
&:not([disabled]):not(.disabled).active { |
|||
@include btn-shadow-inverse($info); |
|||
} |
|||
} |
|||
|
|||
.btn-warning { |
|||
@include btn-shadow($warning); |
|||
color: $white; |
|||
|
|||
&:not([disabled]):not(.disabled):hover, |
|||
&:not([disabled]):not(.disabled):focus, |
|||
&:not([disabled]):not(.disabled):active, |
|||
&:not([disabled]):not(.disabled).active { |
|||
@include btn-shadow-inverse($warning); |
|||
} |
|||
} |
|||
|
|||
.btn-danger { |
|||
@include btn-shadow($danger); |
|||
|
|||
&:not([disabled]):not(.disabled):hover, |
|||
&:not([disabled]):not(.disabled):focus, |
|||
&:not([disabled]):not(.disabled):active, |
|||
&:not([disabled]):not(.disabled).active { |
|||
@include btn-shadow-inverse($danger); |
|||
} |
|||
} |
|||
|
|||
.btn-outline { |
|||
&-primary { |
|||
color: $white; |
|||
} |
|||
} |
|||
|
|||
.btn-link, |
|||
.btn-link:hover { |
|||
border-color: transparent; |
|||
} |
|||
|
|||
.btn-group, |
|||
.btn-group-vertical { |
|||
.btn.active { |
|||
border-color: rgba(0, 0, 0, .6); |
|||
} |
|||
} |
|||
|
|||
// Typography |
|||
|
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6 { |
|||
text-shadow: -1px -1px 0 rgba(0, 0, 0, .3); |
|||
} |
|||
|
|||
// Forms |
|||
|
|||
legend { |
|||
color: $white; |
|||
} |
|||
|
|||
.input-group-addon { |
|||
@include btn-shadow($secondary); |
|||
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3); |
|||
color: $white; |
|||
} |
|||
|
|||
// Navs |
|||
|
|||
.nav-tabs { |
|||
.nav-link { |
|||
@include btn-shadow-inverse($gray-800); |
|||
border: 1px solid rgba(0, 0, 0, .6); |
|||
|
|||
&:not([disabled]):not(.disabled):hover, |
|||
&:not([disabled]):not(.disabled):focus, |
|||
&:not([disabled]):not(.disabled):active, |
|||
&:not([disabled]):not(.disabled).active { |
|||
@include btn-shadow($gray-800); |
|||
} |
|||
|
|||
&.disabled { |
|||
border: 1px solid rgba(0, 0, 0, .6); |
|||
} |
|||
} |
|||
|
|||
.nav-link, |
|||
.nav-link:hover { |
|||
color: $white; |
|||
} |
|||
} |
|||
|
|||
.nav-pills { |
|||
.nav-link { |
|||
@include btn-shadow($gray-800); |
|||
border: 1px solid rgba(0, 0, 0, .6); |
|||
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3); |
|||
color: $white; |
|||
|
|||
&:hover { |
|||
@include btn-shadow-inverse($gray-800); |
|||
border: 1px solid rgba(0, 0, 0, .6); |
|||
} |
|||
} |
|||
|
|||
.nav-link.active, |
|||
.nav-link:hover { |
|||
background-color: transparent; |
|||
@include btn-shadow-inverse($gray-800); |
|||
border: 1px solid rgba(0, 0, 0, .6); |
|||
} |
|||
|
|||
.nav-link.disabled, |
|||
.nav-link.disabled:hover { |
|||
@include btn-shadow($gray-800); |
|||
color: $nav-link-disabled-color; |
|||
} |
|||
} |
|||
|
|||
.pagination { |
|||
.page-link { |
|||
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3); |
|||
@include btn-shadow($gray-800); |
|||
|
|||
&:hover { |
|||
@include btn-shadow-inverse($gray-800); |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
|
|||
.page-item.active .page-link { |
|||
@include btn-shadow-inverse($gray-800); |
|||
} |
|||
|
|||
.page-item.disabled .page-link { |
|||
@include btn-shadow($gray-800); |
|||
} |
|||
} |
|||
|
|||
.breadcrumb { |
|||
border: 1px solid rgba(0, 0, 0, .6); |
|||
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3); |
|||
background-color: transparent; |
|||
@include btn-shadow($gray-800); |
|||
|
|||
a, |
|||
a:hover { |
|||
color: $white; |
|||
} |
|||
} |
|||
|
|||
// Indicators |
|||
|
|||
.alert { |
|||
border: none; |
|||
color: $white; |
|||
|
|||
a, |
|||
.alert-link { |
|||
color: $white; |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
@each $color, $value in $theme-colors { |
|||
&-#{$color} { |
|||
background-color: $value; |
|||
} |
|||
} |
|||
|
|||
&-light { |
|||
&, |
|||
a:not(.btn), |
|||
.alert-link { |
|||
color: $body-bg; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.badge { |
|||
&.bg-light { |
|||
color: $dark; |
|||
} |
|||
} |
|||
|
|||
// Containers |
|||
|
|||
.list-group { |
|||
&-item-action:hover { |
|||
background-color: shade-color($gray-900, 10%); |
|||
} |
|||
} |
|||
@ -0,0 +1,168 @@ |
|||
// Slate 5.1.3 |
|||
// Bootswatch |
|||
|
|||
$theme: "slate" !default; |
|||
|
|||
// |
|||
// Color system |
|||
// |
|||
|
|||
$white: #fff !default; |
|||
$gray-100: #f8f9fa !default; |
|||
$gray-200: #e9ecef !default; |
|||
$gray-300: #dee2e6 !default; |
|||
$gray-400: #ced4da !default; |
|||
$gray-500: #999 !default; |
|||
$gray-600: #7a8288 !default; |
|||
$gray-700: #52575c !default; |
|||
$gray-800: #3a3f44 !default; |
|||
$gray-900: #272b30 !default; |
|||
$black: #000 !default; |
|||
|
|||
$blue: #007bff !default; |
|||
$indigo: #6610f2 !default; |
|||
$purple: #6f42c1 !default; |
|||
$pink: #e83e8c !default; |
|||
$red: #ee5f5b !default; |
|||
$orange: #fd7e14 !default; |
|||
$yellow: #f89406 !default; |
|||
$green: #62c462 !default; |
|||
$teal: #20c997 !default; |
|||
$cyan: #5bc0de !default; |
|||
|
|||
$primary: $gray-800 !default; |
|||
$secondary: $gray-600 !default; |
|||
$success: $green !default; |
|||
$info: $cyan !default; |
|||
$warning: $yellow !default; |
|||
$danger: $red !default; |
|||
$light: $gray-200 !default; |
|||
$dark: $gray-900 !default; |
|||
|
|||
$min-contrast-ratio: 1.95 !default; |
|||
|
|||
// Body |
|||
|
|||
$body-bg: $gray-900 !default; |
|||
$body-color: #aaa !default; |
|||
|
|||
// Links |
|||
|
|||
$link-color: $white !default; |
|||
|
|||
// Fonts |
|||
|
|||
// Tables |
|||
|
|||
$table-color: $white !default; |
|||
$table-accent-bg: rgba($white, .05) !default; |
|||
$table-hover-bg: rgba($white, .075) !default; |
|||
$table-border-color: rgba($black, .6) !default; |
|||
$table-dark-border-color: $table-border-color !default; |
|||
$table-dark-color: $white !default; |
|||
|
|||
$table-bg-scale: 0 !default; |
|||
|
|||
// Buttons |
|||
|
|||
$input-btn-padding-y: .75rem !default; |
|||
$input-btn-padding-x: 1rem !default; |
|||
|
|||
// Forms |
|||
|
|||
$input-bg: $white !default; |
|||
$input-disabled-bg: #ccc !default; |
|||
|
|||
$input-color: $gray-900 !default; |
|||
|
|||
$form-check-input-bg: $white !default; |
|||
|
|||
// Dropdowns |
|||
|
|||
$dropdown-bg: $gray-800 !default; |
|||
$dropdown-border-color: rgba($black, .6) !default; |
|||
$dropdown-divider-bg: rgba($black, .15) !default; |
|||
$dropdown-link-color: $body-color !default; |
|||
$dropdown-link-hover-color: $white !default; |
|||
$dropdown-link-hover-bg: $body-bg !default; |
|||
$dropdown-link-active-color: $dropdown-link-hover-color !default; |
|||
$dropdown-link-active-bg: $dropdown-link-hover-bg !default; |
|||
|
|||
// Navs |
|||
|
|||
$nav-tabs-border-color: rgba($black, .6) !default; |
|||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color !default; |
|||
$nav-tabs-link-active-color: $white !default; |
|||
$nav-tabs-link-active-border-color: $nav-tabs-border-color !default; |
|||
|
|||
// Navbar |
|||
|
|||
$navbar-padding-y: 0 !default; |
|||
$navbar-dark-hover-color: $white !default; |
|||
$navbar-light-hover-color: $gray-800 !default; |
|||
$navbar-light-active-color: $gray-800 !default; |
|||
|
|||
|
|||
// Pagination |
|||
|
|||
$pagination-color: $white !default; |
|||
$pagination-bg: transparent !default; |
|||
$pagination-border-color: rgba($black, .6) !default; |
|||
$pagination-hover-color: $white !default; |
|||
$pagination-hover-bg: transparent !default; |
|||
$pagination-hover-border-color: rgba($black, .6) !default; |
|||
$pagination-active-bg: transparent !default; |
|||
$pagination-active-border-color: rgba($black, .6) !default; |
|||
$pagination-disabled-bg: transparent !default; |
|||
$pagination-disabled-border-color: rgba($black, .6) !default; |
|||
|
|||
// Cards |
|||
|
|||
$card-border-color: rgba($black, .6) !default; |
|||
$card-cap-bg: lighten($gray-800, 10%) !default; |
|||
$card-bg: lighten($body-bg, 5%) !default; |
|||
|
|||
// Popovers |
|||
|
|||
$popover-bg: lighten($body-bg, 5%) !default; |
|||
|
|||
// Toasts |
|||
|
|||
$toast-background-color: lighten($body-bg, 5%) !default; |
|||
$toast-border-color: rgba(0, 0, 0, .2) !default; |
|||
$toast-header-color: $body-color !default; |
|||
$toast-header-background-color: $toast-background-color !default; |
|||
$toast-header-border-color: $toast-border-color !default; |
|||
|
|||
// Modals |
|||
|
|||
$modal-content-bg: lighten($body-bg, 5%) !default; |
|||
$modal-header-border-color: rgba(0, 0, 0, .2) !default; |
|||
|
|||
// Progress bars |
|||
|
|||
$progress-bg: darken($gray-900, 5%) !default; |
|||
$progress-bar-color: $gray-600 !default; |
|||
|
|||
// List group |
|||
|
|||
$list-group-color: $white !default; |
|||
$list-group-bg: lighten($body-bg, 5%) !default; |
|||
$list-group-border-color: rgba($black, .6) !default; |
|||
$list-group-hover-bg: lighten($body-bg, 10%) !default; |
|||
$list-group-active-color: $white !default; |
|||
$list-group-active-bg: $list-group-hover-bg !default; |
|||
$list-group-active-border-color: $list-group-border-color !default; |
|||
$list-group-disabled-color: $gray-700 !default; |
|||
$list-group-action-color: $white !default; |
|||
|
|||
// Breadcrumbs |
|||
|
|||
$breadcrumb-padding-y: .375rem !default; |
|||
$breadcrumb-padding-x: .75rem !default; |
|||
$breadcrumb-active-color: $gray-500 !default; |
|||
$breadcrumb-border-radius: .25rem !default; |
|||
|
|||
// Code |
|||
|
|||
$pre-color: inherit !default; |
|||
@ -0,0 +1,6 @@ |
|||
|
|||
|
|||
body { |
|||
background: #EEF1F4!important; |
|||
} |
|||
|
|||
@ -0,0 +1,254 @@ |
|||
$font-color: #66615b !default; |
|||
$fill-font-color: rgba(255, 255, 255, 0.7); |
|||
|
|||
$none: 0 !default; |
|||
$border-thin: 1px !default; |
|||
$border-thick: 2px !default; |
|||
|
|||
$white-color: #FFFFFF !default; |
|||
$white-bg: #FFFFFF !default; |
|||
|
|||
$smoke-bg: #F5F5F5 !default; |
|||
$pale-bg: #FFFCF5 !default; |
|||
$medium-pale-bg: #F1EAE0 !default; |
|||
|
|||
$table-line-color: #CCC5B9 !default; |
|||
$muted-color: #a49e93 !default; |
|||
|
|||
$black-bg: rgba(30, 30, 30, .97) !default; |
|||
|
|||
$black-color: #333333 !default; |
|||
$black-hr: #444444 !default; |
|||
|
|||
$white-background-color: #FFFFFF !default; |
|||
$black-background-color: #212120 !default; |
|||
$darkblue-background-color: #35495E !default; // this is the dark blue color from Vue.js branding |
|||
|
|||
$light-gray: #E3E3E3 !default; |
|||
$medium-gray: #DDDDDD !default; |
|||
$dark-gray: #9A9A9A !default; |
|||
|
|||
$gray-input-bg: #fffcf5 !default; |
|||
$danger-input-bg: #FFC0A4 !default; |
|||
$success-input-bg: #ABF3CB !default; |
|||
$other-medium-gray: #A49E93 !default; |
|||
$transparent-bg: transparent !default; |
|||
|
|||
$default-color: #66615B !default; |
|||
$default-bg: #66615B !default; |
|||
$default-states-color: #403D39 !default; |
|||
|
|||
$primary-color: #7A9E9F !default; |
|||
$primary-bg: #7A9E9F !default; |
|||
$primary-states-color: #427C89 !default; |
|||
|
|||
$success-color: #41B883 !default; // this is the green color from Vue.js branding |
|||
$success-bg: #41B883 !default; |
|||
$success-states-color: #229863 !default; |
|||
|
|||
$info-color: #68B3C8 !default; |
|||
$info-bg: #68B3C8 !default; |
|||
$info-states-color: #3091B2 !default; |
|||
|
|||
$warning-color: #F3BB45 !default; |
|||
$warning-bg: #F3BB45 !default; |
|||
$warning-states-color: #BB992F !default; |
|||
|
|||
$danger-color: #EB5E28 !default; |
|||
$danger-bg: #EB5E28 !default; |
|||
$danger-states-color: #B33C12 !default; |
|||
|
|||
$link-disabled-color: #666666 !default; |
|||
|
|||
/* light colors - used for select dropdown */ |
|||
|
|||
$light-blue: rgba($primary-color, .2); |
|||
$light-azure: rgba($info-color, .2); |
|||
$light-green: rgba($success-color, .2); |
|||
$light-orange: rgba($warning-color, .2); |
|||
$light-red: rgba($danger-color, .2); |
|||
|
|||
//== Components |
|||
// |
|||
$padding-base-vertical: 7px !default; |
|||
$padding-base-horizontal: 18px !default; |
|||
|
|||
$padding-round-vertical: 9px !default; |
|||
$padding-round-horizontal: 18px !default; |
|||
|
|||
$padding-simple-vertical: 10px !default; |
|||
$padding-simple-horizontal: 18px !default; |
|||
|
|||
$padding-large-vertical: 11px !default; |
|||
$padding-large-horizontal: 30px !default; |
|||
|
|||
$padding-small-vertical: 4px !default; |
|||
$padding-small-horizontal: 10px !default; |
|||
|
|||
$padding-xs-vertical: 2px !default; |
|||
$padding-xs-horizontal: 5px !default; |
|||
|
|||
$padding-label-vertical: 2px !default; |
|||
$padding-label-horizontal: 12px !default; |
|||
|
|||
// padding for links inside dropdown menu |
|||
$padding-dropdown-vertical: 10px !default; |
|||
$padding-dropdown-horizontal: 15px !default; |
|||
|
|||
$margin-large-vertical: 30px !default; |
|||
$margin-base-vertical: 15px !default; |
|||
|
|||
// border radius for buttons |
|||
$border-radius-btn-small: 26px !default; |
|||
$border-radius-btn-base: 20px !default; |
|||
$border-radius-btn-large: 50px !default; |
|||
|
|||
// Cristina: am schimbat aici si s-au modificat inputurile |
|||
$margin-bottom: 0 0 10px 0 !default; |
|||
$border-radius-small: 3px !default; |
|||
$border-radius-base: 4px !default; |
|||
$border-radius-large: 6px !default; |
|||
$border-radius-extreme: 6px !default; |
|||
|
|||
$border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default; |
|||
$border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default; |
|||
|
|||
$btn-round-radius: 30px !default; |
|||
|
|||
$height-base: 40px !default; |
|||
|
|||
$font-size-base: 14px !default; |
|||
$font-size-xs: 12px !default; |
|||
$font-size-small: 12px !default; |
|||
$font-size-medium: 16px !default; |
|||
$font-size-large: 18px !default; |
|||
$font-size-large-navbar: 20px !default; |
|||
|
|||
$font-size-h1: 3.2em !default; |
|||
$font-size-h2: 2.6em !default; |
|||
$font-size-h3: 1.825em !default; |
|||
$font-size-h4: 1.5em !default; |
|||
$font-size-h5: 1.25em !default; |
|||
$font-size-h6: 0.9em !default; |
|||
$font-paragraph: 16px !default; |
|||
$font-size-navbar: 16px !default; |
|||
$font-size-small: 12px !default; |
|||
|
|||
$font-weight-light: 300 !default; |
|||
$font-weight-normal: 400 !default; |
|||
$font-weight-semi: 500 !default; |
|||
$font-weight-bold: 600 !default; |
|||
|
|||
$line-height-small: 20px !default; |
|||
$line-height-general: 1.4em !default; |
|||
$line-height: 36px !default; |
|||
$line-height-lg: 54px !default; |
|||
|
|||
$border-radius-top: 10px 10px 0 0 !default; |
|||
$border-radius-bottom: 0 0 10px 10px !default; |
|||
|
|||
$dropdown-shadow: 0 2px rgba(17, 16, 15, 0.1), 0 2px 10px rgba(17, 16, 15, 0.1); |
|||
|
|||
$general-transition-time: 300ms !default; |
|||
|
|||
$slow-transition-time: 300ms !default; |
|||
$dropdown-coordinates: 29px -50px !default; |
|||
|
|||
$fast-transition-time: 150ms !default; |
|||
$select-coordinates: 50% -40px !default; |
|||
|
|||
$transition-linear: linear !default; |
|||
$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default; |
|||
$transition-ease: ease 0s; |
|||
|
|||
$navbar-padding-a: 10px 15px; |
|||
$navbar-margin-a: 15px 0px; |
|||
|
|||
$padding-social-a: 10px 5px; |
|||
|
|||
$navbar-margin-a-btn: 15px 3px; |
|||
$navbar-margin-a-btn-round: 16px 3px; |
|||
|
|||
$navbar-padding-brand: 20px 15px; |
|||
$navbar-margin-brand: 5px 0px; |
|||
|
|||
$navbar-margin-brand-icons: 12px auto; |
|||
|
|||
$navbar-margin-btn: 15px 3px; |
|||
|
|||
$height-icon: 64px !default; |
|||
$width-icon: 64px !default; |
|||
$padding-icon: 12px !default; |
|||
$border-radius-icon: 15px !default; |
|||
|
|||
$white-navbar: rgba(#FFFFFF, .96); |
|||
$blue-navbar: rgba(#34ACDC, .98); |
|||
$azure-navbar: rgba(#5BCAFF, .98); |
|||
$green-navbar: rgba(#4CD964, .98); |
|||
$orange-navbar: rgba(#FF9500, .98); |
|||
$red-navbar: rgba(#FF4C40, .98); |
|||
|
|||
$bg-nude: #f4f3ef !default; |
|||
$bg-primary: #8ECFD5 !default; |
|||
$bg-info: #7CE4FE !default; |
|||
$bg-success: #8EF3C5 !default; |
|||
$bg-warning: #FFE28C !default; |
|||
$bg-danger: #FF8F5E !default; |
|||
|
|||
$topbar-x: topbar-x !default; |
|||
$topbar-back: topbar-back !default; |
|||
$bottombar-x: bottombar-x !default; |
|||
$bottombar-back: bottombar-back !default; |
|||
|
|||
$transition-linear: linear !default; |
|||
$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default; |
|||
$transition-ease: ease 0s; |
|||
$transition-ease-in: ease-in !default; |
|||
$transition-ease-out: ease-out !default; |
|||
|
|||
$general-transition-time: 300ms !default; |
|||
|
|||
$slow-transition-time: 370ms !default; |
|||
$dropdown-coordinates: 29px -50px !default; |
|||
|
|||
$fast-transition-time: 150ms !default; |
|||
|
|||
$ultra-fast-transition-time: 100ms !default; |
|||
|
|||
$select-coordinates: 50% -40px !default; |
|||
|
|||
$padding-zero: 0px !default; |
|||
|
|||
$sidebar-width: calc(100% - 260px) !default; |
|||
$medium-dark-gray: #AAAAAA !default; |
|||
|
|||
//variables used in cards |
|||
$card-black-color: #252422 !default; |
|||
$card-muted-color: #ccc5b9 !default; |
|||
|
|||
//variables used for sidebar |
|||
$sidebar-background-dark-blue: #506367; |
|||
|
|||
$sidebar-background-blue: #b8d8d8 !default; |
|||
$sidebar-font-blue: #506568 !default; |
|||
$sidebar-subtitle-blue: #7a9e9f !default; |
|||
|
|||
$sidebar-background-green: #d5e5a3 !default; |
|||
$sidebar-font-green: #60773d !default; |
|||
$sidebar-subtitle-green: #92ac56 !default; |
|||
|
|||
$sidebar-background-yellow: #ffe28c !default; |
|||
$sidebar-font-yellow: #b25825 !default; |
|||
$sidebar-subtitle-yellow: #d88715 !default; |
|||
|
|||
$sidebar-background-brown: #d6c1ab !default; |
|||
$sidebar-font-brown: #75442e !default; |
|||
$sidebar-subtitle-brown: #a47e65 !default; |
|||
|
|||
$sidebar-background-purple: #baa9ba !default; |
|||
$sidebar-font-purple: #3a283d !default; |
|||
$sidebar-subtitle-purple: #5a283d !default; |
|||
|
|||
$sidebar-background-orange: #ff8f5e !default; |
|||
$sidebar-font-orange: #772510 !default; |
|||
$sidebar-subtitle-orange: #e95e37 !default; |
|||
@ -0,0 +1,6 @@ |
|||
|
|||
@import "@/assets/css/_darkvariables.scss"; |
|||
|
|||
body { |
|||
background: lighten($body-bg, 5%) !default; |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
|
|||
// Define variable defaults |
|||
$body-bg: #000; |
|||
$body-color: #111; |
|||
|
|||
@import 'bootstrap/dist/css/bootstrap.css'; |
|||
@import 'bootstrap-vue/dist/bootstrap-vue.css'; |
|||
|
|||
// Then import Bootstrap an BootstrapVue SCSS files (order is important) |
|||
//@import 'node_modules/bootstrap/scss/bootstrap.scss'; |
|||
//@import 'node_modules/bootstrap-vue/src/index.scss' |
|||
Loading…
Reference in new issue